/* =====================================================================
   ScholarHat - Sandbox detail page (/sandbox/{url})
   Root is "<main class='sbx sbd'>": tokens, buttons, hero glow, bento etc come from
   sandbox-ui.css; sandbox cards from bootcamp-list.css. This file adds the detail layout
   and the styles for the admin "key value" HTML contract (.kv-* classes, see docs/SandboxKeyValueStructure.md).
   Radius rule: pills 999px, buttons and inputs 12px, cards 18px.
   ===================================================================== */

.sbd { background: var(--sbx-bg); }
.sbd a:focus-visible, .sbd button:focus-visible, .sbd input:focus-visible + .sbd-opt__box { outline: 3px solid var(--sbx-brand); outline-offset: 2px; }

/* ---------- layout: hero copy + sticky buy card, then the sections ---------- */
.sbd-wrap {
    display: grid; gap: 28px; grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "buy" "body";
    padding-block: clamp(24px, 4vw, 44px) 56px;
}
@media (min-width: 992px) {
    .sbd-wrap { grid-template-columns: minmax(0, 1fr) 380px; grid-template-areas: "hero buy" "body buy"; column-gap: 44px; row-gap: 8px; align-items: start; }
}
.sbd-hero { grid-area: hero; position: relative; isolation: isolate; min-width: 0; }
.sbd-body { grid-area: body; min-width: 0; }
.sbd-aside { grid-area: buy; min-width: 0; }
@media (min-width: 992px) { .sbd-aside { position: sticky; top: 84px; align-self: start; } }

.sbd-glow { position: absolute; z-index: -1; width: 420px; height: 420px; left: -140px; top: -120px; border-radius: 50%; background: rgba(38,211,228,.28); filter: blur(90px); opacity: .6; pointer-events: none; }
[data-bs-theme="dark"] .sbd-glow { opacity: .3; }

.sbd-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 18px; font-size: .8125rem; color: var(--sbx-muted); }
.sbd-crumb a { color: var(--sbx-muted); text-decoration: none; }
.sbd-crumb a:hover { color: var(--sbx-ink); }
.sbd-crumb i { font-style: normal; opacity: .5; }
.sbd-crumb span { color: var(--sbx-ink); font-weight: 600; }

.sbd-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.sbd-logo { display: grid; place-items: center; width: 76px; height: 76px; padding: 12px; border: 1px solid var(--sbx-line); border-radius: 20px; background: #fff; box-shadow: var(--sbx-shadow); transition: transform .4s cubic-bezier(.2,.7,.2,1); }
.sbd-logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sbd-hero:hover .sbd-logo { transform: rotate(-4deg) scale(1.05); }
.sbd-live { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: .75rem; font-weight: 700; color: var(--sbx-ok); background: var(--sbx-ok-soft); }
.sbd-live i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; animation: bcl-live 2s ease-out infinite; }
.sbd-title { margin: 0 0 14px; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.08; letter-spacing: -.035em; font-weight: 800; color: var(--sbx-ink); text-wrap: balance; max-width: 22ch; }
.sbd-lead { margin: 0 0 22px; max-width: 60ch; font-size: clamp(1rem, 1.5vw, 1.0625rem); line-height: 1.7; color: var(--sbx-muted); text-wrap: pretty; }
.sbd-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.sbd-chips li { display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid var(--sbx-line); border-radius: 999px; background: var(--sbx-card); font-size: .8125rem; font-weight: 600; color: var(--sbx-body); animation: sbx-rise .55s cubic-bezier(.2,.7,.2,1) both; transition: border-color .25s, transform .25s; }
.sbd-chips li:nth-child(2) { animation-delay: .06s; } .sbd-chips li:nth-child(3) { animation-delay: .12s; } .sbd-chips li:nth-child(4) { animation-delay: .18s; }
.sbd-chips li:hover { border-color: var(--sbx-brand-line); transform: translateY(-2px); }
.sbd-chips .ico { color: var(--sbx-brand-ink); width: 16px; height: 16px; }

