/* =========================================
   MESSAGING WORKSHOP PAGE
   Page-scoped under .messaging-page so nothing leaks.
   Section blocks: 01-hero / 02-attention / 03-confetti / 04-touch /
   05-wins / 06-intro / 07-pricing / 08-pair / 09-video /
   10-expect / 11-help / 12-tryit / 13-start / 14-faq /
   15-next / 16-action / 17-leader
   ========================================= */

.messaging-page {
    --msg-cream:        #faf2dc;
    --msg-lav-soft:     #dee2f4;
    --msg-lav-band:     #d4d8f7;
    --msg-lav-deep:     #a8b3d8;
    --msg-yellow:       #f6bf00;
    --msg-blue:         #0152f5;
    --msg-blue-soft:    #c0c8ee;
    --msg-red:          #ff512d;
    --msg-lav-hl:       #b8c0fb; /* highlight bar behind "Collaborative" / "Messaging Workshop" */
}

/* =========================================
   STYLE-TOKEN MIXINS (page-scoped)
   Reuse via single class names that map 1:1 to STYLE-TOKENS.md.
   ========================================= */
.messaging-page .section-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 5.1vw, 4.5rem);
    line-height: 1.08;
    color: var(--clr-navy);
    text-align: center;
    margin: 0 0 30px;
    letter-spacing: -0.3px;
}
/* Typography from .section-sublede (style.css). Layout only here. */
.messaging-page .section-sub {
    text-align: center;
}
.messaging-page .section-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    line-height: 1.65;
    color: var(--clr-navy);
    letter-spacing: 0.4px;
}

/* ============== 01. HERO ============== */
.msg-hero {
    position: relative;
    background: #fff;
    padding: 130px 0 110px;
    overflow: hidden;
}
.msg-hero-grid {
    display: grid;
    grid-template-columns: 1.45fr 1fr;
    gap: clamp(24px, 3vw, 48px);
    align-items: center;
}
.msg-hero-content { padding-left: clamp(8px, 3vw, 60px); }
.msg-hero-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 4.8vw, 4.4rem);
    line-height: 1.06;
    color: var(--clr-navy);
    margin: 0 0 24px;
    letter-spacing: -0.4px;
}
.msg-hero-title .line { display: block; white-space: nowrap; }

/* "WHY" — circled with hand-drawn lavender ellipse (recolor blue-circle-scribble.svg) */
.msg-hero-circle {
    position: relative;
    display: inline-block;
    padding: 0 0.22em 0.05em;
}
.msg-hero-circle::after {
    content: "";
    position: absolute;
    inset: -10% -10% -12% -10%;
    background: url('../assets/images/blue-circle-scribble.svg') no-repeat center / 100% 100%;
    /* Recolor the blue-stroked SVG to lavender via filter (Option A) */
    filter:
        brightness(0) saturate(100%)
        invert(63%) sepia(38%) saturate(660%) hue-rotate(204deg) brightness(94%) contrast(96%);
    pointer-events: none;
    z-index: 1;
}

/* "your business" — thick yellow bar under (linear-gradient so it paints on the element directly) */
.msg-hero-yellow {
    display: inline-block;
    font-weight: 500;
    padding: 0 0.02em;
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 86%,
        var(--msg-yellow) 86%,
        var(--msg-yellow) 100%
    );
    background-repeat: no-repeat;
}

/* "what to say" — thick straight red underline */
.msg-hero-redstroke {
    display: inline-block;
    padding-bottom: 0.04em;
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 88%,
        var(--msg-red) 88%,
        var(--msg-red) 100%
    );
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 100%;
}

/* Typography from .section-sublede (style.css). max-width tuned so "for"
   lands at the end of line 1 ("A collaborative Messaging Workshop for"). */
.msg-hero-lede {
    margin: 0 0 36px;
    max-width: 560px;
}

.msg-hero .btn-lavender {
    background: #8090ff;
    color: #fff;
    border-color: #8090ff;
    padding: 16px 38px;
    font-size: 0.74rem;
    letter-spacing: 0.16em;
}

/* Photo card — smaller, more vertical. overflow:visible so decor anchored INSIDE
   can break past the rounded corners; the img is independently clipped via
   border-radius so the zoomed photo stays inside the card shape. */
.msg-hero-photo {
    position: relative;
    aspect-ratio: 1 / 1.18;
    background: #b9a3e1;
    border-radius: 28px;
    overflow: visible;
    max-width: 400px;
    margin-left: auto;
}
.msg-hero-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 25%;
    transform: scale(1.18);
    transform-origin: center 35%;
    display: block;
    border-radius: 28px;
    clip-path: inset(0 round 28px);
}

/* Brand decor shapes — render the canonical SVG assets via CSS mask so we can
   re-tint without forking the source files. See STYLE-TOKENS.md > Brand
   decorative shapes for the catalog. */
.msg-hero-decor {
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: center;
            mask-position: center;
    -webkit-mask-size: contain;
            mask-size: contain;
}

/* Red dot — brand-yellow-circle.svg re-tinted to red */
.msg-hero-decor--red-dot {
    position: absolute;
    top: 38%;
    left: 3%;
    width: 38px;
    height: 38px;
    background-color: var(--msg-red);
    -webkit-mask-image: url('../assets/images/SVG/brand-yellow-circle.svg');
            mask-image: url('../assets/images/SVG/brand-yellow-circle.svg');
}
/* Blue half-circle — brand-half-blue-circle.svg in its native orientation
   (flat-side right). Anchored at the photo card's top-right edge so the curve
   bulges over the photo and the flat side hangs off to the right. */
.msg-hero-decor--blue-half {
    position: absolute;
    top: -25px;
    right: -16px;
    width: 32px;
    height: 50px;
    background-color: #0152f5;
    -webkit-mask-image: url('../assets/images/SVG/brand-half-blue-circle.svg');
            mask-image: url('../assets/images/SVG/brand-half-blue-circle.svg');
}
/* Lavender triangle (point-down) — brand-lavender-triangle-upsidedown.svg.
   Sits just under the photo card, slightly left of the photo's horizontal center. */
.msg-hero-decor--lav-tri {
    position: absolute;
    bottom: 40px;
    right: 25%;
    width: 56px;
    height: 56px;
    background-color: #8090ff;
    -webkit-mask-image: url('../assets/images/SVG/brand-lavender-triangle-upsidedown.svg');
            mask-image: url('../assets/images/SVG/brand-lavender-triangle-upsidedown.svg');
}

