/*
 * Hub Pages – Stylesheet
 * Theme: Estatika Clean
 * Prefix: .hub-
 *
 * Design tokens
 * --hub-bg-light  : #F6F4F1
 * --hub-bg-white  : #FFFFFF
 * --hub-bg-muted  : #EAE6E1
 * --hub-accent    : #7FB13D
 * --hub-gold      : #C7A87A
 * --hub-text      : #1A1A1A
 * --hub-text-muted: #666666
 * --hub-border    : #DDD8D2
 */

/* ═══════════════════════════════════════════
   CSS CUSTOM PROPERTIES
═══════════════════════════════════════════ */
:root {
    --hub-bg-light   : #F6F4F1;
    --hub-bg-white   : #FFFFFF;
    --hub-bg-muted   : #EAE6E1;
    --hub-accent     : #7FB13D;
    --hub-gold       : #C7A87A;
    --hub-gold-dark  : #b2945f;
    --hub-text       : #1A1A1A;
    --hub-text-muted : #666666;
    --hub-border     : #DDD8D2;
    --hub-radius     : 4px;
    --hub-transition : 0.28s ease;
    --hub-shadow-sm  : 0 2px 12px rgba(0, 0, 0, 0.06);
    --hub-shadow-md  : 0 8px 32px rgba(0, 0, 0, 0.10);
}


/* ═══════════════════════════════════════════
   SHARED BUTTON UTILITIES
═══════════════════════════════════════════ */
.btn {
    display         : inline-block;
    padding         : 14px 34px;
    font-family     : 'Inter', sans-serif;
    font-size       : 14px;
    font-weight     : 500;
    letter-spacing  : 0.06em;
    text-transform  : uppercase;
    text-decoration : none;
    border-radius   : var(--hub-radius);
    cursor          : pointer;
    transition      : background-color var(--hub-transition),
                      color            var(--hub-transition),
                      border-color     var(--hub-transition),
                      box-shadow       var(--hub-transition);
    border          : 2px solid transparent;
    line-height     : 1;
    white-space     : nowrap;
}

.btn--primary {
    background-color : var(--hub-gold);
    color            : #FFFFFF !important;
    border-color     : var(--hub-gold);
}
.btn--primary:hover,
.btn--primary:focus-visible {
    background-color : var(--hub-gold-dark);
    border-color     : var(--hub-gold-dark);
    box-shadow       : 0 4px 18px rgba(199, 168, 122, 0.35);
}

.btn--secondary {
    background-color : transparent;
    color            : #C7A87A !important;
    border-color     : #C7A87A;
}
.btn--secondary:hover,
.btn--secondary:focus-visible {
    background-color : #C7A87A;
    border-color     : #C7A87A;
    color            : #FFFFFF !important;
    box-shadow       : 0 4px 18px rgba(199, 168, 122, 0.35);
}


/* ═══════════════════════════════════════════
   SHARED HUB LABEL (eyebrow)
═══════════════════════════════════════════ */
.hub-label {
    display        : inline-block;
    font-family    : 'Inter', sans-serif;
    font-size      : 11px;
    font-weight    : 700;
    letter-spacing : 0.16em;
    text-transform : uppercase;
    color          : var(--hub-accent);
    margin-bottom  : 12px;
}


/* ═══════════════════════════════════════════
   SHARED HUB BUTTONS
═══════════════════════════════════════════ */
.hub-btn {
    display         : inline-flex;
    align-items     : center;
    gap             : 8px;
    padding         : 15px 36px;
    font-family     : 'Inter', sans-serif;
    font-size       : 14px;
    font-weight     : 500;
    letter-spacing  : 0.06em;
    text-transform  : uppercase;
    text-decoration : none;
    border-radius   : var(--hub-radius);
    border          : 2px solid transparent;
    cursor          : pointer;
    transition      : background-color var(--hub-transition),
                      color            var(--hub-transition),
                      border-color     var(--hub-transition),
                      box-shadow       var(--hub-transition);
    white-space     : nowrap;
    line-height     : 1;
}
.hub-btn--primary {
    background-color : var(--hub-gold);
    color            : #FFFFFF !important;
    border-color     : var(--hub-gold);
}
.hub-btn--primary:hover,
.hub-btn--primary:focus-visible {
    background-color : var(--hub-gold-dark);
    border-color     : var(--hub-gold-dark);
    color            : #FFFFFF;
    box-shadow       : 0 4px 18px rgba(199,168,122,0.4);
}
.hub-btn--whatsapp {
    background-color : #5a8a28;
    color            : #FFFFFF !important;
    border-color     : #5a8a28;
}
.hub-btn--whatsapp:hover,
.hub-btn--whatsapp:focus-visible {
    background-color : #4e7a22;
    border-color     : #4e7a22;
    color            : #FFFFFF;
    box-shadow       : 0 4px 18px rgba(127,177,61,0.35);
}
.hub-btn--secondary {
    background-color : transparent;
    color            : #C7A87A !important;
    border-color     : #C7A87A;
}
.hub-btn--secondary:hover,
.hub-btn--secondary:focus-visible {
    background-color : #C7A87A;
    border-color     : #C7A87A;
    color            : #FFFFFF !important;
    box-shadow       : 0 4px 18px rgba(199,168,122,0.35);
}
.hub-btn--outline {
    background-color : transparent;
    color            : #333333;
    border-color     : #333333;
}
.hub-btn--outline:hover,
.hub-btn--outline:focus-visible {
    background-color : #333333;
    color            : #FFFFFF;
}


