.pf-feature-gallery { padding: 88px 0; background: #0c0e13; color: #f6f5f1; scroll-margin-top: 85px; }
.pf-feature-gallery h2 { margin: 10px 0 20px; font-size: clamp(1.75rem, 3.2vw, 2.7rem); line-height: 1.35; letter-spacing: -.04em; }
.pf-feature-eyebrow, .pf-feature-number { color: #d8bc68; font-size: .8rem; letter-spacing: .08em; font-weight: 700; }
.pf-feature-eyebrow img { display: block; width: 126px; height: 40px; max-width: 100%; object-fit: contain; object-position: left center; }
.pf-feature-lead { max-width: 740px; color: #d1d4de; line-height: 1.8; }
.pf-feature-note { color: #969dab; font-size: .85rem; margin: 14px 0 30px; }
.pf-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 24px; }
.pf-feature-card { display: flex; flex-direction: column; overflow: hidden; min-width: 0; border: 1px solid #30343f; border-radius: 20px; background: #14171e; }
.pf-feature-card-copy { padding: 12px 26px 28px; }
.pf-feature-card h3 { font-size: 1.15rem; margin: 10px 0; }
.pf-feature-card p { color: #c5cad5; line-height: 1.75; font-size: .92rem; margin: 0; }
.pf-feature-image { position: relative; display: flex; justify-content: center; align-items: center; min-width: 0; margin: 12px; padding: 12px 10px 32px; background: #08090d; border-radius: 12px; height: var(--pf-feature-preview-height, 240px); }
.pf-feature-image img { width: 100%; height: 100%; object-fit: contain; }
.pf-feature-image span { position: absolute; bottom: 10px; max-width: calc(100% - 12px); color: #d8bc68; font-size: .8rem; text-align: center; line-height: 1.3; }
.pf-feature-image-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 12px; }
.pf-feature-image-pair .pf-feature-image { margin: 0; padding: 12px 6px 32px; }
.pf-feature-view-link { display: inline-block; color: #e0c577; margin-top: 10px; font-size: .85rem; }
.pf-feature-overview {margin-bottom:48px;padding-bottom:28px;border-bottom:1px solid #353b46;color:#f6f5f1;scroll-margin-top:90px;}
.pf-feature-overview h2 {font-size:clamp(1.6rem,3vw,2.3rem);line-height:1.4;margin:0 0 24px;}
.pf-feature-overview ul {list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 36px;}
.pf-feature-overview li {min-width:0;scroll-margin-top:90px;}
.pf-feature-overview h3 {font-size:1.05rem;line-height:1.4;margin:0 0 8px;}
.pf-feature-overview p {color:#c5cad5;font-size:.92rem;line-height:1.75;margin:0 0 8px;}
.pf-feature-overview a {display:inline-block;color:#e0c577;font-size:.85rem;line-height:1.5;padding:5px 0;text-underline-offset:3px;}
.pf-feature-overview a:focus-visible {outline:3px solid #e0c577;outline-offset:4px;}
@media(max-width:600px) {.pf-feature-overview ul {grid-template-columns:1fr;gap:24px;}}
.pf-feature-image:focus-visible, .pf-feature-view-link:focus-visible, .pf-feature-next a:focus-visible { outline: 3px solid #e0c577; outline-offset: 4px; }
.pf-feature-next { display: flex; justify-content: space-between; gap: 20px; align-items: center; margin-top: 30px; padding: 24px; border: 1px solid #49412b; border-radius: 16px; }
.pf-feature-next p { margin: 0; }
.pf-feature-next a { color: #e0c577; font-weight: 700; }
.pf-feature-lightbox { margin: auto; width: min(1100px, 94vw); max-height: 94dvh; padding: 18px; background: #11141b; color: white; border: 1px solid #545a65; border-radius: 16px; }
.pf-feature-lightbox::backdrop { background: rgba(0,0,0,.88); }
.pf-feature-lightbox > div { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 14px; }
.pf-feature-lightbox h2 { font-size: 1rem; margin: 0; }
.pf-feature-lightbox button { background: #292f3b; border: 0; color: white; padding: 12px 18px; border-radius: 8px; cursor: pointer; }
.pf-feature-lightbox > img { display: block; max-width: 100%; max-height: 78dvh; object-fit: contain; margin: auto; }
.pf-feature-progress .pf-progress-disclosure { margin-top: 10px; color: #e0c577; font-size: .78rem; }
.pf-reveal-comparison { margin:12px; min-width:0; }
.pf-reveal-canvas { position:relative; aspect-ratio:1840/1220; overflow:hidden; border:1px solid #555d69; border-radius:12px; background:#0a0c11; }
.pf-reveal-photo .pf-reveal-canvas { aspect-ratio:3/4; max-height:360px; width:auto; max-width:100%; margin:auto; }
.pf-reveal-canvas>img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.pf-reveal-before { clip-path:inset(0 calc(100% - var(--pf-reveal-position)) 0 0); }
.pf-reveal-label { position:absolute; top:10px; padding:6px 9px; max-width:45%; border-radius:7px; background:#08090de8; color:#fff; font-size:.75rem; line-height:1.4; pointer-events:none; }
.pf-reveal-label-before {left:10px}.pf-reveal-label-after {right:10px}
.pf-reveal-divider {position:absolute;left:var(--pf-reveal-position);top:0;bottom:0;width:2px;background:#e0c577;transform:translateX(-1px);pointer-events:none;}
.pf-reveal-divider>span {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:grid;place-items:center;width:42px;height:42px;border:2px solid #fff;border-radius:50%;background:#181b23;color:#f6df9f;font-size:22px;box-shadow:0 2px 8px #0008;}
.pf-reveal-canvas input[type="range"] {position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:ew-resize;touch-action:pan-y;}
.pf-reveal-canvas:focus-within {outline:3px solid #e0c577;outline-offset:3px;}
.pf-reveal-hint {display:block;margin:10px 0 2px;text-align:center;color:#e0c577;font-size:.83rem;line-height:1.5;}
.pf-reveal-originals {display:flex;gap:14px;flex-wrap:wrap;margin-top:12px;}
.pf-reveal-originals .pf-feature-image {height:auto;padding:0;margin:0;background:none;border-radius:0;}
.pf-reveal-originals .pf-feature-image img {display:none;}
.pf-reveal-originals .pf-feature-image span {position:static;text-align:left;max-width:none;}
.pf-feature-progress .pf-feature-card-copy>.pf-feature-image {height:auto;padding:0;margin:12px 0 0;justify-content:start;background:none;}
.pf-feature-progress .pf-feature-card-copy>.pf-feature-image img {display:none;}
.pf-feature-progress .pf-feature-card-copy>.pf-feature-image span {position:static;text-align:left;max-width:none;}
@media (max-width: 950px) { .pf-feature-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .pf-feature-gallery { padding: 52px 0; } .pf-feature-grid { grid-template-columns: minmax(0, 1fr); } .pf-feature-image { height: var(--pf-feature-preview-height, 220px); } .pf-feature-card-copy { padding: 10px 20px 22px; } .pf-feature-next { align-items: flex-start; flex-direction: column; } }

.pf-feature-card { scroll-margin-top: 100px; }
.pf-feature-gallery-home {padding:52px 0 24px;}
.pf-feature-gallery-home>.container>.pf-feature-grid {grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;--pf-feature-preview-height:300px;}
.pf-feature-gallery-home>.container>.pf-feature-grid .pf-feature-card-copy {padding:10px 20px 24px;}
/* Preview sizes inherit without overriding the content-sized original links.
   A broad descendant height used to turn those text links into empty 300px boxes. */
@media(max-width:1100px) {.pf-feature-gallery-home>.container>.pf-feature-grid {grid-template-columns:repeat(2,minmax(0,1fr));--pf-feature-preview-height:270px;}}
@media(max-width:600px) {
 .pf-feature-gallery-home>.container>.pf-feature-grid {grid-template-columns:minmax(0,1fr);}
 .pf-feature-gallery-home #feature-members>.pf-feature-image,
 .pf-feature-gallery-home #feature-instructor>.pf-feature-image {height:360px;}
}

.pf-role-showcase { margin-top:48px; padding-top:32px; border-top:1px solid #414752; scroll-margin-top:100px; }
.pf-role-showcase>h3 { margin:0 0 12px; font-size:clamp(1.4rem,2.5vw,1.8rem); line-height:1.4; }
.pf-role-lead { margin:0 0 10px; max-width:780px; color:#c5cad5; font-size:.95rem; line-height:1.7; }
.pf-role-note { margin:0 0 24px; color:#a8afbd; font-size:.83rem; line-height:1.6; }
.pf-role-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr) minmax(0,1.35fr); align-items:start; gap:20px; }
.pf-role-card { min-width:0; padding:16px; border:1px solid #414752; border-radius:20px; background:#14171e; scroll-margin-top:100px; }
/* Preserve the complete phone/tablet capture instead of cropping or stretching it. */
.pf-role-card>.pf-role-device { display:block; width:100%; max-width:300px; height:auto; box-sizing:border-box; margin:0 auto 20px; padding:8px 8px 32px; border:1px solid #4d5360; border-radius:18px; }
.pf-role-card>.pf-role-device img { display:block; width:100%; height:auto; object-fit:contain; }
.pf-role-card--tablet>.pf-role-device { max-width:none; border-radius:12px; }
.pf-role-copy { min-width:0; }
.pf-role-copy h4 { margin:0 0 10px; font-size:1.1rem; line-height:1.4; color:#f6f5f1; }
.pf-role-copy>p { margin:0; color:#c5cad5; font-size:.9rem; line-height:1.65; }
.pf-role-copy ol { margin:16px 0 0; padding-left:24px; color:#d8dce5; font-size:.86rem; line-height:1.65; }
.pf-role-copy li+li { margin-top:7px; }
.pf-role-copy li::marker { color:#e0c577; font-weight:700; }
.pf-role-methods { display:flex; flex-wrap:wrap; gap:8px; margin-top:18px; }
.pf-role-methods a { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; border:1px solid #555a67; border-radius:9px; color:#e0c577; font-size:.85rem; line-height:1.5; text-decoration:none; }
.pf-role-methods img[hidden] { display:none; }
.pf-role-copy>.pf-role-scope { margin-top:14px; color:#a8afbd; font-size:.82rem; line-height:1.6; }
.pf-role-link { display:inline-block; margin-top:14px; padding:6px 0; color:#e0c577; font-size:.85rem; line-height:1.5; text-underline-offset:3px; }
.pf-role-link:focus-visible,.pf-role-methods a:focus-visible { outline:3px solid #e0c577; outline-offset:4px; }
@media(max-width:1100px) {
 .pf-role-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .pf-role-card--tablet { grid-column:1/-1; display:grid; grid-template-columns:minmax(0,1.35fr) minmax(0,1fr); align-items:center; gap:24px; }
 .pf-role-card--tablet>.pf-role-device { margin-bottom:0; }
}
@media(max-width:600px) {
 .pf-role-showcase { margin-top:32px; padding-top:24px; }
 .pf-role-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
 .pf-role-card--tablet { display:block; }
 .pf-role-card--tablet>.pf-role-device { margin-bottom:20px; }
}