/* ═══════════════════════════════════════════════════════════════
   HOMEPAGE V3 — magenta + electric yellow + cyan
   All classes scoped under .hp3 to avoid bleeding into hp2/snb.
   Design language sourced from substack-for-beginners-landing v2.
   ═══════════════════════════════════════════════════════════════ */

.hp3 {
    /* core palette */
    --hp3-magenta:        #EC1683;
    --hp3-magenta-deep:   #C81073;
    --hp3-magenta-soft:   #FFD6EA;
    --hp3-coral:          #FF6B47;
    --hp3-coral-deep:     #E8552D;
    --hp3-yellow:         #FFD60A;
    --hp3-yellow-deep:    #F0C400;
    --hp3-cyan:           #2EB5E8;
    --hp3-cyan-light:     #6DD5F3;
    --hp3-cyan-deep:      #1F8FBA;
    --hp3-plum:           #3B0B36;
    --hp3-plum-deep:      #1B0418;
    --hp3-cream:          #FFF8F0;
    --hp3-cream-warm:     #FBEFD9;
    --hp3-ink:            #181225;
    --hp3-ink-soft:       #3A2E48;
    --hp3-muted:          #6B5F7A;
    --hp3-white:          #ffffff;

    /* fonts */
    --hp3-font-display: 'Anton', 'Arial Black', sans-serif;
    --hp3-font-script:  'Caveat Brush', 'Permanent Marker', cursive;
    --hp3-font-serif:   'Playfair Display', Georgia, serif;
    --hp3-font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* shape */
    --hp3-radius:    16px;
    --hp3-radius-sm: 10px;
    --hp3-radius-lg: 28px;

    /* signature gradient — pink → coral hero */
    --hp3-grad-hero: linear-gradient(180deg, #EC1683 0%, #F03077 35%, #FF5A4B 100%);

    /* scoped reset */
    font-family: var(--hp3-font-body);
    color: var(--hp3-ink);
    line-height: 1.6;
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
    background: var(--hp3-white);
}

.hp3 *,
.hp3 *::before,
.hp3 *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hp3 img {
    max-width: 100%;
    display: block;
    /* `height: auto` deliberately omitted — modern browsers preserve aspect ratio
       automatically, and including it here had higher specificity than .hp3-host-photo
       (which sets explicit height: 140px), turning all host avatars into ovals. */
}

/* === Default link reset for .hp3 === */
/* app.css globally sets `a { color: pink; text-decoration: underline; font-weight: 600 }`
   and `a:hover { color: darker-pink; text-decoration: underline }`. We need to defend
   on hover too — without `.hp3 a:hover { ... }` the hover state would leak through. */
.hp3 a,
.hp3 a:hover { text-decoration: none; }
.hp3 a:not(.hp3-btn),
.hp3 a:not(.hp3-btn):hover { color: inherit; }

/* === Inline text links — scoped to body-text containers === */
/* Magenta + subtle underline so they're discoverable in paragraphs. */
.hp3 .hp3-letter-inner a,
.hp3 .hp3-faq-a a,
.hp3 .hp3-quiz-a a,
.hp3 .hp3-host-bio a,
.hp3 .hp3-tcard-quote a {
    color: var(--hp3-magenta);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}
.hp3 .hp3-letter-inner a:hover,
.hp3 .hp3-faq-a a:hover,
.hp3 .hp3-quiz-a a:hover,
.hp3 .hp3-host-bio a:hover,
.hp3 .hp3-tcard-quote a:hover { color: var(--hp3-magenta-deep); }

.hp3 strong { font-weight: 800; }

.hp3 em {
    font-style: italic;
    font-family: var(--hp3-font-serif);
    font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════
   MINIMAL NAV — logo only, top-left, transparent overlay on hero
   ═══════════════════════════════════════════════════════════════ */
.hp3-nav {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 50;
    padding: 1.25rem 1.75rem;
    display: flex;
    align-items: center;
    background: transparent;
}
.hp3-nav-logo {
    display: inline-flex;
    align-items: center;
}
.hp3-nav-logo-img {
    height: 44px;
    width: auto;
    display: block;
}
@media (max-width: 700px) {
    .hp3-nav { padding: 1rem 1.25rem; }
    .hp3-nav-logo-img { height: 36px; }
}


/* ═══════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════ */
.hp3-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.95rem 1.6rem;
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
    border-radius: 6px;
    transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
    box-shadow: 0 4px 0 rgba(24, 18, 37, 0.85);
}
.hp3-btn--lg { padding: 1.15rem 2.4rem; font-size: 1.05rem; }
.hp3-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0 rgba(24, 18, 37, 0.85);
}
.hp3-btn:active {
    transform: translateY(2px);
    box-shadow: 0 2px 0 rgba(24, 18, 37, 0.85);
}

/* Color/decoration rules are repeated across :hover/:focus/:active to defend
   against app.css's global `a:hover { color: pink; text-decoration: underline }`
   which has spec (0,1,1) and beats a plain `.hp3-btn--yellow:hover` (0,2,0)
   only because we hadn't asserted color on hover. Re-asserting in every state
   plus boosting selector to `.hp3 a.hp3-btn--variant` puts us at (0,3,1) — wins. */

.hp3 a.hp3-btn,
.hp3 a.hp3-btn:hover,
.hp3 a.hp3-btn:focus,
.hp3 a.hp3-btn:active { text-decoration: none; font-weight: 800; }

.hp3 a.hp3-btn--yellow,
.hp3 a.hp3-btn--yellow:hover,
.hp3 a.hp3-btn--yellow:focus,
.hp3 a.hp3-btn--yellow:active { color: var(--hp3-ink); background: var(--hp3-yellow); }
.hp3 a.hp3-btn--yellow:hover { background: #FFE03A; }

.hp3 a.hp3-btn--magenta,
.hp3 a.hp3-btn--magenta:hover,
.hp3 a.hp3-btn--magenta:focus,
.hp3 a.hp3-btn--magenta:active { color: var(--hp3-white); background: var(--hp3-magenta); }
.hp3 a.hp3-btn--magenta:hover { background: var(--hp3-magenta-deep); }

/* Non-anchor (e.g., <button>) variants keep their original simpler rules */
.hp3-btn--yellow { background: var(--hp3-yellow); color: var(--hp3-ink); }
.hp3-btn--yellow:hover { background: #FFE03A; }
.hp3-btn--magenta { background: var(--hp3-magenta); color: var(--hp3-white); }
.hp3-btn--magenta:hover { background: var(--hp3-magenta-deep); }


/* ═══════════════════════════════════════════════════════════════
   KICKER / SECTION LABEL (small caps pink, used everywhere)
   ═══════════════════════════════════════════════════════════════ */
.hp3-kicker {
    display: inline-block;
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--hp3-magenta);
}
.hp3-kicker--ink { color: var(--hp3-magenta); }


/* ═══════════════════════════════════════════════════════════════
   CIRCULAR "VIEW PROGRAMS" ARROW (rotating text + arrow)
   ═══════════════════════════════════════════════════════════════ */
.hp3-arrow-circle {
    position: relative;
    display: inline-grid;
    place-items: center;
    width: 110px;
    height: 110px;
    margin: 1.5rem auto 0;
    color: var(--hp3-white);
}
.hp3-arrow-circle-text {
    position: absolute;
    inset: 0;
    animation: hp3-spin 18s linear infinite;
    color: inherit;
}
.hp3-arrow-circle-text svg { width: 100%; height: 100%; }
.hp3-arrow-circle-icon {
    position: relative;
    z-index: 2;
    font-size: 1.4rem;
    font-weight: 800;
    color: inherit;
}
.hp3-arrow-circle--on-magenta { color: var(--hp3-white); }
@keyframes hp3-spin {
    from { transform: rotate(0); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .hp3-arrow-circle-text { animation: none; }
}


/* ═══════════════════════════════════════════════════════════════
   1. HERO — magenta→coral gradient, two-column with photo
   ═══════════════════════════════════════════════════════════════ */
.hp3-hero {
    position: relative;
    background: var(--hp3-grad-hero);
    color: var(--hp3-white);
    padding: 7rem 1.5rem 0;          /* top padding clears the absolute nav */
    overflow: hidden;
}

.hp3-hero-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 2rem;
    align-items: end;
    position: relative;
    z-index: 2;
}

@media (max-width: 900px) {
    .hp3-hero { padding: 6rem 1.25rem 0; }
    .hp3-hero-inner { grid-template-columns: 1fr; gap: 1.5rem; text-align: center; }
}

.hp3-hero-left {
    padding-bottom: 4rem;
}

.hp3-hero-kicker {
    display: inline-block;
    color: var(--hp3-white);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 1.5rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    backdrop-filter: blur(4px);
}

.hp3-hero-logotype {
    font-family: var(--hp3-font-display);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--hp3-white);
    -webkit-text-stroke: 1px rgba(24, 18, 37, 0.55);
    text-shadow: 4px 4px 0 rgba(24, 18, 37, 0.55);
    display: flex;
    flex-direction: column;
    gap: 0.05rem;
    font-size: clamp(3rem, 9vw, 7rem);
    margin-bottom: 1.75rem;
}
@media (max-width: 900px) {
    .hp3-hero-logotype { align-items: center; font-size: clamp(3.5rem, 14vw, 6rem); }
}
.hp3-hero-logotype-1 { color: var(--hp3-white); }
.hp3-hero-logotype-2 { color: var(--hp3-white); }
.hp3-hero-logotype-3 {
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-script);
    font-size: 1.05em;
    line-height: 0.95;
    -webkit-text-stroke: 0;
    transform: rotate(-2deg);
    text-shadow: 4px 4px 0 rgba(24, 18, 37, 0.55);
    align-self: flex-start;
    margin-top: 0.2em;
}
@media (max-width: 900px) {
    .hp3-hero-logotype-3 { align-self: center; }
}