/* ═══════════════════════════════════════════
   1. HUB HERO  (White bg)
═══════════════════════════════════════════ */
.hub-hero {
    background-color : var(--hub-bg-white);
    padding          : 80px 24px 72px;
    text-align       : center;
    border-bottom    : 1px solid var(--hub-border);
}
.hub-hero__container {
    max-width : 820px;
    margin    : 0 auto;
}
.hub-hero__headline {
    font-family    : 'Playfair Display', Georgia, serif;
    font-size      : clamp(36px, 4.5vw, 52px);
    font-weight    : 700;
    color          : #333333;
    line-height    : 1.18;
    margin         : 0 0 20px;
    letter-spacing : -0.01em;
}
.hub-hero__subline {
    font-family  : 'Playfair Display', Georgia, serif;
    font-size    : clamp(17.6px, 2vw, 22px);
    font-weight  : 400;
    font-style   : italic;
    color        : var(--hub-gold);
    margin       : 0 0 24px;
    line-height  : 1.5;
}
.hub-hero__intro {
    font-family  : 'Inter', sans-serif;
    font-size    : 17px;
    font-weight  : 300;
    color        : var(--hub-text-muted);
    line-height  : 1.8;
    margin       : 0 auto 40px;
    max-width    : 680px;
}
.hub-hero__actions {
    display         : flex;
    gap             : 16px;
    justify-content : center;
    flex-wrap       : wrap;
}

@media (max-width: 560px) {
    .hub-hero { padding: 72px 20px 64px; }
    .hub-hero__actions .hub-btn { width: 100%; justify-content: center; }
}


/* ═══════════════════════════════════════════
   2. HUB CONCERNS GRID  (Ivory bg)
═══════════════════════════════════════════ */
.hub-concerns {
    background-color : var(--hub-bg-light);
    padding          : 72px 24px;
}
.hub-concerns__container {
    max-width : 1100px;
    margin    : 0 auto;
}
.hub-concerns__header {
    text-align    : center;
    margin-bottom : 52px;
}
.hub-concerns__title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(28px, 3vw, 36px);
    font-weight   : 600;
    color         : #333333;
    line-height   : 1.25;
    margin        : 0 0 12px;
    letter-spacing: -0.01em;
}
.hub-concerns__intro {
    font-family : 'Inter', sans-serif;
    font-size   : 16px;
    font-weight : 300;
    color       : var(--hub-text-muted);
    line-height : 1.75;
    margin      : 0 auto;
    max-width   : 600px;
}

/* Pill grid */
.hub-concerns__grid {
    display               : grid;
    grid-template-columns : repeat(4, 1fr);
    gap                   : 14px;
    list-style            : none;
    margin                : 0;
    padding               : 0;
}
@media (max-width: 1024px) {
    .hub-concerns__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
    .hub-concerns__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 420px) {
    .hub-concerns__grid { grid-template-columns: 1fr; gap: 10px; }
}