/* ============== 02. ATTENTION ============== */
.msg-attention {
    background: var(--msg-lav-soft);
    padding: var(--section-py-lg) 0 calc(var(--section-py-lg) - 20px);
}
.msg-attention-container { text-align: center; }
.msg-attention-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 1.18;
    color: var(--clr-navy);
    margin: 0 0 30px;
    letter-spacing: -0.2px;
}
.msg-attention-title .line { display: block; }

/* "clear messaging." — red rectangle border w/ tight padding */
.msg-attention-rect {
    position: relative;
    display: inline-block;
    padding: 4px 14px 6px;
    font-weight: 500;
}
.msg-attention-rect::before {
    content: "";
    position: absolute;
    inset: 0;
    border: 2px solid var(--msg-red);
    border-radius: 4px;
    /* slight hand-drawn imperfection via skew */
    transform: rotate(-0.4deg);
    pointer-events: none;
}

/* Typography from .section-sublede (style.css). Layout only here. */
.msg-attention-lede {
    max-width: 820px;
    margin: 0 auto 36px;
}
/* body-large per STYLE-TOKENS */
.msg-attention-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    max-width: 640px;
    margin: 0 auto 60px;
    letter-spacing: 0.4px;
}

.msg-attention-icons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    max-width: 700px;
    margin: 0 auto;
}
.msg-att-icon { text-align: center; }
.msg-att-svg {
    width: 84px;
    height: 84px;
    display: inline-block;
    margin-bottom: 18px;
    object-fit: contain;
}
/* "you do / you help / it matters" — typography from .section-sublede. */
.msg-att-label {
    margin: 0;
}
/* WHAT / WHO / WHY — bigger, weight 500 per brand bold rule */
.msg-att-label strong {
    display: inline-block;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: clamp(1.85rem, 2.4vw, 2.2rem);
    line-height: 1.05;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

/* ============== 03. CONFETTI BAND ==============
   Tile rendered at 50% height (auto 50%) so each motif is half-size — that
   doubles how many tiles fit horizontally and crisps up the rendering.
   Negative margin pulls the strip up so it visibly STRADDLES the seam between
   the lavender Attention section above and the cream Touchpoints section below
   (transparent bg so both sections show through). */
/* Centered on the seam between Attention (lavender) and Touchpoints (yellow 14%).
   Equal negative margins top/bottom = element straddles the boundary, half on
   each section's bg. Transparent fill so both colors show through the gaps. */
.msg-confetti {
    position: relative;
    height: 36px;
    margin: -18px 0;
    background: url('../assets/images/pattern.png') repeat-x center / auto 50%;
    background-color: transparent;
    z-index: 2;
    pointer-events: none;
}

/* ============== 04. TOUCHPOINTS ============== */
.msg-touch {
    background: rgba(246, 191, 0, 0.14);
    padding: var(--section-py-lg) 0 calc(var(--section-py-lg) + 20px);
}
.msg-touch-grid {
    display: grid;
    grid-template-columns: 1.5fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: start;
}
/* Force the lede to break at the authored span.line points (3 lines on desktop) */
.msg-touch-lede .line { display: block; }
.msg-touch-text { padding-top: 14px; }
/* body-large per STYLE-TOKENS — excludes the lede (which uses .section-sublede). */
.msg-touch-text p:not(.msg-touch-lede) {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0 0 22px;
    letter-spacing: 0.4px;
}
/* Typography from .section-sublede (style.css). Selector boosted to beat
   the sibling .msg-touch-text p rule above. */
.msg-touch-text .msg-touch-lede {
    margin: 0 0 32px;
}
/* Layout-only: left-aligned under the column copy, with breathing room above.
   Visual styling comes from canonical .btn .btn-yellow .btn-lg. */
.msg-touch-cta {
    margin-top: 24px;
    align-self: flex-start;
}
.msg-touch-photo {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 1 / 1.1;
    max-width: 460px;
}
.msg-touch-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ============== 05. WHAT CLIENTS ARE SAYING ============== */
.msg-wins {
    position: relative;
    background: #fff;
    padding: var(--section-py-lg) 0;
    overflow: hidden;
}
.msg-wins::before {
    content: "";
    position: absolute;
    inset: 0;
    background: url('../assets/images/SVG/squigly-quote-2.svg') no-repeat center 55% / 110% auto;
    pointer-events: none;
}
.msg-wins-container { text-align: center; position: relative; z-index: 1; }
.msg-wins-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(3rem, 5.1vw, 4.5rem);
    line-height: 1.08;
    color: var(--clr-navy);
    margin: 0 0 30px;
    letter-spacing: -0.3px;
}
/* body-large per STYLE-TOKENS */
.msg-wins-lede {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    max-width: 760px;
    margin: 0 auto 60px;
    letter-spacing: 0.4px;
}

.msg-wins-quote {
    position: relative;
    max-width: 820px;
    margin: 0 auto 40px;
    padding: 0 20px;
}
.msg-wins-mark {
    position: absolute;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 8vw, 7rem);
    line-height: 1;
    color: var(--msg-red);
}
.msg-wins-mark--open  { left: -10px; top: -36px; }
.msg-wins-mark--close { right: -10px; bottom: -56px; }
.msg-wins-body {
    margin: 0;
    padding: 0 30px;
}
/* Typography from .section-sublede (style.css). Layout only here. */
.msg-wins-body p {
    margin: 0;
    font-style: normal;
}
.msg-wins-attr {
    margin-top: 22px;
    font-family: var(--font-mono);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--clr-navy);
    text-transform: uppercase;
}

.msg-wins-dots {
    display: inline-flex;
    gap: 10px;
    align-items: center;
    margin-top: 30px;
}
.msg-wins-dots span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--clr-navy);
    opacity: 0.35;
}
.msg-wins-dots span.is-active { opacity: 1; }

/* ============== 06. WORKSHOP INTRO ============== */
.msg-intro {
    background: var(--msg-cream);
    padding: var(--section-py-lg) 0 var(--section-py);
}
.msg-intro-grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(20px, 3vw, 40px);
    align-items: center;
    margin-bottom: 56px;
}
.msg-intro-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 1.15;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: -0.2px;
}
/* "Collaborative" + "Messaging Workshop" — solid lavender highlight bar BEHIND text.
   Implemented as a linear-gradient on the inline-block so the bar lives in the
   element's own background layer (no z-index trickery needed). */
