/* Makes width and height calculations easier to control */
* {
    box-sizing: border-box;
}
/* Reusable site colors */
:root {
    --text-color: #222222;
    --muted-text-color: #666666;

    --accent-color: #2f7f7a;
    --accent-color-dark: #256762;
}

/* General page styling */
body {
    margin: 0;

    font-family: Arial, sans-serif;

    background-color: #f7f7f7;
    color: #222222;
}


/* Top navigation bar */
header {
    background-color: white;
    border-bottom: 1px solid #dddddd;
}


/* Keeps navigation aligned with the main page content */
.nav-container {
    max-width: 1100px;
    margin: 0 auto;

    padding: 20px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* Temporary logo / site name */
.site-logo {
    font-size: 20px;
}
/* Site name / logo link */
.site-logo a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 700;
}


/* Small hover effect for the site name */
.site-logo a:hover {
    color: var(--accent-color-dark);
}

/* Navigation layout */
nav {
    display: flex;
    gap: 24px;
}


/* Navigation links */
nav a {
    color: #222222;
    text-decoration: none;
}


/* Main page content */
main {
    max-width: 1100px;
    margin: 0 auto;

    padding: 0 20px 40px 20px;
}


/* Gives normal homepage sections space below them */
section {
    margin-bottom: 60px;
}


/* General section headings */
h2 {
    font-size: 28px;
    margin-bottom: 20px;
}


/* Hero section */
.hero {
    padding: 70px 0 80px 0;
    margin-bottom: 20px;
}


/* Limits the width of the hero content */
.hero-content {
    max-width: 760px;
}


/* Main homepage heading */
.hero h1 {
    margin-top: 0;
    margin-bottom: 18px;

    font-size: 52px;
    line-height: 1.1;
}


/* Supporting hero text */
.hero p {
    margin: 0;

    font-size: 20px;
    line-height: 1.6;

    color: #666666;
}


/* Grid used for Popular Tools */
.tool-grid {
    display: grid;

    /* Three equal columns on larger screens */
    grid-template-columns: repeat(3, 1fr);

    gap: 20px;
    margin-bottom: 24px;
}


/* Individual calculator card */
.tool-card {
    display: block;

    padding: 28px;

    /* Soft blue-teal background */
    background-color: #edf7f6;

    /* Very subtle teal border */
    border: 1px solid #d5e7e5;
    border-radius: 14px;

    color: #222222;
    text-decoration: none;

    /* Soft shadow gives the card a little depth */
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04);

    /* Makes hover changes happen smoothly */
    transition:
        transform 0.2s ease,
        box-shadow 0.2s ease,
        background-color 0.2s ease,
        border-color 0.2s ease;
}


/* Calculator title inside each card */
.tool-card h3 {
    margin-top: 0;
    margin-bottom: 12px;

    font-size: 20px;
    line-height: 1.3;

    /* Gives the title a subtle branded accent */
    color: var(--accent-color-dark);
}


/* Calculator description */
.tool-card p {
    margin: 0;

    font-size: 15px;
    line-height: 1.6;

    color: #666666;
}


/* Makes the calculator card react when the mouse is over it */
.tool-card:hover {
    /* Slightly deeper teal when hovered */
    background-color: #e4f2f0;

    /* Lift the card slightly */
    transform: translateY(-4px);

    /* Slightly stronger teal border */
    border-color: #bfd9d6;

    /* Stronger shadow while hovering */
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);
}