.hub-concern-pill__link {
    display          : flex;
    align-items      : center;
    gap              : 10px;
    padding          : 16px 20px;
    background-color : var(--hub-bg-white);
    border           : 1px solid var(--hub-border);
    border-radius    : var(--hub-radius);
    text-decoration  : none;
    font-family      : 'Inter', sans-serif;
    font-size        : 15px;
    font-weight      : 500;
    color            : #333333;
    transition       : border-color var(--hub-transition),
                       color        var(--hub-transition),
                       box-shadow   var(--hub-transition);
    line-height      : 1.3;
}
.hub-concern-pill__link:hover,
.hub-concern-pill__link:focus-visible {
    border-color : var(--hub-gold);
    color        : var(--hub-gold);
    box-shadow   : 0 2px 12px rgba(199,168,122,0.18);
}
.hub-concern-pill__icon {
    flex-shrink : 0;
    color       : var(--hub-gold);
    display     : flex;
    align-items : center;
}


/* ═══════════════════════════════════════════
   3. HUB TREATMENTS LIST  (White bg)
═══════════════════════════════════════════ */
.hub-treatments {
    background-color : var(--hub-bg-white);
    padding          : 72px 24px;
    border-top       : 1px solid var(--hub-border);
}
.hub-treatments__container {
    max-width : 900px;
    margin    : 0 auto;
}
.hub-treatments__header {
    margin-bottom : 48px;
}
.hub-treatments__title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(28px, 3vw, 36px);
    font-weight   : 600;
    color         : #333333;
    line-height   : 1.25;
    margin        : 0;
    letter-spacing: -0.01em;
}

.hub-treatments__list {
    list-style : none;
    margin     : 0;
    padding    : 0;
}
.hub-treatment-row {
    display               : grid;
    grid-template-columns : 1fr auto auto;
    gap                   : 16px 24px;
    align-items           : center;
    padding               : 22px 0;
    border-bottom         : 1px solid var(--hub-border);
    transition            : background-color var(--hub-transition);
}
.hub-treatment-row:first-child { border-top: 1px solid var(--hub-border); }
.hub-treatment-row__title {
    font-family  : 'Playfair Display', Georgia, serif;
    font-size    : 18px;
    font-weight  : 600;
    color        : #333333;
    margin       : 0 0 4px;
    line-height  : 1.3;
}
.hub-treatment-row__title a {
    color           : inherit;
    text-decoration : none;
    transition      : color var(--hub-transition);
}
.hub-treatment-row__title a:hover { color: var(--hub-accent); }
.hub-treatment-row__desc {
    font-family : 'Inter', sans-serif;
    font-size   : 14.4px;
    color       : var(--hub-text-muted);
    line-height : 1.6;
    margin      : 0;
}
.hub-treatment-row__time {
    display     : flex;
    align-items : center;
    gap         : 5px;
    font-family : 'Inter', sans-serif;
    font-size   : 13px;
    color       : var(--hub-text-muted);
    white-space : nowrap;
}
.hub-treatment-row__link {
    font-family     : 'Inter', sans-serif;
    font-size       : 13px;
    font-weight     : 500;
    color           : var(--hub-gold);
    text-decoration : none;
    white-space     : nowrap;
    letter-spacing  : 0.02em;
    transition      : color var(--hub-transition);
}
.hub-treatment-row__link:hover { color: var(--hub-gold-dark); }

@media (max-width: 600px) {
    .hub-treatment-row {
        grid-template-columns: 1fr auto;
        grid-template-rows   : auto auto;
    }
    .hub-treatment-row__time { grid-column: 1; grid-row: 2; }
    .hub-treatment-row__link { grid-column: 2; grid-row: 1 / 3; align-self: center; }
}


/* ═══════════════════════════════════════════
   4. HUB PROGRAMMES  (Ivory bg)
═══════════════════════════════════════════ */
.hub-programmes {
    background-color : var(--hub-bg-light);
    padding          : 76px 24px;
    border-top       : 1px solid var(--hub-border);
}
.hub-programmes__container {
    max-width : 1180px;
    margin    : 0 auto;
}
.hub-programmes__header {
    text-align    : center;
    margin-bottom : 56px;
}
.hub-programmes__title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(30px, 3.5vw, 40px);
    font-weight   : 600;
    color         : #333333;
    line-height   : 1.2;
    margin        : 0 0 12px;
    letter-spacing: -0.01em;
}

.hub-programmes__grid {
    display               : grid;
    grid-template-columns : repeat(3, 1fr);
    gap                   : 28px;
}
@media (max-width: 1024px) {
    .hub-programmes__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .hub-programmes__grid { grid-template-columns: 1fr; }
}

