/* ── CSS VARIABLES ───────────────────────────────────────────────────── */
:root {
    --plum:       #713357;
    --coral:      #fb7b44;
    --magenta:    #d20d89;
    --sage:       #7a9461;
    --dark-gray:  #444444;
    --warm-peach: #fbefe1;
    --white:      #ffffff;
    --border:     #eeeeee;
}

/* ── RESET ───────────────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
    font-family: 'Nunito', sans-serif;
    color: var(--dark-gray);
    font-size: 16px;
    line-height: 1.6;
    background-color: var(--white);
}

/* ── SKIP LINK ───────────────────────────────────────────────────────── */
.skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 10000;
    padding: 12px 24px;
    background: var(--plum);
    color: var(--white);
    font-weight: 700;
    font-size: 14px;
    border-radius: 0 0 8px 8px;
    text-decoration: none;
}
.skip-link:focus {
    top: 0;
}

/* ── TOP BANNER ──────────────────────────────────────────────────────── */
.banner, .top-banner {
    background-color: var(--plum);
    color: var(--white);
    text-align: center;
    padding: 11px 20px;
    font-size: 14px;
    font-weight: 600;
}
.banner a, .top-banner a {
    color: var(--white);
    text-decoration: underline;
    font-weight: 600;
}
.banner a:hover, .top-banner a:hover { opacity: 0.85; }

/* ── CORAL STRIPE ────────────────────────────────────────────────────── */
.brand-stripe, .coral-stripe {
    height: 3px;
    background-color: var(--coral);
}

/* ── NAVIGATION ──────────────────────────────────────────────────────── */
nav {
    background: var(--white);
    padding: 14px 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: sticky;
    top: 0;
    z-index: 100;
    border-bottom: 1px solid var(--border);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

/* Logo variants */
.logo-link, .nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}
.logo-icon { height: 46px; width: auto; flex-shrink: 0; }
.logo-text, .nav-logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
}
.logo-name, .nav-logo-text .logo-line1 {
    font-size: 17px;
    font-weight: 700;
    color: var(--plum);
    letter-spacing: 0.01em;
}
.logo-sub, .nav-logo-text .logo-line2 {
    font-size: 13px;
    font-weight: 400;
    color: var(--plum);
    opacity: 0.75;
    letter-spacing: 0.01em;
}

/* Nav links */
.nav-links {
    display: flex;
    gap: 28px;
    list-style: none;
}
.nav-links a {
    color: var(--plum);
    text-decoration: none;
    font-size: 15px;
    font-weight: 600;
    transition: opacity 0.2s, color 0.2s;
}
.nav-links a:hover { opacity: 0.65; }
.nav-links a.active { color: var(--coral); }

/* Hamburger */
.hamburger {
    display: none;
    flex-direction: column;
    gap: 5px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    color: var(--plum);
    font-size: 24px;
}
.hamburger span {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--plum);
    transition: 0.3s;
}
.hamburger.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.is-active span:nth-child(2) { opacity: 0; }
.hamburger.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.nav-open {
    display: flex !important;
    flex-direction: column;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    padding: 16px 24px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn {
    display: inline-block;
    padding: 12px 28px;
    border-radius: 6px;
    font-family: 'Nunito', sans-serif;
    font-weight: 600;
    font-size: 15px;
    cursor: pointer;
    text-decoration: none;
    text-align: center;
    transition: opacity 0.2s, filter 0.2s;
    width: 210px;
}
.btn:hover { opacity: 0.88; }
.btn-primary       { background-color: var(--plum);    color: var(--white);  border: 2px solid var(--plum); }
.btn-secondary     { background-color: transparent;    color: var(--plum);   border: 2px solid var(--plum); }
.btn-coral         { background-color: var(--coral);   color: var(--white);  border: 2px solid var(--coral); }
.btn-coral-outline { background-color: transparent;    color: var(--coral);  border: 2px solid var(--coral); }
.btn-magenta       { background-color: var(--magenta); color: var(--white);  border: 2px solid var(--magenta); }
.btn-magenta-outline { background-color: transparent;  color: var(--magenta); border: 2px solid var(--magenta); }
.btn-white         { background-color: var(--white);   color: var(--plum);   border: 2px solid var(--white); }
.btn-outline       { background-color: transparent;    color: var(--plum);   border: 2px solid var(--plum); }
.btn-ghost         { background-color: transparent;    color: var(--white);  border: 2px solid var(--white); }
.btn-lg            { padding: 18px 36px; width: 240px; font-size: 16px; }
.btn-sage          { background-color: var(--sage);    color: var(--white);  border: 2px solid var(--sage); }
.btn-sage-outline  { background-color: transparent;    color: var(--sage);   border: 2px solid var(--sage); }
.btn-primary:hover, .btn-secondary:hover { filter: brightness(1.08); }

/* ── SECTION SHARED ──────────────────────────────────────────────────── */
.section-label {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--plum);
    margin-bottom: 12px;
    display: block;
}
.section-title {
    font-size: 36px;
    font-weight: 700;
    color: var(--plum);
    line-height: 1.2;
    margin-bottom: 16px;
}
.section-intro {
    font-size: 17px;
    color: var(--dark-gray);
    line-height: 1.75;
    margin-bottom: 48px;
}

/* ── CARD SYSTEM ─────────────────────────────────────────────────────── */
.card, .feature-item, .why-card, .level-card, .major-card, .partner-category,
.pricing-card, .cat-card, .persona-card, .mvs-card, .connect-card, .pathway-card {
    border-top: 4px solid;
    border-radius: 8px;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    background: var(--white);
}
.c-plum    { border-top-color: var(--plum); }
.c-coral   { border-top-color: var(--coral); }
.c-magenta { border-top-color: var(--magenta); }
.c-sage    { border-top-color: var(--sage); }
.c-peach   { border-top-color: var(--plum); background: var(--warm-peach); }

/* ── CTA STRIP ───────────────────────────────────────────────────────── */
.cta-strip {
    background: var(--plum);
    padding: 36px 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 32px;
    flex-wrap: wrap;
}
.cta-strip p {
    font-size: 20px;
    font-weight: 700;
    color: var(--white);
    line-height: 1.3;
    flex: 1;
}
.cta-strip p span { color: var(--coral); }
.cta-strip--tall { padding: 80px 60px; }
.cta-strip--centered { flex-direction: column; text-align: center; gap: 28px; }
.cta-strip--centered p { flex: 0 1 auto; font-size: 36px; line-height: 1.18; max-width: 760px; }
.cta-strip--centered .accent-coral { display: block; }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
footer {
    background: var(--plum);
    color: var(--white);
    padding: 60px 0 40px;
    border-top: 3px solid var(--coral);
}
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 36px;
    max-width: 1100px;
    margin: 0 auto 40px;
    padding: 0 40px;
}
.footer-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.footer-brand-text, .footer-brand-name {
    font-size: 18px;
    font-weight: 700;
    color: var(--white);
}
.footer-brand-sub { font-weight: 400; font-size: 18px; color: var(--white); }
.footer-column p, .footer-column address { font-size: 14px; line-height: 1.9; font-style: normal; }
.footer-column h4 {
    font-size: 14px;
    font-weight: 700;
    margin-bottom: 12px;
}
.footer-col ul, .footer-column ul { list-style: none; }
.footer-col ul li, .footer-column ul li { margin-bottom: 8px; }
.footer-column a {
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
}
.footer-column a:hover { opacity: 0.7; }
.footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 20px;
    max-width: 1100px;
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}
.footer-bottom p { font-size: 13px; color: rgba(255,255,255,0.6); text-align: center; }

/* ── LEGAL PAGES ─────────────────────────────────────────────────────── */
.page-hero {
    background: var(--warm-peach);
    padding: 64px 60px 48px;
}
.page-hero .section-label { color: var(--plum); margin-bottom: 14px; }
.page-hero h1 {
    font-size: 36px;
    font-weight: 700;
    color: var(--plum);
    line-height: 1.2;
    margin-bottom: 12px;
}
.page-hero .last-updated { font-size: 14px; color: var(--dark-gray); opacity: 0.65; }
.content-wrap {
    max-width: 780px;
    margin: 0 auto;
    padding: 64px 60px 80px;
}
.content-wrap h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--plum);
    margin-top: 44px;
    margin-bottom: 14px;
    line-height: 1.3;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.content-wrap h2:first-child { margin-top: 0; border-top: none; padding-top: 0; }