.msg-intro-hl {
    display: inline-block;
    font-weight: 500;
    padding: 0 0.04em;
    background-image: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 58%,
        var(--msg-lav-hl) 58%,
        var(--msg-lav-hl) 92%,
        transparent 92%
    );
    background-repeat: no-repeat;
}

/* Brand shape composition — single SVG asset arranged 2x2 (red ●, lavender ▼,
   blue half-disc, yellow quatrefoil). Sized to match the mockup reference. */
.msg-intro-shapes {
    display: flex;
    justify-content: center;
    align-items: center;
}
.msg-intro-shapes-img {
    width: 100%;
    max-width: 320px;
    height: auto;
    display: block;
}

.msg-intro-body {
    display: grid;
    grid-template-columns: 1fr 1.5fr;
    gap: clamp(28px, 5vw, 80px);
}
/* Typography from .section-sublede (style.css). Layout only here. */
.msg-intro-pillars p {
    margin: 0 0 10px;
}
.msg-intro-pillars strong { font-weight: 500; }
/* body-large per STYLE-TOKENS */
.msg-intro-copy p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0 0 22px;
    letter-spacing: 0.4px;
}

/* ============== 07. ONE WORKSHOP, TWO WAYS ============== */
.msg-pricing {
    background: var(--msg-lav-band);
    padding: var(--section-py-lg) 0;
}
.msg-pricing-container { text-align: center; }
.msg-pricing-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 1.15;
    color: var(--clr-navy);
    margin: 0 0 60px;
}
.msg-pricing-circle {
    position: relative;
    display: inline-block;
    padding: 0 0.4em 0.1em;
    font-weight: 500;
}
.msg-pricing-circle::after {
    content: "";
    position: absolute;
    inset: -10% -2% -8% -2%;
    background: url('../assets/images/red-circle-scribble.svg') no-repeat center / 100% 100%;
    pointer-events: none;
}

.msg-pricing-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    max-width: 980px;
    margin: 0 auto;
    text-align: left;
}
.msg-price-card {
    position: relative;
    border-radius: 22px;
    padding: 36px 36px 44px;
    color: var(--clr-navy);
    box-shadow: 0 10px 30px -16px rgba(26, 31, 54, 0.18);
}
.msg-price-card--half { background: var(--msg-yellow); }
.msg-price-card--full { background: #b8c0fb; }
.msg-price-card-head {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 16px;
    align-items: start;
    margin-bottom: 22px;
    padding-bottom: 22px;
    border-bottom: 1.5px solid rgba(26, 31, 54, 0.35);
}
.msg-price-card-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.85rem, 2.5vw, 2.3rem);
    line-height: 1.15;
    color: var(--clr-navy);
    margin: 0;
}
.msg-price-card-emph { font-weight: 500; }
/* Price chip — hand-drawn circle from price-circle.svg wrapping the dollar amount */
.msg-price-card-cost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 92px;
    height: 86px;
    background: url('../assets/images/SVG/price-circle.svg') no-repeat center / 100% 100%;
    font-family: var(--font-display);
    font-weight: 500;
    font-size: 1.35rem;
    color: var(--clr-navy);
    flex: 0 0 92px;
    padding-bottom: 4px;
}

.msg-price-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* body-large per STYLE-TOKENS */
.msg-price-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 18px;
    align-items: start;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--clr-navy);
    letter-spacing: 0.4px;
}
.msg-price-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    color: var(--clr-navy);
    margin-top: 2px;
}
.msg-price-check svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.8;
    stroke: currentColor;
    fill: none;
}
.msg-price-sub {
    display: inline-block;
    font-size: 0.92rem;
    letter-spacing: 0.04em;
    color: var(--clr-navy);
    margin-top: 4px;
    opacity: 0.85;
    font-family: var(--font-mono);
}
.msg-price-virtual {
    display: block;
    width: fit-content;
    margin: 22px auto 0;
    padding: 8px 22px;
    border: 1px solid var(--clr-navy);
    border-radius: 999px;
    font-family: var(--font-body);
    font-size: 0.92rem;
    color: var(--clr-navy);
}

/* ============== 08. PAIR IT WITH ============== */
.msg-pair {
    background: #fff;
    padding: 90px 0 var(--section-py-lg);
    position: relative;
}
/* Red triangle pointer — anchored just below the gap between the pricing cards
   (within the lavender pricing band, not at the top of the pair-it-with section). */
.msg-pair-pointer {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -360%);
    width: 0;
    height: 0;
    border-left: 18px solid transparent;
    border-right: 18px solid transparent;
    border-top: 28px solid var(--msg-red);
}
.msg-pair-container { text-align: center; }
.msg-pair-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.4rem, 4vw, 3.6rem);
    line-height: 1.18;
    color: var(--clr-navy);
    margin: 0 0 24px;
}
.msg-pair-title strong { font-weight: 500; }

.msg-pair-pricing {
    display: inline-block;
    padding: 14px 32px;
    border: 1.5px solid var(--msg-red);
    border-radius: 999px;
    color: var(--clr-navy);
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 50px;
}
.msg-pair-grid {
    display: grid;
    grid-template-columns: 0.85fr 1fr;
    gap: clamp(28px, 4vw, 60px);
    align-items: center;
    text-align: left;
    max-width: 1000px;
    margin: 0 auto;
}
.msg-pair-photo {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-width: 360px;
}
.msg-pair-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* body-large per STYLE-TOKENS */
.msg-pair-text p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0 0 20px;
    letter-spacing: 0.4px;
}
.msg-pair-text p strong { font-weight: 500; }
/* Layout-only: breathing room above the CTA. Visual styling comes from
   canonical .btn .btn-lavender .btn-lg. */
.msg-pair-cta { margin-top: 20px; }

.msg-pair-tag {
    position: absolute;
    bottom: 60px;
    right: 6%;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--msg-red);
    font-family: var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 0.78rem;
    line-height: 1.2;
}
.msg-pair-tag-text { display: inline-block; }
.msg-pair-tag-arrow { display: inline-block; }

/* ============== 09. VIDEO BANNER ============== */
.msg-video {
    width: 100%;
    line-height: 0;
}
.msg-video-img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 540px;
    object-fit: cover;
}

