:root {
    --bg: #f5f7f5;
    --card: #ffffff;
    --text: #172126;
    --muted: #647078;
    --line: #dce5e3;

    --accent: #146b78;
    --accent-light: #2393a2;
    --accent-soft: #e6f2f2;

    --mint: #dff1e9;
    --mint-light: #edf7f2;
    --sage: #7ca98b;
    --sage-dark: #537d63;

    --warm: #f8f7f2;

    --dark: #10282d;

    /* NEW PJ BRAND COLORS */

    --pj-black: #0b0b0c;
    --pj-charcoal: #171719;
    --pj-charcoal-light: #242124;

    --pj-red: #d9342b;
    --pj-red-dark: #8e1d1b;
    --pj-red-light: #ef493d;

    --pj-sunrise: #dc7547;

    --shadow:
        0 10px 30px rgba(18,44,50,.08);

    --shadow-soft:
        0 5px 18px rgba(18,44,50,.055);

    --radius: 18px;

    /* UNIVERSAL PEPPERJOURNEY PAGE HERO HEIGHT */
    --pj-hero-height: 160px;
    
}

/* ---------------------------------------------------------
   BASE
--------------------------------------------------------- */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;

    background:
        linear-gradient(
            180deg,
            #f8f9f6 0%,
            #f2f6f5 45%,
            #f6f7f3 100%
        );

    color: var(--text);

    font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        Roboto,
        Helvetica,
        Arial,
        sans-serif;

    line-height: 1.5;
}

a {
    color: var(--accent);
    font-weight: 800;
}

.wrap {
    width: min(1080px, calc(100% - 32px));
    margin: auto;
}


/* ---------------------------------------------------------
   HERO
--------------------------------------------------------- */

.hero {
    position: relative;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(91,202,181,.28),
            transparent 23%
        ),
        radial-gradient(
            circle at 15% 105%,
            rgba(124,169,139,.20),
            transparent 30%
        ),
        radial-gradient(
            circle at 48% 115%,
            rgba(35,147,162,.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #0b2227 0%,
            #104852 38%,
            #146b78 68%,
            #238b91 100%
        );

    color: #fff;

    padding:
        18px 0 26px;

    box-shadow:
        inset 0 -1px 0 rgba(255,255,255,.07);
}

.hero::before {
    content: "";

    position: absolute;

    left: -105px;
    top: -145px;

    width: 275px;
    height: 275px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.08);

    box-shadow:
        0 0 0 30px rgba(255,255,255,.018);

    pointer-events: none;
}

.hero::after {
    content: "";

    position: absolute;

    right: -85px;
    bottom: -125px;

    width: 260px;
    height: 260px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.14);

    box-shadow:
        0 0 0 28px rgba(255,255,255,.025);

    background:
        rgba(255,255,255,.018);

    pointer-events: none;
}

.hero-brand {
    position: relative;

    z-index: 2;

    display: flex;

    align-items: center;

    gap: 18px;
}

.hero-icon {
    display: block;

    width: 82px;
    height: 82px;

    flex:
        0 0 82px;

    object-fit: contain;

    border-radius: 50%;

    filter:
        drop-shadow(
            0 6px 12px
            rgba(0,0,0,.18)
        );
}

.hero-copy {
    min-width: 0;
}

.hero-copy h1 {
    margin:
        0 0 10px;

    color: #fff;

    font-size:
        clamp(
            2.4rem,
            7vw,
            5.2rem
        );

    line-height: .9;

    letter-spacing:
        -.03em;

    text-shadow:
        0 3px 18px
        rgba(0,0,0,.15);
}

.hero-copy p {
    max-width: none;

    margin: 0;

    color:
        rgba(255,255,255,.86);

    font-size:
        1.08rem;
}

.hero-copy p strong {
    color: #fff;

    font-weight: 800;
}


/* ---------------------------------------------------------
   SMALL PAGE INTRO BYLINES
--------------------------------------------------------- */

.page-intro-byline {
    max-width:
        none !important;

    width:
        100% !important;

    margin:
        8px 0 0;

    white-space:
        nowrap;

    color:
        #58696e;

    font-size:
        .95rem;

    line-height:
        1.55;
}

@media (max-width: 700px) {

    .page-intro-byline {
        white-space:
            normal;
    }

}


/* ---------------------------------------------------------
   NAVIGATION
--------------------------------------------------------- */

nav {
    position: sticky;

    top: 0;

    z-index: 20;

    background:
        radial-gradient(
            circle at 88% 15%,
            rgba(35,147,162,.20),
            transparent 28%
        ),
        radial-gradient(
            circle at 18% 100%,
            rgba(124,169,139,.16),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            rgba(232,246,242,.98) 0%,
            rgba(214,238,234,.98) 48%,
            rgba(205,232,225,.98) 100%
        );

    -webkit-backdrop-filter:
        blur(12px);

    backdrop-filter:
        blur(12px);

    border-bottom:
        1px solid
        rgba(20,107,120,.14);

    box-shadow:
        0 4px 16px
        rgba(18,44,50,.07);
}

nav .wrap {
    display: flex;

    align-items: center;

    gap: 8px;

    overflow-x: auto;

    white-space: nowrap;

    padding-top: 8px;
    padding-bottom: 8px;
}

nav a {
    position: relative;

    color:
        var(--accent);

    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(124,169,139,.12),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e5f2ed 100%
        );

    text-decoration: none;

    font-weight: 800;

    font-size:
        .88rem;

    padding:
        7px 13px;

    border-radius:
        999px;

    border:
        1px solid
        rgba(20,107,120,.16);

    flex-shrink: 0;

    box-shadow:
        0 2px 0
        rgba(20,107,120,.12),
        0 4px 9px
        rgba(18,44,50,.08),
        inset 0 1px 0
        rgba(255,255,255,.95);

    transition:
        background .15s ease,
        color .15s ease,
        transform .15s ease,
        box-shadow .15s ease,
        border-color .15s ease;
}

nav a:hover {
    background:
        radial-gradient(
            circle at 85% 10%,
            rgba(255,255,255,.14),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--accent) 0%,
            var(--accent-light) 72%,
            var(--sage) 120%
        );

    color: #fff;

    border-color:
        rgba(20,107,120,.24);

    transform:
        translateY(-2px);

    box-shadow:
        0 3px 0
        rgba(20,107,120,.15),
        0 7px 14px
        rgba(18,44,50,.13);
}

nav a.back-top {
    margin-left: auto;

    background:
        rgba(255,255,255,.45);

    border:
        1px solid
        rgba(20,107,120,.10);

    color:
        var(--sage-dark);

    font-size:
        .72rem;

    font-weight: 700;

    padding:
        6px 9px;

    box-shadow: none;

    flex-shrink: 0;
}

nav a.back-top:hover {
    background:
        rgba(255,255,255,.85);

    color:
        var(--accent);

    border-color:
        rgba(20,107,120,.18);

    transform:
        translateY(-1px);

    box-shadow:
        0 3px 8px
        rgba(18,44,50,.06);
}


/* ---------------------------------------------------------
   SECTIONS
--------------------------------------------------------- */

section {
    position: relative;

    padding:
        22px 0;

    scroll-margin-top:
        60px;
}

.section-head {
    position: relative;

    max-width:
        720px;

    margin-bottom:
        12px;

    padding-left:
        16px;
}

.section-head::before {
    content: "";

    position: absolute;

    left: 0;

    top: 2px;
    bottom: 2px;

    width: 4px;

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--pj-red-dark),
            var(--pj-sunrise)
        );
}