.content-wrap h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--plum);
    margin-top: 28px;
    margin-bottom: 10px;
}
.content-wrap p {
    font-size: 16px;
    color: var(--dark-gray);
    line-height: 1.85;
    margin-bottom: 16px;
}
.content-wrap p:last-child { margin-bottom: 0; }
.content-wrap ul { margin: 12px 0 16px 24px; }
.content-wrap ul li {
    font-size: 16px;
    color: var(--dark-gray);
    line-height: 1.85;
    margin-bottom: 8px;
}
.content-wrap a { color: var(--plum); font-weight: 600; text-decoration: underline; }
.content-wrap a:hover { color: var(--coral); }
.distinction-box {
    background: var(--warm-peach);
    border-left: 4px solid var(--plum);
    border-radius: 0 8px 8px 0;
    padding: 20px 24px;
    margin: 28px 0;
}
.distinction-box p {
    font-size: 15px;
    font-weight: 600;
    color: var(--plum);
    line-height: 1.7;
    margin-bottom: 0;
}
.contact-block {
    background: var(--warm-peach);
    border-radius: 8px;
    padding: 28px 32px;
    margin-top: 28px;
}
.contact-block p { font-size: 15px; line-height: 1.85; margin-bottom: 0; }

/* ── PAGE LAYOUT ─────────────────────────────────────────────────────── */
.page-section { padding: 80px 60px; }
.page-section--white { background-color: var(--white); }
.page-section--peach { background-color: var(--warm-peach); }
.page-section--plum { background-color: var(--plum); color: var(--white); }
.page-section--plum .section-title { color: var(--white); }
.page-section--plum .body-text--lg { color: rgba(255,255,255,0.88); }
.page-section--centered { text-align: center; }
.page-section--narrow { padding: 80px 40px; }
.page-section--flush { padding: 0; margin: 0; overflow: hidden; }
.page-section--tall { padding-top: 100px; }
.container { max-width: 1100px; margin: 0 auto; }
.container--narrow { max-width: 720px; margin: 0 auto; text-align: center; }
.mb-32 { margin-bottom: 32px; }
.mb-40 { margin-bottom: 40px; }
.mb-60 { margin-bottom: 60px; }

