/* ============================================================
   Homepage Sections
   ============================================================ */

/* ── Shared section helpers ─────────────────────────────── */
.ph-section {
    padding: 80px 0;
}
.ph-section__header {
    text-align: center;
    max-width: 800px;
    margin: 0 auto 52px;
}
.ph-section__header--row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    max-width: 100%;
    margin-bottom: 40px;
}
.ph-section__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 700;
    color: var(--ph-green);
    text-transform: uppercase;
    letter-spacing: 0.32px;
    margin-bottom: 0px;
}
.ph-section__title {
    font-size: clamp(28px, 3.5vw, 45px);
    font-weight: 800;
    color: var(--ph-black);
    line-height: 1.2;
    letter-spacing: 0.72px;
    margin: 0 0 12px;
}
.ph-section__subtitle {
    font-size: 18px;
    color: var(--ph-gray);
    line-height: 1.6;
    letter-spacing: 0.4px;
    margin: 0;
}
.ph-no-content {
    text-align: center;
    color: var(--ph-gray);
    padding: 40px 0;
}

/* ── Hero ────────────────────────────────────────────────── */
.ph-hero {
    padding: 0 0 48px;
    background-color: var(--ph-gray-bg);
    overflow: hidden;
    margin-top: 3rem;
}
.ph-hero > .ph-container + .ph-container {
    margin-top: 50px;
}
.ph-hero .ph-container.hero-container {
    background: #F7FAF7;
    border-radius: 35px;
    border: 1px solid #EEEEEE;
    overflow: hidden;
}

.ph-hero__inner {
    display: grid;
    grid-template-columns: 50% 50%;
    align-items: stretch;
    min-height: 580px;
}

.ph-hero__content {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 22px;
    padding: 68px 40px 68px 40px;
}

/* Eyebrow badge */
.ph-hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ph-green);
    text-transform: uppercase;
    letter-spacing: 0.32px;
    background: var(--ph-white);
    padding: 9px 18px 9px 12px;
    border-radius: 9999px;
    border: 1px solid #EEEEEE;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.ph-hero__eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ph-green);
    flex-shrink: 0;
}

/* Heading */
.ph-hero__heading {
    font-size: clamp(36px, 5vw, 64px);
    line-height: 1.05;
    color: var(--ph-black);
    margin: 0;
}

/* Highlighted green word with wavy underline */
.ph-highlight {
    color: var(--ph-green);
    position: relative;
}
span.ph-highlight:after {
    content: "";
    position: absolute;
    bottom: 5px;
    width: 93%;
    height: 12px;
    background: #469f102b;
    left: 0;
}

/* Hero description — Figma: 21px, Plus Jakarta Sans, #555, line-height 30px */
.ph-hero__desc {
    font-size: 21px;
    color: #555555;
    line-height: 1.43;
    max-width: 480px;
    margin: 0;
}
.ph-hero__actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.ph-hero__actions a {
    line-height: 1.5;
    font-weight: 800;
}

/* Right media pane */
.ph-hero__media {
    display: flex;
    align-items: stretch;
    overflow: hidden;
    position: relative;
    padding: 20px;
}
.ph-hero__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 60px;
}
.ph-hero__image-placeholder {
    width: 100%;
    min-height: 520px;
    background: var(--ph-green-bg);
    border: 2px dashed var(--ph-green-light);
    border-radius: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--ph-gray);
    font-size: var(--ph-text-sm);
}
.ph-hero__image-placeholder::before {
    content: '🖼';
    font-size: 40px;
}

/* ── Stats bar — outer pill wraps 4 inner pills ─────────── */
/* Figma: outer white pill border #DDDDDD, inner #F9FAFB border #E2E2E2 */
.ph-hero__stats-bar {
    background: var(--ph-white);
    border: 1px solid #DDDDDD;
    border-radius: 9999px;
    padding: 13px;
    overflow: hidden;
}
.ph-hero__stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 25px;
}

