:root{
    --bg:#fffaf8;
    --card:#ffffff;
    --soft:#fff3f7;
    --text:#403835;
    --muted:#746864;
    --accent:#cf6d93;
    --accent-light:#fde2ec;
    --border:#f1d8e3;
}

*{
    box-sizing:border-box;
}

html{
    scroll-behavior:smooth;
}

body{
    margin:0;
    font-family:Arial, Helvetica, sans-serif;
    background:var(--bg);
    color:var(--text);
    line-height:1.75;
}


/* -------------------------------- */
/* Navigation */
/* -------------------------------- */

.site-header{
    background:white;
    border-bottom:1px solid var(--border);
    position:sticky;
    top:0;
    z-index:50;
}

.site-nav{
    max-width:1200px;
    margin:auto;
    display:flex;
    justify-content:center;
    gap:28px;
    flex-wrap:wrap;
    padding:18px;
}

.site-nav a{
    text-decoration:none;
    color:var(--text);
    font-weight:700;
}

.site-nav a:hover{
    color:var(--accent);
}


/* -------------------------------- */
/* General */
/* -------------------------------- */

main{
    overflow:hidden;
}

section{
    padding:80px 8%;
}

.centered{
    max-width:820px;
    margin:auto;
    text-align:center;
}

.eyebrow{
    color:var(--accent);
    font-weight:800;
    text-transform:uppercase;
    letter-spacing:2px;
    font-size:.8rem;
    margin-bottom:12px;
}

h1{
    font-size:clamp(3rem,8vw,5.5rem);
    line-height:.95;
    margin-bottom:20px;
    color:var(--accent);
}

h2{
    font-size:clamp(2rem,5vw,3rem);
    margin-top:0;
    color:var(--text);
}

p{
    color:var(--muted);
    font-size:1.08rem;
}


/* -------------------------------- */
/* Hero */
/* -------------------------------- */

.heart-hero{

    text-align:center;
    padding:120px 20px 90px;

    background:linear-gradient(
        to bottom,
        #fff6f9,
        #fffaf8
    );

}

.hero-content{

    max-width:760px;
    margin:auto;

}

.hero-intro{

    font-size:1.35rem;
    color:var(--text);

}


/* -------------------------------- */
/* Cards */
/* -------------------------------- */

.trail-card,
.question-card{

    background:white;
    border-radius:30px;
    padding:50px;
    border:1px solid var(--border);

    box-shadow:
        0 18px 40px rgba(207,109,147,.08);

}


/* -------------------------------- */
/* Sections */
/* -------------------------------- */

.trail-section{

    background:var(--bg);

}

.closing-section{

    background:linear-gradient(
        to bottom,
        #fffaf8,
        #fff3f7
    );

    text-align:center;

}


/* -------------------------------- */
/* Buttons */
/* -------------------------------- */

.button-row{

    display:flex;
    justify-content:center;
    gap:18px;
    flex-wrap:wrap;
    margin-top:35px;

}

.trail-button{

    display:inline-block;
    padding:15px 28px;
    border-radius:999px;
    text-decoration:none;
    font-weight:bold;
    background:var(--accent);
    color:white;
    transition:.25s;

}

.trail-button:hover{

    background:#b9557d;
    transform:translateY(-2px);

}

.trail-button.secondary{

    background:white;
    color:var(--accent);
    border:2px solid var(--accent);

}

.trail-button.secondary:hover{

    background:#fff2f7;

}


/* -------------------------------- */
/* Closing */
/* -------------------------------- */

.closing-content{

    max-width:850px;
    margin:auto;

}

.small-note{

    font-size:.9rem;

}


/* -------------------------------- */
/* Footer */
/* -------------------------------- */

.site-footer{

    text-align:center;
    padding:60px 20px;
    background:white;
    border-top:1px solid var(--border);

}

.site-footer p{

    color:var(--muted);

}

/* -------------------------------- */
/* Mobile */
/* -------------------------------- */

@media (max-width:900px){

    section{
        padding:60px 6%;
    }

    .trail-card,
    .question-card{
        padding:30px;
    }

    .hero-content{
        margin:auto;
        text-align:center;
    }

}