.section-head p {
    color:
        var(--muted);

    margin:
        3px 0 0;

    line-height:
        1.45;
}

.eyebrow {
    text-transform:
        uppercase;

    letter-spacing:
        .16em;

    font-size:
        1rem;

    font-weight:
        800;

    color:
        var(--accent);

    margin: 0;
}

/* =========================================================
   MAIN PAGE HERO
   Shared by the six primary PepperJourney pages
   ========================================================= */

.pj-page-hero {
    position: relative;
    overflow: hidden;

    height: var(--pj-hero-height);
    min-height: var(--pj-hero-height);

    padding: 30px 0 24px;

    background:
        radial-gradient(
            circle at 88% 8%,
            rgba(217,52,43,.10),
            transparent 30%
        ),
        radial-gradient(
            circle at 72% 115%,
            rgba(220,117,71,.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f0ebe7 0%,
            #e7dfda 58%,
            #ded5d0 100%
        );

    border-bottom:
        1px solid rgba(92,49,46,.10);
}


/* CONTENT */

.pj-page-hero .wrap {
    position: relative;
    z-index: 3;
}


.pj-page-hero-inner {
    width: 100%;
    margin: 0;
}


/* SMALL RED PAGE LABEL */

.pj-page-hero-label {
    margin: 0 0 5px;
    color: var(--pj-red-dark);
    font-size: 1rem;
    font-weight: 800;
    letter-spacing: .16em;
    text-transform: uppercase;
}


/* TITLE */

.pj-page-hero h1 {
    margin: 0;

    color: #2a2222;

    font-size:
        clamp(
            1.7rem,
            4vw,
            2.35rem
        );

    line-height: 1.1;
}


/* BYLINE */

.pj-page-hero .page-intro-byline {
    max-width: none;

    margin: 8px 0 0;

    color: #665f5d;

    font-size: .95rem;
    line-height: 1.55;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   SOFT SUNRAYS
--------------------------------------------------------- */

.pj-page-hero::before {
    content: "";

    position: absolute;

    width: 620px;
    height: 260px;

    right: -24px;
    top: -70px;

    background:
        linear-gradient(
            139deg,
            transparent 0 28.5%,
            rgba(232,132,70,.075) 27.5% 32.5%,
            transparent 32.5% 100%
        ),
        linear-gradient(
            149deg,
            transparent 0 38.5%,
            rgba(217,52,43,.060) 37.5% 42.5%,
            transparent 42.5% 100%
        ),
        linear-gradient(
            159deg,
            transparent 0 50.5%,
            rgba(232,132,70,.065) 50.5% 55.5%,
            transparent 55.5% 100%
        ),
        linear-gradient(
            169deg,
            transparent 0 63.5%,
            rgba(217,52,43,.050) 63.5% 68.5%,
            transparent 68.5% 100%
        );

    pointer-events: none;
    z-index: 0;
}

.pj-content-band-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 9px;
}

.pj-content-band-head .section-head {
    margin-bottom: 0;
}

.pj-content-band-tagline {
    color: var(--pj-red-dark);
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

.pj-content-band .section-head {
    margin: 0;
    padding-left: 0;
}

.pj-content-band .section-head::before {
    display: none;
}

/* ---------------------------------------------------------
   LARGE LEFT HERO CIRCLE
--------------------------------------------------------- */

.pj-page-hero-watermark {
    position: absolute;

    width: 145px;
    height: 145px;

    left: -62px;
    top: -73px;

    border-radius: 50%;

    border:
        1px solid rgba(145,42,36,.14);

    background: none;

    box-shadow:
        0 0 0 18px
        rgba(217,52,43,.045);

    opacity: 1;
    filter: none;
    transform: none;

    pointer-events: none;

    z-index: 1;
}

/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .pj-page-hero {
        padding: 24px 0 20px;
    }

    .pj-page-hero .page-intro-byline {
        white-space: normal;
    }

}

/* ---------------------------------------------------------
   PROGRESS
--------------------------------------------------------- */

.stats {
    position: relative;

    z-index: 2;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 10px;
}

/* =========================================================
   HOMEPAGE PROGRESS STATS — PEPPERJOURNEY THEME
   ========================================================= */

.stat {
    position: relative;
    overflow: hidden;

    padding:
        10px 13px 9px;

    background:
        radial-gradient(
            circle at 94% 5%,
            rgba(220,117,71,.075),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.96) 0%,
            rgba(247,242,239,.94) 100%
        );

    border:
        1px solid rgba(142,29,27,.16);

    border-left: 0;

    border-radius:
        14px;

    box-shadow:
        0 3px 0 rgba(142,29,27,.055),
        0 7px 16px rgba(56,38,36,.09),
        inset 0 1px 0 rgba(255,255,255,.95);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


/* ---------------------------------------------------------
   SOFT WARM CIRCLE
--------------------------------------------------------- */

.stat::before {
    content: "";

    position: absolute;

    width: 72px;
    height: 72px;

    right: -29px;
    top: -31px;

    border-radius: 50%;

    /* clearer inner outline */
    border:
        1px solid rgba(217,52,43,.16);

    /* lighter center */
    background:
        rgba(220,117,71,.045);

    /* stronger outer ring */
    box-shadow:
        0 0 0 10px rgba(217,52,43,.06);

    pointer-events: none;
}

/* ---------------------------------------------------------
   PJ RED ACCENT EDGE
--------------------------------------------------------- */

.stat::after {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background:
        linear-gradient(
            180deg,
            var(--pj-red-dark),
            var(--pj-sunrise)
        );

    opacity: .82;

    pointer-events: none;
}


.stat:hover {
    transform:
        translateY(-2px);

    box-shadow:
        0 4px 0 rgba(142,29,27,.055),
        0 10px 20px rgba(56,38,36,.11),
        inset 0 1px 0 rgba(255,255,255,.95);
}

/* ---------------------------------------------------------
   STAT TEXT
--------------------------------------------------------- */

.stat small {
    position: relative;
    z-index: 2;

    display: block;

    margin-bottom: 3px;

    color:
        var(--pj-red-dark);

    font-size: .78rem;
    font-weight: 800;
    line-height: 1.2;
}

.stat strong {
    position: relative;
    z-index: 2;

    display: block;

    color:
        #2a2222;

    font-size: 1.7rem;
    font-weight: 800;

    line-height: 1.05;

    letter-spacing:
        -.04em;
}

.stat span {
    position: relative;
    z-index: 2;

    display: block;

    margin-top: 3px;

    color:
        #746a67;

    font-size: .76rem;
    line-height: 1.2;
}

/* ---------------------------------------------------------
   TOTAL CHANGE — FEATURED PJ CARD
--------------------------------------------------------- */

.stat-highlight {
    position: relative;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(239,73,61,.22),
            transparent 31%
        ),
        radial-gradient(
            circle at 12% 110%,
            rgba(220,117,71,.12),
            transparent 34%
        ),
        linear-gradient(
            135deg,
            #2a2020 0%,
            #3b2424 48%,
            #6f2825 100%
        );

    color: #fff;

    border-color:
        rgba(217,52,43,.25);

    box-shadow:
        0 3px 0 rgba(142,29,27,.16),
        0 8px 18px rgba(55,29,28,.16),
        inset 0 1px 0 rgba(255,255,255,.10);
}


.stat-highlight::before {
    width: 92px;
    height: 92px;

    right: -34px;
    top: -39px;

    border:
        1px solid rgba(239,73,61,.24);

    background:
        rgba(217,52,43,.10);

    box-shadow:
        0 0 0 17px
        rgba(220,117,71,.035);
}