.hub-prog-card {
    background-color : var(--hub-bg-white);
    border           : 1px solid var(--hub-border);
    border-radius    : var(--hub-radius);
    padding          : 36px 32px 32px;
    display          : flex;
    flex-direction   : column;
    border-top       : 3px solid var(--hub-gold);
    transition       : transform var(--hub-transition), box-shadow var(--hub-transition);
}
.hub-prog-card:hover {
    transform  : translateY(-4px);
    box-shadow : var(--hub-shadow-md);
}
.hub-prog-card__title {
    font-family  : 'Playfair Display', Georgia, serif;
    font-size    : 20px;
    font-weight  : 600;
    color        : #333333;
    margin       : 0 0 8px;
    line-height  : 1.3;
}
.hub-prog-card__subtitle {
    font-family  : 'Inter', sans-serif;
    font-size    : 14px;
    color        : var(--hub-gold);
    margin       : 0 0 24px;
    font-weight  : 500;
    line-height  : 1.5;
}
.hub-prog-card__benefits {
    list-style : none;
    margin     : 0 0 28px;
    padding    : 0;
    flex       : 1;
}
.hub-prog-card__benefit {
    display      : flex;
    align-items  : flex-start;
    gap          : 10px;
    padding      : 8px 0;
    font-family  : 'Inter', sans-serif;
    font-size    : 15px;
    color        : #4a4a4a;
    line-height  : 1.5;
    border-bottom: 1px solid var(--hub-border);
}
.hub-prog-card__benefit:last-child { border-bottom: none; }
.hub-prog-card__btn { align-self: flex-start; }


/* ═══════════════════════════════════════════
   5. HUB RESULTS  (Light Beige bg)
═══════════════════════════════════════════ */
.hub-results {
    background-color : var(--hub-bg-muted);
    padding          : 72px 24px;
    border-top       : 1px solid var(--hub-border);
}
.hub-results__container {
    max-width  : 680px;
    margin     : 0 auto;
    text-align : center;
}
.hub-results__title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(28px, 3vw, 36px);
    font-weight   : 600;
    color         : #333333;
    line-height   : 1.25;
    margin        : 0 0 36px;
    letter-spacing: -0.01em;
}
.hub-results__list {
    list-style     : none;
    margin         : 0 0 24px;
    padding        : 0;
    text-align     : left;
    display        : inline-flex;
    flex-direction : column;
    width          : 100%;
}
.hub-result-item {
    display      : flex;
    align-items  : flex-start;
    gap          : 12px;
    padding      : 14px 0;
    border-bottom: 1px solid var(--hub-border);
    font-family  : 'Inter', sans-serif;
    font-size    : 16px;
    color        : #4a4a4a;
    line-height  : 1.6;
}
.hub-result-item:last-child { border-bottom: none; }
.hub-results__note {
    font-family : 'Inter', sans-serif;
    font-size   : 14px;
    color       : var(--hub-text-muted);
    line-height : 1.7;
    margin      : 0;
    font-style  : italic;
}


/* ═══════════════════════════════════════════
   6. HUB PRICING  (White bg)
═══════════════════════════════════════════ */
.hub-pricing {
    background-color : var(--hub-bg-white);
    padding          : 72px 24px;
    text-align       : center;
    border-top       : 1px solid var(--hub-border);
}
.hub-pricing__container {
    max-width : 680px;
    margin    : 0 auto;
}
.hub-pricing__title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(28px, 3vw, 36px);
    font-weight   : 600;
    color         : #333333;
    line-height   : 1.25;
    margin        : 0 0 20px;
    letter-spacing: -0.01em;
}
.hub-pricing__text {
    font-family  : 'Inter', sans-serif;
    font-size    : 18px;
    font-weight  : 500;
    color        : var(--hub-gold);
    line-height  : 1.6;
    margin       : 0 0 12px;
}
.hub-pricing__note {
    font-family : 'Inter', sans-serif;
    font-size   : 14.4px;
    color       : var(--hub-text-muted);
    line-height : 1.7;
    margin      : 0 0 36px;
    font-style  : italic;
}


