/* ═══════════════════════════════════════════════════════════════════
   SSR Common - Shared styles across all SSR pages
   ═══════════════════════════════════════════════════════════════════ */

/* ── SSR palette ──────────────────────────────────────────────────────
   SSR pages link the shared /blog/article.css for the base palette, but that
   file is streamed FROM S3 by blogPageController, so a local edit to
   content/blog/article.css never shows up in dev (no refresh, no rebuild).
   The tokens SSR pages iterate on are therefore also defined here: this file is
   bundled into every SSR page's cssPath, which the shell links AFTER
   article.css, so these win on every SSR page - and it IS read from disk in dev
   (createCssGetter re-reads unless NODE_ENV === "production").
   When a value settles here, mirror it into content/blog/article.css + deploy
   the static blog assets, because blog ARTICLES (static HTML) still use only
   that file. */
:root {
    --surface: #242d3d;
}

/* ── CTA Button (soft blob) ─────────────────── */
.ssr-cta {
    position: relative;
    z-index: 1;
    isolation: isolate;
    display: block;
    margin-inline: auto;
    width: fit-content;
    background: transparent;
    border: none;
    color: #fffbe6;
    font-weight: 700;
    font-size: 0.9rem;
    padding: 0.65rem 1.65rem;
    border-radius: 1.5rem 0.6rem 1.5rem 0.6rem;
    text-decoration: none;
    font-family: var(--font);
    transition: transform 0.25s, border-radius 0.4s, box-shadow 0.25s;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
    text-align: center;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
}
.ssr-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    padding: 1px;
    border-radius: inherit;
    background: linear-gradient(
        110deg,
        #c4b8f0,
        #b4a4e8,
        #a490e0,
        #bca8ec,
        #ccbcf4,
        #bca8ec,
        #a490e0,
        #b8a8e4,
        #c0b0ec,
        #b4a4e8,
        #c4b8f0
    );
    background-size: 300% 100%;
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0.72;
    animation: cp-ai-border-flow 12s linear infinite;
    pointer-events: none;
}
.ssr-cta::after {
    content: "";
    position: absolute;
    inset: 1px;
    z-index: -1;
    border-radius: calc(1.5rem - 1px) calc(0.6rem - 1px) calc(1.5rem - 1px) calc(0.6rem - 1px);
    background: linear-gradient(135deg, rgba(167, 139, 250, 0.92), rgba(147, 121, 240, 0.75), rgba(127, 109, 230, 0.72), rgba(167, 139, 250, 0.92));
    background-size: 300% 300%;
    animation: cp-ai-bg-shift 14s linear infinite;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    pointer-events: none;
    transition: border-radius 0.4s, background 0.25s;
}
@media (hover: hover) {
    .ssr-cta:hover {
        border-radius: 0.6rem 1.5rem 0.6rem 1.5rem;
        transform: translateY(-2px);
        background: transparent;
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
    }
    .ssr-cta:hover::after {
        border-radius: calc(0.6rem - 1px) calc(1.5rem - 1px) calc(0.6rem - 1px) calc(1.5rem - 1px);
        background: linear-gradient(135deg, rgba(167, 139, 250, 0.95), rgba(147, 121, 240, 0.8), rgba(127, 109, 230, 0.78), rgba(167, 139, 250, 0.95));
        background-size: 300% 300%;
        animation: cp-ai-bg-shift 14s linear infinite;
    }
}

@keyframes cp-ai-border-flow {
    to { background-position: 250% 0; }
}
@keyframes cp-ai-bg-shift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* ── Sticky bottom CTA ──────────────── */
.cp-sticky-cta-wrap {
    position: sticky;
    bottom: 0.5rem;
    z-index: 10;
    margin: 1.5rem -0.625rem 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: calc(100% + 1.25rem);
}
.cp-sticky-cta-wrap .ssr-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 3rem;
    margin-bottom: 0.25rem;
    padding: 0.35rem 2rem;
    text-shadow: none;
}
.cp-ai-cta-label {
    position: relative;
    z-index: 1;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}