/* ============== 10. WHAT TO EXPECT ============== */
.msg-expect {
    background: #f8f3e8;
    padding: var(--section-py-lg) 0;
}
.msg-expect-container { text-align: center; }
.msg-expect-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 4.4vw, 4rem);
    line-height: 1.1;
    color: var(--clr-navy);
    margin: 0 0 14px;
}
/* body-large per STYLE-TOKENS */
.msg-expect-sub {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0 0 50px;
    letter-spacing: 0.4px;
}
/* Underline centered under the highlighted phrase */
.msg-expect-sub-underline {
    position: relative;
    display: inline-block;
    padding-bottom: 4px;
}
.msg-expect-sub-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 2px;
    background: var(--msg-red);
    border-radius: 2px;
}

/* Override case-accordion for messaging skin.
   The PANEL itself owns the lavender background + radius, so the bar and
   the content inside share one shape that morphs from pill (closed) →
   rounded rectangle (open). */
.msg-expect-list { max-width: 760px; margin: 0 auto; text-align: left; background: transparent !important; }
/* A single border-radius for both states keeps the corners visually identical
   (a pill at the closed height, a rounded rectangle at the open height) so
   there's no animation between two different radius values. */
.msg-expect-panel {
    margin-bottom: 14px;
    background: var(--msg-blue-soft);
    border-radius: 32px;
    overflow: hidden;
}
/* Override case-accordion.css's white .case-panel-content bg so the cream
   section shows through (no white strip behind the items). */
.msg-expect-panel .case-panel-content { background: transparent; }

/* section-heading-sm — new token (between section-sublede and section-heading-md) */
.msg-expect-panel .case-panel-bar.msg-expect-bar {
    background: transparent;
    color: var(--clr-navy);
    border-radius: 0;
    padding: 20px 30px;
    text-transform: none;
    letter-spacing: 0;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    line-height: 1.1;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 20px;
    align-items: center;
}
.msg-expect-panel .case-panel-bar.msg-expect-bar:hover { filter: brightness(0.97); }
.msg-expect-num {
    font-family: var(--font-mono);
    font-size: 0.9rem;
    letter-spacing: 0.04em;
    color: var(--clr-navy);
    opacity: 0.55;
    text-transform: lowercase;
    align-self: start;
    padding-top: 0.6em;
}
.msg-expect-label {
    text-align: left;
    font-weight: 400;
}
.msg-expect-toggle {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--msg-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    flex: 0 0 42px;
    position: relative;
}
.msg-expect-toggle-icon {
    width: 20px;
    height: 20px;
    color: #fff;
}
/* Show + by default; show x when open */
.msg-expect-panel .msg-expect-toggle-icon--x    { display: none; }
.msg-expect-panel .msg-expect-toggle-icon--plus { display: inline-block; }
.msg-expect-panel[data-open] .msg-expect-toggle-icon--x    { display: inline-block; }
.msg-expect-panel[data-open] .msg-expect-toggle-icon--plus { display: none; }

.msg-expect-panel .case-panel-content {
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.4s ease;
    background: transparent;
}
.msg-expect-panel[data-open] .case-panel-content { grid-template-rows: 1fr; }
.msg-expect-panel .case-panel-inner.msg-expect-inner {
    padding: 0 32px 0 80px;
    color: var(--clr-navy);
}
.msg-expect-panel[data-open] .case-panel-inner.msg-expect-inner {
    padding: 0 32px 28px 80px;
}
/* body-large per STYLE-TOKENS */
.msg-expect-inner p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: 0.4px;
    max-width: 620px;
}

/* body-large per STYLE-TOKENS */
.msg-expect-outro {
    margin: 50px auto 0;
    max-width: 760px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    letter-spacing: 0.4px;
}

/* ============== 11. WILL HELP YOU ============== */
.msg-help {
    background: #fff;
    padding: var(--section-py-lg) 0;
}
.msg-help-container { text-align: center; }
.msg-help-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 4.4vw, 3.8rem);
    line-height: 1.15;
    color: var(--clr-navy);
    margin: 0 0 80px;
}
.msg-help-title strong { font-weight: 500; }

.msg-help-cols {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: clamp(24px, 4vw, 60px);
    max-width: 1080px;
    margin: 0 auto 60px;
}
.msg-help-col {
    position: relative;
    isolation: isolate;
    text-align: center;
    padding: 16px 0 80px;
    min-height: 420px;
}
/* All three shapes anchor their bottom edge at the same vertical baseline,
   so the row of shapes stays horizontally aligned. Each is sized similarly
   (~200px tall visible) and sits BEHIND the body paragraph. */
.msg-help-shape {
    position: absolute;
    z-index: 0;
    pointer-events: none;
    left: 50%;
    bottom: 24px;
    top: auto;
    transform: translateX(-50%);
}
.msg-help-shape--peach {
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: #f4c1b1;
    opacity: 0.55;
}
/* Yellow half-disc — flat side on the RIGHT, curve sweeping left */
.msg-help-shape--yellow {
    width: 150px;
    height: 250px;
    border-radius: 250px 0 0 250px;
    background: var(--msg-yellow);
    opacity: 0.5;
}
.msg-help-shape--lav {
    width: 0;
    height: 0;
    border-left: 125px solid transparent;
    border-right: 125px solid transparent;
    border-top: 200px solid #b8c0fb;
    opacity: 0.55;
    border-radius: 0;
    background: transparent;
    bottom: 74px;
}
/* section-heading-sm; extra bottom margin pushes the body (and shape) down
   so the shape sits well below the heading above it. */
