/* ==================================
   GLOBAL DESIGN SYSTEM
================================== */

:root {
    --color-background: #FAF7F5;
    --color-white: #FFFFFF;

    --color-plum: #38223F;
    --color-rose: #C65D7B;

    --color-text: #64535C;
    --color-border: #EADDE2;
}


/* ==================================
   RESET
================================== */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;

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

    font-family: "Segoe UI", Arial, sans-serif;

    line-height: 1.6;
}

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

a:focus-visible {
    outline: 2px solid var(--color-rose);
    outline-offset: 4px;
}


/* ==================================
   SHARED CONTAINER
================================== */

.site-container {
    width: min(1120px, calc(100% - 32px));

    margin-inline: auto;
}


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

.site-header {
    background: var(--color-white);
    border-bottom: 1px solid var(--color-border);
    box-shadow: 0 4px 24px #38223f04;
}

.header-inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px 16px;
    padding-block: 18px 12px;
}

.site-logo {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: fit-content;
    min-width: 0;
    color: var(--color-plum);
}

.site-logo:hover, .footer-brand:hover {
    text-decoration: none;
}

.brand-mark {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-border);
    border-radius: 13px;
    background: var(--color-background);
    color: #91405a;
    font-size: 25px;
    line-height: 1;
}

.brand-copy {
    display: grid;
    gap: 3px;
}

.brand-name {
    font-size: clamp(1.05rem, 2.5vw, 1.3rem);
    font-weight: 750;
    letter-spacing: -.035em;
    line-height: 1.2;
}

.brand-caption {
    display: none;
    color: var(--color-text);
    font-size: .67rem;
    line-height: 1.4;
}

.site-nav {
    grid-column: 1 / -1;
    grid-row: 2;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--color-border);
}

.site-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 10px 12px;
    border-radius: 9px;
    color: var(--color-text);
    font-size: .82rem;
    font-weight: 600;
}

.site-nav a:hover, .site-nav a[aria-current=page] {
    background: var(--color-background);
    color: var(--color-plum);
    text-decoration: none;
}

.header-contact {
    grid-column: 2;
    grid-row: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 44px;
    min-width: 44px;
    padding: 11px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    color: var(--color-plum);
    font-size: .82rem;
    font-weight: 650;
}

.header-contact:hover {
    background: var(--color-background);
    border-color: var(--color-rose);
    text-decoration: none;
}

.header-contact span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
}


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

.site-footer {
    background: var(--color-plum);
    color: var(--color-border);
    border-top: 3px solid var(--color-rose);
    font-size: .85rem;
    line-height: 1.8;
}

.site-footer p {
    margin: 0;
}

.footer-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
    padding-block: 48px;
}

