:root {
    --primary-bg: #FDFBF7;
    --primary-text: #1A1A1A;
    --secondary-bg: #F5E6D3;
    --secondary-text: #2D2D2D;
    --accent-sage: #9DBEBB;
    --accent-blue-grey: #BCCCDC;
    --accent-sand: #E2D1C3;
    --accent-lavender: #C9C9D9;
    --muted-text: #4B5563;
    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;
    --radius: 8px;
    --transition: 300ms ease;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    font-family: var(--font-body);
    background-color: var(--primary-bg);
    color: var(--primary-text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-top: 0;
    color: inherit;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    color: inherit;
    transition: color var(--transition);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    transition: transform var(--transition), opacity var(--transition);
}

button:active {
    transform: scale(0.98);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius);
}

ul,
ol {
    list-style: none;
    padding: 0;
    margin: 0;
}

input,
textarea,
select {
    font-family: inherit;
    border-radius: var(--radius);
}

.focus-state:focus {
    outline: 2px solid var(--accent-sage);
    outline-offset: 2px;
}

@media (max-width: 768px) {
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }

    h2 {
        font-size: clamp(1.5rem, 4vw, 1.875rem);
    }

    h3 {
        font-size: clamp(1.25rem, 3vw, 1.5rem);
    }

    body {
        font-size: 0.9375rem;
    }

    .mobile-word-break {
        word-break: break-word;
        overflow-wrap: break-word;
    }
}

/* ===== header ===== */
#header {
    background-color: var(--primary-bg);
}

.js-mobile-overlay {
    background-color: var(--primary-bg);
}

/* ===== hero_section ===== */
#hero {
    width: 100%;
}

.js-tag {
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.2s ease;
}

.js-tag:active {
    transform: scale(0.95);
}

/* ===== featured_article ===== */
#intro-sustainability {
    width: 100%;
}

#intro-sustainability .modal {
    pointer-events: none;
    visibility: hidden;
    position: fixed;
    inset: 0;
    display: grid;
    justify-items: center;
    align-items: center;
    z-index: 1000;
    opacity: 0;
    transition: all 0.3s ease;
}

#intro-sustainability .modal-open {
    pointer-events: auto;
    visibility: visible;
    opacity: 1;
}

#intro-sustainability .modal-box {
    transform: scale(0.95);
    transition: transform 0.3s ease;
}

#intro-sustainability .modal-open .modal-box {
    transform: scale(1);
}

/* ===== retirement_logic ===== */
section#methodology {
    width: 100%;
}

.ph {
    line-height: 1;
}

/* ===== behavioral_analysis ===== */
#behavioral-econ {
    width: 100%;
}

.ph {
    display: inline-block;
}

/* ===== budgeting_block ===== */
#budgeting-section {
    width: 100%
}

#budgeting-section .p-6 {
    transition: transform 0.3s ease, box-shadow 0.3s ease
}

#budgeting-section .p-6:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1)
}

/* ===== monitoring_methods ===== */
#monitoring {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.ph {
    display: inline-block;
}

/* ===== digital_tracking ===== */
#digital-tools {
    width: 100%;
}

#digital-tools img {
    width: 100%;
    display: block;
}

/* ===== discipline_methods ===== */
#impulse-control {
    width: 100%;
    background-color: var(--primary-bg);
}

.text-primary-var {
    color: var(--primary-text);
}

.text-muted-var {
    color: var(--muted-text);
}

.text-secondary-var {
    color: var(--secondary-text);
}

.text-accent-var {
    color: var(--accent-sage);
}

.bg-secondary-var {
    background-color: var(--secondary-bg);
}

.bg-accent-sand-var {
    background-color: var(--accent-sand);
}

/* ===== savings_models ===== */
#savings {
    width: 100%;
}

.ph {
    display: inline-block;
}

/* ===== optimization_logic ===== */
[id="optimization"] {
    background-color: var(--secondary-bg);
}

.ph {
    color: var(--accent-sage);
}

/* ===== digital_2026 ===== */
#future-tech {
    background-color: var(--primary-bg);
    width: 100%;
}

.future-tech-title {
    color: var(--primary-text);
}

.future-tech-text {
    color: var(--secondary-text);
}

.future-tech-muted {
    color: var(--muted-text);
}

.future-tech-accent-bg {
    background-color: var(--secondary-bg);
}

.future-tech-icon {
    color: var(--primary-text);
}

.future-tech-sand-bg {
    background-color: var(--accent-sand);
}

.future-tech-blue-grey-bg {
    background-color: var(--accent-blue-grey);
}

.future-tech-border-sage {
    border-color: var(--accent-sage);
}

.future-tech-border-blue {
    border-color: var(--accent-blue-grey);
}

.js-fade-in {
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

/* ===== planning_20_years ===== */
#long-term {
    width: 100%;
    scroll-margin-top: 2rem;
}

.js-fade-in {
    opacity: 0;
    transition: opacity 1s ease-out;
}

.opacity-100 {
    opacity: 1 !important;
}

/* ===== behavioral_models ===== */
#habits {
    background-color: var(--primary-bg);
}

.accent-border {
    border-left: 4px solid var(--accent-sage);
}

/* ===== sustainability_system ===== */
#final-model {
    scroll-margin-top: 5rem;
}

.js-form-final {
    width: 100%;
}

.js-form-final input,
.js-form-final textarea {
    width: 100%;
}

.js-form-final input:focus,
.js-form-final textarea:focus {
    outline: 2px solid var(--accent-sage);
    outline-offset: 1px;
}

/* ===== expert_blog ===== */
#expert-blog {
    width: 100%;
}

/* ===== footer ===== */
#footer {
    width: 100%;
    border-top: 1px solid var(--accent-sand);
}

#footer a {
    text-decoration: none;
}