/* Styling for the "View all calculators" link */
.tool-grid + a {
    display: inline-flex;
    align-items: center;

    margin-top: 6px;

    font-size: 16px;
    font-weight: 600;

    color: var(--accent-color);
    text-decoration: none;

    /* Makes hover changes smooth */
    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* Makes the directory link feel interactive */
.tool-grid + a:hover {
    color: var(--accent-color-dark);

    /* Moves the whole link very slightly to the right */
    transform: translateX(3px);
}

/* Basic styling for temporary category and content buttons */
button {
    padding: 18px 20px;
    margin: 6px;

    font-size: 16px;

    background-color: white;

    border: 1px solid #dddddd;
    border-radius: 10px;

    cursor: pointer;
}


/* Small hover effect for buttons */
button:hover {
    border-color: #999999;
}


/* Footer styling */
footer {
    padding: 30px 20px;

    text-align: center;

    background-color: white;
    border-top: 1px solid #dddddd;
}


/* Tablet layout */
@media (max-width: 900px) {

    /* Popular Tools becomes two columns */
    .tool-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* Phone layout */
@media (max-width: 700px) {

    /* Stack logo and navigation vertically */
    .nav-container {
        flex-direction: column;
        gap: 15px;
    }

    nav {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    /* Reduce hero spacing on smaller screens */
    .hero {
        padding: 45px 0 55px 0;
    }

    /* Reduce hero heading size on smaller screens */
    .hero h1 {
        font-size: 38px;
    }

    /* Reduce hero paragraph slightly */
    .hero p {
        font-size: 18px;
    }
}


/* Small phone layout */
@media (max-width: 600px) {

    /* Popular Tools becomes one column */
    .tool-grid {
        grid-template-columns: 1fr;
    }
}
/* Grid used for calculator categories */
.category-grid {
    display: grid;

    /* Five equal columns on larger screens */
    grid-template-columns: repeat(5, 1fr);

    gap: 14px;
}


/* Individual category navigation card */
.category-card {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 72px;
    padding: 16px;

    background-color: white;

    border: 1px solid #dfe5e4;
    border-radius: 12px;

    color: var(--accent-color-dark);
    text-decoration: none;

    font-size: 15px;
    font-weight: 600;
    text-align: center;

    /* Keeps hover changes smooth */
    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


/* Hover effect for category navigation */
.category-card:hover {
    background-color: #f2f8f7;
    border-color: #bfd9d6;

    transform: translateY(-2px);
}


/* Category layout on tablets */
@media (max-width: 900px) {

    .category-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}


/* Category layout on phones */
@media (max-width: 600px) {

    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
/* Introductory text used below section headings */
.section-intro {
    max-width: 650px;
    margin-top: -8px;
    margin-bottom: 24px;

    color: var(--muted-text-color);
    line-height: 1.6;
}


/* Grid used for Excel guide cards */
.excel-grid {
    display: grid;

    /* Four equal columns on larger screens */
    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
    margin-bottom: 24px;
}


/* Individual Excel guide card */
.excel-card {
    display: block;

    padding: 22px;

    background-color: white;

    border: 1px solid #e2e6e5;
    border-radius: 12px;

    color: var(--text-color);
    text-decoration: none;

    /* Smooth interaction when hovering */
    transition:
        border-color 0.2s ease,
        transform 0.2s ease,
        box-shadow 0.2s ease;
}


/* Excel guide title */
.excel-card h3 {
    margin-top: 0;
    margin-bottom: 10px;

    font-size: 18px;
    color: var(--accent-color-dark);
}


/* Excel guide description */
.excel-card p {
    margin: 0;

    font-size: 14px;
    line-height: 1.5;

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


/* Hover effect for Excel guide cards */
.excel-card:hover {
    transform: translateY(-3px);

    border-color: #bfd9d6;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}


/* Reusable link used at the bottom of homepage sections */
.section-link {
    display: inline-flex;
    align-items: center;

    font-size: 16px;
    font-weight: 600;

    color: var(--accent-color);
    text-decoration: none;

    transition:
        color 0.2s ease,
        transform 0.2s ease;
}


/* Reusable section link hover effect */
.section-link:hover {
    color: var(--accent-color-dark);
    transform: translateX(3px);
}


/* Excel guide layout on tablets */
@media (max-width: 900px) {

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


/* Excel guide layout on phones */
@media (max-width: 600px) {

    .excel-grid {
        grid-template-columns: 1fr;
    }
}
/* Homepage Excel preview uses only two columns */
.excel-grid-preview {
    grid-template-columns: repeat(2, 1fr);
}
/* Stack the Excel preview cards on small phones */
@media (max-width: 600px) {

    .excel-grid-preview {
        grid-template-columns: 1fr;
    }
}
/* Grid containing the two featured homepage templates */
.template-grid {
    display: grid;

    /* Two equal columns on larger screens */
    grid-template-columns: repeat(2, 1fr);

    gap: 20px;
    margin-bottom: 24px;
}


/* Individual featured template card */
.template-card {
    display: block;

    padding: 26px;

    background-color: white;

    border: 1px solid #e2e6e5;
    border-radius: 14px;

    color: var(--text-color);
    text-decoration: none;

    /* Smooth interaction when hovering */
    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* Small Free / Premium indicator */
.template-label {
    display: inline-block;

    margin-bottom: 16px;
    padding: 5px 9px;

    background-color: #edf7f6;
    border-radius: 6px;

    color: var(--accent-color-dark);

    font-size: 12px;
    font-weight: 600;
}


/* Template name */
.template-card h3 {
    margin-top: 0;
    margin-bottom: 10px;

    font-size: 20px;
}


/* Template description */
.template-card p {
    margin-top: 0;
    margin-bottom: 20px;

    color: var(--muted-text-color);

    font-size: 15px;
    line-height: 1.6;
}


/* "View template" text inside each card */
.template-view {
    color: var(--accent-color);

    font-size: 14px;
    font-weight: 600;
}


/* Hover effect for featured templates */
.template-card:hover {
    transform: translateY(-3px);

    border-color: #bfd9d6;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}


/* Stack featured templates vertically on phones */
@media (max-width: 600px) {

    .template-grid {
        grid-template-columns: 1fr;
    }
}
/* Quick navigation row below the hero section */
.quick-links {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: -80px;
    margin-bottom: 60px;
}


/* Individual quick navigation link */
.quick-links a {
    display: inline-flex;
    align-items: center;

    padding: 10px 16px;

    background-color: white;

    border: 1px solid #d5e7e5;
    border-radius: 999px;

    color: var(--accent-color-dark);
    text-decoration: none;

    font-size: 14px;
    font-weight: 600;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease,
        transform 0.2s ease;
}


/* Hover effect for quick navigation */
.quick-links a:hover {
    background-color: #edf7f6;
    border-color: #bfd9d6;

    transform: translateY(-2px);
}


/* Makes jumps between homepage sections scroll smoothly */
html {
    scroll-behavior: smooth;
}


/* Gives jumped-to sections some breathing room at the top */
#popular-calculators,
#categories,
#browser-tools,
#featured-guides,
#excel-help,
#featured-templates {
    scroll-margin-top: 30px;
}


/* Adjust quick links on smaller screens */
@media (max-width: 600px) {

    .quick-links {
        margin-top: -20px;
        margin-bottom: 45px;
    }

    .quick-links a {
        flex: 1 1 calc(50% - 10px);

        justify-content: center;
        text-align: center;
    }
}
/* Top area of directory-style pages */
.directory-hero {
    padding: 60px 0 30px 0;
    margin-bottom: 20px;
}


/* Main heading on directory pages */
.directory-hero h1 {
    margin-top: 0;
    margin-bottom: 14px;

    font-size: 42px;
}


/* Row containing calculator category filters */
.filter-row {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;
}


/* Individual category filter */
.filter-button {
    margin: 0;

    padding: 10px 15px;

    background-color: white;

    border: 1px solid #d5e7e5;
    border-radius: 999px;

    color: var(--accent-color-dark);

    font-size: 14px;
    font-weight: 600;
}


/* Shows which calculator category is currently selected */
.filter-button.active {
    background-color: var(--accent-color);
    border-color: var(--accent-color);

    color: white;
}


/* Adds space below the category filters */
.calculator-filters {
    margin-bottom: 35px;
}


/* Smaller directory heading on phones */
@media (max-width: 600px) {

    .directory-hero {
        padding-top: 40px;
    }

    .directory-hero h1 {
        font-size: 34px;
    }
}
/* Main page used by individual calculators */
.calculator-page {
    padding: 60px 0;
}


/* Calculator heading area */
.calculator-header {
    max-width: 720px;
    margin-bottom: 32px;
}


/* Small category label above calculator title */
.calculator-category {
    margin-bottom: 8px;

    color: var(--accent-color);

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* Main calculator page title */
.calculator-header h1 {
    margin-top: 0;
    margin-bottom: 14px;

    font-size: 42px;
}


/* Introduction below calculator title */
.calculator-intro {
    margin: 0;

    color: var(--muted-text-color);

    font-size: 18px;
    line-height: 1.6;
}


/* Main calculator box */
.calculator-panel {
    max-width: 720px;

    padding: 32px;

    background-color: white;

    border: 1px solid #d5e7e5;
    border-radius: 16px;

    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.05);
}


/* Individual input field */
.calculator-field {
    margin-bottom: 22px;
}


/* Labels above calculator inputs */
.calculator-field label {
    display: block;

    margin-bottom: 8px;

    font-size: 14px;
    font-weight: 600;
}


/* Calculator input fields */
.calculator-field input {
    width: 100%;

    padding: 14px 16px;

    font-size: 16px;

    border: 1px solid #cccccc;
    border-radius: 10px;
}


/* Highlight selected input */
.calculator-field input:focus {
    outline: none;
    border-color: var(--accent-color);
}


/* Row containing calculator buttons */
.calculator-actions {
    display: flex;
    flex-wrap: wrap;

    gap: 12px;

    margin-top: 28px;
}


/* Main action button */
.primary-button {
    margin: 0;

    background-color: var(--accent-color);
    border-color: var(--accent-color);

    color: white;

    font-weight: 600;
}


/* Main button hover */
.primary-button:hover {
    background-color: var(--accent-color-dark);
    border-color: var(--accent-color-dark);
}


/* Secondary calculator button */
.secondary-button {
    margin: 0;

    background-color: white;

    color: var(--accent-color-dark);

    font-weight: 600;
}


/* Message used for errors or guidance */
.calculator-message {
    margin-bottom: 0;

    color: #a33a3a;

    font-size: 14px;
}


/* Result area */
.calculator-results {
    margin-top: 32px;
    padding-top: 28px;

    border-top: 1px solid #e2e6e5;
}


/* Result heading */
.calculator-results h2 {
    margin-top: 0;
}


/* Grid containing calculated values */
.result-grid {
    display: grid;

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

    gap: 16px;
}


/* Individual result */
.result-item {
    padding: 18px;

    background-color: #edf7f6;

    border-radius: 10px;
}


/* Small label above result value */
.result-label {
    display: block;

    margin-bottom: 6px;

    color: var(--muted-text-color);

    font-size: 13px;
}


/* Calculated result value */
.result-item strong {
    font-size: 20px;

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


/* Explanation below calculator */
.calculator-explanation {
    max-width: 720px;

    margin-top: 45px;
}


/* Explanation paragraph */
.calculator-explanation p {
    color: var(--muted-text-color);

    line-height: 1.7;
}


/* Calculator layout on phones */
@media (max-width: 600px) {

    .calculator-page {
        padding-top: 40px;
    }

    .calculator-header h1 {
        font-size: 34px;
    }

    .calculator-panel {
        padding: 22px;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }

    .calculator-actions button {
        flex: 1;
    }
}
/* ======================================================
   GUIDE / ARTICLE PAGES
   ====================================================== */


/* Main article container */
.guide-page {
    max-width: 900px;

    margin: 0 auto;
    padding: 60px 0;
}


/* Article heading area */
.guide-header {
    max-width: 760px;

    margin-bottom: 45px;
}


/* Small guide category above the title */
.guide-category {
    margin-bottom: 10px;

    color: var(--accent-color);

    font-size: 14px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.05em;
}


/* Main article title */
.guide-header h1 {
    margin-top: 0;
    margin-bottom: 18px;

    font-size: 46px;
    line-height: 1.15;
}


/* Short introduction below title */
.guide-intro {
    margin-bottom: 14px;

    color: var(--muted-text-color);

    font-size: 20px;
    line-height: 1.6;
}


/* Last updated / metadata */
.guide-meta {
    margin: 0;

    color: #888888;

    font-size: 13px;
}


/* Main readable article column */
.guide-content {
    max-width: 760px;
}


/* Main article section headings */
.guide-content h2 {
    margin-top: 46px;
    margin-bottom: 16px;

    font-size: 27px;
}


/* Smaller article subsection headings */
.guide-content h3 {
    margin-top: 30px;
    margin-bottom: 10px;

    font-size: 20px;
}


/* Article paragraphs */
.guide-content p {
    margin-top: 0;
    margin-bottom: 18px;

    color: #444444;

    font-size: 17px;
    line-height: 1.75;
}


/* Allows tables to scroll horizontally on small screens */
.guide-table-wrapper {
    overflow-x: auto;

    margin: 28px 0;
}


/* Article table */
.guide-table {
    width: 100%;

    border-collapse: collapse;

    background-color: white;

    border: 1px solid #e2e6e5;
}


/* Table cells */
.guide-table th,
.guide-table td {
    padding: 14px;

    text-align: left;

    border-bottom: 1px solid #e2e6e5;
}


/* Table heading row */
.guide-table th {
    background-color: #edf7f6;

    color: var(--accent-color-dark);

    font-size: 14px;
}


/* Related content area below the article */
.guide-related {
    max-width: 760px;

    margin-top: 60px;
    padding-top: 35px;

    border-top: 1px solid #dddddd;
}


/* Grid containing related tools/templates */
.guide-related-grid {
    display: grid;

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

    gap: 18px;
}


/* Related content card */
.guide-related-card {
    display: block;

    padding: 22px;

    background-color: #edf7f6;

    border: 1px solid #d5e7e5;
    border-radius: 12px;

    color: var(--text-color);
    text-decoration: none;

    transition:
        transform 0.2s ease,
        border-color 0.2s ease,
        box-shadow 0.2s ease;
}


/* Small content-type label */
.guide-related-type {
    display: block;

    margin-bottom: 8px;

    color: var(--accent-color);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;
}


/* Related card title */
.guide-related-card h3 {
    margin-top: 0;
    margin-bottom: 8px;

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


/* Related card description */
.guide-related-card p {
    margin: 0;

    color: var(--muted-text-color);

    font-size: 14px;
    line-height: 1.5;
}


/* Hover effect */
.guide-related-card:hover {
    transform: translateY(-3px);

    border-color: #bfd9d6;

    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06);
}


/* Guide layout on phones */
@media (max-width: 600px) {

    .guide-page {
        padding-top: 40px;
    }

    .guide-header h1 {
        font-size: 36px;
    }

    .guide-intro {
        font-size: 18px;
    }

    .guide-content p {
        font-size: 16px;
    }

    .guide-related-grid {
        grid-template-columns: 1fr;
    }
}
/* =========================================================
   MORTGAGE EXTRA PAYMENT UI
   =========================================================
   Keep optional mortgage features visually secondary so the
   main calculator remains simple and uncluttered.
   ========================================================= */


.calculator-field-help {
    display: block;
    margin-top: 6px;
    color: var(--muted-text-color);
    font-size: 0.9rem;
}


/* Button used to reveal optional one-time payments */
.mortgage-extra-toggle {
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    color: var(--accent-color);
    cursor: pointer;
}


.mortgage-extra-toggle:hover {
    text-decoration: underline;
}


.mortgage-extra-controls {
    margin-top: 6px;
    margin-bottom: 22px;
}


/* Hidden advanced section */
.mortgage-extra-section {
    margin-bottom: 24px;
    padding: 18px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}


.mortgage-extra-section h3 {
    margin-top: 0;
}


/* One one-time-payment row */
.mortgage-extra-row {
    display: grid;
    grid-template-columns: 1fr 1fr auto;
    gap: 12px;
    align-items: end;
    margin-bottom: 14px;
}


.mortgage-extra-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


.mortgage-extra-field input {
    width: 100%;
    box-sizing: border-box;
}


/* Small remove action rather than a large button */
.mortgage-extra-remove {
    border: none;
    background: none;
    cursor: pointer;
    color: var(--muted-text-color);
    padding: 10px 4px;
}


.mortgage-extra-remove:hover {
    color: var(--text-color);
}


/* Main monthly payment */
.mortgage-primary-result {
    margin-bottom: 22px;
}


/* Base vs extra-payment comparison */
.mortgage-comparison {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 18px;
}


.mortgage-scenario {
    padding: 18px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}


.mortgage-scenario h3 {
    margin-top: 0;
}


.mortgage-result-row {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 12px;
}


/* Savings gets its own compact summary */
.mortgage-savings {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}


.mortgage-savings h3 {
    margin-top: 0;
}


/* Mobile layout */
@media (max-width: 700px) {

    .mortgage-comparison {
        grid-template-columns: 1fr;
    }


    .mortgage-extra-row {
        grid-template-columns: 1fr;
    }


    .mortgage-result-row {
        flex-direction: column;
        gap: 4px;
    }

}
/* =========================================================
   CALCULATOR EXPORT
   ========================================================= */

.calculator-export-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 22px;
}


/* =========================================================
   PRINT / SAVE AS PDF
   =========================================================
   
   When printing, remove controls that do not belong in
   the saved calculation.
   ========================================================= */

@media print {

    header,
    footer,
    .quick-links,
    .calculator-actions,
    .calculator-export-actions,
    .mortgage-extra-controls,
    .mortgage-extra-section,
    .calculator-explanation {
        display: none !important;
    }


    .calculator-page {
        max-width: none;
    }


    .calculator-panel {
        border: none;
        box-shadow: none;
    }


    .calculator-results {
        display: block !important;
    }

}
.calculator-field select {
    width: 100%;
    box-sizing: border-box;
    padding: 12px;
    border: 1px solid #d9d9d9;
    border-radius: 8px;
    background: white;
    font: inherit;
    color: var(--text-color);
}


/* Results that cannot yet be calculated */
.calculator-result-unavailable {
    color: var(--muted-text-color);
    font-size: 0.9rem;
    font-weight: 400;
    text-align: right;
}
/* =========================================================
   CALCULATOR — UNLOCK MORE RESULTS
   ========================================================= */

.calculator-unlock-section {
    margin-top: 18px;
    padding: 16px 18px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}

.calculator-unlock-section h3 {
    margin-top: 0;
    margin-bottom: 10px;
}

.calculator-unlock-section ul {
    margin: 0;
    padding-left: 20px;
    color: var(--muted-text-color);
}

.calculator-unlock-section li + li {
    margin-top: 7px;
}
/* =========================================================
   LOAN AFFORDABILITY CALCULATOR
   ========================================================= */


/* Groups the guided form into understandable stages */
.loan-section {
    margin-top: 22px;
    padding-top: 18px;
    border-top: 1px solid #e5e5e5;
}


.loan-section h3 {
    margin-top: 0;
    margin-bottom: 18px;
}


/* Assessment result */
.loan-assessment {
    margin-top: 18px;
    padding: 18px;
    border: 1px solid #e5e5e5;
    border-radius: 10px;
}


.loan-assessment h3 {
    margin-top: 0;
    margin-bottom: 10px;
}


.loan-assessment-level {
    display: block;
    margin-bottom: 8px;
    font-size: 1.15rem;
}


.loan-assessment ul {
    margin-bottom: 0;
    padding-left: 20px;
}


.loan-assessment li + li {
    margin-top: 6px;
}
/* =========================================================
   CALCULATOR CHECKBOX OPTION
   ========================================================= */


.calculator-checkbox-field {
    margin-bottom: 22px;
}


.calculator-checkbox-label {
    display: flex;
    align-items: center;
    gap: 10px;

    width: fit-content;

    font-size: 14px;
    font-weight: 600;

    cursor: pointer;
}


.calculator-checkbox-label input {
    width: auto;
    margin: 0;

    accent-color: var(--accent-color);

    cursor: pointer;
}


.calculator-checkbox-field .calculator-field-help {
    margin-left: 24px;
}


/* =========================================================
   BIRTHDAY COUNTDOWN
   ========================================================= */


.birthday-countdown {
    margin-top: 26px;
    padding: 24px;

    text-align: center;

    background:
        linear-gradient(
            135deg,
            #edf7f6 0%,
            #fff4d8 100%
        );

    border: 1px solid #efd9a6;
    border-radius: 14px;
}


.birthday-countdown h3 {
    margin-top: 0;
    margin-bottom: 18px;

    color: var(--accent-color-dark);

    font-size: 21px;
}


.birthday-countdown-grid {
    display: grid;

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

    gap: 10px;
}


.birthday-countdown-item {
    padding: 14px 8px;

    background-color:
        rgba(255, 255, 255, 0.78);

    border-radius: 10px;
}


.birthday-countdown-item strong {
    display: block;

    margin-bottom: 4px;

    color: var(--accent-color-dark);

    font-size: 26px;
}


.birthday-countdown-item span {
    color: var(--muted-text-color);

    font-size: 12px;
    font-weight: 600;

    text-transform: uppercase;
    letter-spacing: 0.04em;
}


.birthday-message {
    margin: 8px 0;

    color: var(--accent-color-dark);

    font-size: 25px;
    font-weight: 700;

    animation:
        birthday-pulse 1.8s ease-in-out infinite;
}


@keyframes birthday-pulse {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.04);
    }
}


@media (max-width: 600px) {

    .birthday-countdown-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

}


@media (prefers-reduced-motion: reduce) {

    .birthday-message {
        animation: none;
    }

}
/* =========================================================
   FOREIGN EXCHANGE CALCULATOR
   ========================================================= */


/* Places the two currency selectors beside each other */
.foreign-exchange-currency-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: end;
    gap: 14px;

    margin-bottom: 22px;
}


/* The grid controls its own bottom spacing */
.foreign-exchange-currency-grid .calculator-field {
    margin-bottom: 0;
}


/* Currency swap button */
.foreign-exchange-swap-button {
    width: 48px;
    height: 48px;

    margin: 0;
    padding: 0;

    background-color: #edf7f6;

    color: var(--accent-color-dark);

    border: 1px solid #c9dfdc;
    border-radius: 10px;

    font-size: 23px;
    font-weight: 600;

    cursor: pointer;
}


/* Swap button hover */
.foreign-exchange-swap-button:hover {
    background-color: #dff0ee;
    border-color: var(--accent-color);
}


/* Disabled state while rates are loading */
.foreign-exchange-swap-button:disabled,
#foreign-exchange-calculate:disabled,
#foreign-exchange-clear:disabled {
    cursor: wait;
    opacity: 0.65;
}


/* Loading message should not look like an error */
.foreign-exchange-loading {
    color: var(--accent-color-dark);
    font-weight: 600;
}


/* Exchange-rate source attribution */
.foreign-exchange-source {
    margin-top: 20px;
    margin-bottom: 0;

    color: var(--muted-text-color);

    font-size: 13px;
    line-height: 1.6;
}


/* Source links */
.foreign-exchange-source a {
    color: var(--accent-color-dark);
    font-weight: 600;
}


/* Historical month-end section */
.foreign-exchange-history {
    margin-top: 32px;
    padding-top: 28px;

    border-top: 1px solid #e2e6e5;
}


.foreign-exchange-history h2 {
    margin-top: 0;
    margin-bottom: 10px;
}


.foreign-exchange-history-intro {
    margin-top: 0;
    margin-bottom: 20px;

    color: var(--muted-text-color);

    font-size: 14px;
    line-height: 1.6;
}


/* Allows the table to scroll on narrow screens */
.foreign-exchange-table-wrapper {
    overflow-x: auto;

    border: 1px solid #d5e7e5;
    border-radius: 10px;
}


/* Historical rates table */
.foreign-exchange-table {
    width: 100%;
    min-width: 650px;

    border-collapse: collapse;

    background-color: white;
}


/* Historical table cells */
.foreign-exchange-table th,
.foreign-exchange-table td {
    padding: 13px 14px;

    text-align: left;
    white-space: nowrap;

    border-bottom: 1px solid #e2e6e5;
}


/* Historical table heading */
.foreign-exchange-table th {
    background-color: #edf7f6;

    color: var(--accent-color-dark);

    font-size: 13px;
    font-weight: 700;
}


/* Historical table values */
.foreign-exchange-table td {
    font-size: 14px;
}


/* Remove the border beneath the final row */
.foreign-exchange-table tbody tr:last-child td {
    border-bottom: none;
}


/* Highlight a row when pointing at it */
.foreign-exchange-table tbody tr:hover {
    background-color: #f7fbfa;
}


/* Mobile layout */
@media (max-width: 600px) {

    .foreign-exchange-currency-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }


    .foreign-exchange-swap-button {
        margin-right: auto;
        margin-left: auto;

        transform: rotate(90deg);
    }

}

/* =========================================================
   FOOTER LINKS
   ========================================================= */

footer a {
    color: inherit;
    text-decoration: none;
}

footer a:hover {
    color: var(--accent-color-dark);
    text-decoration: underline;
}


/* =========================================================
   CONTACT PAGE
   ========================================================= */

.contact-section {
    margin-top: 32px;
}


.contact-section h2 {
    margin-bottom: 12px;
}


.contact-reasons {
    padding-left: 22px;
    line-height: 1.7;
}


.contact-reasons li + li {
    margin-top: 6px;
}


/* =========================================================
   SUNNY JOURNAL DESIGN SYSTEM
   =========================================================
   This section overrides the earlier basic styling without
   removing calculator-specific layouts or functionality.
   ========================================================= */


/* ---------------------------------------------------------
   COLORS AND SHARED DESIGN VALUES
   --------------------------------------------------------- */

:root {
    --text-color: #31302d;
    --muted-text-color: #756b60;

    /* Warm orange used for details and highlights */
    --accent-color: #c96d45;
    --accent-color-dark: #a95334;
    --accent-color-soft: #f8d8bb;

    /* Blue-grey used for important buttons */
    --primary-color: #405d68;
    --primary-color-dark: #314b55;

    /* Paper colors */
    --page-color: #fff2df;
    --paper-color: #fffaf1;
    --paper-color-light: #fffdf8;

    /* Borders and shadows */
    --border-color: #d9b994;
    --border-color-light: #e7d4bd;
    --shadow-color: rgba(115, 73, 44, 0.14);
}


/* ---------------------------------------------------------
   GENERAL PAGE
   --------------------------------------------------------- */

html {
    scroll-behavior: smooth;
}


body {
    margin: 0;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    color: var(--text-color);

    /* Warm ledger-paper background */
    background-color: var(--page-color);

    background-image:
        linear-gradient(
            rgba(194, 126, 72, 0.13) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(194, 126, 72, 0.13) 1px,
            transparent 1px
        );

    background-size: 28px 28px;
}


/* Use the journal-style serif font for important headings */
h1,
h2,
h3 {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    color: var(--text-color);
}


h2 {
    margin-top: 0;

    font-size: 31px;
    line-height: 1.2;
}


/* Main content width */
main {
    max-width: 1180px;

    margin: 0 auto;
    padding: 0 20px 50px;
}


/* Homepage and directory sections */
section {
    margin-bottom: 70px;
}


/* Supporting text */
.section-intro {
    max-width: 620px;

    margin-top: -8px;
    margin-bottom: 26px;

    color: var(--muted-text-color);

    font-size: 16px;
    line-height: 1.65;
}


/* ---------------------------------------------------------
   HEADER AND NAVIGATION
   --------------------------------------------------------- */

header {
    background-color: rgba(255, 250, 241, 0.94);

    border-top: 4px solid var(--text-color);
    border-bottom: 1px solid var(--border-color);

    backdrop-filter: blur(8px);
}


.nav-container {
    max-width: 1180px;

    margin: 0 auto;
    padding: 18px 20px;

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

    gap: 30px;
}


.site-logo {
    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
}


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


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


nav {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    gap: 5px;
}


nav a {
    padding: 9px 12px;

    color: var(--text-color);
    text-decoration: none;

    border-radius: 999px;

    font-size: 14px;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}


nav a:hover {
    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);

    transform: translateY(-1px);
}


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

.hero {
    padding: 78px 0 92px;
    margin-bottom: 10px;
}


.hero-content {
    max-width: 850px;
}


.hero h1 {
    max-width: 820px;

    margin-top: 0;
    margin-bottom: 24px;

    font-size: clamp(48px, 7vw, 76px);
    font-weight: 500;

    line-height: 1;
    letter-spacing: -0.045em;
}


.hero p {
    max-width: 680px;

    margin: 0;

    color: var(--muted-text-color);

    font-size: 19px;
    line-height: 1.7;
}


/* ---------------------------------------------------------
   QUICK LINKS
   --------------------------------------------------------- */

.quick-links {
    display: flex;
    flex-wrap: wrap;

    gap: 10px;

    margin-top: -48px;
    margin-bottom: 70px;
}


.quick-links a {
    display: inline-flex;
    align-items: center;

    padding: 10px 16px;

    color: var(--text-color);
    background-color: var(--paper-color);

    border: 1px solid var(--border-color);
    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;

    text-decoration: none;

    box-shadow:
        0 4px 12px rgba(115, 73, 44, 0.05);

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        border-color 0.18s ease,
        transform 0.18s ease;
}


.quick-links a:hover {
    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);
    border-color: var(--accent-color);

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   TOOL CARDS
   --------------------------------------------------------- */

.tool-grid {
    gap: 18px;
}


.tool-card {
    position: relative;

    display: block;
    overflow: hidden;

    min-height: 180px;
    padding: 26px;

    color: var(--text-color);
    background-color: var(--paper-color);

    border: 1px solid var(--border-color-light);

    /*
       The slightly sharper lower-left corner gives the
       cards their paper-note appearance.
    */
    border-radius: 16px 16px 16px 5px;

    text-decoration: none;

    box-shadow:
        0 8px 24px rgba(81, 57, 36, 0.07);

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


/* Small journal-style accent at the top of every card */
.tool-card::before {
    position: absolute;

    top: 0;
    left: 0;

    width: 58px;
    height: 4px;

    content: "";

    background-color: var(--accent-color);
}


.tool-card h3 {
    margin-top: 0;
    margin-bottom: 11px;

    color: var(--text-color);

    font-size: 22px;
    line-height: 1.25;
}


.tool-card p {
    margin: 0;

    color: var(--muted-text-color);

    font-size: 15px;
    line-height: 1.6;
}


.tool-card:hover {
    background-color: var(--paper-color-light);
    border-color: var(--border-color);

    transform:
        translateY(-4px)
        rotate(-0.15deg);

    box-shadow:
        0 15px 32px var(--shadow-color);
}


/* Links beneath homepage sections */
.tool-grid + a,
.section-link {
    display: inline-flex;
    align-items: center;

    color: var(--primary-color);

    font-size: 15px;
    font-weight: 700;

    text-decoration: none;

    transition:
        color 0.18s ease,
        transform 0.18s ease;
}


.tool-grid + a:hover,
.section-link:hover {
    color: var(--accent-color-dark);

    transform: translateX(3px);
}


/* ---------------------------------------------------------
   CATEGORY CARDS
   --------------------------------------------------------- */

.category-grid {
    gap: 14px;
}


.category-card {
    min-height: 76px;
    padding: 17px;

    color: var(--text-color);
    background-color: var(--paper-color);

    border: 1px solid var(--border-color-light);
    border-radius: 13px 13px 13px 5px;

    font-size: 15px;
    font-weight: 700;

    box-shadow:
        0 5px 14px rgba(81, 57, 36, 0.05);

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


.category-card:hover {
    color: var(--accent-color-dark);
    background-color: var(--paper-color-light);
    border-color: var(--border-color);

    transform: translateY(-3px);

    box-shadow:
        0 10px 22px rgba(81, 57, 36, 0.09);
}


/* ---------------------------------------------------------
   ARTICLE, EXCEL AND TEMPLATE CARDS
   --------------------------------------------------------- */

.excel-card,
.template-card,
.guide-related-card {
    background-color: var(--paper-color);

    border: 1px solid var(--border-color-light);
    border-radius: 15px 15px 15px 5px;

    box-shadow:
        0 7px 20px rgba(81, 57, 36, 0.06);
}


.excel-card h3,
.template-card h3,
.guide-related-card h3 {
    color: var(--text-color);
}


.excel-card p,
.template-card p,
.guide-related-card p {
    color: var(--muted-text-color);
}


.excel-card:hover,
.template-card:hover,
.guide-related-card:hover {
    background-color: var(--paper-color-light);
    border-color: var(--border-color);

    transform: translateY(-3px);

    box-shadow:
        0 13px 26px var(--shadow-color);
}


.template-label {
    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);

    border-radius: 999px;

    font-weight: 700;
}


.template-view,
.guide-related-type {
    color: var(--accent-color-dark);
}


/* ---------------------------------------------------------
   BUTTONS
   --------------------------------------------------------- */

button {
    border-radius: 11px;

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


.primary-button {
    margin: 0;

    color: #fffdf8;
    background-color: var(--primary-color);

    border: 1px solid var(--primary-color);

    font-weight: 700;

    box-shadow:
        0 7px 16px rgba(49, 75, 85, 0.16);
}


.primary-button:hover {
    color: #ffffff;
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);

    transform: translateY(-2px);

    box-shadow:
        0 10px 20px rgba(49, 75, 85, 0.22);
}


.secondary-button {
    margin: 0;

    color: var(--text-color);
    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color);

    font-weight: 700;
}


.secondary-button:hover {
    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);
    border-color: var(--accent-color);

    transform: translateY(-2px);
}


/* ---------------------------------------------------------
   DIRECTORY PAGES
   --------------------------------------------------------- */

.directory-hero {
    padding: 68px 0 34px;
}


.directory-hero h1 {
    margin-top: 0;
    margin-bottom: 16px;

    font-size: clamp(40px, 6vw, 58px);
    font-weight: 500;

    line-height: 1.05;
    letter-spacing: -0.035em;
}


.filter-button {
    padding: 10px 16px;
    margin: 0;

    color: var(--text-color);
    background-color: var(--paper-color);

    border: 1px solid var(--border-color);
    border-radius: 999px;

    font-size: 14px;
    font-weight: 700;
}


.filter-button:hover {
    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);
    border-color: var(--accent-color);
}


.filter-button.active {
    color: #fffdf8;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}


/* ---------------------------------------------------------
   CALCULATOR PAGES
   --------------------------------------------------------- */

.calculator-page {
    padding: 65px 0 75px;
}


.calculator-header {
    max-width: 760px;
    margin-bottom: 34px;
}


.calculator-category,
.guide-category {
    margin-bottom: 10px;

    color: var(--accent-color-dark);

    font-size: 12px;
    font-weight: 800;

    text-transform: uppercase;
    letter-spacing: 0.12em;
}


.calculator-header h1 {
    margin-top: 0;
    margin-bottom: 16px;

    font-size: clamp(40px, 6vw, 58px);
    font-weight: 500;

    line-height: 1.05;
    letter-spacing: -0.035em;
}


.calculator-intro {
    color: var(--muted-text-color);

    font-size: 18px;
    line-height: 1.65;
}


.calculator-panel {
    max-width: 760px;

    padding: 32px;

    background-color: var(--paper-color);

    border: 1px solid var(--border-color);
    border-top: 5px solid var(--accent-color);

    border-radius: 18px 18px 18px 7px;

    box-shadow:
        0 15px 35px var(--shadow-color);
}


.calculator-field label {
    color: var(--text-color);

    font-size: 14px;
    font-weight: 700;
}


.calculator-field input,
.calculator-field select {
    width: 100%;

    padding: 14px 16px;

    color: var(--text-color);
    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color);
    border-radius: 9px;

    font-size: 16px;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.calculator-field input:focus,
.calculator-field select:focus {
    outline: none;

    border-color: var(--accent-color);

    box-shadow:
        0 0 0 3px var(--accent-color-soft);
}


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


.calculator-results {
    border-top-color: var(--border-color-light);
}


.result-item {
    padding: 18px;

    background-color: var(--accent-color-soft);

    border: 1px solid rgba(201, 109, 69, 0.18);
    border-radius: 11px 11px 11px 4px;
}


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


.result-item strong {
    color: var(--primary-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 22px;
}


.calculator-message {
    color: #a33f32;
}


.calculator-explanation {
    max-width: 760px;

    padding: 25px;

    background-color: rgba(255, 250, 241, 0.76);

    border: 1px solid var(--border-color-light);
    border-radius: 15px 15px 15px 5px;
}


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


/* Optional and advanced calculator sections */
.mortgage-extra-section,
.mortgage-scenario,
.mortgage-savings,
.calculator-unlock-section,
.loan-assessment {
    background-color: var(--paper-color-light);

    border-color: var(--border-color-light);
    border-radius: 11px 11px 11px 4px;
}


.loan-section,
.foreign-exchange-history {
    border-top-color: var(--border-color-light);
}


.calculator-checkbox-label input {
    accent-color: var(--accent-color);
}


/* Foreign exchange controls */
.foreign-exchange-swap-button {
    color: var(--primary-color);
    background-color: var(--accent-color-soft);

    border-color: var(--border-color);
}


.foreign-exchange-swap-button:hover {
    color: #ffffff;
    background-color: var(--primary-color);

    border-color: var(--primary-color);
}


/* Tables */
.guide-table,
.foreign-exchange-table {
    background-color: var(--paper-color-light);
}


.guide-table th,
.foreign-exchange-table th {
    color: var(--primary-color);
    background-color: var(--accent-color-soft);
}


.guide-table th,
.guide-table td,
.foreign-exchange-table th,
.foreign-exchange-table td {
    border-bottom-color: var(--border-color-light);
}


/* Birthday countdown */
.birthday-countdown {
    background:
        linear-gradient(
            135deg,
            var(--accent-color-soft) 0%,
            #fff3bf 100%
        );

    border-color: var(--border-color);
}


.birthday-countdown h3,
.birthday-countdown-item strong,
.birthday-message {
    color: var(--primary-color);
}


/* ---------------------------------------------------------
   ARTICLE AND STATIC INFORMATION PAGES
   --------------------------------------------------------- */

.guide-page,
.legal-page {
    max-width: 900px;

    margin: 0 auto;
    padding: 65px 0;
}


.guide-header h1,
.legal-header h1 {
    font-size: clamp(42px, 6vw, 62px);
    font-weight: 500;

    line-height: 1.05;
    letter-spacing: -0.035em;
}


.guide-intro,
.legal-intro {
    color: var(--muted-text-color);

    line-height: 1.65;
}


.guide-content p,
.legal-section p {
    color: #554e46;

    line-height: 1.75;
}


.legal-content {
    max-width: 760px;
}


.legal-section {
    margin-bottom: 38px;
}


.legal-section h2 {
    margin-bottom: 12px;

    font-size: 26px;
}


.legal-last-updated,
.guide-meta {
    color: var(--muted-text-color);

    font-size: 13px;
}


.legal-placeholder {
    margin-top: 18px;
    padding: 18px;

    color: #70462f;
    background-color: #fff1c9;

    border: 1px solid #dfb563;
    border-radius: 11px 11px 11px 4px;
}


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

footer {
    padding: 32px 20px;

    color: var(--muted-text-color);
    background-color: var(--paper-color);

    border-top: 1px solid var(--border-color);

    text-align: center;
}


footer a {
    color: var(--muted-text-color);
    text-decoration: none;
}


footer a:hover {
    color: var(--accent-color-dark);
    text-decoration: underline;
}


/* Current language in the footer language links */
footer .footer-languages a.active {
    color: var(--text-color);
    font-weight: 700;
}


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

@media (max-width: 700px) {

    .nav-container {
        align-items: flex-start;
        flex-direction: column;

        gap: 14px;
    }


    nav {
        width: 100%;

        gap: 3px;
    }


    nav a {
        padding: 8px 10px;
    }


    .hero {
        padding: 54px 0 68px;
    }


    .hero h1 {
        font-size: 47px;
    }


    .hero p {
        font-size: 17px;
    }


    .quick-links {
        margin-top: -28px;
        margin-bottom: 50px;
    }

}


@media (max-width: 600px) {

    main {
        padding-right: 16px;
        padding-left: 16px;
    }


    section {
        margin-bottom: 55px;
    }


    .category-grid {
        grid-template-columns: 1fr;
    }


    .calculator-page {
        padding-top: 44px;
    }


    .calculator-panel {
        padding: 22px;
    }


    .calculator-actions {
        align-items: stretch;
        flex-direction: column;
    }


    .calculator-actions button {
        width: 100%;
        flex: none;
    }


    .guide-page,
    .legal-page {
        padding-top: 44px;
    }

}


/* Keep motion comfortable for visitors who prefer less animation */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition: none !important;
        animation: none !important;
    }

}
/* =========================================================
   SUNNY JOURNAL HEADER DETAILS
   ========================================================= */


/* Logo link: no underline, keeps the image on one line */
.site-logo a {
    display: inline-flex;
    align-items: center;
}


/* Logo image: fixed height, width follows the image proportions */
.site-logo-img {
    display: block;

    width: auto;
    height: 44px;

    transition: transform 0.2s ease;
}


.site-logo a:hover .site-logo-img {
    transform: translateY(-1px);
}


/* Smaller logo on phones */
@media (max-width: 600px) {

    .site-logo-img {
        height: 36px;
    }

}


/* Keeps the language choices together */
.language-switcher {
    display: inline-flex;
    align-items: center;

    gap: 3px;

    margin-left: 8px;
    padding-left: 10px;

    border-left: 1px solid var(--border-color);
}


/* Smaller language buttons */
nav .language-link {
    min-width: 35px;
    padding: 7px 8px;

    color: var(--muted-text-color);

    border: 1px solid transparent;
    border-radius: 999px;

    font-size: 12px;
    font-weight: 800;
    text-align: center;
}


/* Currently selected language */
nav .language-link.active {
    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);

    border-color: rgba(201, 109, 69, 0.24);
}


