/* Risk-free first pack banner - "Second Chance" creative (v44 handoff)
   ---------------------------------------------------------------------------
   Markup: templates/partials/riskfree_banner.html. Controller:
   static/js/banner-riskfree-v44.js.

   Layout is driven by the banner's own width (container queries), not the
   viewport, so one component serves the hero slide and the phone strip:

     >= 520px  WIDE   copy left, product right, geometry in --u
     <  520px  NARROW phones: lede on one line, RISK- / FREE beside the
                      product, sizes from the width, height from content

   --u is one pixel of the handoff's 600x300 reference canvas. Every WIDE
   position below is that reference number times --u, taken from the spec's
   Pillow coordinates converted to CSS line boxes (Arial metrics), with the
   ad's logo row removed so the composition centres vertically.

   Host knobs (set on .rfb or an ancestor):
     --rfb-height  fixed slot height (the hero); unset = height from width
     --rfb-pad     inline padding
     --rfb-radius  corner radius

   Typography: the reference is Arial Bold + Arial Black. The site's own faces
   (Space Grotesk, Inter, Bricolage) do not match that, so the reference faces
   are used where the device has them, and metric-compatible OFL/Apache
   webfonts stand in where it doesn't (Android, most of iOS for Black):
   Arimo is metric-identical to Arial; Archivo Black is the closest open
   match to Arial Black. No horizontal scaling anywhere. */

@font-face {
    font-family: "RFB Bold";
    font-weight: 700;
    font-display: swap;
    src: local("Arial Bold"), local("Arial-BoldMT"),
         url("/static/fonts/arimo-latin-700.woff2") format("woff2");
}

@font-face {
    font-family: "RFB Heavy";
    font-weight: 900;
    font-display: swap;
    src: local("Arial Black"), local("Arial-Black"),
         url("/static/fonts/archivo-black-latin-400.woff2") format("woff2");
}

.rfb {
    --rfb-ink: #101e38;
    --rfb-blue: #2445d8;
    --rfb-white: #ffffff;
    --rfb-bold: "RFB Bold", Arial, Helvetica, sans-serif;
    --rfb-heavy: "RFB Heavy", "Arial Black", Arial, sans-serif;
    --rfb-ease: cubic-bezier(.45, .05, .55, .95);  /* ~ smoothstep */

    container-type: inline-size;
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    color: var(--rfb-ink);
    -webkit-font-smoothing: antialiased;
}

.rfb__frame {
    position: relative;
    height: 100%;
    overflow: hidden;           /* clips decorative slabs at the edge, never copy */
    isolation: isolate;
    border-radius: var(--rfb-radius, 16px);
    background:
        radial-gradient(ellipse 62% 90% at 28% 28%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 72%),
        radial-gradient(ellipse 40% 60% at 98% 94%, rgba(210, 220, 255, .55) 0%, rgba(210, 220, 255, 0) 70%),
        #ebf4ff;
}

.rfb__hit {
    position: absolute;
    inset: 0;
    z-index: 1;
}

.rfb__box {
    position: relative;
    z-index: 2;
    pointer-events: none;       /* clicks fall through to .rfb__hit ... */
}

.rfb__cta { pointer-events: auto; }  /* ... except the CTA */

.rfb img {
    display: block;
    max-width: none;
    user-select: none;
    -webkit-user-drag: none;
}

.rfb__slab,
.rfb__pack {
    width: 100%;
    height: auto;               /* intrinsic aspect ratio, always */
}