/* 1–3 stats: shrink outer pill and center; columns size to content (no empty 4th slot). */
.ph-hero__stats-bar--compact {
    width: fit-content;
    max-width: 100%;
    margin-inline: auto;
    box-sizing: border-box;
}
.ph-hero__stats-bar--compact .ph-hero__stats--n1 {
    grid-template-columns: minmax(0, auto);
    justify-items: stretch;
}
.ph-hero__stats-bar--compact .ph-hero__stats--n2 {
    grid-template-columns: repeat(2, minmax(0, auto));
}
.ph-hero__stats-bar--compact .ph-hero__stats--n3 {
    grid-template-columns: repeat(3, minmax(0, auto));
}

.ph-hero__stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 14px 20px;
    text-align: center;
    background: #F9FAFB;
    border: 1px solid #E2E2E2;
    border-radius: 9999px;
}
/* Figma: Inter Bold, 41px, green, line-height 1.1 */
.ph-hero__stat-number {
    font-size: clamp(26px, 3.2vw, 41px);
    font-weight: 800;
    color: var(--ph-green);
    line-height: 1.1;
}
/* Figma: 16px, #555, uppercase, letter-spacing 0.4px, line-height 1.43 */
.ph-hero__stat-label {
    font-size: 16px;
    font-weight: 700;
    color: #555555;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-top: 6px;
    line-height: 1.43;
}

/* ── Why Painhunting Works ───────────────────────────────── */
.ph-why {
    background-color: var(--ph-gray-bg);
}
.ph-why .ph-section__eyebrow {
    letter-spacing: 2.8px;
    font-size: 22px;
    margin-bottom: -10px;
}
.ph-why__header {
    text-align: center;
    margin-bottom: 48px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ph-why__title {
    text-align: center;
    margin-bottom: 0;
}
.ph-why__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
}
/* Figma: white bg, border 1px solid black (#2D2D2D), border-radius 32px, padding 33px */
.ph-why__card {
    background: var(--ph-white);
    border-radius: 32px;
    padding: 33px;
    box-shadow: inset 0 0 0 1px var(--ph-black);
    transition: box-shadow var(--ph-transition), transform var(--ph-transition);
}
.ph-why__card:hover {
    box-shadow: inset 0 0 0 5px var(--ph-green); /* green hover border */
    transform: translateY(-3px);
}
/* Inline SVG only: <img src=".svg"> cannot be recolored with CSS */

.ph-why__card:hover .ph-why__icon svg * {
    fill: var(--ph-white) !important;
    stroke: var(--ph-white) !important;
}
.ph-why__card:hover .ph-why__icon svg *[fill="none"] {
    fill: none !important;
}
.ph-why__card:hover .ph-why__icon svg *[stroke="none"] {
    stroke: none !important;
}
.ph-why__card:hover .ph-why__icon {
    background: var(--ph-green);
}
/* Figma: 64×64, border-radius 16px, bg rgba(70,159,16,0.05) */
.ph-why__icon {
    width: 64px;
    height: 64px;
    background: rgba(70, 159, 16, 0.05);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}
.ph-why__icon img,
.ph-why__icon svg {
    width: 32px;
    height: 32px;
    object-fit: contain;
}
.ph-why__icon .dashicons {
    width: 40px;
    height: 40px;
    font-size: 40px;
    color: var(--ph-green);
}
.ph-why__card:hover .ph-why__icon .dashicons {
    color: #fff;
}
/* Figma: Manrope ExtraBold, 22px, #333, letter-spacing 0.5px, line-height 28px */
.ph-why__card-title {
    font-size: 22px;
    font-weight: 800;
    color: #333333;
    letter-spacing: 0.5px;
    line-height: 1.27;
    margin: 0 0 16px;
}
/* Figma: Regular, 20px, #555, letter-spacing 0.4px, line-height 1.2 */
.ph-why__card-desc {
    font-size: 20px;
    font-weight: 400;
    color: #555555;
    line-height: 1.2;
    letter-spacing: 0.4px;
    margin: 0;
}