/* Hover state for languages */
nav .language-link:hover {
    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);

    transform: none;
}


/* Header layout on smaller screens */
@media (max-width: 700px) {

    .language-switcher {
        width: 100%;

        margin-top: 7px;
        margin-left: 0;
        padding-top: 10px;
        padding-left: 0;

        border-top: 1px solid var(--border-color);
        border-left: none;
    }

}
/* =========================================================
   SUNNY JOURNAL HOMEPAGE
   ========================================================= */


/* Accessible label that remains available to screen readers */
.visually-hidden {
    position: absolute;

    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);
    white-space: nowrap;

    border: 0;
}


/* Small journal mark above the hero heading */
.hero-content::before {
    display: block;

    width: 38px;
    height: 4px;

    margin-bottom: 22px;

    content: "";

    background-color: var(--accent-color);

    border-radius: 999px;

    transform: rotate(-2deg);
}


/*
   Clean paper surface beneath the ledger-paper hero.
   All homepage content sections sit inside this surface.
*/
.home-content-surface {
    margin-bottom: 30px;
    padding: 52px 36px 8px;

    background-color: rgba(247, 246, 242, 0.94);

    border: 1px solid rgba(217, 185, 148, 0.58);
    border-radius: 22px 22px 8px 8px;

    box-shadow:
        0 18px 45px rgba(81, 57, 36, 0.08);
}


