/* ========================================================= Environment Licensing Section — layout only (typography comes from base.css / common.css) ========================================================= */
.licensing-section{background-color:var(--color-white);}
.licensing-section .licensing-section-wrapper{gap:10px;padding-block:var(--section-padding);text-align:center;}
/* ---------- Environment row ---------- */
.licensing-section .licensing-section-wrapper .licensing-section-envs{gap:58px;/* Figma:8px card gap + 42px arrow + 8px card gap */
 width:100%;padding-top:20px;list-style:none;}
/* Each environment owns its palette;the shared card rules read these. */
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env-dev{--env-surface:#e7f6ec;--env-line:var(--color-green-600);--env-label:#0a6e35;--env-arrow:url("../images/icons/env-arrow-dev.svg");}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env-test{--env-surface:#e9edf1;--env-line:var(--color-navy-700);--env-label:var(--color-navy-700);--env-arrow:url("../images/icons/env-arrow-test.svg");}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env-uat{--env-surface:#fdf3e2;--env-line:#c77a05;--env-label:#c77a05;--env-arrow:url("../images/icons/env-arrow-uat.svg");}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env-prod{--env-surface:var(--color-ink-25);--env-line:var(--color-teal-700);--env-label:var(--color-teal-700);}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env{position:relative;display:flex;flex-direction:column;align-items:center;flex:0 0 auto;gap:14px;width:210px;padding:18px 18px 22px;background-color:var(--env-surface);border-radius:var(--radius-lg);box-shadow:inset 0 0 0 1.5px var(--env-line);/* Figma draws the stroke inside the card */
}
/* the row is a fixed 1014px at full size;let the cards give a little rather than push the page sideways once the container is narrower than that */
@media (max-width:1199px){.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env{flex:0 1 210px;min-width:0;}
}
/* the connector that carries the eye to the next environment */
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env::after{content:"";position:absolute;top:50%;left:100%;width:42px;height:16px;margin-left:8px;transform:translateY(-50%);background-image:var(--env-arrow,none);background-repeat:no-repeat;background-position:center;}
/* PROD ends the chain — the connector box has to go,not just its artwork,or its 42px keeps sticking out past the end of the row */
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env-prod::after{content:none;}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env .licensing-section-env-head{width:100%;height:32px;}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env .licensing-section-env-head .licensing-section-env-label{gap:9px;}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env .licensing-section-env-head .licensing-section-env-label .licensing-section-env-icon{flex-shrink:0;width:32px;height:32px;border-radius:999px;box-shadow:inset 0 0 0 1.5px var(--env-line);}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env .licensing-section-env-head .licensing-section-env-label .licensing-section-env-icon img{width:17px;height:17px;}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env .licensing-section-env-head .licensing-section-env-label h3{color:var(--env-label);}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env .licensing-section-env-head .licensing-section-env-badge{flex-shrink:0;width:26px;height:26px;border-radius:999px;background-color:var(--env-line);font-size:var(--font-size-eyebrow);font-weight:var(--font-weight-bold);line-height:var(--line-height-none);color:var(--color-white);}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env .licensing-section-env-store{width:66px;height:76px;}
/* ---------- Media Container ---------- */
.licensing-section .licensing-section-wrapper .licensing-section-media{width:100%;max-width:100%;margin-top:20px;}
.licensing-section .licensing-section-wrapper .licensing-section-figure{margin:0;width:100%;}
.licensing-section .licensing-section-wrapper .licensing-section-figure img{width:100%;height:auto;display:block;}
/* ---------- Licensed-connection pill ---------- */
.licensing-section .licensing-section-wrapper .licensing-section-note{width:100%;padding-top:18px;}
.licensing-section .licensing-section-wrapper .licensing-section-note .licensing-section-note-pill{gap:11px;padding:12px 14px;background-color:var(--color-ink-25);border-radius:999px;box-shadow:inset 0 0 0 1px var(--color-ink-200);/* Figma draws the stroke inside the pill */
}
.licensing-section .licensing-section-wrapper .licensing-section-note .licensing-section-note-pill .licensing-section-note-icon{flex-shrink:0;width:28px;height:28px;border-radius:999px;background-color:rgba(8,198,173,0.18);}
.licensing-section .licensing-section-wrapper .licensing-section-note .licensing-section-note-pill .licensing-section-note-icon img{width:15px;height:15px;}
.licensing-section .licensing-section-wrapper .licensing-section-note .licensing-section-note-pill p{font-size:var(--font-size-meta);font-weight:var(--font-weight-semibold);line-height:var(--line-height-none);color:var(--color-ink-900);text-align:left;}
.licensing-section .licensing-section-wrapper .licensing-section-note .licensing-section-note-pill p strong{color:var(--color-teal-700);}
/* ---------- Tablet ---------- */
@media (max-width:991px){/* four cards no longer fit on one line;the numbered badges keep the sequence readable,so the connectors come out rather than pointing off the end of a wrapped row */
 .licensing-section .licensing-section-wrapper .licensing-section-envs{flex-wrap:wrap;gap:var(--space-sm);/* two 210px cards + the gap:pins the row to a tidy 2x2 instead of letting it fall to 3+1 as the viewport narrows */
 /* max-width:436px;*/
}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env::after{content:none;}
}
/* ---------- Mobile ---------- */
@media (max-width:767px){.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env{width:100%;flex:0 1 100%;padding:14px;}
.licensing-section .licensing-section-wrapper .licensing-section-envs .licensing-section-env:not(:last-child)::before{content:"";position:absolute;height:16px;width:2px;background-color:var(--color-ink-200);inset:100% auto auto 27px;}
.licensing-section .licensing-section-wrapper .licensing-section-note .licensing-section-note-pill{padding:12px 18px;}
.licensing-section .licensing-section-wrapper{text-align:left;align-items:flex-start;}
.licensing-section .licensing-section-wrapper .licensing-section-note .licensing-section-note-pill{border-radius:10px;}
.licensing-section .licensing-section-wrapper .licensing-section-note .licensing-section-note-pill p{text-align:left;}
}
/* ---------- Lottie Overlap Fix ---------- */
/* Instantly hide the placeholder in the licensing section when lottie loads to prevent shifted overlay effect */
.licensing-section .dbm-lottie-wrapper.is-loaded .dbm-lottie-placeholder{display:none !important;opacity:0 !important;visibility:hidden !important;}
/* ---------- Small Mobile ---------- */