/* ── What We Solve ───────────────────────────────────────── */
/* Figma: full-width white band (cards sit on #FFF, not page gray #F9FAFB) */
.ph-solve {
    background-color: var(--ph-white);
    padding: 0
}
.ph-solve .ph-container{
    background-color: var(--ph-white);
    padding: 80px 25px;
    border: 1px solid #F3F4F6;
    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    border-radius: 35px;

}
/* Extra specificity: keep surface white if plugin CSS touches generic `section` */
.ph-main.ph-home .ph-section.ph-solve {
    background-color: var(--ph-gray-bg);
}
/* Figma: subtitle 22px, letter-spacing 0.8px */
.ph-solve .ph-section__header {
    margin-bottom: 52px;
}
.ph-solve .ph-section__subtitle {
    font-size: 22px;
    color: #555555;
    letter-spacing: 0.8px;
    line-height: 1.45;
}
/* Figma: 4-column grid */
.ph-solve__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
/* Figma: white bg, border 2px solid black, border-radius 32px, box-shadow, height 181px */
.ph-solve__card {
    background: var(--ph-white);
    border: 2px solid #2D2D2D;
    border-radius: 32px;
    box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
    padding: 34px 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    text-decoration: none;
    transition: border-color var(--ph-transition), box-shadow var(--ph-transition);
    min-height: 181px;
}
.ph-solve__card:hover {
    border-color: var(--ph-green);
    box-shadow: 0px 4px 16px rgba(70, 159, 16, 0.2);
}
.ph-solve__card-icon {
    width: 46px;
    height: 46px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--ph-green);
}
.ph-solve__card-icon svg {
    width: 100%;
    height: 100%;
}
.ph-solve__card-icon span.ph-icon.dashicons {
    width: 50px;
    height: 50px;
    font-size: 50px;
}
/* Figma: 25px, #333, letter-spacing 0.8px, line-height 24px */
.ph-solve__card-label {
    font-size: 25px;
    font-weight: 400;
    color: #333333;
    text-align: center;
    letter-spacing: 0.8px;
    line-height: 1;
    margin: 0;
}
/* Figma: 24×4px, #333, pill radius */
.ph-solve__card-dash {
    width: 24px;
    height: 4px;
    background: #333333;
    border-radius: 9999px;
    flex-shrink: 0;
}
.ph-solve__cta {
    text-align: center;
    margin-top: 40px;
}
.ph-solve__empty {
    text-align: center;
    color: var(--ph-gray);
    padding: 24px 0;
}

/* ── Life-Changing Results (Testimonials) ────────────────── */
.ph-results {
    background-color: var(--ph-white);
}
/* Eyebrow: green label only (coin sits next to main heading — Figma) */
.ph-results__header .ph-results__eyebrow {
    display: block;
    font-size: 20px;
    margin-bottom: 0;
}

/* Main heading + seal/coin in one row, centered */
.ph-results__title-row {
    display: flex;
    position: relative;
    padding-left: 60px;
    justify-content: space-between;
    width: fit-content;
    margin: 0 auto;
}
.ph-results__title-icon {
    width: auto;
    height: 60px;
    object-fit: contain;
    flex-shrink: 0;
    display: block;
    position: absolute;
    left: 0;
    top: -6px;
}
.ph-results__title {
    margin: 0;
    text-align: left;
}