.hp3-hero-sub {
    max-width: 38ch;
    color: rgba(255, 255, 255, 0.96);
    font-size: 1.15rem;
    line-height: 1.5;
    font-family: var(--hp3-font-serif);
    font-weight: 400;
    margin-bottom: 1rem;
}
.hp3-hero-sub em {
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-serif);
}
@media (max-width: 900px) {
    .hp3-hero-sub { margin-left: auto; margin-right: auto; max-width: 36ch; }
}

.hp3-hero-right {
    position: relative;
    align-self: end;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.hp3-hero-photo {
    max-width: 460px;
    width: 100%;
    line-height: 0;
}
.hp3-hero-photo img {
    width: 100%;
    height: auto;
    display: block;
    filter: drop-shadow(0 18px 30px rgba(24, 18, 37, 0.35));
}

/* When hero has photo, arrow lives below text on the left */
.hp3-hero .hp3-arrow-circle {
    margin: 0.5rem 0 0;
}
@media (max-width: 900px) {
    .hp3-hero .hp3-arrow-circle { margin: 0.5rem auto 0; }
}


/* ═══════════════════════════════════════════════════════════════
   2. PROGRAMS LIST — alternating rows on white background
   ═══════════════════════════════════════════════════════════════ */
.hp3-programs {
    background: var(--hp3-white);
    padding: 6rem 1.5rem;
    scroll-margin-top: 80px;
}
.hp3-programs-inner {
    max-width: 1100px;
    margin: 0 auto;
}

.hp3-section-head {
    text-align: center;
    margin-bottom: 4.5rem;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}
.hp3-section-head .hp3-kicker { margin-bottom: 1rem; }

.hp3-section-heading {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.1;
    color: var(--hp3-ink);
    margin-bottom: 1.25rem;
}
.hp3-section-heading em {
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-serif);
}
.hp3-section-sub {
    color: var(--hp3-ink-soft);
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 auto;
}

.hp3-program-list {
    display: flex;
    flex-direction: column;
    gap: 5rem;
}

.hp3-program {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.hp3-program--reverse .hp3-program-media { order: 2; }
@media (max-width: 820px) {
    .hp3-program { grid-template-columns: 1fr; gap: 2rem; }
    .hp3-program--reverse .hp3-program-media { order: 0; }
}

.hp3-program-media {
    position: relative;
}

.hp3-program-link {
    display: block;
    position: relative;
    border-radius: var(--hp3-radius);
    transition: transform 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    cursor: pointer;
}
.hp3-program-link:hover { transform: translate(-4px, -4px); }
.hp3-program-link:focus-visible {
    outline: 3px solid var(--hp3-cyan);
    outline-offset: 6px;
}

.hp3-program-media img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: var(--hp3-radius);
    border: 3px solid var(--hp3-ink);
    box-shadow: 10px 10px 0 var(--hp3-magenta);
    background: var(--hp3-cream);
    transition: box-shadow 0.3s cubic-bezier(0.2, 0.8, 0.2, 1);
    display: block;
}
.hp3-program-link:hover img { box-shadow: 14px 14px 0 var(--hp3-magenta); }

.hp3-program:nth-child(even) .hp3-program-media img { box-shadow: 10px 10px 0 var(--hp3-cyan); }
.hp3-program:nth-child(3n) .hp3-program-media img   { box-shadow: 10px 10px 0 var(--hp3-yellow); }
.hp3-program:nth-child(5n) .hp3-program-media img   { box-shadow: 10px 10px 0 var(--hp3-coral); }
.hp3-program:nth-child(even) .hp3-program-link:hover img { box-shadow: 14px 14px 0 var(--hp3-cyan); }
.hp3-program:nth-child(3n)   .hp3-program-link:hover img { box-shadow: 14px 14px 0 var(--hp3-yellow); }
.hp3-program:nth-child(5n)   .hp3-program-link:hover img { box-shadow: 14px 14px 0 var(--hp3-coral); }

@media (max-width: 820px) {
    .hp3-program-media img { box-shadow: 6px 6px 0 var(--hp3-magenta); }
    .hp3-program:nth-child(even) .hp3-program-media img { box-shadow: 6px 6px 0 var(--hp3-cyan); }
    .hp3-program:nth-child(3n) .hp3-program-media img   { box-shadow: 6px 6px 0 var(--hp3-yellow); }
}

/* ── Sale badge — pinned to top-right of a program thumbnail ─────── */
.hp3-program-sale-badge {
    position: absolute;
    top: -22px;
    right: -22px;
    width: 110px;
    height: 110px;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 30%, #FFE94A 0%, var(--hp3-yellow) 60%, #F0C400 100%);
    border: 3px solid var(--hp3-ink);
    box-shadow: 4px 4px 0 var(--hp3-magenta), 0 8px 16px rgba(0, 0, 0, 0.18);
    color: var(--hp3-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    transform: rotate(-12deg);
    z-index: 5;
    pointer-events: none;
    animation: hp3-sale-pulse 2.8s ease-in-out infinite;
    line-height: 1;
}
@keyframes hp3-sale-pulse {
    0%, 100% { transform: rotate(-12deg) scale(1); }
    50%      { transform: rotate(-12deg) scale(1.06); }
}

/* Variant: pin to bottom-left of the thumbnail (used on LSF where the
   cover art's focal point sits in the top-right corner). */
.hp3-program-sale-badge--bl {
    top: auto;
    right: auto;
    bottom: -22px;
    left: -22px;
    transform: rotate(8deg);
    animation-name: hp3-sale-pulse-bl;
}
@keyframes hp3-sale-pulse-bl {
    0%, 100% { transform: rotate(8deg) scale(1); }
    50%      { transform: rotate(8deg) scale(1.06); }
}
@media (max-width: 820px) {
    .hp3-program-sale-badge--bl {
        bottom: -14px;
        left: -10px;
    }
}
@media (prefers-reduced-motion: reduce) {
    .hp3-program-sale-badge { animation: none; }
}
.hp3-program-sale-badge::before {
    /* Inner dashed ring so it reads as a sticker, not a plain disc */
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 50%;
    border: 1.5px dashed rgba(24, 18, 37, 0.55);
    pointer-events: none;
}
.hp3-program-sale-badge-pct {
    font-family: var(--hp3-font-display);
    font-size: 2.1rem;
    line-height: 0.9;
    letter-spacing: 0.01em;
    margin-top: 0.15rem;
}
.hp3-program-sale-badge-off {
    font-family: var(--hp3-font-body);
    font-weight: 900;
    font-size: 0.85rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-top: 0.05rem;
}
.hp3-program-sale-badge-code {
    margin-top: 0.3rem;
    font-family: var(--hp3-font-body);
    font-weight: 700;
    font-size: 0.55rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--hp3-magenta);
    background: var(--hp3-white);
    padding: 0.18rem 0.4rem;
    border-radius: 999px;
    border: 1.5px solid var(--hp3-ink);
}
@media (max-width: 820px) {
    .hp3-program-sale-badge {
        width: 84px;
        height: 84px;
        top: -14px;
        right: -10px;
        box-shadow: 3px 3px 0 var(--hp3-magenta), 0 6px 12px rgba(0, 0, 0, 0.18);
    }
    .hp3-program-sale-badge::before { inset: 5px; }
    .hp3-program-sale-badge-pct { font-size: 1.55rem; }
    .hp3-program-sale-badge-off { font-size: 0.65rem; letter-spacing: 0.14em; }
    .hp3-program-sale-badge-code { font-size: 0.45rem; padding: 0.14rem 0.32rem; }
}

.hp3-program-flag {
    position: absolute;
    top: -14px;
    left: -14px;
    background: var(--hp3-yellow);
    color: var(--hp3-ink);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.08em;
    padding: 0.45rem 0.9rem;
    border-radius: 6px;
    border: 2px solid var(--hp3-ink);
    box-shadow: 3px 3px 0 var(--hp3-ink);
    transform: rotate(-3deg);
    z-index: 3;
    white-space: nowrap;
}

.hp3-program-kicker {
    display: inline-block;
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hp3-program-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    color: var(--hp3-ink);
    margin-bottom: 1.25rem;
}
.hp3-program-title em {
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-serif);
}

.hp3-program-desc {
    color: var(--hp3-ink-soft);
    font-size: 1rem;
    line-height: 1.65;
    margin-bottom: 1rem;
    max-width: 52ch;
}
.hp3-program-desc strong { color: var(--hp3-ink); }

.hp3-program-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin: 1.25rem 0 1.5rem;
}
.hp3-program-meta span {
    background: var(--hp3-cream-warm);
    color: var(--hp3-ink);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 0.35rem 0.7rem;
    border-radius: 999px;
    border: 1.5px solid var(--hp3-ink);
}

.hp3-program-footer {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    flex-wrap: wrap;
    margin-top: 1.5rem;
}
.hp3-program-price {
    font-family: var(--hp3-font-display);
    font-size: 1.65rem;
    line-height: 1;
    color: var(--hp3-magenta);
}
.hp3-program-price em {
    font-family: var(--hp3-font-serif);
    color: var(--hp3-muted);
    font-size: 0.65rem;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-left: 0.4rem;
    font-weight: 700;
}