.msg-help-h {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    line-height: 1.1;
    margin: 0 0 140px;
}
.msg-help-h--red    { color: var(--msg-red); }
.msg-help-h--yellow { color: #d8a800; }
.msg-help-h--blue   { color: var(--msg-blue); }
/* body-large per STYLE-TOKENS */
.msg-help-col p {
    position: relative;
    z-index: 1;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0 auto;
    max-width: 260px;
    letter-spacing: 0.4px;
}
.msg-help-cta-wrap {
    text-align: center;
    margin-top: 24px;
}
/* canonical .btn .btn-red .btn-lg — no per-section padding override */
.msg-help-cta-wrap .btn-red {
    font-size: 0.95rem;
    letter-spacing: 0.08em;
}

/* ============== 12. TRY IT FIRST ============== */
.msg-tryit {
    background: var(--msg-lav-deep);
    padding: var(--section-py-lg) 0;
}
.msg-tryit-grid {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    gap: clamp(28px, 4vw, 56px);
    align-items: end;
}
.msg-tryit-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.9rem, 3.25vw, 2.9rem);
    line-height: 1.08;
    color: var(--clr-navy);
    margin: 0 0 22px;
}
.msg-tryit-title strong { font-weight: 500; }
/* body-large per STYLE-TOKENS */
.msg-tryit-lede {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0 0 30px;
    letter-spacing: 0.4px;
    max-width: 560px;
}
.msg-tryit-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 100%;
}
.msg-tryit-field input {
    width: 100%;
    padding: 18px 28px;
    border: none;
    border-radius: 18px;
    background: #fff;
    color: var(--clr-navy);
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    outline: none;
    transition: box-shadow 0.18s ease;
}
.msg-tryit-field input::placeholder { color: var(--clr-navy); opacity: 0.85; }
.msg-tryit-field input:focus { box-shadow: 0 0 0 2px #8090ff; }
.msg-tryit-submit {
    width: 100%;
    padding: 18px 28px;
    border: 2px solid #8090ff;
    border-radius: 18px;
    background: #8090ff;
    color: #fff;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease;
}
.msg-tryit-submit:hover { background: #6b75ff; border-color: #6b75ff; }

.msg-tryit-photo {
    position: relative;
    border-radius: 22px;
    overflow: visible;
    max-width: 460px;
    margin-left: auto;
}
.msg-tryit-photo > img:first-of-type {
    width: 100%;
    height: auto;
    border-radius: 22px;
    display: block;
    aspect-ratio: 5 / 4;
    object-fit: cover;
    object-position: 60% center;
}
/* Blue asterisk SVG, slow continuous spin on its center axis.
   Small, anchored just OFF the right edge of the photo near the top. */
img.msg-tryit-asterisk {
    position: absolute;
    top: 24px;
    right: -28px;
    width: 64px;
    height: 64px;
    transform-origin: 50% 50%;
    animation: msg-tryit-spin 12s linear infinite;
    border-radius: 0;
    aspect-ratio: auto;
}
@keyframes msg-tryit-spin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}
@media (prefers-reduced-motion: reduce) {
    .msg-tryit-asterisk { animation: none; }
}

.msg-tryit-tag {
    position: absolute;
    top: 30px;
    right: -130px;
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-body);
    font-size: 0.7rem;
    line-height: 1.25;
    color: var(--clr-navy);
}

/* ============== 13. HOW TO GET STARTED ==============
   Pattern lifted verbatim from monthly-support.css `.ms-steps*` so both pages
   share one canonical step-card treatment. Same eyebrow + number-over-card
   layout, same colors per step. Only the CTA variant differs (.btn-yellow). */
.ms-steps {
    background: var(--clr-cream);
    padding: var(--section-py) 0;
}
.ms-steps-title {
    text-align: center;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.25vw, 2.9rem);
    line-height: 1.08;
    letter-spacing: 0;
    text-transform: uppercase;
    color: var(--clr-navy);
    margin: 0 0 51px;
}
.ms-steps-title .fx-started {
    text-decoration: underline;
    text-decoration-color: #b2baff;
    text-decoration-thickness: 6px;
    text-underline-offset: 1px;
    text-decoration-skip-ink: none;
}
.ms-steps-title strong { font-weight: 400; }

.ms-steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1100px;
    margin: 0 auto;
    list-style: none;
    padding: 0;
}

.ms-steps-card {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    height: 100%;
}

.ms-steps-eyebrow {
    display: block;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.ms-steps-num {
    width: 68px; height: 68px;
    border-radius: 50%;
    color: #fff;
    font-family: var(--font-display);
    font-weight: 400;
    font-size: 1.85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    margin-bottom: -34px;
    position: relative;
    z-index: 2;
}

.ms-steps-card-body {
    position: relative;
    z-index: 1;
    width: 100%;
    flex: 1;
    background: #fff;
    border-radius: 28px;
    padding: 64px 32px 44px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.04);
}

.ms-steps-card--red .ms-steps-eyebrow,
.ms-steps-card--red h3 { color: var(--clr-red); }
.ms-steps-card--red .ms-steps-num { background: var(--clr-red); }