.cp-sticky-cta-wrap .ssr-cta:focus-visible {
    outline: 3px solid rgba(96, 165, 250, 0.5);
    outline-offset: 4px;
}
@media (prefers-reduced-motion: reduce) {
    .cp-sticky-cta-wrap .ssr-cta::before,
    .cp-sticky-cta-wrap .ssr-cta::after {
        animation: none;
    }
}

/* ── Animatable custom properties for hero caustics ── */
@property --ray-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}
@property --ray-a {
    syntax: '<number>';
    initial-value: 0.7;
    inherits: false;
}
@property --ray-shift-1 {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}
@property --ray-shift-2 {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}
@property --ray-shift-3 {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

/* ── Hero purple caustics glow ── */
/* Desktop: 3 PARALLEL light beams drawn as bands of a single linear-gradient (a conic
   fan can never be parallel); each beam slides on its own slow desynced sway
   (--ray-shift-1/2/3) like light through a shifting water surface. All purple-family.
   Mobile (<600px): same 3-beam background with its own mask + tilt cycle (below).
   NOTE: ::before is reserved for page-specific border overlays (e.g. .bp-hero::before).
   The animated caustics layer lives in ::after. */
/* ── Shared hero padding (providers + insurance) ── */
.ssr-hero-pad { padding: 1.25rem 1.25rem 1.25rem 2rem; }

.ssr-hero-glow {
    /* static base: faint radial wash from outside top-right + dark tint */
    background-image:
        radial-gradient(
            ellipse 140% 140% at 110% -8%,
            rgba(167, 139, 250, 0.18) 0%,
            rgba(139, 92, 246, 0.075) 40%,
            transparent 70%
        ),
        linear-gradient(
            rgba(0, 0, 0, 0.14),
            rgba(0, 0, 0, 0.14)
        );
}

/* animated caustics: 3 parallel beams (desktop) - mobile overrides with its own fan below */
.ssr-hero-glow::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    /* 3 parallel beams - soft-domed, each with its own slow sway offset.
       Layering trick: left/right beams are the separate TOP layer, the middle beam is
       the BOTTOM layer, and the water-depth fade sits BETWEEN them with
       "background-blend-mode: multiply" - so the fade can only darken the middle beam
       (light attenuating the deeper it travels into the card), never the left/right. */
    background:
        /* right beam only - the left ray is hidden on desktop (its band stops are removed;
           it stays active on mobile, see the mobile block below). */
        linear-gradient(
            calc(142deg + var(--ray-angle) * 1.5),
            transparent 0%,
            transparent calc(78.7% + var(--ray-shift-3)),
            rgba(167, 139, 250, 0.11) calc(82.6% + var(--ray-shift-3)),
            rgba(167, 139, 250, 0.20) calc(86.5% + var(--ray-shift-3)),
            rgba(167, 139, 250, 0.11) calc(90.4% + var(--ray-shift-3)),
            transparent calc(94.3% + var(--ray-shift-3))
        ),
        /* water-depth fade - multiplies ONLY the middle beam layer below it */
        linear-gradient(
            calc(232deg + var(--ray-angle) * 1.5),
            rgba(0, 0, 0, 0) 0%,
            rgba(0, 0, 0, 0.08) 25%,
            rgba(0, 0, 0, 0.30) 55%,
            rgba(0, 0, 0, 0.65) 80%,
            rgba(0, 0, 0, 0.90) 100%
        ),
        /* middle beam - the only layer the depth fade touches */
        linear-gradient(
            calc(142deg + var(--ray-angle) * 1.5),
            transparent 0%,
            transparent calc(36.3% + var(--ray-shift-2)),
            rgba(139, 92, 246, 0.08) calc(41.4% + var(--ray-shift-2)),
            rgba(139, 92, 246, 0.28) calc(46.5% + var(--ray-shift-2)),
            rgba(139, 92, 246, 0.08) calc(51.6% + var(--ray-shift-2)),
            transparent calc(56.8% + var(--ray-shift-2))
        );
    background-blend-mode: normal, multiply, normal;
    pointer-events: none;
    mix-blend-mode: screen;
    opacity: var(--ray-a);
    /* fade rays as they spread away from origin - keeps them tight like real underwater caustics */
    -webkit-mask-image: radial-gradient(ellipse 320% 280% at 118% -12%, white 0%, rgba(255,255,255,0.85) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.25) 70%, transparent 90%);
    mask-image: radial-gradient(ellipse 320% 280% at 118% -12%, white 0%, rgba(255,255,255,0.85) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.25) 70%, transparent 90%);
    animation: hero-caustics 30s ease-in-out infinite;
}