/* ═══════════════════════════════════════════════════════════════
   3. STAR OFFER — magenta block, signature highlight
   ═══════════════════════════════════════════════════════════════ */
.hp3-star {
    background: var(--hp3-magenta);
    color: var(--hp3-white);
    padding: 6rem 1.5rem 7rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hp3-star-inner {
    max-width: 980px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}

.hp3-star-kicker {
    display: inline-block;
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.hp3-star-heading {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(2.2rem, 5vw, 3.6rem);
    line-height: 1.1;
    color: var(--hp3-white);
    margin-bottom: 1.5rem;
}
.hp3-star-heading em {
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-serif);
}

.hp3-star-pill {
    display: inline-block;
    background: var(--hp3-plum);
    color: var(--hp3-cyan-light);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.85rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.7rem 1.4rem;
    border-radius: 999px;
    margin: 3rem auto 2rem;
    border: 2px solid var(--hp3-ink);
    box-shadow: 3px 3px 0 var(--hp3-ink);
}

.hp3-star-feature-title {
    font-family: var(--hp3-font-serif);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(3.2rem, 8vw, 6rem);
    line-height: 0.95;
    color: var(--hp3-white);
    margin-bottom: 0.5rem;
}
.hp3-star-feature-sub {
    color: rgba(255, 255, 255, 0.9);
    font-family: var(--hp3-font-body);
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 3rem;
}

.hp3-star-card {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 2.5rem;
    align-items: center;
    text-align: left;
    background: var(--hp3-magenta-deep);
    border-radius: var(--hp3-radius);
    padding: 2.5rem;
    border: 3px solid var(--hp3-ink);
    box-shadow: 10px 10px 0 var(--hp3-yellow);
}
@media (max-width: 760px) {
    .hp3-star-card {
        grid-template-columns: 1fr;
        padding: 2rem 1.5rem;
        text-align: center;
        box-shadow: 6px 6px 0 var(--hp3-yellow);
    }
}

.hp3-star-card-photo {
    background: var(--hp3-yellow);
    border-radius: var(--hp3-radius-sm);
    border: 3px solid var(--hp3-ink);
    overflow: hidden;
    aspect-ratio: 4 / 5;
}
.hp3-star-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.hp3-star-card-copy p {
    color: rgba(255, 255, 255, 0.94);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.hp3-star-card-copy strong { color: var(--hp3-yellow); }
.hp3-star-card-copy .hp3-btn { margin-top: 0.75rem; }


/* ═══════════════════════════════════════════════════════════════
   4. MEET KRISTINA — yellow grain background, photo + bio
   ═══════════════════════════════════════════════════════════════ */
.hp3-meet {
    background: var(--hp3-yellow);
    background-image:
        radial-gradient(rgba(24, 18, 37, 0.06) 1px, transparent 1px),
        radial-gradient(rgba(24, 18, 37, 0.04) 1px, transparent 1px);
    background-size: 14px 14px, 22px 22px;
    background-position: 0 0, 7px 11px;
    padding: 6rem 1.5rem;
    position: relative;
    overflow: hidden;
}

.hp3-meet-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 3rem;
    align-items: center;
}
@media (max-width: 900px) {
    .hp3-meet-inner { grid-template-columns: 1fr; }
}

.hp3-meet-copy .hp3-kicker { margin-bottom: 0.75rem; }

.hp3-meet-heading {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    line-height: 1.1;
    color: var(--hp3-ink);
    margin-bottom: 1.5rem;
}
.hp3-meet-heading em {
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-serif);
}

.hp3-meet-body {
    color: var(--hp3-ink-soft);
    font-size: 1.02rem;
    line-height: 1.7;
    max-width: 56ch;
    margin-bottom: 1.1rem;
}
.hp3-meet-body strong { color: var(--hp3-ink); }
.hp3-meet-body em { color: var(--hp3-magenta); font-family: var(--hp3-font-serif); }

.hp3-meet-achievements {
    list-style: none;
    margin: 1.5rem 0 2rem;
    display: grid;
    gap: 0.5rem;
    max-width: 56ch;
}
.hp3-meet-achievements li {
    color: var(--hp3-ink);
    font-size: 0.95rem;
    line-height: 1.5;
    padding-left: 1.5rem;
    position: relative;
}
.hp3-meet-achievements li::before {
    content: "★";
    color: var(--hp3-magenta);
    position: absolute;
    left: 0;
    font-weight: 900;
}

.hp3-meet-seen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem 1rem;
    padding-top: 1.5rem;
    border-top: 2px dashed rgba(24, 18, 37, 0.2);
}
.hp3-meet-seen-label {
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--hp3-muted);
}
.hp3-meet-seen-logo {
    background: var(--hp3-ink);
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    padding: 0.35rem 0.75rem;
    border-radius: 4px;
}

.hp3-meet-photo {
    position: relative;
    justify-self: center;
    max-width: 380px;
}
.hp3-meet-photo img {
    width: 100%;
    border-radius: var(--hp3-radius);
    border: 3px solid var(--hp3-ink);
    box-shadow: 10px 10px 0 var(--hp3-magenta);
    background: var(--hp3-white);
    transform: rotate(2deg);
}
@media (max-width: 900px) {
    .hp3-meet-photo {
        margin-top: 1rem;
        max-width: 300px;
    }
    .hp3-meet-photo img { box-shadow: 6px 6px 0 var(--hp3-magenta); }
}


/* ═══════════════════════════════════════════════════════════════
   COURSE LANDING PAGE — shared sections for all bootcamp pages
   ═══════════════════════════════════════════════════════════════ */

/* ── Course Hero (vs homepage hero, accepts subtitle + facts row) ─ */
.hp3-course-hero {
    position: relative;
    background: var(--hp3-grad-hero);
    color: var(--hp3-white);
    padding: 7rem 1.5rem 4rem;
    overflow: hidden;
    text-align: center;
}
.hp3-course-hero-inner {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.hp3-course-hero-eyebrow {
    display: inline-block;
    color: var(--hp3-white);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
    padding: 0.5rem 0.9rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    backdrop-filter: blur(4px);
}
.hp3-course-hero-title {
    font-family: var(--hp3-font-display);
    font-weight: 400;
    line-height: 0.92;
    letter-spacing: 0.005em;
    text-transform: uppercase;
    color: var(--hp3-white);
    -webkit-text-stroke: 1px rgba(24, 18, 37, 0.55);
    text-shadow: 4px 4px 0 rgba(24, 18, 37, 0.55);
    font-size: clamp(2.6rem, 7vw, 5.6rem);
    margin-bottom: 1.25rem;
}
.hp3-course-hero-title em {
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-script);
    font-style: normal;
    font-weight: 400;
    font-size: 1.05em;
    line-height: 0.95;
    -webkit-text-stroke: 0;
    display: inline-block;
    transform: rotate(-2deg);
    text-shadow: 4px 4px 0 rgba(24, 18, 37, 0.55);
    margin: 0 0.1em;
}
.hp3-course-hero-sub {
    max-width: 38rem;
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, 0.96);
    font-size: 1.1rem;
    line-height: 1.55;
    font-family: var(--hp3-font-serif);
    font-weight: 400;
}
.hp3-course-hero-sub strong { color: var(--hp3-yellow); font-weight: 700; }

.hp3-hosts-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.5rem;
    margin: 1.5rem 0 2rem;
}
.hp3-host-mini { text-align: center; }
.hp3-host-mini-ring {
    width: 104px;
    height: 104px;
    border-radius: 50%;
    overflow: hidden;
    border: 3px solid var(--hp3-ink);
    box-shadow: 5px 5px 0 var(--hp3-yellow);
    background: var(--hp3-white);
    margin: 0 auto 0.55rem;
}
.hp3-host-mini-ring img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hp3-host-mini-name {
    color: var(--hp3-white);
    font-family: var(--hp3-font-script);
    font-size: 1.15rem;
    transform: rotate(-2deg);
}

.hp3-facts {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.75rem;
    max-width: 720px;
    margin: 1.5rem auto 2rem;
}
@media (max-width: 600px) {
    .hp3-facts { grid-template-columns: repeat(2, 1fr); }
}
.hp3-fact {
    background: rgba(255, 255, 255, 0.12);
    color: var(--hp3-white);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 10px;
    padding: 0.75rem 0.5rem;
    backdrop-filter: blur(4px);
}
.hp3-fact-value {
    font-family: var(--hp3-font-display);
    font-size: 1.4rem;
    line-height: 1;
    color: var(--hp3-yellow);
    margin-bottom: 0.2rem;
}
.hp3-fact-label {
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.85);
    font-weight: 700;
}