.ms-steps-card--blue .ms-steps-eyebrow,
.ms-steps-card--blue h3 { color: #0152f5; }
.ms-steps-card--blue .ms-steps-num { background: #0152f5; }

.ms-steps-card--lavender .ms-steps-eyebrow,
.ms-steps-card--lavender h3 { color: #8090ff; }
.ms-steps-card--lavender .ms-steps-num { background: #b2baff; }

.ms-steps-card h3 {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.55rem, 2.15vw, 2rem);
    line-height: 1.1;
    margin: 0 0 28px;
}
.ms-steps-card h3 .line { display: block; }

/* body-large for the description */
.ms-steps-card p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.5;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: 0.4px;
}

.ms-steps-cta {
    text-align: center;
    margin-top: 56px;
}
/* No padding override — uses canonical .btn .btn-yellow .btn-lg */

/* ============== 14. FAQ ============== */
.msg-faq {
    background: #fff;
    padding: var(--section-py-lg) 0;
}
.msg-faq-grid {
    display: grid;
    grid-template-columns: 0.7fr 1.3fr;
    gap: clamp(40px, 6vw, 90px);
    align-items: start;
    max-width: 1000px;
    margin: 0 auto;
}
.msg-faq-heading {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 16px;
}
.msg-faq-title {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(2.2rem, 3.6vw, 3rem);
    line-height: 0.95;
    color: var(--clr-navy);
    margin: 0;
}
.msg-faq-mark {
    width: clamp(38px, 4vw, 56px);
    height: auto;
    align-self: flex-start;
    margin-top: 8px;
}

/* Pill outline lives on the SUMMARY (Q row) so it stays a perfect pill
   regardless of open/closed state. Answer hangs below with no border. */
.msg-faq-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 620px;
}
.msg-faq-item {
    border: none;
    background: transparent;
}
.msg-faq-item summary {
    list-style: none;
    cursor: pointer;
    padding: 16px 28px;
    display: flex;
    align-items: center;
    gap: 18px;
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1rem;
    color: var(--clr-navy);
    letter-spacing: 0.3px;
    border: 1.5px solid #d8d8ea;
    border-radius: 999px;
    background: #fff;
}
.msg-faq-item summary:hover { border-color: #b8b8d4; }
.msg-faq-item summary::-webkit-details-marker,
.msg-faq-item summary::marker { display: none; }
.msg-faq-item[open] summary { cursor: default; }

.msg-faq-label {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--clr-navy);
    flex-shrink: 0;
    min-width: 28px;
}
.msg-faq-q {
    flex: 1;
}

/* Body hangs below the pill, no border */
.msg-faq-a {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 14px 28px 6px;
}
.msg-faq-a > * { min-width: 0; }
.msg-faq-a-label {
    font-family: var(--font-display);
    font-weight: 400;
    font-style: italic;
    font-size: 1.15rem;
    color: var(--clr-navy);
    flex-shrink: 0;
    min-width: 28px;
}
.msg-faq-a-text {
    flex: 1;
}
.msg-faq-a p {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.65;
    color: var(--clr-navy);
    margin: 0 0 12px;
    letter-spacing: 0.4px;
}
.msg-faq-a p:last-child { margin-bottom: 0; }
.msg-faq-a-tag { font-family: var(--font-display) !important; font-style: italic; font-size: 1.1rem !important; }
.msg-faq-a-tag strong { font-style: normal; font-weight: 500; }

/* ============== 15. CLARITY IS JUST THE BEGINNING ============== */
.msg-next {
    background: var(--msg-cream);
    padding: var(--section-py-lg) 0 calc(var(--section-py-lg) + 10px);
}
.msg-next-container { text-align: center; }
/* section-heading-md per STYLE-TOKENS */
.msg-next-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(1.9rem, 3.25vw, 2.9rem);
    line-height: 1.08;
    color: var(--clr-navy);
    margin: 0 0 22px;
    letter-spacing: 0;
}
/* section-heading-sm size, light weight */
.msg-next-sub {
    font-family: var(--font-display);
    font-weight: 300;
    font-size: clamp(1.5rem, 2.1vw, 1.95rem);
    color: var(--clr-navy);
    max-width: 760px;
    margin: 0 auto 24px;
    line-height: 1.1;
}
/* body-large per STYLE-TOKENS */
.msg-next-body {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    max-width: 820px;
    margin: 0 auto 60px;
    letter-spacing: 0.4px;
}

.msg-next-cards {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1080px;
    margin: 0 auto;
}
.msg-next-card {
    position: relative;
    background: #fff;
    border-radius: 18px;
    padding: 42px 22px 36px;
    text-align: center;
    box-shadow: 0 10px 30px -16px rgba(26,31,54,0.16);
    display: flex;
    flex-direction: column;
    overflow: visible;
}
.msg-next-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto 18px;
    display: block;
}
.msg-next-icon--red    { background: var(--msg-red); border-radius: 4px; clip-path: polygon(0% 50%, 12% 0%, 100% 0%, 88% 50%, 100% 100%, 12% 100%); }
.msg-next-icon--blue   { background: var(--msg-blue); border-radius: 50%; }
.msg-next-icon--yellow { background: var(--msg-yellow); border-radius: 4px; }
.msg-next-icon--lav    { background: #8090ff; border-radius: 44px 44px 4px 4px; }
.msg-next-card-title {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 1.4rem;
    line-height: 1.18;
    color: var(--clr-navy);
    margin: 0 0 16px;
}
.msg-next-card p {
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.95rem;
    line-height: 1.55;
    color: var(--clr-navy);
    margin: 0;
    letter-spacing: 0.3px;
}
/* Pill button overlaps the bottom edge of the card (half on card, half off). */
.msg-next-cta {
    position: absolute;
    left: 50%;
    bottom: -20px;
    transform: translateX(-50%);
    display: inline-block;
    padding: 12px 26px;
    border-radius: 999px;
    color: var(--clr-navy);
    font-family: var(--font-mono);
    font-weight: 500;
    font-size: 0.7rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    text-decoration: none;
    transition: filter 0.18s ease;
    white-space: nowrap;
}
.msg-next-cta:hover { filter: brightness(1.06); color: var(--clr-navy); }
.msg-next-cta--red    { background: var(--msg-red); }
.msg-next-cta--blue   { background: var(--msg-blue); }
.msg-next-cta--yellow { background: var(--msg-yellow); }
.msg-next-cta--lav    { background: #8090ff; }

/* ============== 16. SEE CLEAR MESSAGING IN ACTION ============== */
.msg-action {
    position: relative;
    background: var(--msg-lav-deep);
    padding: 340px 0 150px;
    /* Pull the wavy lavender block up so the wave crests sit AT the title row
       of the previous section's cards. Cards stay above via z-index, so the
       wave reads as a band running BEHIND them with gaps showing through. */
    margin-top: -380px;
    z-index: 0;
}
/* Wavy TOP edge — uniform sine wave (8 full cycles) with bigger amplitude so the
   wave reads boldly behind the overlapping card row above. Cream fill on top
   carves into the lavender, lavender peeks UP through the valleys. */
.msg-action::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 120px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'><path d='M0,60 C 22.5,100 67.5,100 90,60 C 112.5,20 157.5,20 180,60 C 202.5,100 247.5,100 270,60 C 292.5,20 337.5,20 360,60 C 382.5,100 427.5,100 450,60 C 472.5,20 517.5,20 540,60 C 562.5,100 607.5,100 630,60 C 652.5,20 697.5,20 720,60 C 742.5,100 787.5,100 810,60 C 832.5,20 877.5,20 900,60 C 922.5,100 967.5,100 990,60 C 1012.5,20 1057.5,20 1080,60 C 1102.5,100 1147.5,100 1170,60 C 1192.5,20 1237.5,20 1260,60 C 1282.5,100 1327.5,100 1350,60 C 1372.5,20 1417.5,20 1440,60 L1440,0 L0,0 Z' fill='%23faf2dc'/></svg>") no-repeat top center / 100% 100%;
    z-index: 1;
}
/* Wavy BOTTOM edge — same uniform sine wave, lavender domes down into white */
.msg-action::after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    right: 0;
    height: 70px;
    background:
        url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,35 C 22.5,13 67.5,13 90,35 C 112.5,57 157.5,57 180,35 C 202.5,13 247.5,13 270,35 C 292.5,57 337.5,57 360,35 C 382.5,13 427.5,13 450,35 C 472.5,57 517.5,57 540,35 C 562.5,13 607.5,13 630,35 C 652.5,57 697.5,57 720,35 C 742.5,13 787.5,13 810,35 C 832.5,57 877.5,57 900,35 C 922.5,13 967.5,13 990,35 C 1012.5,57 1057.5,57 1080,35 C 1102.5,13 1147.5,13 1170,35 C 1192.5,57 1237.5,57 1260,35 C 1282.5,13 1327.5,13 1350,35 C 1372.5,57 1417.5,57 1440,35 L1440,70 L0,70 Z' fill='%23ffffff'/></svg>") no-repeat bottom center / 100% 100%;
    z-index: 1;
}