/* Shared homepage section spacing */
.home-section {
    margin-bottom: 68px;
}


/* Keeps heading and introduction together */
.home-section-heading {
    max-width: 680px;

    margin-bottom: 24px;
}


.home-section-heading h2 {
    margin-top: 0;
    margin-bottom: 0;

    font-size: 32px;
}


/*
   Introductory text now appears directly below its heading
   instead of looking like a separate side annotation.
*/
.home-section-heading .section-intro {
    margin-top: 10px;
    margin-bottom: 0;
}


/* Make cards with arrows leave enough space at the bottom */
.tool-card,
.excel-card {
    position: relative;

    padding-bottom: 54px;
}


/* Small directional arrow inside cards */
.card-arrow {
    position: absolute;

    right: 23px;
    bottom: 21px;

    display: inline-grid;
    place-items: center;

    width: 29px;
    height: 29px;

    color: var(--primary-color);
    background-color: var(--accent-color-soft);

    border-radius: 50%;

    font-size: 17px;
    font-weight: 700;

    transition:
        color 0.18s ease,
        background-color 0.18s ease,
        transform 0.18s ease;
}


/* Move the arrow gently when its card is hovered */
.tool-card:hover .card-arrow,
.excel-card:hover .card-arrow {
    color: #ffffff;
    background-color: var(--primary-color);

    transform: translateX(3px);
}


/* Include the Articles section in smooth anchor positioning */
#featured-guides {
    scroll-margin-top: 30px;
}


/* Homepage surface on smaller screens */
@media (max-width: 700px) {

    .home-content-surface {
        padding: 38px 22px 4px;

        border-radius: 17px 17px 7px 7px;
    }

}


@media (max-width: 600px) {

    .home-content-surface {
        padding: 32px 17px 2px;
    }


    .home-section {
        margin-bottom: 54px;
    }


    .home-section-heading h2 {
        font-size: 28px;
    }

}
/* =========================================================
   HOMEPAGE SPACING REFINEMENT
   ========================================================= */


/* Reduce the space beneath the hero search */
.hero {
    padding-bottom: 70px;
}


/* Bring the homepage content closer to the quick links */
.quick-links {
    margin-top: -48px;
    margin-bottom: 34px;
}


/* Keep the spacing compact on smaller screens */
@media (max-width: 700px) {

    .hero {
        padding-bottom: 55px;
    }


    .quick-links {
        margin-top: -28px;
        margin-bottom: 30px;
    }

}
/* =========================================================
   SUNNY JOURNAL CALCULATOR DIRECTORY
   ========================================================= */


/* Journal accent above the directory heading */
.directory-hero::before {
    display: block;

    width: 38px;
    height: 4px;

    margin-bottom: 22px;

    content: "";

    background-color: var(--accent-color);

    border-radius: 999px;

    transform: rotate(-2deg);
}


/* Keep directory introduction positioned naturally */
.directory-hero .section-intro {
    max-width: 680px;

    margin-top: 0;
    margin-bottom: 0;

    font-size: 17px;
}


/*
   Paper surface containing both filters and cards.
   This matches the homepage content area.
*/
.directory-content-surface {
    margin-bottom: 30px;
    padding: 34px 36px 10px;

    background-color: rgba(247, 246, 242, 0.94);

    border: 1px solid rgba(217, 185, 148, 0.58);
    border-radius: 22px 22px 8px 8px;

    box-shadow:
        0 18px 45px rgba(81, 57, 36, 0.08);
}


/* Filter area within the paper surface */
.directory-content-surface .calculator-filters {
    margin-bottom: 30px;
}


/* Remove the large generic section spacing */
.calculator-directory-section {
    margin-bottom: 0;
}


/* Directory cards have room for the circular arrow */
.calculator-card {
    min-height: 190px;
    padding-bottom: 58px;
}


/* Mobile directory layout */
@media (max-width: 700px) {

    .directory-content-surface {
        padding: 28px 22px 6px;

        border-radius: 17px 17px 7px 7px;
    }

}


@media (max-width: 600px) {

    .directory-content-surface {
        padding: 24px 17px 4px;
    }


    .directory-content-surface .calculator-filters {
        margin-bottom: 24px;
    }


    .filter-row {
        gap: 8px;
    }


    .filter-button {
        flex: 1 1 auto;
    }

}
/* =========================================================
   SUNNY JOURNAL ARTICLE DIRECTORY
   ========================================================= */


/* Shared heading area inside directory paper surfaces */
.directory-section-heading {
    max-width: 680px;

    margin-bottom: 22px;
}


.directory-section-heading h2 {
    margin: 0;
}


/* Spacing between directory sections */
.directory-section {
    margin-bottom: 58px;
}


/* The final section does not need large bottom spacing */
.directory-section-last {
    margin-bottom: 22px;
}


/* Three article topics fill their row evenly */
.article-topic-grid {
    grid-template-columns: repeat(3, 1fr);
}


/* Article cards use a readable two-column layout */
.article-directory-grid {
    grid-template-columns: repeat(2, 1fr);

    gap: 18px;
    margin-bottom: 0;
}


/* Leave room for the circular card arrow */
.article-directory-card {
    position: relative;

    min-height: 180px;
    padding: 25px 25px 56px;
}


/* Tablet and phone layout */
@media (max-width: 700px) {

    .article-topic-grid {
        grid-template-columns: 1fr;
    }


    .article-directory-grid {
        grid-template-columns: 1fr;
    }


    .directory-section {
        margin-bottom: 46px;
    }

}
/* =========================================================
   SUNNY JOURNAL EXCEL DIRECTORY
   ========================================================= */


/* Three-column layout works well for six Excel articles */
.excel-directory-grid {
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
    margin-bottom: 0;
}


/* Consistent card height and room for the arrow */
.excel-directory-card {
    position: relative;

    min-height: 185px;
    padding: 25px 25px 56px;
}


/* Tablet layout */
@media (max-width: 900px) {

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

}


/* Phone layout */
@media (max-width: 600px) {

    .excel-directory-grid {
        grid-template-columns: 1fr;
    }

}
/* =========================================================
   SUNNY JOURNAL TEMPLATE DIRECTORY
   ========================================================= */


/* Four template categories fill the row evenly */
.template-category-grid {
    grid-template-columns: repeat(4, 1fr);
}


