/* =========================================================
   POMOSDA — SECTION 11 VISUAL + MOTION R2
   Registration Journey + wave transition.
   Scoped after JS adds .s11r2.
   ========================================================= */

.s11r2 {
    --s11-green: #075f51;
    --s11-green-dark: #054d42;
    --s11-green-soft: #e7f0ea;
    --s11-gold: #f3c623;
    --s11-cream: #fbf8f0;
    --s11-ink: #173f36;
    --s11-muted: #68736f;
    --s11-ease: cubic-bezier(.22, 1, .36, 1);

    position: relative !important;
    isolation: isolate;
    overflow: hidden !important;
    padding:
        clamp(110px, 10vw, 150px)
        24px
        clamp(120px, 10vw, 150px) !important;
    background:
        radial-gradient(circle at 7% 42%, rgba(243,198,35,.10), transparent 18%),
        radial-gradient(circle at 92% 28%, rgba(7,95,81,.08), transparent 18%),
        linear-gradient(180deg, #fbf8f0 0%, #faf8f2 100%) !important;
    scroll-margin-top: 100px;
}

/* Kill old arrows/separators once upgraded */
.s11r2 .s11r2-old-arrow,
.s11r2 .s11r2-old-separator {
    display: none !important;
}

/* ---------------------------------------------------------
   TOP WAVE — visual transition from Section 10
   --------------------------------------------------------- */
.s11r2-wave {
    position: absolute;
    z-index: 2;
    top: -2px;
    left: 0;
    width: 100%;
    height: clamp(76px, 8vw, 118px);
    pointer-events: none;
    line-height: 0;
}

.s11r2-wave svg {
    width: 100%;
    height: 100%;
    display: block;
}

.s11r2-wave__fill {
    fill: #f7f3ea;
}

.s11r2-wave__line {
    fill: none;
    stroke: rgba(243,198,35,.72);
    stroke-width: 1.4;
    vector-effect: non-scaling-stroke;
}

/* center down indicator */
.s11r2-wave__cue {
    position: absolute;
    z-index: 5;
    top: clamp(41px, 4.5vw, 65px);
    left: 50%;
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    transform: translateX(-50%);
    border: 5px solid #fbf8f0;
    border-radius: 50%;
    background: var(--s11-gold);
    color: #fff;
    box-shadow: 0 12px 28px rgba(142,105,0,.20);
    pointer-events: none;
}

.s11r2-wave__cue svg {
    width: 18px;
    height: 18px;
}

/* ---------------------------------------------------------
   SECTION DECORATION
   --------------------------------------------------------- */
.s11r2-decor {
    position: absolute;
    z-index: 0;
    pointer-events: none;
}

.s11r2-decor--left {
    left: -30px;
    top: 42%;
    width: 250px;
    height: 250px;
    border-radius: 50%;
    background: rgba(243,198,35,.075);
}

.s11r2-decor--right {
    right: -48px;
    top: 28%;
    width: 190px;
    height: 190px;
    border-radius: 50%;
    background:
        repeating-linear-gradient(
            -45deg,
            rgba(7,95,81,.10) 0 2px,
            transparent 2px 10px
        );
    opacity: .65;
}

.s11r2-decor--dots {
    left: 3.5%;
    bottom: 124px;
    width: 64px;
    height: 54px;
    background:
        radial-gradient(circle, rgba(7,95,81,.22) 0 2px, transparent 2.6px)
        0 0 / 12px 12px;
}

/* ---------------------------------------------------------
   HEADER
   --------------------------------------------------------- */
.s11r2 .s11r2-header {
    position: relative;
    z-index: 3;
    width: min(920px, 100%);
    margin: 0 auto 54px;
    text-align: center;
}

.s11r2 .s11r2-eyebrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 14px;
    color: #78817e;
    font-family: "Poppins", sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.s11r2 .s11r2-eyebrow::before,
.s11r2 .s11r2-eyebrow::after {
    content: "";
    width: 54px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(7,95,81,.45));
}

.s11r2 .s11r2-eyebrow::after {
    transform: scaleX(-1);
}

.s11r2 .s11r2-eyebrow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #8b9773;
}

.s11r2 .s11r2-title {
    margin: 0 !important;
    color: var(--s11-green) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: clamp(36px, 4.6vw, 62px) !important;
    font-weight: 800 !important;
    line-height: 1.06 !important;
    letter-spacing: -.035em !important;
    text-wrap: balance;
}