.hp3-course-hero-cta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    margin-top: 1rem;
}
.hp3 a.hp3-plan-link {
    color: rgba(255, 255, 255, 0.85);
    font-family: var(--hp3-font-body);
    font-size: 0.85rem;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.hp3 a.hp3-plan-link:hover { color: var(--hp3-yellow); }

/* hero video frame */
.hp3-hero-video {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 720px;
    margin: 2rem auto;
    border: 3px solid var(--hp3-ink);
    box-shadow: 10px 10px 0 var(--hp3-yellow);
    border-radius: var(--hp3-radius);
    overflow: hidden;
    background: var(--hp3-plum);
}
.hp3-hero-video iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
.hp3-hero-video-caption {
    color: rgba(255, 255, 255, 0.92);
    font-family: var(--hp3-font-serif);
    font-style: italic;
    font-size: 0.95rem;
    max-width: 620px;
    margin: -0.5rem auto 1.5rem;
}

/* ── Stats Bar ─────────────────────────────────────────────────── */
.hp3-stats-bar {
    background: var(--hp3-plum);
    color: var(--hp3-white);
    padding: 2.5rem 1.5rem;
    border-top: 4px solid var(--hp3-ink);
    border-bottom: 4px solid var(--hp3-ink);
}
.hp3-stats-grid {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    text-align: center;
}
@media (max-width: 700px) {
    .hp3-stats-grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
}
.hp3-stat-item {}
.hp3-stat-number {
    font-family: var(--hp3-font-display);
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1;
    color: var(--hp3-yellow);
    margin-bottom: 0.4rem;
}
.hp3-stat-label {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 700;
}

/* ── Section Container ─────────────────────────────────────────── */
.hp3-section {
    padding: 5rem 1.5rem;
}
.hp3-section--cream { background: var(--hp3-cream); }
.hp3-section--white { background: var(--hp3-white); }
.hp3-section--magenta { background: var(--hp3-magenta); color: var(--hp3-white); }
.hp3-section--plum { background: var(--hp3-plum); color: var(--hp3-white); }
.hp3-section-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.hp3-section-head {
    text-align: center;
    margin-bottom: 3rem;
    max-width: 740px;
    margin-left: auto;
    margin-right: auto;
}
.hp3-section-label {
    display: inline-block;
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.85rem;
}
.hp3-section--magenta .hp3-section-label,
.hp3-section--plum .hp3-section-label { color: var(--hp3-yellow); }
.hp3-section-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    line-height: 1.1;
    color: var(--hp3-ink);
    margin-bottom: 1rem;
}
.hp3-section--magenta .hp3-section-title,
.hp3-section--plum .hp3-section-title { color: var(--hp3-white); }
.hp3-section-title em {
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-serif);
}
.hp3-section--magenta .hp3-section-title em,
.hp3-section--plum .hp3-section-title em { color: var(--hp3-yellow); }
.hp3-section-sub {
    color: var(--hp3-ink-soft);
    font-size: 1.02rem;
    line-height: 1.6;
    max-width: 620px;
    margin: 0 auto;
}
.hp3-section--magenta .hp3-section-sub,
.hp3-section--plum .hp3-section-sub { color: rgba(255, 255, 255, 0.88); }

/* ── Letter / Personal Note ────────────────────────────────────── */
.hp3-letter {
    background: var(--hp3-cream);
    padding: 5rem 1.5rem;
}
.hp3-letter-inner {
    max-width: 720px;
    margin: 0 auto;
    color: var(--hp3-ink-soft);
    font-size: 1.05rem;
    line-height: 1.7;
}
.hp3-letter-inner p { margin-bottom: 1.25rem; }
.hp3-letter-inner p:last-child { margin-bottom: 0; }
.hp3-letter-inner strong { color: var(--hp3-ink); font-weight: 700; }
.hp3-letter-inner em {
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-serif);
}
.hp3-letter-callout {
    background: var(--hp3-yellow);
    color: var(--hp3-ink);
    padding: 1.25rem 1.5rem;
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius-sm);
    box-shadow: 6px 6px 0 var(--hp3-magenta);
    font-family: var(--hp3-font-serif);
    font-style: italic;
    font-size: 1.1rem !important;
    line-height: 1.45 !important;
    margin: 2rem 0 !important;
    text-align: center;
}
.hp3-letter-list {
    list-style: none;
    margin: 1rem 0 1.5rem;
    padding-left: 0;
}
.hp3-letter-list li {
    padding-left: 1.5rem;
    margin-bottom: 0.5rem;
    position: relative;
    line-height: 1.5;
}
.hp3-letter-list li::before {
    content: "★";
    color: var(--hp3-magenta);
    position: absolute;
    left: 0;
    font-weight: 900;
}
.hp3-letter-cta {
    text-align: center;
    margin-top: 2.5rem;
}

/* ── Hosts grid (2 or 3 columns) ───────────────────────────────── */
.hp3-hosts {
    background: var(--hp3-white);
    padding: 5rem 1.5rem;
}
.hp3-hosts-inner { max-width: 1100px; margin: 0 auto; }
.hp3-hosts-grid {
    display: grid;
    gap: 2rem;
    grid-template-columns: repeat(3, 1fr);
}
.hp3-hosts-grid--two {
    grid-template-columns: repeat(2, 1fr);
    max-width: 800px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .hp3-hosts-grid,
    .hp3-hosts-grid--two { grid-template-columns: 1fr; }
}
.hp3-host-card {
    background: var(--hp3-white);
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius);
    padding: 2rem 1.75rem;
    box-shadow: 8px 8px 0 var(--hp3-magenta);
    text-align: center;
    transition: transform 0.2s ease;
}
.hp3-host-card:nth-child(2) { box-shadow: 8px 8px 0 var(--hp3-cyan); }
.hp3-host-card:nth-child(3) { box-shadow: 8px 8px 0 var(--hp3-yellow); }
.hp3-host-card:hover { transform: translate(-4px, -4px); }

.hp3-host-photo {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    margin: 0 auto 1rem;
    border: 3px solid var(--hp3-ink);
    background: var(--hp3-cream);
}
.hp3-host-badge {
    display: inline-block;
    background: var(--hp3-yellow);
    color: var(--hp3-ink);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.8rem;
    border-radius: 999px;
    border: 1.5px solid var(--hp3-ink);
    margin-bottom: 0.85rem;
}
.hp3-host-name {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: 1.45rem;
    color: var(--hp3-ink);
    margin-bottom: 0.25rem;
}
.hp3-host-role {
    font-family: var(--hp3-font-body);
    font-weight: 600;
    font-size: 0.85rem;
    color: var(--hp3-muted);
    margin-bottom: 1rem;
}
.hp3-host-bio {
    color: var(--hp3-ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    text-align: left;
}
.hp3-host-bio strong { color: var(--hp3-ink); }
.hp3-host-stats {
    list-style: none;
    text-align: left;
    border-top: 1px dashed rgba(24, 18, 37, 0.2);
    padding-top: 1rem;
    margin-top: 1rem;
}
.hp3-host-stats li {
    font-size: 0.88rem;
    line-height: 1.5;
    padding: 0.35rem 0 0.35rem 1.4rem;
    position: relative;
    color: var(--hp3-ink);
}
.hp3-host-stats li::before {
    content: "★";
    color: var(--hp3-magenta);
    position: absolute;
    left: 0;
    font-weight: 900;
}
.hp3-host-proof {
    background: var(--hp3-cream-warm);
    border-radius: var(--hp3-radius-sm);
    padding: 0.9rem 1rem;
    margin-top: 1rem;
    text-align: center;
    border: 1.5px solid var(--hp3-ink);
}
.hp3-host-proof-num {
    display: block;
    font-family: var(--hp3-font-display);
    font-size: 1.6rem;
    color: var(--hp3-magenta);
    line-height: 1;
    margin-bottom: 0.25rem;
}
.hp3-host-proof-label {
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--hp3-muted);
    font-weight: 700;
}

/* ── Pillars (3 column) ────────────────────────────────────────── */
.hp3-pillars {
    background: var(--hp3-cream);
    padding: 5rem 1.5rem;
}
.hp3-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 800px) {
    .hp3-pillars-grid { grid-template-columns: 1fr; }
}
.hp3-pillar-card {
    background: var(--hp3-white);
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius);
    padding: 2rem 1.5rem;
    box-shadow: 6px 6px 0 var(--hp3-magenta);
    text-align: center;
}
.hp3-pillar-card:nth-child(2) { box-shadow: 6px 6px 0 var(--hp3-cyan); }
.hp3-pillar-card:nth-child(3) { box-shadow: 6px 6px 0 var(--hp3-yellow); }
.hp3-pillar-icon {
    width: 72px;
    height: 72px;
    background: var(--hp3-magenta);
    color: var(--hp3-white);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 2rem;
    border: 3px solid var(--hp3-ink);
    margin: 0 auto 1rem;
}
.hp3-pillar-card:nth-child(2) .hp3-pillar-icon { background: var(--hp3-cyan); }
.hp3-pillar-card:nth-child(3) .hp3-pillar-icon { background: var(--hp3-coral); }
.hp3-pillar-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: 1.4rem;
    color: var(--hp3-ink);
    margin-bottom: 0.6rem;
}
.hp3-pillar-desc {
    color: var(--hp3-ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Curriculum / Modules (4 cards) ────────────────────────────── */
.hp3-curriculum {
    background: var(--hp3-white);
    padding: 5rem 1.5rem;
}
.hp3-curriculum-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 800px) {
    .hp3-curriculum-grid { grid-template-columns: 1fr; }
}
.hp3-day-card {
    background: var(--hp3-cream);
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius);
    padding: 1.75rem 1.5rem;
    box-shadow: 8px 8px 0 var(--hp3-magenta);
}
.hp3-day-card:nth-child(2) { box-shadow: 8px 8px 0 var(--hp3-cyan); }
.hp3-day-card:nth-child(3) { box-shadow: 8px 8px 0 var(--hp3-yellow); }
.hp3-day-card:nth-child(4) { box-shadow: 8px 8px 0 var(--hp3-coral); }
.hp3-day-badge {
    display: inline-block;
    background: var(--hp3-magenta);
    color: var(--hp3-white);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.7rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 0.4rem 0.85rem;
    border-radius: 4px;
    border: 2px solid var(--hp3-ink);
    margin-bottom: 1rem;
}
.hp3-day-card:nth-child(2) .hp3-day-badge { background: var(--hp3-cyan); }
.hp3-day-card:nth-child(3) .hp3-day-badge { background: var(--hp3-coral); }
.hp3-day-card:nth-child(4) .hp3-day-badge { background: var(--hp3-ink); }
.hp3-day-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--hp3-ink);
    margin-bottom: 0.6rem;
}
.hp3-day-desc {
    color: var(--hp3-ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 1rem;
}
.hp3-day-topics {
    list-style: none;
    padding: 0;
    margin: 0;
}
.hp3-day-topics li {
    padding: 0.5rem 0 0.5rem 1.5rem;
    position: relative;
    border-top: 1px dashed rgba(24, 18, 37, 0.18);
    color: var(--hp3-ink);
    font-size: 0.92rem;
    line-height: 1.5;
}
.hp3-day-topics li:first-child { border-top: none; padding-top: 0.25rem; }
.hp3-day-topics li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--hp3-magenta);
    font-weight: 900;
}