/* Testimonials slider */
.ph-results__slider {
    --ph-results-gap: 24px;
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) 48px;
    gap: 0 12px;
    align-items: center;
}
.ph-results__slider--no-nav {
    grid-template-columns: minmax(0, 1fr);
}
.ph-results__slider--no-nav .ph-results__nav,
.ph-results__slider--no-nav .ph-books__nav-btn {
    display: none !important;
}
.ph-results__viewport {
    overflow: hidden;
    min-width: 0;
    width: 100%;
}
.ph-results__track {
    display: flex;
    gap: var(--ph-results-gap);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .ph-results__track {
        transition: none;
    }
}
.ph-results__slide {
    flex: 0 0 calc((100% - 2 * var(--ph-results-gap)) / 3);
    width: calc((100% - 2 * var(--ph-results-gap)) / 3);
    min-width: 0;
}
.ph-results__slider--is-static .ph-results__track,
.ph-results__slider--is-static .ph-books__track {
    justify-content: center;
}
.ph-results__slider--is-static .ph-results__slide:only-child,
.ph-results__slider--is-static .ph-books__slide:only-child {
    flex: 0 0 min(400px, 100%);
    width: min(400px, 100%);
}
.ph-results__slider--is-static .ph-results__slide:not(:only-child),
.ph-results__slider--is-static .ph-books__slide:not(:only-child) {
    flex: 0 0 min(400px, calc((100% - var(--ph-results-gap)) / 2));
    width: min(400px, calc((100% - var(--ph-results-gap)) / 2));
}
.ph-results__slider--few.ph-results__slider--is-scroll .ph-results__slide {
    flex: 0 0 100%;
    width: 100%;
}
@media (max-width: 1024px) and (min-width: 641px) {
    .ph-results__slide {
        flex: 0 0 calc((100% - var(--ph-results-gap)) / 2);
        width: calc((100% - var(--ph-results-gap)) / 2);
    }
}
@media (max-width: 640px) {
    .ph-results__title-row{
        padding-left: 50px;
    }
    .ph-results__title-icon {
        height: 40px;
    }
    .ph-results__slide {
        flex: 0 0 100%;
        width: 100%;
    }
    .ph-results__slide .ph-results__card{
        padding: 20px;
    }
}
@media (max-width: 640px) {
    .ph-results__slider {
        grid-template-columns: 40px minmax(0, 1fr) 40px;
        gap: 0 8px;
    }
}

.ph-results__card {
    background: var(--ph-white);
    border: 1.5px solid var(--ph-border);
    border-radius: 20px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    transition: box-shadow var(--ph-transition);
}
.ph-results__card:hover {
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07);
}
.ph-results__category {
    align-self: flex-start;
    background: var(--ph-green);
    color: white;
    padding: 4px 10px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}
.ph-results__stars {
    display: flex;
    gap: 3px;
}
.ph-results__stars svg {
    width: 30px;
    height: 30px;
}
/* Figma: italic, 16px, #555, line-height 1.7 */
.ph-results__quote {
    font-size: 16px;
    color: #555555;
    line-height: 1.7;
    flex: 1;
    margin: 0;
}
.ph-results__author {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    border-top: 1px solid var(--ph-border);
    padding-top: 14px;
}
.ph-results__author-avatar {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    border: 1.5px solid var(--ph-border);
    background: var(--ph-gray-bg);
}
.ph-results__author-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.ph-results__author-meta {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}
.ph-results__author-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--ph-black);
}
.ph-results__author-sessions {
    font-size: 13px;
    color: var(--ph-gray);
}

/* ── Architect Spotlight — Bento Card ────────────────────── */
.ph-architect {
    background-color: var(--ph-gray-bg);
}
/* The whole section content sits inside a white card with border */
.ph-architect__card {
    background: var(--ph-white);
    border: 1px solid var(--ph-border);
    border-radius: 28px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 60% 40%;
}
.ph-architect__content {
    padding: 64px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/* Eyebrow pill badge */
.ph-architect__eyebrow-badge {
    display: inline-flex;
    align-items: center;
    align-self: flex-start;
    background: var(--ph-green);
    color: var(--ph-white);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    padding: 4px 14px;
    border-radius: 9999px;
}
.ph-architect__title {
    font-weight: 800;
    color: var(--ph-black);
    line-height: 1.15;
    letter-spacing: 0.5px;
    margin: 0;
}

/* 2×2 bento stat grid — Figma: 4 boxes each ~313px wide, 146px tall */
.ph-architect__stats-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}
.ph-architect__stat-box {
    border: 1px solid var(--ph-border);
    border-radius: 16px;
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ph-architect__stat-box-icon {
    color: var(--ph-green);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
}
.ph-architect__stat-box-icon svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}
.ph-architect__stat-box-icon img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    display: block;
    flex-shrink: 0;
}
.ph-architect__stat-box-number {
    font-size: 20px;
    font-weight: 600;
    color: var(--ph-black);
    line-height: 1.2;
}
.ph-architect__stat-box-label {
    font-size: 16px;
    font-weight: 400;
    color: var(--ph-gray);
    line-height: 1.4;
}
/* Optional description text below stat boxes */
.ph-architect__desc {
    font-size: 18px;
    color: var(--ph-gray-dark);
    line-height: 1.7;
}
.ph-architect__desc p { 
    margin: 0 0 12px; 
    font-size: 18px;
    font-weight: 400;
    line-height: 30px;

}
.ph-architect__desc p:last-child { margin-bottom: 0; }