.msg-action-grid {
    display: grid;
    grid-template-columns: 0.55fr 1fr;
    gap: clamp(28px, 4vw, 70px);
    align-items: center;
    max-width: 1080px;
    margin: 0 auto;
    position: relative;
    z-index: 2;
}
.msg-action-photo {
    border-radius: 22px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-width: 320px;
}
.msg-action-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.msg-action-content {
    position: relative;
    padding-left: clamp(24px, 4vw, 60px);
}
.msg-action-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.4rem, 4vw, 3.4rem);
    line-height: 1.1;
    color: var(--clr-navy);
    margin: 0 0 22px;
}
.msg-action-script {
    font-family: var(--font-script), var(--font-display);
    font-style: italic;
    font-weight: 400;
    font-size: 1.05em;
}
/* "action" — red circle-scribble around the word (yellow fill removed per request) */
.msg-action-circle {
    position: relative;
    display: inline-block;
    padding: 0 0.4em 0.05em;
    color: var(--clr-navy);
    font-style: italic;
}
.msg-action-circle::after {
    content: "";
    position: absolute;
    inset: -10% -2% -8% -2%;
    background: url('../assets/images/red-circle-scribble.svg') no-repeat center / 100% 100%;
    pointer-events: none;
}
/* body-large per STYLE-TOKENS — max-width tuned so line 1 ends at
   "Check out some of our" */
.msg-action-content p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0 0 32px;
    letter-spacing: 0.4px;
    max-width: 620px;
}
/* btn-lg keeps its 22 x 36 canonical padding; just slightly larger label here */
.msg-action-content .btn-yellow {
    font-size: 0.95rem;
    letter-spacing: 0.1em;
}

/* Hand-drawn arrow (arrow-messaging.svg) — points left toward the photo */
img.msg-action-arrow {
    position: absolute;
    left: -50px;
    top: 40px;
    width: 78px;
    height: auto;
}

/* ============== 17. WHO LEADS ============== */
.msg-leader {
    background: #fff;
    padding: var(--section-py-lg) 0;
}
.msg-leader-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(32px, 5vw, 80px);
    align-items: center;
}
.msg-leader-content { padding-right: clamp(0px, 2vw, 30px); }
.msg-leader-title {
    font-family: var(--font-display);
    font-weight: 400;
    font-size: clamp(2.6rem, 4.4vw, 3.8rem);
    line-height: 1.05;
    color: var(--clr-navy);
    margin: 0 0 28px;
}
.msg-leader-content p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 1.15rem;
    line-height: 1.6;
    color: var(--clr-navy);
    margin: 0 0 18px;
    letter-spacing: 0.4px;
}
.msg-leader-content p strong { font-weight: 500; }
/* canonical .btn .btn-yellow .btn-lg — match the See Our Work button */
.msg-leader-content .btn-yellow {
    margin-top: 20px;
    font-size: 0.95rem;
    letter-spacing: 0.1em;
}
.msg-leader-photo {
    border-radius: 28px;
    overflow: hidden;
    aspect-ratio: 4 / 5;
    max-width: 540px;
    margin-left: auto;
}
.msg-leader-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 70% center;
    transform: scale(1.12);
    transform-origin: 70% center;
    display: block;
}

/* =========================================
   RESPONSIVE — three-tier ladder. Each tier inherits from the larger one above
   and tightens further. Goal: zero horizontal overflow at 390+.
   ========================================= */
@media (max-width: 1024px) {
    .msg-hero { padding: 100px 0 80px; }
    .msg-hero-grid,
    .msg-touch-grid,
    .msg-pair-grid,
    .msg-tryit-grid,
    .msg-leader-grid,
    .msg-intro-grid,
    .msg-intro-body,
    .msg-action-grid,
    .msg-faq-grid {
        grid-template-columns: 1fr;
    }
    .msg-hero-photo,
    .msg-touch-photo,
    .msg-pair-photo,
    .msg-action-photo,
    .msg-leader-photo,
    .msg-tryit-photo {
        margin: 0 auto;
        max-width: 480px;
    }
    .msg-hero-content { padding-left: 0; text-align: left; }
    /* Hide red-dot decor on mobile — it sits in the headline column on
       desktop but collides with the body text once content stacks. */
    .msg-hero-decor--red-dot { display: none; }
    /* Blue half-circle: tuck it inside the photo card edge so it can't push
       past the centered photo's right margin into viewport overflow. */
    .msg-hero-decor--blue-half { right: 0; }
    /* Cap card width on mobile so the "Clarity is just the beginning" cards
       don't stretch full-bleed and feel oversized. */
    .msg-next-cards { max-width: 480px; margin: 0 auto; }
    .msg-pricing-cards { grid-template-columns: 1fr; max-width: 480px; gap: 32px; }
    .msg-help-cols { grid-template-columns: 1fr; gap: 70px; }
    .msg-help-col { padding: 16px 0 32px; min-height: auto; }
    .ms-steps-grid { grid-template-columns: 1fr; gap: 28px; max-width: 520px; }
    .ms-steps-card { max-width: 460px; margin: 0 auto; }
    .msg-next-cards { grid-template-columns: repeat(2, 1fr); }
    .msg-tryit-tag { display: none; }
    .msg-pair-tag { display: none; }
    img.msg-action-arrow { display: none; }
    .msg-faq-heading { justify-content: center; }

    /* C3 — disable the lavender wave overlap when cards stack. The desktop
       trick of pulling the lavender block UP under the cards only works when
       the card row exists; once cards stack, the overlap clobbers the last
       card AND the photo of Kathy below. */
    .msg-action { margin-top: 0; padding: 120px 0 110px; }
    .msg-action::before { height: 50px; }
    .msg-action::after { height: 50px; }
    .msg-action-content { padding-left: 0; }
    .msg-action-content .msg-action-arrow { display: none; }

    /* M1 — pricing red-triangle pointer: stacked cards make the -360% translate
       drift into empty space. Bring it back near the top of the pair section. */
    .msg-pair-pointer { transform: translate(-50%, -50%); }

    /* M6 / m1 — FAQ title + Q&A list centered together (heading was floating). */
    .msg-faq-list { margin: 0 auto; }
}