.footer-grid > div { min-width: 0; }
.footer-brand { display: inline-flex; align-items: center; gap: 12px; color: var(--color-white); font-size: 1.4rem; font-weight: 750; letter-spacing: -.025em; line-height: 1.25; }
.footer-brand .brand-mark { background: #ffffff08; border-color: #ffffff24; color: var(--color-border); }
.footer-intro p { max-width: 365px; margin-top: 14px; }
.footer-tagline { color: var(--color-white); font-weight: 600; }
.footer-intro .footer-disclaimer { margin-top: 20px; font-size: .75rem; }
.footer-heading { margin: 0 0 18px; color: var(--color-border); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; line-height: 1.5; }
.footer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 24px; }
.footer-links a { display: flex; align-items: center; min-height: 40px; padding-block: 6px; width: fit-content; text-underline-offset: 4px; }
.site-footer a:hover { color: var(--color-white); }
.site-footer a:focus-visible { outline: 2px solid var(--color-white); outline-offset: 5px; }
.footer-email { display: flex; align-items: center; gap: 12px; width: fit-content; max-width: 100%; margin: 20px 0; color: var(--color-white); text-underline-offset: 4px; }
.footer-email > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.footer-contact-icon { display: inline-grid; place-items: center; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid #ffffff30; border-radius: 10px; }
.footer-contact-link { display: inline-flex; align-items: center; justify-content: center; gap: 22px; min-height: 44px; padding: 9px 20px; border: 1px solid var(--color-rose); border-radius: 99px; color: var(--color-white); font-weight: 600; }
.footer-contact-link:hover { background: #ffffff08; text-decoration: none; }
.footer-bottom { border-top: 1px solid #ffffff24; }
.footer-bottom-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; font-size: .75rem; }
.back-to-top { display: inline-grid; place-items: center; flex-shrink: 0; width: 44px; height: 44px; border: 1px solid var(--color-rose); border-radius: 10px; background: var(--color-rose); color: var(--color-white); }
.back-to-top:hover { background: #91405a; text-decoration: none; }

/* ==================================
   SHARED NAVIGATION BREAKPOINTS
================================== */

@media (min-width: 540px) {
    .brand-caption { display: block; }
    .header-contact { padding-inline: 16px; }
    .header-contact span { position: static; width: auto; height: auto; overflow: visible; clip-path: none; }
}
@media (min-width: 640px) {
    .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; padding-block: 56px; }
    .footer-intro { grid-column: 1 / -1; }
    .footer-intro p { max-width: 520px; }
}
@media (min-width: 1120px) {
    .header-inner { grid-template-columns: minmax(0, 1fr) auto auto; gap: 16px; min-height: 90px; padding-block: 18px; }
    .site-nav { grid-column: 2; grid-row: 1; border: 0; padding: 0; }
    .header-contact { grid-column: 3; }
}
@media (min-width: 1000px) {
    .footer-grid { grid-template-columns: 1.2fr 1fr .9fr; gap: 48px; padding-block: 72px 64px; }
    .footer-intro { grid-column: auto; }
}
h1,h2,h3{color:var(--color-plum)}
body{overflow-wrap:break-word}main{min-height:65vh}img{max-width:100%}button,input,select,textarea{font:inherit}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #91405a;outline-offset:3px}a:hover{text-decoration:underline}a[aria-current=page]{color:var(--color-plum);font-weight:700}.text-link,.prose a{color:#91405a;text-decoration:underline;text-underline-offset:3px}.button{display:inline-flex;align-items:center;justify-content:center;gap:12px;padding:15px 22px;min-height:48px;background:var(--color-plum);color:white;border:0;border-radius:10px;font-weight:650;cursor:pointer}.button:hover{background:#613b6b;text-decoration:none}.card{background:white;border:1px solid var(--color-border);border-radius:20px;padding:30px;box-shadow:0 10px 35px #38223f06}.page-intro{max-width:760px;margin:42px auto 36px;text-align:center}.page-intro h1{font-size:clamp(2rem,5vw,3.2rem);letter-spacing:-.025em;line-height:1.15;margin:18px 0}.page-intro>p{font-size:1.08rem}.eyebrow{color:#91405a;font-size:.75rem;font-weight:700;letter-spacing:.1em}.prose{max-width:760px;margin:48px auto 0;line-height:1.85}.prose h2{margin-top:32px;font-size:1.6rem;line-height:1.3}.prose h3{line-height:1.4}.prose li{margin:8px 0}.prose img{height:auto}.prose pre{overflow:auto}.field label{display:block;color:var(--color-plum);font-weight:600;margin-bottom:8px}.field input{display:block;width:100%;min-width:0;min-height:52px;padding:12px;background:#fffafb;border:1px solid var(--color-border);border-radius:10px;color:var(--color-plum)}.field-error,.error-summary{color:#9e2319}.error-summary{border:1px solid #c8746c;border-radius:12px;background:#fff6f5;padding:15px 22px}.error-summary p{font-weight:700;margin-top:0}.breadcrumbs{display:flex;flex-wrap:wrap;gap:10px;padding-top:24px;font-size:.85rem}.breadcrumbs a{text-decoration:underline}.skip-link{position:absolute;top:-100px;left:16px;padding:12px;background:var(--color-plum);color:white;z-index:10}.skip-link:focus{top:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.muted{font-size:.9rem}@media(max-width:540px){.card{padding:22px}.page-intro{margin-top:28px}.breadcrumbs{font-size:.8rem}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}
.related-guides{padding-bottom:64px}.related-guide-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}.related-guide-list h3{margin-top:0;font-size:1.1rem}.error-page{max-width:760px;padding-block:70px}.error-page h1{font-size:clamp(2rem,5vw,3rem)}@media(max-width:760px){.related-guide-list{grid-template-columns:1fr}}

.brand-logo-image{display:block;width:270px;max-width:100%;height:58px;object-fit:cover}.site-logo .brand-copy{max-width:100%;gap:0}.site-logo .brand-caption{text-align:center}.footer-brand:has(.brand-logo-image){max-width:100%;padding:8px 12px;background:var(--color-background);border:1px solid var(--color-border);border-radius:14px}.footer-brand .brand-logo-image{width:250px;height:56px}.site-logo:focus-visible,.footer-brand:focus-visible{outline:3px solid var(--color-rose);outline-offset:5px;border-radius:8px}@media(max-width:539px){.site-logo .brand-logo-image{width:230px;height:52px}}

/* Keep long results readable and preserve keyboard outlines on calculator fields. */
#main-content{overflow-wrap:anywhere}
#main-content :is(input,select,textarea):focus-visible{outline:3px solid #91405a;outline-offset:3px}