.stat-highlight::after {
    width: 5px;

    background:
        linear-gradient(
            180deg,
            var(--pj-red-light),
            var(--pj-sunrise)
        );

    opacity: 1;
}


.stat-highlight small {
    color:
        rgba(255,255,255,.76);
}


.stat-highlight strong {
    color: #fff;

    font-size: 1.82rem;

    text-shadow:
        0 2px 8px
        rgba(0,0,0,.16);
}


.stat-highlight span {
    color:
        rgba(255,255,255,.76);
}


.stat-highlight:hover {
    box-shadow:
        0 4px 0 rgba(142,29,27,.16),
        0 11px 22px rgba(55,29,28,.20),
        inset 0 1px 0 rgba(255,255,255,.11);
}

.progress-purpose {
    width: 100%;
    margin-top: 12px;
    padding: 11px 18px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96) 0%,
            rgba(250,248,247,.94) 55%,
            rgba(247,243,241,.92) 100%
        );

    border: 1px solid rgba(92,49,46,.12);
    border-right: 6px solid #a52b27;
    border-radius: 16px;

    box-shadow:
        0 5px 15px rgba(55,35,33,.07);

    color: #5f5755;
    font-size: 1.2rem;
    font-weight: 500;
    line-height: 1.85;
    text-align: center;
}

.progress-purpose strong {
    color: #302827;
    font-weight: 850;
}

/* =========================================================
   PAT'S THOUGHTS
   Shared by Progress + Current Stack
   ========================================================= */

.home-thoughts-section .wrap {
    position: relative;
    z-index: 2;
}


.home-thoughts-head {
    display: flex;

    align-items: flex-end;

    justify-content: space-between;

    gap: 18px;

    margin-bottom: 9px;
}


.home-thoughts-head .section-head {
    margin-bottom: 0;
}


.home-thoughts-label {
    display: inline-flex;

    align-items: center;

    gap: 6px;
}


.home-thoughts-tagline {
    color: var(--pj-red-dark);
    font-size: .76rem;
    font-weight: 900;
    line-height: 1.3;
    text-align: right;
    white-space: nowrap;
}

/* =========================================================
   PAT'S THOUGHTS — BRAND OVERRIDES
   ========================================================= */

/* EYEBROW / SMALL UPPERCASE LABEL */

.home-thoughts-section .eyebrow {
    color: var(--pj-red-dark);
}


/* SECTION HEADING */

.home-thoughts-section .section-head h2,
.home-thoughts-section .section-head h3 {
    color: #2a2222;
}


/* REMOVE OLD TEAL HEADING ACCENT / SHADOW */

.home-thoughts-section .section-head::before {
    background:
        linear-gradient(
            180deg,
            var(--pj-red-dark),
            var(--pj-sunrise)
        );
}


/* REMOVE ANY OLD TEAL RIGHT-SIDE CARD ACCENT */

.home-thoughts-feed::before,
.home-thoughts-feed::after {
    border-color: rgba(165,43,39,.12);
    background: rgba(217,52,43,.045);
    box-shadow:
        0 0 0 10px rgba(220,117,71,.025);
}

/* =========================================================
   THOUGHT FEED
   ========================================================= */

.home-thoughts-feed {
    overflow: hidden;

    min-height: 134px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96) 0%,
            rgba(250,248,247,.94) 55%,
            rgba(247,243,241,.92) 100%
        );

    border:
        1px solid rgba(92,49,46,.12);

    border-radius: 18px;

    box-shadow:
        0 7px 20px rgba(55,35,33,.08);
}


.home-thought {
    position: relative;

    display: grid;

    grid-template-columns:
        auto 1fr auto;

    align-items: center;

    column-gap: 8px;

    padding: 11px 18px 9px;

    border-bottom:
        1px solid rgba(92,49,46,.09);
}


.home-thought:last-child {
    border-bottom: 0;
}


.home-thought-icon {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    width: 23px;
    height: 23px;

    margin-right: 0;

    border-radius: 50%;

    background:
        rgba(217,52,43,.07);

    border:
        1px solid rgba(165,43,39,.14);

    box-shadow:
        0 0 0 4px rgba(220,117,71,.025);

    font-size: .78rem;
}


.home-thought-text {
    display: block;

    margin: 0;

    color: #302827;

    font-size: .94rem;
    font-weight: 700;

    line-height: 1.35;
}


.home-thought-date {
    display: block;

    margin: 0 0 0 16px;

    color: #827674;

    font-size: .68rem;

    font-weight: 700;

    white-space: nowrap;

    text-align: right;
}


/* =========================================================
   THOUGHT PAGINATION
   ========================================================= */

.home-thought-pagination {
    display: flex;

    justify-content: center;

    align-items: center;

    gap: 6px;

    margin-top: 9px;
}


.home-thought-page {
    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 26px;
    height: 26px;

    padding: 0 7px;

    border:
        1px solid rgba(92,49,46,.18);

    border-radius: 999px;

    background:
        rgba(255,255,255,.72);

    color:
        #6f5e5b;

    font-size: .68rem;

    font-weight: 900;

    cursor: pointer;
}


.home-thought-page:hover {
    background: #ffffff;

    border-color:
        rgba(165,43,39,.30);

    color:
        var(--pj-red-dark);
}


.home-thought-page.is-active {
    background:
        linear-gradient(
            135deg,
            var(--pj-red-dark),
            var(--pj-red)
        );

    border-color:
        var(--pj-red-dark);

    color:
        #ffffff;

    box-shadow:
        0 3px 9px rgba(112,32,29,.18);
}


.home-thought[hidden] {
    display: none;
}

/* ---------------------------------------------------------
   CURRENT STACK
--------------------------------------------------------- */

.stack-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 18%,
            rgba(35,147,162,.20),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #f8fcfb 0%,
            #e0efec 50%,
            #cfe4de 100%
        );

    padding-top:
        18px;

    padding-bottom:
        19px;

    border-top:
        1px solid
        rgba(20,107,120,.10);

    border-bottom:
        1px solid
        rgba(20,107,120,.13);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.85);
}

.stack-section::after {
    content: "";

    position: absolute;

    width: 185px;
    height: 185px;

    left: -78px;
    bottom: -105px;

    border-radius: 50%;

    border: none;

    background:
        rgba(35,147,162,.09);

    box-shadow:
        0 0 0 18px
        rgba(35,147,162,.035);

    pointer-events:
        none;
}

.stack-section .wrap {
    position: relative;

    z-index: 2;
}

.stack-section .section-head {
    margin-bottom:
        8px;
}

.stack-section .section-head p {
    margin-top:
        1px;

    color:
        #607873;
}

.stack-heading {
    display: flex;

    align-items:
        baseline;

    flex-wrap:
        wrap;

    gap: 6px;
}

.stack-heading-updated {
    text-transform:
        none;

    letter-spacing:
        0;

    font-size:
        .68rem;

    font-weight:
        600;

    color:
        var(--sage-dark);
}

.stack-row {
    display: flex;

    flex-wrap:
        wrap;

    gap: 8px;

    margin-left:
        14px;
}

.stack-pill {
    display:
        inline-block;

    padding:
        7px 11px;

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #e3f2ed 100%
        );

    border:
        1px solid
        rgba(20,107,120,.18);

    color:
        var(--accent);

    text-decoration:
        none;

    font-size:
        .8rem;

    font-weight:
        800;

    line-height:
        1.2;

    box-shadow:
        0 2px 0
        rgba(20,107,120,.18),
        0 5px 10px
        rgba(18,44,50,.11),
        inset 0 1px 0
        rgba(255,255,255,1);

    transition:
        transform .15s ease,
        box-shadow .15s ease,
        background .15s ease,
        border-color .15s ease;
}

