/* ==========================================================================
   Casino-Friendly Poker — landing page
   Scoped under .cfp-page. Built on top of weplay.css / main.css tokens.
   ========================================================================== */

.cfp-page {
    --cfp-green: #57f760;
    --cfp-green-dark: #0fa968;
    --cfp-green-soft: rgba(87, 247, 96, 0.12);
    --cfp-green-border: rgba(87, 247, 96, 0.35);
    --cfp-teal: #57f79c;
    --cfp-red: #ff4a4a;
    --cfp-orange: #ff8900;
    --cfp-orange-dark: #ee6300;
    --cfp-orange-run: #ff7501;
    --cfp-blue: #61a0ff;
    --cfp-text-muted: #a3a9a8;
    --cfp-card-bg: linear-gradient(139deg, rgb(0, 0, 0) 0%, rgb(0, 28, 22) 107%);
    background-color: #050505;
    overflow-x: hidden;
}
.cfp-page .cfp-glow {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    width: 900px;
    max-width: 140%;
    height: 340px;
    background: radial-gradient(closest-side, rgba(87, 247, 96, 0.16), rgba(87, 247, 96, 0) 70%);
    pointer-events: none;
    z-index: 0;
    filter: blur(10px);
}
.cfp-glow.cfp-glow--mint {
    background: radial-gradient(closest-side, rgba(87, 247, 156, 0.16), rgba(87, 247, 156, 0) 70%);
}
.cfp-glow.cfp-glow--run-blue {
    left: 10%;
    top: auto;
    bottom: 0;
    transform: none;
    width: 560px;
    height: 460px;
    background: radial-gradient(closest-side, rgba(97, 160, 255, 0.22), rgba(97, 160, 255, 0) 70%);
}
.cfp-glow.cfp-glow--run-purple {
    left: 50%;
    top: auto;
    bottom: -40px;
    width: 620px;
    height: 480px;
    background: radial-gradient(closest-side, rgba(131, 56, 236, 0.18), rgba(131, 56, 236, 0) 70%);
}
.cfp-glow.cfp-glow--run-orange {
    left: auto;
    right: 6%;
    top: auto;
    bottom: 0;
    transform: none;
    width: 600px;
    height: 480px;
    background: radial-gradient(closest-side, rgba(255, 117, 1, 0.22), rgba(255, 117, 1, 0) 70%);
}
.cfp-section-head,
.cfp-run-grid,
.cfp-fraud-grid,
.cfp-formats-grid {
    position: relative;
    z-index: 1;
}

.cfp-page section {
    position: relative;
    padding: 100px 0;
}