/* ---------- section nav (scroll-spy) ---------- */
.sbd-nav { position: sticky; top: 64px; z-index: 15; margin: 26px 0 0; padding: 10px 0; background: color-mix(in srgb, var(--sbx-bg) 90%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--sbx-line); }
.sbd-nav ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 2px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
.sbd-nav ul::-webkit-scrollbar { display: none; }
.sbd-nav a { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid transparent; border-radius: 999px; font-size: .8125rem; font-weight: 700; white-space: nowrap; color: var(--sbx-muted); text-decoration: none; transition: color .2s, background .2s, border-color .2s; }
.sbd-nav a:hover { color: var(--sbx-ink); }
.sbd-nav a.on { color: var(--sbx-ink); background: var(--sbx-brand-soft); border-color: var(--sbx-brand-line); }

/* ---------- sections ---------- */
.sbd-sec { padding: 38px 0 6px; scroll-margin-top: 130px; }
.sbd-sec + .sbd-sec { border-top: 1px solid var(--sbx-line); margin-top: 34px; }
.sbd-sec__head { margin: 0 0 18px; }
.sbd-sec__head h2 { margin: 0; font-size: clamp(1.4rem, 2.8vw, 1.9rem); line-height: 1.15; letter-spacing: -.03em; font-weight: 800; color: var(--sbx-ink); text-wrap: balance; }
.sbd-sec__head h2::before { content: ""; display: block; width: 28px; height: 3px; margin-bottom: 12px; border-radius: 3px; background: var(--sbx-brand); }

/* ---------- admin content (.sbd-rte): prose + the kv-* components ---------- */
.sbd-rte { color: var(--sbx-body); line-height: 1.75; }
.sbd-rte > *:first-child { margin-top: 0; }
.sbd-rte p { margin: 0 0 14px; max-width: 72ch; }
.sbd-rte h2, .sbd-rte h3, .sbd-rte h4, .sbd-rte h5 { color: var(--sbx-ink); font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.sbd-rte h2 { font-size: 1.25rem; margin: 0 0 10px; } .sbd-rte h3 { font-size: 1.125rem; margin: 22px 0 10px; } .sbd-rte h4 { font-size: 1rem; margin: 0 0 6px; } .sbd-rte h5 { font-size: .9375rem; margin: 0 0 6px; }
.sbd-rte strong, .sbd-rte b { color: var(--sbx-ink); }
.sbd-rte a { color: var(--sbx-brand-ink); }
.sbd-rte ul, .sbd-rte ol { padding-left: 1.2rem; margin: 0 0 14px; }
.sbd-rte img { max-width: 100%; height: auto; border-radius: 12px; }
.sbd-rte .text-muted-custom { color: var(--sbx-muted) !important; }
.sbd-rte .text-primary { color: var(--sbx-brand-ink) !important; }

.kv-lead { font-size: 1.125rem; line-height: 1.65; color: var(--sbx-ink); }

/* icons: <span class="kv-ic" data-icon="shield"></span>, or data-icon on any heading */
[data-icon]::before { content: ""; display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -.2em; margin-right: .5em; background: currentColor; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
.kv-ic { display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 12px; border-radius: 12px; color: var(--sbx-brand-ink); background: var(--sbx-brand-soft); border: 1px solid var(--sbx-brand-line); transition: transform .3s cubic-bezier(.2,.7,.2,1), background .25s, color .25s; }
.kv-ic::before { margin: 0; width: 20px; height: 20px; vertical-align: 0; }
[data-bs-theme="dark"] .kv-ic { color: var(--sbx-brand); }

/* cards: <div class="kv-grid"><div class="kv-card"><span class="kv-ic" data-icon=""></span><h4></h4><p></p></div></div> */
.kv-grid { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 0 0 14px; }
@media (min-width: 640px) { .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kv-card { position: relative; padding: 20px; border: 1px solid var(--sbx-line); border-radius: 18px; background: var(--sbx-card); transition: transform .3s cubic-bezier(.2,.7,.2,1), border-color .3s, box-shadow .3s; overflow: hidden; }
.kv-card::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--sbx-brand) 16%, transparent), transparent 70%); }
.kv-card:hover { transform: translateY(-3px); border-color: var(--sbx-brand-line); box-shadow: var(--sbx-shadow); }
.kv-card:hover::before { opacity: 1; }
.kv-card:hover .kv-ic { transform: scale(1.08) rotate(-4deg); background: var(--sbx-brand); color: #04222a; }
.kv-card > * { position: relative; }
.kv-card h4 { margin: 0 0 6px; font-size: 1rem; }
.kv-card p { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--sbx-muted); }