/* ── GRID LAYOUTS ───────────────────────────────────────────────────── */
.grid-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; }
.grid-2col-wide { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.grid-2col-lg { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.grid-3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-3col-sm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.grid-3col-lg { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.grid-4col { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.grid-4col-sm { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.align-stretch { align-items: stretch; }
.flex-row { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.flex-row--center { justify-content: center; }

/* ── TEXT ACCENTS ────────────────────────────────────────────────────── */
.accent-coral { color: var(--coral); display: block; }
.accent-magenta { color: var(--magenta); display: block; }
.accent-sage { color: var(--sage); display: block; }
.text-coral { color: var(--coral); }
.text-magenta { color: var(--magenta); }
.text-sage { color: var(--sage); }

/* ── SECTION MODIFIERS ──────────────────────────────────────────────── */
.section-label--coral { color: var(--coral); }
.section-label--magenta { color: var(--magenta); }
.section-label--sage { color: var(--sage); }
.section-intro--centered { max-width: 640px; margin: 0 auto 40px; }
.subsection-heading {
    font-size: 13px;
    font-weight: 700;
    color: var(--plum);
    text-transform: uppercase;
    letter-spacing: 2px;
    text-align: center;
    margin-bottom: 48px;
}

/* ── HERO PATTERNS ──────────────────────────────────────────────────── */
.hero-home {
    background-color: var(--warm-peach);
    padding: 96px 40px 80px;
}
.hero-home-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
}
.hero-home .hero-subtext { line-height: 1.65; max-width: 480px; margin-bottom: 36px; }
.hero-partners {
    background-color: var(--plum);
    padding: 80px 60px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: center;
    min-height: 420px;
}
.hero-partners .hero-subtext { max-width: 540px; }
.hero-give {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
    border-radius: 12px;
    overflow: hidden;
    margin: 0 60px 0;
}
.hero-give-image {
    background-color: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px;
}
.hero-give-content {
    background-color: var(--warm-peach);
    padding: 80px 60px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.hero-sponsorships {
    background-color: var(--warm-peach);
    padding: 96px 60px 80px;
    text-align: center;
}
.hero-sponsorships .hero-subtext {
    font-size: 19px;
    line-height: 1.75;
    max-width: 640px;
    margin: 0 auto 40px;
}
.hero-heading { font-weight: 700; margin-bottom: 24px; }
.hero-heading--md { font-size: 46px; line-height: 1.18; }
.hero-heading--lg { font-size: 48px; line-height: 1.15; margin-bottom: 20px; }
.hero-heading--xl { font-size: 54px; line-height: 1.15; max-width: 820px; margin-left: auto; margin-right: auto; }
.hero-heading--plum { color: var(--plum); }
.hero-heading--white { color: var(--white); }
.hero-subtext { font-size: 18px; color: var(--dark-gray); line-height: 1.7; margin-bottom: 32px; }
.hero-subtext--light { color: rgba(255,255,255,0.88); }
.hero-image-frame { border-radius: 8px; overflow: hidden; }
.hero-image-frame--md { height: 320px; }
.hero-image-frame--lg { height: 420px; border-radius: 12px; }
.hero-image-frame--square { width: 100%; aspect-ratio: 1 / 1; border-radius: 8px; }
.hero-image-frame picture { display: block; width: 100%; height: 100%; }
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo { padding: 0; margin: 0; overflow: hidden; }
.hero-photo--sm { height: 380px; }
.hero-photo--lg { height: 420px; }
.hero-photo picture { display: block; width: 100%; height: 100%; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ── BODY TEXT ───────────────────────────────────────────────────────── */
.body-text { font-size: 16px; color: var(--dark-gray); line-height: 1.8; margin-bottom: 18px; }
.body-text:last-child { margin-bottom: 0; }
.body-text--lg { font-size: 18px; line-height: 1.75; margin-bottom: 18px; }
.body-text--lg:last-child { margin-bottom: 0; }
.body-text--light { color: rgba(255,255,255,0.88); }
.body-text--story { font-size: 16px; color: var(--dark-gray); line-height: 1.85; margin-bottom: 18px; }
.body-text--story:last-child { margin-bottom: 0; }

/* ── EYEBROW TEXT ───────────────────────────────────────────────────── */
.eyebrow, .mvs-eyebrow, .connect-eyebrow, .persona-eyebrow {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: block;
}
.eyebrow { margin-bottom: 10px; }
.mvs-eyebrow { margin-bottom: 12px; }
.connect-eyebrow { margin-bottom: 10px; }
.persona-eyebrow { margin-bottom: 10px; }
.eyebrow--coral, .connect-eyebrow.c-coral { color: var(--coral); }
.eyebrow--plum, .connect-eyebrow.c-plum { color: var(--plum); }
.eyebrow--magenta, .connect-eyebrow.c-magenta { color: var(--magenta); }
.eyebrow--sage, .connect-eyebrow.c-sage { color: var(--sage); }

/* ── CARD COMPONENTS ────────────────────────────────────────────────── */
.card-icon { width: 40px; height: 40px; margin-bottom: 16px; }
.card-icon--sm { width: 36px; height: 36px; margin-bottom: 14px; }
.card-icon--lg { width: 48px; height: 48px; margin-bottom: 16px; }
.card-title { font-size: 18px; font-weight: 700; color: var(--plum); margin-bottom: 10px; }
.card-title--sm { font-size: 16px; font-weight: 700; color: var(--plum); margin-bottom: 8px; }
.card-title--lg { font-size: 20px; font-weight: 700; color: var(--plum); margin-bottom: 12px; }
.card-title--xl { font-size: 22px; font-weight: 700; color: var(--plum); margin-bottom: 12px; }
.card-title--19 { font-size: 19px; font-weight: 700; color: var(--plum); margin-bottom: 8px; }
.card-desc { font-size: 14px; color: var(--dark-gray); line-height: 1.65; }
.card-desc--md { font-size: 15px; line-height: 1.7; }
.card-desc--lg { font-size: 15px; line-height: 1.75; }
.card-desc--xl { font-size: 16px; line-height: 1.85; }
.card-desc--flex { flex: 1; margin-bottom: 24px; }
.card-desc--flex-18 { flex: 1; margin-bottom: 18px; }
.card-meta { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eeeeee; font-size: 13px; color: #888; }
.card-meta strong { color: var(--dark-gray); }
.card-link { text-decoration: none; font-size: 15px; font-weight: 600; margin-top: auto; }
.card-link::after { content: ''; position: absolute; inset: 0; }
.card-link--plum { color: var(--plum); }
.card-link--coral { color: var(--coral); }
.card-link--magenta { color: var(--magenta); }

/* ── CARD TYPE STYLES ───────────────────────────────────────────────── */
.feature-item { padding: 28px 24px; }
.why-card { padding: 32px 28px; }
.why-card.tile-plum    { border-top-color: var(--plum); }
.why-card.tile-magenta { border-top-color: var(--magenta); }
.why-card.tile-sage    { border-top-color: var(--sage); }
.why-stat { font-size: 46px; font-weight: 700; color: var(--coral); line-height: 1; margin-bottom: 8px; }
.why-card.tile-plum    .why-stat { color: var(--plum); }
.why-card.tile-magenta .why-stat { color: var(--magenta); }
.why-card.tile-sage    .why-stat { color: var(--sage); }
.why-label { font-size: 13px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--plum); margin-bottom: 14px; }
.why-desc { font-size: 15px; line-height: 1.7; color: var(--dark-gray); }
.why-source { font-size: 11px; color: #888; margin-top: 14px; font-style: italic; line-height: 1.5; }
/* Why-card CTA. The cards are equal-height grid items, so the card is a flex column and the
   button is pushed to the bottom, keeping the three buttons on one line across the row. */
.why-card { display: flex; flex-direction: column; }
.why-card .why-desc { flex-grow: 1; }
.why-card .why-cta { margin-top: 18px; align-self: flex-start; width: auto; padding: 12px 22px; font-size: 14px; }
.cat-card { padding: 32px 28px; display: flex; flex-direction: column; }
.persona-card { padding: 36px 28px; }
.persona-card.c-coral   { border-top-color: var(--coral); }
.persona-card.c-plum    { border-top-color: var(--plum); }
.persona-card.c-magenta { border-top-color: var(--magenta); }
.persona-card.c-sage    { border-top-color: var(--sage); }
.persona-card.c-coral   .persona-eyebrow { color: var(--coral); }
.persona-card.c-plum    .persona-eyebrow { color: var(--plum); }
.persona-card.c-magenta .persona-eyebrow { color: var(--magenta); }
.persona-card.c-sage    .persona-eyebrow { color: var(--sage); }
.mvs-card { padding: 36px 28px; }
.connect-card { padding: 32px 24px; display: flex; flex-direction: column; }
.level-card { padding: 32px 24px; display: flex; flex-direction: column; position: relative; transition: transform 0.15s, box-shadow 0.15s; }
.major-card { padding: 36px 32px; display: flex; flex-direction: column; }
.pricing-card { padding: 36px 32px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); }
.pathway-card { padding: 36px; display: flex; flex-direction: column; position: relative; cursor: pointer; transition: transform 0.2s, box-shadow 0.2s; }
.pathway-card:hover { transform: translateY(-2px); box-shadow: 0 6px 24px rgba(0,0,0,0.1); }
.pathway-card h3 { font-size: 20px; font-weight: 700; color: var(--plum); margin-bottom: 16px; }
.pathway-card p { font-size: 15px; font-weight: 400; line-height: 1.65; color: var(--dark-gray); margin-bottom: 24px; flex-grow: 1; }

/* Org-type cards */
.org-card { border-top-width: 4px; border-top-style: solid; border-radius: 8px; padding: 32px 28px; background: var(--white); box-shadow: 0 2px 12px rgba(0,0,0,0.07); }
.org-card.c-coral   { border-top-color: var(--coral); }
.org-card.c-plum    { border-top-color: var(--plum); }
.org-card.c-magenta { border-top-color: var(--magenta); }
.org-list { list-style: none; padding: 0; }
.org-list li { font-size: 14px; color: var(--dark-gray); padding: 4px 0 4px 18px; position: relative; }
.org-list li::before { content: ''; position: absolute; left: 0; top: 13px; width: 7px; height: 2px; border-radius: 9999px; }
.c-coral .org-list li::before { background: var(--coral); }
.c-plum .org-list li::before { background: var(--plum); }
.c-magenta .org-list li::before { background: var(--magenta); }

/* ── CALLOUT BOXES ──────────────────────────────────────────────────── */
.callout-plum { background: var(--plum); color: var(--white); border-radius: 8px; padding: 48px 56px; }
.callout-plum--grid { display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.callout-plum h2, .callout-plum h3 { color: var(--white); font-weight: 700; margin-bottom: 16px; }
.callout-plum h2 { font-size: 32px; }
.callout-plum h3 { font-size: 28px; }
.callout-plum p { font-size: 16px; color: rgba(255,255,255,0.88); line-height: 1.75; }
.callout-plum p.callout-plum--lg { font-size: 17px; }
.btn--sm { width: auto; min-width: 0; padding: 10px 20px; font-size: 14px; }
.callout-plum-full { background: var(--plum); border-radius: 8px; padding: 56px 64px; }
.callout-plum-full .section-label { margin-bottom: 16px; }
.callout-plum-full h2 { font-size: 36px; font-weight: 700; color: var(--white); margin-bottom: 20px; line-height: 1.2; }
.callout-plum-full p { font-size: 16px; color: rgba(255,255,255,0.88); line-height: 1.8; margin-bottom: 18px; }
.callout-plum-full .section-label--coral { color: var(--coral); }
.callout-plum-full .section-label--magenta { color: var(--magenta); }
.callout-plum-full .section-label--sage { color: var(--sage); }
.callout-plum-full p:last-child { margin-bottom: 0; }
.callout-peach { background: var(--warm-peach); border-radius: 8px; padding: 24px 32px; display: flex; align-items: center; gap: 18px; }
.callout-peach-grid { background: var(--warm-peach); border-radius: 8px; padding: 40px 48px; margin-top: 48px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.callout-peach-grid h3 { font-size: 22px; font-weight: 700; color: var(--plum); margin-bottom: 12px; }
.callout-peach-grid p { font-size: 15px; color: var(--dark-gray); line-height: 1.75; }
.info-strip { background: var(--plum); border-radius: 8px; padding: 28px 36px; display: flex; align-items: center; gap: 24px; }
.info-strip p { font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.7; }
.info-strip strong { color: var(--white); }

/* ── MARKET CALLOUT ─────────────────────────────────────────────────── */
.market-callout { background: var(--plum); border-radius: 8px; padding: 44px 40px; }
.market-callout h3 { font-size: 32px; font-weight: 700; color: var(--white); margin-bottom: 24px; line-height: 1.2; }
.market-callout p { font-size: 17px; color: rgba(255,255,255,0.88); line-height: 1.8; margin-bottom: 20px; }
.market-callout p:last-child { margin-bottom: 0; }

/* ── STATS STRIP ────────────────────────────────────────────────────── */
.stats-strip { background: var(--plum); display: grid; grid-template-columns: repeat(4, 1fr); }
.stat-item { padding: 44px 28px; text-align: center; }
.stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,0.15); }
.stat-number { font-size: 52px; font-weight: 700; color: var(--coral); line-height: 1; margin-bottom: 10px; }
.stat-label { font-size: 14px; font-weight: 700; color: var(--white); line-height: 1.4; margin-bottom: 4px; }
.stat-source { font-size: 11px; color: rgba(255,255,255,0.5); font-weight: 400; }

/* ── STEPS ──────────────────────────────────────────────────────────── */
.step { position: relative; }
.step-number { font-size: 48px; font-weight: 700; color: var(--coral); line-height: 1; margin-bottom: 16px; }
.step-title { font-size: 17px; font-weight: 700; color: var(--plum); margin-bottom: 10px; }
.step-desc { font-size: 15px; color: var(--dark-gray); line-height: 1.65; }

/* ── PRICING TABLE ──────────────────────────────────────────────────── */
.pricing-label { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 8px; }
.pricing-label--plum { color: var(--plum); }
.pricing-label--coral { color: var(--coral); }
.pricing-title { font-size: 22px; font-weight: 700; color: var(--plum); margin-bottom: 8px; }
.pricing-desc { font-size: 15px; color: var(--dark-gray); line-height: 1.7; margin-bottom: 24px; }
.pricing-row { display: flex; justify-content: space-between; align-items: baseline; padding: 10px 0; gap: 16px; }
.pricing-row--border { border-bottom: 1px solid var(--border); }
.pricing-row-label { font-size: 14px; color: var(--dark-gray); line-height: 1.5; flex: 1; }
.pricing-row-value { font-size: 15px; font-weight: 700; color: var(--plum); white-space: nowrap; }
.pricing-row-value--coral { color: var(--coral); }
.pricing-note { font-size: 13px; color: #888; line-height: 1.6; margin-top: 20px; font-style: italic; }

/* ── RECOGNITION ITEMS ──────────────────────────────────────────────── */
.recognition-item { display: flex; gap: 18px; align-items: flex-start; }
.recognition-icon { width: 36px; height: 36px; flex-shrink: 0; margin-top: 2px; }
.recognition-item h4 { font-size: 16px; font-weight: 700; color: var(--plum); margin-bottom: 6px; }
.recognition-item p { font-size: 14px; color: var(--dark-gray); line-height: 1.7; }

/* ── CSR SECTION ────────────────────────────────────────────────────── */
.csr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
.csr-facts { display: flex; flex-direction: column; gap: 20px; }
.csr-fact { background: rgba(255,255,255,0.1); border-radius: 8px; padding: 20px 24px; border-left: 3px solid var(--magenta); }
.csr-fact p { font-size: 15px; color: rgba(255,255,255,0.9); line-height: 1.65; }
.csr-fact strong { color: var(--white); }

/* ── GIVING LEVELS ──────────────────────────────────────────────────── */
.level-amount { font-size: 38px; font-weight: 700; line-height: 1; margin-bottom: 18px; }
.level-amount--plum { color: var(--plum); }
.level-amount--coral { color: var(--coral); }
.level-amount--magenta { color: var(--magenta); }
.level-impact { font-size: 14px; color: var(--dark-gray); line-height: 1.65; flex: 1; margin-bottom: 24px; }
.level-cta { display: block; width: 100%; padding: 11px; text-align: center; border-radius: 6px; font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; transition: opacity 0.2s; }
.level-cta--outline-plum { border: 2px solid var(--plum); color: var(--plum); background: transparent; }
.level-cta--filled-coral { background: var(--coral); border: 2px solid var(--coral); color: var(--white); }
.level-cta--outline-magenta { border: 2px solid var(--magenta); color: var(--magenta); background: transparent; }
.level-badge { position: absolute; top: -13px; left: 24px; background: var(--coral); color: var(--white); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; padding: 3px 12px; border-radius: 20px; }

/* ── MAJOR GIFTS ────────────────────────────────────────────────────── */
.major-icon { width: 40px; height: 40px; margin-bottom: 16px; }
.major-title { font-size: 22px; font-weight: 700; color: var(--plum); margin-bottom: 12px; }
.major-desc { font-size: 15px; color: var(--dark-gray); line-height: 1.75; margin-bottom: 28px; flex: 1; }
.major-cta-btn { display: inline-block; padding: 12px 28px; border-radius: 6px; font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 15px; text-decoration: none; transition: opacity 0.2s; align-self: flex-start; background: transparent; }
.major-cta-btn--plum { border: 2px solid var(--plum); color: var(--plum); }
.major-cta-btn--magenta { border: 2px solid var(--magenta); color: var(--magenta); }

/* ── CTA STRIP VARIANT ──────────────────────────────────────────────── */
.cta-strip--coral { background: var(--coral); }

/* ── CONTACT PAGE ───────────────────────────────────────────────────── */
.top-split { display: grid; grid-template-columns: 2fr 1fr; }
.split-story { background: var(--warm-peach); padding: 80px 64px; display: flex; flex-direction: column; justify-content: center; }
.split-contact { background: var(--plum); padding: 48px 40px; display: flex; flex-direction: column; justify-content: flex-start; }
.split-contact h2 { font-size: 22px; font-weight: 700; color: var(--white); margin-bottom: 28px; line-height: 1.25; }
.contact-info-block { margin-bottom: 16px; }
.contact-heading { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--coral); margin-bottom: 7px; }
.contact-text { font-size: 14px; color: rgba(255,255,255,0.88); line-height: 1.8; }
.contact-text a { color: rgba(255,255,255,0.88); text-decoration: none; }
.contact-subtext { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.6; margin-top: 4px; }
.ein-note { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 6px; margin-bottom: 16px; line-height: 1.6; }
.contact-divider { border: none; border-top: 1px solid rgba(255,255,255,0.15); margin: 16px 0; }
.social-row { display: flex; gap: 16px; margin-top: 6px; flex-wrap: wrap; }
.social-link { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.75); text-decoration: none; }

/* ── CONNECT CARDS ──────────────────────────────────────────────────── */
.connect-title { font-size: 18px; font-weight: 700; color: var(--plum); margin-bottom: 12px; line-height: 1.3; }
.connect-desc { font-size: 14px; color: var(--dark-gray); line-height: 1.75; flex: 1; margin-bottom: 24px; }
.connect-btn { display: inline-block; padding: 11px 24px; border-radius: 4px; font-family: 'Nunito', sans-serif; font-weight: 600; font-size: 14px; text-decoration: none; transition: opacity 0.2s; }
.connect-btn--plum { background: var(--plum); color: var(--white); border: 2px solid var(--plum); }
.connect-btn--coral { background: var(--coral); color: var(--white); border: 2px solid var(--coral); }
.connect-btn--magenta-outline { background: transparent; color: var(--magenta); border: 2px solid var(--magenta); }
.connect-btn--sage { background: var(--sage); color: var(--white); border: 2px solid var(--sage); }

/* ── HUBSPOT NEWSLETTER FORM ─────────────────────────────────────────── */
/* Styles the form HubSpot renders into .hs-newsletter (see partials/newsletter-form.html).
   HubSpot owns the markup; these rules map its classes onto the brand. */
.hs-newsletter { font-family: 'Nunito', sans-serif; text-align: left; }
.hs-newsletter .hs-form-field { margin-bottom: 12px; }
.hs-newsletter .hs-form-field > label { display: block; font-size: 13px; font-weight: 700; color: var(--plum); margin-bottom: 4px; }
.hs-newsletter .hs-form-field > label .hs-form-required { color: var(--coral); margin-left: 2px; }
.hs-newsletter .hs-input { width: 100%; box-sizing: border-box; padding: 11px 14px; border: 2px solid var(--plum); border-radius: 6px; font-family: 'Nunito', sans-serif; font-size: 15px; color: var(--dark-gray); background: var(--white); transition: border-color 0.2s; }
.hs-newsletter .hs-input::placeholder { color: #aaa; }
.hs-newsletter .hs-input:focus { outline: none; border-color: var(--coral); }
.hs-newsletter .hs-button { display: block; width: 100%; margin-top: 6px; padding: 12px 24px; background: var(--plum); color: var(--white); border: 2px solid var(--plum); border-radius: 6px; font-family: 'Nunito', sans-serif; font-size: 15px; font-weight: 700; cursor: pointer; transition: filter 0.2s; }
.hs-newsletter .hs-button:hover { filter: brightness(1.1); }
.hs-newsletter .hs-error-msgs { list-style: none; padding: 0; margin: 4px 0 0; }
.hs-newsletter .hs-error-msg, .hs-newsletter .hs-error-msgs label { color: var(--coral); font-size: 13px; }
.hs-newsletter .submitted-message, .hs-newsletter .hs-main-font-element { color: var(--plum); font-weight: 600; font-size: 15px; }

/* ── MVS CARDS ──────────────────────────────────────────────────────── */
.mvs-icon { width: 40px; height: 40px; margin-bottom: 16px; }
.mvs-card p { font-size: 16px; color: var(--dark-gray); line-height: 1.85; }

/* ── NEWSLETTER CARD (homepage) ─────────────────────────────────────── */
.newsletter-card { background-color: var(--white); max-width: 680px; margin: 0 auto; border-radius: 12px; padding: 40px; text-align: center; box-shadow: 0 2px 16px rgba(0,0,0,0.07); }
.newsletter-card h3 { font-size: 22px; font-weight: 700; color: var(--plum); margin-bottom: 12px; }
.newsletter-card p { font-size: 15px; color: var(--dark-gray); margin-bottom: 24px; line-height: 1.6; }
.newsletter-card--with-video { max-width: 960px; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; text-align: left; }
.newsletter-card__video { aspect-ratio: 16 / 9; width: 100%; border-radius: 8px; overflow: hidden; background: #000; }
.newsletter-card__video iframe { width: 100%; height: 100%; border: 0; display: block; }
.newsletter-card__content h3 { margin-top: 0; }

/* ── PULLQUOTE ──────────────────────────────────────────────────────── */
.audience-pullquote { text-align: center; padding: 0 80px 52px; }
.audience-pullquote .quote-mark { font-size: 80px; font-weight: 700; color: var(--magenta); line-height: 0.6; margin-bottom: 16px; display: block; font-family: Georgia, serif; }
.audience-pullquote p { font-size: 22px; font-weight: 700; color: var(--plum); line-height: 1.5; font-style: italic; max-width: 820px; margin: 0 auto; }

/* ── PROBLEM GRID (homepage) ────────────────────────────────────────── */
.problem-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 42% 58%; gap: 60px; align-items: center; }

/* ── CAT CARD DETAILS ───────────────────────────────────────────────── */
.cat-fit-label { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 6px; }
.cat-brands { font-size: 13px; color: #888; line-height: 1.6; }

/* ── LAYOUT GRIDS (page-specific) ──────────────────────────────────── */
.market-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: center; }
.persona-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.cat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.recognition-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }

/* ── TIERS CALLOUT ─────────────────────────────────────────────────── */
.tiers-callout { background: var(--warm-peach); border-radius: 8px; padding: 40px 48px; margin-top: 48px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.tiers-callout h3 { font-size: 22px; font-weight: 700; color: var(--plum); margin-bottom: 12px; }
.tiers-callout p { font-size: 15px; color: var(--dark-gray); line-height: 1.75; }

/* ── UTILITY CLASSES ───────────────────────────────────────────────── */
.mt-48 { margin-top: 48px; }
.text-left { text-align: left; }
.flex-shrink-0 { flex-shrink: 0; }
.text-plum { color: var(--plum); }
a.text-plum { font-weight: 600; text-decoration: underline; }

/* ── INQUIRY FORMS ─────────────────────────────────────────────────── */
.inquiry-form-wrapper { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; max-width: 1080px; margin: 0 auto; align-items: start; }
.inquiry-form-text { padding-top: 8px; }
.inquiry-form { background: var(--white); border-radius: 12px; padding: 36px; box-shadow: 0 2px 16px rgba(0,0,0,0.07); }
.form-field { margin-bottom: 16px; }
.form-field label { display: block; font-family: 'Nunito', sans-serif; font-size: 14px; font-weight: 700; color: var(--plum); margin-bottom: 6px; }
.form-field input { width: 100%; padding: 11px 14px; border: 2px solid #e0e0e0; border-radius: 6px; font-family: 'Nunito', sans-serif; font-size: 15px; color: var(--dark-gray); background: #fafafa; transition: border-color 0.2s; box-sizing: border-box; }
.form-field input:focus { outline: none; border-color: var(--plum); background: var(--white); }
.form-optional { font-weight: 400; color: #999; font-size: 13px; }

/* ── SHARE PAGE ──────────────────────────────────────────────────────── */
/* Hero */
.hero-share { background-color: var(--warm-peach); padding: 96px 40px 88px; }
.hero-share-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 1fr; gap: 60px; align-items: center; }
.hero-share .hero-heading--xl { max-width: none; margin-left: 0; margin-right: 0; }
.hero-share .hero-subtext { max-width: 540px; }
.hero-substat-row { display: flex; gap: 32px; margin-bottom: 32px; padding: 18px 0; border-top: 1px solid rgba(113,51,87,0.18); border-bottom: 1px solid rgba(113,51,87,0.18); max-width: 540px; }
.hero-substat-row--no-rules { border-top: none; border-bottom: none; padding: 0; }
.hero-substat { display: flex; flex-direction: column; flex: 1; }
.hero-substat-num { font-size: 30px; font-weight: 700; color: var(--plum); line-height: 1.05; }
.hero-substat-num .alt { color: var(--coral); }
.hero-substat-num .alt-sage { color: var(--sage); }
.hero-substat-num .unit { font-size: 14px; font-weight: 600; color: var(--dark-gray); }
.hero-substat-label { font-size: 13px; color: var(--dark-gray); font-weight: 600; line-height: 1.4; margin-top: 6px; }
.hero-share-image { height: 520px; border-radius: 12px; overflow: hidden; box-shadow: 0 20px 50px rgba(113,51,87,0.18); }
.hero-share-image picture { display: block; width: 100%; height: 100%; }
.hero-share-image img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Two Reasons dual cards */
.reasons-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; align-items: stretch; }
.reason-card { padding: 48px 38px 40px; border-radius: 14px; background: var(--white); box-shadow: 0 4px 24px rgba(0,0,0,0.07); display: flex; flex-direction: column; border-top: 5px solid var(--plum); position: relative; }
.reason-card.coral { border-top-color: var(--coral); }
.reason-card .reason-tag { position: absolute; top: -14px; left: 36px; background: var(--plum); color: var(--white); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; padding: 6px 14px; border-radius: 99px; }
.reason-card.coral .reason-tag { background: var(--coral); }
.reason-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plum); margin-bottom: 10px; }
.reason-card.coral .reason-eyebrow { color: var(--coral); }
.reason-eyebrow.magenta { color: var(--magenta); }
.reason-title { font-size: 30px; font-weight: 700; color: var(--plum); margin-bottom: 16px; line-height: 1.18; letter-spacing: -0.01em; }
.reason-title--income { font-size: 25px; letter-spacing: -0.015em; }
.reason-body { font-size: 16px; line-height: 1.7; color: var(--dark-gray); margin-bottom: 22px; }
.reason-list { list-style: none; margin-bottom: 24px; padding: 0; }
.reason-list li { font-size: 15px; color: var(--dark-gray); padding: 9px 0 9px 22px; position: relative; line-height: 1.55; }
.reason-list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 10px; height: 2px; border-radius: 99px; background: var(--plum); }
.reason-card.coral .reason-list li::before { background: var(--coral); }
.reason-list--magenta-bullets li::before { background: var(--magenta); }
.reason-list--sage-bullets li::before { background: var(--sage); }
.reason-list strong { color: var(--plum); }
.reason-card.coral .reason-list strong { color: var(--coral); }
.reason-list .magenta-bold { color: var(--magenta); font-weight: 700; }
.reason-list .sage-bold { color: var(--sage); font-weight: 700; }
.reason-eyebrow.sage { color: var(--sage); }
.reason-card .btn { margin-top: auto; align-self: flex-start; }
.reason-callout { background: var(--warm-peach); border-left: 4px solid var(--plum); border-radius: 0 8px 8px 0; padding: 18px 22px; margin: 6px 0 22px; font-size: 14px; color: var(--plum); line-height: 1.65; font-weight: 600; }
.reason-callout.magenta { border-left-color: var(--magenta); }
.reason-callout.sage { border-left-color: var(--sage); }
.reason-card.coral .reason-callout { border-left-color: var(--coral); }
.reason-exchange-intro { font-size: 14px; color: var(--dark-gray); font-weight: 600; margin-bottom: 10px; }
.exchange-list { background: var(--warm-peach); border-radius: 8px; padding: 18px 20px; margin-bottom: 22px; }
.exchange-list-title { font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--coral); margin-bottom: 10px; }
.exchange-list ul { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 18px; list-style: none; padding: 0; }
.exchange-list li { font-size: 13px; color: var(--plum); font-weight: 600; padding-left: 16px; position: relative; line-height: 1.5; }
.exchange-list li::before { content: '·'; position: absolute; left: 4px; color: var(--coral); font-weight: 700; font-size: 18px; top: -3px; }

/* A/B/C steps */
.howto-tagline { display: inline-block; background: var(--white); border: 1px solid rgba(113,51,87,0.15); border-radius: 99px; padding: 8px 18px; font-size: 13px; font-weight: 700; color: var(--plum); letter-spacing: 0.06em; margin-bottom: 20px; }
.howto-tagline span { color: var(--sage); margin: 0 8px; }
.steps-abc { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px 40px; margin-top: 48px; }
.step-letter { font-family: 'Nunito', sans-serif; font-size: 84px; font-weight: 800; color: var(--plum); line-height: 0.85; margin-bottom: 18px; letter-spacing: -0.04em; }
.step-abc-card:nth-child(2) .step-letter { color: var(--magenta); }
.step-abc-card:nth-child(3) .step-letter { color: var(--sage); }
.step-abc-title { font-size: 20px; font-weight: 700; color: var(--plum); margin-bottom: 10px; }
.step-abc-desc { font-size: 15px; line-height: 1.7; color: var(--dark-gray); }

/* Seekers strip */
.seekers-strip { background: var(--white); border-top: 3px solid var(--coral); border-bottom: 3px solid var(--coral); padding: 36px 60px; display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; }
.seekers-strip--sage { border-top-color: var(--sage); border-bottom-color: var(--sage); }
.seekers-strip--sage .seekers-strip-eyebrow { color: var(--sage); }
.seekers-strip--plum { background: var(--plum); border-top: none; border-bottom: none; }
.seekers-strip--plum .seekers-strip-eyebrow { color: var(--coral); }
.seekers-strip--plum .seekers-strip-title { color: var(--white); }
.seekers-strip--plum .seekers-strip-sub { color: rgba(255,255,255,0.85); }
.seekers-strip--tall { padding: 64px 60px; }
.seekers-strip-text { display: flex; flex-direction: column; max-width: 680px; }
.seekers-strip-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--coral); margin-bottom: 6px; }
.seekers-strip-title { font-size: 20px; font-weight: 700; color: var(--plum); line-height: 1.3; margin-bottom: 6px; }
.seekers-strip-sub { font-size: 14px; color: var(--dark-gray); line-height: 1.6; }

/* Matchmaker plum band */
.matchmaker-section { background: var(--plum); border-top: 5px solid var(--magenta); border-bottom: 5px solid var(--magenta); padding: 48px 60px; text-align: center; }
.matchmaker-section--no-borders { border-top: none; border-bottom: none; }
.matchmaker-section--tall { padding: 88px 60px; }
.matchmaker-inner { max-width: 980px; margin: 0 auto; }
.matchmaker-section p { font-size: 22px; color: var(--white); font-weight: 700; line-height: 1.5; }
.matchmaker-section p .magenta-text { color: #ff7ed1; }
.matchmaker-section .secondary { display: block; margin-top: 12px; font-size: 16px; font-weight: 600; color: rgba(255,255,255,0.78); line-height: 1.55; font-style: italic; }

/* Safety grid */
.safety-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 48px; }
.safety-card { background: var(--white); border-radius: 10px; border: 1px solid var(--border); border-top: 4px solid var(--plum); padding: 30px 26px; display: flex; flex-direction: column; }
.safety-card.tile-plum    { border-top-color: var(--plum); }
.safety-card.tile-sage    { border-top-color: var(--sage); }
.safety-card.tile-magenta { border-top-color: var(--magenta); }
.safety-card-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 14px; display: block; }
.safety-card-eyebrow.eb-plum    { color: var(--plum); }
.safety-card-eyebrow.eb-coral   { color: var(--coral); }
.safety-card-eyebrow.eb-magenta { color: var(--magenta); }
.safety-card-eyebrow.eb-sage    { color: var(--sage); }
.safety-icon { background: transparent; margin-bottom: 16px; color: var(--plum); display: block; }
.safety-icon.icon-plum    { color: var(--plum); }
.safety-icon.icon-sage    { color: var(--sage); }
.safety-icon.icon-magenta { color: var(--magenta); }
.safety-title { font-size: 17px; font-weight: 700; color: var(--plum); margin-bottom: 8px; }
.safety-desc { font-size: 14px; line-height: 1.7; color: var(--dark-gray); }
.safety-icon svg { display: block; }
.audience-pullquote .pullquote-attribution { font-size: 13px; font-weight: 700; color: var(--sage); letter-spacing: 0.08em; text-transform: uppercase; font-style: normal; margin-top: 18px; line-height: 1.4; }

