/* =============================================================
   Personal Hedge Fund — Elite Structural Layer
   -------------------------------------------------------------
   Layers an institutional "prospectus" structure on top of the
   existing dark + gold PHF design language WITHOUT changing any
   copy. It gives every section the same premium header rhythm
   (eyebrow kicker -> title -> accent rule), a subtle masked grid
   texture, a soft corner ring, and consistent surface depth so
   the sections read as a deliberately structured document rather
   than a stack of flat cards.

   Requires: personal_hedge_fund.css linked BEFORE this file.
   Scoped under .phf-page. Zebra accent (gold odd / blue even)
   is inherited automatically via nth-child so kickers and rules
   colour-match their panel.
   ============================================================= */

/* ------------------------------------------------------------
   1. Section eyebrow / kicker pill
   ------------------------------------------------------------ */
.phf-page .phf-kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 1.05rem;
    padding: 0.42rem 0.95rem;
    border-radius: 999px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.34);
    color: #fbbf24;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    line-height: 1;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.phf-page .phf-kicker i {
    font-size: 0.68rem;
    opacity: 0.95;
}

/* A small monospace section index rides inside the pill for the
   numbered-prospectus feel (purely structural, no copy). */
.phf-page .phf-kicker-index {
    font-family: "SFMono-Regular", ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding-left: 0.6rem;
    margin-left: 0.15rem;
    border-left: 1px solid currentColor;
    opacity: 0.7;
}

/* Blue (even) panels -> cool kicker to match the zebra rhythm */
.phf-page .phf-content > section.phf-panel:nth-child(even) .phf-kicker {
    background: rgba(96, 165, 250, 0.1);
    border-color: rgba(96, 165, 250, 0.34);
    color: #93c5fd;
}

/* ------------------------------------------------------------
   2. Panel header rhythm + accent rule under the title
   ------------------------------------------------------------ */
.phf-page .phf-panel-header {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.phf-page .phf-title-rule {
    display: block;
    width: 58px;
    height: 3px;
    margin: 0.95rem auto 0.15rem;
    border-radius: 999px;
    background: linear-gradient(90deg, transparent, #fbbf24 30%, #f59e0b 70%, transparent);
    opacity: 0.9;
}

.phf-page .phf-content > section.phf-panel:nth-child(even) .phf-title-rule {
    background: linear-gradient(90deg, transparent, #93c5fd 30%, #3b82f6 70%, transparent);
}

/* When a rule sits directly above the subtitle, give the subtitle
   a touch more breathing room so the header reads as a unit. */
.phf-page .phf-panel-header .phf-title-rule + p {
    margin-top: 0.85rem;
}

/* ------------------------------------------------------------
   3. Kickers that live inside bespoke section layouts
      (research note + instructor don't use .phf-panel-header)
   ------------------------------------------------------------ */
.phf-page .phf-math-download-copy .phf-kicker {
    margin-bottom: 0.9rem;
}

.phf-page .phf-instructor-copy .phf-kicker {
    margin-bottom: 0.85rem;
}

/* The instructor eyebrow already had a plain label; keep the new
   pill aligned left inside that left-aligned copy column. */
.phf-page .phf-instructor-copy {
    align-items: flex-start;
}

/* ------------------------------------------------------------
   4. Institutional grid texture + soft depth on every panel
      Panels already own ::before (animated sheen); we use ::after
      for a static masked grid so both coexist behind the content
      (content is lifted to z-index:1 by the base stylesheet).
   ------------------------------------------------------------ */
.phf-page .phf-content > section.phf-panel::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.028) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 46%);
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.9), transparent 46%);
}

/* Soft corner ring — the brand-panel signature — added to the
   header video hero and every panel via a lightweight radial. */
.phf-page .phf-content > section.phf-panel {
    background-blend-mode: normal;
}