/* Three template cards per row on large screens */
.template-directory-grid {
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
    margin-bottom: 0;
}


/*
   Flex layout keeps the call-to-action aligned near
   the bottom even when descriptions have different lengths.
*/
.template-directory-card {
    display: flex;
    flex-direction: column;

    min-height: 255px;
    padding: 25px;
}


/* Move the action to the bottom of each template card */
.template-directory-card .template-view {
    margin-top: auto;
    padding-top: 18px;

    color: var(--primary-color);

    font-weight: 700;
}


/* Free label (Templates page and home page cards) */
.template-card[data-template-type="free"]
.template-label {
    color: var(--primary-color);
    background-color: #dfeaec;
}


/* Premium label (Templates page and home page cards) */
.template-card[data-template-type="premium"]
.template-label {
    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);
}


/* Tablet layout */
@media (max-width: 900px) {

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


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

}


/* Phone layout */
@media (max-width: 600px) {

    .template-category-grid {
        grid-template-columns: 1fr;
    }


    .template-directory-grid {
        grid-template-columns: 1fr;
    }


    .template-directory-card {
        min-height: 220px;
    }

}
/* =========================================================
   SUNNY JOURNAL ABOUT PAGE
   ========================================================= */


/* Centers the About page and gives it breathing room */
.static-page {
    max-width: 900px;

    margin: 0 auto;
    padding: 65px 0 75px;
}


/* Main paper card */
.static-page-card {
    position: relative;

    padding: 52px 56px;

    background-color: rgba(255, 250, 241, 0.96);

    border: 1px solid var(--border-color);
    border-top: 5px solid var(--accent-color);

    border-radius: 20px 20px 20px 7px;

    box-shadow:
        0 18px 45px var(--shadow-color);
}


/* Small journal mark above the page title */
.static-page-card::before {
    display: block;

    width: 38px;
    height: 4px;

    margin-bottom: 22px;

    content: "";

    background-color: var(--accent-color-soft);

    border-radius: 999px;

    transform: rotate(-2deg);
}


/* About page heading */
.static-page-card h1 {
    margin-top: 0;
    margin-bottom: 30px;

    font-size: clamp(42px, 6vw, 62px);
    font-weight: 500;

    line-height: 1.05;
    letter-spacing: -0.035em;
}


/* Keeps longer paragraphs comfortable to read */
.static-page-text {
    max-width: 720px;
}


/* About page paragraphs */
.static-page-text p {
    margin-top: 0;
    margin-bottom: 20px;

    color: #554e46;

    font-size: 17px;
    line-height: 1.78;
}


/* Slightly larger opening sentence */
.static-page-text p:first-child {
    color: var(--text-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
    line-height: 1.55;
}


/* Remove unnecessary space after the final paragraph */
.static-page-text p:last-child {
    margin-bottom: 0;
}


/* Mobile About page */
@media (max-width: 600px) {

    .static-page {
        padding: 44px 0 55px;
    }


    .static-page-card {
        padding: 34px 24px;

        border-radius: 16px 16px 16px 6px;
    }


    .static-page-card h1 {
        margin-bottom: 24px;
    }


    .static-page-text p {
        font-size: 16px;
    }


    .static-page-text p:first-child {
        font-size: 19px;
    }

}
/* =========================================================
   SUNNY JOURNAL CONTACT PAGE
   ========================================================= */


/* Introductory Contact text */
.static-page-intro {
    margin-bottom: 34px;
}


/* Individual Contact sections */
.contact-section {
    margin-top: 36px;
}


/* Separate the email section from the reasons list */
.contact-section + .contact-section {
    margin-top: 42px;
    padding-top: 36px;

    border-top: 1px solid var(--border-color-light);
}


/* Contact section headings */
.contact-section h2 {
    margin-top: 0;
    margin-bottom: 14px;

    font-size: 25px;
}


/* Reasons for contacting the site */
.contact-reasons {
    margin: 0;
    padding-left: 23px;

    color: #554e46;

    line-height: 1.7;
}


/* Warm bullet color */
.contact-reasons li::marker {
    color: var(--accent-color);
}


/* Space between list entries */
.contact-reasons li + li {
    margin-top: 8px;
}


/* Contact email address */
.contact-email {
    margin-top: 20px;
    padding: 20px;

    background-color: #fff1c9;

    border: 1px solid #dfb563;
    border-left: 5px solid var(--accent-color);

    border-radius: 11px 11px 11px 4px;

    font-size: 19px;
    font-weight: 600;

    overflow-wrap: anywhere;
}


/* Mobile Contact page */
@media (max-width: 600px) {

    .contact-section {
        margin-top: 30px;
    }


    .contact-section + .contact-section {
        margin-top: 34px;
        padding-top: 30px;
    }


    .contact-email {
        padding: 17px;
    }

}
/* =========================================================
   SUNNY JOURNAL TERMS PAGE
   ========================================================= */


/* Last-updated information beneath the page title */
.static-page-updated {
    display: inline-block;

    margin-top: -16px;
    margin-bottom: 30px;
    padding: 7px 11px;

    color: var(--muted-text-color);
    background-color: var(--accent-color-soft);

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
}


/* Terms introduction */
.terms-section:first-of-type {
    margin-top: 38px;
}


/* Individual Terms sections */
.terms-section {
    margin-top: 34px;
    padding-top: 30px;

    border-top: 1px solid var(--border-color-light);
}


/* Terms section headings */
.terms-section h2 {
    margin-top: 0;
    margin-bottom: 12px;

    font-size: 24px;
    line-height: 1.25;
}


/* Terms paragraphs */
.terms-section p {
    margin: 0;

    color: #554e46;

    font-size: 16px;
    line-height: 1.75;
}


/* Mobile Terms page */
@media (max-width: 600px) {

    .static-page-updated {
        margin-top: -10px;
        margin-bottom: 26px;
    }


    .terms-section {
        margin-top: 29px;
        padding-top: 26px;
    }


    .terms-section h2 {
        font-size: 22px;
    }

}
/* =========================================================
   SUNNY JOURNAL PRIVACY PAGE
   ========================================================= */


/*
   Privacy uses one large paper card.
   This overrides the earlier simple legal-page container.
*/
.legal-page {
    max-width: 900px;

    margin: 65px auto 75px;
    padding: 52px 56px;

    background-color: rgba(255, 250, 241, 0.96);

    border: 1px solid var(--border-color);
    border-top: 5px solid var(--accent-color);

    border-radius: 20px 20px 20px 7px;

    box-shadow:
        0 18px 45px var(--shadow-color);
}


/* Journal mark above the Privacy heading */
.legal-header::before {
    display: block;

    width: 38px;
    height: 4px;

    margin-bottom: 22px;

    content: "";

    background-color: var(--accent-color-soft);

    border-radius: 999px;

    transform: rotate(-2deg);
}


/* Privacy page title */
.legal-header h1 {
    margin-top: 0;
    margin-bottom: 20px;

    font-size: clamp(42px, 6vw, 62px);
    font-weight: 500;

    line-height: 1.05;
    letter-spacing: -0.035em;
}


/* Last-updated information */
.legal-last-updated {
    display: inline-block;

    margin: 0 0 25px;
    padding: 7px 11px;

    color: var(--muted-text-color);
    background-color: var(--accent-color-soft);

    border-radius: 999px;

    font-size: 13px;
    font-weight: 700;
}


/* Privacy introduction */
.legal-intro {
    max-width: 720px;

    margin: 0 0 32px;

    color: var(--text-color);

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
    line-height: 1.55;
}


/* Privacy content width */
.legal-content {
    max-width: 760px;

    margin-top: 42px;
}


/* Individual Privacy sections */
.legal-section {
    margin: 0;
    padding: 30px 0;

    border-top: 1px solid var(--border-color-light);
}


/* Remove extra space after the final section */
.legal-section:last-child {
    padding-bottom: 0;
}


/* Privacy section headings */
.legal-section h2 {
    margin-top: 0;
    margin-bottom: 12px;

    font-size: 24px;
    line-height: 1.25;
}


/* Privacy section paragraphs */
.legal-section p {
    margin: 0;

    color: #554e46;

    font-size: 16px;
    line-height: 1.75;
}


/* Pre-launch warnings and placeholders */
.legal-placeholder {
    max-width: 760px;

    margin-top: 18px;
    padding: 19px;

    color: #70462f;
    background-color: #fff1c9;

    border: 1px solid #dfb563;
    border-left: 5px solid var(--accent-color);

    border-radius: 11px 11px 11px 4px;

    line-height: 1.55;
}


/* Prevent long placeholder details from overflowing */
.legal-placeholder strong {
    overflow-wrap: anywhere;
}


/* Mobile Privacy page */
@media (max-width: 600px) {

    .legal-page {
        margin-top: 44px;
        margin-bottom: 55px;
        padding: 34px 24px;

        border-radius: 16px 16px 16px 6px;
    }


    .legal-intro {
        font-size: 19px;
    }


    .legal-content {
        margin-top: 34px;
    }


    .legal-section {
        padding: 26px 0;
    }


    .legal-section h2 {
        font-size: 22px;
    }


    .legal-placeholder {
        padding: 17px;
    }

}
/* Center the contents of every calculator result card */
.result-item {
    text-align: center;
}


/* Let the final card fill the row when there is an odd number */
.result-grid > .result-item:last-child:nth-child(odd) {
    grid-column: 1 / -1;
}
/* =====================================================
   LOAN AFFORDABILITY ASSESSMENT
   ===================================================== */

.loan-assessment-level {
    display: inline-block;
    margin-top: 2px;
    padding: 7px 12px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-weight: 800;
    line-height: 1.2;
}


/* Lower financial strain */
.loan-assessment-level.assessment-comfortable {
    color: #23623b;
    background-color: #e6f3e9;
    border-color: #acd0b5;
}


/* Moderate financial strain */
.loan-assessment-level.assessment-tight {
    color: #8a4b08;
    background-color: #fff0d5;
    border-color: #e9bd78;
}


/* High financial strain */
.loan-assessment-level.assessment-high {
    color: #a61b1b;
    background-color: #fde7e5;
    border-color: #e6aaa5;
}


/* Assessment cannot be completed */
.loan-assessment-level.assessment-incomplete {
    color: #5f5a54;
    background-color: #eeeae4;
    border-color: #cbc3b8;
}
/* =========================================================
   LONG-FORM ARTICLE DESIGN
   =========================================================
   
   Creates a comfortable reading column using the site's
   warm Sunny Journal design.
   ========================================================= */


/* Complete article page */
.guide-page {
    width: 100%;
    max-width: 980px;

    margin: 0 auto;
    padding: 70px 0 90px;
}


/* =========================================================
   ARTICLE HEADER
   ========================================================= */

.guide-header {
    max-width: 820px;

    margin: 0 auto 36px;
}


/* Category label */
.guide-category {
    display: inline-block;

    margin: 0 0 16px;
    padding: 7px 12px;

    background-color: #fbe0cc;
    border: 1px solid #efc29f;
    border-radius: 999px;

    color: #a94f2c;

    font-size: 13px;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.08em;
}


/* Main article title */
.guide-header h1 {
    max-width: 800px;

    margin: 0 0 20px;

    color: #2d2a26;

    font-size: clamp(42px, 6vw, 64px);
    line-height: 1.05;
    letter-spacing: -0.025em;
}


/* Article introduction */
.guide-intro {
    max-width: 720px;

    margin: 0 0 16px;

    color: #735b4b;

    font-size: 20px;
    line-height: 1.65;
}


/* Reading time */
.guide-meta {
    margin: 0;

    color: #9a7660;

    font-size: 14px;
    font-weight: 600;
}


/* =========================================================
   MAIN READING CARD
   ========================================================= */

.guide-content {
    width: 100%;
    max-width: 820px;

    margin: 0 auto;
    padding: 46px 54px;

    background-color: rgba(255, 252, 246, 0.96);

    border: 1px solid #e8c6a7;
    border-top: 5px solid #d36f45;
    border-radius: 18px;

    box-shadow:
        0 16px 40px rgba(91, 59, 38, 0.08);
}


/*
Removes the large general section spacing from sections
inside an article.
*/
.guide-content > section {
    margin: 0;
}


/*
Adds a subtle divider between article chapters.
*/
.guide-content > section + section {
    margin-top: 42px;
    padding-top: 38px;

    border-top: 1px solid #ecd8c3;
}


/* Main chapter headings */
.guide-content h2 {
    margin: 0 0 18px;

    color: #2d2a26;

    font-size: 30px;
    line-height: 1.2;
}


/* Subheadings inside a chapter */
.guide-content h3 {
    margin: 30px 0 12px;

    color: #4d3527;

    font-size: 22px;
    line-height: 1.3;
}


/* Main article paragraphs */
.guide-content p {
    margin: 0 0 20px;

    color: #493d35;

    font-size: 17px;
    line-height: 1.82;
}


/*
Removes unnecessary space after the final paragraph
inside each section.
*/
.guide-content section > :last-child {
    margin-bottom: 0;
}


/* Article lists */
.guide-content ul,
.guide-content ol {
    margin: 20px 0 24px;
    padding-left: 26px;

    color: #493d35;

    font-size: 17px;
    line-height: 1.75;
}


/* Space between list items */
.guide-content li + li {
    margin-top: 9px;
}


/* Strong text inside numbered action steps */
.guide-content li strong {
    color: #2d2a26;
}


/* Links inside the article */
.guide-content a {
    color: #a94f2c;

    font-weight: 700;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}


.guide-content a:hover {
    color: #7f351c;
}


/* =========================================================
   PROFESSIONAL-HELP CALLOUT
   ========================================================= */

.guide-callout {
    margin: 42px 0;
    padding: 28px 30px;

    background-color: #fff0dc;

    border: 1px solid #e7b985;
    border-left: 6px solid #d36f45;
    border-radius: 14px;
}


/* Prevent the callout from inheriting excessive spacing */
.guide-callout h2 {
    margin: 0 0 14px;

    font-size: 25px;
}


/* Callout paragraphs */
.guide-callout p {
    color: #5d4637;
}


/* No extra space below the final callout paragraph */
.guide-callout p:last-child {
    margin-bottom: 0;
}


/* =========================================================
   RELATED TOOL
   ========================================================= */

.guide-related {
    width: 100%;
    max-width: 820px;

    margin: 48px auto 0;
    padding: 32px;

    background-color: rgba(255, 252, 246, 0.9);

    border: 1px solid #e8c6a7;
    border-radius: 16px;
}


/* Related-content heading */
.guide-related > h2 {
    margin: 0 0 22px;

    color: #2d2a26;

    font-size: 28px;
}


/* Only one related tool is currently displayed */
.guide-related .tool-grid {
    grid-template-columns: 1fr;

    margin-bottom: 0;
}


/* Related tool card */
.guide-related .tool-card {
    padding: 24px 26px;

    background-color: #f9dcc1;
    border-color: #e6b88e;
}


/* Related tool hover */
.guide-related .tool-card:hover {
    background-color: #f5cfab;
    border-color: #d99b68;
}


/* =========================================================
   SMALLER SCREENS
   ========================================================= */

@media (max-width: 700px) {

    .guide-page {
        padding: 45px 0 65px;
    }


    .guide-header h1 {
        font-size: 42px;
    }


    .guide-intro {
        font-size: 18px;
    }


    .guide-content {
        padding: 32px 24px;

        border-radius: 14px;
    }


    .guide-content h2 {
        font-size: 26px;
    }


    .guide-content p,
    .guide-content ul,
    .guide-content ol {
        font-size: 16px;
    }


    .guide-content > section + section {
        margin-top: 34px;
        padding-top: 32px;
    }


    .guide-callout {
        padding: 24px 22px;
    }


    .guide-related {
        padding: 26px 22px;
    }

}
/* =========================================================
   SOFTER ARTICLE HEADER
   ========================================================= */

.guide-header {
    max-width: 820px;

    margin: 0 auto 36px;
    padding: 36px 42px 38px;

    background:
        linear-gradient(
            135deg,
            rgba(255, 252, 246, 0.98),
            rgba(255, 240, 220, 0.92)
        );

    /* Replaces the hard dark line */
    border: 1px solid #e8c6a7;
    border-radius: 22px;

    box-shadow:
        0 12px 30px rgba(91, 59, 38, 0.07);
}


/* Slightly soften the large title */
.guide-header h1 {
    font-size: clamp(40px, 5.2vw, 58px);
    line-height: 1.08;
}


/* Smaller-screen adjustment */
@media (max-width: 700px) {

    .guide-header {
        padding: 28px 24px 30px;

        border-radius: 16px;
    }


    .guide-header h1 {
        font-size: 40px;
    }

}

/* =========================================================
   EXCEL ARTICLE VISUALS
   =========================================================
   Mini spreadsheets, formula breakdown and helper boxes used
   by the Excel Help articles.
   ========================================================= */


/* Highlight box for key sentences and tips */
.guide-callout {
    margin: 26px 0;
    padding: 18px 22px;

    background-color: var(--accent-color-soft);

    border-left: 5px solid var(--accent-color);
    border-radius: 10px;

    color: var(--text-color);

    font-size: 17px;
    line-height: 1.6;
}


/* Lists with a friendlier look */
.guide-checklist,
.guide-numbered {
    margin: 0 0 22px;
    padding-left: 24px;

    color: #444444;

    font-size: 17px;
    line-height: 1.7;
}

.guide-checklist li,
.guide-numbered li {
    margin-bottom: 8px;
}


/* ---------- Mini spreadsheet ---------- */

.excel-sheet {
    border-collapse: collapse;

    background-color: white;

    border: 1px solid var(--border-color-light);

    font-size: 15px;
}

.excel-sheet th,
.excel-sheet td {
    min-width: 90px;
    padding: 9px 14px;

    text-align: left;

    border: 1px solid #e6e1d8;
}

/* Column letters and row numbers */
.excel-sheet th {
    background-color: #f1ece3;

    color: var(--muted-text-color);

    font-size: 12px;
    font-weight: 600;

    text-align: center;
}

.excel-sheet .sheet-corner {
    min-width: 36px;
}

.excel-sheet .sheet-gap {
    min-width: 24px;

    background-color: transparent;
    border-top-color: transparent;
    border-bottom-color: transparent;
}

.excel-sheet .cell-head {
    background-color: #f7f3ec;

    font-weight: 700;
}

.cell-find {
    background-color: #ffe0b8;

    font-weight: 700;
}

.cell-look {
    background-color: #cfe7ea;

    font-weight: 700;
}

.cell-return,
.cell-result {
    background-color: #d3ecd0;

    font-weight: 700;
}


/* Colour key under a sheet */
.sheet-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.legend-chip {
    padding: 4px 12px;

    border-radius: 999px;

    color: var(--text-color);

    font-size: 14px;
}


/* ---------- Formula display ---------- */

.formula-box {
    margin: 22px 0;
    padding: 18px 22px;

    background-color: var(--paper-color-light);

    border: 1px dashed var(--border-color);
    border-radius: 10px;

    color: var(--text-color);

    font-family: "Consolas", "Courier New", monospace;
    font-size: 19px;

    overflow-x: auto;
}

.formula-part {
    padding: 2px 6px;

    border-radius: 6px;

    font-weight: 700;
}

.part-find {
    background-color: #ffe0b8;
}

.part-look {
    background-color: #cfe7ea;
}

.part-return {
    background-color: #d3ecd0;
}


/* Numbered step cards */
.guide-steps {
    margin: 24px 0;
}

.guide-step {
    display: flex;
    align-items: flex-start;
    gap: 16px;

    margin-bottom: 16px;
    padding: 16px 20px;

    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color-light);
    border-radius: 12px;
}