.stack-pill:hover {
    transform:
        translateY(-2px);

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #d8eee7 100%
        );

    border-color:
        rgba(20,107,120,.28);

    box-shadow:
        0 3px 0
        rgba(20,107,120,.20),
        0 8px 14px
        rgba(18,44,50,.15),
        inset 0 1px 0
        rgba(255,255,255,1);
}

.stack-pill:active {
    transform:
        translateY(1px);

    box-shadow:
        0 1px 0
        rgba(20,107,120,.18),
        0 2px 5px
        rgba(18,44,50,.10),
        inset 0 1px 0
        rgba(255,255,255,.9);
}

.stack-arrow {
    display:
        inline-block;

    margin-left:
        3px;

    font-size:
        .68rem;

    opacity:
        .55;

    transform:
        translateY(-1px);

    transition:
        opacity .15s ease,
        transform .15s ease;
}

a.stack-pill:hover .stack-arrow {
    opacity: 1;

    transform:
        translate(1px, -2px);
}


/* =========================================================
   STACK — UNIVERSAL BAND PILLS
   ========================================================= */

.stack-band-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 11px;
    margin-top: 4px;
}


.stack-band-pill {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 10px;

    min-width: 0;
    min-height: 64px;

    padding: 10px 13px 10px 15px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96) 0%,
            rgba(250,248,247,.94) 55%,
            rgba(247,243,241,.92) 100%
        );

    border:
        1px solid rgba(92,49,46,.12);

    border-right:
        5px solid #a52b27;

    border-radius: 16px;

    box-shadow:
        0 5px 14px rgba(55,35,33,.07);

    color: #302827;
    text-decoration: none;

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}


.stack-band-pill:hover {
    transform: translateY(-2px);

    box-shadow:
        0 8px 18px rgba(55,35,33,.10);
}


.stack-band-copy {
    display: block;
    min-width: 0;
}


.stack-band-copy small {
    display: block;

    margin-bottom: 2px;

    color: var(--pj-red-dark);

    font-size: .59rem;
    font-weight: 900;

    letter-spacing: .08em;
    text-transform: uppercase;
}


.stack-band-copy strong {
    display: block;

    color: #302827;

    font-size: .94rem;
    font-weight: 900;
    line-height: 1.15;
}


.stack-band-arrow {
    flex: 0 0 auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 27px;
    height: 27px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--pj-red-dark),
            var(--pj-red)
        );

    color: #ffffff;

    font-size: .9rem;
    font-weight: 900;

    box-shadow:
        0 3px 8px rgba(112,32,29,.16);
}


.stack-band-pill.no-link {
    cursor: default;
}

.stack-band-pill.no-link:hover {
    transform: none;
}

.stack-band-updated {
    margin-left: 8px;
    opacity: .68;
    font-weight: 700;
}

/* ---------------------------------------------------------
   ABOUT MY JOURNEY CARD
--------------------------------------------------------- */

.about-card {
    position: relative;
    z-index: 2;

    width: 100%;
    max-width: none;

    margin-left: 0;
    padding: 20px 24px;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.96) 0%,
            rgba(250,248,247,.94) 55%,
            rgba(247,243,241,.92) 100%
        );

    border:
        1px solid rgba(92,49,46,.12);

    border-right:
        6px solid #a52b27;

    border-radius:
        18px;

    box-shadow:
        0 7px 20px rgba(55,35,33,.08);
}

.about-card::after {
    display: none;
}


.about-card p {
    position: relative;
    z-index: 2;

    margin: 0 0 12px;

    color: #5f5755;

    font-size: .95rem;
    line-height: 1.6;
}


.about-card p:last-child {
    margin-bottom: 0;
}


.about-card strong {
    color: var(--pj-red-dark);
    font-weight: 800;
}


.about-ending {
    color: #302827 !important;
    font-weight: 650;
}

/* ---------------------------------------------------------
   SHADED SECTIONS
--------------------------------------------------------- */

.products-section {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(35,147,162,.18),
            transparent 25%
        ),
        radial-gradient(
            circle at 12% 95%,
            rgba(124,169,139,.15),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #e5efed 0%,
            #dceae7 48%,
            #d5e5e1 100%
        );

    border-top:
        1px solid
        rgba(20,107,120,.08);
}

.products-section::before {
    content: "";

    position: absolute;

    width: 250px;
    height: 250px;

    right: -105px;
    top: -125px;

    border-radius: 50%;

    border: none;

    background:
        rgba(35,147,162,.10);

    box-shadow:
        0 0 0 20px
        rgba(35,147,162,.04);

    pointer-events:
        none;
}

.products-section::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    left: -80px;
    bottom: -95px;

    border-radius: 50%;

    border: none;

    background:
        rgba(20,107,120,.09);

    box-shadow:
        0 0 0 14px
        rgba(20,107,120,.035);

    pointer-events:
        none;
}

.products-section .wrap {
    position: relative;

    z-index: 2;
}


/* ---------------------------------------------------------
   PRODUCTS
--------------------------------------------------------- */

.products-list {
    display: grid;

    grid-template-columns:
        1fr;

    gap: 9px;
}

.product-card {
    position: relative;

    overflow: hidden;

    border-radius:
        16px;

    padding:
        13px 18px 13px 22px;

    color:
        #fff;

    border:
        1px solid
        rgba(255,255,255,.07);

    box-shadow:
        0 6px 18px
        rgba(18,44,50,.14),
        inset 0 1px 0
        rgba(255,255,255,.07);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.product-card:nth-child(odd) {
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(98,205,188,.16),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #10282d 0%,
            #12515c 52%,
            #146b78 100%
        );
}

.product-card:nth-child(even) {
    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(255,255,255,.15),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #146b78 0%,
            #218b98 52%,
            #68a083 115%
        );
}

.product-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 5px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.90),
            rgba(188,237,216,.58)
        );

    pointer-events:
        none;
}

.product-card::after {
    content: "";

    position: absolute;

    width: 125px;
    height: 125px;

    right: -46px;
    bottom: -67px;

    border-radius:
        50%;

    border:
        1px solid
        rgba(255,255,255,.12);

    background:
        rgba(255,255,255,.035);

    box-shadow:
        0 0 0 17px
        rgba(255,255,255,.018);

    pointer-events:
        none;
}

.product-card:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 11px 26px
        rgba(18,44,50,.19),
        inset 0 1px 0
        rgba(255,255,255,.09);
}

.product-name {
    position: relative;

    z-index: 2;

    margin: 0;
}

.product-name a {
    color: #fff;

    font-size:
        1.27rem;

    font-weight:
        800;

    text-decoration:
        underline;

    text-decoration-thickness:
        1px;

    text-underline-offset:
        3px;

    text-decoration-color:
        rgba(255,255,255,.50);

    transition:
        text-decoration-color .15s ease,
        opacity .15s ease;
}

.product-name a:hover {
    text-decoration-color:
        #fff;
}

.product-card h3 {
    position: relative;

    z-index: 2;

    max-width:
        850px;

    font-size:
        .9rem;

    line-height:
        1.35;

    margin:
        3px 0 0;

    font-weight:
        500;

    color:
        rgba(255,255,255,.84);
}

.product-code {
    position: relative;

    z-index: 2;

    display:
        inline-block;

    margin-top:
        7px;

    padding:
        4px 10px;

    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.11)
        );

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius:
        999px;

    font-size:
        .8rem;

    font-weight:
        800;

    color:
        #fff;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.13);
}

