/* The Custom Strategies demo (showcase/chapters/_strategies.html, strategies-demo.js) on /how-it-works/
   (#strategies). One app window holding the tool's three screens. Colours, radii and type are the tool's
   own (intrinio_options/templates/intrinio/strategies/strategies-list.html, strategy_build.html,
   strategy-detail.html: card #0e0e1e, border #6759d1, accent #a78bfa, green #4ade80, red #f87171,
   amber #fbbf24); the section around it uses landing.css. Everything is sb-* and scoped under .sb so
   it beats landing.css's element reset. Only transform and opacity animate; all of it stops under
   reduced motion (landing.css section 13, plus .sb-still) and while the demo is paused (.is-paused).
   The static (no-JS) frame and the built app share these classes: a JS control's
   [aria-pressed="true"] / [aria-selected="true"] state is .is-on in the static markup. */

.sb {
  --sb-p: #6759d1; --sb-p2: #a78bfa; --sb-p3: #c4b5fd;
  --sb-bg: #080814; --sb-card: rgba(14, 14, 30, .98); --sb-line: rgba(103, 89, 209, .26);
  --sb-text: #e2e0f5; --sb-muted: #a9a5cc; --sb-bright: #f0eeff;
  --sb-green: #4ade80; --sb-red: #f87171; --sb-amber: #fbbf24; --sb-blue: #3b82f6; --sb-cyan: #06b6d4;
  --sb-h: clamp(560px, 78vh, 780px);
  --sb-font: 'Poppins', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
html:not(.js) .sb-js, .sb.sb-nodata .sb-js { display: none !important; }

/* ---- head ---- */
.sb-head-logo { display: inline-flex; }
.sb .sb-head-logo svg { display: block; border-radius: var(--lp-r-sm); box-shadow: 0 0 24px color-mix(in srgb, var(--sb-p) 45%, transparent); }

/* ---- stepper ---- */
.sb .sb-steps {
  display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-sp-2);
  width: fit-content; max-width: 100%; margin: 0 auto var(--lp-sp-4); padding: var(--lp-sp-1); list-style: none;
  border: 1px solid var(--lp-border); border-radius: var(--lp-r-pill); background: var(--lp-surface-2);
}
.sb .sb-steps li { display: flex; align-items: center; }
.sb .sb-steps li + li::before { content: ""; width: 14px; height: 1px; margin-right: var(--lp-sp-2); background: var(--lp-border-strong); }
.sb .sb-step {
  display: inline-flex; align-items: center; gap: var(--lp-sp-2); min-height: 40px; padding: 0 var(--lp-sp-4) 0 var(--lp-sp-2);
  border: 1px solid transparent; border-radius: var(--lp-r-pill); background: none; cursor: pointer;
  color: var(--lp-muted); font: 600 var(--lp-fs-sm)/1.2 var(--lp-font); white-space: nowrap;
}
.sb .sb-step:hover { color: var(--lp-text); }
.sb-step-n {
  display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%;
  border: 1px solid var(--lp-border-strong); font-size: var(--lp-fs-xs); font-weight: 700;
}
.sb .sb-step.is-done .sb-step-n { border-color: color-mix(in srgb, var(--sb-green) 60%, transparent); color: var(--sb-green); }
.sb .sb-step[aria-current="step"] { color: var(--lp-text); border-color: var(--lp-primary); background: color-mix(in srgb, var(--lp-primary) 24%, transparent); }
.sb .sb-step[aria-current="step"] .sb-step-n { border-color: var(--sb-p2); background: var(--sb-p); color: #fff; }

/* ---- the window ---- */
.sb-window {
  position: relative; overflow: hidden;
  border: 1px solid var(--lp-border-strong); border-radius: var(--lp-r-lg); background: var(--sb-bg);
  box-shadow: var(--lp-shadow), 0 0 80px color-mix(in srgb, var(--lp-primary) 10%, transparent);
}
.sb-bar {
  display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 14px;
  background: #0c0a17; border-bottom: 1px solid rgba(255, 255, 255, .07); white-space: nowrap; overflow: hidden;
}
.sb-lights { display: inline-flex; flex: none; gap: 6px; }
.sb-lights i { width: 10px; height: 10px; border-radius: 50%; background: #ff5f57; }
.sb-lights i + i { background: #febc2e; }
.sb-lights i + i + i { background: #28c840; }
.sb-url {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0; max-width: 640px; flex: 1;
  padding: 4px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--sb-muted); font-size: 12px;
}
.sb-url span { overflow: hidden; text-overflow: ellipsis; }
.sb-apphead {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 52px; padding: 0 20px;
  background: linear-gradient(90deg, #5fae8c, #6cbf9b 60%, #78c8a6); color: #fff;
}
.sb-apphead-t { overflow: hidden; font: 700 20px/1.2 var(--sb-font); letter-spacing: -.01em; white-space: nowrap; text-overflow: ellipsis; }
.sb-apphead-s {
  display: inline-flex; align-items: center; gap: 8px; flex: 0 1 260px; height: 32px; padding: 0 12px; border-radius: 10px;
  background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .85); font-size: 13px; white-space: nowrap;
}

/* The app viewport. It scrolls inside the window; while the tour runs it does not take the wheel
   or swipes (the tour scrolls it), so the page keeps scrolling. */
.sb .sb-app {
  position: relative; height: var(--sb-h); overflow-y: auto; overflow-x: hidden; padding: 16px;
  color: var(--sb-text); font-family: var(--lp-font); font-size: 13px; line-height: 1.45;
  background:
    radial-gradient(ellipse at 70% 0%, rgba(103, 89, 209, .09), transparent 55%),
    radial-gradient(ellipse at 10% 100%, rgba(56, 189, 248, .04), transparent 50%), var(--sb-bg);
  scrollbar-width: thin; scrollbar-color: #6759d1 rgba(103, 89, 209, .12);
}
.sb.sb-touring .sb-app { overflow-y: hidden; }
/* Without JS, or without the sample data, the static frame is shown whole. */
html:not(.js) .sb .sb-app, .sb.sb-nodata .sb-app { height: auto; overflow: visible; }
.sb .sb-app :where(p, h3, ul, li) { margin: 0; padding: 0; }
.sb .sb-app :where(ul) { list-style: none; }
.sb .sb-static-tag { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px; color: var(--sb-muted); font-size: 12px; }

.sb .sb-hint {
  position: absolute; left: 50%; bottom: 18px; z-index: 6; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border: 1px solid rgba(167, 139, 250, .6); border-radius: 999px; cursor: pointer;
  background: rgba(20, 16, 44, .94); color: var(--sb-bright); font: 600 13px/1.2 var(--lp-font);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 24px rgba(103, 89, 209, .35);
  transform: translateX(-50%); animation: sb-hint-in .45s var(--lp-ease) both;
}
.sb .sb-hint span { color: var(--sb-p2); font-size: 15px; }

/* screens */
.sb-scr { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.sb-scr.is-new { animation: sb-in .32s var(--lp-ease) both; }

/* shared card shell (.sd-card) */
.sb .sb-c {
  position: relative; overflow: hidden; border: 1px solid var(--sb-line); border-radius: 16px; background: var(--sb-card);
  box-shadow: 0 4px 32px rgba(0, 0, 0, .5);
}
.sb .sb-c::before { content: ""; position: absolute; inset: 0 0 auto; height: 2px; background: linear-gradient(90deg, #6759d1, #c4b5fd, #6759d1); }
.sb .sb-c--pad { padding: 18px 22px; }
.sb .sb-chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 5px 13px; border-radius: 20px;
  border: 1px solid rgba(103, 89, 209, .3); background: rgba(103, 89, 209, .12);
  color: #a79df0; font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase;
}

/* header card (.sl-header-card) */
.sb .sb-hcard {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px;
  overflow: hidden; padding: 20px 24px 18px 28px; border: 1px solid rgba(103, 89, 209, .45); border-radius: 16px;
  background: rgba(14, 14, 30, .97); box-shadow: 0 4px 28px rgba(0, 0, 0, .4);
}
.sb .sb-hcard::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #a78bfa, #6759d1 60%, #38bdf8); }
.sb .sb-hcard-t { color: #fff; font: 800 22px/1.2 var(--sb-font); letter-spacing: .2px; outline: none; }
.sb .sb-hcard-t span { color: var(--sb-p2); }
.sb .sb-hcard-s { margin-top: 4px; color: #a19dc4; font-size: 12.5px; }

/* ================= gallery ================= */
.sb .sb-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.sb .sb-fbtn {
  padding: 7px 16px; border: 1px solid rgba(103, 89, 209, .25); border-radius: 8px; cursor: pointer;
  background: rgba(103, 89, 209, .06); color: #8b93a7; font: 700 11px/1.3 var(--lp-font); letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
}
.sb .sb-fbtn:hover { color: var(--sb-p3); border-color: rgba(167, 139, 250, .45); }
.sb .sb-fbtn[aria-pressed="true"] { background: rgba(103, 89, 209, .28); border-color: var(--sb-p2); color: #e0e7ff; box-shadow: 0 0 12px rgba(103, 89, 209, .25); }
.sb .sb-fbtn--low[aria-pressed="true"] { background: rgba(74, 222, 128, .12); border-color: var(--sb-green); color: var(--sb-green); }
.sb .sb-fbtn--medium[aria-pressed="true"] { background: rgba(251, 191, 36, .1); border-color: var(--sb-amber); color: var(--sb-amber); }
.sb .sb-fbtn--high[aria-pressed="true"] { background: rgba(248, 113, 113, .12); border-color: var(--sb-red); color: var(--sb-red); }

.sb .sb-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.sb .sb-stat {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 104px; padding: 11px 20px;
  overflow: hidden; border: 1px solid rgba(103, 89, 209, .25); border-radius: 12px; background: rgba(14, 14, 30, .97);
}
.sb .sb-stat::after { content: ""; position: absolute; left: 20%; right: 20%; bottom: 0; height: 2px; border-radius: 2px; background: rgba(103, 89, 209, .5); }
.sb-stat-l { color: #8e93a6; font-size: 10px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; }
.sb-stat-v { color: #fff; font: 900 22px/1 var(--sb-font); }
.sb .sb-stat--low::after { background: rgba(74, 222, 128, .6); }
.sb .sb-stat--medium::after { background: rgba(251, 191, 36, .55); }
.sb .sb-stat--high::after { background: rgba(248, 113, 113, .6); }
.sb-stat--low .sb-stat-v { color: var(--sb-green); }
.sb-stat--medium .sb-stat-v { color: var(--sb-amber); }
.sb-stat--high .sb-stat-v { color: var(--sb-red); }

.sb .sb-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.sb .sb-card {
  position: relative; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid rgba(103, 89, 209, .28); border-radius: 16px; background: rgba(14, 14, 30, .97); box-shadow: 0 4px 20px rgba(0, 0, 0, .5);
}
.sb .sb-card::before { content: ""; position: absolute; inset: 0 0 auto; z-index: 3; height: 3px; background: linear-gradient(90deg, #6759d1, #c4b5fd, #6759d1); }
.sb .sb-card.is-new { animation: sb-in .3s var(--lp-ease) both; }
.sb .sb-card-hd { padding: 16px 18px 12px; }
.sb .sb-card-name { margin-bottom: 6px; color: var(--sb-p2); font: 700 16px/1.25 var(--sb-font); letter-spacing: .2px; }
.sb .sb-card-desc { color: #a19dc4; font-size: 12.5px; line-height: 1.6; }
.sb .sb-card-img { position: relative; background: rgba(8, 8, 20, .85); box-shadow: inset 0 0 0 1px rgba(103, 89, 209, .1); }
.sb .sb-card-img::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 0 0, rgba(103, 89, 209, .2), transparent 55%), radial-gradient(ellipse at 100% 100%, rgba(103, 89, 209, .13), transparent 50%);
}
.sb-pf { display: block; width: 100%; height: auto; }
.sb-pf-axis { fill: none; stroke: rgba(226, 224, 245, .55); stroke-width: 1.4; }
.sb-pf-arrow { fill: rgba(226, 224, 245, .55); }
.sb-pf-zero { fill: #e2e0f5; font: 700 12px var(--lp-font); }
.sb-pf-fill-up { fill: rgba(74, 222, 128, .14); }
.sb-pf-fill-dn { fill: rgba(248, 113, 113, .13); }
.sb-pf-up, .sb-pf-dn { fill: none; stroke-width: 3.2; stroke-linejoin: round; stroke-linecap: round; }
.sb-pf-up { stroke: #6fbf4f; }
.sb-pf-dn { stroke: #e2656b; }
.sb-pf-max { stroke: rgba(226, 224, 245, .5); stroke-width: 1.2; stroke-dasharray: 4 4; }
.sb-pf-lbl { font: 600 10px var(--lp-font); }
.sb-pf-lbl--up { fill: #c6c2e6; }
.sb-pf-lbl--dn { fill: #8f8ab3; }
.sb-pf-be { fill: #0e0e1e; stroke: #fbbf24; stroke-width: 1.8; }
.sb-pf-tick { stroke: rgba(226, 224, 245, .6); stroke-width: 1.4; }
.sb-pf-strike { fill: #d9d6f0; font: 600 9.5px var(--lp-font); }

.sb .sb-risk {
  display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 20px; font-size: 10px; font-weight: 800;
  letter-spacing: 1px; text-transform: uppercase; white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .45);
}
.sb .sb-risk--over { position: absolute; top: 10px; right: 10px; z-index: 2; }
.sb .sb-risk--low { background: rgba(5, 18, 10, .8); color: var(--sb-green); border: 1px solid rgba(74, 222, 128, .6); }
.sb .sb-risk--medium { background: rgba(18, 14, 4, .8); color: var(--sb-amber); border: 1px solid rgba(251, 191, 36, .55); }
.sb .sb-risk--high { background: rgba(18, 4, 4, .8); color: var(--sb-red); border: 1px solid rgba(248, 113, 113, .6); }
.sb .sb-card-bd { display: flex; flex: 1; flex-direction: column; justify-content: flex-end; gap: 14px; padding: 14px 18px 18px; }
.sb .sb-pl { display: flex; gap: 8px; }
.sb .sb-plc {
  position: relative; display: flex; flex: 1; flex-direction: column; gap: 3px; min-width: 0; padding: 8px 10px 8px 13px;
  overflow: hidden; border: 1px solid rgba(103, 89, 209, .18); border-radius: 8px; background: rgba(103, 89, 209, .06);
}
.sb .sb-plc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(#4ade80, #22c55e); }
.sb .sb-plc--l::before { background: linear-gradient(#f87171, #ef4444); }
.sb-plc-l { color: var(--sb-green); font-size: 9.5px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.sb-plc--l .sb-plc-l { color: var(--sb-red); }
.sb-plc-v { color: #fff; font-size: 12.5px; font-weight: 700; line-height: 1.35; }
.sb .sb-cbtn {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 11px 16px; cursor: pointer;
  border: 1px solid rgba(103, 89, 209, .5); border-radius: 10px; background: rgba(103, 89, 209, .22);
  color: var(--sb-p3); font: 700 13px/1.2 var(--lp-font); letter-spacing: .4px;
}
.sb .sb-cbtn:hover { background: rgba(103, 89, 209, .45); border-color: var(--sb-p2); color: #fff; }
.sb .sb-empty { padding: 48px 20px; border: 1px solid rgba(103, 89, 209, .2); border-radius: 16px; color: var(--sb-muted); text-align: center; }

/* ================= build ================= */
.sb .sb-bname { color: var(--sb-p2); font: 800 24px/1.2 var(--sb-font); outline: none; }
.sb .sb-bhead-l { max-width: 60ch; }
.sb .sb-bhead-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sb .sb-back {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; cursor: pointer;
  border: 1px solid rgba(103, 89, 209, .4); border-radius: 10px; background: rgba(14, 14, 30, .9);
  color: #e0e7ff; font: 700 13px/1.2 var(--lp-font);
}
.sb .sb-back:hover { border-color: var(--sb-p2); background: rgba(103, 89, 209, .2); }
.sb .sb-back--sm { padding: 7px 12px; font-size: 12px; }
.sb .sb-lbl { display: block; margin-bottom: 10px; color: #b9b6d3; font-size: 11px; font-weight: 800; letter-spacing: 1.4px; text-transform: uppercase; }
.sb .sb-lbl--row { display: flex; align-items: center; gap: 8px; }
.sb-lbl-ico { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid rgba(103, 89, 209, .4); color: var(--sb-p2); }
.sb .sb-count { margin-left: auto; padding: 1px 9px; border-radius: 999px; background: rgba(103, 89, 209, .25); color: var(--sb-p3); font-size: 10.5px; letter-spacing: 0; }
.sb .sb-trow { display: flex; flex-wrap: wrap; gap: 14px; }
.sb .sb-tin-wrap { position: relative; display: flex; align-items: center; flex: 1 1 260px; max-width: 520px; }
.sb .sb-tin-wrap svg { position: absolute; left: 13px; color: rgba(255, 255, 255, .35); pointer-events: none; }
.sb .sb-tin, .sb .sb-dsearch {
  width: 100%; height: 46px; padding: 0 14px 0 38px; border: 1px solid rgba(103, 89, 209, .32); border-radius: 10px;
  background: rgba(103, 89, 209, .08); color: var(--sb-bright); font: 700 14px/1 var(--lp-font); letter-spacing: 1.2px;
}
.sb .sb-tin::placeholder, .sb .sb-dsearch::placeholder { color: rgba(255, 255, 255, .32); font-weight: 400; letter-spacing: 0; }
.sb .sb-tin:focus, .sb .sb-dsearch:focus { border-color: var(--sb-p2); background: rgba(103, 89, 209, .12); }
.sb .sb-buildbtn, .sb .sb-gobtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 22px; cursor: pointer;
  border: 1px solid rgba(167, 139, 250, .55); border-radius: 10px; color: #fff; font: 800 14px/1 var(--lp-font);
  background: linear-gradient(135deg, rgba(103, 89, 209, .75), rgba(129, 140, 248, .6)); box-shadow: 0 4px 18px rgba(103, 89, 209, .3);
}
.sb .sb-buildbtn:hover, .sb .sb-gobtn:hover { background: linear-gradient(135deg, rgba(103, 89, 209, .95), rgba(129, 140, 248, .8)); }
.sb .sb-tnote, .sb .sb-dnote { min-height: 1.4em; margin-top: 8px; color: var(--sb-amber); font-size: 12.5px; }
.sb .sb-tchips { display: flex; flex-wrap: wrap; gap: 10px; }
.sb .sb-tchip {
  padding: 8px 16px; cursor: pointer; border: 1px solid rgba(103, 89, 209, .35); border-radius: 999px;
  background: rgba(14, 14, 30, .9); color: var(--sb-muted); font: 500 12.5px/1.2 var(--lp-font); letter-spacing: .3px;
}
.sb .sb-tchip b { color: #fff; font-weight: 800; letter-spacing: .6px; }
.sb .sb-tchip:hover { border-color: var(--sb-p2); color: var(--sb-p3); }
.sb .sb-tfoot { margin-top: 12px; color: #8f8ab3; font-size: 12px; }

/* ================= detail ================= */
.sb .sb-dhead {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px;
  overflow: hidden; padding: 18px 22px 16px 28px; border: 1px solid rgba(103, 89, 209, .4); border-radius: 16px;
  background: var(--sb-card); box-shadow: 0 4px 40px rgba(0, 0, 0, .55);
}
.sb .sb-dhead::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: linear-gradient(180deg, #c4b5fd, #6759d1 55%, #38bdf8); }
.sb .sb-dhead-l { display: flex; align-items: center; gap: 16px; }
.sb .sb-dticker {
  font: 900 30px/1 var(--sb-font); letter-spacing: .5px; outline: none;
  background: linear-gradient(105deg, #e2deff, #a78bfa 50%, #818cf8); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.sb .sb-dmeta { display: flex; flex-direction: column; gap: 4px; }
.sb .sb-dprice { color: var(--sb-bright); font: 800 20px/1.1 var(--sb-font); font-variant-numeric: tabular-nums; }
.sb .sb-dbadge {
  width: fit-content; padding: 2px 10px; border: 1px solid rgba(103, 89, 209, .4); border-radius: 20px; background: rgba(103, 89, 209, .15);
  color: var(--sb-p2); font-size: 10px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase;
}
.sb .sb-dhead-r { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sb .sb-dgo { display: flex; gap: 8px; }
.sb .sb-tin-wrap--sm { flex: 0 1 200px; }
.sb .sb-dsearch, .sb .sb-tin-wrap--sm .sb-fake-in { height: 40px; font-size: 13px; }
.sb .sb-gobtn { height: 40px; padding: 0 18px; font-size: 13px; }
.sb .sb-dnote { flex-basis: 100%; min-height: 0; margin: 0; }
.sb .sb-dnote:empty { display: none; }
.sb .sb-fake { width: 200px; }
.sb .sb-fake-in {
  display: flex; align-items: center; width: 100%; padding: 0 14px 0 34px; border: 1px solid rgba(103, 89, 209, .28); border-radius: 10px;
  background: rgba(103, 89, 209, .08); color: rgba(255, 255, 255, .3);
}

/* expiration (.sd-expiry-card) */
.sb .sb-exp { padding: 14px 20px 16px; }
.sb .sb-exp-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.sb .sb-days {
  padding: 5px 16px; border: 1px solid rgba(103, 89, 209, .45); border-radius: 20px; background: rgba(103, 89, 209, .18);
  color: var(--sb-p2); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.sb .sb-tl-wrap { overflow-x: auto; overflow-y: hidden; padding-bottom: 6px; scrollbar-width: thin; scrollbar-color: #6759d1 transparent; }
.sb .sb-tl { display: flex; gap: 5px; width: max-content; }
.sb .sb-mgroup { display: flex; flex-direction: column; }
.sb .sb-mlabel {
  padding: 6px 12px; border: 1px solid rgba(103, 89, 209, .25); border-bottom: 0; border-radius: 10px 10px 0 0;
  background: rgba(103, 89, 209, .14); color: var(--sb-p2); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-align: center; text-transform: uppercase;
}
.sb .sb-mrow { display: flex; gap: 2px; }
.sb .sb-date, .sb .sb-solo {
  cursor: pointer; border: 1px solid rgba(103, 89, 209, .22); background: rgba(103, 89, 209, .05);
  color: #c4c2d8; font-family: var(--lp-font); user-select: none;
}
.sb .sb-date { display: block; min-width: 46px; padding: 11px 6px; border-radius: 0 0 8px 8px; font-size: 16px; font-weight: 800; text-align: center; }
.sb .sb-solo { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-width: 64px; padding: 9px 12px; border-radius: 10px; }
.sb-solo-m { color: #9a90ea; font-size: 9px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; line-height: 1; white-space: nowrap; }
.sb-solo-d { font-size: 18px; font-weight: 900; line-height: 1; font-variant-numeric: tabular-nums; }
.sb .sb-date:hover, .sb .sb-solo:hover { border-color: rgba(103, 89, 209, .55); background: rgba(103, 89, 209, .2); }
.sb .sb-date[aria-pressed="true"], .sb .sb-solo[aria-pressed="true"], .sb .sb-date.is-on {
  border-color: var(--sb-p2); background: rgba(103, 89, 209, .42); color: #fff; box-shadow: 0 0 14px rgba(103, 89, 209, .35);
}
.sb .sb-solo[aria-pressed="true"] .sb-solo-m { color: var(--sb-p3); }

/* legs + strike range (.sd-control-row) */
.sb .sb-ctrl { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: 10px; }
.sb .sb-side { display: flex; flex-direction: column; gap: 12px; padding: 16px; overflow: visible; }
.sb .sb-side-hd { margin-bottom: 2px; }
.sb .sb-side-t { display: inline-block; padding: 5px 14px; border-radius: 20px; font-size: 12px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
.sb .sb-side-t--put { color: var(--sb-red); background: rgba(248, 113, 113, .1); border: 1px solid rgba(248, 113, 113, .3); }
.sb .sb-side-t--call { color: var(--sb-green); background: rgba(74, 222, 128, .08); border: 1px solid rgba(74, 222, 128, .28); }
.sb .sb-noleg { padding: 20px 0; color: #8b82e0; font-size: 12px; text-align: center; }
.sb .sb-leg {
  display: flex; align-items: center; gap: 8px; min-height: 58px; padding: 6px 10px 6px 12px; border-radius: 11px;
  border: 1px solid rgba(103, 89, 209, .18); border-left: 3px solid rgba(103, 89, 209, .5); background: rgba(10, 10, 26, .5);
}
.sb .sb-leg--sell { border-left-color: var(--sb-red); background: rgba(248, 113, 113, .035); }
.sb .sb-leg--buy { border-left-color: var(--sb-green); background: rgba(74, 222, 128, .035); }
.sb .sb-leg-n { flex: none; width: 32px; color: var(--sb-p2); font-size: 9px; font-weight: 900; letter-spacing: 1px; line-height: 1.35; text-align: center; text-transform: uppercase; }
.sb .sb-leg--sell .sb-leg-n { color: var(--sb-red); }
.sb .sb-leg--buy .sb-leg-n { color: var(--sb-green); }
.sb .sb-leg-b { display: grid; flex: 1; grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1.15fr) minmax(76px, .95fr); align-items: center; gap: 6px; min-width: 0; }
.sb .sb-lbox {
  display: flex; flex-direction: column; align-items: center; gap: 1px; min-width: 0; padding: 4px 4px; border-radius: 8px;
  background: rgba(103, 89, 209, .08); border: 1px solid rgba(103, 89, 209, .18);
}
.sb .sb-leg--sell .sb-lbox { background: rgba(248, 113, 113, .07); border-color: rgba(248, 113, 113, .2); }
.sb .sb-leg--buy .sb-lbox { background: rgba(74, 222, 128, .06); border-color: rgba(74, 222, 128, .2); }
.sb .sb-ll { color: #9a90ea; font-size: 9px; font-weight: 800; letter-spacing: .9px; text-transform: uppercase; white-space: nowrap; }
.sb .sb-leg--sell .sb-ll { color: rgba(248, 113, 113, .85); }
.sb .sb-leg--buy .sb-ll { color: rgba(74, 222, 128, .85); }
.sb .sb-ll--q { color: #9c98bd !important; }
.sb .sb-lv { max-width: 100%; overflow: hidden; color: var(--sb-green); font-size: 13.5px; font-weight: 900; font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.sb .sb-lv--t { color: var(--sb-text); }
.sb .sb-qty { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.sb .sb-qstep { display: flex; height: 28px; }
.sb .sb-qbtn {
  display: flex; align-items: center; justify-content: center; width: 22px; height: 28px; padding: 0; cursor: pointer;
  border: 1px solid rgba(103, 89, 209, .3); background: rgba(103, 89, 209, .14); color: var(--sb-p2); font: 900 14px/1 var(--lp-font); user-select: none;
}
.sb .sb-qbtn:first-child { border-radius: 5px 0 0 5px; border-right: 0; }
.sb .sb-qbtn:last-child { border-radius: 0 5px 5px 0; border-left: 0; }
.sb .sb-qbtn:hover { background: rgba(103, 89, 209, .32); color: var(--sb-bright); }
.sb .sb-qin {
  display: flex; align-items: center; justify-content: center; width: 34px; height: 28px; padding: 0; border: 1px solid rgba(103, 89, 209, .3);
  border-left: 0; border-right: 0; border-radius: 0; background: rgba(103, 89, 209, .08); color: #fff;
  font: 900 13px/1 var(--lp-font); text-align: center; -moz-appearance: textfield; appearance: textfield;
}
.sb .sb-qin::-webkit-outer-spin-button, .sb .sb-qin::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sb .sb-swrap { position: relative; display: block; min-width: 0; }
.sb .sb-swrap::after {
  content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; margin-top: -5px; pointer-events: none;
  border-right: 2px solid var(--sb-p2); border-bottom: 2px solid var(--sb-p2); transform: rotate(45deg); opacity: .75;
}
.sb .sb-ssel {
  display: block; width: 100%; height: 36px; padding: 0 24px 0 10px; cursor: pointer; border: 1px solid rgba(103, 89, 209, .3); border-radius: 9px;
  background: rgba(103, 89, 209, .1); color: var(--sb-p3); font: 800 13px/34px var(--lp-font); -webkit-appearance: none; appearance: none;
}
.sb .sb-ssel:hover { border-color: var(--sb-p2); background: rgba(103, 89, 209, .18); }
.sb .sb-ssel option { background: #0e0e1e; color: var(--sb-p3); }

/* strike range (.strike-visualizer). A marker is a full-width layer moved by translateX(%), so
   it moves on transform only; its handle (the slider) sits at the layer's left edge. */
.sb .sb-vis { display: flex; flex-direction: column; padding: 16px 20px; }
.sb .sb-vis-hd { margin-bottom: 6px; }
.sb .sb-strikes { position: relative; flex: 1; min-height: 80px; padding: 30px 0 4px; }
.sb .sb-scale {
  position: relative; height: 80px; border: 1px solid rgba(103, 89, 209, .22); border-radius: 12px;
  background: linear-gradient(to right, rgba(248, 113, 113, .07) 0 25%, rgba(103, 89, 209, .04) 25% 75%, rgba(74, 222, 128, .07) 75% 100%);
}
.sb .sb-mk { position: absolute; inset: 0; pointer-events: none; }
.sb .sb-mk-h { position: absolute; left: -12px; top: 0; width: 24px; height: 80px; pointer-events: auto; cursor: grab; touch-action: none; outline: none; border-radius: 6px; }
.sb .sb-mk-h--spot { cursor: default; pointer-events: none; }
.sb .sb-mk-h:focus-visible { box-shadow: 0 0 0 2px var(--lp-accent, #c4a3ff); }
.sb .sb-mk-h.is-drag { cursor: grabbing; }
.sb .sb-mk-line { position: absolute; left: 11px; top: 0; width: 2px; height: 80px; background: currentColor; opacity: .85; }
.sb .sb-mk-l {
  position: absolute; left: 12px; bottom: -26px; padding: 3px 8px; border-radius: 5px; transform: translateX(-50%);
  font-size: 10.5px; font-weight: 800; letter-spacing: .3px; white-space: nowrap; color: #fff; background: rgba(248, 113, 113, .9);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35);
}
.sb .sb-mk-l--top { top: -26px; bottom: auto; }
.sb .sb-mk--sellPut { color: var(--sb-red); }
.sb .sb-mk--buyPut { color: #fca5a5; }
.sb .sb-mk--buyCall { color: #86efac; }
.sb .sb-mk--sellCall { color: var(--sb-green); }
.sb .sb-mk--buyCall .sb-mk-l, .sb .sb-mk--sellCall .sb-mk-l { background: rgba(74, 222, 128, .9); color: #0b0f1e; }
.sb .sb-mk-h.is-drag .sb-mk-l, .sb .sb-mk-h:focus-visible .sb-mk-l { box-shadow: 0 0 0 2px #fff, 0 4px 14px rgba(0, 0, 0, .5); }
.sb .sb-mk--spot { z-index: 2; color: #60a5fa; }
.sb .sb-mk--spot .sb-mk-line { top: -5px; width: 2.5px; height: 90px; }
.sb .sb-spot-l {
  position: absolute; left: 12px; top: 50%; padding: 4px 11px; border-radius: 7px; transform: translate(-50%, -50%);
  background: var(--sb-blue); color: #fff; font-size: 11px; font-weight: 800; white-space: nowrap; box-shadow: 0 0 14px rgba(59, 130, 246, .4);
}
.sb .sb-axis { display: flex; justify-content: space-between; margin-top: 34px; padding: 0 4px; color: #9c98bd; font-size: 10.5px; font-variant-numeric: tabular-nums; }
.sb .sb-vis-tip { margin-top: 8px; color: #8f8ab3; font-size: 11.5px; }

/* metrics (.sd-metrics-card) */
.sb .sb-met { padding: 0; }
.sb .sb-band { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.sb .sb-band + .sb-band { border-top: 1px solid rgba(103, 89, 209, .18); }
.sb .sb-band-l {
  display: flex; grid-column: 1 / -1; align-items: center; gap: 8px; padding: 9px 20px;
  border-bottom: 1px solid rgba(103, 89, 209, .16); background: rgba(103, 89, 209, .08);
  color: #8b82e0; font-size: 11px; font-weight: 900; letter-spacing: 1.8px; text-transform: uppercase;
}
.sb .sb-mi { display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 15px 18px; border-right: 1px solid rgba(103, 89, 209, .12); }
.sb .sb-mi:last-child { border-right: 0; }
.sb .sb-ml { color: #8b82e0; font-size: 10px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; white-space: nowrap; }
.sb .sb-mv { overflow: hidden; color: var(--sb-bright); font: 900 22px/1.1 var(--sb-font); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.sb .sb-mv--sm { font-size: 15.5px; font-weight: 800; white-space: normal; }
.sb .sb-mv.is-pos { color: var(--sb-green); }
.sb .sb-mv.is-neg { color: var(--sb-red); }

/* P/L card (.sd-heatmap-card) */
.sb .sb-heat { padding: 16px 18px 18px; }
.sb .sb-heat-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.sb .sb-heat-l { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.sb .sb-tabs, .sb .sb-vtog { display: flex; gap: 3px; padding: 3px; border-radius: 10px; background: rgba(103, 89, 209, .08); }
.sb .sb-tab, .sb .sb-vbtn {
  display: inline-flex; align-items: center; gap: 5px; padding: 7px 14px; cursor: pointer; border: 1px solid transparent; border-radius: 8px;
  background: transparent; color: #9a90ea; font: 800 12px/1.2 var(--lp-font); letter-spacing: .8px; text-transform: uppercase; white-space: nowrap;
}
.sb .sb-tab:hover, .sb .sb-vbtn:hover { color: var(--sb-p3); }
.sb .sb-tab[aria-selected="true"], .sb .sb-vbtn[aria-pressed="true"], .sb .sb-tab.is-on, .sb .sb-vbtn.is-on {
  border-color: rgba(103, 89, 209, .45); background: rgba(103, 89, 209, .38); color: var(--sb-p3); box-shadow: 0 2px 10px rgba(103, 89, 209, .25);
}
.sb .sb-sliders { display: flex; flex-wrap: wrap; gap: 10px; }
.sb .sb-sl { display: flex; flex-direction: column; gap: 8px; min-width: 150px; padding: 8px 12px; border: 1px solid rgba(103, 89, 209, .22); border-radius: 10px; background: rgba(103, 89, 209, .08); }
.sb .sb-sl-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sb .sb-sl label, .sb .sb-sl-n { color: #9a90ea; font-size: 10px; font-weight: 900; letter-spacing: 1.5px; text-transform: uppercase; }
.sb .sb-sl-v { color: var(--sb-p3); font-size: 12px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sb .sb-range, .sb .sb-fake-range {
  display: block; width: 100%; height: 4px; margin: 6px 0; padding: 0; border-radius: 2px; cursor: pointer; -webkit-appearance: none; appearance: none;
  background: linear-gradient(to right, #a78bfa var(--pct, 40%), rgba(103, 89, 209, .22) var(--pct, 40%));
}
.sb .sb-range::-webkit-slider-thumb {
  width: 16px; height: 16px; border: 2px solid rgba(8, 8, 20, .9); border-radius: 50%; -webkit-appearance: none; appearance: none;
  background: linear-gradient(135deg, #c4b5fd, #a78bfa); box-shadow: 0 0 0 2px rgba(167, 139, 250, .35);
}
.sb .sb-range::-moz-range-thumb {
  width: 14px; height: 14px; border: 2px solid rgba(8, 8, 20, .9); border-radius: 50%;
  background: linear-gradient(135deg, #c4b5fd, #a78bfa); box-shadow: 0 0 0 2px rgba(167, 139, 250, .35);
}
.sb .sb-range:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 6px; }
.sb .sb-fake-range { position: relative; cursor: default; }

.sb .sb-twrap { max-width: 100%; overflow-x: auto; border-radius: 10px; scrollbar-width: thin; scrollbar-color: #6759d1 transparent; }
.sb .sb-ht { width: 100%; min-width: 980px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.sb .sb-ht th, .sb .sb-ht td { white-space: nowrap; }
.sb .sb-ht thead tr:first-child th {
  padding: 9px 8px; border-right: 1px solid rgba(103, 89, 209, .2); border-bottom: 1px solid rgba(103, 89, 209, .28);
  background: rgba(103, 89, 209, .22); color: var(--sb-p3); font-size: 10.5px; font-weight: 900; letter-spacing: 1.4px; text-transform: uppercase;
}
.sb .sb-ht thead tr:first-child .sb-ht-corner { background: rgba(103, 89, 209, .1); color: #9a90ea; text-align: left; padding-left: 14px; }
.sb .sb-ht thead tr:last-child th {
  padding: 5px; border-right: 1px solid rgba(103, 89, 209, .1); border-bottom: 2px solid rgba(103, 89, 209, .35);
  background: rgba(103, 89, 209, .1); color: #a9a5cc; font-size: 10.5px; font-weight: 700;
}
.sb .sb-ht td {
  min-width: 46px; padding: 5px; border-right: 1px solid rgba(103, 89, 209, .08); border-bottom: 1px solid rgba(103, 89, 209, .07);
  color: var(--sb-text); font-size: 12px; font-weight: 700; text-align: center;
}
.sb .sb-ht td.is-g { color: #e2faf0; }
.sb .sb-ht td.is-r { color: #ffe4e4; }
.sb .sb-ht tbody th {
  min-width: 82px; padding: 6px 12px; border-right: 2px solid rgba(103, 89, 209, .32); border-bottom: 1px solid rgba(103, 89, 209, .07);
  background: rgba(103, 89, 209, .1); text-align: left;
}
.sb-ht-p { display: block; color: var(--sb-text); font-size: 12px; font-weight: 900; }
.sb-ht-pc { display: block; color: #a9a5cc; font-size: 10px; font-weight: 800; }
.sb-ht-pc.is-pos { color: var(--sb-green); }
.sb-ht-pc.is-neg { color: var(--sb-red); }
.sb .sb-ht .is-sep { border-right: 2px solid rgba(103, 89, 209, .26); }
.sb .sb-ht tr.is-cur td, .sb .sb-ht tr.is-cur th { border-top: 1px solid rgba(167, 139, 250, .5); border-bottom: 1px solid rgba(167, 139, 250, .5); }
.sb .sb-ht tr.is-cur th { background: rgba(167, 139, 250, .22); }

.sb .sb-gwrap { position: relative; width: 100%; margin: 0; }
.sb .sb-canvas { display: block; width: 100%; border-radius: 10px; cursor: crosshair; touch-action: pan-y; }
.sb .sb-canvas:focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.sb .sb-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 10px 4px 0; }
.sb .sb-lg { display: inline-flex; align-items: center; gap: 6px; color: #a9a5cc; font-size: 10.5px; font-weight: 800; letter-spacing: .8px; text-transform: uppercase; }
.sb .sb-lg i { width: 22px; height: 2px; border-radius: 2px; }
.sb .sb-lg-today { background: rgba(129, 140, 248, .7); }
.sb .sb-lg-exp { height: 3px !important; background: linear-gradient(to right, rgba(74, 222, 128, .9) 50%, rgba(248, 113, 113, .9) 50%); }
.sb .sb-lg-be { height: 0 !important; border-top: 2px dashed rgba(6, 182, 212, .85); }

/* the static poster of the graph */
.sb-poster { display: block; width: 100%; height: auto; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.sb-p-grid { stroke: rgba(103, 89, 209, .12); stroke-dasharray: 4 4; }
.sb-p-y, .sb-p-x { fill: rgba(169, 165, 204, .85); font-size: 10px; }
.sb-p-yt { fill: rgba(169, 165, 204, .7); font-size: 9px; }
.sb-p-zero { stroke: rgba(255, 255, 255, .18); stroke-width: 1.5; stroke-dasharray: 6 4; }
.sb-p-spot { stroke: rgba(167, 139, 250, .45); stroke-dasharray: 4 4; }
.sb-p-spotl { fill: #a78bfa; font-size: 10px; font-weight: 700; }
.sb-p-fup { fill: rgba(74, 222, 128, .13); }
.sb-p-fdn { fill: rgba(248, 113, 113, .13); }
.sb-p-be { stroke: rgba(6, 182, 212, .75); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sb-p-today { fill: none; stroke: rgba(129, 140, 248, .55); stroke-width: 1.5; stroke-linejoin: round; }
.sb-p-up, .sb-p-dn { fill: none; stroke-width: 2.5; stroke-linecap: round; }
.sb-p-up { stroke: rgba(74, 222, 128, .95); }
.sb-p-dn { stroke: rgba(248, 113, 113, .95); }
.sb-p-hover path { stroke: rgba(255, 255, 255, .25); }
.sb-p-hover circle { stroke: rgba(255, 255, 255, .85); stroke-width: 1.5; }
.sb-p-dt { fill: rgba(129, 140, 248, .55); }
.sb-p-de { fill: rgba(74, 222, 128, .95); }
.sb-p-hover rect { fill: rgba(10, 10, 28, .93); stroke: rgba(103, 89, 209, .55); }
.sb-p-hover text { font-size: 11px; }
.sb-p-tt1 { fill: #e2e8f0; font-weight: 700; }
.sb-p-tt2 { fill: rgba(129, 140, 248, .95); }
.sb-p-tt3 { fill: rgba(74, 222, 128, .95); }

/* press feedback during the tour */
.sb .is-press { transform: scale(.96); }

/* ---- controls and footer ---- */
.sb-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--lp-sp-3) var(--lp-sp-5); margin-top: var(--lp-sp-4); }
.sb-play { display: flex; gap: var(--lp-sp-2); }
.sb-ico-play, .is-paused .sb-ico-pause { display: none; }
.is-paused .sb-ico-play { display: inline; }
.sb .sb-sample-note { display: inline-flex; flex-wrap: wrap; align-items: center; gap: var(--lp-sp-2); color: var(--lp-muted); font-size: var(--lp-fs-xs); }
.sb-foot { display: flex; flex-direction: column; align-items: center; gap: var(--lp-sp-4); margin-top: var(--lp-sp-6); text-align: center; }
.sb-ctas { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--lp-sp-3); }
.sb .sb-foot-note { max-width: 62ch; color: var(--lp-muted); font-size: var(--lp-fs-sm); }
.sb .sb-foot-note a { color: var(--lp-accent); font-weight: 600; }
.sb .sb-foot-note a:hover { color: var(--lp-text); text-decoration: underline; }

/* visible focus on everything interactive in the app */
.sb .sb-app :focus-visible { outline: 2px solid var(--lp-accent); outline-offset: 2px; }
.sb .sb-app [tabindex="-1"]:focus { outline: none; }

/* ---- motion (transform and opacity only) ---- */
@keyframes sb-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes sb-hint-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translateX(-50%); } }
@media (prefers-reduced-motion: no-preference) {
  .sb .sb-fbtn, .sb .sb-cbtn, .sb .sb-tchip, .sb .sb-buildbtn, .sb .sb-gobtn, .sb .sb-back, .sb .sb-tab, .sb .sb-vbtn,
  .sb .sb-date, .sb .sb-solo, .sb .sb-qbtn, .sb .sb-step { transition: transform .18s var(--lp-ease), opacity .18s var(--lp-ease); }
  .sb .sb-mk-l { transition: transform .15s var(--lp-ease); }
  .sb .sb-mk-h.is-drag .sb-mk-l { transform: translateX(-50%) scale(1.08); }
}
.sb.is-paused *, .sb.is-paused *::before, .sb.is-paused *::after { animation-play-state: paused !important; }
.sb-still .sb-scr, .sb-still .sb-card, .sb-still .sb-hint { animation: none !important; }

/* ---- narrower ---- */
/* The three leg panels need about 1360px of page to sit side by side; below that the two sides
   share a row and the strike range takes the next one. */
@media (max-width: 1359.98px) {
  .sb .sb-ctrl { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .sb .sb-vis { grid-column: 1 / -1; grid-row: 2; }
}
@media (max-width: 1179.98px) {
  .sb .sb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sb .sb-mv { font-size: 19px; }
  .sb .sb-mv--sm { font-size: 15px; }
}
@media (max-width: 899.98px) {
  .sb .sb-ctrl { grid-template-columns: minmax(0, 1fr); }
  .sb .sb-vis { grid-row: auto; }
  .sb .sb-band { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sb .sb-mi:nth-child(4) { border-right: 0; }   /* the third column (child 1 is the label) */
  .sb .sb-mi:nth-child(n+5) { border-top: 1px solid rgba(103, 89, 209, .12); }
  .sb .sb-heat-top { flex-direction: column; align-items: stretch; }
  .sb .sb-sliders .sb-sl { flex: 1 1 140px; }
}
@media (max-width: 639.98px) {
  .sb { --sb-h: clamp(520px, 74vh, 680px); }
  .sb .sb-app { padding: 10px; }
  .sb-apphead { height: 44px; padding: 0 14px; }
  .sb-apphead-t { font-size: 16px; }
  .sb-apphead-s { display: none; }
  .sb .sb-grid { grid-template-columns: minmax(0, 1fr); }
  .sb .sb-hcard, .sb .sb-dhead { padding: 16px 16px 14px 20px; }
  .sb .sb-hcard-t { font-size: 19px; }
  .sb .sb-stat { flex: 1 1 calc(50% - 5px); min-width: 0; }
  .sb .sb-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* the band label is child 1, so the left-hand column is the even children */
  .sb .sb-mi { padding: 12px 14px; border-top: 1px solid rgba(103, 89, 209, .12); border-right: 0; }
  .sb .sb-mi:nth-child(even) { border-right: 1px solid rgba(103, 89, 209, .12); }
  .sb .sb-mi:nth-child(-n+3) { border-top: 0; }
  .sb .sb-mv { font-size: 18px; }
  .sb .sb-mv--sm { font-size: 14px; }
  .sb .sb-leg { flex-wrap: wrap; }
  .sb .sb-leg-b { grid-template-columns: minmax(0, 1fr) 80px minmax(0, 1fr); }
  .sb .sb-swrap { grid-column: 1 / -1; }
  .sb .sb-dticker { font-size: 24px; }
  .sb .sb-dprice { font-size: 17px; }
  .sb .sb-dhead-r, .sb .sb-dgo { width: 100%; }
  .sb .sb-tin-wrap--sm { flex: 1 1 auto; max-width: none; }
  .sb .sb-tabs, .sb .sb-vtog { flex-wrap: wrap; }
  .sb .sb-tab, .sb .sb-vbtn { padding: 7px 10px; font-size: 11px; }
  .sb .sb-hint { bottom: 12px; max-width: calc(100% - 24px); white-space: nowrap; font-size: 12px; }
  .sb-controls { justify-content: center; }
  .sb-sample-note { justify-content: center; text-align: center; }
  .sb .sb-step { padding-right: var(--lp-sp-3); font-size: var(--lp-fs-xs); }
  .sb .sb-steps li + li::before { width: 6px; margin-right: var(--lp-sp-1); }
}
@media (max-width: 479.98px) {
  .sb-ctas, .sb-ctas .lp-btn { width: 100%; }
  .sb .sb-steps { border-radius: var(--lp-r); }
  .sb .sb-step-n { width: 20px; height: 20px; }
  .sb .sb-url { font-size: 11px; }
}