.guide-step h3 {
    margin: 0 0 4px;

    font-size: 18px;
}

.guide-step p {
    margin: 0;
}

.step-number {
    flex: 0 0 auto;

    width: 34px;
    height: 34px;

    background-color: var(--accent-color);

    border-radius: 50%;

    color: white;

    font-weight: 700;
    line-height: 34px;
    text-align: center;
}

.part-find-text {
    color: #b3641a;
}

.part-look-text {
    color: #2c7482;
}

.part-return-text {
    color: #3c7f36;
}


@media (max-width: 600px) {

    .formula-box {
        font-size: 16px;
    }

    .excel-sheet th,
    .excel-sheet td {
        min-width: 70px;
        padding: 8px 10px;
    }

}


/* ---------- Advanced section marker ---------- */

/* Visually separates optional, harder material from the basics */
.guide-advanced {
    margin-top: 56px;
    padding: 8px 28px 14px;

    background-color: var(--paper-color-light);

    border: 2px dashed var(--border-color);
    border-radius: 16px;
}

.guide-content .guide-advanced h2:first-of-type {
    margin-top: 18px;
}

.advanced-badge {
    display: inline-block;

    margin-top: 18px;
    padding: 4px 14px;

    background-color: var(--primary-color);

    border-radius: 999px;

    color: white;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

@media (max-width: 600px) {

    .guide-advanced {
        padding: 6px 18px 10px;
    }

}


/* =========================================================
   DIRECTORY TOPIC FILTER (ARTICLES AND EXCEL HELP)
   ========================================================= */


/* Hidden cards and messages must stay hidden whatever their
   normal display value is */
.topic-card[hidden],
.topic-empty[hidden],
.topic-heading [hidden] {
    display: none !important;
}


/* Selected topic card */
.category-card.active {
    color: #fffdf8;
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.category-card.active:hover {
    color: #fffdf8;
    background-color: var(--primary-color-dark);
    border-color: var(--primary-color-dark);
}


/* Heading row with the "Show all articles" button */
.topic-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 18px;
}

.topic-heading .filter-button {
    cursor: pointer;
}

.topic-empty {
    margin: 0 0 18px;
}


/* =========================================================
   TEMPLATE TOOLS (BUDGET PLANNER, INVESTMENT TRACKER, ...)
   ========================================================= */


.tool-back {
    margin: 0 0 18px;

    font-size: 14px;
    font-weight: 700;
}

.tool-back a {
    color: var(--accent-color-dark);
}


/* Free / Premium label next to the category */
.tool-tier {
    margin-left: 10px;

    vertical-align: middle;
}

/* Same blue as the Free label on the template cards */
.tool-tier[data-template-type="free"] {
    color: var(--primary-color);
    background-color: #dfeaec;
}


/* The tool itself: wider than a calculator panel */
.tool-app {
    position: relative;

    max-width: 980px;
    margin-bottom: 34px;
    padding: 30px;

    background-color: var(--paper-color);

    border: 1px solid var(--border-color);
    border-top: 5px solid var(--accent-color);
    border-radius: 18px 18px 18px 7px;

    box-shadow:
        0 15px 35px var(--shadow-color);

    overflow: hidden;
}


.tool-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;

    margin-bottom: 8px;
}

.tool-autosave {
    margin: 0;

    color: var(--muted-text-color);

    font-size: 13px;
}


.tool-section {
    margin-top: 30px;
}

.tool-section h2,
.tool-export h2 {
    margin: 0 0 14px;

    font-size: 24px;
}


/* ---------- Tables ---------- */

.tool-table-wrapper {
    overflow-x: auto;

    margin-bottom: 14px;
}

.tool-table {
    width: 100%;

    border-collapse: collapse;
}

.tool-table th {
    padding: 8px 10px;

    color: var(--muted-text-color);

    font-size: 12px;
    font-weight: 800;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.tool-table td {
    padding: 5px 6px;

    vertical-align: middle;
}

.tool-table input,
.tool-table select {
    width: 100%;
    min-width: 90px;

    padding: 10px 11px;

    color: var(--text-color);
    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color);
    border-radius: 8px;

    font-family: inherit;
    font-size: 15px;
}

.tool-table input:focus,
.tool-table select:focus {
    outline: none;

    border-color: var(--accent-color);

    box-shadow:
        0 0 0 3px var(--accent-color-soft);
}

.tool-table td.tool-computed {
    padding: 5px 10px;

    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.tool-table-readonly td {
    padding: 9px 10px;

    border-top: 1px solid var(--border-color-light);
}

.tool-col-action {
    width: 44px;

    text-align: center;
}

.tool-remove {
    width: 32px;
    height: 32px;
    padding: 0;

    color: var(--muted-text-color);
    background: transparent;

    border: 1px solid transparent;
    border-radius: 50%;

    font-size: 20px;
    line-height: 1;

    cursor: pointer;
}

.tool-remove:hover {
    color: #a33f32;

    border-color: #e0b3ab;
}

.tool-negative {
    color: #a33f32;
}


/* ---------- Summary ---------- */

.tool-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 14px;
}

.tool-summary .result-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}


/* ---------- Allocation bars ---------- */

.tool-bars {
    display: grid;
    gap: 10px;
}

.tool-bar-row {
    display: grid;
    grid-template-columns: 150px 1fr 70px;
    align-items: center;
    gap: 12px;

    font-size: 14px;
}

.tool-bar-track {
    height: 14px;

    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color-light);
    border-radius: 999px;

    overflow: hidden;
}

.tool-bar-fill {
    height: 100%;

    background-color: var(--accent-color);

    border-radius: 999px;
}


/* ---------- Investment Tracker Pro additions ---------- */

/* Thin line on an allocation bar showing the target share */
.tool-bar-track {
    position: relative;
}

.tool-bar-target {
    position: absolute;
    top: 0;
    bottom: 0;

    width: 3px;

    background-color: var(--primary-color);

    border-radius: 2px;

    transform: translateX(-50%);
}

.tool-bars-spaced {
    margin-top: 22px;
}

.tool-bars-legend {
    margin-top: 10px;
}

.tool-section-note {
    margin-bottom: 14px;
}

/* Error text inside a table row or under a table */
.tool-row-error,
.tool-table td.tool-row-error {
    color: #a33f32;

    font-size: 13px;
    font-weight: 700;
    white-space: normal;
}

p.tool-row-error {
    margin: 0 0 12px;
}

p.tool-row-error:empty {
    display: none;
}

/* Compact inputs in the transaction ledger */
.tool-ledger input[type="date"] {
    min-width: 150px;
}

/* Room for the holding name */
.tool-ledger td:nth-child(2) select {
    min-width: 170px;
}

.tool-table input.tool-input-number {
    min-width: 80px;
}

.tool-table input.tool-input-short {
    width: 90px;
    min-width: 70px;
}

.tool-table input:disabled {
    opacity: 0.4;

    cursor: not-allowed;
}

/* A labelled field outside a table */
.tool-inline-field {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 14px;

    margin-bottom: 14px;

    font-size: 15px;
    font-weight: 700;
}