/* ── Mid-Page CTA Band ─────────────────────────────────────────── */
.hp3-band {
    background: var(--hp3-ink);
    color: var(--hp3-white);
    padding: 2.5rem 1.5rem;
}
.hp3-band-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
}
.hp3-band-text {
    font-family: var(--hp3-font-serif);
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.4;
    color: var(--hp3-white);
    max-width: 50ch;
}
.hp3-band-text strong { color: var(--hp3-yellow); }

/* ── Bonuses Grid ──────────────────────────────────────────────── */
.hp3-bonuses {
    background: var(--hp3-cream);
    padding: 5rem 1.5rem;
}
.hp3-bonuses-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 900px) {
    .hp3-bonuses-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .hp3-bonuses-grid { grid-template-columns: 1fr; }
}
.hp3-bonus-card {
    background: var(--hp3-white);
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius);
    padding: 1.75rem 1.5rem;
    box-shadow: 6px 6px 0 var(--hp3-magenta);
    position: relative;
}
.hp3-bonus-card:nth-child(2n) { box-shadow: 6px 6px 0 var(--hp3-cyan); }
.hp3-bonus-card:nth-child(3n) { box-shadow: 6px 6px 0 var(--hp3-yellow); }
.hp3-bonus-icon {
    display: inline-grid;
    place-items: center;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--hp3-magenta);
    color: var(--hp3-white);
    font-size: 1.55rem;
    border: 3px solid var(--hp3-ink);
    margin-bottom: 0.85rem;
}
.hp3-bonus-card:nth-child(2n) .hp3-bonus-icon { background: var(--hp3-cyan); }
.hp3-bonus-card:nth-child(3n) .hp3-bonus-icon { background: var(--hp3-coral); }
.hp3-bonus-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: 1.18rem;
    color: var(--hp3-ink);
    margin-bottom: 0.5rem;
}
.hp3-bonus-desc {
    color: var(--hp3-ink-soft);
    font-size: 0.92rem;
    line-height: 1.55;
    margin-bottom: 0.75rem;
}
.hp3-bonus-value {
    display: inline-block;
    background: var(--hp3-cream-warm);
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.7rem;
    border-radius: 4px;
    border: 1.5px solid var(--hp3-magenta);
}

/* ── Quiz / Myths Accordion ────────────────────────────────────── */
.hp3-quiz {
    background: var(--hp3-white);
    padding: 5rem 1.5rem;
}
.hp3-quiz-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.hp3-quiz-card {
    background: var(--hp3-cream);
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius);
    box-shadow: 5px 5px 0 var(--hp3-magenta);
    overflow: hidden;
}
.hp3-quiz-card:nth-child(2) { box-shadow: 5px 5px 0 var(--hp3-cyan); }
.hp3-quiz-card:nth-child(3) { box-shadow: 5px 5px 0 var(--hp3-yellow); }
.hp3-quiz-card:nth-child(4) { box-shadow: 5px 5px 0 var(--hp3-coral); }
.hp3-quiz-q {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--hp3-ink);
}
.hp3-quiz-q::-webkit-details-marker { display: none; }
.hp3-quiz-myth-badge {
    background: var(--hp3-ink);
    color: var(--hp3-white);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    flex-shrink: 0;
}
.hp3-quiz-myth-text { flex-grow: 1; }
.hp3-quiz-toggle {
    background: var(--hp3-magenta);
    color: var(--hp3-white);
    width: 28px; height: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-weight: 900;
    flex-shrink: 0;
}
.hp3-quiz-card[open] .hp3-quiz-toggle { background: var(--hp3-cyan); }
.hp3-quiz-a {
    padding: 0 1.25rem 1.25rem;
    color: var(--hp3-ink-soft);
    border-top: 1px dashed rgba(24, 18, 37, 0.2);
}
.hp3-quiz-truth-badge {
    display: inline-block;
    background: #22a06b;
    color: var(--hp3-white);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 0.35rem 0.6rem;
    border-radius: 4px;
    margin: 1rem 0 0.75rem;
}
.hp3-quiz-a p {
    font-size: 0.95rem;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}
.hp3-quiz-a p:last-child { margin-bottom: 0; }
.hp3-quiz-a strong { color: var(--hp3-ink); }
.hp3-quiz-a em { color: var(--hp3-magenta); font-family: var(--hp3-font-serif); }
.hp3-quiz-bonus {
    background: var(--hp3-yellow);
    color: var(--hp3-ink) !important;
    border: 2px solid var(--hp3-ink);
    border-radius: 6px;
    padding: 0.75rem 1rem !important;
    margin-top: 0.5rem !important;
}
.hp3-quiz-cta {
    text-align: center;
    margin-top: 2.5rem;
}
.hp3-quiz-cta p {
    margin-bottom: 1rem;
    color: var(--hp3-ink-soft);
    font-size: 1rem;
}
.hp3-quiz-cta strong { color: var(--hp3-ink); }

/* ── Testimonial Gallery (mixed text + video cards) ──────────────── */
.hp3-tgallery {
    background: var(--hp3-plum);
    color: var(--hp3-white);
    padding: 5rem 1.5rem;
}
.hp3-tgallery .hp3-section-label,
.hp3-tgallery .hp3-section-title,
.hp3-tgallery .hp3-section-sub { color: var(--hp3-white); }
.hp3-tgallery .hp3-section-label { color: var(--hp3-yellow); }
.hp3-tgallery .hp3-section-title em { color: var(--hp3-yellow); }
.hp3-tgallery-grid {
    columns: 3 280px;
    column-gap: 1.5rem;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 700px) { .hp3-tgallery-grid { columns: 1; } }
.hp3-tcard {
    break-inside: avoid;
    margin-bottom: 1.5rem;
    background: var(--hp3-white);
    color: var(--hp3-ink);
    border: 2px solid var(--hp3-ink);
    border-radius: 12px;
    padding: 1.4rem;
    box-shadow: 5px 5px 0 var(--hp3-magenta);
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
}
.hp3-tcard:nth-child(2n) { box-shadow: 5px 5px 0 var(--hp3-cyan); }
.hp3-tcard:nth-child(3n) { box-shadow: 5px 5px 0 var(--hp3-yellow); }
.hp3-tcard--video {
    padding: 0;
    overflow: hidden;
    background: var(--hp3-plum-deep);
}
.hp3-tcard--video .hp3-tcard-video {
    position: relative;
    aspect-ratio: 16 / 9;
}
.hp3-tcard--portrait .hp3-tcard-video {
    aspect-ratio: 9 / 16;
}
.hp3-tcard-video iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
.hp3-tcard-head {
    display: flex;
    align-items: center;
    gap: 0.65rem;
}
.hp3-tcard-avatar {
    width: 48px;
    height: 48px;
    min-width: 48px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center top;
    border: 2px solid var(--hp3-ink);
}
.hp3-tcard-name {
    font-weight: 800;
    font-size: 0.95rem;
    color: var(--hp3-ink);
}
.hp3-tcard-role {
    font-size: 0.78rem;
    color: var(--hp3-muted);
}
.hp3-tcard-metric {
    align-self: flex-start;
    background: var(--hp3-yellow);
    color: var(--hp3-ink);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 0.3rem 0.65rem;
    border-radius: 4px;
    border: 1.5px solid var(--hp3-ink);
}
.hp3-tcard:nth-child(2n) .hp3-tcard-metric { background: var(--hp3-cyan-light); }
.hp3-tcard:nth-child(3n) .hp3-tcard-metric { background: var(--hp3-coral); color: var(--hp3-white); }
.hp3-tcard-quote {
    font-family: var(--hp3-font-serif);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--hp3-ink);
    white-space: pre-line;
}
.hp3-tcard-quote em { color: var(--hp3-magenta); font-family: var(--hp3-font-serif); }

/* ── Pricing card (single featured) ────────────────────────────── */
.hp3-pricing {
    background: linear-gradient(180deg, var(--hp3-magenta) 0%, var(--hp3-magenta-deep) 100%);
    color: var(--hp3-white);
    padding: 5rem 1.5rem 6rem;
    text-align: center;
}
.hp3-pricing-inner { max-width: 1100px; margin: 0 auto; }