@keyframes hero-caustics {
    0%   { --ray-angle: 0deg;   --ray-a: 0.32; }
    20%  { --ray-angle: 1.5deg; --ray-a: 0.38; }
    40%  { --ray-angle: -1deg;  --ray-a: 0.28; }
    60%  { --ray-angle: 2deg;   --ray-a: 0.37; }
    80%  { --ray-angle: -0.5deg;--ray-a: 0.30; }
    100% { --ray-angle: 0deg;   --ray-a: 0.32; }
}

/* Sway cycles for the 3 desktop beams - irregular keyframes + different periods/amplitudes
   so each ray drifts on its own rhythm (moving water surface), not a synchronized sweep. */
@keyframes hero-beam-sway-1 {
    0%   { --ray-shift-1: 2.6%; }
    18%  { --ray-shift-1: -0.8%; }
    41%  { --ray-shift-1: -3.6%; }
    63%  { --ray-shift-1: 0.4%; }
    82%  { --ray-shift-1: 3.2%; }
    100% { --ray-shift-1: 2.6%; }
}
@keyframes hero-beam-sway-2 {
    0%   { --ray-shift-2: -3.4%; }
    24%  { --ray-shift-2: 0.8%; }
    49%  { --ray-shift-2: 3.8%; }
    73%  { --ray-shift-2: -1.2%; }
    100% { --ray-shift-2: -3.4%; }
}
@keyframes hero-beam-sway-3 {
    0%   { --ray-shift-3: 1.2%; }
    21%  { --ray-shift-3: 3.8%; }
    46%  { --ray-shift-3: -0.6%; }
    68%  { --ray-shift-3: -4%; }
    100% { --ray-shift-3: 1.2%; }
}

/* Desktop motion: slow tilt/breathe (90s) + the desynced beam sways.
   hero-beam-sway-1 is intentionally NOT applied: the left ray is pinned (no sway).
   Mobile keeps its conic fan + hero-caustics-mobile at the base 30s. */