/* Figma CTA button shadow (X:0 Y:10 Blur:15 Spread:-3, #469F10 @ 30%) */
.ph-architect .ph-btn--primary {
    box-shadow: 0 10px 15px -3px rgba(70, 159, 16, 0.30);
    margin-top: 20px;
}
.ph-architect .ph-btn--primary:hover {
    box-shadow: 0 10px 15px -3px rgba(70, 159, 16, 0.30);
}
/* Photo column: right side, full height */
.ph-architect__photo {
    position: relative;
    overflow: hidden;
    min-height: 540px;
    margin: 125px 64px 125px 0;
    border-radius: 40px;
}
.ph-architect__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Dark overlay at bottom with name/title */
.ph-architect__name-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0) 100%);
    padding: 48px 28px 28px;
}
.ph-architect__person-name {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    line-height: 1.2;
}
.ph-architect__person-title {
    font-size: 14px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    margin: 6px 0 0;
}
.ph-architect__photo-placeholder {
    width: 100%;
    height: 100%;
    min-height: 540px;
    background: var(--ph-green-bg);
    border: 2px dashed var(--ph-green-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    color: var(--ph-gray);
    font-size: var(--ph-text-sm);
}

/* ── Problem & Solution ──────────────────────────────────── */
.ph-ps {
    background-color: var(--ph-white);
}
.ph-ps__header {
    text-align: center;
    max-width: 840px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
}

.ph-ps__list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}
.ph-ps__story {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.ph-ps__card {
    border: 1.5px solid var(--ph-border);
    border-radius: 28px;
    background: var(--ph-white);
    padding: 32px 40px 32px;
    min-height: 268px;
}
.ph-ps__card-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.ph-ps__card--problem .ph-ps__card-label {
    background: #fff1f2;
    color: #ef4444;
}
.ph-ps__card--solution .ph-ps__card-label {
    background: #f0fdf4;
    color: var(--ph-green);
}
.ph-ps__card-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.ph-ps__card--problem .ph-ps__card-icon {
    background: #fff1f2;
}
.ph-ps__card--problem .ph-ps__card-icon * {
    color: #EF4444;
    font-size: 30px;
    width: 30px;
    height: 30px;
}
.ph-ps__card--solution .ph-ps__card-icon {
    background: #ecfdf3;
}
.ph-ps__card--solution .ph-ps__card-icon * {
    color: var(--ph-green);
    font-size: 30px;
    width: 30px;
    height: 30px;
}
.ph-ps__title-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 12px;
}
.ph-ps__title-row .ph-ps__card-icon {
    margin-bottom: 0;
    flex-shrink: 0;
}
.ph-ps__card-title {
    margin: 0;
    font-size: 20px;
    font-weight: var(--ph-fw-bold);
    color: var(--ph-black);
    line-height: 1.24;
    letter-spacing: -0.02em;
}
.ph-ps__card-quote {
    margin: 0;
    font-size: 18px;
    color: var(--ph-gray-dark);
    line-height: 1.48;
}
.ph-ps__title-row + .ph-ps__card-quote {
    margin-top: 4px;
}
.ph-ps__story-center {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 2;
    width: 72px;
    height: 72px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
a.ph-ps__story-center {
    text-decoration: none;
    cursor: pointer;
}
.ph-ps__story-center-ring {
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid var(--ph-white);
    background: var(--ph-white);
    box-shadow: 0 6px 20px rgba(0,0,0,0.18);
}
.ph-ps__story-center-img {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    object-fit: cover;
    position: relative;
    z-index: 0;
}
.ph-ps__story-center-img--placeholder {
    background: linear-gradient(160deg, #d1d5db, #9ca3af);
}
.ph-ps__story-play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--ph-green);
    color: var(--ph-white);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}