.s11r2 .s11r2-lead {
    width: min(690px, 100%);
    margin: 16px auto 0 !important;
    color: var(--s11-muted);
    font-family: "Open Sans", sans-serif;
    font-size: clamp(15px, 1.45vw, 18px);
    line-height: 1.7;
}

/* ---------------------------------------------------------
   STEPS / JOURNEY
   --------------------------------------------------------- */
.s11r2 .s11r2-steps {
    position: relative;
    z-index: 3;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: clamp(28px, 4vw, 64px) !important;
    width: min(1160px, 100%);
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: stretch !important;
}

/* Curved connector behind cards */
.s11r2-connector {
    position: absolute;
    z-index: -1;
    top: 38%;
    left: 25%;
    width: 50%;
    height: 120px;
    overflow: visible;
    pointer-events: none;
}

.s11r2-connector path {
    fill: none;
    stroke: var(--s11-green);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-dasharray: 7 8;
    vector-effect: non-scaling-stroke;
}

.s11r2-connector circle {
    fill: var(--s11-green);
    stroke: #fbf8f0;
    stroke-width: 4;
    vector-effect: non-scaling-stroke;
}

/* Cards */
.s11r2 .s11r2-card {
    position: relative !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    min-width: 0 !important;
    min-height: 300px !important;
    margin: 0 !important;
    padding: 38px 28px 28px !important;
    border: 1px solid rgba(194,154,44,.32) !important;
    border-radius: 28px !important;
    background:
        radial-gradient(circle at 9% 10%, rgba(7,95,81,.04), transparent 20%),
        rgba(255,255,255,.90) !important;
    box-shadow:
        0 22px 48px rgba(28,52,45,.09),
        inset 0 1px 0 rgba(255,255,255,.85) !important;
    text-align: left !important;
    overflow: visible !important;
}

/* Middle card lower, creating the journey rhythm */
.s11r2 .s11r2-card:nth-of-type(2) {
    translate: 0 32px;
}

/* card step number */
.s11r2 .s11r2-number {
    position: absolute;
    top: -16px;
    left: 22px;
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border: 3px solid rgba(255,255,255,.85);
    border-radius: 50%;
    background:
        linear-gradient(145deg, #0b7462, var(--s11-green-dark));
    color: #fff;
    box-shadow: 0 10px 24px rgba(7,95,81,.20);
    font-family: "Montserrat", sans-serif;
    font-size: 18px;
    font-weight: 800;
}

/* icon */
.s11r2 .s11r2-icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 82px;
    height: 82px;
    margin: 18px 0 20px;
    border-radius: 50%;
    background:
        radial-gradient(circle at 35% 28%, rgba(255,255,255,.75), transparent 34%),
        var(--s11-green-soft);
    color: var(--s11-green);
    box-shadow:
        inset 0 0 0 1px rgba(7,95,81,.05),
        0 10px 24px rgba(7,95,81,.06);
}

.s11r2 .s11r2-icon svg {
    width: 42px;
    height: 42px;
}

/* Existing content */
.s11r2 .s11r2-card h2,
.s11r2 .s11r2-card h3,
.s11r2 .s11r2-card h4 {
    margin: 0 !important;
    color: var(--s11-ink) !important;
    font-family: "Montserrat", sans-serif !important;
    font-size: clamp(20px, 1.75vw, 25px) !important;
    font-weight: 800 !important;
    line-height: 1.22 !important;
    text-align: left !important;
}

.s11r2 .s11r2-card p {
    margin: 13px 0 0 !important;
    color: #68736f !important;
    font-family: "Open Sans", sans-serif !important;
    font-size: 14px !important;
    line-height: 1.7 !important;
    text-align: left !important;
}

.s11r2 .s11r2-card a,
.s11r2 .s11r2-card button:not(.s11r2-number) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    min-height: 44px !important;
    margin-top: auto !important;
    padding: 10px 20px !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: var(--s11-gold) !important;
    color: #121713 !important;
    box-shadow: 0 10px 22px rgba(197,153,11,.15) !important;
    font-family: "Poppins", sans-serif !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
}

/* arrow marker inside CTA */
.s11r2 .s11r2-card a::before,
.s11r2 .s11r2-card button:not(.s11r2-number)::before {
    content: "→";
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255,255,255,.78);
    color: #a77d00;
    font-weight: 800;
}

/* ---------------------------------------------------------
   BOTTOM BENEFIT STRIP
   --------------------------------------------------------- */