/* Heading colors over magenta — default .hp3-section-title would leave the
   <em> magenta on magenta (invisible). Yellow on magenta is legible. */
.hp3-pricing .hp3-section-label { color: var(--hp3-yellow); }
.hp3-pricing .hp3-section-title { color: var(--hp3-white); }
.hp3-pricing .hp3-section-title em { color: var(--hp3-yellow); }
.hp3-pricing .hp3-section-sub { color: rgba(255, 255, 255, 0.88); }
.hp3-pricing-card {
    background: var(--hp3-white);
    color: var(--hp3-ink);
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius);
    box-shadow: 10px 10px 0 var(--hp3-yellow);
    padding: 2.5rem 2rem;
    max-width: 540px;
    margin: 0 auto;
    text-align: left;
}
.hp3-pricing-name {
    font-family: var(--hp3-font-display);
    font-size: 1.4rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--hp3-ink);
}
.hp3-pricing-tagline {
    color: var(--hp3-muted);
    font-style: italic;
    font-family: var(--hp3-font-serif);
    margin: 0.4rem 0 1.25rem;
}
.hp3-pricing-amount {
    font-family: var(--hp3-font-display);
    font-size: 4rem;
    line-height: 0.9;
    color: var(--hp3-magenta);
    margin-bottom: 0.25rem;
}
.hp3-pricing-plans {
    font-size: 0.85rem;
    color: var(--hp3-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}
.hp3-pricing-features {
    list-style: none;
    margin-bottom: 1.5rem;
}
.hp3-pricing-features li {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem 0;
    border-bottom: 1px dashed rgba(24, 18, 37, 0.12);
    font-size: 0.95rem;
    color: var(--hp3-ink-soft);
}
.hp3-pricing-features li:last-child { border-bottom: none; }
.hp3-pricing-features li::before {
    content: "✓";
    color: var(--hp3-cyan-deep);
    font-weight: 900;
    flex-shrink: 0;
}
.hp3-pricing-card .hp3-btn {
    width: 100%;
    justify-content: center;
}
.hp3-pricing-plan-links {
    margin-top: 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    align-items: center;
    text-align: center;
}
.hp3-pricing-plan-links-label {
    color: var(--hp3-muted);
    font-family: var(--hp3-font-serif);
    font-style: italic;
    font-size: 0.95rem;
}
.hp3-pricing-plan-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}
.hp3 .hp3-pricing-plan-buttons a {
    display: inline-block;
    padding: 0.6rem 1.1rem;
    background: transparent;
    color: var(--hp3-magenta);
    border: 2px solid var(--hp3-magenta);
    border-radius: 6px;
    font-family: var(--hp3-font-body);
    font-weight: 700;
    font-size: 0.9rem;
    text-decoration: none;
    margin: 0;
    transition: background 0.15s ease, color 0.15s ease;
}
.hp3 .hp3-pricing-plan-buttons a:hover {
    background: var(--hp3-magenta);
    color: var(--hp3-white);
}
.hp3-pricing-guarantee {
    text-align: center;
    margin-top: 1rem;
    font-size: 0.85rem;
    color: var(--hp3-muted);
}

/* ── FAQ Accordion ─────────────────────────────────────────────── */
.hp3-faq {
    background: var(--hp3-cream);
    padding: 5rem 1.5rem;
}
.hp3-faq-list {
    max-width: 800px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
.hp3-faq-item {
    background: var(--hp3-white);
    border: 2px solid var(--hp3-ink);
    border-radius: var(--hp3-radius-sm);
    overflow: hidden;
}
.hp3-faq-q {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--hp3-font-body);
    font-weight: 700;
    font-size: 1rem;
    color: var(--hp3-ink);
}
.hp3-faq-q::-webkit-details-marker { display: none; }
.hp3-faq-icon {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--hp3-magenta);
    color: var(--hp3-white);
    display: grid;
    place-items: center;
    font-weight: 900;
    flex-shrink: 0;
}
.hp3-faq-item[open] .hp3-faq-icon { background: var(--hp3-cyan); }
.hp3-faq-a {
    padding: 0 1.25rem 1.25rem;
    color: var(--hp3-ink-soft);
    font-size: 0.95rem;
    line-height: 1.6;
    border-top: 1px dashed rgba(24, 18, 37, 0.15);
}
.hp3-faq-a p { margin-top: 1rem; }
.hp3-faq-a strong { color: var(--hp3-ink); }

/* ── Video controls — small floating buttons, bottom-left ───────── */

/* Visual style shared by all video control buttons */
.hp3-play-overlay,
.hp3-mute-overlay {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--hp3-yellow);
    color: var(--hp3-ink);
    border: 2.5px solid var(--hp3-ink);
    box-shadow: 3px 3px 0 var(--hp3-ink);
    cursor: pointer;
    display: grid;
    place-items: center;
    font-size: 0.95rem;
    font-weight: 900;
    line-height: 1;
    padding: 0;
    font-family: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.hp3-play-overlay:hover,
.hp3-mute-overlay:hover {
    transform: translate(-1px, -1px);
    box-shadow: 4px 4px 0 var(--hp3-ink);
    background: #FFE03A;
}
.hp3-play-overlay:active,
.hp3-mute-overlay:active {
    transform: translate(2px, 2px);
    box-shadow: 1px 1px 0 var(--hp3-ink);
}

/* Standalone button (single play toggle in testimonial / spotlight / video frame) */
.hp3-tcard-video > .hp3-play-overlay,
.hp3-spotlight-video > .hp3-play-overlay,
.hp3-video-frame > .hp3-play-overlay {
    position: absolute;
    bottom: 0.75rem;
    left: 0.75rem;
    z-index: 5;
}

/* Multi-control container (hero video: play + mute side by side) */
.hp3-video-controls {
    position: absolute;
    bottom: 0.85rem;
    left: 0.85rem;
    z-index: 5;
    display: flex;
    gap: 0.5rem;
}

/* ── Host Spotlight (video + text alternating) ─────────────────── */
.hp3-spotlight {
    background: var(--hp3-cream);
    padding: 5rem 1.5rem;
}
.hp3-spotlight--cream { background: var(--hp3-cream); }
.hp3-spotlight--white { background: var(--hp3-white); }
.hp3-spotlight-inner {
    max-width: 1100px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 3rem;
    align-items: center;
}
.hp3-spotlight--right .hp3-spotlight-text { order: -1; }
@media (max-width: 800px) {
    .hp3-spotlight-inner { grid-template-columns: 1fr; gap: 2rem; }
    .hp3-spotlight--right .hp3-spotlight-text { order: 0; }
}
.hp3-spotlight-video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: var(--hp3-radius);
    overflow: hidden;
    border: 3px solid var(--hp3-ink);
    box-shadow: 10px 10px 0 var(--hp3-magenta);
    background: var(--hp3-plum);
}
.hp3-spotlight--right .hp3-spotlight-video { box-shadow: 10px 10px 0 var(--hp3-cyan); }
.hp3-spotlight-video iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
.hp3-spotlight-label {
    display: inline-block;
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.hp3-spotlight-name {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(1.85rem, 3.4vw, 2.6rem);
    line-height: 1.1;
    color: var(--hp3-ink);
    margin-bottom: 0.5rem;
}
.hp3-spotlight-role {
    color: var(--hp3-muted);
    font-family: var(--hp3-font-body);
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 1.25rem;
}
.hp3-spotlight-bio {
    color: var(--hp3-ink-soft);
    font-size: 1.02rem;
    line-height: 1.65;
}

/* ── Notes Growth Funnel ──────────────────────────────────────── */
.hp3-funnel {
    background: var(--hp3-cream);
    padding: 5rem 1.5rem;
}
.hp3-funnel-inner { max-width: 760px; margin: 0 auto; }
.hp3-funnel-flow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.65rem;
    margin-top: 1.5rem;
}
.hp3-funnel-step {
    width: 100%;
    max-width: 600px;
    background: var(--hp3-white);
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius-sm);
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 5px 5px 0 var(--hp3-magenta);
}
.hp3-funnel-flow .hp3-funnel-step:nth-child(odd) { box-shadow: 5px 5px 0 var(--hp3-cyan); }
.hp3-funnel-flow .hp3-funnel-step:nth-child(even) { box-shadow: 5px 5px 0 var(--hp3-yellow); }
.hp3-funnel-icon {
    width: 44px; height: 44px;
    border-radius: 50%;
    background: var(--hp3-magenta);
    color: var(--hp3-white);
    display: grid;
    place-items: center;
    font-size: 1.15rem;
    border: 2.5px solid var(--hp3-ink);
    flex-shrink: 0;
}
.hp3-funnel-text {
    color: var(--hp3-ink);
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: 1.05rem;
}
.hp3-funnel-arrow {
    color: var(--hp3-magenta);
    font-size: 1.4rem;
    font-weight: 900;
}

/* ── Single Video Section ──────────────────────────────────────── */
.hp3-video-section {
    background: var(--hp3-white);
    padding: 5rem 1.5rem;
}
.hp3-video-frame {
    position: relative;
    aspect-ratio: 16 / 9;
    max-width: 880px;
    margin: 0 auto;
    border-radius: var(--hp3-radius);
    overflow: hidden;
    border: 3px solid var(--hp3-ink);
    box-shadow: 12px 12px 0 var(--hp3-cyan);
    background: var(--hp3-plum);
}
.hp3-video-frame iframe {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    border: 0;
}
.hp3-video-caption {
    text-align: center;
    color: var(--hp3-ink-soft);
    font-family: var(--hp3-font-serif);
    font-style: italic;
    font-size: 0.95rem;
    margin-top: 1.5rem;
}