.rfb-sr {
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ---- type -------------------------------------------------------------- */
.rfb p,
.rfb h2 {
    margin: 0;
    padding: 0;
    font-size: inherit;
    letter-spacing: 0;
    text-transform: uppercase;
}

.rfb__hook,
.rfb__payoff,
.rfb__offer { display: flex; flex-direction: column; }

.rfb__hook > span,
.rfb__payoff > span,
.rfb__offer > span { display: block; white-space: nowrap; }

.rfb__hook { align-items: center; text-align: center; font-family: var(--rfb-heavy); font-weight: 900; }
.rfb__hook-1 { color: var(--rfb-ink); }
.rfb__hook-2,
.rfb__hook-3 { color: var(--rfb-blue); }

.rfb__pay-1 { font-family: var(--rfb-bold); font-weight: 700; color: var(--rfb-ink); }
.rfb__pay-2,
.rfb__pay-3 { font-family: var(--rfb-heavy); font-weight: 900; color: var(--rfb-blue); }
.rfb__pay-4 { font-family: var(--rfb-heavy); font-weight: 900; color: var(--rfb-ink); }

.rfb__offer { font-weight: 700; }
.rfb__lede { font-family: var(--rfb-bold); font-weight: 700; color: var(--rfb-ink); }
.rfb__risk { font-family: var(--rfb-heavy); font-weight: 900; color: var(--rfb-blue); }
.rfb__risk > span { display: inline; }

.rfb__cta {
    position: relative;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    border-radius: 999px;
    background: var(--rfb-blue);
    color: var(--rfb-white);
    font-family: var(--rfb-bold);
    font-weight: 700;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    transition: background-color .15s ease;
}

.rfb__cta:hover { background: #1d39b8; color: var(--rfb-white); }

.rfb__cta:focus-visible {
    outline: 3px solid var(--rfb-ink);
    outline-offset: 4px;
}

/* ---- product group: the handoff's final arrangement, in % of its box ---
   Box = the group's bounds on the reference canvas: x 405..607, y 74..250.
   Pack in front; slabs rotated 12deg outward. */
.rfb__product { position: relative; }
.rfb__product-art {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 202 / 176;
}

.rfb__prod { position: absolute; display: block; }
.rfb__prod--left  { left: 6.9%;  top: 5.1%;  width: 41.6%; rotate: -12deg; }
.rfb__prod--right { left: 51.5%; top: 6.3%;  width: 41.6%; rotate: 12deg; }
.rfb__prod--pack  { left: 23.8%; top: 0;     width: 52.5%; z-index: 1; }
.rfb__prod .rfb__slab,
.rfb__prod .rfb__pack { filter: drop-shadow(0 6px 10px rgba(16, 30, 56, .18)); }

/* ---- decorative layers ---- */
.rfb__edge,
.rfb__reel,
.rfb__rewind,
.rfb__veil { position: absolute; display: block; pointer-events: none; }
.rfb__float,
.rfb__recoil,
.rfb__reel-col { display: block; }
.rfb__reel-slab { display: block; position: relative; }
.rfb__edge .rfb__slab,
.rfb__reel .rfb__slab { filter: drop-shadow(0 5px 9px rgba(16, 30, 56, .16)); }

.rfb__rewind { overflow: visible; }
.rfb__rewind-row { display: flex; }
.rfb__chev { flex: none; height: auto; }

/* Non-offer scenes are invisible unless the sequence is running. */
.rfb__scene--hook,
.rfb__scene--payoff { opacity: 0; }


/* ===========================================================================
   WIDE  (>= 520px of banner)
   =========================================================================== */
@container (min-width: 520px) {
    .rfb__frame {
        --rfb-p: var(--rfb-pad, clamp(20px, 4.5cqw, 104px));
        /* composition = 372u copy + >=66u gap + 202u art = 640u */
        --rfb-h: var(--rfb-height, min(calc((100cqw - 2 * var(--rfb-p)) * 300 / 640 + 28px), 520px));
        --u: min(calc(var(--rfb-h) / 300), calc((100cqw - 2 * var(--rfb-p)) / 640));
        /* art centred in the space right of the copy, never closer than 66u */
        --art-x: max(calc(438 * var(--u)), calc((100% + 170 * var(--u)) / 2));
        height: var(--rfb-h);
    }

    .rfb__box {
        position: absolute;
        left: max(var(--rfb-p), calc((100% - 1680px) / 2));
        right: max(var(--rfb-p), calc((100% - 1680px) / 2));
        top: calc(50% - 150 * var(--u));
        height: calc(300 * var(--u));
    }

    .rfb__scene { position: absolute; inset: 0; }

    /* scene 1: hook, centred; slabs at the frame edges, pulled in on very
       wide frames so they stay with the headline */
    .rfb__hook {
        position: absolute;
        left: 0;
        right: 0;
        top: calc(53.1 * var(--u));
    }
    .rfb__hook-1,
    .rfb__hook-2 { font-size: calc(51 * var(--u)); line-height: calc(62 * var(--u)); }
    .rfb__hook-3 { font-size: calc(59 * var(--u)); line-height: calc(70 * var(--u)); }

    .rfb__edge { width: calc(93 * var(--u)); }
    .rfb__edge--lt,
    .rfb__edge--lb { left: calc(max(calc(32 * var(--u) - var(--rfb-p)), calc(50% - 330 * var(--u))) - 46.5 * var(--u)); rotate: 15deg; }
    .rfb__edge--rt,
    .rfb__edge--rb { left: calc(min(calc(100% + var(--rfb-p) - 32 * var(--u)), calc(50% + 330 * var(--u))) - 46.5 * var(--u)); rotate: -15deg; }
    .rfb__edge--lt,
    .rfb__edge--rt { top: calc((67 - 79.5) * var(--u)); }
    .rfb__edge--lb,
    .rfb__edge--rb { top: calc((252 - 79.5) * var(--u)); }

    /* scene 2: payoff */
    .rfb__payoff { position: absolute; left: 0; top: calc(32.6 * var(--u)); z-index: 3; }
    .rfb__pay-1 { font-size: calc(29 * var(--u)); line-height: calc(36 * var(--u)); }
    .rfb__pay-2,
    .rfb__pay-3 { font-size: calc(57 * var(--u)); line-height: calc(64 * var(--u)); margin-left: calc(-4 * var(--u)); }
    .rfb__pay-2 { margin-top: calc(-3 * var(--u)); }
    .rfb__pay-4 { font-size: calc(36 * var(--u)); line-height: calc(44 * var(--u)); margin-top: calc(-1.3 * var(--u)); }

    .rfb__rewind { left: calc(-1 * var(--rfb-p) - 156 * var(--u)); top: calc(51 * var(--u)); z-index: 1; }
    .rfb__rewind-row { gap: calc(55 * var(--u)); }
    .rfb__chev { width: calc(120 * var(--u)); }
    .rfb__veil {
        z-index: 2;
        top: -100vh;
        bottom: -100vh;
        left: -100vw;
        width: calc(100vw + 388 * var(--u));
        background: linear-gradient(90deg, rgba(255, 255, 255, .49) calc(100% - 135 * var(--u)), rgba(255, 255, 255, 0) 100%);
    }

    .rfb__reel {
        z-index: 2;
        left: calc(var(--art-x) + 93 * var(--u) - 49 * var(--u));
        top: calc(-560 * var(--u));
        width: calc(98 * var(--u));
    }
    .rfb__reel-slab { margin-bottom: calc(-40 * var(--u)); }   /* 168u slabs on a 128u pitch */
    .rfb__reel-slab:nth-child(4n+1) { rotate: 5deg;  left: calc(-9 * var(--u)); }
    .rfb__reel-slab:nth-child(4n+2) { rotate: 11deg; left: calc(8 * var(--u)); }
    .rfb__reel-slab:nth-child(4n+3) { rotate: 3deg;  left: calc(15 * var(--u)); }
    .rfb__reel-slab:nth-child(4n+4) { rotate: 9deg;  left: calc(-4 * var(--u)); }

    /* scene 3: offer */
    .rfb__copy { position: absolute; left: 0; top: calc(40.6 * var(--u)); z-index: 3; }
    .rfb__lede { font-size: calc(38 * var(--u)); line-height: calc(48 * var(--u)); }
    .rfb__risk { font-size: calc(63 * var(--u)); line-height: calc(72 * var(--u)); margin-left: calc(-2 * var(--u)); }
    .rfb__cta {
        width: calc(210 * var(--u));
        min-width: 150px;
        height: calc(39 * var(--u));
        margin-top: calc(11.6 * var(--u));
        margin-left: calc(-2 * var(--u));
        font-size: max(14px, calc(18 * var(--u)));
    }
    .rfb__product {
        position: absolute;
        left: var(--art-x);
        top: calc(52.4 * var(--u));
        width: calc(202 * var(--u));
    }
}


/* ===========================================================================
   NARROW  (< 520px of banner): phones. Stacked scenes in one grid cell, so
   the frame is as tall as the tallest scene and never changes height between
   them. Type is sized from the width to fill it (widths measured: Arial Black
   and its Archivo Black fallback set these lines within 0.1% of each other):
     hook   "YOUR FIRST"  6.77em  -> ~79% of the inner width, slabs outside it
     payoff "CHANCE"      4.72em  -> ~64%, the reel takes the rest
     offer  "OPEN YOUR FIRST $25 PACK" 14.13em on one line, full width;
            "RISK-" 3.06em over "FREE", product beside them
   =========================================================================== */
@container (max-width: 519.98px) {
    .rfb__frame {
        --u: calc(100cqw / 640);
        --n-pad: clamp(14px, 4.4cqw, 18px);
        /* one line always: 14.13em must fit the inner width (~91cqw) */
        --n-lede: clamp(10px, min(6.2cqw, calc((100cqw - 2 * var(--n-pad)) / 14.4)), 24px);
        --n-risk: clamp(30px, 15cqw, 60px);
        --n-gap: clamp(8px, 3cqw, 14px);
        height: auto;
    }

    .rfb__box {
        display: grid;
        padding: var(--n-pad);
    }

    .rfb__scene { grid-area: 1 / 1; position: relative; min-width: 0; }

    .rfb__scene--hook { display: flex; align-items: center; justify-content: center; }
    .rfb__hook-1,
    .rfb__hook-2 { font-size: clamp(22px, 10.6cqw, 48px); line-height: 1.1; }
    .rfb__hook-3 { font-size: clamp(26px, 12.2cqw, 56px); line-height: 1.08; }

    .rfb__edge { width: clamp(46px, 17cqw, 80px); }
    .rfb__edge--lt,
    .rfb__edge--lb { left: calc(-1 * var(--n-pad) - clamp(46px, 17cqw, 80px) * .64); rotate: 15deg; }
    .rfb__edge--rt,
    .rfb__edge--rb { right: calc(-1 * var(--n-pad) - clamp(46px, 17cqw, 80px) * .64); rotate: -15deg; }
    .rfb__edge--lt,
    .rfb__edge--rt { top: -30%; }
    .rfb__edge--lb,
    .rfb__edge--rb { top: 44%; }

    .rfb__scene--payoff { display: flex; align-items: center; }
    .rfb__payoff { position: relative; z-index: 3; }
    .rfb__pay-1 { font-size: clamp(15px, 5.6cqw, 25px); line-height: 1.18; }
    .rfb__pay-2,
    .rfb__pay-3 { font-size: clamp(24px, 12.4cqw, 56px); line-height: 1.04; margin-left: -.06em; }
    .rfb__pay-4 { font-size: clamp(20px, 8cqw, 36px); line-height: 1.15; }

    .rfb__rewind { left: -30%; top: 50%; translate: 0 -50%; z-index: 1; }
    .rfb__rewind .rfb__rewind-row { gap: calc(55 * var(--u) * 1.3); }
    .rfb__chev { width: calc(120 * var(--u) * 1.3); }
    .rfb__veil {
        z-index: 2;
        inset: -40px auto -40px -40px;
        width: calc(40px + 70%);
        background: linear-gradient(90deg, rgba(255, 255, 255, .49) 72%, rgba(255, 255, 255, 0) 100%);
    }

    .rfb__reel { z-index: 2; right: -2%; top: -150%; width: clamp(48px, 20cqw, 100px); }
    .rfb__reel-slab { margin-bottom: -23%; }
    .rfb__reel-slab:nth-child(4n+1) { rotate: 5deg;  left: -6%; }
    .rfb__reel-slab:nth-child(4n+2) { rotate: 11deg; left: 6%; }
    .rfb__reel-slab:nth-child(4n+3) { rotate: 3deg;  left: 11%; }
    .rfb__reel-slab:nth-child(4n+4) { rotate: 9deg;  left: -3%; }

    .rfb__scene--offer { align-self: center; }
    .rfb__copy { position: relative; z-index: 3; }
    .rfb__offer { display: block; white-space: nowrap; }
    .rfb__lede { display: inline-block !important; font-size: var(--n-lede); line-height: 1.2; }
    .rfb__lede--1 { margin-right: .28em; }
    .rfb__risk { display: flex; flex-direction: column; margin-top: .18em; }
    .rfb__risk > span { display: block; font-size: var(--n-risk); line-height: 1; margin-left: -.03em; }
    .rfb__cta {
        width: calc(var(--n-risk) * 3.06);
        min-width: 120px;
        margin-top: var(--n-gap);
        font-size: clamp(15px, 4.8cqw, 19px);
    }
    /* product fills the space right of RISK- / FREE and the CTA */
    .rfb__product {
        position: absolute;
        z-index: 2;
        right: 0;
        bottom: 0;
        top: calc(var(--n-lede) * 1.2 + var(--n-lede) * .18);
        left: calc(var(--n-risk) * 3.06 + var(--n-gap));
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .rfb__product-art { width: 100%; max-width: 200px; }
}


/* ===========================================================================
   MOTION - the handoff's 7s reference timeline, played once, holding on the
   offer. Classes are set by banner-riskfree-v44.js:
     is-armed  JS is present and motion is allowed: first frame = the hook
     is-live   timeline running (restarts when the class is re-added)
     is-paused offscreen / slide inactive mid-run
     is-done   settled on the offer; decorative scenes stop painting
   Without JS, with data-motion=static, or with reduced motion, none of these
   classes are set and the banner is the static offer above.
   =========================================================================== */
@keyframes rfb-out     { from { opacity: 1; } to { opacity: 0; } }
@keyframes rfb-rise    { from { opacity: 0; translate: 0 calc(8 * var(--u)); } to { opacity: 1; translate: 0 0; } }
@keyframes rfb-float   { 0% { translate: 0 0; } 50% { translate: calc(7 * var(--u)) calc(-6 * var(--u)); } 100% { translate: calc(-3 * var(--u)) calc(4 * var(--u)); } }
@keyframes rfb-edge-l  { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: calc(-42 * var(--u)) 0; } }
@keyframes rfb-edge-r  { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: calc(42 * var(--u)) 0; } }
/* payoff layers: in over 1.65-2.05, out over 3.92-4.27 (2.62s window) */
@keyframes rfb-window  { 0% { opacity: 0; } 15% { opacity: 1; } 87% { opacity: 1; } 100% { opacity: 0; } }
@keyframes rfb-chev-window { 0% { opacity: 0; } 11% { opacity: .74; } 87% { opacity: .74; } 100% { opacity: 0; } }
@keyframes rfb-chev-move { from { translate: 0 0; } to { translate: calc(-383 * var(--u)) 0; } }
@keyframes rfb-reel    { 0% { translate: calc(20 * var(--u)) 0; } 15% { translate: 0 calc(27 * var(--u)); } 100% { translate: 0 calc(178 * var(--u)); } }
@keyframes rfb-recoil  { 0% { translate: 0 0; } 50% { translate: 0 calc(-19 * var(--u)); } 100% { translate: 0 0; } }
@keyframes rfb-prod    { from { opacity: 0; translate: var(--fx, 0) var(--fy, 0); rotate: var(--fr, 0deg); } to { opacity: 1; translate: 0 0; } }

.rfb.is-armed:not(.is-done) .rfb__scene--hook { opacity: 1; }
.rfb.is-armed:not(.is-done) .rfb__scene--payoff { opacity: 1; }
.rfb.is-armed:not(.is-done) .rfb__rewind,
.rfb.is-armed:not(.is-done) .rfb__veil,
.rfb.is-armed:not(.is-done) .rfb__reel,
.rfb.is-armed:not(.is-done) .rfb__payoff > span,
.rfb.is-armed:not(.is-done) .rfb__offer > span,
.rfb.is-armed:not(.is-done) .rfb__cta,
.rfb.is-armed:not(.is-done) .rfb__prod { opacity: 0; }

/* scene 1: out at 1.65 */
.rfb.is-live .rfb__hook { animation: rfb-out .16s var(--rfb-ease) 1.65s both; }
.rfb.is-live .rfb__float { animation: rfb-float 1.65s ease-in-out both; }
.rfb.is-live .rfb__edge--lb .rfb__float,
.rfb.is-live .rfb__edge--rt .rfb__float { animation-direction: reverse; }
.rfb.is-live .rfb__edge--lt,
.rfb.is-live .rfb__edge--lb { animation: rfb-edge-l .34s var(--rfb-ease) 1.65s both; }
.rfb.is-live .rfb__edge--rt,
.rfb.is-live .rfb__edge--rb { animation: rfb-edge-r .34s var(--rfb-ease) 1.65s both; }

/* scene 2: 1.65 - 4.27 */
.rfb.is-live .rfb__rewind { animation: rfb-chev-window 2.62s linear 1.65s both; }
.rfb.is-live .rfb__rewind-row { animation: rfb-chev-move 2.62s linear 1.65s both; }
.rfb.is-live .rfb__veil { animation: rfb-window 2.62s linear 1.65s both; }
.rfb.is-live .rfb__reel { animation: rfb-window 2.62s linear 1.65s both; }
.rfb.is-live .rfb__reel-col { animation: rfb-reel 2.62s linear 1.65s both; }
.rfb.is-live .rfb__recoil { animation: rfb-recoil .44s var(--rfb-ease) 1.65s both; }
.rfb.is-live .rfb__pay-1 { animation: rfb-rise .16s var(--rfb-ease) 1.76s both; }
.rfb.is-live .rfb__pay-2 { animation: rfb-rise .16s var(--rfb-ease) 1.78s both; }
.rfb.is-live .rfb__pay-3 { animation: rfb-rise .16s var(--rfb-ease) 1.80s both; }
.rfb.is-live .rfb__pay-4 { animation: rfb-rise .16s var(--rfb-ease) 1.82s both; }
.rfb.is-live .rfb__payoff { animation: rfb-out .16s var(--rfb-ease) 3.92s both; }

/* scene 3: product 3.96 - 4.32, copy 4.01 / 4.03, CTA 4.10 - 4.28 */
.rfb__prod--left  { --fx: calc(12 * var(--u)); --fy: calc(27 * var(--u)); --fr: -5deg; }
.rfb__prod--right { --fx: calc(7 * var(--u));  --fy: calc(25 * var(--u)); --fr: 5deg; }
.rfb__prod--pack  { --fx: 0px;                 --fy: calc(53 * var(--u)); --fr: 4deg; }
.rfb.is-live .rfb__prod { animation: rfb-prod .36s var(--rfb-ease) 3.96s both; }
.rfb.is-live .rfb__lede--1 { animation: rfb-rise .16s var(--rfb-ease) 4.01s both; }
.rfb.is-live .rfb__lede--2,
.rfb.is-live .rfb__risk { animation: rfb-rise .16s var(--rfb-ease) 4.03s both; }
.rfb.is-live .rfb__cta { animation: rfb-rise .18s var(--rfb-ease) 4.10s both; }

.rfb.is-paused *,
.rfb.is-paused *::before { animation-play-state: paused !important; }

/* Settled: the offer, and nothing else painting. */
.rfb.is-done .rfb__scene--hook,
.rfb.is-done .rfb__scene--payoff { visibility: hidden; }

@media (prefers-reduced-motion: reduce) {
    .rfb *,
    .rfb *::before { animation: none !important; transition: none !important; }
    .rfb .rfb__scene--hook,
    .rfb .rfb__scene--payoff { visibility: hidden; opacity: 0 !important; }
    .rfb .rfb__offer > span,
    .rfb .rfb__cta,
    .rfb .rfb__prod { opacity: 1 !important; }
}


/* ===========================================================================
   Homepage placements (templates/index.html)
   =========================================================================== */
/* Hero slide: the slot's height is fixed by the shared campaign rules in
   banner-showroom.css (clamp(430px, 32vw, 540px) wide; min-height 500px at
   <=820px). The banner is told that height so --u can fit it. Padding matches
   the other campaign slides' .vbn-inner so the copy lines up across slides. */
body.page-public .pv-hero .rfb-slot {
    --rfb-height: clamp(430px, 32vw, 540px);
    --rfb-pad: clamp(42px, 6vw, 104px);
    --rfb-radius: 22px;
    border: 0 !important;
    background: #ebf4ff;
}

@media (max-width: 820px) {
    body.page-public .pv-hero .rfb-slot {
        --rfb-height: 500px;
        --rfb-pad: 22px;
        --rfb-radius: 16px;
    }
}

/* Phone landing strip (.lp-rf in index.html). Layout, size and inset stay
   home.css's; this re-skins it to the ad: icy ground, navy + vivid blue, the
   ad's Arial Bold / Arial Black, blue pill CTA, and the blossom pack. */
@media (max-width: 760px) {
    .lp-rf.lp-rf--v44 {
        background:
            radial-gradient(ellipse 70% 120% at 18% 20%, rgba(255, 255, 255, .95) 0%, rgba(255, 255, 255, 0) 70%),
            radial-gradient(ellipse 50% 90% at 100% 100%, rgba(210, 220, 255, .6) 0%, rgba(210, 220, 255, 0) 70%),
            #ebf4ff;
    }
    .lp-rf.lp-rf--v44::before { display: none; }
    .lp-rf--v44 .lp-rf-art { transform: rotate(-6deg); }
    .lp-rf--v44 .lp-rf-art img { filter: drop-shadow(0 8px 12px rgba(16, 30, 56, .28)); }
    .lp-rf--v44 .lp-rf-body { gap: 0; }
    .lp-rf--v44 .lp-rf-head {
        margin: 0 0 1px;
        font-family: "RFB Heavy", "Arial Black", Arial, sans-serif;
        font-weight: 900;
        font-size: clamp(17px, 5.9vw, 25px);
        line-height: 1.02;
        letter-spacing: 0;
        text-transform: uppercase;
        color: #2445d8;
    }
    .lp-rf--v44 .lp-rf-sub,
    .lp-rf--v44 .lp-rf-note {
        margin: 0;
        font-family: "RFB Bold", Arial, Helvetica, sans-serif;
        font-weight: 700;
        white-space: nowrap;
        letter-spacing: 0;
    }
    .lp-rf--v44 .lp-rf-sub { margin-top: 3px; font-size: clamp(10px, 3.4vw, 14px); line-height: 1.2; color: #101e38; }
    .lp-rf--v44 .lp-rf-note { margin-top: 2px; font-size: clamp(10px, 3.1vw, 13px); line-height: 1.25; color: rgba(16, 30, 56, .66); }
    .lp-rf--v44 .lp-rf-cta {
        padding: 0 16px;
        min-height: 44px;
        background: #2445d8;
        box-shadow: 0 8px 18px -8px rgba(36, 69, 216, .6);
        font-family: "RFB Bold", Arial, Helvetica, sans-serif;
        font-size: clamp(12px, 3.6vw, 14px);
        font-weight: 700;
        letter-spacing: 0;
        text-transform: uppercase;
    }
}

@media (max-width: 359px) {
    .lp-rf.lp-rf--v44 { gap: 10px; padding-right: 12px; }
    .lp-rf--v44 .lp-rf-body { padding-left: 2px; }
    .lp-rf--v44 .lp-rf-cta { padding: 0 12px; }
    /* "First $25 Starter Pack" is 10.24em; the text column is ~111px at 320 */
    .lp-rf--v44 .lp-rf-sub { font-size: clamp(10px, 3.3vw, 11.5px); }
}