.s11r2-benefits {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: min(1120px, 100%);
    margin: 78px auto 0;
    padding: 18px 20px;
    border: 1px solid rgba(7,95,81,.08);
    border-radius: 28px;
    background: rgba(255,255,255,.78);
    box-shadow: 0 20px 45px rgba(28,52,45,.07);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.s11r2-benefit {
    display: grid;
    grid-template-columns: 54px 1fr;
    align-items: center;
    gap: 14px;
    min-width: 0;
    padding: 8px 20px;
}

.s11r2-benefit + .s11r2-benefit {
    border-left: 1px solid rgba(7,95,81,.09);
}

.s11r2-benefit__icon {
    display: grid;
    place-items: center;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: var(--s11-green-soft);
    color: var(--s11-green);
}

.s11r2-benefit__icon svg {
    width: 27px;
    height: 27px;
}

.s11r2-benefit strong {
    display: block;
    color: var(--s11-ink);
    font-family: "Montserrat", sans-serif;
    font-size: 13px;
    line-height: 1.25;
}

.s11r2-benefit span {
    display: block;
    margin-top: 5px;
    color: #737d79;
    font-family: "Open Sans", sans-serif;
    font-size: 11.5px;
    line-height: 1.45;
}

/* ---------------------------------------------------------
   BOTTOM WAVE → Section 12 green
   --------------------------------------------------------- */
.s11r2-bottom-wave {
    position: absolute;
    z-index: 1;
    right: 0;
    bottom: -1px;
    left: 0;
    height: 74px;
    pointer-events: none;
    line-height: 0;
}

.s11r2-bottom-wave svg {
    display: block;
    width: 100%;
    height: 100%;
}

.s11r2-bottom-wave path {
    fill: #075f51;
}

/* ---------------------------------------------------------
   MOTION
   Only active once .s11r2-ready is applied by JS.
   --------------------------------------------------------- */
.s11r2.s11r2-ready:not(.is-s11r2-visible) .s11r2-eyebrow,
.s11r2.s11r2-ready:not(.is-s11r2-visible) .s11r2-title,
.s11r2.s11r2-ready:not(.is-s11r2-visible) .s11r2-lead {
    opacity: 0;
    translate: 0 20px;
}

.s11r2.s11r2-ready .s11r2-eyebrow,
.s11r2.s11r2-ready .s11r2-title,
.s11r2.s11r2-ready .s11r2-lead {
    transition:
        opacity 720ms var(--s11-ease),
        translate 720ms var(--s11-ease);
}

.s11r2.s11r2-ready .s11r2-title { transition-delay: 90ms; }
.s11r2.s11r2-ready .s11r2-lead { transition-delay: 170ms; }

.s11r2.is-s11r2-visible .s11r2-eyebrow,
.s11r2.is-s11r2-visible .s11r2-title,
.s11r2.is-s11r2-visible .s11r2-lead {
    opacity: 1;
    translate: 0 0;
}

.s11r2.s11r2-ready:not(.is-s11r2-visible) .s11r2-card {
    opacity: 0;
    translate: 0 26px;
    scale: .975;
}

.s11r2.s11r2-ready .s11r2-card {
    transition:
        opacity 720ms var(--s11-ease),
        translate 720ms var(--s11-ease),
        scale 720ms var(--s11-ease),
        box-shadow 220ms ease;
}

.s11r2.is-s11r2-visible .s11r2-card {
    opacity: 1;
    scale: 1;
}

/* Preserve middle-card static 32px offset after entrance */
.s11r2.is-s11r2-visible .s11r2-card:nth-of-type(1) {
    translate: 0 0;
    transition-delay: 260ms;
}

.s11r2.is-s11r2-visible .s11r2-card:nth-of-type(2) {
    translate: 0 32px;
    transition-delay: 370ms;
}

.s11r2.is-s11r2-visible .s11r2-card:nth-of-type(3) {
    translate: 0 0;
    transition-delay: 480ms;
}

.s11r2.s11r2-ready .s11r2-connector path {
    stroke-dasharray: 430;
    stroke-dashoffset: 430;
}

.s11r2.is-s11r2-visible .s11r2-connector path {
    animation: s11r2ConnectorDraw 1.25s var(--s11-ease) 650ms 1 forwards;
}

.s11r2.s11r2-ready .s11r2-connector circle {
    opacity: 0;
    scale: .4;
    transform-origin: center;
}

.s11r2.is-s11r2-visible .s11r2-connector circle {
    animation: s11r2NodePop 420ms var(--s11-ease) 1 forwards;
}

.s11r2.is-s11r2-visible .s11r2-connector circle:nth-of-type(1) {
    animation-delay: 950ms;
}

.s11r2.is-s11r2-visible .s11r2-connector circle:nth-of-type(2) {
    animation-delay: 1180ms;
}

@keyframes s11r2ConnectorDraw {
    to { stroke-dashoffset: 0; }
}

@keyframes s11r2NodePop {
    to { opacity: 1; scale: 1; }
}

.s11r2.s11r2-ready:not(.is-s11r2-visible) .s11r2-benefits {
    opacity: 0;
    translate: 0 18px;
}

.s11r2.s11r2-ready .s11r2-benefits {
    transition:
        opacity 720ms var(--s11-ease) 760ms,
        translate 720ms var(--s11-ease) 760ms;
}

.s11r2.is-s11r2-visible .s11r2-benefits {
    opacity: 1;
    translate: 0 0;
}

.s11r2.is-s11r2-visible .s11r2-wave__cue {
    animation: s11r2Cue 2.4s ease-in-out 1.2s infinite;
}

@keyframes s11r2Cue {
    0%, 100% { translate: -50% 0; }
    50% { translate: -50% 6px; }
}

@media (hover:hover) and (pointer:fine) {
    .s11r2 .s11r2-card:hover {
        translate: 0 -5px;
        box-shadow:
            0 30px 60px rgba(28,52,45,.12),
            inset 0 1px 0 rgba(255,255,255,.88) !important;
    }

    .s11r2 .s11r2-card:nth-of-type(2):hover {
        translate: 0 27px;
    }

    .s11r2 .s11r2-card a:hover,
    .s11r2 .s11r2-card button:not(.s11r2-number):hover {
        transform: translateY(-2px);
    }
}

/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */
@media (max-width: 980px) {
    .s11r2 {
        padding-top: 110px !important;
        padding-inline: 18px !important;
    }

    .s11r2 .s11r2-steps {
        grid-template-columns: 1fr !important;
        gap: 24px !important;
        width: min(680px, 100%);
    }

    .s11r2 .s11r2-card,
    .s11r2 .s11r2-card:nth-of-type(2),
    .s11r2.is-s11r2-visible .s11r2-card:nth-of-type(2) {
        translate: 0 0 !important;
    }

    .s11r2-connector {
        display: none;
    }

    .s11r2-benefits {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: min(680px, 100%);
        margin-top: 42px;
    }

    .s11r2-benefit:nth-child(3) {
        border-left: 0;
        border-top: 1px solid rgba(7,95,81,.09);
    }

    .s11r2-benefit:nth-child(4) {
        border-top: 1px solid rgba(7,95,81,.09);
    }
}

@media (max-width: 620px) {
    .s11r2 {
        padding:
            96px
            14px
            112px !important;
    }

    .s11r2-wave {
        height: 68px;
    }

    .s11r2-wave__cue {
        top: 35px;
        width: 42px;
        height: 42px;
    }

    .s11r2 .s11r2-header {
        margin-bottom: 40px;
    }

    .s11r2 .s11r2-title {
        font-size: clamp(31px, 8.5vw, 43px) !important;
    }

    .s11r2 .s11r2-card {
        min-height: 0 !important;
        padding: 36px 23px 25px !important;
        border-radius: 24px !important;
    }

    .s11r2 .s11r2-icon {
        width: 70px;
        height: 70px;
    }

    .s11r2 .s11r2-icon svg {
        width: 36px;
        height: 36px;
    }

    .s11r2-benefits {
        grid-template-columns: 1fr;
        padding: 10px 16px;
        border-radius: 24px;
    }

    .s11r2-benefit,
    .s11r2-benefit + .s11r2-benefit,
    .s11r2-benefit:nth-child(3),
    .s11r2-benefit:nth-child(4) {
        border-left: 0;
        border-top: 1px solid rgba(7,95,81,.09);
    }

    .s11r2-benefit:first-child {
        border-top: 0;
    }

    .s11r2-decor--right {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .s11r2 *,
    .s11r2 *::before,
    .s11r2 *::after {
        animation: none !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }

    .s11r2 .s11r2-eyebrow,
    .s11r2 .s11r2-title,
    .s11r2 .s11r2-lead,
    .s11r2 .s11r2-card,
    .s11r2 .s11r2-benefits,
    .s11r2 .s11r2-connector circle {
        opacity: 1 !important;
        scale: 1 !important;
    }

    .s11r2 .s11r2-card:nth-of-type(2) {
        translate: 0 32px !important;
    }

    .s11r2 .s11r2-connector path {
        stroke-dashoffset: 0 !important;
    }
}