/* =========================================================
   UNIVERSAL CONTENT BAND
   Shared upper-middle section treatment
   ========================================================= */

.pj-content-band {
    position: relative;
    overflow: hidden;
    height: 250px;
    min-height: 250px;
    padding: 17px 0 18px;

    background:
        repeating-radial-gradient(
            circle at 50% 50%,
            transparent 0,
            transparent 15px,
            rgba(165,43,39,.065) 15px,
            rgba(165,43,39,.065) 16px,
            transparent 16px,
            transparent 30px
        ),

        radial-gradient(
            circle at 50% 50%,
            rgba(220,117,71,.045),
            transparent 52%
        ),

        linear-gradient(
            135deg,
            #f5f2f0 0%,
            #eee9e6 55%,
            #e9e3df 100%
        );

    border-top:
        1px solid rgba(92,49,46,.10);

    border-bottom:
        1px solid rgba(92,49,46,.14);
}

.pj-content-band .eyebrow {
    color: var(--pj-red-dark);
}

.pj-content-band > .wrap {
    position: relative;
    z-index: 2;
}

.pj-content-band .section-head::before {
    display: none;
}

/* ---------------------------------------------------------
   TIMELINE
--------------------------------------------------------- */

#timeline {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 12% 14%,
            rgba(35,147,162,.16),
            transparent 28%
        ),
        radial-gradient(
            circle at 88% 92%,
            rgba(124,169,139,.12),
            transparent 30%
        ),
        linear-gradient(
            225deg,
            #f2f8f6 0%,
            #e4efec 50%,
            #d9e8e4 100%
        );

    border-top:
        1px solid
        rgba(20,107,120,.08);

    border-bottom:
        1px solid
        rgba(20,107,120,.10);
}

#timeline::before {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    left: -95px;
    top: -105px;

    border-radius:
        50%;

    background:
        rgba(35,147,162,.075);

    box-shadow:
        0 0 0 18px
        rgba(35,147,162,.025);

    pointer-events:
        none;
}

#timeline::after {
    content: "";

    position: absolute;

    width: 150px;
    height: 150px;

    right: -75px;
    left: auto;

    bottom: -85px;

    border-radius:
        50%;

    background:
        rgba(20,107,120,.06);

    box-shadow:
        0 0 0 13px
        rgba(20,107,120,.02);

    pointer-events:
        none;
}

#timeline .wrap {
    position: relative;

    z-index: 2;
}

.timeline {
    position: relative;

    margin-top:
        12px;
}

.timeline::before {
    content: "";

    position: absolute;

    left: 10px;

    top: 4px;
    bottom: 4px;

    width: 3px;

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #b9d8d4 0%,
            #7fb7aa 45%,
            #2393a2 72%,
            #146b78 100%
        );

    box-shadow:
        0 0 0 1px
        rgba(255,255,255,.5);
}

.entry {
    position: relative;

    padding-left:
        38px;

    margin-bottom:
        10px;
}

.entry:last-child {
    margin-bottom: 0;
}

.entry::before {
    content: "";

    position: absolute;

    left: 1px;
    top: 13px;

    width: 18px;
    height: 18px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #146b78,
            #2393a2
        );

    border:
        3px solid
        #edf6f3;

    box-shadow:
        0 0 0 2px
        rgba(20,107,120,.16),
        0 4px 8px
        rgba(18,44,50,.10);

    z-index: 2;
}

.entry:nth-child(even)::before {
    background:
        linear-gradient(
            135deg,
            #5f9272,
            #8ab39a
        );

    box-shadow:
        0 0 0 2px
        rgba(83,125,99,.15),
        0 4px 8px
        rgba(18,44,50,.09);
}

.entry-card {
    position: relative;

    overflow: hidden;

    background:
        radial-gradient(
            circle at 94% 10%,
            rgba(35,147,162,.08),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #edf7f4 100%
        );

    border:
        1px solid
        rgba(20,107,120,.10);

    border-radius:
        15px;

    padding:
        10px 13px;

    box-shadow:
        0 5px 15px
        rgba(18,44,50,.06),
        inset 0 1px 0
        rgba(255,255,255,.95);

    transition:
        transform .15s ease,
        box-shadow .15s ease;
}

.entry:nth-child(even) .entry-card {
    background:
        radial-gradient(
            circle at 94% 10%,
            rgba(124,169,139,.10),
            transparent 25%
        ),
        linear-gradient(
            135deg,
            #f8fbf8 0%,
            #e8f3ec 100%
        );
}

.entry-card::after {
    content: "";

    position: absolute;

    width: 92px;
    height: 92px;

    right: -34px;
    bottom: -50px;

    border-radius:
        50%;

    border: none;

    background:
        rgba(35,147,162,.065);

    box-shadow:
        0 0 0 11px
        rgba(35,147,162,.025);

    pointer-events:
        none;
}

.entry-card:hover {
    transform:
        translateX(4px);

    box-shadow:
        0 8px 20px
        rgba(18,44,50,.09),
        inset 0 1px 0
        rgba(255,255,255,.95);
}

.entry-top {
    position: relative;

    z-index: 2;

    display: flex;

    justify-content:
        space-between;

    gap: 12px;

    align-items:
        center;
}

.date {
    font-size:
        .75rem;

    color:
        var(--accent);

    font-weight:
        800;

    text-transform:
        uppercase;

    letter-spacing:
        .07em;
}

.weight {
    display:
        inline-block;

    padding:
        3px 9px;

    border-radius:
        999px;

    background:
        linear-gradient(
            180deg,
            #edf8f4,
            #dceee7
        );

    color:
        var(--sage-dark);

    border:
        1px solid
        rgba(83,125,99,.10);

    font-size:
        .78rem;

    font-weight:
        900;

    white-space:
        nowrap;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.9);
}

.entry h3 {
    position: relative;

    z-index: 2;

    margin:
        2px 0 0;

    padding-left:
        0;

    font-size:
        .92rem;

    line-height:
        1.28;

    font-weight:
        700;

    color:
        var(--dark);
}


/* ---------------------------------------------------------
   MOST RECENT TIMELINE ENTRY
--------------------------------------------------------- */

.entry:last-child .entry-card {
    background:
        radial-gradient(
            circle at 88% 12%,
            rgba(255,255,255,.18),
            transparent 24%
        ),
        radial-gradient(
            circle at 18% 100%,
            rgba(191,235,214,.10),
            transparent 32%
        ),
        linear-gradient(
            135deg,
            #10282d 0%,
            #146b78 46%,
            #2393a2 75%,
            #6fa188 120%
        );

    border-color:
        rgba(255,255,255,.09);

    color:
        #fff;

    box-shadow:
        0 9px 24px
        rgba(20,107,120,.22),
        inset 0 1px 0
        rgba(255,255,255,.10);
}

.entry:last-child .entry-card::after {
    width: 125px;
    height: 125px;

    right: -48px;
    bottom: -70px;

    border: none;

    background:
        rgba(255,255,255,.075);

    box-shadow:
        0 0 0 17px
        rgba(255,255,255,.025);
}

.entry:last-child .date {
    color:
        rgba(255,255,255,.76);
}

.entry:last-child h3 {
    color: #fff;
}

.entry:last-child .weight {
    background:
        linear-gradient(
            180deg,
            rgba(255,255,255,.20),
            rgba(255,255,255,.11)
        );

    border:
        1px solid
        rgba(255,255,255,.18);

    color:
        #fff;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.12);
}

.entry:last-child::before {
    background:
        linear-gradient(
            135deg,
            #10282d,
            #2393a2
        );

    border:
        3px solid
        #d7ebe5;

    box-shadow:
        0 0 0 3px
        rgba(20,107,120,.18),
        0 5px 10px
        rgba(18,44,50,.15);
}