.ph-ps__cta {
    text-align: center;
    margin-top: 50px;
}
.ph-ps__cta-btn {
    min-width: 290px;
    border-color: var(--ph-border);
    color: var(--ph-black);
    background: var(--ph-white);
}
.ph-ps__cta-btn:hover {
    border-color: var(--ph-green);
    color: var(--ph-green);
    background: var(--ph-white);
}

/* ── Knowledge / Books ───────────────────────────────────── */
.ph-books {
    background-color: var(--ph-gray-bg);
}
.ph-books__slider {
    position: relative;
    --ph-results-gap: 30px;
}
.ph-books__viewport {
    overflow: hidden;
}
.ph-books__slider:not(.ph-results__slider--is-static):not(:has(.ph-books__slide:only-child)) .ph-books__slide {
    flex: 0 0 calc((100% - 2 * var(--ph-results-gap)) / 3);
    width: calc((100% - 2 * var(--ph-results-gap)) / 3);
    min-width: 0;
}
.ph-book-card {
    background: transparent;
    border-radius: 0;
    overflow: visible;
    border: 0;
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
}
.ph-book-card__cover-wrap {
    width: 100%;
    text-decoration: none;
}
.ph-book-card__cover {
    padding: 20px;
    aspect-ratio: 1 / 1;
    overflow: visible;
    background: #f3f5f4;
    border: 1px solid #e8ece9;
    border-radius: 24px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ph-book-card__cover:hover img {
    transform: scale(1.1);
}
.ph-book-card__cover img {
    object-fit: contain;
    display: block;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    transition: transform .2s ease;
}
.ph-book-card__cover-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ph-book-card__body {
    padding: 18px 10px 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    width: 100%;
}
.ph-book-card__title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ph-black);
    margin: 0;
    line-height: 1.2;
}
.ph-book-card__title a {
    color: inherit;
    text-decoration: none;
}
.ph-book-card__title a:hover{
    color: var(--ph-green);
}
.ph-book-card__exc {
    font-size: 16px;
    color: var(--ph-gray);
    margin: 0;
    line-height: 1.34;
}
.ph-book-card__actions {
    display: flex;
    flex-direction: column;
    gap: 0;
    align-items: center;
    margin-top: 4px;
}
.ph-book-card__action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    color: var(--ph-green);
    font-weight: 600;
    text-decoration: none;
    line-height: 1.2;
    justify-content: center;
}
.ph-book-card__action-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ph-book-card__action:hover {
    color: var(--ph-green-dark);
}
.ph-books__cta {
    text-align: center;
    margin-top: 40px;
}
.ph-books__nav-btn[disabled] {
    opacity: 0.45;
    cursor: not-allowed;
}