.cfp-page .cfp-eyebrow {
    display: inline-block;
    font-weight: 700;
    font-size: 16px;
    letter-spacing: 0.02em;
    margin-bottom: 22px;
    background-image: linear-gradient(90deg, #56f660, #00b35b);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.cfp-page h1,
.cfp-page h2 {
    color: #f5f7f6;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.cfp-page .cfp-lead {
    color: rgba(255, 255, 255, 0.6);
    font-size: 17px;
    line-height: 1.7;
    font-family: var(--default--font-family);
}

.cfp-page a {
    text-decoration: none;
}

/* ---------- Buttons ---------- */
.cfp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 16px;
    padding: 1.1rem 2rem;
    border-radius: 12px;
    transition: all 0.25s ease-in-out;
    min-height: 56px;
    box-sizing: border-box;
    cursor: pointer;
    border: 2px solid transparent;
    white-space: nowrap;
}
.cfp-btn-green {
    background:
        linear-gradient(105deg, #6dbf56 4%, #1a7a5e 118%) padding-box,
        linear-gradient(105deg, #b8e6a8 4%, #1a7a5e 118%) border-box;
    border-color: transparent;
    color: #fff;
}
.cfp-btn-green:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px -8px rgba(87, 247, 96, 0.45);
    color: #fff;
}
.cfp-btn-outline-green {
    background: transparent;
    border-color: var(--cfp-green);
    color: #fff;
}
.cfp-btn-outline-green:hover {
    background: var(--cfp-green-soft);
    color: #fff;
    transform: translateY(-2px);
}
.cfp-btn-orange {
    background:
        linear-gradient(103deg, #ffaf3f 4%, #e64600 118%) padding-box,
        linear-gradient(103deg, #ffd699 4%, #e64600 118%) border-box;
    border-color: transparent;
    border-radius: 12px;
    color: #fff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.15);
}
.cfp-btn-orange:hover {
    transform: translateY(-2px);
    background-image: linear-gradient(to right, #e64600, #e64600);
    color: #fff;
}
.cfp-btn-group {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 48px;
}

/* ---------- Hero sections (1 & 2) ---------- */
/* Scoped under .cfp-page so these beat the generic `.cfp-page section` padding rule
   on specificity instead of relying on source order. */
.cfp-page .cfp-hero {
    padding-top: 70px;
}
.cfp-page .cfp-hero--1 {
    padding-top: 190px;
}
.cfp-page .cfp-hero--2 {
    padding-top: 90px;
}
.cfp-page .cfp-retention {
    padding-bottom: 40px;
}
.cfp-page .cfp-hero--1::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: url("../gfx/2026/home/home_background_1.webp") no-repeat center center;
    filter: blur(3px);
    opacity: 0.62;
    -webkit-mask-image: radial-gradient(ellipse 62% 60% at 50% 42%, #fff 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 62% 60% at 50% 42%, #fff 55%, transparent 100%);
}
.cfp-hero-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    align-items: start;
    gap: 40px;
}
.cfp-hero-grid.cfp-reverse .cfp-hero-copy {
    order: 1;
}
.cfp-hero-grid.cfp-reverse .cfp-hero-media {
    order: 2;
}
.cfp-hero-copy {
    text-align: left;
}
@media (min-width: 992px) {
    .cfp-hero-copy {
        padding-left: 4.5%;
    }
}

.cfp-hero h1,
.cfp-hero h2 {
    font-size: clamp(2.4rem, 4.9vw, 4.375rem);
    line-height: 0.92;
    margin-bottom: 40px;
}
.cfp-hero--1 h1 {
    font-size: clamp(2.6rem, 6.3vw, 5.625rem);
    line-height: 0.9;
}
.cfp-hero-grid.cfp-reverse h1,
.cfp-hero-grid.cfp-reverse h2 {
    font-size: clamp(2.1rem, 4.6vw, 4rem);
    line-height: 1;
}
.cfp-hero .cfp-lead {
    max-width: 540px;
    font-size: 19px;
    line-height: 1.5;
    margin-bottom: 8px;
}
.cfp-highlight-green {
    color: var(--cfp-green);
}
.cfp-highlight-red {
    color: var(--cfp-red);
}

.cfp-hero-media {
    display: flex;
    justify-content: center;
    position: relative;
}
.cfp-hero-media img {
    width: 100%;
    max-width: 580px;
    height: auto;
    display: block;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

/* ---------- Section headers (centered) ---------- */
.cfp-section-head {
    max-width: 1260px;
    margin: 0 auto 56px;
    text-align: center;
}
.cfp-section-head .cfp-eyebrow {
    text-align: center;
}
.cfp-section-head h2 {
    font-size: clamp(2.1rem, 4.6vw, 4rem);
    line-height: 1;
    letter-spacing: -0.03em;
    margin-bottom: 24px;
}
.cfp-section-head .cfp-lead {
    max-width: 620px;
    margin: 0 auto;
    font-size: 18px;
}

/* ---------- Ecology comparison card ---------- */
/* The wrap exists only to host the ambient glows: they need to sit behind
   the card and bleed out past its edges into the page background, which
   means they can't be children of .cfp-ecology-card itself (it clips its
   own content with overflow:hidden for the photo panes). */
.cfp-ecology-card-wrap {
    position: relative;
}
.cfp-ecology-card-wrap .cfp-glow--eco-green {
    left: 6%;
    top: auto;
    bottom: -15%;
    transform: none;
    width: 520px;
    height: 420px;
    background: radial-gradient(closest-side, rgba(87, 247, 96, 0.22), rgba(87, 247, 96, 0) 70%);
}
.cfp-ecology-card-wrap .cfp-glow--eco-red {
    left: auto;
    right: 6%;
    top: -15%;
    transform: none;
    width: 520px;
    height: 420px;
    background: radial-gradient(closest-side, rgba(255, 74, 74, 0.2), rgba(255, 74, 74, 0) 70%);
}
.cfp-ecology-card {
    position: relative;
    z-index: 1;
    border: 1px solid transparent;
    border-radius: 10px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    /* Gradient stroke (Figma: Linear, FF4A4A -> 57F760, 40% opacity, 1px
       inside) via the padding-box/border-box trick, since a plain
       `border-image` can't take the card's own border-radius with it. */
    background:
        linear-gradient(#060a08, #060a08) padding-box,
        linear-gradient(90deg, rgba(255, 74, 74, 0.4), rgba(87, 247, 96, 0.4)) border-box;
    box-shadow:
        -30px 30px 90px -55px rgba(87, 247, 96, 0.3),
        30px 30px 90px -55px rgba(255, 74, 74, 0.28);
}
.cfp-ecology-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        90deg,
        rgba(0, 0, 0, 0.45) 0%,
        rgba(0, 0, 0, 0.48) 20%,
        rgba(0, 0, 0, 0.62) 32%,
        rgba(0, 0, 0, 0.86) 42%,
        rgba(0, 0, 0, 0.9) 50%,
        rgba(0, 0, 0, 0.86) 58%,
        rgba(0, 0, 0, 0.62) 68%,
        rgba(0, 0, 0, 0.48) 80%,
        rgba(0, 0, 0, 0.45) 100%
    );
}
.cfp-ecology-card::after {
    content: "";
    position: absolute;
    top: 36px;
    bottom: 36px;
    left: 50%;
    width: 1px;
    z-index: 2;
    background: rgba(255, 255, 255, 0.4);
    pointer-events: none;
}
.cfp-ecology-col {
    position: relative;
    min-height: 360px;
    display: flex;
    align-items: center;
    padding: 36px;
    overflow: hidden;
}
/* Each plate carries a white wash painted across roughly half of it, ramping
   to solid white at one edge - drawn so the two photos would bloom into the
   card's centre divider. In practice the wash reads as the photo running out
   before the column does. So every column hangs its plate 30% past its own
   width, anchored to the outer edge: the washed-out end is pushed under the
   column's overflow clip and only the painted 77% is ever in frame. The
   healthy plate washes to its right and sits in the left column; the
   unhealthy one is the mirror of that. */
.cfp-ecology-photo {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 130%;
    max-width: none;
    height: 100%;
    object-fit: cover;
    z-index: 0;
    filter: brightness(0.88);
}
.cfp-healthy .cfp-ecology-photo {
    left: 0;
    right: auto;
    object-position: left center;
}
.cfp-unhealthy .cfp-ecology-photo {
    left: auto;
    right: 0;
    object-position: right center;
}
.cfp-ecology-body {
    position: relative;
    z-index: 3;
    max-width: 440px;
    text-align: left;
}
.cfp-healthy .cfp-ecology-body {
    margin-left: auto;
    margin-right: 0;
    text-align: right;
}
.cfp-unhealthy .cfp-ecology-body {
    margin-left: 0;
    margin-right: auto;
}
.cfp-ecology-col h3 {
    font-size: 26px;
    font-weight: 900;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
}
.cfp-healthy h3 {
    justify-content: flex-end;
}
.cfp-healthy h3 {
    color: var(--cfp-green);
}
.cfp-unhealthy h3 {
    color: var(--cfp-red);
}
.cfp-ecology-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.cfp-ecology-col li {
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    padding: 14px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.cfp-ecology-col li:first-of-type {
    border-top: none;
}

/* Side by side, the two columns each centred their own body, and the bodies
   are not the same height - the unhealthy copy wraps to more lines. That put
   the two headings on different baselines and the row rules at different
   heights, so the halves read as two unrelated cards rather than one
   comparison. Instead both bodies fill the column and both lists split the
   space under the heading into equal rows: same heading baseline, same rules,
   whatever the copy does. Only meaningful while the columns sit side by side,
   so it stops at the stacking breakpoint. */
@media (min-width: 768px) {
    .cfp-ecology-col {
        align-items: stretch;
    }
    .cfp-ecology-body {
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    .cfp-ecology-col ul {
        flex: 1;
        display: flex;
        flex-direction: column;
    }
    .cfp-ecology-col li {
        flex: 1;
        display: flex;
        align-items: center;
    }
    .cfp-healthy .cfp-ecology-col li,
    .cfp-healthy li {
        justify-content: flex-end;
    }
}

/* Equal rows only hold while every row fits its share: a row taller than a
   third of the list cannot shrink into it, so it keeps its own height and the
   rules drift apart again. That happens between 768 and 991px, where the
   columns are narrow enough for one row to wrap to three lines while its
   opposite number wraps to two. The extra column height buys every third
   enough room for the longest row. */
@media (min-width: 768px) and (max-width: 991.98px) {
    .cfp-ecology-col {
        min-height: 430px;
    }
}

/* ---------- Anti-fraud cards ---------- */
.cfp-fraud-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto auto;
    gap: 20px;
}
.cfp-fraud-card {
    border: 0.6px solid transparent;
    border-radius: 14px;
    padding: 28px;
    text-align: left;
    background:
        linear-gradient(130deg, #000 0%, #061706 104%) padding-box,
        linear-gradient(180deg, rgba(117, 222, 71, 0.3) 0%, rgba(46, 141, 16, 0.3) 100%) border-box;
}
.cfp-fraud-card h3 {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}
.cfp-fraud-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    line-height: 1.65;
    margin: 0;
}
.cfp-fraud-card--featured {
    grid-row: 1 / 3;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.cfp-fraud-card--featured img {
    width: 100%;
    max-width: 320px;
    margin: 24px auto 0;
    display: block;
    filter: drop-shadow(0 20px 30px rgba(62, 235, 176, 0.25));
}

/* ---------- Magic Bento hover effect (fraud + format cards) ---------- */
.cfp-bento-section {
    position: relative;
}
.cfp-bento-card {
    position: relative;
    overflow: hidden;
    transition:
        transform 0.3s ease,
        border-color 0.3s ease;
    --glow-x: 50%;
    --glow-y: 50%;
    --glow-intensity: 0;
    --glow-radius: 220px;
}
.cfp-bento-card:hover {
    border-color: rgba(87, 247, 156, 0.45);
}
.cfp-bento-fx-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
}
.cfp-bento-card::after {
    content: "";
    position: absolute;
    inset: 0;
    padding: 1.5px;
    background: radial-gradient(
        var(--glow-radius) circle at var(--glow-x) var(--glow-y),
        rgba(87, 247, 156, calc(var(--glow-intensity) * 0.9)) 0%,
        rgba(87, 247, 156, calc(var(--glow-intensity) * 0.45)) 30%,
        transparent 65%
    );
    border-radius: inherit;
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    pointer-events: none;
    z-index: 2;
}
.cfp-bento-particle {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: rgba(87, 247, 156, 1);
    box-shadow: 0 0 6px rgba(87, 247, 156, 0.7);
    pointer-events: none;
    z-index: 3;
    opacity: 0;
    transform: scale(0);
    transition:
        opacity 0.3s ease,
        transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cfp-bento-particle.is-visible {
    opacity: 0.9;
    transform: scale(1);
}
.cfp-bento-ripple {
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(
        circle,
        rgba(87, 247, 156, 0.35) 0%,
        rgba(87, 247, 156, 0.15) 30%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 3;
    transform: scale(0);
    opacity: 1;
    transition:
        transform 0.8s ease,
        opacity 0.8s ease;
}
.cfp-bento-ripple.is-active {
    transform: scale(1);
    opacity: 0;
}
.cfp-bento-spotlight {
    position: fixed;
    width: 700px;
    height: 700px;
    border-radius: 50%;
    pointer-events: none;
    z-index: 5;
    opacity: 0;
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    mix-blend-mode: screen;
    background: radial-gradient(
        circle,
        rgba(87, 247, 156, 0.14) 0%,
        rgba(87, 247, 156, 0.07) 15%,
        rgba(87, 247, 156, 0.035) 25%,
        rgba(87, 247, 156, 0.018) 40%,
        transparent 70%
    );
    transition: opacity 0.3s ease;
}
@media (hover: none), (max-width: 767px) {
    .cfp-bento-card::after,
    .cfp-bento-particle,
    .cfp-bento-ripple,
    .cfp-bento-spotlight {
        display: none !important;
    }
}

/* ---------- Game format cards ---------- */
.cfp-formats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}
.cfp-format-card {
    border: 0.6px solid transparent;
    border-radius: 14px;
    padding: 28px 24px;
    text-align: left;
    background:
        linear-gradient(130deg, #000 0%, #061706 104%) padding-box,
        linear-gradient(180deg, rgba(117, 222, 71, 0.3) 0%, rgba(46, 141, 16, 0.3) 100%) border-box;
}
.cfp-format-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 22px;
    position: relative;
}
.cfp-format-icon::before {
    content: "";
    position: absolute;
    inset: -6px;
    background: radial-gradient(closest-side, rgba(87, 247, 156, 0.45), rgba(87, 247, 156, 0) 75%);
    z-index: 0;
}
.cfp-format-icon img {
    width: 32px;
    height: auto;
    position: relative;
    z-index: 1;
    filter: drop-shadow(0 0 8px rgba(87, 247, 156, 0.55));
}
.cfp-format-card h3 {
    color: #fff;
    font-size: 27px;
    font-weight: 800;
    margin-bottom: 14px;
}
.cfp-format-card p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 15px;
    line-height: 1.65;
    margin-bottom: 12px;
}
.cfp-format-card p:last-child {
    margin-bottom: 0;
}

/* ---------- We run it for you ---------- */
.cfp-run-section .cfp-eyebrow {
    color: var(--cfp-orange-run);
    text-align: center;
}
.cfp-run-section h2 {
    text-align: center;
    font-size: clamp(2.2rem, 4.9vw, 4.375rem);
    line-height: 1.1;
}
.cfp-run-section h2 .cfp-highlight-orange {
    color: var(--cfp-orange-run);
}
.cfp-run-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    max-width: 980px;
    margin: 56px auto 0;
}
.cfp-run-card {
    border-radius: 20px;
    padding: 40px 36px;
    border: 1px solid transparent;
    background-origin: border-box;
    background-clip: padding-box, padding-box, border-box;
}
.cfp-run-card--your {
    background-image:
        linear-gradient(180deg, rgba(4, 18, 38, 1) 0%, rgba(0, 0, 0, 0) 180%),
        linear-gradient(#08090c, #08090c),
        linear-gradient(135deg, #61a0ff 0%, #002331 100%);
    box-shadow: 0 30px 70px -40px rgba(97, 160, 255, 0.35);
}
.cfp-run-card--our {
    background-image:
        linear-gradient(180deg, rgba(38, 14, 4, 1) 0%, rgba(0, 0, 0, 0) 180%),
        linear-gradient(#08090c, #08090c),
        linear-gradient(135deg, #ff6600 0%, #361600 100%);
    box-shadow: 0 30px 70px -40px rgba(255, 117, 1, 0.35);
}
.cfp-run-card h3 {
    font-size: 30px;
    font-weight: 900;
    margin-bottom: 28px;
}
.cfp-run-card--your h3 {
    background-image: linear-gradient(90deg, #61a0ff, #b3d1ff);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1.2;
}
.cfp-run-card--our h3 {
    background-image: linear-gradient(90deg, #ff9142, #ffaf3f);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1.2;
}
.cfp-run-card ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cfp-run-card li {
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    padding: 16px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.cfp-run-card li:first-child {
    border-top: none;
    padding-top: 0;
}
.cfp-run-card,
.cfp-run-card h3,
.cfp-run-card ul,
.cfp-run-card li {
    text-align: left;
}

/* ---------- Enroll CTA ---------- */
.cfp-enroll-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 40px;
}
.cfp-enroll-copy {
    text-align: left;
}
.cfp-enroll-eyebrow {
    color: var(--cfp-orange);
    font-weight: 700;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 20px;
}
.cfp-enroll-copy h2 {
    font-size: clamp(2.4rem, 4.9vw, 4.375rem);
    line-height: 1.05;
    margin-bottom: 22px;
}
.cfp-enroll-copy h2 span {
    display: block;
    background-image: linear-gradient(99deg, #ff5500 1.5%, #ff4c00 62%, #ffbb00 114%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}
.cfp-enroll-copy .cfp-lead {
    max-width: 460px;
    margin-bottom: 36px;
}
.cfp-enroll-media img {
    width: 100%;
    max-width: 620px;
    height: auto;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 30px 60px rgba(0, 0, 0, 0.55));
}

/* ---------- Footer certification badges (page-specific addon) ---------- */

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
    .cfp-hero-grid {
        grid-template-columns: 1fr;
        text-align: center;
        gap: 40px;
    }
    .cfp-hero-grid.cfp-reverse .cfp-hero-copy,
    .cfp-hero-grid.cfp-reverse .cfp-hero-media {
        order: initial;
    }
    .cfp-hero .cfp-lead {
        margin-left: auto;
        margin-right: auto;
    }
    .cfp-hero-media {
        order: -1;
    }
    .cfp-btn-group {
        justify-content: center;
    }

    .cfp-fraud-grid {
        grid-template-columns: 1fr 1fr;
    }
    .cfp-fraud-card--featured {
        grid-row: auto;
        grid-column: 1 / 3;
        flex-direction: row;
        align-items: center;
        gap: 24px;
        text-align: left;
    }
    .cfp-fraud-card--featured img {
        margin: 0;
        max-width: 130px;
        flex-shrink: 0;
    }

    .cfp-formats-grid {
        grid-template-columns: 1fr 1fr;
    }

    .cfp-run-grid {
        grid-template-columns: 1fr;
        max-width: 520px;
    }

    .cfp-enroll-grid {
        grid-template-columns: 1fr;
        text-align: center;
    }
    .cfp-enroll-copy .cfp-lead {
        margin-left: auto;
        margin-right: auto;
    }
    .cfp-enroll-media {
        order: -1;
    }
    .cfp-enroll-copy h2 span {
        display: inline;
    }
}

@media (max-width: 767px) {
    /* Specificity matches the desktop .cfp-hero--2 / .cfp-retention rules so
       the shared mobile rhythm (--wp-section-space-mobile) wins on every section. */
    .cfp-page section,
    .cfp-page .cfp-hero--2,
    .cfp-page .cfp-retention {
        padding: var(--wp-section-space-mobile) 0;
    }
    .cfp-section-head {
        margin-bottom: 40px;
    }

    /* ---- Type scale: match the 393px Figma mobile frame ---- */
    .cfp-page .cfp-eyebrow {
        font-size: 14px;
        margin-bottom: 14px;
    }
    .cfp-page .cfp-hero--1 h1 {
        font-size: min(66.55px, 17vw);
        line-height: 0.849;
        margin-bottom: 20px;
    }
    .cfp-page .cfp-hero-grid.cfp-reverse h1,
    .cfp-page .cfp-hero-grid.cfp-reverse h2 {
        font-size: clamp(2.2rem, 11.4vw, 3rem);
        line-height: 0.88;
    }
    .cfp-section-head h2 {
        font-size: clamp(2.2rem, 11.4vw, 3rem);
        line-height: 0.95;
    }
    .cfp-run-section h2 {
        font-size: clamp(2.2rem, 11.4vw, 3rem);
        line-height: 0.95;
    }
    .cfp-enroll-copy h2 {
        font-size: clamp(2.9rem, 16.7vw, 4.4rem);
        line-height: 0.9;
    }
    .cfp-enroll-copy h2 span {
        display: block;
    }

    /* ---- Hero 1: the illustration is dropped on mobile in Figma ---- */
    .cfp-page .cfp-hero--1 {
        padding-top: 120px;
    }
    .cfp-hero--1 .cfp-hero-media {
        display: none;
    }

    /* ---- Ecology comparison: stack, Unhealthy first, photo stays visible ---- */
    .cfp-ecology-card {
        display: flex;
        flex-direction: column-reverse;
        border-radius: 8px;
    }
    .cfp-ecology-card::before,
    .cfp-ecology-card::after {
        display: none;
    }
    .cfp-ecology-col {
        min-height: 190px;
        padding: 22px 24px;
    }
    .cfp-ecology-col::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;
        background: linear-gradient(102deg, #000 7%, rgba(0, 0, 0, 0) 90%);
    }
    /* Cropping the wash out (see .cfp-ecology-photo) still leaves the healthy
       plate lifting toward its right-hand edge, and stacked it has lost the
       card-wide overlay that held the desktop halves at 86-90% black. Its own
       scrim carries that end back down so the column reads as evenly lit as
       the unhealthy one above it. It runs at 90deg, not 102deg: the wash is
       horizontal, and a tilted scrim leaves the top-right corner milky while
       the bottom-right is already covered. */
    .cfp-healthy.cfp-ecology-col::before {
        background: linear-gradient(
            90deg,
            #000 6%,
            rgba(0, 0, 0, 0.48) 34%,
            rgba(0, 0, 0, 0.78) 62%,
            rgba(0, 0, 0, 0.9) 100%
        );
    }
    .cfp-ecology-photo {
        filter: none;
    }
    .cfp-ecology-body,
    .cfp-healthy .cfp-ecology-body,
    .cfp-unhealthy .cfp-ecology-body {
        max-width: none;
        margin-left: 0;
        margin-right: 0;
        text-align: left;
    }
    .cfp-ecology-col h3,
    .cfp-healthy h3 {
        justify-content: flex-start;
        font-size: 18px;
        margin-bottom: 10px;
    }
    .cfp-ecology-col li {
        font-size: 13px;
        line-height: 1.4;
        padding: 9px 0;
        max-width: 210px;
        border-top-color: rgba(255, 255, 255, 0.12);
    }

    .cfp-fraud-grid {
        grid-template-columns: 1fr;
    }
    .cfp-fraud-card--featured {
        grid-column: auto;
        flex-direction: column;
        text-align: left;
    }
    .cfp-fraud-card--featured img {
        margin: 24px auto 0;
        max-width: 165px;
    }

    .cfp-formats-grid {
        grid-template-columns: 1fr;
    }
    .cfp-format-card h3 {
        font-size: 20px;
    }

    .cfp-btn {
        width: 100%;
    }
    .cfp-btn-group {
        flex-direction: column;
    }

    .cfp-run-card {
        padding: 30px 24px;
    }
}