@media (min-width: 601px) {
    .ssr-hero-glow::after {
        animation: hero-caustics 90s ease-in-out infinite,
            hero-beam-sway-2 40s ease-in-out infinite,
            hero-beam-sway-3 29s ease-in-out infinite;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ssr-hero-glow::after {
        animation: none;
        --ray-angle: 2deg;
        --ray-a: 0.34;
    }
}

/* ── Mobile: origin further outside for portrait layout ── */
@media (max-width: 600px) {
    .ssr-hero-pad { padding: 1rem 1rem 0.75rem; }
    .ssr-hero-glow {
        background-image:
            radial-gradient(
                ellipse 180% 160% at 110% -5%,
                rgba(167, 139, 250, 0.21) 0%,
                rgba(139, 92, 246, 0.09) 40%,
                transparent 70%
            ),
            linear-gradient(
                rgba(0, 0, 0, 0.14),
                rgba(0, 0, 0, 0.14)
            );
    }
    .ssr-hero-glow::after {
        /* same 3 parallel beams as desktop, on the portrait layout.
           Beam 1 sits higher (8.5%) so it runs through the card's top-left cutout area
           around the VETTED logo instead of being hidden behind the white brand panel.
           Depth fade applies to the middle beam only (same layering as desktop). */
        background:
            /* left + right beams - no depth fade */
            linear-gradient(
                calc(142deg + var(--ray-angle) * 1.5),
                transparent 0%,
                transparent calc(3.1% + var(--ray-shift-1)),
                rgba(139, 92, 246, 0.34) calc(5.8% + var(--ray-shift-1)),
                rgba(139, 92, 246, 0.45) calc(8.5% + var(--ray-shift-1)),
                rgba(139, 92, 246, 0.34) calc(11.2% + var(--ray-shift-1)),
                transparent calc(13.9% + var(--ray-shift-1)),
                transparent calc(78.7% + var(--ray-shift-3)),
                rgba(167, 139, 250, 0.10) calc(82.6% + var(--ray-shift-3)),
                rgba(167, 139, 250, 0.19) calc(86.5% + var(--ray-shift-3)),
                rgba(167, 139, 250, 0.10) calc(90.4% + var(--ray-shift-3)),
                transparent calc(94.3% + var(--ray-shift-3))
            ),
            /* water-depth fade - multiplies ONLY the middle beam layer below it
               (mobile variant: dimming now starts earlier and ends darker, so the
               beam visibly sinks as it travels deeper into the card) */
            linear-gradient(
                calc(232deg + var(--ray-angle) * 1.5),
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.07) 40%,
                rgba(0, 0, 0, 0.18) 65%,
                rgba(0, 0, 0, 0.34) 86%,
                rgba(0, 0, 0, 0.55) 100%
            ),
            /* middle beam - the only layer the depth fade touches */
            linear-gradient(
                calc(142deg + var(--ray-angle) * 1.5),
                transparent 0%,
                transparent calc(45.3% + var(--ray-shift-2)),
                rgba(139, 92, 246, 0.045) calc(50.4% + var(--ray-shift-2)),
                rgba(139, 92, 246, 0.285) calc(55.5% + var(--ray-shift-2)),
                rgba(139, 92, 246, 0.045) calc(60.6% + var(--ray-shift-2)),
                transparent calc(65.8% + var(--ray-shift-2))
            );
        background-blend-mode: normal, multiply, normal;
        -webkit-mask-image: radial-gradient(ellipse 240% 300% at 112% -5%, white 0%, rgba(255,255,255,0.85) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.25) 70%, transparent 90%);
        mask-image: radial-gradient(ellipse 240% 300% at 112% -5%, white 0%, rgba(255,255,255,0.85) 30%, rgba(255,255,255,0.55) 50%, rgba(255,255,255,0.25) 70%, transparent 90%);
        animation: hero-caustics-mobile 90s ease-in-out infinite,
            hero-beam-sway-2 40s ease-in-out infinite,
            hero-beam-sway-3 29s ease-in-out infinite;
    }
}

@keyframes hero-caustics-mobile {
    0%   { --ray-angle: 0deg;   --ray-a: 0.28; }
    20%  { --ray-angle: 5deg;   --ray-a: 0.32; }
    40%  { --ray-angle: -3deg;  --ray-a: 0.23; }
    60%  { --ray-angle: 7deg;   --ray-a: 0.30; }
    80%  { --ray-angle: -2deg;  --ray-a: 0.24; }
    100% { --ray-angle: 0deg;   --ray-a: 0.28; }
}

@media (max-width: 600px) and (prefers-reduced-motion: reduce) {
    .ssr-hero-glow::after {
        animation: none;
        --ray-angle: 2deg;
        --ray-a: 0.28;
    }
}

/* ── Shared card glow (all SSR cards) ──
   Every SSR card carries the same purple light. It reads like a beam: the pool is
   anchored just outside the card's BOTTOM-LEFT corner, with one slim parallel beam
   at 322deg (the vertical mirror of the hero's 142deg family) leaving that corner.
   Tuned to read as LIGHT rather than a wash: steep pool falloff, a 5-stop beam dome
   with soft shoulders, and an asymmetric edge highlight (bottom edge catches the
   light, left edge only grazes it). Static, no animation.

   WHERE it goes: on the CONTENT box of cards that have a light image/logo header
   (the light would be invisible over white), or on the card itself when the card is
   dark all over. `.ssr-card-glow` remains for ad-hoc opt-in on anything not listed.

   Painted on ::after because page CSS is concatenated AFTER this file, so a
   page-level `background` shorthand would wipe anything painted on the element
   itself. None of the elements below use ::after for anything else (only tooltips,
   the hero glow layers and `.faq-item summary` do).
   NOTE: never add elements that are absolutely positioned by their own component CSS
   (e.g. `.bp-related-overlay`, which pins the related-articles text over the photo) -
   the `position: relative` below would win the cascade and break their layout. */