@media (max-width:700px){

    .site-nav{
        gap:14px;
    }

    .heart-hero{
        padding:90px 20px 70px;
    }

    .button-row{
        flex-direction:column;
        align-items:center;
    }

    .trail-button{
        width:100%;
        max-width:320px;
    }
/* =========================================================
   HEART STONE NAVIGATION OVERLAY
========================================================= */

.site-navigation-menu {
    position: relative;
    margin: 0;
}

.site-navigation-menu summary {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    cursor: pointer;
    font: inherit;
    font-weight: 700;
    list-style: none;
}

.site-navigation-menu summary::-webkit-details-marker {
    display: none;
}

.site-navigation-menu summary::after {
    content: "▾";
    font-size: 0.75rem;
    transition: transform 0.2s ease;
}

.site-navigation-menu[open] summary::after {
    transform: rotate(180deg);
}

.site-navigation-menu summary:hover,
.site-navigation-menu summary:focus-visible {
    color: var(--heart-accent, #cf6d93);
}

.site-navigation-menu summary:focus-visible {
    border-radius: 0.35rem;
    outline: 3px solid rgba(207, 109, 147, 0.28);
    outline-offset: 5px;
}


/* OVERLAY PANEL */

.site-navigation-overlay {
    position: absolute;
    z-index: 100;
    top: calc(100% + 1rem);
    left: 50%;
    width: min(90vw, 430px);
    padding: 1.35rem;
    border: 1px solid var(--heart-border, #f1d8e3);
    border-radius: 1.3rem;
    background: #ffffff;
    box-shadow:
        0 20px 55px rgba(67, 47, 54, 0.18);
    transform: translateX(-50%);
}

.site-navigation-overlay::before {
    position: absolute;
    top: -0.55rem;
    left: 50%;
    width: 1rem;
    height: 1rem;
    border-top: 1px solid var(--heart-border, #f1d8e3);
    border-left: 1px solid var(--heart-border, #f1d8e3);
    background: #ffffff;
    content: "";
    transform:
        translateX(-50%)
        rotate(45deg);
}

.site-navigation-overlay-title {
    position: relative;
    z-index: 1;
    margin: 0;
    color: var(--heart-text, #403835);
    font-size: 1.12rem;
    font-weight: 800;
    text-align: center;
}

.site-navigation-overlay-intro {
    position: relative;
    z-index: 1;
    margin: 0.45rem auto 1rem;
    color: var(--heart-muted, #746864);
    font-size: 0.9rem;
    line-height: 1.55;
    text-align: center;
}


/* HEART STONE LINKS */

.site-navigation-overlay-links {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 0.7rem;
}

.site-navigation-overlay-links a {
    display: grid;
    grid-template-columns: 2rem minmax(0, 1fr);
    gap: 0.75rem;
    align-items: center;
    min-width: 0;
    padding: 0.9rem;
    border: 1px solid transparent;
    border-radius: 0.9rem;
    color: var(--heart-text, #403835);
    text-decoration: none;
}

.site-navigation-overlay-links a:hover,
.site-navigation-overlay-links a:focus-visible {
    border-color: var(--heart-border, #f1d8e3);
    background: var(--heart-soft, #fff3f7);
    color: var(--heart-accent, #cf6d93);
}

.site-navigation-overlay-links a:focus-visible {
    outline: 3px solid rgba(207, 109, 147, 0.25);
    outline-offset: 2px;
}

.site-navigation-overlay-links a > span:first-child {
    font-size: 1.4rem;
    line-height: 1;
    text-align: center;
}

.site-navigation-overlay-links strong,
.site-navigation-overlay-links small {
    display: block;
}

.site-navigation-overlay-links strong {
    color: inherit;
    font-size: 0.96rem;
    line-height: 1.35;
}

.site-navigation-overlay-links small {
    margin-top: 0.15rem;
    color: var(--heart-muted, #746864);
    font-size: 0.78rem;
    font-weight: 400;
    line-height: 1.4;
}


/* =========================================================
   PHONE NAVIGATION
========================================================= */

@media (max-width: 760px) {
    .site-navigation-menu {
        width: 100%;
    }

    .site-navigation-menu summary {
        justify-content: center;
    }

    .site-navigation-overlay {
        position: relative;
        top: auto;
        left: auto;
        width: min(100%, 430px);
        margin: 1rem auto 0;
        transform: none;
    }

    .site-navigation-overlay::before {
        display: none;
    }
}
}
/* =========================================================
   FINAL MAIN NAVIGATION COLOR OVERRIDE
========================================================= */

.site-header .site-navigation > a,
.site-header .site-navigation > details > summary {
    color: #403835 !important;
}

.site-header .site-navigation > a:hover,
.site-header .site-navigation > a:focus-visible,
.site-header .site-navigation > details > summary:hover,
.site-header .site-navigation > details > summary:focus-visible {
    color: #cf6d93 !important;
}

.site-header .site-navigation > a[aria-current="page"] {
    color: #355f45 !important;
}