/* ── Brands strip (e.g. "As featured on") ─────────────────────── */
.hp3-brands {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
}
.hp3-brands span {
    background: var(--hp3-ink);
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.75rem;
    letter-spacing: 0.06em;
    padding: 0.3rem 0.6rem;
    border-radius: 4px;
}

/* ── Thank-You Page ────────────────────────────────────────────── */
/* Hero is intentionally shorter than the viewport so the personal letter
   below pokes above the fold and signals there's more to read. */
.hp3-ty-hero {
    background: var(--hp3-grad-hero);
    color: var(--hp3-white);
    padding: 6rem 1.5rem 3.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
@media (max-width: 720px) {
    .hp3-ty-hero { padding: 5rem 1.25rem 3rem; }
}
.hp3-ty-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.hp3-ty-emoji {
    font-size: 4.5rem;
    line-height: 1;
    margin-bottom: 1.25rem;
    animation: hp3-ty-bounce 2.4s ease-in-out infinite;
}
@keyframes hp3-ty-bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-10px); }
}
@media (prefers-reduced-motion: reduce) {
    .hp3-ty-emoji { animation: none; }
}
.hp3-ty-eyebrow {
    display: inline-block;
    background: var(--hp3-yellow);
    color: var(--hp3-ink);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.45rem 0.9rem;
    border-radius: 4px;
    border: 2px solid var(--hp3-ink);
    box-shadow: 3px 3px 0 var(--hp3-ink);
    transform: rotate(-2deg);
    margin-bottom: 1.5rem;
}
.hp3-ty-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(2.3rem, 5.5vw, 3.8rem);
    line-height: 1.05;
    color: var(--hp3-white);
    margin-bottom: 1.25rem;
}
.hp3-ty-title em {
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-serif);
}
.hp3-ty-sub {
    font-family: var(--hp3-font-serif);
    font-size: 1.15rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.95);
    margin: 0 auto 2rem;
    max-width: 560px;
}
.hp3-ty-sub strong { color: var(--hp3-yellow); }
.hp3-ty-bookmark {
    margin-top: 1.75rem;
    color: rgba(255, 255, 255, 0.82);
    font-size: 0.92rem;
    font-style: italic;
    font-family: var(--hp3-font-serif);
}

/* ── Thank-You: Personal welcome letter from Kristina + hosts ───── */
.hp3-ty-letter {
    background: var(--hp3-cream);
    color: var(--hp3-ink);
    padding: 5rem 1.5rem;
    position: relative;
}
.hp3-ty-letter-inner {
    max-width: 760px;
    margin: 0 auto;
}
.hp3-ty-letter-avatars {
    display: flex;
    justify-content: center;
    gap: -0.5rem;
    margin-bottom: 1.75rem;
}
.hp3-ty-letter-avatar {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    border: 4px solid var(--hp3-white);
    box-shadow: 0 6px 18px rgba(24, 18, 37, 0.18);
    overflow: hidden;
    background: var(--hp3-cream-warm);
    margin-left: -16px;
    position: relative;
    transition: transform 0.2s ease, z-index 0s;
}
.hp3-ty-letter-avatar:first-child { margin-left: 0; }
.hp3-ty-letter-avatar:hover {
    transform: translateY(-4px) scale(1.05);
    z-index: 2;
}
.hp3-ty-letter-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.hp3-ty-letter-card {
    background: var(--hp3-white);
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius);
    box-shadow: 12px 12px 0 var(--hp3-magenta);
    padding: 3rem 2.5rem;
    text-align: left;
    position: relative;
}
@media (max-width: 720px) {
    .hp3-ty-letter-card {
        padding: 2rem 1.5rem;
        box-shadow: 8px 8px 0 var(--hp3-magenta);
    }
}
.hp3-ty-letter-card::before {
    content: "“";
    position: absolute;
    top: -2.5rem;
    left: 1.5rem;
    font-family: var(--hp3-font-serif);
    font-size: 7rem;
    line-height: 1;
    color: var(--hp3-magenta);
    font-style: italic;
    font-weight: 900;
}
.hp3-ty-letter-greeting {
    font-family: var(--hp3-font-script);
    font-size: clamp(1.8rem, 4vw, 2.4rem);
    color: var(--hp3-magenta);
    margin-bottom: 1rem;
    line-height: 1.1;
}
.hp3-ty-letter-body {
    font-family: var(--hp3-font-serif);
    font-size: 1.1rem;
    line-height: 1.65;
    color: var(--hp3-ink-soft);
}
.hp3-ty-letter-body p { margin-bottom: 1rem; }
.hp3-ty-letter-body p:last-child { margin-bottom: 0; }
.hp3-ty-letter-body strong { color: var(--hp3-ink); font-weight: 700; }
.hp3-ty-letter-body em {
    color: var(--hp3-magenta);
    font-style: italic;
    font-family: var(--hp3-font-serif);
}
.hp3-ty-letter-signature {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1.5px dashed rgba(24, 18, 37, 0.18);
}
.hp3-ty-letter-signature-name {
    font-family: var(--hp3-font-script);
    font-size: 2rem;
    color: var(--hp3-magenta);
    line-height: 1;
}
.hp3-ty-letter-signature-role {
    margin-top: 0.4rem;
    font-family: var(--hp3-font-body);
    font-size: 0.85rem;
    color: var(--hp3-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
}

/* ── Thank-You: "Here's what you just unlocked" value grid ──────── */
.hp3-ty-unlocks {
    background: var(--hp3-cream-warm);
    color: var(--hp3-ink);
    padding: 5rem 1.5rem;
}
.hp3-ty-unlocks-inner {
    max-width: 1100px;
    margin: 0 auto;
}
.hp3-ty-unlocks-head {
    text-align: center;
    max-width: 720px;
    margin: 0 auto 3rem;
}
.hp3-ty-unlocks-eyebrow {
    display: inline-block;
    background: var(--hp3-ink);
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.74rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    margin-bottom: 1rem;
}
.hp3-ty-unlocks-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    line-height: 1.1;
    color: var(--hp3-ink);
    margin-bottom: 0.85rem;
}
.hp3-ty-unlocks-title em {
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-serif);
}
.hp3-ty-unlocks-sub {
    font-family: var(--hp3-font-serif);
    font-style: italic;
    color: var(--hp3-ink-soft);
    font-size: 1.05rem;
}
.hp3-ty-unlocks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.hp3-ty-unlock {
    background: var(--hp3-white);
    border: 2px solid var(--hp3-ink);
    border-radius: var(--hp3-radius);
    padding: 1.75rem 1.5rem;
    position: relative;
    box-shadow: 5px 5px 0 var(--hp3-cyan);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.hp3-ty-unlock:hover {
    transform: translate(-2px, -2px);
    box-shadow: 7px 7px 0 var(--hp3-cyan);
}
.hp3-ty-unlock:nth-child(3n+2) { box-shadow: 5px 5px 0 var(--hp3-magenta); }
.hp3-ty-unlock:nth-child(3n+2):hover { box-shadow: 7px 7px 0 var(--hp3-magenta); }
.hp3-ty-unlock:nth-child(3n+3) { box-shadow: 5px 5px 0 var(--hp3-yellow); }
.hp3-ty-unlock:nth-child(3n+3):hover { box-shadow: 7px 7px 0 var(--hp3-yellow); }
.hp3-ty-unlock-icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.85rem;
    display: inline-block;
}
.hp3-ty-unlock-title {
    font-family: var(--hp3-font-display);
    font-size: 1.05rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--hp3-ink);
    margin-bottom: 0.5rem;
}
.hp3-ty-unlock-desc {
    font-family: var(--hp3-font-body);
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--hp3-ink-soft);
}

/* ── Thank-You: Numbered next steps roadmap ─────────────────────── */
.hp3-ty-steps {
    background: var(--hp3-white);
    color: var(--hp3-ink);
    padding: 5rem 1.5rem;
}
.hp3-ty-steps-inner {
    max-width: 880px;
    margin: 0 auto;
}
.hp3-ty-steps-head {
    text-align: center;
    margin-bottom: 3rem;
}
.hp3-ty-steps-eyebrow {
    display: inline-block;
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
}
.hp3-ty-steps-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 2.9rem);
    line-height: 1.1;
    color: var(--hp3-ink);
}
.hp3-ty-steps-title em {
    color: var(--hp3-magenta);
    font-family: var(--hp3-font-serif);
}
.hp3-ty-step {
    display: grid;
    grid-template-columns: 92px 1fr;
    gap: 1.5rem;
    align-items: start;
    padding: 1.5rem 0;
    border-bottom: 2px dashed rgba(24, 18, 37, 0.12);
}
.hp3-ty-step:last-child { border-bottom: none; }
@media (max-width: 600px) {
    .hp3-ty-step { grid-template-columns: 64px 1fr; gap: 1rem; }
}
.hp3-ty-step-num {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: var(--hp3-yellow);
    border: 3px solid var(--hp3-ink);
    box-shadow: 4px 4px 0 var(--hp3-magenta);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--hp3-font-display);
    font-size: 2.6rem;
    line-height: 1;
    color: var(--hp3-ink);
    flex-shrink: 0;
}
@media (max-width: 600px) {
    .hp3-ty-step-num {
        width: 64px;
        height: 64px;
        font-size: 1.8rem;
        box-shadow: 3px 3px 0 var(--hp3-magenta);
    }
}
.hp3-ty-step-body { padding-top: 0.35rem; }
.hp3-ty-step-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: 1.4rem;
    line-height: 1.2;
    color: var(--hp3-ink);
    margin-bottom: 0.45rem;
}
.hp3-ty-step-desc {
    font-family: var(--hp3-font-body);
    font-size: 1rem;
    line-height: 1.55;
    color: var(--hp3-ink-soft);
    margin-bottom: 0.75rem;
}
.hp3-ty-step-desc a {
    color: var(--hp3-magenta);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    font-weight: 700;
}
.hp3-ty-step-desc a:hover { color: var(--hp3-magenta-deep); }
.hp3 .hp3-ty-step .hp3-btn { margin-top: 0.5rem; }