.tool-inline-field input {
    width: 180px;
    max-width: 100%;

    padding: 10px 11px;

    color: var(--text-color);
    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color);
    border-radius: 8px;

    font-family: inherit;
    font-size: 15px;
}

.tool-inline-field input:focus {
    outline: none;

    border-color: var(--accent-color);

    box-shadow:
        0 0 0 3px var(--accent-color-soft);
}

/* Insight warnings */
.tool-warnings {
    margin: 16px 0 0;
    padding-left: 20px;

    color: #a33f32;

    font-size: 14px;
    line-height: 1.6;
}

.tool-warnings li.tool-warning-ok {
    color: var(--muted-text-color);

    list-style: none;
    margin-left: -20px;
}


/* ---------- Notes, export, disclaimer ---------- */

.tool-how {
    margin-top: 30px;
    padding: 18px 20px;

    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color-light);
    border-radius: 11px 11px 11px 4px;
}

.tool-how h3 {
    margin: 0 0 8px;

    font-size: 17px;
}

.tool-how p,
.tool-note {
    margin: 0;

    color: var(--muted-text-color);

    font-size: 14px;
    line-height: 1.6;
}

.tool-export {
    margin-top: 34px;
    padding-top: 22px;

    border-top: 1px solid var(--border-color-light);
}

.tool-export .calculator-actions {
    flex-wrap: wrap;
}

.tool-status {
    min-height: 22px;
    margin: 10px 0 0;

    color: var(--muted-text-color);

    font-size: 14px;
}

.tool-status-error {
    color: #a33f32;
}

.tool-disclaimer {
    max-width: 980px;
}

.tool-premium-banner {
    max-width: 980px;
    margin: 0 0 20px;
    padding: 14px 18px;

    color: var(--text-color);
    background-color: var(--accent-color-soft);

    border-left: 5px solid var(--accent-color);
    border-radius: 10px;

    font-size: 15px;
    line-height: 1.6;
}

.tool-premium-banner p {
    margin: 0;
}

/* What the full version adds: a short checklist */
.tool-premium-features {
    display: grid;
    gap: 6px;

    margin: 10px 0 0;
    padding: 0;

    list-style: none;
}

.tool-premium-features:not(:has(li)) {
    display: none;
}

.tool-premium-features li {
    position: relative;

    padding-left: 24px;

    font-weight: 700;
}

.tool-premium-features li::before {
    content: "✓";

    position: absolute;
    left: 0;

    color: var(--primary-color);
}


/* Owner bar: only shown when UTILITYRANCH_OWNER_MODE=1 */
.tool-owner-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;

    max-width: 980px;
    margin: 0 0 16px;
    padding: 10px 14px;

    color: #fff;
    background-color: var(--primary-color-dark);

    border-radius: 10px;

    font-size: 14px;
}

.tool-owner-bar form {
    margin: 0;
}

.tool-owner-bar button {
    padding: 6px 12px;

    color: #fff;
    background: transparent;

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

    font-family: inherit;
    font-size: 13px;
    font-weight: 700;

    cursor: pointer;
}

.tool-owner-bar button.is-active {
    color: var(--primary-color-dark);
    background-color: #fff;
    border-color: #fff;
}

.tool-owner-note {
    margin-left: auto;

    opacity: 0.75;

    font-size: 12px;
}


/* ---------- Premium prompt ---------- */

.tool-dialog {
    width: min(460px, calc(100vw - 32px));
    padding: 28px;

    color: var(--text-color);
    background-color: var(--paper-color);

    border: 1px solid var(--border-color);
    border-top: 5px solid var(--accent-color);
    border-radius: 16px 16px 16px 6px;

    box-shadow:
        0 25px 60px rgba(60, 40, 25, 0.35);
}

.tool-dialog::backdrop {
    background-color: rgba(49, 48, 45, 0.55);
}

.tool-dialog h2 {
    margin: 0 0 12px;

    font-size: 24px;
}

.tool-dialog p {
    line-height: 1.6;
}

.tool-dialog form {
    margin-top: 16px;
}

.tool-dialog button:disabled {
    opacity: 0.6;

    cursor: not-allowed;
}


/* ---------- Premium preview (not paid for) ---------- */

/* A small lock before hidden values */
.tool-masked::before {
    content: "";

    display: inline-block;

    width: 0.85em;
    height: 0.85em;
    margin-right: 0.4em;

    vertical-align: -0.08em;

    background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23405d68' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='11' width='16' height='10' rx='2'/%3E%3Cpath d='M8 11V7a4 4 0 0 1 8 0v4'/%3E%3C/svg%3E");
}

.tool-hidden-note {
    margin: 0 0 14px;

    color: var(--primary-color);

    font-size: 14px;
    font-weight: 700;
}

.tool-hidden-note:empty {
    display: none;
}

/* Output that is hidden or protected in the preview */
.tool-preview .tool-protected {
    -webkit-user-select: none;
    user-select: none;
}

.tool-watermark {
    position: absolute;
    inset: 0;
    z-index: 20;

    overflow: hidden;
    pointer-events: none;
}

.tool-watermark-grid {
    position: absolute;
    top: -40%;
    left: -40%;

    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 40px 18px;

    width: 180%;
    height: 180%;

    transform: rotate(-24deg);
}

.tool-watermark-tile {
    display: flex;
    align-items: center;
    gap: 8px;

    color: rgba(49, 75, 85, 0.36);

    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    white-space: nowrap;

    -webkit-user-select: none;
    user-select: none;
}

.tool-watermark-tile img {
    opacity: 0.55;
}

/* Only shown when a preview is printed */
.tool-print-message {
    display: none;
}

@media print {

    .tool-preview .tool-main {
        display: none;
    }

    .tool-preview .tool-print-message {
        display: block;

        padding: 40px;

        font-size: 20px;
        text-align: center;
    }
}


@media (max-width: 700px) {

    .tool-app {
        padding: 18px;
    }

    .tool-bar-row {
        grid-template-columns: 96px 1fr 56px;
        gap: 8px;
    }

    .tool-watermark-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* Long Swedish and Finnish compound words must not push the
   page wider than a phone screen */
.tool-page .calculator-header h1 {
    font-size: clamp(30px, 8.2vw, 58px);

    overflow-wrap: anywhere;
    hyphens: auto;
}


/* ---------------------------------------------------------
   SITE SEARCH (under the header links, on every page)
   --------------------------------------------------------- */

/* The result list must open above the page content */
header {
    position: relative;
    z-index: 100;
}


.site-search-row {
    display: flex;
    justify-content: flex-end;

    max-width: 1180px;

    margin: 0 auto;
    padding: 0 20px 16px;
}


.site-search {
    position: relative;

    width: min(100%, 520px);
}


.site-search input {
    width: 100%;

    padding: 11px 16px;

    color: var(--text-color);
    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color);
    border-radius: 999px;

    font-family: inherit;
    font-size: 15px;

    transition:
        border-color 0.18s ease,
        box-shadow 0.18s ease;
}


.site-search input::placeholder {
    color: var(--muted-text-color);
}


.site-search input:focus {
    outline: none;

    border-color: var(--accent-color);

    box-shadow:
        0 0 0 3px var(--accent-color-soft);
}


.site-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;

    max-height: min(70vh, 460px);
    overflow-y: auto;

    padding: 6px;

    background-color: var(--paper-color);

    border: 1px solid var(--border-color);
    border-radius: 14px;

    box-shadow:
        0 18px 40px rgba(115, 73, 44, 0.22);
}


.site-search-results[hidden] {
    display: none;
}


.site-search-result {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: baseline;
    gap: 2px 10px;

    padding: 10px 12px;

    color: var(--text-color);
    text-decoration: none;

    border-radius: 9px;
}


.site-search-result.active,
.site-search-result:hover {
    background-color: var(--accent-color-soft);
}


.site-search-type {
    grid-row: 1;

    padding: 2px 9px;

    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);

    border-radius: 999px;

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}


/* Same blue as the Free tag */
.site-search-type-calculator {
    color: var(--primary-color);
    background-color: #dfeaec;
}


.site-search-result.active .site-search-type,
.site-search-result:hover .site-search-type {
    background-color: var(--paper-color-light);
}


.site-search-title {
    grid-row: 1;

    font-weight: 700;
    font-size: 15px;
}


.site-search-description {
    grid-column: 2;

    color: var(--muted-text-color);

    font-size: 13px;
    line-height: 1.45;
}


.site-search-message {
    margin: 0;
    padding: 12px;

    color: var(--muted-text-color);

    font-size: 14px;
}


@media (max-width: 700px) {

    .site-search-row {
        justify-content: stretch;
    }

    .site-search {
        width: 100%;
    }

    /* Type label above the title on narrow screens */
    .site-search-result {
        grid-template-columns: 1fr;
    }

    .site-search-type,
    .site-search-title,
    .site-search-description {
        grid-column: 1;
        grid-row: auto;
    }

    .site-search-type {
        justify-self: start;
    }
}


/* =========================================================
   SAVINGS GOAL TRACKER
   ========================================================= */

/* Goal fields: two columns on wide screens */
.tool-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 18px;
}

.tool-field-wide {
    grid-column: 1 / -1;
}

.sgoal-optional {
    color: var(--muted-text-color);

    font-weight: 400;
}


/* Large progress bar with the percentage beside it */
.sgoal-progress {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 14px;

    margin-bottom: 14px;
}

.sgoal-progress-track {
    height: 22px;

    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color);
    border-radius: 999px;

    overflow: hidden;
}

.sgoal-progress-fill {
    width: 0;
    height: 100%;

    background-color: var(--accent-color);

    border-radius: 999px;

    transition: width 0.3s ease;
}

.sgoal-progress-fill.is-complete {
    background-color: var(--primary-color);
}

.sgoal-progress-percent {
    min-width: 64px;

    font-size: 22px;
    font-variant-numeric: tabular-nums;
    text-align: right;
}


/* Message box for a tool's status and input problems
   (used by the savings goal tracker and debt planner) */
.tool-message {
    display: grid;
    gap: 4px;

    margin: 0 0 16px;
    padding: 12px 16px;

    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color-light);
    border-left: 4px solid var(--accent-color);
    border-radius: 9px;

    line-height: 1.5;
}

/* display: grid would otherwise override the hidden attribute */
.tool-message[hidden] {
    display: none;
}

.tool-message[data-status-type="good"] {
    border-left-color: var(--primary-color);
}

.tool-message[data-status-type="warning"] {
    border-left-color: #a33f32;
}

/* Six result cards: three per row on wide screens */
.tool-summary.tool-summary-three {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}

.tool-message-problem {
    color: #a33f32;

    font-weight: 600;
}