/* Why us tiles */
.whyus-tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 48px; }
.whyus-tile { background: var(--white); border-radius: 14px; padding: 40px 36px; box-shadow: 0 4px 22px rgba(0,0,0,0.07); display: flex; flex-direction: column; }
.whyus-eyebrow { font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; margin-bottom: 14px; }
.whyus-eyebrow.eb-plum  { color: var(--plum); }
.whyus-eyebrow.eb-coral { color: var(--coral); }
.whyus-num { font-size: 60px; font-weight: 700; color: var(--plum); line-height: 1; margin-bottom: 14px; letter-spacing: -0.02em; }
.whyus-tile.coral .whyus-num { color: var(--coral); }
.whyus-label { font-size: 17px; font-weight: 700; color: var(--plum); line-height: 1.4; margin-bottom: 8px; }
.whyus-source { font-size: 12px; color: #888; font-style: italic; margin-top: auto; padding-top: 12px; }

/* Partners grid */
.partners-section { background: var(--white); padding: 88px 60px; border-top: 1px solid var(--border); }
.partners-header { text-align: center; max-width: 760px; margin: 0 auto 48px; }
.partners-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; max-width: 1200px; margin: 0 auto; }
.partner-card { background: var(--white); border: 1px solid var(--border); border-radius: 10px; padding: 18px 12px; display: flex; flex-direction: column; align-items: center; text-align: center; text-decoration: none; transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s; min-height: 160px; justify-content: center; }
.partner-card:hover { transform: translateY(-2px); box-shadow: 0 4px 18px rgba(0,0,0,0.07); border-color: var(--coral); }
.partner-logo { width: 100%; height: 72px; border-radius: 12px; background: var(--warm-peach); display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--plum); margin-bottom: 12px; letter-spacing: -0.02em; }
.partner-logo--img { background: transparent; padding: 4px 8px; }
.partner-logo--img img { width: 100%; height: 100%; object-fit: contain; }
.partner-logo--dark { background: #707070; }
.partner-card:nth-child(3n+2) .partner-logo:not(.partner-logo--img) { background: rgba(251,123,68,0.15); color: var(--coral); }
.partner-card:nth-child(3n+3) .partner-logo:not(.partner-logo--img) { background: rgba(210,13,137,0.12); color: var(--magenta); }
.partner-name { font-size: 12px; font-weight: 700; color: var(--plum); line-height: 1.35; }
.partner-geo { font-size: 12px; color: #888; font-style: italic; line-height: 1.35; margin-top: 4px; }
.partners-foot { text-align: center; margin-top: 36px; font-size: 13px; color: #888; font-style: italic; }

/* ── RESPONSIVE MEDIA QUERIES ────────────────────────────────────────── */
@media (max-width: 768px) {
    nav { padding: 12px 20px; }
    .nav-links { display: none; gap: 0; flex-direction: column; }
    .nav-links.nav-open { display: flex; }
    .hamburger { display: flex; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px; }
    .cta-strip { padding: 28px 24px; flex-direction: column; gap: 16px; text-align: center; }
    .section-title { font-size: 28px; }
    .page-hero { padding: 48px 24px 36px; }
    .page-hero h1 { font-size: 28px; }
    .content-wrap { padding: 48px 24px 64px; }
    .page-section { padding: 60px 24px; }
    .page-section--narrow { padding: 60px 20px; }
    .grid-2col, .grid-2col-wide, .grid-2col-lg { grid-template-columns: 1fr; gap: 32px; }
    .grid-3col, .grid-3col-sm, .grid-3col-lg { grid-template-columns: 1fr; }
    .grid-4col, .grid-4col-sm { grid-template-columns: 1fr 1fr; }
    .problem-grid { grid-template-columns: 1fr; gap: 32px; }
    .csr-grid { grid-template-columns: 1fr; gap: 32px; }
    .hero-home { padding: 60px 20px; }
    .hero-home-inner { grid-template-columns: 1fr; gap: 32px; }
    .hero-partners { grid-template-columns: 1fr; padding: 60px 24px; min-height: auto; }
    .hero-give { grid-template-columns: 1fr; margin: 0; border-radius: 0; min-height: auto; }
    .hero-give-image { padding: 40px; }
    .hero-give-content { padding: 60px 24px; }
    .hero-sponsorships { padding: 60px 24px; }
    .hero-heading--md, .hero-heading--lg { font-size: 32px; }
    .hero-heading--xl { font-size: 36px; max-width: none; }
    .hero-image-frame--md { height: 240px; }
    .hero-image-frame--lg { height: 280px; }
    .top-split { grid-template-columns: 1fr; }
    .split-story { padding: 60px 24px; }
    .split-contact { padding: 40px 24px; }
    .callout-plum { padding: 36px 28px; }
    .callout-plum--grid { grid-template-columns: 1fr; gap: 24px; }
    .callout-plum-full { padding: 40px 28px; }
    .callout-peach-grid { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
    .stats-strip { grid-template-columns: 1fr 1fr; }
    .stat-item + .stat-item { border-left: none; }
    .stat-item:nth-child(even) { border-left: 1px solid rgba(255,255,255,0.15); }
    .newsletter-card--with-video { grid-template-columns: 1fr; text-align: center; gap: 24px; }
    .audience-pullquote { padding: 0 20px 40px; }
    .market-callout { padding: 32px 24px; }
    .market-callout h3 { font-size: 24px; }
    .info-strip { flex-direction: column; padding: 24px; }
    .market-grid { grid-template-columns: 1fr; gap: 40px; }
    .persona-grid { grid-template-columns: 1fr; }
    .cat-grid { grid-template-columns: 1fr; }
    .recognition-grid { grid-template-columns: 1fr; }
    .tiers-callout { grid-template-columns: 1fr; gap: 24px; padding: 28px 24px; }
    .inquiry-form-wrapper { grid-template-columns: 1fr; gap: 32px; }
    .inquiry-form { padding: 28px 24px; }

    /* Share page */
    .hero-share { padding: 60px 24px; }
    .hero-share-inner { grid-template-columns: 1fr; gap: 32px; }
    .hero-share-image { height: 380px; }
    .hero-substat-row { gap: 20px; }
    .reasons-grid { grid-template-columns: 1fr; gap: 36px; }
    .reason-card { padding: 36px 24px 32px; }
    .reason-title { font-size: 26px; }
    .reason-title--income { font-size: 22px; }
    .steps-abc { grid-template-columns: 1fr; gap: 32px; }
    .safety-grid { grid-template-columns: 1fr 1fr; }
    .seekers-strip { flex-direction: column; padding: 28px 24px; text-align: center; }
    .whyus-tile-row { grid-template-columns: 1fr; }
    .partners-section { padding: 60px 24px; }
    .partners-grid { grid-template-columns: repeat(3, 1fr); }
    .matchmaker-section { padding: 36px 24px; }
    .matchmaker-section p { font-size: 18px; }
    .cta-strip--tall { padding: 56px 24px; }
    .cta-strip--centered p { font-size: 28px; }
}
@media (max-width: 480px) {
    footer { padding: 48px 20px 32px; }
    .footer-grid { grid-template-columns: 1fr; }
    .btn { width: 100%; }
    .footer-bottom { padding-left: 0; padding-right: 0; }
    .page-section { padding: 48px 16px; }
    .grid-4col, .grid-4col-sm { grid-template-columns: 1fr; }
    .stats-strip { grid-template-columns: 1fr; }
    .stat-item + .stat-item { border-left: none; }
    .stat-item:nth-child(even) { border-left: none; }
    .hero-heading--md, .hero-heading--lg { font-size: 26px; }
    .hero-heading--xl { font-size: 28px; }
    .hero-give-image { display: none; }

    /* Share page */
    .safety-grid { grid-template-columns: 1fr; }
    .partners-grid { grid-template-columns: repeat(2, 1fr); }
    .partner-logo { height: 64px; }
    .exchange-list ul { grid-template-columns: 1fr; }
    .hero-substat-row { flex-direction: column; gap: 16px; }
    .hero-share-image { height: 320px; }
    .step-letter { font-size: 64px; }
    .whyus-num { font-size: 48px; }
    .cta-strip--centered p { font-size: 24px; }
}

/* ── THANK YOU PAGE ─────────────────────────────────────────────────── */
.thank-you-section {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 60vh;
    padding: 80px 24px;
    text-align: center;
}
.thank-you-content {
    max-width: 520px;
}
.thank-you-content svg {
    margin-bottom: 24px;
}
.thank-you-content .section-title {
    margin-bottom: 16px;
}
.thank-you-content .body-text--lg {
    margin-bottom: 32px;
}
.thank-you-links {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

/* ==========================================================================
   RESEARCH & INSIGHTS (About page paper card)
   ========================================================================== */
/* Accent by research type, set once as a variable so the top border and the
   eyebrow can never drift apart. Audience picks the color: sage for a tool a
   person runs about their own household, plum for one a state or city reads,
   coral for evidence with no ask attached, magenta for a path we are putting
   forward. Anything with no researchType keeps the old coral. */
.paper-card--interactive-user  { --paper-accent: var(--sage); }
.paper-card--interactive-state { --paper-accent: var(--plum); }
.paper-card--paper             { --paper-accent: var(--coral); }
.paper-card--framework         { --paper-accent: var(--magenta); }
.paper-card {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 6px solid var(--paper-accent, var(--coral));
    border-radius: 8px;
    padding: 32px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 3px rgba(0,0,0,.04);
    transition: box-shadow .2s;
}
.paper-card:hover {
    box-shadow: 0 6px 24px rgba(113,51,87,.12);
}
.paper-card + .paper-card { margin-top: 24px; }
.paper-eyebrow {
    font-size: 12px;
    font-weight: 700;
    color: var(--paper-accent, var(--coral));
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin: 0 0 12px;
}
.paper-body { flex: 1; }
.paper-body.has-thumb {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 220px;
    grid-template-areas: "head thumb" "rest thumb";
    column-gap: 26px;
    align-items: center;
}
.paper-head { grid-area: head; }
.paper-rest { grid-area: rest; }
.paper-thumb { grid-area: thumb; }
.paper-thumb img {
    width: 100%;
    height: auto;
    display: block;
}
@media (max-width: 640px) {
    .paper-body.has-thumb {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head" "thumb" "rest";
    }
    .paper-thumb { margin: 4px auto 18px; width: 100%; max-width: 260px; }
}
.paper-title {
    font-size: 24px;
    font-weight: 800;
    color: var(--plum);
    line-height: 1.25;
    margin: 0 0 6px;
}
.paper-subtitle {
    font-size: 16px;
    color: #777;
    font-style: italic;
    margin: 0 0 16px;
}
.paper-desc {
    font-size: 15px;
    line-height: 1.7;
    color: var(--dark-gray);
    margin: 0 0 20px;
}
.paper-meta {
    font-size: 13px;
    color: #888;
    margin: 0 0 20px;
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
}
.paper-meta span::before {
    content: "\00b7";
    margin-right: 8px;
    color: #bbb;
}
.paper-meta span:first-child::before {
    content: none;
    margin: 0;
}
.paper-actions {
    clear: both;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: auto;
}
@media (max-width: 768px) {
    .paper-card { padding: 24px; }
}

/* Cards abreast. Three by default, the arrangement the About teaser used until
   22 August 2026; two with the --2 modifier, which the /research/ hub uses for
   each month's band. These items are one body of research, so a reader should
   take in a set rather than scroll past it one card at a time. */
/* Five rows, and each card spans all five with subgrid, so eyebrow, headline,
   thumbnail, blurb and buttons line up across the three cards however many lines
   a title happens to take. Browsers without subgrid get the ragged version rather
   than a broken one. Row gaps are zeroed inside each card, which leaves the
   parent's 24px acting only between wrapped rows of cards. */
.paper-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    grid-template-rows: auto auto auto auto auto;
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
    text-align: left;
}
.paper-grid .paper-card {
    max-width: none;
    margin: 0;
    padding: 24px;
    grid-row: span 5;
    display: grid;
    grid-template-rows: subgrid;
    row-gap: 0;
}
.paper-grid .paper-card + .paper-card { margin-top: 0; }
/* A 220px thumbnail column cannot share a third-width card with the blurb, so the
   thumbnail moves above it. Same rearrangement the 640px breakpoint already makes,
   applied here by column width rather than by viewport. */
.paper-grid .paper-body {
    grid-row: span 3;
    display: grid;
    grid-template-rows: subgrid;
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "head" "thumb" "rest";
    row-gap: 0;
    column-gap: 0;
}
.paper-grid .paper-thumb {
    margin: 4px auto 18px;
    width: 100%;
    max-width: 220px;
}
.paper-grid .paper-title { font-size: 20px; }
.paper-grid .paper-subtitle { font-size: 14px; margin-bottom: 12px; }
.paper-grid .paper-desc { font-size: 14px; margin-bottom: 16px; }
/* Centered, like the stacked cards. No width override: .btn is 210px by the
   design system, and at a third of the row the two buttons wrap onto their own
   lines and centre individually, which is the intended behaviour. */
.paper-grid .paper-actions { justify-content: center; }
.paper-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Three-up steps down to two, then one. These sit above the two-up rules on
   purpose: the selectors weigh the same, so the two-up rule has to come last
   or the 1000px rule here would put a two-up back to two columns between
   680px and 1000px. */
@media (max-width: 1000px) {
    .paper-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
    .paper-grid { grid-template-columns: minmax(0, 1fr); }
}
/* The two-up drops to one column at 1120px, well before the three-up does.
   Below that a half-width card is too narrow to hold its two 210px buttons on
   one line, and a pair reads as two skinny columns rather than two cards. One
   card at full width looks better than that. The arithmetic: two buttons and
   their 10px gap need 430px of interior; add 24px padding and a 1px border each
   side for a 480px card; two cards and the 24px column gap make 984px; the
   section's 60px padding each side makes 1104px, which is where the buttons
   were measured to fit. The extra 16px covers a browser that counts a classic
   scrollbar in the media query width but not in the layout. */
@media (max-width: 1120px) {
    .paper-grid--2 { grid-template-columns: minmax(0, 1fr); }
}
/* Once a --2 card is alone on its row it has the whole measure, so it goes back
   to the full-width card's shape: thumbnail beside the text, full-size type,
   32px padding. Bounded at 641px because under that the base card stacks the
   thumbnail above the text itself, and this block would otherwise outrank it
   and keep the side-by-side layout on a phone. Subgrid goes too: it only earns
   its keep lining up a pair, and a card left spanning five tracks with three
   rows of content collects the parent's row gap in the two empty ones. */
@media (min-width: 641px) and (max-width: 1120px) {
    .paper-grid--2 .paper-card { padding: 32px; grid-row: auto; display: flex; flex-direction: column; }
    .paper-grid--2 .paper-body { grid-row: auto; display: block; }
    .paper-grid--2 .paper-body.has-thumb {
        display: grid;
        grid-template-rows: auto;
        grid-template-columns: minmax(0, 1fr) 220px;
        grid-template-areas: "head thumb" "rest thumb";
        column-gap: 26px;
    }
    .paper-grid--2 .paper-thumb { margin: 0; max-width: none; }
    .paper-grid--2 .paper-title { font-size: 24px; }
    .paper-grid--2 .paper-subtitle { font-size: 16px; margin-bottom: 16px; }
    .paper-grid--2 .paper-desc { font-size: 15px; margin-bottom: 20px; }
}

/* ==========================================================================
   MARKDOWN TABLES IN ARTICLE BODIES
   ==========================================================================
   A table written as markdown in a research page or a blog post arrives as a
   bare <table> with no class, and nothing styled it, so it rendered as browser
   default: no rules, no padding, columns collapsed against each other. That is
   what made the Who Can Actually Rent It tables and the two in the affordable
   housing posts hard to read.

   The look follows .appendix-table in head-research.html, which was already the
   house table style, so hand-built and markdown tables now match.

   :not([class]) is the whole safety margin. Every deliberately styled table on
   the site carries a class (.appendix-table, the .hsc- tables on the calculator
   pages), and .article-body table would otherwise outrank those on specificity
   and quietly restyle them. This rule only reaches tables nobody styled. */
.article-body table:not([class]) {
    width: 100%;
    border-collapse: collapse;
    margin: 22px 0 18px;
    font-size: 15px;
}
.article-body table:not([class]) th {
    text-align: left;
    font-weight: 800;
    color: var(--plum);
    padding: 9px 14px 9px 0;
    border-bottom: 2px solid var(--coral);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .04em;
    line-height: 1.35;
    vertical-align: bottom;
}
.article-body table:not([class]) td {
    padding: 11px 14px 11px 0;
    border-bottom: 1px solid #e6e6e6;
    color: #555;
    line-height: 1.5;
    vertical-align: top;
}
/* The row label carries the reading, so it gets the plum and the weight. */
.article-body table:not([class]) td:first-child {
    font-weight: 700;
    color: var(--plum);
    padding-right: 22px;
}
/* Figures keep their unit on the same line. "92.7 percent" is two words, so the
   narrow columns were breaking it into "0.0" over "percent" and the eye had to
   reassemble every number. Only the first column is allowed to wrap, which is
   the one carrying prose. Released again on small screens, where the column
   simply is not wide enough and a wrapped figure beats a clipped table. */
.article-body table:not([class]) th + th,
.article-body table:not([class]) td + td { white-space: nowrap; }

/* Figures right-align, so a column can be read down: the decimal points stack,
   and each figure sits under its own heading instead of stranded at the left of a
   column that a long heading made much wider than the number in it. The first
   column is exempt because it is the row label, which is words, not a figure.
   Decided 24 August 2026 after rendering all three candidates; see DECISIONS.md.

   :not([id]) is here because the older guard one block down, :not([class]) on its
   own, is not sufficient. The comment there says every deliberately styled table
   on the site carries a class. The interactive table on
   /research/affordable-housing-landscape/ is <table id="tbl">, carries no class,
   and is styled by the page that builds it, so a bare :not([class]) reaches
   straight into it. `make check-thumbs` caught it, because that page is one of the
   two the site photographs for a research card. Anything with an id was put there
   to be addressed by something.

   Right is the default rather than an opt-in because the two failure modes are
   not symmetrical. A prose table that gets right-aligned by mistake is obvious on
   sight, the way a timeline with its text pushed to the right edge is. A figure
   table that quietly misses an opt-in looks exactly like every table did before
   this rule existed, so nobody would ever catch it. Loud failure beats silent. */
.article-body table:not([class]):not([id]) th + th,
.article-body table:not([class]):not([id]) td + td { text-align: right; }

/* The opt-out, for a table whose columns hold sentences rather than figures. Wrap
   the table in <div class="table-prose">, which works for a markdown table too as
   long as a blank line separates it from the div. Two tables use it today, both in
   the Build, Preserve, Convert, Activate post.

   It releases the nowrap as well as the alignment, and that half fixes a defect
   that predates this rule. The nowrap exists so a figure keeps its unit on one
   line, but applied to a column of sentences it pins whole paragraphs to a single
   line: the timeline table in that post ran off the right of the measure and made
   the page scroll sideways. A prose column has to wrap, by definition. */
.article-body .table-prose table:not([class]):not([id]) th + th,
.article-body .table-prose table:not([class]):not([id]) td + td {
    text-align: left;
    white-space: normal;
}

/* Last cell sits flush right of the measure rather than leaving a ragged gap. */
.article-body table:not([class]) th:last-child,
.article-body table:not([class]) td:last-child { padding-right: 0; }
.article-body table:not([class]) tr:last-child td { border-bottom: none; }
@media (max-width: 768px) {
    .article-body table:not([class]) { font-size: 14px; }
    .article-body table:not([class]) th,
    .article-body table:not([class]) td { padding-right: 10px; }
    .article-body table:not([class]) td:first-child { padding-right: 14px; }
    .article-body table:not([class]) th + th,
    .article-body table:not([class]) td + td { white-space: normal; }
}