/* ── Thank-You: Reassurance / quick FAQ cards ───────────────────── */
.hp3-ty-reassure {
    background: var(--hp3-plum);
    color: var(--hp3-white);
    padding: 5rem 1.5rem;
}
.hp3-ty-reassure-inner {
    max-width: 1000px;
    margin: 0 auto;
}
.hp3-ty-reassure-head {
    text-align: center;
    margin-bottom: 2.5rem;
}
.hp3-ty-reassure-eyebrow {
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 0.75rem;
    display: inline-block;
}
.hp3-ty-reassure-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(1.8rem, 4vw, 2.5rem);
    line-height: 1.15;
    color: var(--hp3-white);
}
.hp3-ty-reassure-title em {
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-serif);
}
.hp3-ty-reassure-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.25rem;
}
.hp3-ty-reassure-card {
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--hp3-radius);
    padding: 1.5rem;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.hp3-ty-reassure-card-q {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--hp3-yellow);
    margin-bottom: 0.65rem;
    line-height: 1.3;
}
.hp3-ty-reassure-card-a {
    font-family: var(--hp3-font-body);
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.88);
}
.hp3 .hp3-ty-reassure-card-a a {
    color: var(--hp3-yellow);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 3px;
    font-weight: 700;
}
.hp3 .hp3-ty-reassure-card-a a:hover { color: #FFE94A; }

/* ── Thank-You: Closing emotional CTA with second "Start" button ── */
.hp3-ty-closing {
    background: var(--hp3-grad-hero);
    color: var(--hp3-white);
    padding: 5.5rem 1.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.hp3-ty-closing-inner {
    max-width: 720px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.hp3-ty-closing-emoji {
    font-size: 3.2rem;
    line-height: 1;
    margin-bottom: 1rem;
}
.hp3-ty-closing-title {
    font-family: var(--hp3-font-serif);
    font-weight: 900;
    font-style: italic;
    font-size: clamp(2rem, 5vw, 3rem);
    line-height: 1.05;
    color: var(--hp3-white);
    margin-bottom: 1rem;
}
.hp3-ty-closing-title em {
    color: var(--hp3-yellow);
    font-family: var(--hp3-font-serif);
}
.hp3-ty-closing-sub {
    font-family: var(--hp3-font-serif);
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.92);
    margin: 0 auto 2rem;
    max-width: 560px;
    line-height: 1.5;
}
.hp3-ty-closing-mark {
    display: block;
    margin-top: 1.25rem;
    font-family: var(--hp3-font-script);
    color: rgba(255, 255, 255, 0.9);
    font-size: 1.6rem;
    line-height: 1;
}

/* ── Final CTA Section ─────────────────────────────────────────── */
.hp3-final-cta {
    background: var(--hp3-ink);
    color: var(--hp3-white);
    padding: 5rem 1.5rem;
    text-align: center;
}
.hp3-final-cta-inner { max-width: 800px; margin: 0 auto; }
.hp3-final-cta-title {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    line-height: 1.1;
    color: var(--hp3-white);
    margin-bottom: 1rem;
}
.hp3-final-cta-title em { color: var(--hp3-yellow); font-family: var(--hp3-font-serif); }
.hp3-final-cta-sub {
    color: rgba(255, 255, 255, 0.85);
    font-size: 1.05rem;
    line-height: 1.55;
    margin-bottom: 2rem;
}


/* ═══════════════════════════════════════════════════════════════
   FOOTER
   ═══════════════════════════════════════════════════════════════ */
.hp3-footer {
    background: var(--hp3-ink);
    color: rgba(255, 255, 255, 0.7);
    padding: 2.5rem 1.5rem;
    font-size: 0.9rem;
    text-align: center;
}
.hp3-footer-inner { max-width: 1100px; margin: 0 auto; }
/* Footer link colors re-asserted with .hp3 prefix so they out-specify the
   generic .hp3 a:not(.hp3-btn) inline-link rule above (which would otherwise
   paint footer links magenta). */
.hp3 .hp3-footer a,
.hp3 .hp3-footer a:hover { color: var(--hp3-yellow); text-decoration: none; }
.hp3-footer-legal { margin-top: 0.5rem; }
.hp3 .hp3-footer-legal a { color: rgba(255,255,255,0.7); margin: 0 0.35rem; font-weight: 400; text-decoration: none; }
.hp3 .hp3-footer-legal a:hover { color: var(--hp3-yellow); text-decoration: none; }
.hp3-footer-legal span { color: rgba(255,255,255,0.3); }


/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES — compact branded hero + prose body
   ═══════════════════════════════════════════════════════════════ */
.hp3-legal-hero {
    background: var(--hp3-grad-hero);
    color: var(--hp3-white);
    padding: 7rem 1.5rem 3rem;            /* top clears the absolute nav */
    text-align: center;
    position: relative;
}
.hp3-legal-hero-inner {
    max-width: 800px;
    margin: 0 auto;
}
.hp3-legal-chip {
    display: inline-block;
    background: var(--hp3-yellow);
    color: var(--hp3-ink);
    font-family: var(--hp3-font-body);
    font-weight: 800;
    font-size: 0.72rem;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    margin-bottom: 1.5rem;
    border: 2px solid var(--hp3-ink);
    box-shadow: 3px 3px 0 var(--hp3-ink);
    transform: rotate(-2deg);
}
.hp3-legal-title {
    font-family: var(--hp3-font-display);
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    line-height: 0.95;
    color: var(--hp3-white);
    -webkit-text-stroke: 1px rgba(24, 18, 37, 0.55);
    text-shadow: 4px 4px 0 rgba(24, 18, 37, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.01em;
    margin-bottom: 1rem;
}
.hp3-legal-subtitle {
    font-family: var(--hp3-font-serif);
    font-style: italic;
    font-weight: 700;
    font-size: 1.15rem;
    color: rgba(255, 255, 255, 0.95);
    max-width: 580px;
    margin: 0 auto;
    line-height: 1.4;
}

.hp3-legal-section {
    background: var(--hp3-cream);
    padding: 4rem 1.5rem 5rem;
}

.hp3-prose {
    max-width: 780px;
    margin: 0 auto;
    background: var(--hp3-white);
    border: 3px solid var(--hp3-ink);
    border-radius: var(--hp3-radius);
    box-shadow: 10px 10px 0 var(--hp3-cyan);
    padding: 2.75rem 2.5rem;
    color: var(--hp3-ink-soft);
    line-height: 1.7;
}
@media (max-width: 600px) {
    .hp3-prose { padding: 2rem 1.5rem; box-shadow: 6px 6px 0 var(--hp3-cyan); }
}

.hp3-prose h2 {
    font-family: var(--hp3-font-serif);
    font-weight: 700;
    font-size: 1.5rem;
    line-height: 1.25;
    color: var(--hp3-ink);
    margin: 2.25rem 0 0.9rem;
}
.hp3-prose h2:first-child { margin-top: 0; }

.hp3-prose p {
    margin-bottom: 1.1rem;
    font-size: 1rem;
}
.hp3-prose p:last-of-type { margin-bottom: 0; }

.hp3-prose strong { color: var(--hp3-ink); font-weight: 700; }

.hp3-prose a {
    color: var(--hp3-magenta);
    text-decoration: underline;
    text-decoration-thickness: 1.5px;
    text-underline-offset: 2px;
    word-break: break-word;
}
.hp3-prose a:hover { color: var(--hp3-magenta-deep); }

.hp3-prose ul,
.hp3-prose ol {
    margin: 0 0 1.25rem 1.5rem;
    padding-left: 0.25rem;
}
.hp3-prose ul li,
.hp3-prose ol li {
    margin-bottom: 0.55rem;
    line-height: 1.6;
}
.hp3-prose ol ol {
    margin: 0.55rem 0 0.5rem 1.25rem;
}

.hp3 a.hp3-back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-top: 2.5rem;
    font-family: var(--hp3-font-body);
    font-weight: 500;
    font-size: 0.95rem;
    color: var(--hp3-magenta);
    text-decoration: none;
    border-bottom: 1px solid var(--hp3-magenta);
    padding-bottom: 0.2rem;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.hp3 a.hp3-back-link:hover {
    color: var(--hp3-magenta-deep);
    border-color: var(--hp3-magenta-deep);
}


/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY — reduced motion
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    .hp3 *,
    .hp3 *::before,
    .hp3 *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}