/*
 * RescueSpan Card Language v1
 * Public-site expression: bold, layered, narrative, and deliberately restrained.
 */
:root {
    --rsp-card-charcoal: #071f22;
    --rsp-card-navy: #0b3038;
    --rsp-card-green: #0b7448;
    --rsp-card-green-2: #168559;
    --rsp-card-lime: #caf65e;
    --rsp-card-cream: #fbfaf5;
    --rsp-card-mist: #eaf3ee;
    --rsp-card-border: rgba(10, 47, 40, .16);
    --rsp-card-shadow: 0 26px 70px rgba(5, 35, 31, .18);
    --rsp-card-soft-shadow: 0 14px 36px rgba(5, 35, 31, .11);
}

/* Shared site frame */
body.rescuespan-public-site-page {
    background: var(--rsp-card-cream);
}
.rsp-site {
    background:
        linear-gradient(rgba(13,116,72,.025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(13,116,72,.025) 1px, transparent 1px),
        var(--rsp-card-cream);
    background-size: 42px 42px;
}
.rsp-header {
    border-bottom-color: rgba(255,255,255,.1);
    background: rgba(6, 30, 31, .94);
    box-shadow: 0 10px 34px rgba(4, 25, 24, .12);
}
.rsp-brand strong,
.rsp-header .rsp-nav-links a,
.rsp-header .rsp-link-button {
    color: #fff;
}
.rsp-brand small { color: #a8bbb4; }
.rsp-nav-links a:hover,
.rsp-nav-links a:focus-visible,
.rsp-nav-links a.is-active {
    background: rgba(202,246,94,.13);
    color: var(--rsp-card-lime);
}
.rsp-header .rsp-button {
    border-color: var(--rsp-card-lime);
    background: var(--rsp-card-lime);
    color: var(--rsp-card-charcoal) !important;
}
.rsp-header .rsp-button:hover,
.rsp-header .rsp-button:focus-visible {
    background: #ddff84;
    box-shadow: 0 12px 28px rgba(202,246,94,.2);
}
.rsp-brand-mark {
    overflow: visible;
    width: 44px;
    height: 38px;
    border-radius: 10px;
    background: var(--rsp-card-lime);
    box-shadow: none;
    transform: rotate(-2deg);
}
.rsp-brand-mark::before,
.rsp-brand-mark::after {
    position: absolute;
    width: 31px;
    height: 25px;
    border-radius: 7px;
    content: '';
}
.rsp-brand-mark::before {
    left: 10px;
    top: 9px;
    z-index: 1;
    background: var(--rsp-card-green-2);
    transform: rotate(6deg);
}
.rsp-brand-mark::after {
    left: 13px;
    top: 12px;
    z-index: 2;
    border: 1px solid rgba(6,30,31,.12);
    background: #fff;
    transform: rotate(11deg);
}
.rsp-brand-mark i { display: none; }
.rsp-menu-button {
    border-color: rgba(255,255,255,.24);
    background: rgba(255,255,255,.08);
}
.rsp-menu-button span { background: #fff; }

/* Hero: one story shown as a connected deck */
.rsp-hero {
    padding: 92px 0 90px;
    background:
        radial-gradient(circle at 78% 20%, rgba(21,139,87,.35), transparent 30%),
        radial-gradient(circle at 94% 8%, rgba(202,246,94,.2), transparent 21%),
        linear-gradient(135deg, #04191c 0%, #082c32 56%, #075f3b 135%);
    color: #fff;
}
.rsp-hero::after {
    left: auto;
    right: -180px;
    bottom: -310px;
    border-color: rgba(202,246,94,.07);
}
.rsp-hero-grid {
    grid-template-columns: 1.02fr .98fr;
    gap: 58px;
}
.rsp-hero h1 {
    max-width: 760px;
    margin-bottom: 25px;
    font-size: clamp(3.5rem, 6.2vw, 6.2rem);
    letter-spacing: -.055em;
}
.rsp-hero .rsp-eyebrow { color: var(--rsp-card-lime); }
.rsp-hero .rsp-lead {
    max-width: 690px;
    color: #d6e2de;
}
.rsp-hero .rsp-button {
    border-color: var(--rsp-card-lime);
    background: var(--rsp-card-lime);
    color: var(--rsp-card-charcoal) !important;
}
.rsp-hero .rsp-button-secondary {
    border-color: rgba(255,255,255,.45);
    background: transparent;
    color: #fff !important;
}
.rsp-hero .rsp-button-secondary:hover,
.rsp-hero .rsp-button-secondary:focus-visible {
    border-color: #fff;
    background: rgba(255,255,255,.1);
}
.rsp-hero-proof {
    display: grid;
    grid-template-columns: repeat(3, minmax(0,1fr));
    gap: 9px;
    color: #d9e5e1;
}
.rsp-hero-proof span {
    min-height: 64px;
    padding: 13px 14px;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 14px;
    background: rgba(255,255,255,.055);
    backdrop-filter: blur(10px);
}
.rsp-hero-proof span::before { color: var(--rsp-card-lime); }

.rsp-hero-deck {
    position: relative;
    min-height: 570px;
    perspective: 1300px;
    transform-style: preserve-3d;
    isolation: isolate;
}
.rsp-deck-back {
    position: absolute;
    display: block;
    width: 57%;
    height: 58%;
    right: 15%;
    top: 18%;
    border-radius: 28px;
    box-shadow: 0 24px 65px rgba(0,0,0,.2);
}
.rsp-deck-back.is-deep { background: #06322c; transform: rotate(-7deg) translate(-34px, 25px); }
.rsp-deck-back.is-green { background: var(--rsp-card-green-2); transform: rotate(4deg) translate(16px, 18px); }
.rsp-deck-back.is-lime { background: var(--rsp-card-lime); transform: rotate(10deg) translate(43px, 35px); }
.rsp-story-card {
    position: absolute;
    display: flex;
    flex-direction: column;
    min-height: 305px;
    padding: 28px;
    border: 1px solid rgba(7,31,34,.14);
    border-radius: 24px;
    background: #fff;
    color: var(--rsp-card-charcoal);
    box-shadow: 0 28px 70px rgba(0,0,0,.25);
    transition: transform .25s ease, box-shadow .25s ease;
    will-change: transform;
}
.rsp-story-card small {
    color: var(--rsp-card-green);
    font-size: .68rem;
    font-weight: 900;
    letter-spacing: .13em;
}
.rsp-story-card h2 {
    margin: 16px 0 12px;
    font-size: clamp(1.7rem, 3vw, 2.45rem);
}
.rsp-story-card p { color: #6a7d75; font-size: 1.05rem; }
.rsp-story-card footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid rgba(7,31,34,.12);
    color: #587067;
    font-size: .82rem;
    font-weight: 750;
}
.rsp-story-card-record {
    z-index: 4;
    width: 50%;
    left: 1%;
    top: 9%;
    background: linear-gradient(155deg, #0d3840, #071f22 76%);
    color: #fff;
    transform: rotate(-3.8deg) translate3d(var(--rsp-deck-x, 0), var(--rsp-deck-y, 0), 40px);
}
.rsp-story-card-record small { color: var(--rsp-card-lime); }
.rsp-story-card-record p,
.rsp-story-card-record footer { color: #c6d5d0; }
.rsp-story-card-record footer { border-top-color: rgba(255,255,255,.14); }
.rsp-story-card-record footer span {
    display: inline-block;
    width: 9px;
    height: 9px;
    margin-right: 8px;
    border-radius: 50%;
    background: var(--rsp-card-lime);
    box-shadow: 0 0 0 5px rgba(202,246,94,.12);
}
.rsp-story-card-transport {
    z-index: 5;
    width: 45%;
    right: 19%;
    top: 18%;
    transform: rotate(5deg) translate3d(var(--rsp-deck-x-alt, 0px), var(--rsp-deck-y-alt, 0px), 70px);
}
.rsp-story-card-receipt {
    z-index: 6;
    width: 39%;
    right: -1%;
    top: 29%;
    transform: rotate(9deg) translate3d(var(--rsp-deck-x-far, 0px), var(--rsp-deck-y-far, 0px), 90px);
}
.rsp-story-card:hover { box-shadow: 0 36px 86px rgba(0,0,0,.3); }
.rsp-card-paw {
    position: relative;
    width: 116px;
    height: 104px;
    margin: 8px 0 4px auto;
    opacity: .92;
}
.rsp-card-paw i,
.rsp-card-paw b {
    position: absolute;
    display: block;
    border-radius: 50%;
    background: linear-gradient(145deg, var(--rsp-card-lime), #6fbf52);
}
.rsp-card-paw i { width: 25px; height: 32px; }
.rsp-card-paw i:nth-child(1) { left: 7px; top: 17px; transform: rotate(-20deg); }
.rsp-card-paw i:nth-child(2) { left: 35px; top: 2px; transform: rotate(-8deg); }
.rsp-card-paw i:nth-child(3) { right: 31px; top: 2px; transform: rotate(8deg); }
.rsp-card-paw i:nth-child(4) { right: 4px; top: 20px; transform: rotate(20deg); }
.rsp-card-paw b { width: 67px; height: 58px; left: 25px; bottom: 2px; border-radius: 48% 48% 54% 54%; }
.rsp-deck-connection {
    position: absolute;
    z-index: 7;
    left: 30%;
    right: 2%;
    top: 59%;
    height: 105px;
    border-bottom: 3px dashed var(--rsp-card-lime);
    border-radius: 0 0 50% 50%;
    transform: rotate(6deg);
    pointer-events: none;
}
.rsp-deck-connection i {
    position: absolute;
    bottom: -8px;
    width: 14px;
    height: 14px;
    border: 3px solid var(--rsp-card-lime);
    border-radius: 50%;
    background: var(--rsp-card-charcoal);
}
.rsp-deck-connection i:nth-child(1) { left: 0; }
.rsp-deck-connection i:nth-child(2) { left: 48%; }
.rsp-deck-connection i:nth-child(3) { right: 0; }
.rsp-deck-note {
    position: absolute;
    z-index: 8;
    right: 0;
    bottom: 2%;
    max-width: 220px;
    color: var(--rsp-card-lime);
    font-size: 1.05rem;
    font-style: italic;
    font-weight: 750;
    transform: rotate(-4deg);
}

/* Page heroes keep the deck language without overwhelming the page. */
.rsp-page-hero {
    overflow: hidden;
    padding: 94px 0 82px;
    background:
        radial-gradient(circle at 76% 10%, rgba(28,139,88,.38), transparent 31%),
        radial-gradient(circle at 92% 0, rgba(202,246,94,.17), transparent 23%),
        linear-gradient(135deg, #061c20, #0b3138 62%, #07643f 135%);
}
.rsp-page-hero .rsp-shell {
    width: min(1180px, calc(100% - 40px));
    max-width: none;
    margin: 0 auto;
}
.rsp-page-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 390px;
    gap: 64px;
    align-items: center;
}
.rsp-page-hero h1 { max-width: 900px; letter-spacing: -.055em; }
.rsp-page-deck {
    position: relative;
    min-height: 275px;
    perspective: 1000px;
}
.rsp-page-deck > i {
    position: absolute;
    width: 230px;
    height: 165px;
    right: 42px;
    top: 54px;
    border-radius: 21px;
}
.rsp-page-deck > i:nth-child(1) { background: var(--rsp-card-green-2); transform: rotate(-8deg) translate(-18px, 12px); }
.rsp-page-deck > i:nth-child(2) { background: var(--rsp-card-lime); transform: rotate(8deg) translate(28px, 18px); }
.rsp-page-deck article {
    position: absolute;
    width: 230px;
    min-height: 165px;
    padding: 24px;
    border-radius: 21px;
    box-shadow: 0 25px 55px rgba(0,0,0,.25);
}
.rsp-page-deck article small { display: block; margin-bottom: 28px; font-size: .65rem; font-weight: 900; letter-spacing: .12em; }
.rsp-page-deck article strong { display: block; font-size: 1.45rem; line-height: 1.05; }
.rsp-page-deck article:nth-of-type(1) { left: 5px; top: 25px; z-index: 3; background: #fff; color: var(--rsp-card-charcoal); transform: rotate(-5deg); }
.rsp-page-deck article:nth-of-type(1) small { color: var(--rsp-card-green); }
.rsp-page-deck article:nth-of-type(2) { right: 4px; top: 83px; z-index: 4; background: var(--rsp-card-charcoal); color: #fff; transform: rotate(6deg); }
.rsp-page-deck article:nth-of-type(2) small { color: var(--rsp-card-lime); }

/* Card roles across the marketing site */
.rsp-card-role,
.rsp-difference-grid article,
.rsp-audience-card,
.rsp-trust-list article,
.rsp-mini-product,
.rsp-principles-grid article,
.rsp-form-card,
.rsp-resource-note,
.rsp-request-boundary {
    position: relative;
    isolation: isolate;
}
.rsp-card-role::before,
.rsp-difference-grid article::before,
.rsp-audience-card::before,
.rsp-form-card::before {
    position: absolute;
    z-index: -2;
    inset: 10px -8px -10px 8px;
    border-radius: inherit;
    background: var(--rsp-card-green-2);
    opacity: .26;
    transform: rotate(1.3deg);
    content: '';
}
.rsp-card-role::after,
.rsp-difference-grid article::after,
.rsp-audience-card::after,
.rsp-form-card::after {
    position: absolute;
    z-index: -3;
    inset: 18px -15px -18px 15px;
    border-radius: inherit;
    background: var(--rsp-card-lime);
    opacity: .17;
    transform: rotate(2.4deg);
    content: '';
}
.rsp-card-role,
.rsp-difference-grid article,
.rsp-audience-card,
.rsp-trust-list article,
.rsp-principles-grid article,
.rsp-form-card {
    box-shadow: var(--rsp-card-soft-shadow);
}
.rsp-feature-card,
.rsp-outcome-card,
.rsp-resource-card,
.rsp-difference-grid article {
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.rsp-feature-card:hover,
.rsp-outcome-card:hover,
.rsp-resource-card:hover,
.rsp-difference-grid article:hover {
    z-index: 3;
    border-color: rgba(13,116,72,.35);
    box-shadow: var(--rsp-card-shadow);
    transform: translateY(-8px) rotate(-.35deg);
}
.rsp-card-grid-3 > .rsp-feature-card:nth-child(2),
.rsp-outcome-grid > .rsp-outcome-card:nth-child(2),
.rsp-resource-grid > .rsp-resource-card:nth-child(2n) {
    transform: rotate(.45deg);
}
.rsp-card-grid-3 > .rsp-feature-card:nth-child(3),
.rsp-outcome-grid > .rsp-outcome-card:nth-child(3) {
    transform: rotate(-.35deg);
}
.rsp-feature-card > span,
.rsp-outcome-card > span {
    background: var(--rsp-card-lime);
    color: var(--rsp-card-charcoal);
    box-shadow: 0 8px 18px rgba(13,116,72,.14);
}
.rsp-difference-grid article:nth-child(1),
.rsp-difference-grid article:nth-child(4) {
    background: linear-gradient(145deg, #103840, #071f22);
    color: #fff;
}
.rsp-difference-grid article:nth-child(1) p,
.rsp-difference-grid article:nth-child(4) p { color: #c6d5d0; }
.rsp-difference-grid article:nth-child(1) > span,
.rsp-difference-grid article:nth-child(4) > span {
    background: var(--rsp-card-lime);
    color: var(--rsp-card-charcoal);
}
.rsp-audience-card {
    overflow: hidden;
    border: 1px solid rgba(13,116,72,.16);
    box-shadow: var(--rsp-card-shadow);
}
.rsp-audience-card.is-shelter {
    background:
        radial-gradient(circle at 100% 0, rgba(202,246,94,.14), transparent 30%),
        linear-gradient(150deg, #103840, #071f22 80%);
}
.rsp-audience-card.is-rescue {
    background:
        radial-gradient(circle at 100% 0, rgba(202,246,94,.28), transparent 30%),
        linear-gradient(150deg, #f6fff8, #dff2e8);
}
.rsp-mini-product {
    overflow: visible;
    padding: 30px;
    background: transparent;
    box-shadow: none;
}
.rsp-mini-product::before,
.rsp-mini-product::after {
    position: absolute;
    z-index: -2;
    inset: 25px 10px 5px 30px;
    border-radius: 25px;
    background: var(--rsp-card-green-2);
    transform: rotate(-2deg);
    content: '';
}
.rsp-mini-product::after {
    z-index: -3;
    inset: 38px 0 -5px 45px;
    background: var(--rsp-card-lime);
    opacity: .58;
    transform: rotate(3deg);
}
.rsp-mini-product article {
    min-height: 130px;
    background: linear-gradient(145deg, #123942, #0a272c);
    box-shadow: 0 16px 32px rgba(5,35,31,.18);
    transition: transform .2s ease;
}
.rsp-mini-product article:nth-child(1) { transform: rotate(-.8deg); }
.rsp-mini-product article:nth-child(2) { transform: translateX(16px) rotate(.7deg); }
.rsp-mini-product article:nth-child(3) { transform: translateX(5px) rotate(-.4deg); }
.rsp-pricing-card.is-featured {
    background:
        radial-gradient(circle at 100% 0, rgba(202,246,94,.18), transparent 33%),
        linear-gradient(155deg, #103840, #071f22 78%);
    color: #fff;
}
.rsp-pricing-card.is-featured .rsp-price span,
.rsp-pricing-card.is-featured li { color: #c7d7d1; }
.rsp-pricing-card.is-featured li::before { color: var(--rsp-card-lime); }
.rsp-pricing-card.is-featured > b { color: var(--rsp-card-charcoal); }
.rsp-resource-card > span { display: inline-flex; min-height: 30px; align-items: center; padding: 0 10px; border-radius: 999px; background: var(--rsp-card-mist); }
.rsp-principles-grid article:nth-child(3n+1) { background: rgba(202,246,94,.07); }
.rsp-principles-grid article:nth-child(3n+2) { background: rgba(255,255,255,.07); }
.rsp-form-card {
    border-color: rgba(13,116,72,.2);
    background:
        radial-gradient(circle at 100% 0, rgba(202,246,94,.16), transparent 25%),
        #fff;
}

/* Workflow cards are an actual selectable deck. */
.rsp-journey-tabs {
    gap: 12px;
    align-items: stretch;
}
.rsp-journey-tabs::before {
    top: 48%;
    height: 3px;
    background: repeating-linear-gradient(90deg, var(--rsp-card-green) 0 10px, transparent 10px 18px);
    opacity: .2;
}
.rsp-journey-tabs button {
    overflow: visible;
    min-height: 176px;
    padding: 18px 15px 20px;
    border-color: var(--rsp-card-border);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 12px 27px rgba(5,35,31,.09);
    transform-origin: bottom center;
}
.rsp-journey-tabs button::before {
    position: absolute;
    z-index: -1;
    inset: 8px -6px -8px 6px;
    border-radius: inherit;
    background: var(--rsp-card-green-2);
    opacity: .25;
    transform: rotate(1.7deg);
    content: '';
}
.rsp-journey-tabs button:nth-child(even) { transform: rotate(.7deg); }
.rsp-journey-tabs button:nth-child(3n) { transform: rotate(-.8deg); }
.rsp-journey-tabs button:hover,
.rsp-journey-tabs button:focus-visible {
    transform: translateY(-9px) rotate(-.5deg);
}
.rsp-journey-tabs button.is-active {
    z-index: 4;
    border-color: rgba(202,246,94,.65);
    background: linear-gradient(150deg, #113a42, #071f22);
    color: #fff;
    box-shadow: 0 24px 52px rgba(5,35,31,.24);
    transform: translateY(-13px) rotate(-1deg) scale(1.035);
}
.rsp-journey-tabs button.is-active::before {
    background: var(--rsp-card-lime);
    opacity: .68;
}
.rsp-journey-tabs button.is-active strong { color: #fff; }
.rsp-journey-tabs button.is-active span { background: var(--rsp-card-lime); color: var(--rsp-card-charcoal); }
.rsp-journey-detail {
    position: relative;
    isolation: isolate;
    overflow: visible;
    border-color: rgba(202,246,94,.18);
    background:
        radial-gradient(circle at 94% 0, rgba(202,246,94,.11), transparent 27%),
        linear-gradient(145deg, #113a42, #071f22);
}
.rsp-journey-detail::before,
.rsp-journey-detail::after {
    position: absolute;
    z-index: -1;
    inset: 12px -10px -12px 10px;
    border-radius: inherit;
    background: var(--rsp-card-green-2);
    opacity: .3;
    transform: rotate(.8deg);
    content: '';
}
.rsp-journey-detail::after {
    z-index: -2;
    inset: 23px -18px -23px 18px;
    background: var(--rsp-card-lime);
    opacity: .16;
    transform: rotate(1.8deg);
}

/* Final call to action is one large closing card in the deck. */
.rsp-final-cta {
    overflow: hidden;
    padding: 86px 0;
    background: var(--rsp-card-cream);
}
.rsp-final-cta .rsp-shell {
    position: relative;
    isolation: isolate;
    padding: 46px 50px;
    border-radius: 28px;
    background:
        radial-gradient(circle at 100% 0, rgba(202,246,94,.16), transparent 32%),
        linear-gradient(145deg, #0f3a42, #071f22 78%);
    box-shadow: var(--rsp-card-shadow);
}
.rsp-final-cta .rsp-shell::before,
.rsp-final-cta .rsp-shell::after {
    position: absolute;
    z-index: -1;
    inset: 14px -10px -14px 10px;
    border-radius: inherit;
    background: var(--rsp-card-green-2);
    transform: rotate(.6deg);
    content: '';
}
.rsp-final-cta .rsp-shell::after {
    z-index: -2;
    inset: 28px -20px -28px 20px;
    background: var(--rsp-card-lime);
    opacity: .72;
    transform: rotate(1.2deg);
}
.rsp-final-cta .rsp-button-light {
    border-color: var(--rsp-card-lime);
    background: var(--rsp-card-lime);
    color: var(--rsp-card-charcoal) !important;
}

/* Responsive restraint */
@media (max-width: 1050px) {
    .rsp-hero-grid { grid-template-columns: 1fr; }
    .rsp-hero-deck { width: min(760px, 100%); margin: 0 auto; }
    .rsp-page-hero-grid { grid-template-columns: 1fr 300px; gap: 28px; }
    .rsp-page-deck { transform: scale(.82); transform-origin: center right; }
    .rsp-journey-tabs button { min-height: 150px; }
}

@media (max-width: 900px) {
    .rsp-nav {
        border-color: rgba(255,255,255,.16);
        background: rgba(6,30,31,.98);
    }
    .rsp-nav-actions .rsp-link-button { color: #fff; }
    .rsp-page-hero-grid { grid-template-columns: 1fr; }
    .rsp-page-deck { display: none; }
    .rsp-hero-proof { grid-template-columns: 1fr; }
}

@media (max-width: 680px) {
    .rsp-hero { padding-top: 66px; }
    .rsp-hero h1 { font-size: clamp(2.65rem, 13.5vw, 4.2rem); }
    .rsp-hero-deck { min-height: 620px; }
    .rsp-deck-back { width: 76%; height: 43%; right: 9%; top: 19%; }
    .rsp-story-card { min-height: 255px; padding: 22px; }
    .rsp-story-card-record { width: 76%; left: 0; top: 4%; }
    .rsp-story-card-transport { width: 68%; right: 4%; top: 31%; }
    .rsp-story-card-receipt { width: 65%; right: 0; top: 55%; }
    .rsp-card-paw { width: 88px; height: 78px; transform: scale(.75); transform-origin: right bottom; }
    .rsp-deck-connection,
    .rsp-deck-note { display: none; }
    .rsp-card-grid-3 > .rsp-feature-card,
    .rsp-outcome-grid > .rsp-outcome-card,
    .rsp-resource-grid > .rsp-resource-card,
    .rsp-journey-tabs button { transform: none; }
    .rsp-card-role::before,
    .rsp-card-role::after,
    .rsp-difference-grid article::before,
    .rsp-difference-grid article::after,
    .rsp-audience-card::before,
    .rsp-audience-card::after,
    .rsp-form-card::before,
    .rsp-form-card::after { inset: 7px -4px -7px 4px; transform: none; }
    .rsp-journey-tabs button { flex-basis: 154px; min-height: 142px; }
    .rsp-journey-tabs button.is-active { transform: translateY(-5px); }
    .rsp-final-cta .rsp-shell { padding: 34px 26px; }
}

@media (prefers-reduced-motion: reduce) {
    .rsp-story-card,
    .rsp-feature-card,
    .rsp-outcome-card,
    .rsp-resource-card,
    .rsp-difference-grid article,
    .rsp-journey-tabs button { transition: none; }
    .rsp-story-card-record,
    .rsp-story-card-transport,
    .rsp-story-card-receipt { --rsp-deck-x: 0px !important; --rsp-deck-y: 0px !important; --rsp-deck-x-alt: 0px !important; --rsp-deck-y-alt: 0px !important; --rsp-deck-x-far: 0px !important; --rsp-deck-y-far: 0px !important; }
}

/* --------------------------------------------------------------------------
 * 0.2.1 — Semantic card polarity
 *
 * Fragmented/problem states deliberately feel unstable: the active green
 * surface sits off-axis above a visually straighter white record layer.
 * RescueSpan/solution states reverse that hierarchy: a calm, aligned white
 * card carries the readable content while connected green context remains
 * visible beneath it.
 * -------------------------------------------------------------------------- */

/* Default ordered surfaces: readable card stays square; context remains below. */
.rsp-card-state-order .rsp-card-role,
.rsp-card-state-order .rsp-difference-grid article,
.rsp-card-state-order .rsp-audience-card,
.rsp-card-state-order .rsp-trust-list article,
.rsp-card-state-order .rsp-principles-grid article,
.rsp-card-state-order .rsp-form-card {
    transform: none;
}
.rsp-card-state-order .rsp-card-role::before,
.rsp-card-state-order .rsp-difference-grid article::before,
.rsp-card-state-order .rsp-audience-card::before,
.rsp-card-state-order .rsp-form-card::before {
    inset: 9px -9px -9px 9px;
    background: var(--rsp-card-green-2);
    opacity: .34;
    transform: rotate(1.6deg);
}
.rsp-card-state-order .rsp-card-role::after,
.rsp-card-state-order .rsp-difference-grid article::after,
.rsp-card-state-order .rsp-audience-card::after,
.rsp-card-state-order .rsp-form-card::after {
    inset: 17px -16px -17px 16px;
    background: var(--rsp-card-lime);
    opacity: .2;
    transform: rotate(2.7deg);
}
.rsp-card-state-order .rsp-feature-card:hover,
.rsp-card-state-order .rsp-outcome-card:hover,
.rsp-card-state-order .rsp-resource-card:hover,
.rsp-card-state-order .rsp-difference-grid article:hover {
    transform: translateY(-8px);
}

/* Chaos cards: green foreground drifts while the white record layer stays calm. */
.rsp-card-state-chaos .rsp-feature-card {
    --rsp-chaos-tilt: -1.65deg;
    --rsp-chaos-counter: 1.65deg;
    --rsp-chaos-hover-tilt: -1deg;
    z-index: 1;
    overflow: visible;
    border-color: rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 100% 0, rgba(202,246,94,.2), transparent 32%),
        linear-gradient(150deg, #148653, #086640 78%);
    color: #fff;
    box-shadow: 0 23px 55px rgba(5,35,31,.18);
    transform: rotate(var(--rsp-chaos-tilt)) translateY(1px);
}
.rsp-card-state-chaos .rsp-feature-card:nth-child(2) {
    --rsp-chaos-tilt: 1.35deg;
    --rsp-chaos-counter: -1.35deg;
    --rsp-chaos-hover-tilt: .8deg;
    transform: rotate(var(--rsp-chaos-tilt)) translateY(9px);
}
.rsp-card-state-chaos .rsp-feature-card:nth-child(3) {
    --rsp-chaos-tilt: -2.05deg;
    --rsp-chaos-counter: 2.05deg;
    --rsp-chaos-hover-tilt: -1.2deg;
    transform: rotate(var(--rsp-chaos-tilt)) translateY(3px);
}
.rsp-card-state-chaos .rsp-feature-card h3 { color: #fff; }
.rsp-card-state-chaos .rsp-feature-card p { color: #dcebe4; }
.rsp-card-state-chaos .rsp-feature-card > span {
    background: #fff;
    color: var(--rsp-card-green);
    box-shadow: 0 10px 24px rgba(3,32,26,.18);
}
.rsp-card-state-chaos .rsp-feature-card::before {
    z-index: -1;
    inset: 12px -9px -12px 9px;
    border: 1px solid var(--rsp-card-border);
    background: #fff;
    opacity: 1;
    box-shadow: 0 18px 38px rgba(5,35,31,.08);
    transform: rotate(var(--rsp-chaos-counter));
}
.rsp-card-state-chaos .rsp-feature-card::after {
    z-index: -2;
    inset: 23px -17px -23px 17px;
    background: #0a3d34;
    opacity: .3;
    transform: rotate(.8deg);
}
.rsp-card-state-chaos .rsp-feature-card:hover {
    z-index: 5;
    border-color: rgba(202,246,94,.65);
    box-shadow: 0 31px 70px rgba(5,35,31,.25);
    transform: rotate(var(--rsp-chaos-hover-tilt)) translateY(-7px);
}

/* Hero solution deck: the placement record is the stable anchor. */
.rsp-story-card-record {
    z-index: 7;
    left: 3%;
    top: 13%;
    border-color: rgba(7,31,34,.12);
    background:
        radial-gradient(circle at 100% 0, rgba(202,246,94,.14), transparent 30%),
        linear-gradient(150deg, #fff, #f6fbf8 82%);
    color: var(--rsp-card-charcoal);
    transform: translate3d(var(--rsp-deck-x, 0), var(--rsp-deck-y, 0), 90px);
}
.rsp-story-card-record small { color: var(--rsp-card-green); }
.rsp-story-card-record p,
.rsp-story-card-record footer { color: #5f746c; }
.rsp-story-card-record footer { border-top-color: rgba(7,31,34,.12); }
.rsp-story-card-record footer span { background: var(--rsp-card-green-2); }
.rsp-story-card-transport {
    z-index: 5;
    right: 17%;
    top: 16%;
    background: linear-gradient(150deg, #123d3c, #082a2b 80%);
    color: #fff;
    transform: rotate(-5deg) translate3d(var(--rsp-deck-x-alt, 0px), var(--rsp-deck-y-alt, 0px), 45px);
}
.rsp-story-card-transport small { color: var(--rsp-card-lime); }
.rsp-story-card-transport p,
.rsp-story-card-transport footer { color: #c9dbd4; }
.rsp-story-card-transport footer { border-top-color: rgba(255,255,255,.13); }
.rsp-story-card-receipt {
    z-index: 4;
    right: 0;
    top: 27%;
    transform: rotate(6.5deg) translate3d(var(--rsp-deck-x-far, 0px), var(--rsp-deck-y-far, 0px), 30px);
}

/* Solution workflow: steps stay aligned; only the connected under-cards angle. */
.rsp-journey-tabs button,
.rsp-journey-tabs button:nth-child(even),
.rsp-journey-tabs button:nth-child(3n) {
    transform: none;
}
.rsp-journey-tabs button::before {
    opacity: .32;
    transform: rotate(1.8deg);
}
.rsp-journey-tabs button:nth-child(even)::before { transform: rotate(-1.45deg); }
.rsp-journey-tabs button:nth-child(3n)::before { transform: rotate(2.35deg); }
.rsp-journey-tabs button:hover,
.rsp-journey-tabs button:focus-visible {
    transform: translateY(-9px);
}
.rsp-journey-tabs button.is-active {
    transform: translateY(-12px) scale(1.025);
}
.rsp-journey-tabs button.is-active::before {
    opacity: .7;
    transform: rotate(2.4deg);
}
.rsp-journey-detail::before { transform: rotate(1.1deg); }
.rsp-journey-detail::after { transform: rotate(2.2deg); }

/* Shelter comparison makes the philosophy explicit in one glance. */
.rsp-before-after > .rsp-comparison-card {
    position: relative;
    isolation: isolate;
    border-radius: 24px;
}
.rsp-comparison-card-chaos {
    z-index: 1;
    border: 1px solid rgba(255,255,255,.13);
    background: linear-gradient(150deg, #147d50, #085b3b 80%);
    transform: rotate(-1.35deg);
}
.rsp-comparison-card-chaos::before {
    position: absolute;
    z-index: -1;
    inset: 13px -10px -13px 10px;
    border: 1px solid var(--rsp-card-border);
    border-radius: inherit;
    background: #fff;
    transform: rotate(1.35deg);
    content: '';
}
.rsp-comparison-card-order {
    z-index: 2;
    border: 1px solid var(--rsp-card-border);
    background: #fff;
    color: var(--rsp-card-charcoal);
    transform: none;
}
.rsp-comparison-card-order::before,
.rsp-comparison-card-order::after {
    position: absolute;
    z-index: -1;
    inset: 10px -9px -10px 9px;
    border-radius: inherit;
    background: var(--rsp-card-green-2);
    opacity: .48;
    transform: rotate(1.7deg);
    content: '';
}
.rsp-comparison-card-order::after {
    z-index: -2;
    inset: 19px -16px -19px 16px;
    background: var(--rsp-card-lime);
    opacity: .23;
    transform: rotate(2.7deg);
}
.rsp-section-dark .rsp-comparison-card-order h2,
.rsp-section-dark .rsp-comparison-card-order li,
.rsp-section-dark .rsp-comparison-card-order .rsp-eyebrow { color: var(--rsp-card-charcoal); }
.rsp-section-dark .rsp-comparison-card-order .rsp-eyebrow { color: var(--rsp-card-green); }

/* Internal page hero deck uses the same stable-over-context convention. */
.rsp-page-deck article:nth-of-type(1) {
    z-index: 5;
    transform: none;
}
.rsp-page-deck article:nth-of-type(2) {
    z-index: 3;
    transform: rotate(6deg) translate(10px, 9px);
}

@media (max-width: 680px) {
    .rsp-card-state-chaos .rsp-feature-card,
    .rsp-card-state-chaos .rsp-feature-card:nth-child(2),
    .rsp-card-state-chaos .rsp-feature-card:nth-child(3) {
        transform: none;
    }
    .rsp-card-state-chaos .rsp-feature-card::before,
    .rsp-card-state-chaos .rsp-feature-card::after,
    .rsp-comparison-card-chaos,
    .rsp-comparison-card-chaos::before,
    .rsp-comparison-card-order::before,
    .rsp-comparison-card-order::after {
        transform: none;
    }
    .rsp-story-card-record { left: 0; top: 6%; }
    .rsp-story-card-transport { right: 5%; top: 33%; transform: rotate(-2.5deg); }
    .rsp-story-card-receipt { right: 0; top: 57%; transform: rotate(3deg); }
}

/* --------------------------------------------------------------------------
 * 0.2.2 — Calm solution surfaces
 *
 * Only the homepage coordination-gap cards use the intentionally unstable
 * chaos treatment. All solution-oriented cards remain level and dependable.
 * Supporting green layers may be offset, but they stay parallel to the white
 * record card. The workflow step selector uses white cards without overlays.
 * -------------------------------------------------------------------------- */

/* Ordered stacks: parallel layers communicate connection without instability. */
.rsp-card-state-order .rsp-card-role::before,
.rsp-card-state-order .rsp-difference-grid article::before,
.rsp-card-state-order .rsp-audience-card::before,
.rsp-card-state-order .rsp-form-card::before {
    inset: 10px -10px -10px 10px;
    opacity: .30;
    transform: none;
}
.rsp-card-state-order .rsp-card-role::after,
.rsp-card-state-order .rsp-difference-grid article::after,
.rsp-card-state-order .rsp-audience-card::after,
.rsp-card-state-order .rsp-form-card::after {
    inset: 19px -18px -19px 18px;
    opacity: .14;
    transform: none;
}

/* How It Works: one calm family of white cards. */
.rsp-journey-tabs button,
.rsp-journey-tabs button:nth-child(even),
.rsp-journey-tabs button:nth-child(3n) {
    border: 1px solid rgba(10,47,40,.14);
    background: linear-gradient(180deg, #fff, #fcfdfc);
    color: var(--rsp-card-charcoal);
    box-shadow: 0 12px 26px rgba(5,35,31,.075);
    transform: none;
}
.rsp-journey-tabs button::before {
    display: none;
    content: none;
}
.rsp-journey-tabs button strong { color: var(--rsp-card-charcoal); }
.rsp-journey-tabs button span {
    background: #dff2e8;
    color: var(--rsp-card-green);
}
.rsp-journey-tabs button:hover,
.rsp-journey-tabs button:focus-visible {
    z-index: 3;
    border-color: rgba(13,116,72,.34);
    background: #fff;
    box-shadow: 0 20px 38px rgba(5,35,31,.13);
    transform: translateY(-8px);
}
.rsp-journey-tabs button.is-active {
    z-index: 4;
    border: 2px solid var(--rsp-card-charcoal);
    background: #fff;
    color: var(--rsp-card-charcoal);
    box-shadow: 0 24px 48px rgba(5,35,31,.16), 0 0 0 7px rgba(202,246,94,.12);
    transform: translateY(-10px) scale(1.018);
}
.rsp-journey-tabs button.is-active strong { color: var(--rsp-card-charcoal); }
.rsp-journey-tabs button.is-active span {
    background: var(--rsp-card-lime);
    color: var(--rsp-card-charcoal);
}

/* Selected-step explanation: white anchor with straight connected context. */
.rsp-journey-detail {
    border-color: rgba(10,47,40,.15);
    background:
        radial-gradient(circle at 100% 18%, rgba(202,246,94,.11), transparent 30%),
        linear-gradient(180deg, #fff, #fcfdfc);
    color: var(--rsp-card-charcoal);
    box-shadow: 0 22px 54px rgba(5,35,31,.12);
}
.rsp-journey-detail h2,
.rsp-journey-detail h3,
.rsp-journey-detail strong { color: var(--rsp-card-charcoal); }
.rsp-journey-detail p { color: #61756e; }
.rsp-journey-detail .rsp-eyebrow { color: var(--rsp-card-green); }
.rsp-journey-detail::before {
    inset: 11px -10px -11px 10px;
    background: var(--rsp-card-green-2);
    opacity: .24;
    transform: none;
}
.rsp-journey-detail::after {
    inset: 21px -18px -21px 18px;
    background: var(--rsp-card-lime);
    opacity: .10;
    transform: none;
}

/* Other explicit solution stacks also remain level. */
.rsp-comparison-card-order::before,
.rsp-comparison-card-order::after,
.rsp-page-deck article:nth-of-type(1),
.rsp-page-deck article:nth-of-type(2) {
    transform: none;
}
.rsp-comparison-card-order::before { inset: 10px -10px -10px 10px; }
.rsp-comparison-card-order::after { inset: 19px -18px -19px 18px; }
.rsp-page-deck article:nth-of-type(2) { transform: translate(12px, 10px); }

/* The coordination gap remains the sole intentionally tilted public pattern. */
.rsp-card-state-chaos .rsp-feature-card,
.rsp-card-state-chaos .rsp-feature-card:nth-child(2),
.rsp-card-state-chaos .rsp-feature-card:nth-child(3) {
    /* Deliberately preserve the 0.2.1 chaos transforms. */
}

@media (max-width: 680px) {
    .rsp-journey-tabs button,
    .rsp-journey-tabs button:hover,
    .rsp-journey-tabs button:focus-visible,
    .rsp-journey-tabs button.is-active {
        transform: none;
    }
    .rsp-journey-detail::before,
    .rsp-journey-detail::after,
    .rsp-card-state-order .rsp-card-role::before,
    .rsp-card-state-order .rsp-card-role::after,
    .rsp-card-state-order .rsp-difference-grid article::before,
    .rsp-card-state-order .rsp-difference-grid article::after,
    .rsp-card-state-order .rsp-audience-card::before,
    .rsp-card-state-order .rsp-audience-card::after,
    .rsp-card-state-order .rsp-form-card::before,
    .rsp-card-state-order .rsp-form-card::after {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
 * 0.2.3 — Contrast, stability, and palette cleanup
 *
 * Readable card surfaces must remain opaque. Connected context is shown with
 * parallel offset shadows rather than translucent pseudo-elements that can
 * wash out the foreground content. Only the homepage Coordination Gap keeps
 * intentional rotation.
 * -------------------------------------------------------------------------- */

/* Stable under-cards: visible context without covering the readable surface. */
.rsp-card-role::before,
.rsp-card-role::after,
.rsp-difference-grid article::before,
.rsp-difference-grid article::after,
.rsp-audience-card::before,
.rsp-audience-card::after,
.rsp-form-card::before,
.rsp-form-card::after,
.rsp-journey-detail::before,
.rsp-journey-detail::after,
.rsp-comparison-card-order::before,
.rsp-comparison-card-order::after,
.rsp-comparison-card-chaos::before {
    display: none;
    content: none;
}

.rsp-card-role,
.rsp-difference-grid article,
.rsp-audience-card,
.rsp-form-card {
    box-shadow:
        10px 10px 0 rgba(22, 133, 89, .20),
        18px 18px 0 rgba(202, 246, 94, .10),
        var(--rsp-card-soft-shadow);
}

/* The Coordination Gap alone keeps a deliberately unstable composition. */
.rsp-card-state-chaos .rsp-feature-card,
.rsp-card-state-chaos .rsp-feature-card:nth-child(2),
.rsp-card-state-chaos .rsp-feature-card:nth-child(3) {
    border-color: rgba(10, 47, 40, .14);
    background: #fff;
    color: var(--rsp-card-charcoal);
    box-shadow:
        11px 11px 0 rgba(20, 134, 83, .92),
        20px 20px 0 rgba(7, 31, 34, .18),
        0 23px 55px rgba(5, 35, 31, .14);
}
.rsp-card-state-chaos .rsp-feature-card h3 {
    color: var(--rsp-card-charcoal);
}
.rsp-card-state-chaos .rsp-feature-card p {
    color: #526b63;
}
.rsp-card-state-chaos .rsp-feature-card > span {
    background: #fff;
    color: var(--rsp-card-green);
}
.rsp-card-state-chaos .rsp-feature-card:hover {
    box-shadow:
        13px 13px 0 rgba(20, 134, 83, .96),
        22px 22px 0 rgba(7, 31, 34, .20),
        0 31px 70px rgba(5, 35, 31, .22);
}

/* For Shelters comparison: both surfaces are level and fully readable. */
.rsp-comparison-card-chaos,
.rsp-comparison-card-order {
    transform: none;
}
.rsp-comparison-card-chaos {
    border-color: rgba(10, 47, 40, .16);
    background: #fff;
    color: var(--rsp-card-charcoal);
    box-shadow: 10px 10px 0 rgba(7, 31, 34, .28);
}
.rsp-section-dark .rsp-comparison-card-chaos h2,
.rsp-section-dark .rsp-comparison-card-chaos li {
    color: var(--rsp-card-charcoal);
}
.rsp-section-dark .rsp-comparison-card-chaos .rsp-eyebrow {
    color: var(--rsp-card-green);
}
.rsp-comparison-card-order {
    border-color: rgba(202, 246, 94, .28);
    background: linear-gradient(150deg, #23764e, #155d3e 82%);
    color: #fff;
    box-shadow:
        10px 10px 0 rgba(22, 133, 89, .45),
        18px 18px 0 rgba(202, 246, 94, .16);
}
.rsp-section-dark .rsp-comparison-card-order h2,
.rsp-section-dark .rsp-comparison-card-order li {
    color: #fff;
}
.rsp-section-dark .rsp-comparison-card-order .rsp-eyebrow {
    color: var(--rsp-card-lime);
}

/* How It Works: opaque white detail card with dark, readable copy. */
.rsp-journey-detail {
    background:
        radial-gradient(circle at 100% 18%, rgba(202, 246, 94, .10), transparent 30%),
        #fff;
    color: var(--rsp-card-charcoal);
    box-shadow:
        10px 10px 0 rgba(22, 133, 89, .22),
        18px 18px 0 rgba(202, 246, 94, .10),
        0 22px 54px rgba(5, 35, 31, .12);
}
.rsp-journey-detail h2,
.rsp-journey-detail h3,
.rsp-journey-detail strong {
    color: var(--rsp-card-charcoal);
}
.rsp-journey-detail p,
.rsp-journey-detail p:last-child {
    color: #526b63;
}
.rsp-journey-detail .rsp-eyebrow {
    color: var(--rsp-card-green);
}

/* Audience cards: correct semantic contrast on both surfaces. */
.rsp-audience-card.is-shelter .rsp-eyebrow {
    color: var(--rsp-card-lime);
}
.rsp-audience-card.is-shelter h2,
.rsp-audience-card.is-shelter li,
.rsp-audience-card.is-shelter a {
    color: #fff;
}
.rsp-audience-card.is-rescue .rsp-eyebrow,
.rsp-audience-card.is-rescue h2,
.rsp-audience-card.is-rescue li,
.rsp-audience-card.is-rescue a {
    color: var(--rsp-card-charcoal);
}

/* Trust cards: a distinctive neutral that still belongs to RescueSpan. */
.rsp-trust-list article {
    border-color: rgba(13, 116, 72, .15);
    background: linear-gradient(145deg, #f8fcf9, #edf7f1);
    box-shadow: 0 13px 30px rgba(5, 35, 31, .08);
}
.rsp-trust-list article > span {
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: 11px;
    background: #dff2e8;
    color: var(--rsp-card-green);
}
.rsp-trust-list strong {
    color: var(--rsp-card-charcoal);
}
.rsp-trust-list p {
    color: #5b7169;
}

/* Pricing: separate the legal/launch note from the stacked card shadows. */
.rsp-pricing-note {
    max-width: 880px;
    margin: 68px auto 0;
    padding-top: 18px;
    border-top: 1px solid rgba(13, 116, 72, .14);
    color: #60746d;
    line-height: 1.6;
}

/* Pricing Principles are positive: level white cards with stable context. */
.rescuespan-public-page-pricing .rsp-section-soft .rsp-feature-card,
.rescuespan-public-page-pricing .rsp-section-soft .rsp-feature-card:nth-child(2),
.rescuespan-public-page-pricing .rsp-section-soft .rsp-feature-card:nth-child(3) {
    border-color: rgba(13, 116, 72, .15);
    background: #fff;
    color: var(--rsp-card-charcoal);
    transform: none;
    box-shadow:
        10px 10px 0 rgba(22, 133, 89, .18),
        18px 18px 0 rgba(202, 246, 94, .09),
        0 14px 34px rgba(5, 35, 31, .09);
}
.rescuespan-public-page-pricing .rsp-section-soft .rsp-feature-card h3 {
    color: var(--rsp-card-charcoal);
}
.rescuespan-public-page-pricing .rsp-section-soft .rsp-feature-card p {
    color: #526b63;
}
.rescuespan-public-page-pricing .rsp-section-soft .rsp-feature-card:hover {
    transform: translateY(-8px);
}

@media (max-width: 680px) {
    .rsp-card-state-chaos .rsp-feature-card,
    .rsp-card-state-chaos .rsp-feature-card:nth-child(2),
    .rsp-card-state-chaos .rsp-feature-card:nth-child(3),
    .rsp-comparison-card-chaos,
    .rsp-comparison-card-order,
    .rescuespan-public-page-pricing .rsp-section-soft .rsp-feature-card,
    .rescuespan-public-page-pricing .rsp-section-soft .rsp-feature-card:hover {
        transform: none;
    }
    .rsp-pricing-note {
        margin-top: 48px;
    }
}

/*
 * 0.2.4 — For Shelters comparison contrast correction
 * The Before card is the neutral readable surface; the solution remains green.
 */
.rsp-section-dark .rsp-before-after > .rsp-comparison-card-chaos {
    border-color: rgba(10, 47, 40, .16);
    background: #ffffff;
    color: var(--rsp-card-charcoal);
    box-shadow:
        10px 10px 0 rgba(7, 31, 34, .28),
        0 18px 42px rgba(2, 24, 24, .16);
}
.rsp-section-dark .rsp-before-after > .rsp-comparison-card-chaos .rsp-eyebrow {
    color: var(--rsp-card-green);
}
.rsp-section-dark .rsp-before-after > .rsp-comparison-card-chaos h2,
.rsp-section-dark .rsp-before-after > .rsp-comparison-card-chaos li,
.rsp-section-dark .rsp-before-after > .rsp-comparison-card-chaos ul {
    color: var(--rsp-card-charcoal);
}