/* stats: <div class="kv-stats"><div><b>40+</b><span>Azure services</span></div></div> */
.kv-stats { display: grid; gap: 12px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 22px 0 18px; }
@media (min-width: 640px) { .kv-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kv-stats > div { padding: 16px; border: 1px solid var(--sbx-line); border-radius: 18px; background: var(--sbx-surface); }
.kv-stats b { display: block; font-size: 1.5rem; line-height: 1.1; font-weight: 800; letter-spacing: -.02em; color: var(--sbx-ink); }
.kv-stats span { display: block; margin-top: 4px; font-size: .8125rem; color: var(--sbx-muted); }

/* service groups: <div class="kv-groups"><div class="kv-group" data-tone="blue"><h4 data-icon="server">Compute</h4><ul><li>..</li></ul></div></div> */
.kv-groups { display: grid; gap: 14px; grid-template-columns: minmax(0, 1fr); margin: 0 0 14px; }
@media (min-width: 640px) { .kv-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .kv-groups { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kv-group { --tone: var(--sbx-brand-ink); padding: 18px 18px 14px; border: 1px solid var(--sbx-line); border-top: 3px solid var(--tone); border-radius: 18px; background: var(--sbx-card); transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s; }
.kv-group:hover { transform: translateY(-3px); box-shadow: var(--sbx-shadow); }
.kv-group[data-tone="blue"] { --tone: #2563eb; } .kv-group[data-tone="green"] { --tone: #059669; } .kv-group[data-tone="purple"] { --tone: #7c3aed; }
.kv-group[data-tone="pink"] { --tone: #db2777; } .kv-group[data-tone="amber"] { --tone: #d97706; } .kv-group[data-tone="cyan"] { --tone: #0e9aaa; }
[data-bs-theme="dark"] .kv-group[data-tone="blue"] { --tone: #60a5fa; } [data-bs-theme="dark"] .kv-group[data-tone="green"] { --tone: #34d399; } [data-bs-theme="dark"] .kv-group[data-tone="purple"] { --tone: #a78bfa; }
[data-bs-theme="dark"] .kv-group[data-tone="pink"] { --tone: #f472b6; } [data-bs-theme="dark"] .kv-group[data-tone="amber"] { --tone: #fbbf24; } [data-bs-theme="dark"] .kv-group[data-tone="cyan"] { --tone: #26d3e4; }
.kv-group h4 { display: flex; align-items: center; margin: 0 0 12px; font-size: 1rem; color: var(--sbx-ink); }
.kv-group h4::before { color: var(--tone); }
.kv-group ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.kv-group li { position: relative; padding-left: 22px; font-size: .875rem; line-height: 1.4; color: var(--sbx-body); }
.kv-group li::before { content: ""; position: absolute; left: 0; top: .2em; width: 14px; height: 14px; background: var(--tone); -webkit-mask: var(--ico-check) center / contain no-repeat; mask: var(--ico-check) center / contain no-repeat; }

/* rules: <ul class="kv-rules"><li><b>Title</b><span>Text</span></li></ul> + <p class="kv-callout"> */
.kv-rules { list-style: none; margin: 0 0 16px; padding: 0 !important; border: 1px solid var(--sbx-line); border-radius: 18px; background: var(--sbx-card); overflow: hidden; }
.kv-rules li { display: grid; gap: 4px 20px; padding: 14px 18px; }
.kv-rules li + li { border-top: 1px solid var(--sbx-line); }
@media (min-width: 640px) { .kv-rules li { grid-template-columns: 190px minmax(0, 1fr); } }
.kv-rules b { color: var(--sbx-ink); font-size: .9375rem; }
.kv-rules span { color: var(--sbx-muted); font-size: .9rem; line-height: 1.6; }
.kv-callout { padding: 14px 16px; border-left: 3px solid var(--sbx-brand); border-radius: 0 12px 12px 0; background: var(--sbx-brand-soft); color: var(--sbx-body); max-width: none !important; }
.kv-callout b { color: var(--sbx-ink); }

/* steps: <ol class="kv-steps"><li><b>Title</b><span>Text</span></li></ol> */
.kv-steps { list-style: none; counter-reset: kv; margin: 0 0 14px; padding: 0 !important; display: grid; gap: 12px; }
@media (min-width: 640px) { .kv-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kv-steps li { counter-increment: kv; position: relative; padding: 16px 16px 16px 60px; border: 1px solid var(--sbx-line); border-radius: 18px; background: var(--sbx-card); }
.kv-steps li::before { content: counter(kv); position: absolute; left: 16px; top: 16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--sbx-brand); color: #04222a; font-weight: 800; }
.kv-steps b { display: block; color: var(--sbx-ink); margin-bottom: 2px; }
.kv-steps span { color: var(--sbx-muted); font-size: .9rem; line-height: 1.55; }

/* tags: <ul class="kv-tags"><li>Azure Portal</li></ul> */
.kv-tags { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0 0 14px; padding: 0 !important; }
.kv-tags li { padding: 6px 13px; border: 1px solid var(--sbx-line); border-radius: 999px; background: var(--sbx-surface); font-size: .8125rem; font-weight: 600; color: var(--sbx-body); }

/* ---------- buy card ---------- */
.sbd-buy { border: 1px solid var(--sbx-line); border-radius: 22px; background: var(--sbx-card); box-shadow: var(--sbx-shadow); overflow: hidden; }
.sbd-buy__top { display: flex; align-items: center; gap: 12px; padding: 18px 20px; border-bottom: 1px solid var(--sbx-line); background: linear-gradient(180deg, var(--sbx-brand-soft), transparent); }
.sbd-buy__top img { width: 44px; height: 44px; padding: 6px; object-fit: contain; border: 1px solid var(--sbx-line); border-radius: 12px; background: #fff; }
.sbd-buy__top b { display: block; color: var(--sbx-ink); font-size: 1rem; line-height: 1.25; }
.sbd-buy__top small { color: var(--sbx-muted); font-size: .8125rem; }
.sb-pricing { padding: 18px 20px 20px; }
.sbd-price__label { margin: 0 0 10px; font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sbx-muted); }
.sbd-opts { display: grid; gap: 10px; }
.sbd-opt { position: relative; display: block; cursor: pointer; }
.sbd-opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 1; }
.sbd-opt__box { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 12px; padding: 14px 14px; border: 1.5px solid var(--sbx-line); border-radius: 16px; background: var(--sbx-card); transition: border-color .25s, background .25s, box-shadow .25s, transform .25s cubic-bezier(.2,.7,.2,1); }
.sbd-opt:hover .sbd-opt__box { border-color: var(--sbx-brand-line); transform: translateY(-1px); }
.sbd-opt__dot { grid-row: span 2; display: grid; place-items: center; width: 22px; height: 22px; border: 1.5px solid var(--sbx-line); border-radius: 50%; color: transparent; background: var(--sbx-card); transition: background .25s, border-color .25s, transform .3s cubic-bezier(.3,1.6,.5,1); }
.sbd-opt__dot svg { width: 12px; height: 12px; stroke-dasharray: 24; stroke-dashoffset: 24; transition: stroke-dashoffset .3s ease .05s; }
.sbd-opt__name { font-weight: 700; color: var(--sbx-ink); font-size: .9375rem; }
.sbd-opt__price { text-align: right; font-weight: 800; font-size: 1.25rem; letter-spacing: -.02em; color: var(--sbx-ink); font-variant-numeric: tabular-nums; }
.sbd-opt__sub { grid-column: 2 / 4; display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .75rem; color: var(--sbx-muted); }
.sbd-opt__sub em { font-style: normal; font-weight: 700; color: var(--sbx-ok); }
.sbd-opt__sub del { color: var(--sbx-muted); }
.sbd-opt input:checked + .sbd-opt__box { border-color: var(--sbx-brand-ink); background: linear-gradient(180deg, var(--sbx-brand-soft), transparent 85%), var(--sbx-card); box-shadow: 0 0 0 3px var(--sbx-brand-soft), 0 12px 24px -16px var(--sbx-brand-ink); }
[data-bs-theme="dark"] .sbd-opt input:checked + .sbd-opt__box { border-color: var(--sbx-brand); }
.sbd-opt input:checked + .sbd-opt__box .sbd-opt__dot { background: var(--sbx-brand-ink); border-color: var(--sbx-brand-ink); color: #fff; transform: scale(1.08); }
[data-bs-theme="dark"] .sbd-opt input:checked + .sbd-opt__box .sbd-opt__dot { background: var(--sbx-brand); border-color: var(--sbx-brand); color: #04222a; }
.sbd-opt input:checked + .sbd-opt__box .sbd-opt__dot svg { stroke-dashoffset: 0; }
.sbd-opt input:focus-visible + .sbd-opt__box { outline: 3px solid var(--sbx-brand); outline-offset: 2px; }
.sb-tax-note { margin: 10px 2px 0; font-size: .75rem; color: var(--sbx-muted); }
.sb-access { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: var(--sbx-ok-soft); color: var(--sbx-body); font-size: .8125rem; }
.sb-access svg { color: var(--sbx-ok); flex: none; margin-top: 2px; }
.sbd-cta { display: grid; gap: 10px; margin-top: 16px; }
.sbd-cta .sbx-btn { width: 100%; min-height: 50px; }
.sbd-cta .sb-add-to-cart { position: relative; isolation: isolate; }
.sbd-cta__in, .sbd-cta__ok { display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: opacity .25s, transform .35s cubic-bezier(.2,.7,.2,1); }
.sbd-cta__ok { position: absolute; inset: 0; opacity: 0; transform: translateY(10px); }
.sbd-cta__ok svg { width: 18px; height: 18px; }
.sbd-cta__ok path { stroke-dasharray: 24; stroke-dashoffset: 24; }
.sb-add-to-cart.is-busy { pointer-events: none; filter: saturate(.8); }
.sb-add-to-cart.is-added { background: linear-gradient(135deg, #10b981, #34d399); animation: bcl-ring 1s ease-out; }
.sb-add-to-cart.is-added .sbd-cta__in { opacity: 0; transform: translateY(-10px); }
.sb-add-to-cart.is-added .sbd-cta__ok { opacity: 1; transform: none; }
.sb-add-to-cart.is-added .sbd-cta__ok path { animation: bcl-draw .45s ease .1s forwards; }
.sbd-perks { list-style: none; margin: 18px 0 0; padding: 16px 0 0; border-top: 1px dashed var(--sbx-line); display: grid; gap: 9px; }
.sbd-perks li { display: flex; align-items: center; gap: 10px; font-size: .8125rem; color: var(--sbx-body); }
.sbd-perks .ico { color: var(--sbx-ok); width: 15px; height: 15px; }

/* ---------- more sandboxes, faq, band ---------- */
.sbd-more { padding-block: 56px 8px; border-top: 1px solid var(--sbx-line); background: radial-gradient(60% 40% at 50% 0%, var(--sbx-brand-soft), transparent 70%), var(--sbx-surface); }
.sbd-faq { padding-block: 56px 16px; }
.sbd-faq .sbx-head { margin-inline: auto; text-align: center; }
.sbd-band { margin: 40px 0 56px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; padding: 26px 30px; border-radius: 22px; color: #e6f7fa; background: radial-gradient(60% 140% at 100% 0%, rgba(38,211,228,.28), transparent 60%), #0b1b2b; border: 1px solid rgba(38,211,228,.18); }
.sbd-band h2 { margin: 0 0 4px; font-size: clamp(1.125rem, 2.4vw, 1.5rem); font-weight: 800; letter-spacing: -.02em; color: #fff; }
.sbd-band p { margin: 0; color: #9fb7c4; }

/* mobile: sticky price bar instead of the old fixed footer */
.sbd-bar { display: none; }
@media (max-width: 991.98px) {
    .sbd-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--sbx-card) 94%, transparent); backdrop-filter: blur(12px); border-top: 1px solid var(--sbx-line); }
    .sbd-bar small { display: block; font-size: .6875rem; color: var(--sbx-muted); }
    .sbd-bar b { font-size: 1.125rem; color: var(--sbx-ink); }
    .sbd-bar .sbx-btn { min-height: 44px; }
    .sbd { padding-bottom: 70px; }
    .sbd-title { max-width: none; }
    .sbd-band { padding: 22px; } .sbd-band .sbx-btn { width: 100%; }
}

/* the site shows its own fixed tab bar on phones: sit above it */
@media (max-width: 767.98px) { .sbd-bar { bottom: calc(54px + env(safe-area-inset-bottom)); padding-bottom: 10px; } .sbd { padding-bottom: 130px; } }

@keyframes bcl-live { 0% { box-shadow: 0 0 0 0 currentColor; } 70%, 100% { box-shadow: 0 0 0 7px transparent; } }
@keyframes bcl-ring { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.55); } 100% { box-shadow: 0 0 0 16px rgba(16,185,129,0); } }
@keyframes bcl-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sbd *, .sbd *::before, .sbd *::after { animation: none !important; transition: none !important; } }

/* ---------- icon masks (names used in data-icon) ---------- */
.sbd { --ico-check: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E"); }
[data-icon="shield"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%2022s8-4%208-10V5l-8-3-8%203v7c0%206%208%2010%208%2010z%22/%3E%3C/svg%3E"); }
[data-icon="zap"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolygon%20points=%2213%202%203%2014%2012%2014%2011%2022%2021%2010%2012%2010%2013%202%22/%3E%3C/svg%3E"); }
[data-icon="cloud"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M18%2010h-1.26A8%208%200%201%200%209%2020h9a5%205%200%200%200%200-10z%22/%3E%3C/svg%3E"); }
[data-icon="server"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%222%22%20y=%222%22%20width=%2220%22%20height=%228%22%20rx=%222%22/%3E%3Crect%20x=%222%22%20y=%2214%22%20width=%2220%22%20height=%228%22%20rx=%222%22/%3E%3Cline%20x1=%226%22%20y1=%226%22%20x2=%226.01%22%20y2=%226%22/%3E%3Cline%20x1=%226%22%20y1=%2218%22%20x2=%226.01%22%20y2=%2218%22/%3E%3C/svg%3E"); }
[data-icon="lock"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Crect%20x=%223%22%20y=%2211%22%20width=%2218%22%20height=%2211%22%20rx=%222%22/%3E%3Cpath%20d=%22M7%2011V7a5%205%200%200%201%2010%200v4%22/%3E%3C/svg%3E"); }
[data-icon="users"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M17%2021v-2a4%204%200%200%200-4-4H5a4%204%200%200%200-4%204v2%22/%3E%3Ccircle%20cx=%229%22%20cy=%227%22%20r=%224%22/%3E%3Cpath%20d=%22M23%2021v-2a4%204%200%200%200-3-3.87%22/%3E%3Cpath%20d=%22M16%203.13a4%204%200%200%201%200%207.75%22/%3E%3C/svg%3E"); }
[data-icon="clock"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Cpolyline%20points=%2212%206%2012%2012%2016%2014%22/%3E%3C/svg%3E"); }
[data-icon="check"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%2220%206%209%2017%204%2012%22/%3E%3C/svg%3E"); }
[data-icon="layers"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolygon%20points=%2212%202%202%207%2012%2012%2022%207%2012%202%22/%3E%3Cpolyline%20points=%222%2017%2012%2022%2022%2017%22/%3E%3Cpolyline%20points=%222%2012%2012%2017%2022%2012%22/%3E%3C/svg%3E"); }
[data-icon="terminal"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%224%2017%2010%2011%204%205%22/%3E%3Cline%20x1=%2212%22%20y1=%2219%22%20x2=%2220%22%20y2=%2219%22/%3E%3C/svg%3E"); }
[data-icon="trash"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%223%206%205%206%2021%206%22/%3E%3Cpath%20d=%22M19%206l-1%2014a2%202%200%200%201-2%202H8a2%202%200%200%201-2-2L5%206%22/%3E%3Cpath%20d=%22M10%2011v6M14%2011v6%22/%3E%3Cpath%20d=%22M9%206V4a1%201%200%200%201%201-1h4a1%201%200%200%201%201%201v2%22/%3E%3C/svg%3E"); }
[data-icon="support"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%224%22/%3E%3Cline%20x1=%224.93%22%20y1=%224.93%22%20x2=%229.17%22%20y2=%229.17%22/%3E%3Cline%20x1=%2214.83%22%20y1=%2214.83%22%20x2=%2219.07%22%20y2=%2219.07%22/%3E%3Cline%20x1=%2214.83%22%20y1=%229.17%22%20x2=%2219.07%22%20y2=%224.93%22/%3E%3Cline%20x1=%224.93%22%20y1=%2219.07%22%20x2=%229.17%22%20y2=%2214.83%22/%3E%3C/svg%3E"); }
[data-icon="globe"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%2212%22%20r=%2210%22/%3E%3Cline%20x1=%222%22%20y1=%2212%22%20x2=%2222%22%20y2=%2212%22/%3E%3Cpath%20d=%22M12%202a15.3%2015.3%200%200%201%204%2010%2015.3%2015.3%200%200%201-4%2010%2015.3%2015.3%200%200%201-4-10%2015.3%2015.3%200%200%201%204-10z%22/%3E%3C/svg%3E"); }
[data-icon="database"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cellipse%20cx=%2212%22%20cy=%225%22%20rx=%229%22%20ry=%223%22/%3E%3Cpath%20d=%22M21%2012c0%201.66-4%203-9%203s-9-1.34-9-3%22/%3E%3Cpath%20d=%22M3%205v14c0%201.66%204%203%209%203s9-1.34%209-3V5%22/%3E%3C/svg%3E"); }
[data-icon="money"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cline%20x1=%2212%22%20y1=%221%22%20x2=%2212%22%20y2=%2223%22/%3E%3Cpath%20d=%22M17%205H9.5a3.5%203.5%200%200%200%200%207h5a3.5%203.5%200%200%201%200%207H6%22/%3E%3C/svg%3E"); }
[data-icon="code"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpolyline%20points=%2216%2018%2022%2012%2016%206%22/%3E%3Cpolyline%20points=%228%206%202%2012%208%2018%22/%3E%3C/svg%3E"); }
[data-icon="flask"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M14%202v6l5.5%2010A2%202%200%200%201%2018%2021H6a2%202%200%200%201-1.5-3L10%208V2%22/%3E%3Cpath%20d=%22M8.5%202h7%22/%3E%3C/svg%3E"); }
[data-icon="box"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M21%2016V8a2%202%200%200%200-1-1.73l-7-4a2%202%200%200%200-2%200l-7%204A2%202%200%200%200%203%208v8a2%202%200%200%200%201%201.73l7%204a2%202%200%200%200%202%200l7-4A2%202%200%200%200%2021%2016z%22/%3E%3Cpolyline%20points=%223.27%206.96%2012%2012.01%2020.73%206.96%22/%3E%3Cline%20x1=%2212%22%20y1=%2222.08%22%20x2=%2212%22%20y2=%2212%22/%3E%3C/svg%3E"); }
[data-icon="network"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%2212%22%20cy=%225%22%20r=%223%22/%3E%3Ccircle%20cx=%225%22%20cy=%2219%22%20r=%223%22/%3E%3Ccircle%20cx=%2219%22%20cy=%2219%22%20r=%223%22/%3E%3Cpath%20d=%22M12%208v4M12%2012l-5.5%205M12%2012l5.5%205%22/%3E%3C/svg%3E"); }
[data-icon="sparkles"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Cpath%20d=%22M12%203l1.8%205.2L19%2010l-5.2%201.8L12%2017l-1.8-5.2L5%2010l5.2-1.8z%22/%3E%3Cpath%20d=%22M19%203v4M17%205h4%22/%3E%3C/svg%3E"); }
[data-icon="key"] { --ico: url("data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20viewBox=%220%200%2024%2024%22%20fill=%22none%22%20stroke=%22black%22%20stroke-width=%222%22%20stroke-linecap=%22round%22%20stroke-linejoin=%22round%22%3E%3Ccircle%20cx=%227.5%22%20cy=%2215.5%22%20r=%225.5%22/%3E%3Cpath%20d=%22M21%202l-9.6%209.6M15.5%207.5l3%203L22%207l-3-3%22/%3E%3C/svg%3E"); }


/* how-it-works video under the hero chips */
.sbd-video { margin-top: 22px; max-width: 640px; }