/* ═══════════════════════════════════════════
   7. HUB CTA  (Beige bg)
═══════════════════════════════════════════ */
.hub-cta {
    background-color : #ffffff;
    border-top       : 1px solid var(--hub-border);
    padding          : 76px 24px;
    text-align       : center;
}
.hub-cta__container {
    max-width : 680px;
    margin    : 0 auto;
}
.hub-cta__heading {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(28px, 3.5vw, 40px);
    font-weight   : 600;
    color         : var(--hub-text);
    line-height   : 1.25;
    margin        : 0 0 20px;
    letter-spacing: -0.01em;
}
.hub-cta__subtext {
    font-family : 'Inter', sans-serif;
    font-size   : 16px;
    font-weight : 300;
    color       : var(--hub-text-muted);
    line-height : 1.75;
    margin      : 0 0 36px;
}
.hub-cta__btn {
    padding   : 16px 44px;
    font-size : 15px;
}


/* ═══════════════════════════════════════════
   ACCESSIBILITY — focus ring
═══════════════════════════════════════════ */
.hub-concern-pill__link:focus-visible,
.hub-treatment-row__link:focus-visible,
.hub-prog-card__btn:focus-visible,
.hub-cta__btn:focus-visible {
    outline        : 3px solid var(--hub-accent);
    outline-offset : 3px;
}


/* ═══════════════════════════════════════════
   TABLET — global hub tweaks
═══════════════════════════════════════════ */
@media (max-width: 1024px) {
    .hub-hero        { padding: 60px 20px 52px; }
    .hub-concerns    { padding: 52px 20px; }
    .hub-treatments  { padding: 52px 20px; }
    .hub-programmes  { padding: 56px 20px; }
    .hub-results     { padding: 52px 20px; }
    .hub-pricing     { padding: 52px 20px; }
    .hub-cta         { padding: 56px 20px; }
    .hub-why         { padding: 56px 20px; }
    .hub-suitable    { padding: 52px 20px; }
    .hub-concerns__header  { margin-bottom: 36px; }
    .hub-programmes__header { margin-bottom: 40px; }
}

/* ═══════════════════════════════════════════
   MOBILE — global hub tweaks
═══════════════════════════════════════════ */
@media (max-width: 768px) {
    .hub-hero        { padding: 52px 20px 44px; }
    .hub-concerns    { padding: 48px 20px; }
    .hub-treatments  { padding: 48px 20px; }
    .hub-programmes  { padding: 52px 20px; }
    .hub-results     { padding: 48px 20px; }
    .hub-pricing     { padding: 48px 20px; }
    .hub-cta         { padding: 52px 20px; }
    .hub-treatment-row { grid-template-columns: 1fr; }
    .hub-treatment-row__time,
    .hub-treatment-row__link { justify-self: start; }
}
@media (max-width: 480px) {
    .hub-prog-card { padding: 28px 22px 24px; }
    .hub-concern-pill__link { font-size: 14px; padding: 14px 16px; }
}


/* ═══════════════════════════════════════════
   ALL-TREATMENTS GRID (hub auto-query)
   Used on the /treatments/ page when no
   hub_treatments meta is set.
═══════════════════════════════════════════ */

.hub-treatments-all {
    background : var(--hub-bg-white);
    padding    : 0 0 88px;
}
.hub-grid__container {
    max-width : 1200px;
    margin    : 0 auto;
    padding   : 0 40px;
}

/* Category section header */
.hub-treatments-category {
    padding-top: 72px;
}

/* Separator between consecutive category sections */
.hub-treatments-category + .hub-treatments-category {
    margin-top  : 56px;
    padding-top : 56px;
    border-top  : 1px solid var(--hub-border);
}
@media (max-width: 560px) {
    .hub-treatments-category + .hub-treatments-category {
        margin-top  : 40px;
        padding-top : 40px;
    }
}
.hub-treatments-category .hub-treatments__header {
    margin-bottom: 40px;
}
.hub-treatments-category .hub-treatments__header .hub-label {
    display      : block;
    margin-bottom: 8px;
}
.hub-treatments-category .hub-treatments__header h2 {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : clamp(24px, 2.5vw, 32px);
    font-weight   : 600;
    color         : var(--hub-text);
    line-height   : 1.25;
    margin        : 0;
    letter-spacing: -0.01em;
}