/* ── FAQ — Centered header + 2-column accordion ──────────── */
.ph-faq {
    background: var(--ph-green);
    position: relative;
    overflow: hidden;
    padding: 78px 0 84px;
}
.ph-faq::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: var(--ph-faq-bg-logo);
    background-repeat: no-repeat;
    background-position: center 0;
    background-size: min(740px, 62vw) auto;
    opacity: 0.05;
    filter: brightness(0) invert(1) saturate(0);
    pointer-events: none;
}
.ph-faq .ph-container {
    max-width: 1280px;
    position: relative;
    z-index: 1;
}
/* Centered header above the accordion grid */
.ph-faq__header {
    text-align: center;
    max-width: 704px;
    margin: 0 auto 32px;
}
.ph-faq .ph-section__title {
    color: #fff;
    margin: 0 0 8px;
    line-height: 40px;
    font-weight: 800;
}
.ph-faq__subtitle {
    font-size: 22px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 28px;
    margin: 0;
    font-weight: 500;
}
/* 2-column accordion grid — each row has 2 items side by side */
.ph-faq__grid {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.ph-faq__item {
    position: relative;
    border: 2px solid rgba(255, 255, 255, 0.78);
    border-color: #e8e8e8;
    border-radius: 24px;
    background: transparent;
    overflow: hidden;
    transition: border-color .25s ease, background-color .25s ease;
}
.ph-faq__check {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}
.ph-faq__question {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 24px 32px;
    cursor: pointer;
    list-style: none;
    font-size: 25px;
    font-weight: 700;
    color: #fff;
    gap: 16px;
    user-select: none;
    line-height: 28px;
}
.ph-faq__toggle {
    flex-shrink: 0;
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #f0fdf4;
}
.ph-faq__toggle::before,
.ph-faq__toggle::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 2px;
    border-radius: 2px;
    background: var(--ph-green);
    transform: translate(-50%, -50%);
    transition: opacity .2s ease;
}
.ph-faq__toggle::after {
    transform: translate(-50%, -50%) rotate(90deg);
}
.ph-faq__check:checked + .ph-faq__question .ph-faq__toggle {
    background: rgba(255, 255, 255, 0.9);
}
.ph-faq__check:checked + .ph-faq__question .ph-faq__toggle::after {
    opacity: 0;
}
.ph-faq__answer {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0 32px;
    transform: translateY(-6px);
    transition: max-height .42s cubic-bezier(.25,.8,.25,1), opacity .28s ease, transform .42s cubic-bezier(.25,.8,.25,1), padding .42s cubic-bezier(.25,.8,.25,1);
}
.ph-faq__answer p {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.94);
    line-height: 24px;
    margin: 0;
    font-weight: 500;
}
.ph-faq__check:checked + .ph-faq__question + .ph-faq__answer {
    max-height: 500px;
    opacity: 1;
    transform: translateY(0);
    padding: 0 32px 18px;
}

/* ── Shared btn helpers ──────────────────────────────────── */
.ph-btn--sm {
    padding: 9px 18px;
    font-size: 14px;
}
.ph-btn--full {
    width: 100%;
    justify-content: center;
}

/* ============================================================
   Responsive — Tablet (≤ 1024px)
   ============================================================ */
@media (max-width: 1024px) {
    .ph-section { padding: 60px 0; }
    /* Match other homepage sections — global .ph-painhunters.ph-section is more specific */
    .ph-home .ph-painhunters.ph-section { padding: 60px 0; }

    .ph-hero__inner { grid-template-columns: 1fr; }
    .ph-hero__content { padding: 56px 24px 48px; }
    .ph-hero__media { padding: 0; }
    .ph-hero__image { border-radius: 32px; }
    .ph-hero__image-placeholder { min-height: 300px; border-radius: 32px; }
    .ph-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 10px;}
    .ph-hero__stats .ph-hero__stat{ border-radius: 10px; }
    .ph-hero__stats-bar--compact .ph-hero__stats--n1 { grid-template-columns: 1fr; }
    .ph-hero__stats-bar--compact .ph-hero__stats--n2 { grid-template-columns: repeat(2, 1fr); }
    .ph-hero__stats-bar--compact .ph-hero__stats--n3 { grid-template-columns: repeat(2, 1fr); }
    .ph-hero > .ph-container + .ph-container { margin-top: 24px; }
    .ph-hero__stat-label { font-size: 14px; }

    .ph-why__grid { grid-template-columns: repeat(2, 1fr); }

    .ph-solve__grid { grid-template-columns: repeat(2, 1fr); }
    .ph-solve .ph-section__subtitle { font-size: 18px; }

    /* Painhunters grid (≤3): keep 3 columns on tablet per design */

    /* Architect: stack vertically on tablet */
    .ph-architect__card { grid-template-columns: 1fr; }
    .ph-architect__content { padding: 48px 40px; }
    .ph-architect__photo { min-height: 400px; margin: 20px 20px;}

    .ph-books__slider:not(.ph-results__slider--is-static):not(:has(.ph-books__slide:only-child)) .ph-books__slide {
        flex-basis: calc((100% - 2 * var(--ph-results-gap)) / 3);
        width: calc((100% - 2 * var(--ph-results-gap)) / 3);
    }
    .ph-book-card__title { font-size: 20px; }
    .ph-book-card__exc { font-size: 15px; }
    .ph-book-card__action { font-size: 15px; }

    .ph-faq__question { font-size: 22px; line-height: 1.3; }
    .ph-faq__answer p { font-size: 18px; line-height: 1.4; }

    .ph-ps__story { gap: 18px; }
    .ph-ps__card {
        min-height: 220px;
        border-radius: 24px;
        padding: 20px;
    }
    .ph-ps__card-title { font-size: clamp(21px, 3vw, 30px); }
    .ph-ps__card-quote { font-size: clamp(16px, 2vw, 24px); }
    .ph-ps__story-center {
        width: 64px;
        height: 64px;
    }
    .ph-ps__story-center-img {
        width: 56px;
        height: 56px;
    }
}