.phf-page .phf-content > section.phf-panel:nth-child(odd) {
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 0 34px rgba(245, 158, 11, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.phf-page .phf-content > section.phf-panel:nth-child(even) {
    box-shadow:
        0 8px 40px rgba(0, 0, 0, 0.4),
        0 0 34px rgba(59, 130, 246, 0.06),
        inset 0 1px 0 rgba(147, 197, 253, 0.07);
}

/* ------------------------------------------------------------
   5. Hero elevation — grid texture + corner ring
   ------------------------------------------------------------ */
.phf-page .phf-hero-top {
    isolation: isolate;
}

.phf-page .phf-hero-top::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    border-radius: inherit;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
    background-size: 34px 34px;
    -webkit-mask-image: radial-gradient(circle at 50% 0%, black, transparent 72%);
    mask-image: radial-gradient(circle at 50% 0%, black, transparent 72%);
}

/* Refined hero eyebrow so it matches the new kicker system */
.phf-page .phf-hero-top .phf-eyebrow {
    background: rgba(251, 191, 36, 0.1);
    border-color: rgba(251, 191, 36, 0.34);
    color: #fde68a;
    letter-spacing: 0.14em;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}

.phf-page .phf-hero-top .phf-eyebrow i {
    color: #fbbf24;
}

/* ------------------------------------------------------------
   6. Card surface polish — consistent hairline + hover lift
   ------------------------------------------------------------ */
.phf-page .phf-strategy-level-card,
.phf-page .phf-module-offering,
.phf-page .phf-roi-stat,
.phf-page .phf-chart-card,
.phf-page .phf-value-cell .phf-roi-stat {
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

.phf-page .phf-strategy-level-card {
    transition: transform 0.22s ease, border-color 0.22s ease, background 0.22s ease, box-shadow 0.22s ease;
}

.phf-page .phf-strategy-level-card:hover {
    transform: translateY(-4px);
    box-shadow:
        0 16px 38px rgba(0, 0, 0, 0.34),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Module cards get a crisper number chip + top hairline */
.phf-page .phf-module-offering-num {
    display: inline-flex;
    align-items: center;
    padding: 0.28rem 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.62);
}

/* ------------------------------------------------------------
   7. Section index badge for bespoke layouts (kept subtle)
   ------------------------------------------------------------ */
.phf-page .phf-instructor-label,
.phf-page .phf-enroll-eyebrow {
    letter-spacing: 0.14em;
}

/* ============================================================
   8. Section HEADER BAND — the brand-panel structural signature
   ------------------------------------------------------------
   Every standard panel gets a distinct, full-bleed top band
   (kicker -> title -> accent rule -> subtitle) that is visually
   separated from its body by a hairline + surface tint. This is
   what turns the page from a stack of look-alike dark boxes into
   a deliberately sectioned "prospectus" — the same rhythm the
   quant-courses brand-panel uses, rendered in the PHF dark theme.
   The band bleeds to the panel edges via negative margins that
   cancel the panel's own padding (panel has overflow:hidden, so
   any overshoot is clipped cleanly to the rounded corners).
   ============================================================ */
.phf-page .phf-content > section.phf-panel > .phf-panel-header {
    position: relative;
    z-index: 1;
    margin: -2rem -2rem 2.25rem;
    padding: 2.6rem 2rem 2.1rem;
    border-bottom: 1px solid rgba(245, 158, 11, 0.24);
    background:
        linear-gradient(180deg,
            rgba(245, 158, 11, 0.13) 0%,
            rgba(245, 158, 11, 0.04) 55%,
            rgba(245, 158, 11, 0) 100%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* Blue (even) panels -> cool band to match the zebra rhythm */
.phf-page .phf-content > section.phf-panel:nth-child(even) > .phf-panel-header {
    border-bottom-color: rgba(96, 165, 250, 0.28);
    background:
        linear-gradient(180deg,
            rgba(59, 130, 246, 0.15) 0%,
            rgba(59, 130, 246, 0.04) 55%,
            rgba(59, 130, 246, 0) 100%);
}

/* Keep header content above the panel's masked grid texture */
.phf-page .phf-content > section.phf-panel > .phf-panel-header > * {
    position: relative;
    z-index: 1;
}

/* Crisp accent tab across the top edge of every band — the single
   strongest "new section starts here" cue, colour-matched to zebra */
.phf-page .phf-content > section.phf-panel > .phf-panel-header::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #fbbf24 22%, #f59e0b 78%, transparent);
    opacity: 0.85;
    pointer-events: none;
}

.phf-page .phf-content > section.phf-panel:nth-child(even) > .phf-panel-header::after {
    background: linear-gradient(90deg, transparent, #93c5fd 22%, #3b82f6 78%, transparent);
}

/* Bigger, tighter title so the band carries real institutional weight */
.phf-page .phf-content > section.phf-panel > .phf-panel-header h2 {
    font-size: clamp(1.6rem, 3.4vw, 2.15rem);
    font-weight: 800;
    letter-spacing: -0.02em;
    margin-bottom: 0.35rem;
}

.phf-page .phf-content > section.phf-panel > .phf-panel-header p {
    color: rgba(255, 255, 255, 0.74);
    font-size: 1.02rem;
}

/* The accent rule reads as the band's underline flourish */
.phf-page .phf-content > section.phf-panel > .phf-panel-header .phf-title-rule {
    width: 72px;
    height: 3px;
    margin-top: 1.1rem;
}

/* ============================================================
   9. Panel BODY rhythm — give the content below the band a
   consistent, slightly recessed reading column so the band /
   body relationship is obvious.
   ============================================================ */
.phf-page .phf-content > section.phf-panel {
    padding-bottom: 2.5rem;
}

/* Section-closing CTA sits centered with room to breathe */
.phf-page .phf-value-cta-wrap {
    margin-top: 2.25rem;
}

/* ------------------------------------------------------------
   10. Responsive
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .phf-page .phf-content > section.phf-panel > .phf-panel-header {
        margin: -1.35rem -1.25rem 1.35rem;
        padding: 1.6rem 1.25rem 1.3rem;
    }

    .phf-page .phf-content > section.phf-panel > .phf-panel-header h2 {
        font-size: 1.35rem;
    }

    .phf-page .phf-content > section.phf-panel > .phf-panel-header p {
        font-size: 0.9rem;
    }

    .phf-page .phf-content > section.phf-panel > .phf-panel-header .phf-title-rule {
        width: 54px;
        margin-top: 0.85rem;
    }
}

@media (max-width: 768px) {
    .phf-page .phf-kicker {
        font-size: 0.66rem;
        padding: 0.38rem 0.8rem;
        margin-bottom: 0.85rem;
    }

    .phf-page .phf-kicker-index {
        display: none;
    }

    .phf-page .phf-title-rule {
        width: 46px;
        margin-top: 0.8rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .phf-page .phf-strategy-level-card {
        transition: none;
    }
}