@media (max-width: 768px) {
    .msg-hero,
    .msg-attention,
    .msg-touch,
    .msg-wins,
    .msg-intro,
    .msg-pricing,
    .msg-pair,
    .msg-expect,
    .msg-help,
    .msg-tryit,
    .ms-steps,
    .msg-faq,
    .msg-next,
    .msg-leader { padding: var(--section-py-sm) 0; }
    .msg-action { padding: 80px 0 80px; }

    /* C2 — hero needs enough top padding to clear the absolutely-positioned
       logo at small widths, and breathing room between the CTA and the photo. */
    .msg-hero { padding: 160px 0 60px; }
    .msg-hero-grid { gap: 40px; }
    .msg-hero .btn-lavender { margin-bottom: 8px; }

    /* C1 — release hero title lines so they wrap naturally at this width. */
    .msg-hero-title .line { white-space: normal !important; display: inline !important; }
    .msg-hero-title .line + .line::before { content: " "; }
    .msg-hero-title { font-size: clamp(2.2rem, 9vw, 3rem); }
    .msg-attention-title { font-size: clamp(1.6rem, 6.5vw, 2.2rem); }
    .msg-attention-icons { gap: 12px; }
    .msg-att-svg { width: 44px; height: 44px; }
    .msg-att-label strong { font-size: 1.1rem; }
    .msg-pair-pricing { font-size: 0.78rem; padding: 8px 18px; }
    .msg-next-cards { grid-template-columns: 1fr; gap: 16px; max-width: 360px; margin: 0 auto; }
    .msg-faq-mark { width: 36px; }
    .msg-tryit-form { max-width: 100%; }
    img.msg-tryit-asterisk { width: 48px; height: 48px; top: 12px; right: -10px; }
}

/* PHONE TIER — applies to anything ≤640 (covers 390-640 since Chrome headless on
   macOS caps window width at 500; real iPhones are 390). */
@media (max-width: 640px) {
    /* M7 — global title cap on phones. Every section title contained here. */
    .msg-hero-title { font-size: clamp(1.85rem, 8.5vw, 2.2rem); }
    .msg-attention-title { font-size: clamp(1.4rem, 6.2vw, 1.75rem); }
    .msg-pricing-title,
    .msg-intro-title,
    .msg-help-title,
    .msg-pair-title,
    .msg-expect-title,
    .msg-leader-title,
    .msg-action-title,
    .msg-next-title,
    .msg-wins-title { font-size: clamp(1.5rem, 6.5vw, 1.85rem); }
    .ms-steps-title { font-size: clamp(1.4rem, 6vw, 1.7rem); }

    /* Section-sublede + body-large clamp tighter on phones */
    .msg-hero-lede,
    .msg-attention-lede,
    .msg-touch-lede,
    .msg-intro-pillars p,
    .msg-wins-body p,
    .msg-next-sub { font-size: clamp(1.1rem, 4.5vw, 1.3rem) !important; }
    .msg-wins-lede,
    .msg-touch-text p,
    .msg-pair-text p,
    .msg-intro-copy p,
    .msg-tryit-lede,
    .msg-action-content p,
    .msg-leader-content p,
    .msg-expect-inner p,
    .msg-help-col p,
    .msg-attention-sub,
    .msg-expect-sub,
    .msg-next-body { font-size: 1rem; line-height: 1.55; }

    /* M2 — pricing $K circle: stack under the title instead of beside it. */
    .msg-price-card { padding: 28px 22px 32px; }
    .msg-price-card-head {
        grid-template-columns: 1fr;
        justify-items: center;
        text-align: center;
        gap: 14px;
        padding-bottom: 18px;
    }
    .msg-price-card-cost { flex: none; width: 84px; height: 78px; font-size: 1.2rem; }

    /* M3 — wins quote tighter on phone */
    .msg-wins-quote { padding: 0 4px; }
    .msg-wins-body { padding: 0 16px; }
    .msg-wins-mark { font-size: clamp(3rem, 12vw, 4.5rem); }
    .msg-wins-mark--open { left: -2px; top: -10px; }
    .msg-wins-mark--close { right: -2px; bottom: -32px; }

    /* M4 — accordion bodies cramped on phone — reduce inner padding */
    .msg-expect-panel .case-panel-bar.msg-expect-bar {
        padding: 16px 20px;
        font-size: clamp(1.1rem, 4.8vw, 1.4rem);
        gap: 12px;
    }
    .msg-expect-toggle { width: 32px; height: 32px; flex-basis: 32px; }
    .msg-expect-toggle-icon { width: 14px; height: 14px; }
    .msg-expect-panel .case-panel-inner.msg-expect-inner { padding: 0 20px 0 52px; }
    .msg-expect-panel[data-open] .case-panel-inner.msg-expect-inner { padding: 0 20px 20px 52px; }
    .msg-expect-num { padding-top: 0.7em; font-size: 0.75rem; }

    /* M5 — Try It First asterisk hugs the inside-right of photo card */
    img.msg-tryit-asterisk { width: 42px; height: 42px; top: 10px; right: -2px; }

    /* Hero photo card stays inside viewport — drop max-width cap at this scale */
    .msg-hero-photo { max-width: 340px; }

    /* Will-help-you shapes shrink so they don't blow past the column edge */
    .msg-help-shape--peach { width: 200px; height: 200px; }
    .msg-help-shape--yellow { width: 120px; height: 200px; }
    .msg-help-shape--lav { border-left-width: 90px; border-right-width: 90px; border-top-width: 150px; }

    /* Brand-shape-combined image sits centered, tighter */
    .msg-intro-shapes-img { max-width: 260px; }

    /* See-in-action title fits */
    .msg-action-content p { max-width: 100%; }
}