/* ============================================================
   Responsive — Mobile (≤ 640px)
   ============================================================ */
@media (max-width: 640px) {
    .ph-section { padding: 30px 0; }
    .ph-inner { min-height: 500px; }
    .ph-hero__content { padding: 20px 0px; }
    .ph-hero__desc { font-size: 18px; }
    .ph-hero__heading span.ph-highlight:after { height: 8px; }
    .ph-hero__stats-bar { border-radius: 24px; }
    .ph-hero__stat-label { font-size: 12px; }
    .ph-hero__actions a { width: 100%; max-width: 420px; }
    .ph-hero__stat-number { font-size: 26px; }

    .ph-why__grid { grid-template-columns: 1fr; }
    .ph-why__card { padding: 24px 20px; }
    .ph-why__card-desc { font-size: 17px; }

    .ph-solve__grid { grid-template-columns: repeat(2, 1fr); }
    .ph-solve__card { min-height: 150px; padding: 24px 16px; }
    .ph-solve__card-label { font-size: 18px; }
    .ph-solve .ph-section__subtitle { font-size: 18px; }

    .ph-architect__content a { margin-left: auto; margin-right: auto; width: 100%; max-width: 420px; }

    .ph-architect__content { padding: 32px 24px; gap: 20px; }
    .ph-architect__stats-grid { grid-template-columns: 1fr; }
    .ph-architect__stat-box { padding: 16px; }
    .ph-architect__photo { min-height: 320px; }

    .ph-books__slider:not(.ph-results__slider--is-static):not(:has(.ph-books__slide:only-child)) .ph-books__slide {
        flex-basis: 100%;
        width: 100%;
    }
    .ph-book-card__title { font-size: 18px; }
    .ph-book-card__exc { font-size: 14px; }
    .ph-book-card__action { font-size: 14px; }

    .ph-faq__header { margin-bottom: 26px; }
    .ph-faq__subtitle { font-size: 16px; line-height: 1.35; }
    .ph-faq__question { padding: 16px 16px; font-size: 19px; line-height: 1.3; }
    .ph-faq__toggle { width: 28px; height: 28px; }
    .ph-faq__answer { padding: 0 16px; }
    .ph-faq__check:checked + .ph-faq__question + .ph-faq__answer { padding: 0 16px 14px; }
    .ph-faq__answer p { font-size: 15px; line-height: 1.35; }

    .ph-section__header--row { flex-direction: column; align-items: flex-start; gap: 12px; }
    .ph-ps__header { margin-bottom: 26px; }
    .ph-ps__story {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .ph-ps__story-center {
        display: none;
    }
    .ph-ps__card {
        min-height: 0;
        border-radius: 20px;
        padding: 18px 16px;
    }
    .ph-ps__card-label {
        min-height: 26px;
        padding: 4px 10px;
        font-size: 11px;
    }
    .ph-ps__card-icon {
        width: 44px;
        height: 44px;
        margin-bottom: 0;
    }
    .ph-ps__title-row { gap: 10px; margin-bottom: 8px; }
    .ph-ps__card-title {
        font-size: 22px;
        margin-bottom: 0;
    }
    
    .ph-ps__cta {
        margin-top: 24px;
    }
    .ph-ps__cta-btn {
        width: 100%;
        min-width: 0;
    }

}