/* ============================================================
   MemberCare ICP components - flyer brand system
   Loaded AFTER style.css so it wins the cascade.
   Brand roles: navy=trust, cyan=intelligence, green=care,
   orange=financial action, violet=capacity/ops, coral=data.
   ============================================================ */

:root {
    --p1-navy:#0F172A; --p1-coral:#F97066; --p1-violet:#8B5CF6;
    --p1-cyan:#22D3EE; --p1-green:#22C55E; --p1-orange:#F59E0B;
    --p1-ink:#0F172A; --p1-body:#475569; --p1-line:#E2E8F0;
    --p1-onnavy:#A6B2E4; /* legibility floor on navy */
    --p1-orange-ink:#B45309; /* same hue, legible as text on light grounds */
}

/* Brand roles per flyer system: navy=trust, cyan=intelligence, green=care,
       orange=financial action, violet=capacity/ops, coral=data. Colors reuse the
       existing site tokens; none invented. */
    #mc-hero, #mc-audience-router, #mc-cta, .mc-icp, .mc-directory {
        --p1-navy:#0F172A; --p1-coral:#F97066; --p1-violet:#8B5CF6;
        --p1-cyan:#22D3EE; --p1-green:#22C55E; --p1-orange:#F59E0B;
        --p1-ink:#0F172A; --p1-body:#475569; --p1-line:#E2E8F0;
        --p1-onnavy:#A6B2E4; /* legibility floor on navy */
    --p1-orange-ink:#B45309; /* same hue, legible as text on light grounds */
    }
    .mc-hero__title, #mc-audience-router .mc-section__title, #mc-cta .mc-section__title,
    .mc-lane__title, .mc-hero__hook {
        font-family:'Fraunces', Georgia, 'Times New Roman', serif;
        font-weight:700; letter-spacing:-0.01em; text-wrap:balance;
    }
    /* --- Hero --- */
    .mc-hero__aurora ~ .container .mc-hero__title--prop,
    .mc-hero__title--prop { font-size:clamp(1.85rem,4.1vw,3.05rem); line-height:1.14; margin-bottom:1.1rem; letter-spacing:-0.01em; }
    .mc-hero__title span.mc-grad { display: block; margin-top: .12em; }
    .mc-hero__title span.mc-grad, .mc-grad {
        background:linear-gradient(96deg,var(--p1-coral) 0%,var(--p1-violet) 52%,var(--p1-cyan) 100%);
        -webkit-background-clip:text; background-clip:text; color:transparent;
        -webkit-text-fill-color:transparent; padding-bottom:.08em;
    }
    .mc-trust-chip {
        display:inline-flex; align-items:center; gap:.55rem;
        font-size:.8rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
        color:#CBD5E1; background:rgba(255,255,255,.07);
        border:1px solid rgba(255,255,255,.16); border-radius:100px;
        padding:.45rem 1rem; margin-bottom:1.4rem;
    }
    .mc-trust-chip__dot {
        width:7px; height:7px; border-radius:50%; background:var(--p1-green);
        box-shadow:0 0 0 3px rgba(34,197,94,.22); flex:none;
    }
    /* Tightened so the primary CTA clears the fold on a laptop viewport */
    #mc-hero { padding-top:74px; padding-bottom:70px; }
    .mc-hero__aurora ~ .container .mc-hero__title--prop,
    .mc-hero__title--prop { margin-bottom:.8rem; }
    #mc-hero .mc-hero__subtitle { margin-bottom:.9rem; }
    /* Sole supporting line under the hook - carries the integration objection */
    .mc-hero__reassure {
        color:var(--p1-onnavy); font-size:1.08rem; margin:0 auto 1.5rem;
        max-width:46rem; line-height:1.65;
    }
    .mc-hero__cta-note {
        color:var(--p1-onnavy); font-size:.92rem; line-height:1.65;
        max-width:46rem; margin:1.6rem auto 0;
    }
    .mc-hero__cta-note strong { color:#fff; font-weight:600; }
    .mc-hero__contact { display:flex; gap:.6rem; justify-content:center; flex-wrap:wrap; margin-top:1.5rem; }
    .mc-contact-chip {
        display:inline-flex; align-items:center; gap:.5rem; text-decoration:none;
        font-size:.9rem; font-weight:600; color:#fff;
        background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.2);
        border-radius:100px; padding:.5rem 1.05rem; transition:background .2s,border-color .2s;
    }
    .mc-contact-chip:hover, .mc-contact-chip:focus-visible { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.4); color:#fff; }
    .mc-contact-chip i { color:var(--p1-cyan); }
    .mc-contact-chip--muted { color:var(--p1-onnavy); }
    .mc-contact-chip--muted i { color:var(--p1-onnavy); }

    /* --- Three ICP lanes --- */
    .mc-lanes { display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-top:2.5rem; }
    @media (max-width:991px){ .mc-lanes{ grid-template-columns:1fr; } }
    .mc-lane {
        display:flex; flex-direction:column; text-decoration:none;
        background:#fff; border:1px solid var(--p1-line); border-radius:14px;
        border-left:3px solid var(--lane-accent,var(--p1-cyan));
        padding:1.9rem 1.7rem 1.6rem;
        transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    .mc-lane:hover, .mc-lane:focus-visible { transform:translateY(-4px); box-shadow:0 16px 40px rgba(15,23,42,.13); }
    .mc-lane--cyan{ --lane-accent:var(--p1-cyan); }
    .mc-lane--green{ --lane-accent:var(--p1-green); }
    .mc-lane--violet{ --lane-accent:var(--p1-violet); }
    .mc-lane__eyebrow {
        font-size:.72rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
        color:var(--lane-accent); margin-bottom:.7rem;
    }
    .mc-lane__title { font-size:1.3rem; color:var(--p1-ink); margin-bottom:.5rem; min-height:2.6rem; }
    .mc-lane__hook {
        font-family:'Fraunces',Georgia,serif; font-style:italic; font-weight:600;
        font-size:1.02rem; color:var(--p1-ink); line-height:1.45; margin-bottom:.85rem;
    }
    .mc-lane__text { font-size:.94rem; color:var(--p1-body); line-height:1.6; flex:1 1 auto; margin-bottom:1.1rem; }
    .mc-lane__link { font-size:.9rem; font-weight:700; color:var(--p1-ink); display:inline-flex; align-items:center; gap:.45rem; }
    .mc-lane:hover .mc-lane__link { color:var(--lane-accent); }

    /* --- Secondary + partner rows --- */
    .mc-alsorow { margin-top:3.2rem; }
    .mc-alsorow__label {
        font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
        color:#64748B; text-align:center; margin-bottom:1.1rem;
    }
    .mc-pills { display:flex; flex-wrap:wrap; gap:.6rem; justify-content:center; }
    .mc-pill {
        text-decoration:none; font-size:.9rem; font-weight:600; color:#334155;
        background:#fff; border:1px solid var(--p1-line); border-radius:100px;
        padding:.55rem 1.1rem; transition:border-color .2s, color .2s, background .2s;
    }
    .mc-pill:hover, .mc-pill:focus-visible { border-color:var(--p1-cyan); color:var(--p1-ink); background:#F0FDFF; }
    .mc-pill--partner:hover, .mc-pill--partner:focus-visible { border-color:var(--p1-violet); background:#F7F5FF; }

    /* --- Demo path (journey track: data -> intelligence -> care -> money) --- */
    .mc-path { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.5rem; margin:1.8rem auto 0; }
    .mc-path__step {
        display:inline-flex; align-items:center; gap:.5rem;
        font-size:.86rem; font-weight:600; color:#fff;
        background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18);
        border-left:3px solid var(--step,var(--p1-cyan));
        border-radius:8px; padding:.5rem .9rem;
    }
    .mc-path__sep { color:rgba(255,255,255,.45); font-size:.85rem; }
    .mc-path__step--data{ --step:var(--p1-coral); }
    .mc-path__step--intel{ --step:var(--p1-cyan); }
    .mc-path__step--care{ --step:var(--p1-green); }
    .mc-path__step--money{ --step:var(--p1-orange); background:rgba(245,158,11,.14); border-color:rgba(245,158,11,.4); }
    @media (max-width:575px){ .mc-path__sep{ display:none; } .mc-path{ gap:.45rem; } }

    /* ===== ICP bands: each band is the flyer's argument, on the page ===== */
    .mc-icp {
        --icp: var(--p1-cyan);
        position: relative;
        padding: 5rem 0 4.5rem;
        border-top: 3px solid var(--icp);
        background: #FFFFFF;
    }
    .mc-icp--alt { background: #F7F9FC; }
    .mc-icp::before {
        content: ''; position: absolute; inset: 0 0 auto; height: 320px; pointer-events: none;
        background: radial-gradient(70% 100% at 12% 0%, color-mix(in srgb, var(--icp) 11%, transparent) 0%, transparent 72%);
    }
    .mc-icp > .container { position: relative; }
    .mc-icp--infusion { --icp: var(--p1-cyan); }
    .mc-icp--endo     { --icp: var(--p1-green); }
    .mc-icp--neuro    { --icp: var(--p1-violet); }

    .mc-icp__eyebrow {
        font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
        color: var(--p1-orange-ink); margin-bottom: .9rem;
    }
    .mc-icp__hook {
        font-family: 'Fraunces', Georgia, serif; font-weight: 700;
        font-size: clamp(1.9rem, 4vw, 3rem); line-height: 1.1; color: var(--p1-ink);
        margin-bottom: 1.1rem; text-wrap: balance;
    }
    .mc-icp__hook span {
        display: block;
        background: linear-gradient(96deg, var(--p1-coral) 0%, var(--p1-violet) 52%, var(--p1-cyan) 100%);
        -webkit-background-clip: text; background-clip: text;
        color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .08em;
    }
    .mc-icp__lede { font-size: 1.02rem; line-height: 1.7; color: var(--p1-body); max-width: 60rem; margin-bottom: 0; }
    .mc-icp__lede strong { color: var(--p1-ink); font-weight: 700; }

    /* Journey track — the flyer's signature device: data -> intelligence -> care -> money */
    .mc-journey-wrap { overflow-x: auto; margin: 2.6rem 0 2.4rem; padding-bottom: .5rem; }
    .mc-journey { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); min-width: 900px; }
    .mc-journey__step { position: relative; text-align: center; padding: 0 .35rem; }
    .mc-journey__step::before {
        content: ''; position: absolute; top: 25px; left: -50%; width: 100%; height: 2px;
        background: var(--dot, var(--p1-cyan)); opacity: .45;
    }
    .mc-journey__step:first-child::before { display: none; }
    .mc-journey__dot {
        width: 50px; height: 50px; border-radius: 50%; margin: 0 auto .7rem;
        display: flex; align-items: center; justify-content: center;
        background: var(--dot, var(--p1-cyan)); color: #fff; font-size: 1.05rem;
        position: relative; z-index: 1; box-shadow: 0 4px 14px color-mix(in srgb, var(--dot, #22D3EE) 40%, transparent);
    }
    .mc-journey__label { display: block; font-size: .84rem; font-weight: 700; color: var(--p1-ink); line-height: 1.25; }
    .mc-journey__sub { display: block; font-size: .73rem; color: #64748B; line-height: 1.35; margin-top: .2rem; }
    /* flyer progression: data -> reading -> intelligence -> care -> money */
    .mc-journey__step:nth-child(1){ --dot:#F2555A; }
    .mc-journey__step:nth-child(2){ --dot:#F58a94; }
    .mc-journey__step:nth-child(3){ --dot:#22B8D9; }
    .mc-journey__step:nth-child(4){ --dot:#22C3E6; }
    .mc-journey__step:nth-child(5){ --dot:#2FAE6B; }
    .mc-journey__step:nth-child(6){ --dot:#41BE7B; }
    .mc-journey__step:nth-child(7){ --dot:#17A98F; }
    .mc-journey__step:nth-child(8){ --dot:#F59E0B; }

    .mc-journey-hint {
        display: none; font-size: .78rem; color: #64748B; margin: -1.8rem 0 2rem;
        align-items: center; gap: .4rem;
    }
    @media (max-width: 991px) { .mc-journey-hint { display: flex; } }

    /* Capability cards */
    .mc-icp__cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.1rem; margin-bottom: 1.9rem; }
    @media (max-width: 767px) { .mc-icp__cards { grid-template-columns: 1fr; } }
    .mc-icp__card {
        background: #fff; border: 1px solid var(--p1-line); border-left: 3px solid var(--icp);
        border-radius: 12px; padding: 1.3rem 1.4rem;
    }
    .mc-icp--alt .mc-icp__card { background: #fff; }
    .mc-icp__card h4 {
        font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.1rem;
        color: var(--p1-ink); margin-bottom: .5rem;
    }
    .mc-icp__card p { font-size: .93rem; line-height: 1.6; color: var(--p1-body); margin: 0; }

    /* Bottom-line strip — what the decision maker is actually buying */
    .mc-ledger {
        display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
        background: #0F172A; border-radius: 14px; padding: 1.5rem 1.6rem; margin-bottom: 1.9rem;
    }
    @media (max-width: 991px) { .mc-ledger { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 575px) { .mc-ledger { grid-template-columns: 1fr; } }
    .mc-ledger__head {
        grid-column: 1 / -1; font-size: .72rem; font-weight: 700; letter-spacing: .16em;
        text-transform: uppercase; color: var(--p1-orange); margin-bottom: -.35rem;
    }
    .mc-ledger__item { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: #E2E8F0; line-height: 1.5; }
    .mc-ledger__item i { color: var(--p1-orange); font-size: .8rem; margin-top: .28rem; flex: none; }

    /* Therapy / capability chips */
    .mc-icp__chips { display: flex; flex-wrap: wrap; gap: .55rem; margin-bottom: 1.6rem; }
    .mc-icp__chip {
        font-size: .84rem; font-weight: 600; color: #334155; background: #fff;
        border: 1px solid var(--p1-line); border-radius: 100px; padding: .45rem 1rem;
    }
    .mc-icp__chip b { color: var(--p1-orange); font-weight: 700; }

    /* Proof + AI supervision strips */
    .mc-icp__proof, .mc-icp__ai {
        display: flex; align-items: center; gap: .9rem; flex-wrap: wrap;
        border: 1px solid var(--p1-line); border-radius: 12px; padding: .95rem 1.2rem;
        margin-bottom: 1.1rem; background: #fff; font-size: .93rem; color: var(--p1-body);
    }
    .mc-icp__proof { border-color: color-mix(in srgb, var(--p1-green) 45%, var(--p1-line)); }
    .mc-icp__badge {
        font-size: .68rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
        border-radius: 100px; padding: .35rem .8rem; flex: none;
    }
    .mc-icp__badge--proof { background: rgba(34,197,94,.13); color: #15803D; }
    .mc-icp__badge--ai { background: rgba(139,92,246,.13); color: #6D28D9; }
    .mc-icp__proof strong { color: var(--p1-orange-ink); }
    .mc-icp__ai strong { color: var(--p1-orange-ink); font-weight: 700; }

    .mc-icp__cta { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
    .mc-icp__cta .mc-btn { margin: 0; }
    .mc-icp__cta-note { font-size: .88rem; color: #64748B; margin: 0; }

    /* Compact directory replaces the old feature-section pile */
    .mc-directory { padding: 3.5rem 0; background: #0F172A; }
    .mc-directory__col h6 {
        font-size: .72rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
        color: var(--p1-onnavy); margin-bottom: .9rem;
    }
    .mc-directory .mc-pills { justify-content: flex-start; }
    .mc-directory .mc-pill {
        background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #E2E8F0;
    }
    .mc-directory .mc-pill:hover, .mc-directory .mc-pill:focus-visible {
        background: rgba(255,255,255,.13); border-color: var(--p1-cyan); color: #fff;
    }


/* ============================================================
   ICP page components (flyer page 2)
   ============================================================ */

/* Scope the tokens to the ICP pages too */
.mc-icp-page, .mc-ledgers, .mc-questions, .mc-practical, .mc-icp-hero, .mc-excellence {
    --p1-navy:#0F172A; --p1-coral:#F97066; --p1-violet:#8B5CF6;
    --p1-cyan:#22D3EE; --p1-green:#22C55E; --p1-orange:#F59E0B;
    --p1-ink:#0F172A; --p1-body:#475569; --p1-line:#E2E8F0;
    --p1-onnavy:#A6B2E4;
}

/* ---- ICP page hero (navy, mirrors the flyer's dark ground) ---- */
.mc-icp-hero {
    position: relative;
    background: linear-gradient(150deg, #101736 0%, #0F172A 45%, #141C42 100%);
    padding: 150px 0 80px;
    overflow: hidden;
}
.mc-icp-hero::after {
    content: ''; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(60% 80% at 85% 10%, color-mix(in srgb, var(--accent, #22D3EE) 16%, transparent) 0%, transparent 70%);
}
.mc-icp-hero > .container { position: relative; z-index: 1; }
.mc-icp-hero__eyebrow {
    font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--p1-orange); margin-bottom: 1rem;
}
.mc-icp-hero__title {
    font-family: 'Fraunces', Georgia, serif; font-weight: 700;
    font-size: clamp(2.1rem, 5vw, 3.6rem); line-height: 1.08; color: #fff;
    margin-bottom: 1.2rem; letter-spacing: -0.01em; text-wrap: balance;
}
.mc-icp-hero__title span {
    display: block;
    background: linear-gradient(96deg, var(--p1-coral) 0%, var(--p1-violet) 52%, var(--p1-cyan) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent; padding-bottom: .08em;
}
.mc-icp-hero__lede { color: #CBD5E1; font-size: 1.05rem; line-height: 1.7; max-width: 62rem; margin-bottom: 1.6rem; }
.mc-icp-hero__lede strong { color: #fff; font-weight: 700; }
.mc-icp-hero__ctas { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-bottom: 1.4rem; }

/* Dark-ground journey variant for the ICP page hero */
.mc-icp-hero .mc-journey__label { color: #fff; }
.mc-icp-hero .mc-journey__sub { color: var(--p1-onnavy); }
.mc-icp-hero .mc-journey-hint { color: var(--p1-onnavy); }

/* ---- Three ledgers: More Revenue / Better Experience / Panel Capacity ---- */
.mc-ledgers { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-top: 2.4rem; }
@media (max-width: 991px) { .mc-ledgers { grid-template-columns: 1fr; } }
.mc-ledgers__card {
    background: #fff; border: 1px solid var(--p1-line); border-top: 3px solid var(--led, var(--p1-green));
    border-radius: 14px; padding: 1.6rem 1.5rem;
}
.mc-ledgers__card--revenue  { --led: var(--p1-green); }
.mc-ledgers__card--experience { --led: var(--p1-cyan); }
.mc-ledgers__card--capacity { --led: var(--p1-violet); }
.mc-ledgers__card h3 {
    font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.25rem;
    color: var(--p1-ink); margin-bottom: .5rem;
}
.mc-ledgers__rule { width: 42px; height: 3px; background: var(--led); border-radius: 3px; margin-bottom: 1.1rem; }
.mc-ledgers__list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.mc-ledgers__list li { position: relative; padding-left: 1.1rem; font-size: .93rem; line-height: 1.6; color: var(--p1-body); }
.mc-ledgers__list li::before {
    content: ''; position: absolute; left: 0; top: .55em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--led);
}
.mc-ledgers__list b { color: var(--p1-ink); font-weight: 700; }

/* ---- "Questions that used to live in someone's head" ---- */
.mc-questions { background: #0F172A; border-radius: 16px; padding: 2rem 2rem 1.6rem; margin-top: 2.6rem; }
.mc-questions__head {
    font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--p1-onnavy); margin-bottom: 1.3rem;
}
.mc-questions__row {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1.2rem;
    padding: .85rem 0; border-bottom: 1px solid rgba(255,255,255,.08); flex-wrap: wrap;
}
.mc-questions__row:last-child { border-bottom: none; }
.mc-questions__q {
    font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
    font-size: 1.02rem; color: #E2E8F0; margin: 0;
}
.mc-questions__a { font-size: .95rem; color: #CBD5E1; margin: 0; text-align: right; flex: 1 1 auto; }
.mc-questions__a b { font-weight: 700; }
.mc-questions__a .q-gated    { color: var(--p1-cyan); }
.mc-questions__a .q-checked  { color: var(--p1-coral); }
.mc-questions__a .q-ranked   { color: var(--p1-violet); }
.mc-questions__a .q-done     { color: var(--p1-green); }
.mc-questions__a .q-money    { color: var(--p1-orange); }
@media (max-width: 767px) { .mc-questions__a { text-align: left; } }

/* ---- Practical questions, answered up front (objection preemption) ---- */
.mc-practical { margin-top: 2.6rem; }
.mc-practical__head {
    font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: #64748B; margin-bottom: 1.1rem;
}
.mc-practical__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
@media (max-width: 991px) { .mc-practical__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575px) { .mc-practical__grid { grid-template-columns: 1fr; } }
.mc-practical__card {
    background: #fff; border: 1px solid var(--p1-line); border-radius: 12px; padding: 1.15rem 1.25rem;
}
.mc-practical__card h4 { font-size: .98rem; font-weight: 700; color: var(--p1-ink); margin-bottom: .45rem; }
.mc-practical__card p { font-size: .89rem; line-height: 1.55; color: var(--p1-body); margin: 0; }

/* ---- Clinical / Financial excellence columns ---- */
.mc-excellence { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2.4rem; }
@media (max-width: 767px) { .mc-excellence { grid-template-columns: 1fr; } }
.mc-excellence__col {
    background: #fff; border: 1px solid var(--p1-line);
    border-top: 3px solid var(--exc, var(--p1-green)); border-radius: 14px; padding: 1.5rem;
}
.mc-excellence__col--clinical { --exc: var(--p1-green); }
.mc-excellence__col--financial { --exc: var(--p1-orange); }
.mc-excellence__col h3 {
    font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: 1.2rem;
    color: var(--p1-ink); margin-bottom: 1rem;
}
.mc-excellence__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; }
.mc-excellence__col li { position: relative; padding-left: 1.1rem; font-size: .93rem; color: var(--p1-body); line-height: 1.55; }
.mc-excellence__col li::before {
    content: ''; position: absolute; left: 0; top: .5em;
    width: 7px; height: 7px; border-radius: 50%; background: var(--exc);
}

/* ---- Section rhythm on ICP pages ---- */
.mc-icp-sec { padding: 4.2rem 0; background: #FFFFFF; }
.mc-icp-sec--alt { background: #F7F9FC; }
.mc-icp-sec__title {
    font-family: 'Fraunces', Georgia, serif; font-weight: 700;
    font-size: clamp(1.7rem, 3.4vw, 2.5rem); line-height: 1.15; color: var(--p1-ink);
    margin-bottom: .7rem; text-wrap: balance;
}
.mc-icp-sec__title span {
    background: linear-gradient(96deg, var(--p1-coral) 0%, var(--p1-violet) 52%, var(--p1-cyan) 100%);
    -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
}
.mc-icp-sec__eyebrow {
    font-size: .74rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
    color: var(--p1-orange-ink); margin-bottom: .8rem;
}
.mc-icp-sec__lede { font-size: 1rem; line-height: 1.7; color: var(--p1-body); max-width: 62rem; }
.mc-icp-sec__lede strong { color: var(--p1-ink); }

/* ---- Closing CTA band (the flyer's orange ask) ---- */
.mc-ask {
    background: linear-gradient(100deg, #F97316 0%, #FB7185 100%);
    border-radius: 18px; padding: 2.2rem 2.4rem;
    display: flex; align-items: center; justify-content: space-between; gap: 1.6rem; flex-wrap: wrap;
}
.mc-ask__title {
    font-family: 'Fraunces', Georgia, serif; font-weight: 700; font-size: clamp(1.4rem, 3vw, 2rem);
    color: #2A1206; margin-bottom: .4rem; line-height: 1.2;
}
.mc-ask__sub { color: #40200E; font-size: .98rem; margin: 0; max-width: 42rem; line-height: 1.6; }
.mc-ask__chips { display: flex; flex-direction: column; gap: .6rem; flex: none; }
.mc-ask__chip {
    display: inline-flex; align-items: center; gap: .5rem; text-decoration: none;
    background: #0F172A; color: #fff; font-weight: 600; font-size: .92rem;
    border-radius: 100px; padding: .6rem 1.2rem; white-space: nowrap;
    transition: transform .15s ease, background .15s ease;
}
.mc-ask__chip:hover, .mc-ask__chip:focus-visible { background: #1E293B; color: #fff; transform: translateY(-1px); }
.mc-ask__chip span { color: var(--p1-onnavy); }
@media (max-width: 767px) { .mc-ask { padding: 1.7rem 1.5rem; } .mc-ask__chips { width: 100%; } }


/* ============================================================
   ICP picker - the three practices, made unmissable
   ============================================================ */
.mc-picks {
    --p1-navy:#0F172A; --p1-coral:#F97066; --p1-violet:#8B5CF6;
    --p1-cyan:#22D3EE; --p1-green:#22C55E; --p1-orange:#F59E0B;
    --p1-ink:#0F172A; --p1-body:#475569; --p1-line:#E2E8F0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; margin-top: 3rem;
}
@media (max-width: 991px) { .mc-picks { grid-template-columns: 1fr; gap: 1.2rem; } }

.mc-pick {
    --pick: var(--p1-cyan);
    position: relative; display: flex; flex-direction: column;
    text-decoration: none; isolation: isolate;
    background: #fff; border: 1px solid var(--p1-line); border-radius: 20px;
    padding: 2.4rem 1.9rem 1.9rem; overflow: hidden;
    box-shadow: 0 2px 10px rgba(15,23,42,.05);
    transition: transform .28s cubic-bezier(.2,.8,.2,1), box-shadow .28s ease, border-color .28s ease;
}
/* accent wash behind the name */
.mc-pick::before {
    content: ''; position: absolute; inset: 0 0 auto; height: 190px; z-index: -1;
    background: radial-gradient(120% 100% at 0% 0%, color-mix(in srgb, var(--pick) 22%, transparent) 0%, transparent 68%);
}
/* thick accent cap */
.mc-pick::after {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    background: linear-gradient(90deg, var(--pick) 0%, color-mix(in srgb, var(--pick) 35%, #fff) 100%);
}
.mc-pick:hover, .mc-pick:focus-visible {
    transform: translateY(-8px);
    border-color: color-mix(in srgb, var(--pick) 55%, var(--p1-line));
    box-shadow: 0 22px 48px color-mix(in srgb, var(--pick) 26%, transparent);
}
.mc-pick--cyan   { --pick: var(--p1-cyan); }
.mc-pick--green  { --pick: var(--p1-green); }
.mc-pick--violet { --pick: var(--p1-violet); }

.mc-pick__icon {
    width: 56px; height: 56px; border-radius: 16px; margin-bottom: 1.15rem;
    display: flex; align-items: center; justify-content: center;
    background: var(--pick); color: #fff; font-size: 1.4rem;
    box-shadow: 0 8px 22px color-mix(in srgb, var(--pick) 45%, transparent);
}
.mc-pick__name {
    font-family: 'Fraunces', Georgia, serif; font-weight: 700;
    font-size: clamp(1.65rem, 2.5vw, 2.15rem); line-height: 1.08;
    color: var(--p1-ink); margin: 0 0 .9rem; letter-spacing: -0.015em; text-wrap: balance;
}
.mc-pick__hook {
    font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
    font-size: 1.02rem; line-height: 1.45; color: var(--p1-ink);
    margin: 0 0 .85rem; padding-left: .9rem; border-left: 3px solid var(--pick);
}
.mc-pick__text { font-size: .95rem; line-height: 1.6; color: var(--p1-body); margin: 0 0 1.4rem; flex: 1 1 auto; }
.mc-pick__link {
    display: inline-flex; align-items: center; gap: .5rem;
    font-size: .92rem; font-weight: 700; color: var(--p1-ink);
}
.mc-pick__link i { transition: transform .25s ease; color: var(--pick); }
.mc-pick:hover .mc-pick__link i { transform: translateY(3px); }


/* ============================================================
   Tagline: "Complex care, simplified."
   The mark enacts the line - three tangled strands (the three
   ledgers / three ICPs / the mess coming in) resolving into one
   clean thread. Draws once on load; still and legible if the
   viewer prefers reduced motion.
   ============================================================ */
.mc-tagline {
    display: inline-flex; align-items: center; gap: .8rem;
    margin-bottom: 1.15rem;
}
.mc-tagline__mark { width: 74px; height: 26px; flex: none; overflow: visible; }
.mc-tagline__mark path { fill: none; stroke-linecap: round; stroke-width: 1.7; }
.mc-tagline__strand--1 { stroke: #F97066; }
.mc-tagline__strand--2 { stroke: #8B5CF6; }
.mc-tagline__strand--3 { stroke: #22D3EE; }
.mc-tagline__thread { stroke: #FFFFFF; stroke-width: 2.2; }

.mc-tagline__text {
    font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
    font-size: 1.05rem; letter-spacing: .005em; white-space: nowrap;
}
.mc-tagline__complex { color: #A6B2E4; }
.mc-tagline__simple { color: #FFFFFF; }

/* draw-on: strands first, then the single thread */
@media (prefers-reduced-motion: no-preference) {
    .mc-tagline__mark path { stroke-dasharray: 46; stroke-dashoffset: 46; }
    .mc-tagline__strand--1 { animation: mc-draw .55s ease-out .15s forwards; }
    .mc-tagline__strand--2 { animation: mc-draw .55s ease-out .28s forwards; }
    .mc-tagline__strand--3 { animation: mc-draw .55s ease-out .41s forwards; }
    .mc-tagline__thread    { animation: mc-draw .5s  ease-out .72s forwards; }
    .mc-tagline__text { opacity: 0; animation: mc-fade .6s ease-out .55s forwards; }
}
@keyframes mc-draw { to { stroke-dashoffset: 0; } }
@keyframes mc-fade { to { opacity: 1; } }

@media (max-width: 575px) {
    .mc-tagline { gap: .6rem; }
    .mc-tagline__mark { width: 58px; height: 22px; }
    .mc-tagline__text { font-size: .95rem; }
}


/* ------------------------------------------------------------
   Dark-page variant. demo.html is a navy page with a dark form
   card, so the light component defaults must not be forced onto
   it - these keep the section transparent and flip the card
   treatment instead.
   ------------------------------------------------------------ */
.mc-icp-sec--dark { background: transparent; }
.mc-icp-sec--dark .mc-icp-sec__title { color: #FFFFFF; }
.mc-icp-sec--dark .mc-icp-sec__lede { color: #CBD5E1; }
.mc-icp-sec--dark .mc-icp-sec__lede strong { color: #FFFFFF; }
.mc-icp-sec--dark .mc-practical__head { color: var(--p1-onnavy); }
.mc-icp-sec--dark .mc-journey__label { color: #FFFFFF; }
.mc-icp-sec--dark .mc-journey__sub,
.mc-icp-sec--dark .mc-journey-hint { color: var(--p1-onnavy); }

.mc-icp-sec--dark .mc-icp__card,
.mc-icp-sec--dark .mc-practical__card,
.mc-icp-sec--dark .mc-icp__proof,
.mc-icp-sec--dark .mc-icp__ai {
    background: rgba(255, 255, 255, .045);
    border-color: rgba(255, 255, 255, .14);
}
.mc-icp-sec--dark .mc-icp__card h4,
.mc-icp-sec--dark .mc-practical__card h4 { color: #FFFFFF; }
.mc-icp-sec--dark .mc-icp__card p,
.mc-icp-sec--dark .mc-practical__card p,
.mc-icp-sec--dark .mc-icp__proof,
.mc-icp-sec--dark .mc-icp__ai { color: #CBD5E1; }
.mc-icp-sec--dark .mc-icp__ai strong,
.mc-icp-sec--dark .mc-icp__proof strong { color: var(--p1-orange); }
.mc-icp-sec--dark .mc-icp__badge--proof { background: rgba(34,197,94,.18); color: #6EE7B7; }
.mc-icp-sec--dark .mc-icp__badge--ai { background: rgba(139,92,246,.22); color: #C4B5FD; }

/* ------------------------------------------------------------
   Band identifier - names the practice before the argument
   starts, so a visitor scrolling into a band knows instantly
   whether it is theirs. Echoes the picker card's icon tile.
   ------------------------------------------------------------ */
.mc-icp__id {
    display: inline-flex; align-items: center; gap: .85rem;
    margin-bottom: 1.4rem; padding: .5rem 1.15rem .5rem .5rem;
    background: color-mix(in srgb, var(--icp) 12%, #fff);
    border: 1px solid color-mix(in srgb, var(--icp) 38%, transparent);
    border-radius: 100px;
}
.mc-icp__id-icon {
    width: 40px; height: 40px; border-radius: 50%; flex: none;
    display: flex; align-items: center; justify-content: center;
    background: var(--icp); color: #fff; font-size: 1rem;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--icp) 45%, transparent);
}
.mc-icp__id-name {
    font-family: 'Fraunces', Georgia, serif; font-weight: 700;
    font-size: 1.35rem; line-height: 1.1; color: var(--p1-ink); letter-spacing: -0.01em;
}
@media (max-width: 575px) {
    .mc-icp__id-name { font-size: 1.15rem; }
    .mc-icp__id-icon { width: 34px; height: 34px; font-size: .9rem; }
}


/* ------------------------------------------------------------
   Picker card footer: the card stays fully clickable via a
   stretched link, with the flyer download sitting above it so
   both targets work. .mc-pick is a <div> for valid nesting.
   ------------------------------------------------------------ */
.mc-pick { position: relative; }
.mc-pick__foot {
    display: flex; align-items: center; justify-content: space-between;
    gap: .75rem; margin-top: auto;
}
.mc-pick__link::after {
    content: ''; position: absolute; inset: 0; z-index: 1; border-radius: 20px;
}
.mc-pick__dl {
    position: relative; z-index: 2; flex: none;
    display: inline-flex; align-items: center; gap: .4rem;
    font-size: .78rem; font-weight: 700; text-decoration: none;
    color: var(--p1-body); background: #fff;
    border: 1px solid var(--p1-line); border-radius: 100px;
    padding: .38rem .75rem; white-space: nowrap;
    transition: border-color .2s, color .2s, background .2s;
}
.mc-pick__dl:hover, .mc-pick__dl:focus-visible {
    border-color: var(--pick); color: var(--p1-ink);
    background: color-mix(in srgb, var(--pick) 10%, #fff);
}
.mc-pick__dl i { color: var(--pick); }
@media (max-width: 400px) {
    .mc-pick__foot { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* ------------------------------------------------------------
   Who the platform is actually for. Three beneficiaries, given
   equal weight - the emotional counterpart to the two ledgers
   in the hero.
   ------------------------------------------------------------ */
.mc-forwhom {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: wrap; gap: .9rem; margin-top: 1.5rem;
}
.mc-forwhom__item {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
    font-size: 1.02rem; color: #E2E8F0;
}
.mc-forwhom__item:nth-child(1) i { color: var(--p1-cyan); }
.mc-forwhom__item:nth-child(3) i { color: var(--p1-green); }
.mc-forwhom__item:nth-child(5) i { color: var(--p1-violet); }
.mc-forwhom__sep {
    width: 5px; height: 5px; border-radius: 50%;
    background: rgba(255,255,255,.28); flex: none;
}
@media (max-width: 575px) {
    .mc-forwhom { gap: .6rem; }
    .mc-forwhom__item { font-size: .94rem; }
    .mc-forwhom__sep { display: none; }
}

/* ============================================================
   MOBILE: the journey is the whole sales story, so it must not
   hide behind a horizontal swipe. Below 768px it becomes a
   vertical timeline that reads with the natural scroll.
   ============================================================ */
@media (max-width: 767px) {
    /* Legibility floor - this audience skews 50+ */
    .mc-icp-hero__eyebrow,
    .mc-icp-sec__eyebrow,
    .mc-practical__head,
    .mc-questions__head { font-size: .82rem; letter-spacing: .12em; }
    .mc-icp__chip { font-size: .88rem; }
    .mc-ledgers__list li,
    .mc-icp__card p,
    .mc-practical__card p { font-size: .95rem; }

    /* Closing ask: the founder chip's long email was forcing the band
       wider than its container. Let it wrap instead. */
    .mc-ask { padding: 1.6rem 1.25rem; }
    .mc-ask__chips { width: 100%; }
    .mc-ask__chip {
        white-space: normal; justify-content: center; text-align: center;
        width: 100%; line-height: 1.35; padding: .7rem 1rem;
    }
    .mc-ask__chip span { display: block; }
}

/* Long CTA labels must wrap on phones. .mc-btn is nowrap by default,
   so "Bring us your most difficult referral or protocol" rendered
   478px wide inside a 351px column and had its tail clipped off-screen. */
@media (max-width: 767px) {
    .mc-icp__cta,
    .mc-icp-hero__ctas,
    .mc-hero__ctas,
    .mc-cta-buttons {
        flex-direction: column; align-items: stretch; width: 100%;
    }
    .mc-icp__cta .mc-btn,
    .mc-icp-hero__ctas .mc-btn,
    .mc-hero__ctas .mc-btn,
    .mc-cta-buttons .mc-btn {
        white-space: normal; text-align: center; width: 100%;
        line-height: 1.3; padding-top: .95rem; padding-bottom: .95rem;
    }
    .mc-icp__cta-note { text-align: center; }
}

/* 5-step track (demo page) keeps its spread on wide screens only;
   below 768px it inherits the vertical timeline like every other. */
@media (min-width: 768px) {
    .mc-journey--five { min-width: 640px; }
}
@media (max-width: 767px) {
    .mc-journey--five { min-width: 0; }
    .mc-icp__eyebrow,
    .mc-ledger__head { font-size: .82rem; letter-spacing: .12em; }
}

/* Any large CTA button sitting alone in a centred column must wrap on
   phones too - these live outside the CTA containers handled above. */
@media (max-width: 767px) {
    .mc-btn--lg {
        white-space: normal;
        max-width: 100%;
        line-height: 1.3;
    }
}

/* ============================================================
   The eight-step journey needs ~900px to lay out horizontally,
   so it stays a vertical timeline all the way up through tablet
   portrait. Only real desktop width gets the horizontal track.
   (The five-step demo track fits from 768px, so it is exempt
   above that width.)
   ============================================================ */
@media (max-width: 991px) {
    .mc-journey-wrap { overflow: visible; margin: 1.8rem 0 1.6rem; padding-bottom: 0; }
    .mc-journey {
        display: grid; grid-auto-flow: row; grid-auto-columns: auto;
        min-width: 0; width: 100%;
    }
    .mc-journey__step {
        display: grid; grid-template-columns: 46px 1fr; align-items: start;
        column-gap: 1rem; text-align: left; padding: 0 0 1.35rem 0;
    }
    .mc-journey__step:last-child { padding-bottom: 0; }
    .mc-journey__step::before {
        display: block; top: 46px; bottom: 0; left: 22px;
        width: 2px; height: auto; opacity: .4;
    }
    .mc-journey__step:first-child::before { display: block; }
    .mc-journey__step:last-child::before { display: none; }
    .mc-journey__dot { width: 46px; height: 46px; margin: 0; grid-row: span 2; align-self: start; }
    .mc-journey__label { font-size: 1rem; align-self: center; padding-top: .35rem; }
    .mc-journey__sub { font-size: .875rem; margin-top: .1rem; }
    .mc-journey-hint { display: none; }
}

/* The five-step track fits from tablet portrait up - restore it there. */
@media (min-width: 768px) and (max-width: 991px) {
    .mc-journey--five { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(112px, 1fr); min-width: 0; }
    .mc-journey--five .mc-journey__step {
        display: block; text-align: center; padding: 0 .35rem;
    }
    .mc-journey--five .mc-journey__step::before {
        top: 25px; left: -50%; width: 100%; height: 2px; bottom: auto; opacity: .45;
    }
    .mc-journey--five .mc-journey__step:first-child::before { display: none; }
    .mc-journey--five .mc-journey__step:last-child::before { display: block; }
    .mc-journey--five .mc-journey__dot { width: 50px; height: 50px; margin: 0 auto .7rem; grid-row: auto; }
    .mc-journey--five .mc-journey__label { font-size: .84rem; padding-top: 0; }
    .mc-journey--five .mc-journey__sub { font-size: .73rem; }
}