/* Card grid */
.hub-grid__items {
    display              : grid;
    grid-template-columns: repeat(3, 1fr);
    gap                  : 28px;
}
@media (max-width: 900px) {
    .hub-grid__items { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
    .hub-grid__items { grid-template-columns: 1fr; gap: 20px; }
    .hub-grid__container { padding: 0 20px; }
}

/* Individual card */
.hub-card {
    display        : flex;
    flex-direction : column;
    background     : var(--hub-bg-white);
    border         : 1px solid var(--hub-border);
    border-radius  : var(--hub-radius);
    overflow       : hidden;
    transition     : box-shadow var(--hub-transition), transform var(--hub-transition);
}
.hub-card:hover {
    box-shadow : var(--hub-shadow-md);
    transform  : translateY(-3px);
}

/* Card image */
.hub-card__image-wrap {
    display        : block;
    aspect-ratio   : 4 / 3;
    overflow       : hidden;
    background     : var(--hub-bg-light);
    text-decoration: none;
}
.hub-card__image-wrap--placeholder {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    justify-content : center;
    gap             : 14px;
    background      : linear-gradient(145deg, #F7F2ED 0%, #EDE5DA 100%);
    border          : 1.5px dashed #C8B49A;
}

.hub-card__image-wrap--placeholder::before {
    content           : '';
    display           : block;
    width             : 52px;
    height            : 52px;
    background-image  : url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A8927A' stroke-width='1.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/%3E%3Ccircle cx='12' cy='13' r='4'/%3E%3C/svg%3E");
    background-size   : contain;
    background-repeat : no-repeat;
    background-position: center;
    opacity           : 0.7;
}

.hub-card__image-wrap--placeholder::after {
    content        : 'Add Photo';
    font-family    : 'Inter', sans-serif;
    font-size      : 0.6875rem;
    font-weight    : 500;
    color          : #A8927A;
    letter-spacing : 0.12em;
    text-transform : uppercase;
}
.hub-card__image {
    width     : 100%;
    height    : 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}
.hub-card:hover .hub-card__image {
    transform: scale(1.04);
}

/* Card body */
.hub-card__body {
    display       : flex;
    flex-direction: column;
    flex          : 1;
    padding       : 22px 22px 24px;
    gap           : 10px;
}
.hub-card__title {
    font-family   : 'Playfair Display', Georgia, serif;
    font-size     : 17px;
    font-weight   : 600;
    color         : var(--hub-text);
    margin        : 0;
    line-height   : 1.3;
}
.hub-card__description {
    font-family: 'Inter', sans-serif;
    font-size  : 14px;
    color      : var(--hub-text-muted);
    line-height: 1.65;
    margin     : 0;
    flex       : 1;
}
.hub-card__btn {
    align-self : flex-start;
    margin-top : 6px;
    padding    : 10px 20px;
    font-size  : 13px;
}

/* ── Concerns microcopy ─────────────────────────────────────────────────────── */
.hub-concerns__microcopy {
    text-align  : center;
    font-size   : 15px;
    color       : var(--hub-text-muted);
    margin      : -8px 0 28px;
    max-width   : 560px;
    margin-left : auto;
    margin-right: auto;
    line-height : 1.65;
}

/* ── Why Combination Treatments ─────────────────────────────────────────────── */
.hub-why {
    background  : #F6F4F1;
    padding     : 80px 24px;
}
.hub-why__container {
    max-width : 900px;
    margin    : 0 auto;
}
.hub-why__inner {
    display         : flex;
    flex-direction  : column;
    align-items     : center;
    text-align      : center;
    gap             : 20px;
}
.hub-why__heading {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 32px;
    font-weight : 600;
    color       : #1E2820;
    line-height : 1.25;
    margin      : 8px 0 0;
}
.hub-why__body {
    font-size   : 16px;
    line-height : 1.8;
    color       : #5a5a5a;
    max-width   : 720px;
}

/* ── Suitable For ────────────────────────────────────────────────────────────── */
.hub-suitable {
    background  : #FFFFFF;
    padding     : 72px 24px;
}
.hub-suitable__container {
    max-width   : 960px;
    margin      : 0 auto;
    text-align  : center;
}
.hub-suitable__heading {
    font-family : 'Playfair Display', Georgia, serif;
    font-size   : 28px;
    font-weight : 600;
    color       : #1E2820;
    margin      : 8px 0 40px;
}
.hub-suitable__list {
    display               : grid;
    grid-template-columns : repeat(auto-fill, minmax(220px, 1fr));
    gap                   : 14px 24px;
    list-style            : none;
    padding               : 0;
    text-align            : left;
    max-width             : 800px;
    margin                : 0 auto;
}
.hub-suitable__item {
    display     : flex;
    align-items : center;
    gap         : 10px;
    font-size   : 15px;
    color       : #4a4a4a;
    line-height : 1.5;
}
.hub-suitable__item svg {
    flex-shrink : 0;
}