.entry:last-child .entry-card:hover {
    box-shadow:
        0 13px 30px
        rgba(20,107,120,.28),
        inset 0 1px 0
        rgba(255,255,255,.12);
}


/* =========================================================
   TIMELINE MILESTONES
   ========================================================= */

.milestone-entry::before {
    content: "★";

    display: flex;

    align-items:
        center;

    justify-content:
        center;

    left: -4px;
    top: 9px;

    width: 28px;
    height: 28px;

    border-radius:
        50%;

    background:
        linear-gradient(
            135deg,
            #ffffff,
            #dcefeb
        );

    border:
        2px solid
        #146b78;

    color:
        #146b78;

    font-size:
        16px;

    line-height:
        1;

    box-shadow:
        0 0 0 4px
        rgba(20,107,120,.10),
        0 5px 11px
        rgba(18,44,50,.14);

    z-index: 3;
}

.milestone-entry:nth-child(even)::before {
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #dcefeb
        );

    border-color:
        #146b78;

    color:
        #146b78;

    box-shadow:
        0 0 0 4px
        rgba(20,107,120,.10),
        0 5px 11px
        rgba(18,44,50,.14);
}

.milestone-entry .entry-card {
    border:
        1px solid
        rgba(20,107,120,.24);

    box-shadow:
        0 7px 0
        rgba(20,107,120,.06),
        0 12px 24px
        rgba(18,44,50,.10),
        inset 0 1px 0
        rgba(255,255,255,.95);
}

.milestone-entry .entry-card::before {
    content: "";

    position: absolute;

    left: 0;
    top: 0;
    bottom: 0;

    width: 4px;

    background:
        linear-gradient(
            180deg,
            #146b78,
            #2393a2
        );
}

.timeline-milestone-badge {
    display:
        inline-flex;

    align-items:
        center;

    margin-bottom:
        4px;

    padding:
        3px 8px;

    border-radius:
        999px;

    background:
        rgba(20,107,120,.09);

    border:
        1px solid
        rgba(20,107,120,.16);

    color:
        #146b78;

    font-size:
        .62rem;

    font-weight:
        900;

    letter-spacing:
        .08em;

    text-transform:
        uppercase;
}

.milestone-entry .date {
    font-weight:
        900;
}


/* If the newest entry is ALSO a milestone */

.entry:last-child.milestone-entry::before {
    background:
        linear-gradient(
            135deg,
            #ffffff,
            #d9efeb
        );

    border-color:
        #ffffff;

    color:
        #146b78;

    box-shadow:
        0 0 0 4px
        rgba(255,255,255,.18),
        0 5px 12px
        rgba(18,44,50,.20);
}

.entry:last-child.milestone-entry .timeline-milestone-badge {
    background:
        rgba(255,255,255,.14);

    border-color:
        rgba(255,255,255,.22);

    color:
        #ffffff;
}

.timeline-milestone-line {
    display: flex;

    align-items:
        center;

    gap: 8px;

    flex-wrap:
        wrap;

    margin-bottom:
        2px;
}

.timeline-milestone-line .timeline-milestone-badge {
    margin-bottom: 0;
}

.timeline-milestone-date {
    color:
        var(--accent);

    font-size:
        .75rem;

    font-weight:
        900;

    text-transform:
        uppercase;

    letter-spacing:
        .07em;
}


/* =========================================================
   TIMELINE READ MORE
   ========================================================= */

.timeline-read-more {
    position: relative;

    z-index: 2;

    margin-top:
        7px;
}

.timeline-read-more a {
    display:
        inline-flex;

    align-items:
        center;

    color:
        var(--accent);

    font-size:
        .78rem;

    font-weight:
        850;

    text-decoration:
        none;

    transition:
        transform .15s ease,
        opacity .15s ease;
}

.timeline-read-more a:hover {
    transform:
        translateX(3px);
}


/* Latest dark timeline card */

.entry:last-child .timeline-read-more a {
    color:
        #ffffff;
}


/* Milestone entry */

.milestone-entry .timeline-read-more a {
    font-weight:
        900;
}

/* =========================================================
   SHARED DISCLAIMER / BOTTOM NOTE
   Used by all six main PepperJourney pages
   ========================================================= */

.disclaimer-section {
    position: relative;
    overflow: hidden;

    height: 120px;
    min-height: 120px;

    padding: 18px 0;

    background:
        radial-gradient(
            circle at 94% 100%,
            rgba(220,117,71,.055),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #ebe6e3 0%,
            #e4ddda 52%,
            #ddd5d1 100%
        );
}

/* RIGHT PJ STICKER */

.disclaimer-section::after {
    content: "";

    position: absolute;

    width: 115px;
    height: 58px;

    right: 1%;
    top: 50%;

    transform:
        translateY(-50%)
        rotate(-8deg);

    background:
        url('/images/pepperjourney-sticker.png')
        center / contain
        no-repeat;

    opacity: .05;

    filter:
        grayscale(.15)
        sepia(.08)
        saturate(.75)
        contrast(.92);

    pointer-events: none;

    z-index: 4;
}


/* CENTER CARD VERTICALLY */

.disclaimer-section .wrap {
    position: relative;
    z-index: 2;

    height: 100%;

    display: flex;
    align-items: center;
}


/* NOTE CARD */

.disclaimer-section .disclaimer {
    position: relative;
    z-index: 3;

    width: 100%;
    overflow: hidden;

    padding: 13px 18px;

    background:
        radial-gradient(
            circle at 92% 12%,
            rgba(217,52,43,.04),
            transparent 27%
        ),
        linear-gradient(
            135deg,
            rgba(255,255,255,.96) 0%,
            rgba(249,247,245,.94) 55%,
            rgba(244,239,236,.92) 100%
        );

    border:
        1px solid rgba(92,49,46,.11);

    border-top:
        2px solid rgba(65,45,43,.28);

    border-left:
        6px solid #a52b27;

    border-radius:
        18px;

    box-shadow:
        -7px 0 20px rgba(112,32,29,.055),
        3px 8px 18px rgba(37,28,28,.10),
        inset 0 1px 0 rgba(255,255,255,.90);
}

/* CARD DECORATION */

.disclaimer-section .disclaimer::after {
    content: "";

    position: absolute;

    width: 125px;
    height: 125px;

    right: -48px;
    bottom: -70px;

    border-radius: 50%;

    background:
        rgba(217,52,43,.035);

    box-shadow:
        0 0 0 14px
        rgba(220,117,71,.018);

    pointer-events: none;
}


/* TEXT */

.disclaimer-section .disclaimer h3 {
    position: relative;
    z-index: 2;

    margin: 0 0 7px;

    color: #2a2222;

    font-size: 1rem;
    font-weight: 800;
}


.disclaimer-section .disclaimer p {
    position: relative;
    z-index: 2;

    max-width: 940px;

    margin: 6px 0;

    color: #6d6664;

    font-size: .9rem;
    line-height: 1.5;
}


.disclaimer-section .disclaimer p:last-child {
    margin-bottom: 0;
}


.disclaimer-section .disclaimer p:only-child {
    margin: 2px 0;

    font-size: .88rem;
    line-height: 1.45;
}

/* =========================================================
   SITE FOOTER — PJ BRAND
   ========================================================= */