@media (max-width: 700px) {

    .tool-fields {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   DEBT REPAYMENT PLANNER
   ========================================================= */

.debt-extra-field {
    max-width: 420px;
}


/* Snowball / avalanche choice as two cards */
.debt-methods {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;

    margin: 0 0 12px;
    padding: 0;

    border: none;
}

.debt-methods legend {
    margin-bottom: 8px;
    padding: 0;

    font-size: 14px;
    font-weight: 700;
}

.debt-method {
    display: flex;
    align-items: flex-start;
    gap: 12px;

    padding: 14px 16px;

    background-color: var(--paper-color-light);

    border: 1px solid var(--border-color);
    border-radius: 11px;

    cursor: pointer;
}

.debt-method:has(input:checked) {
    border-color: var(--accent-color);

    box-shadow: 0 0 0 3px var(--accent-color-soft);
}

.debt-method input {
    margin-top: 4px;

    accent-color: var(--accent-color);
}

.debt-method-text {
    display: grid;
    gap: 4px;
}

.debt-method-text span {
    color: var(--muted-text-color);

    font-size: 14px;
    line-height: 1.45;
}

.debt-article-link a,
.tool-how-links a {
    color: var(--accent-color);
    font-weight: 600;
}

.tool-how p.tool-how-links {
    margin-top: 10px;
}


/* The chosen method in the comparison table */
.tool-table tr.debt-chosen td {
    font-weight: 700;
}

.debt-compare-line {
    display: block;
}


@media (max-width: 700px) {

    .debt-methods {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   CASH FLOW PLANNERS (FREE AND PRO)
   ========================================================= */

/* Months that end below zero (or below the buffer in Pro) */
.tool-table tr.cash-row-negative td {
    background-color: #fbe9e5;
}

.tool-table tr.cash-row-buffer td {
    background-color: #fdf3e1;
}

/* Pro: three settings fields side by side */
.tool-fields.tool-fields-three {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.cashpro-checkbox {
    display: inline-flex;
    align-items: center;
    gap: 10px;

    margin-bottom: 10px;

    font-weight: 700;

    cursor: pointer;
}

.cashpro-checkbox input {
    width: 18px;
    height: 18px;

    accent-color: var(--accent-color);
}

/* VAT fields, columns and the VAT table disappear when VAT is off */
.cashpro-vat-off .cashpro-vat-col {
    display: none;
}

/* The item tables have many columns: keep number fields narrow */
.cashpro-items input.cashpro-number {
    min-width: 72px;
}

.cashpro-items select {
    min-width: 132px;
}

/* Room between the VAT explanation and the VAT fields */
.cashpro-vat-col.tool-fields {
    margin-top: 16px;
}

.cashpro-items td:first-child input {
    min-width: 150px;
}

@media (max-width: 700px) {

    .tool-fields.tool-fields-three {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   TOOLS SECTION (BROWSER UTILITIES)
   =========================================================
   Internally called "utilities" (see utility_data.py).
   Cards reuse the template card look so the section feels
   like the rest of the site.
   ========================================================= */


/* ---------- Directory ---------- */

/* Short privacy promise under the page intro */
.utility-privacy-points {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.utility-privacy-points li {
    padding: 6px 12px 6px 30px;

    position: relative;

    color: var(--primary-color-dark);
    background-color: #dfeaec;

    border-radius: 999px;

    font-size: 14px;
    font-weight: 600;
}

/* Small check mark drawn with CSS, so no icon file is needed */
.utility-privacy-points li::before {
    content: "";

    position: absolute;
    top: 50%;
    left: 13px;

    width: 5px;
    height: 10px;

    border-right: 2px solid var(--primary-color);
    border-bottom: 2px solid var(--primary-color);

    transform: translateY(-65%) rotate(45deg);
}


/* Category description under its heading */
.directory-section-heading p {
    margin: 6px 0 0;

    color: var(--muted-text-color);

    line-height: 1.6;
}


/* Three tool cards per row on large screens */
.utility-directory-grid {
    grid-template-columns: repeat(3, 1fr);

    gap: 18px;
    margin-bottom: 0;
}


/* Keeps "Open tool" at the bottom of each card */
.utility-card {
    display: flex;
    flex-direction: column;

    min-height: 210px;
    padding: 25px;
}

.utility-card .template-label {
    align-self: flex-start;
}

.utility-card .template-view {
    margin-top: auto;
    padding-top: 14px;

    color: var(--primary-color);

    font-weight: 700;
}


/* "New" badge */
.utility-card[data-utility-status="available"] .utility-label {
    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);
}


/* Coming-soon cards: visible but clearly not clickable */
.utility-card[data-utility-status="coming_soon"] {
    border-style: dashed;

    box-shadow: none;

    opacity: 0.82;
}

.utility-card[data-utility-status="coming_soon"]:hover {
    background-color: var(--paper-color);
    border-color: var(--border-color-light);

    transform: none;
}

.utility-card[data-utility-status="coming_soon"] .utility-label {
    color: var(--muted-text-color);
    background-color: #efe7dc;
}


/* Category without any tools yet */
.utility-empty {
    margin: 0;
    padding: 18px 20px;

    color: var(--muted-text-color);

    border: 1px dashed var(--border-color);
    border-radius: 11px;
}


@media (max-width: 900px) {

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

@media (max-width: 600px) {

    .utility-directory-grid {
        grid-template-columns: 1fr;
    }

    .utility-card {
        min-height: 0;
    }
}


/* ---------- Utility page ---------- */

/* "New" badge next to the category name */
.utility-page-badge {
    margin: 0 0 0 10px;

    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);

    vertical-align: middle;
}


/* Privacy promise above the tool */
.utility-privacy-box {
    max-width: 980px;
    margin-bottom: 22px;
}

.utility-privacy-box h2 {
    margin: 0 0 10px;

    font-size: 18px;
}


/* The tool area: narrower than the planners */
.utility-app {
    max-width: 820px;
}

/* Sections inside the tool do not need the large page spacing */
.utility-app .tool-section {
    margin-bottom: 0;
}

.utility-app .tool-section:first-of-type {
    margin-top: 26px;
}


/* ---------- Drag-and-drop area ---------- */

.utility-dropzone {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    padding: 34px 20px;

    text-align: center;

    background-color: var(--paper-color-light);

    border: 2px dashed var(--border-color);
    border-radius: 16px 16px 16px 6px;

    transition:
        background-color 0.15s ease,
        border-color 0.15s ease;
}

.utility-dropzone.is-dragging {
    background-color: #fdeedd;
    border-color: var(--accent-color);
}

.utility-dropzone.is-disabled {
    opacity: 0.6;
}

.utility-drop-title {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 21px;
    font-weight: 700;
}

.utility-drop-or {
    margin: 0;

    color: var(--muted-text-color);

    font-size: 14px;
}

/* The real file input stays out of sight; the button opens it */
.utility-file-input {
    position: absolute;

    width: 1px;
    height: 1px;

    opacity: 0;
    pointer-events: none;
}


/* ---------- Selected files ---------- */

.utility-files-heading {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 16px;
}

.utility-files-heading h2 {
    margin-bottom: 10px;
}

.utility-files .tool-note {
    margin-top: 4px;
}

.utility-files-total {
    margin: 0 0 10px;

    color: var(--muted-text-color);

    font-size: 14px;
}

.utility-file-list {
    display: grid;
    gap: 8px;

    margin: 0 0 12px;
    padding: 0;

    list-style: none;
}

.utility-file {
    display: flex;
    align-items: center;
    gap: 14px;

    padding: 10px 12px;

    background-color: white;

    border: 1px solid var(--border-color-light);
    border-radius: 11px 11px 11px 4px;
}

.utility-file[draggable="true"] {
    cursor: grab;
}

.utility-file.is-dragged {
    opacity: 0.5;
}

/* Small file-type mark ("PDF") or image preview */
.utility-file-icon,
.utility-file-thumb {
    flex: 0 0 46px;

    width: 46px;
    height: 46px;

    border-radius: 7px;
}

.utility-file-icon {
    display: grid;
    place-items: center;

    color: var(--accent-color-dark);
    background-color: var(--accent-color-soft);

    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
}

.utility-file-thumb {
    object-fit: cover;

    border: 1px solid var(--border-color-light);
}

.utility-file-info {
    display: grid;
    gap: 2px;

    min-width: 0;
    flex: 1 1 auto;
}

/* Long file names are cut with "..." instead of breaking the row */
.utility-file-name {
    overflow: hidden;

    white-space: nowrap;
    text-overflow: ellipsis;
}

.utility-file-details {
    color: var(--muted-text-color);

    font-size: 13px;
}

.utility-file-controls {
    display: flex;
    gap: 6px;

    flex: 0 0 auto;
}

/* Square buttons that are easy to hit on a phone */
.utility-icon-button {
    display: inline-grid;
    place-items: center;

    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;

    color: var(--primary-color-dark);
    background-color: var(--paper-color);

    border: 1px solid var(--border-color);
    border-radius: 9px;

    font-size: 18px;
    line-height: 1;

    cursor: pointer;
}

.utility-icon-button:hover:not(:disabled) {
    background-color: var(--accent-color-soft);
}

.utility-icon-button:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 1px;
}

.utility-icon-button:disabled {
    opacity: 0.35;

    cursor: default;
}

.utility-remove {
    color: #a33f32;
}


/* ---------- Options ---------- */

.utility-options {
    display: grid;
    gap: 18px;

    margin-top: 26px;
}

.utility-options fieldset {
    margin: 0;
    padding: 0;

    border: 0;
}

.utility-options legend {
    margin-bottom: 8px;
    padding: 0;

    font-weight: 700;
}

.utility-choices {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* Radio buttons shown as selectable chips */
.utility-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 9px 14px;

    background-color: white;

    border: 1px solid var(--border-color-light);
    border-radius: 999px;

    cursor: pointer;
}

.utility-choice:has(input:checked) {
    background-color: #dfeaec;
    border-color: var(--primary-color);
}

.utility-choice input {
    margin: 0;

    accent-color: var(--primary-color);
}

.utility-choices-stacked {
    flex-direction: column;
    align-items: flex-start;
}

.utility-choices-stacked .utility-choice {
    border-radius: 11px;
}

.utility-options .calculator-field {
    margin: 0;
}


/* ---------- Actions, status and results ---------- */

.utility-actions {
    flex-wrap: wrap;

    margin-top: 26px;
}

.utility-message {
    margin-top: 18px;
}

.utility-message p {
    margin: 0;
}

/* Small spinner while files are read or created */
.utility-message.utility-busy p::before {
    content: "";

    display: inline-block;

    width: 13px;
    height: 13px;
    margin-right: 9px;

    vertical-align: -2px;

    border: 2px solid var(--border-color);
    border-top-color: var(--accent-color);
    border-radius: 50%;

    animation: utility-spin 0.8s linear infinite;
}

@keyframes utility-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (prefers-reduced-motion: reduce) {

    .utility-message.utility-busy p::before {
        animation: none;
    }
}

.utility-download-list {
    display: grid;
    gap: 8px;

    margin: 0;
    padding: 0;

    list-style: none;
}

.utility-download {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px 16px;

    padding: 12px 14px;

    background-color: white;

    border: 1px solid var(--border-color-light);
    border-left: 4px solid var(--primary-color);
    border-radius: 11px 11px 11px 4px;
}

.utility-download-name {
    display: grid;
    gap: 2px;

    min-width: 0;
}

.utility-download-name strong {
    overflow-wrap: anywhere;
}

.utility-download-name span {
    color: var(--muted-text-color);

    font-size: 13px;
}

/* A link that looks like the other buttons */
.utility-download-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    padding: 13px 24px;

    border-radius: 10px;

    font-size: 16px;
    text-decoration: none;
}

.utility-download-link:hover {
    color: #fffdf8;
    background-color: var(--primary-color-dark);
}

.utility-download-link:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}


/* "How to use" steps */
.utility-how {
    max-width: 820px;
}

.utility-how h2 {
    margin: 0 0 10px;

    font-size: 19px;
}

.utility-how ol {
    margin: 0;
    padding-left: 22px;

    color: var(--muted-text-color);

    font-size: 15px;
    line-height: 1.65;
}

.utility-how li + li {
    margin-top: 6px;
}


/* ---------- Phones ---------- */

@media (max-width: 600px) {

    .utility-dropzone {
        padding: 24px 14px;
    }

    /* Icon and name side by side, buttons on their own line */
    .utility-file {
        display: grid;
        grid-template-columns: 46px minmax(0, 1fr);
        gap: 10px 12px;
    }

    .utility-file-controls {
        grid-column: 1 / -1;
        justify-content: flex-end;
    }

    .utility-actions .primary-button,
    .utility-actions .secondary-button,
    .utility-download-link {
        flex: 1 1 100%;

        text-align: center;
    }
}

/* Space between the directory intro and its privacy points */
.directory-hero .utility-privacy-points {
    margin-top: 16px;
}

/* Home page: room between the tool cards and "View all tools" */
.home-section .utility-directory-grid {
    margin-bottom: 24px;
}


/* ---------- Unit converters ---------- */

/* Value | From | ⇄ | To on one line on wide screens */
.unit-converter-fields {
    display: grid;
    grid-template-columns: minmax(120px, 1fr) minmax(0, 1.6fr) auto minmax(0, 1.6fr);
    align-items: end;
    gap: 14px;
}

.unit-converter-fields .calculator-field {
    margin: 0;
}

.unit-converter-fields select {
    width: 100%;
}

/* Lines the swap button up with the inputs */
.unit-converter-swap {
    width: 46px;
    height: 46px;
    margin-bottom: 2px;

    font-size: 20px;
}


/* The answer: large and easy to read */
.unit-converter-result {
    margin-top: 22px;
    padding: 20px 22px;

    background-color: white;

    border: 1px solid var(--border-color-light);
    border-left: 4px solid var(--primary-color);
    border-radius: 12px 12px 12px 4px;
}

.unit-converter-answer {
    margin: 0;

    font-family:
        Georgia,
        "Times New Roman",
        serif;

    font-size: 28px;
    font-weight: 700;
    line-height: 1.3;

    overflow-wrap: anywhere;
}

/* "Enter a value" hint instead of an answer */
.unit-converter-answer.is-empty {
    color: var(--muted-text-color);

    font-family: inherit;
    font-size: 16px;
    font-weight: 400;
}

.unit-converter-formula {
    margin: 6px 0 0;

    color: var(--muted-text-color);

    font-size: 14px;
}

.unit-converter-formula:empty {
    display: none;
}

.unit-converter .tool-message {
    margin-top: 14px;
}

.unit-converter .tool-message:not([hidden]) {
    color: #a33f32;

    font-weight: 600;
}


/* Common conversion buttons share the chip look */
.unit-converter-pair {
    margin: 0;
    padding: 9px 14px;

    color: var(--text-color);

    font-size: 15px;
}

.unit-converter-pair.is-active {
    background-color: #dfeaec;
    border-color: var(--primary-color);

    font-weight: 700;
}

.unit-converter-pair:focus-visible {
    outline: 3px solid var(--accent-color);
    outline-offset: 2px;
}


/* All-units table: unit names in normal text, not table-heading capitals */
.unit-converter-table th[scope="row"] {
    color: var(--text-color);

    font-size: 15px;
    font-weight: 400;
    letter-spacing: normal;
    text-align: left;
    text-transform: none;
}

.unit-converter-table td {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.unit-converter-table tr.is-target th,
.unit-converter-table tr.is-target td {
    background-color: #eef4f5;

    font-weight: 700;
}


@media (max-width: 600px) {

    /* One field per line so long unit names fit */
    .unit-converter-fields {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    .unit-converter-swap {
        justify-self: center;

        margin: 0;

        transform: rotate(90deg);
    }

    .unit-converter-answer {
        font-size: 23px;
    }
}

.unit-converter-table thead th:last-child {
    text-align: right;
}


/* =========================================================
   PAGE NOT FOUND (404)
   ========================================================= */

/* Home button plus text links, wrapping on small screens */
.not-found-links {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 26px;

    margin-top: 30px;
}

.not-found-links .section-link {
    margin-top: 0;
}