.ssr-card-glow,
.pc-body,
.bc-body,
.sc-header,
.ic-body,
.ac-body,
.cc-header,
.calc-card-body,
.filters,
.cp-filter,
.bp-filter,
.wp-filter,
.ap-filter,
.product-section,
.bp-bottom-card,
.sd-cat,
.wp-card,
.wp-term-def,
.bh-card,
.bd-card,
.bd-filter,
.bd-adoption-cta,
.bp-section,
.bp-toc,
.bp-similar-card,
.bp-proscons-col,
.bp-attribution,
.plan-card,
.detail-card,
.spec-item,
.calc-result,
.calc-step-card,
.cb-card,
.cp-related-card {
    position: relative;
    isolation: isolate;
}
.ssr-card-glow::after,
.pc-body::after,
.bc-body::after,
.sc-header::after,
.ic-body::after,
.ac-body::after,
.cc-header::after,
.calc-card-body::after,
.filters::after,
.cp-filter::after,
.bp-filter::after,
.wp-filter::after,
.ap-filter::after,
.product-section::after,
.bp-bottom-card::after,
.sd-cat::after,
.wp-card::after,
.wp-term-def::after,
.bh-card::after,
.bd-card::after,
.bd-filter::after,
.bd-adoption-cta::after,
.bp-section::after,
.bp-toc::after,
.bp-similar-card::after,
.bp-proscons-col::after,
.bp-attribution::after,
.plan-card::after,
.detail-card::after,
.spec-item::after,
.calc-result::after,
.calc-step-card::after,
.cb-card::after,
.cp-related-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background:
        /* light pool: anchored outside the bottom-left corner, steep falloff */
        radial-gradient(
            ellipse 95% 125% at -10% 122%,
            rgba(167, 139, 250, 0.145) 0%,
            rgba(139, 92, 246, 0.035) 35%,
            rgba(139, 92, 246, 0) 72%
        ),
        /* slim beam with soft shoulders (dome, not a flat ramp). Band centred so its
           isoline passes just inside the bottom-left corner: the beam then reads as a
           diagonal sweep leaving the light pool instead of a stray streak. */
        linear-gradient(
            322deg,
            rgba(139, 92, 246, 0) 10%,
            rgba(139, 92, 246, 0.014) 30%,
            rgba(139, 92, 246, 0.03) 58%,
            rgba(139, 92, 246, 0.014) 86%,
            rgba(139, 92, 246, 0) 100%
        );
    /* edge highlight: bottom edge catches the light, left edge only grazes it */
    box-shadow:
        inset 0 -1px 0 rgba(167, 139, 250, 0.11),
        inset 1px 0 0 rgba(167, 139, 250, 0.06);
}