body .site-footer {
    position: relative;
    overflow: hidden;
    isolation: isolate;

    background-color: var(--pj-black) !important;

    background:
        radial-gradient(
            circle at 16% -20%,
            rgba(217,52,43,.30),
            transparent 34%
        ),
        radial-gradient(
            circle at 28% 120%,
            rgba(220,117,71,.11),
            transparent 30%
        ),
        linear-gradient(
            110deg,
            #241c1c 0%,
            #171416 34%,
            #101012 68%,
            #09090a 100%
        ) !important;

    color: #fff;

    border-top:
        1px solid rgba(239,73,61,.30);

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.045),
        0 -5px 20px rgba(0,0,0,.06);
}


/* ---------------------------------------------------------
   FOOTER PATTERN / SUN RAYS
--------------------------------------------------------- */

.site-footer-pattern {
    position: absolute;
    inset: 0;

    z-index: 0;

    pointer-events: none;

    /*
       Fine diagonal texture + very subtle warm rays.
    */

    background:

        /* SUN RAYS */

        linear-gradient(
            118deg,
            transparent 0 18%,
            rgba(232,132,70,.055) 18.2% 18.45%,
            transparent 18.7% 100%
        ),

        linear-gradient(
            128deg,
            transparent 0 25%,
            rgba(239,73,61,.05) 25.2% 25.45%,
            transparent 25.7% 100%
        ),

        linear-gradient(
            138deg,
            transparent 0 32%,
            rgba(232,132,70,.045) 32.2% 32.45%,
            transparent 32.7% 100%
        ),

        /* SUBTLE TEXTURE */

        repeating-linear-gradient(
            135deg,
            rgba(255,255,255,.018) 0 1px,
            transparent 1px 11px
        );
}


/* ---------------------------------------------------------
   WARM HORIZON GLOW
--------------------------------------------------------- */

.site-footer-pattern::after {
    content: "";

    position: absolute;

    width: 390px;
    height: 120px;

    left: 8%;
    bottom: -94px;

    border-radius: 50%;

    background:
        radial-gradient(
            ellipse at center,
            rgba(232,132,70,.18) 0%,
            rgba(217,52,43,.10) 35%,
            transparent 72%
        );

    filter: blur(5px);

    pointer-events: none;
}


/* ---------------------------------------------------------
   EXTRA FAINT ANGLED LANDSCAPE DETAIL
--------------------------------------------------------- */

.site-footer-pattern::before {
    content: "";

    position: absolute;

    left: -3%;
    right: -3%;
    bottom: -38px;

    height: 82px;

    opacity: .24;

    background:
        linear-gradient(
            155deg,
            transparent 0 20%,
            rgba(255,255,255,.06) 20.4% 21%,
            transparent 21.5% 34%,
            rgba(217,52,43,.14) 34.4% 35%,
            transparent 35.5% 52%,
            rgba(255,255,255,.045) 52.4% 53%,
            transparent 53.5%
        );

    transform: skewX(-12deg);

    pointer-events: none;
}

/* ---------------------------------------------------------
   FOOTER INNER LAYOUT
--------------------------------------------------------- */

.site-footer-inner {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    /* tighter footer */
    padding: 8px 0 9px;
}


/* ---------------------------------------------------------
   FOOTER BRAND
--------------------------------------------------------- */

.site-footer-brand {
    display: flex;
    align-items: center;

    gap: 11px;

    min-width: 0;
}


.site-footer .site-footer-logo {
    display: block !important;

    /*
       Slightly smaller to match shorter footer.
    */

    width: 62px !important;
    height: 62px !important;
    max-width: 62px !important;

    flex: 0 0 62px;

    object-fit: contain;

    border-radius: 50%;

    filter:
        drop-shadow(
            0 5px 11px
            rgba(0,0,0,.48)
        );
}


.site-footer-copy {
    display: flex;
    flex-direction: column;

    min-width: 0;
}


.site-footer-copy strong {
    display: block;

    color: #fff;

    font-size: .96rem;
    font-weight: 900;

    line-height: 1.1;

    white-space: nowrap;

    text-shadow:
        0 2px 7px
        rgba(0,0,0,.32);
}


.site-footer-copy span {
    display: block;

    margin-top: 3px;

    color:
        rgba(255,255,255,.62);

    font-size: .7rem;
    font-weight: 700;

    white-space: nowrap;
}


/* ---------------------------------------------------------
   COPYRIGHT / NOTE
--------------------------------------------------------- */

.site-footer-note {
    position: relative;

    max-width: 540px;

    padding:
        6px 0 6px 20px;

    color:
        rgba(255,255,255,.72);

    font-size: .78rem;
    font-weight: 650;

    line-height: 1.4;

    text-align: right;
}

.site-footer-note::before {
    content: "";

    position: absolute;

    left: 0;
    top: 50%;

    width: 4px;
    height: 29px;

    transform:
        translateY(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            var(--pj-red-light),
            var(--pj-red),
            var(--pj-red-dark)
        );

    box-shadow:
        0 0 15px
        rgba(239,73,61,.32);
}

.site-footer .footer-pat-link {
    color: rgba(255,255,255,.88);
    font-weight: 800;
    text-decoration: none;

    transition:
        color .15s ease,
        text-shadow .15s ease;
}

.site-footer .footer-pat-link:hover {
    color: #ffffff;

    text-shadow:
        0 0 10px rgba(239,73,61,.45);

    text-decoration: underline;
    text-decoration-color: var(--pj-red-light);
    text-underline-offset: 3px;
}

/* ---------------------------------------------------------
   BOTTOM RED BRUSH / HORIZON
--------------------------------------------------------- */

.site-footer::after {
    content: "";

    position: absolute;

    z-index: 1;

    width: 190px;
    height: 3px;

    left: 50%;
    bottom: 0;

    transform:
        translateX(-50%);

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(217,52,43,.75),
            rgba(239,73,61,.95),
            rgba(217,52,43,.75),
            transparent
        );

    box-shadow:
        0 0 12px
        rgba(217,52,43,.20);

    pointer-events: none;
}

.site-footer .footer-quick-links {
    flex: 1 1 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: 7px;

    margin: 0;
}


.site-footer .footer-quick-links a {
    display: inline-block;

    padding: 5px 10px;

    color: rgba(255,255,255,.90);

    background: rgba(255,255,255,.06);

    border: 1px solid rgba(255,255,255,.20);
    border-radius: 999px;

    font-size: .66rem;
    font-weight: 800;
    line-height: 1;

    text-decoration: none;

    white-space: nowrap;
}


.site-footer .footer-quick-links a:hover {
    color: #ffffff;

    background: rgba(255,255,255,.11);
}

.site-footer .site-footer-brand {
    flex: 1 1 0;
}


.site-footer .site-footer-note {
    flex: 1 1 0;

    text-align: center;
}


.site-footer .footer-calculator-link {
    flex: 1 1 0;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    margin: 0;
}

.site-footer .site-footer-note {
    position: relative;

    flex: 1 1 0;

    padding: 0 24px;

    text-align: center;
}


.site-footer .site-footer-note::before,
.site-footer .site-footer-note::after {
    content: "";

    position: absolute;

    top: 50%;

    width: 3px;
    height: 42px;

    transform: translateY(-50%);

    border-radius: 999px;

    background:
        linear-gradient(
            180deg,
            transparent,
            rgba(217,52,43,.85),
            rgba(239,73,61,.95),
            rgba(217,52,43,.85),
            transparent
        );

    box-shadow:
        0 0 8px rgba(217,52,43,.18);

    pointer-events: none;
}


.site-footer .site-footer-note::before {
    left: 0;
}


.site-footer .site-footer-note::after {
    right: 0;
}

/* ---------------------------------------------------------
   FOOTER MOBILE
--------------------------------------------------------- */

@media (max-width: 700px) {

    .site-footer-inner {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding: 9px 0 10px;
    }


    .site-footer .site-footer-logo {
        width: 40px !important;
        height: 40px !important;
        max-width: 40px !important;
        flex-basis: 40px;
    }


    .site-footer-note {
        max-width: none;
        width: 100%;

        padding:
            6px 0 6px 15px;

        text-align: left;
    }


    .site-footer-note::before {
        height: 27px;
    }


    .site-footer-pattern::after {
        left: -60px;
        bottom: -90px;
    }
    
    .pj-content-band {
        height: auto;
        min-height: 220px;
    }
}

@media (max-width: 700px) {

    /* =====================================================
       FOOTER — MOBILE
    ===================================================== */

    .site-footer .site-footer-inner {
        display: flex;
        flex-direction: column;

        align-items: center;

        gap: 10px;

        padding-top: 14px;
        padding-bottom: 14px;
    }


    /* BRAND */

    .site-footer .site-footer-brand {
        flex: none;

        justify-content: center;

        width: 100%;
    }


    /* QUICK LINKS */

    .site-footer .footer-quick-links {
        order: 2;

        flex: none;

        justify-content: center;

        width: 100%;

        gap: 7px;
    }


    .site-footer .footer-quick-links a {
        padding: 6px 11px;

        font-size: .66rem;
    }


    /* COPYRIGHT */

    .site-footer .site-footer-note {
        order: 3;

        flex: none;

        width: 100%;

        padding: 0 15px;

        font-size: .68rem;
        line-height: 1.35;

        text-align: center;
    }


    /* Desktop dividers aren't needed when stacked */

    .site-footer .site-footer-note::before,
    .site-footer .site-footer-note::after {
        display: none;
    }

        .site-footer .footer-note-divider {
            display: none;
        }
        
        
        .site-footer .footer-note-description {
            display: block;
        
            margin-top: 2px;
        }

}

/* ---------------------------------------------------------
   TABLET
--------------------------------------------------------- */

@media (max-width: 820px) {

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

}


/* ---------------------------------------------------------
   MOBILE
--------------------------------------------------------- */

@media (max-width: 480px) {

    .wrap {
        width:
            min(
                1080px,
                calc(100% - 24px)
            );
    }


    .hero {
        padding:
            24px 0 26px;
    }


    .hero-brand {
        gap:
            10px;
    }


    .hero-icon {
        width:
            52px;

        height:
            52px;

        flex:
            0 0 52px;
    }


    .hero-copy h1 {
        font-size:
            2.2rem;

        line-height:
            .95;

        margin:
            0 0 6px;
    }


    .hero-copy p {
        font-size:
            .9rem;

        line-height:
            1.35;
    }


    nav .wrap {
        gap:
            6px;

        padding-top:
            7px;

        padding-bottom:
            7px;
    }


    nav a {
        font-size:
            .82rem;

        padding:
            6px 10px;
    }


    nav a.back-top {
        margin-left:
            8px;

        font-size:
            .68rem;

        padding:
            5px 7px;
    }


    section {
        padding:
            27px 0;

        scroll-margin-top:
            58px;
    }


    .section-head {
        margin-bottom:
            10px;
    }


    .stats {
        gap:
            7px;
    }


    .stat {
        padding:
            9px 11px 8px;
    }


    .stat small {
        font-size:
            .74rem;
    }


    .stat strong {
        font-size:
            1.4rem;
    }


    .stat span {
        font-size:
            .72rem;
    }


    .stat-highlight strong {
        font-size:
            1.6rem;
    }


    .stack-section {
        padding:
            17px 0 18px;
    }


    .stack-row {
        margin-left:
            6px;
    }


    .stack-pill {
        padding:
            7px 11px;
    }


    .about-card {
        margin-left:
            0;

        padding:
            17px 18px;

        border-left-width:
            5px;

        border-radius:
            16px;
    }


    .about-card p {
        font-size:
            .9rem;
    }


    .products-list {
        gap:
            7px;
    }


    .product-card {
        padding:
            11px 14px 11px 18px;
    }


    .product-name a {
        font-size:
            1.16rem;
    }


    .product-card h3 {
        font-size:
            .85rem;
    }


    .product-code {
        margin-top:
            5px;

        padding:
            2px 7px;

        font-size:
            .76rem;
    }


    .timeline::before {
        left:
            8px;
    }


    .entry {
        padding-left:
            32px;

        margin-bottom:
            8px;
    }


    .entry::before {
        left:
            2px;

        width:
            14px;

        height:
            14px;
    }


    .entry-card {
        padding:
            8px 10px;
    }


    .entry-top {
        display:
            flex;

        align-items:
            center;

        gap:
            8px;
    }


    .entry h3 {
        font-size:
            .86rem;
    }


    .weight {
        margin-top:
            0;

        font-size:
            .74rem;

        padding:
            2px 7px;
    }


    .disclaimer {
        padding:
            13px 14px;
    }

/* =========================================================
   HOMEPAGE PROGRESS — MOBILE
   Homepage only. Does not affect shared page heroes.
   ========================================================= */

@media (max-width: 700px) {

    .home-progress-section.pj-page-hero {
        height: auto;
        min-height: 0;

        padding:
            10px 0 17px;
    }


    /* Heading + progress link */

    .home-progress-section .home-section-title-row {
        gap: 10px;

        margin-bottom: 6px;
    }


    .home-progress-section .home-section-title-row .eyebrow {
        font-size: .82rem;
    }


    .home-progress-section .home-section-title-row a {
        font-size: .72rem;

        white-space: nowrap;
    }


    /* Four progress cards */

    .home-progress-section .stats {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));

        gap: 8px;
    }

    .home-progress-section .stat {
        min-width: 0;
        height: 64px;
        padding: 5px 11px;
    }

    .home-progress-section .stat small {
        margin-bottom: 0;
        font-size: .66rem;
        line-height: 1;
    }

    .home-progress-section .stat strong {
        margin: 2px 0 0;
        font-size: 1.2rem;
        line-height: 1;
    }

    .home-progress-section .stat span {
        margin-top: 2px;
        font-size: .6rem;
        line-height: 1.1;
    }
    
    .home-progress-section .stat-highlight strong {
        font-size: 1.2rem;
    }
    
    .pj-page-hero h1 {
        font-size: clamp(1.45rem, 6vw, 1.75rem);
    }
    
    .pj-page-hero:not(.home-progress-section) h1 {
        font-size: 1.3rem;
        line-height: 1.08;
    }
}

/* =========================================================
   DISCLAIMER — MOBILE CONTENT ONLY
   Section height stays locked.
   ========================================================= */

@media (max-width: 700px) {

    .disclaimer-section .disclaimer {
        height: 98px;
        min-height: 0;
        padding: 5px 13px;
        display: flex;
        align-items: center;
        border-left-width: 5px;
        border-radius: 14px;
    }

    .disclaimer-section .disclaimer p {
        margin: 0;
        font-size: .7rem;
        line-height: 1.1;
    }
}
    
/* =========================================================
   SITE FOOTER — MOBILE
   Compact contents; preserve footer structure.
   ========================================================= */

@media (max-width: 700px) {

    .site-footer-inner {
        gap: 10px;
    }

    .site-footer-brand {
        gap: 10px;
    }

    .site-footer-copy strong {
        font-size: .92rem;
        line-height: 1.1;
    }

    .site-footer-copy span {
        margin-top: 2px;
        font-size: .62rem;
        line-height: 1.2;
    }

    .site-footer-note {
        font-size: .65rem;
        line-height: 1.2;
    }

}