/* ── Back to top link ──────────────── */
.back-to-top { display: block; text-align: center; color: #9ca3af; font-size: 0.8rem; margin-top: 1.25rem; text-decoration: none; }
.back-to-top:hover { color: var(--accent); }

/* ── Shared SSR footer wrap (injected by createSSRPage via the `footer` option) ── */
/* Negative top margin compensates the page wrapper's bottom padding (all SSR page wrappers use `padding: ... 4rem`), which used to come AFTER the footer when it was rendered inside the wrapper. The footer's own first-child margins (related articles 1rem / share panel 2.5rem) now provide the visual gap. */
/* Default width matches the most common page wrapper (56rem); pages with other wrapper widths override via `~` sibling selectors in their own CSS (e.g. `.wp-page ~ .ssr-footer-wrap { max-width: 72rem }`, `.pp-page ~ .ssr-footer-wrap { max-width: 60rem }`). NOTE: rem scales with the root font (clamp up to 20px on desktop), so a fixed-rem footer can exceed the viewport on narrow windows - sibling overrides keep it aligned with the content column. */
.ssr-footer-wrap { max-width: 56rem; margin: -4rem auto 0; padding: 0 1.5rem 3rem; }
/* ── AI disclaimer (unified boxed look for ALL footer disclaimers) ── */
.ai-disclaimer {
    margin-top: 2rem;
    padding: 1rem 1.25rem;
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    font-size: 0.75rem;
    color: #9ca3af;
    line-height: 1.6;
    text-align: center;
}
.ai-disclaimer a { color: var(--link); text-decoration: none; }
@media (hover: hover) { .ai-disclaimer a:hover { text-decoration: underline; } }
@media (max-width: 600px) {
    /* blog/podcast/wiki wrappers drop to 3rem bottom padding on mobile */
    .ssr-footer-wrap { margin-top: -3rem; padding: 0 1rem 2rem; }
}

/* ── Insurance compare banner (internal link to /insurance) ── */
.ap-insurance-banner { position: relative; overflow: hidden; background: linear-gradient(135deg, #1a1708 0%, #2a2210 50%, #1f2937 100%); border: 1.5px solid var(--accent); border-radius: 1rem; padding: 1.5rem 1.75rem; margin-bottom: 1rem; display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.5rem 1.25rem; transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; box-shadow: 0 4px 20px rgba(249, 166, 29, 0.08); }
.ap-insurance-banner::before { content: ""; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: conic-gradient(from 0deg, transparent 0%, rgba(249, 166, 29, 0.04) 10%, transparent 20%); animation: ap-banner-rotate 8s linear infinite; pointer-events: none; }
@keyframes ap-banner-rotate { to { transform: rotate(360deg); } }
.ap-insurance-banner:hover { border-color: #fbbf24; }
.ap-insurance-banner-icon { width: 2.5rem; height: 2.5rem; flex-shrink: 0; filter: drop-shadow(0 0 8px rgba(249, 166, 29, 0.4)); }
.ap-insurance-banner-body { display: flex; flex-direction: column; gap: 0.4rem; flex: 1; min-width: 0; position: relative; z-index: 1; }
.ap-insurance-banner-footer { display: flex; align-items: center; gap: 1rem; width: 100%; position: relative; z-index: 1; margin-top: 1rem; padding-right: 3.75rem; }
.ap-insurance-banner-title { color: #fff; font-size: 1.3rem; font-weight: 800; line-height: 1.5; }
.ap-insurance-banner-desc { color: #d1d5db; font-size: 0.9rem; line-height: 1.5; }
.ap-insurance-banner-btn { display: inline-flex; align-items: center; gap: 0.4rem; background: linear-gradient(135deg, #f9a61d 0%, #e8950a 100%); color: #1a1708; font-size: 0.85rem; font-weight: 800; padding: 0.5rem 1.1rem; border-radius: 2rem; width: fit-content; transition: background 0.2s, transform 0.15s; box-shadow: 0 2px 10px rgba(249, 166, 29, 0.25); white-space: nowrap; flex-shrink: 0; text-decoration: none; }
.ap-insurance-banner-btn:hover { background: linear-gradient(135deg, #fbbf24 0%, #f9a61d 100%); transform: scale(1.03); }
.ap-insurance-banner-providers { display: flex; gap: 0.5rem; align-items: center; flex: 1; padding-right: 0rem; padding-bottom: 0.5rem; }
.ap-insurance-banner-providers .ap-insurance-circle { height: 2rem; width: 2rem; border-radius: 50%; scale: 1.6; background: #fff; border: 1px solid var(--border); overflow: hidden; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ap-insurance-banner-providers .ap-insurance-circle img { width: 150%; height: 150%; object-fit: contain; transform: translateY(16%); }
.ap-dryfood-banner .ap-insurance-circle img { transform: scale(0.5); }
@media (max-width: 600px) {
    .ap-insurance-banner { flex-direction: row; flex-wrap: wrap; text-align: right; align-items: flex-start; padding: 1rem; gap: 0.6rem 0.6rem; }
    .ap-insurance-banner-icon { width: 1.6rem; height: 1.6rem; filter: none; align-self: flex-start; margin-top: 0.15rem; }
    .ap-insurance-banner-body { width: 100%; }
    .ap-insurance-banner-footer { width: 100%; gap: 0.6rem; padding-right: 0; margin-top: 1.7rem; }
    .ap-insurance-banner-btn { font-size: 0.8rem; padding: 0.4rem 0.9rem; }
    .ap-insurance-banner-providers { justify-content: flex-start; padding-right: 1rem;}
    .ap-insurance-banner-desc { font-size: 0.8rem; }
}