/* Pricing & compare page. Everything is scoped under .sbpx. Change the accent in one place. */
.sbpx {
  --sbpx-navy: #0F1B2D;
  --sbpx-accent: #C2410C;
  --sbpx-peach: #FFF4E8;
  --sbpx-gold: #F2B66D;
  --sbpx-muted: #51607A;
  --sbpx-line: #DCE2EA;
  --sbpx-bg: #F5F7FA;
  --sbpx-white: #fff;
  font-family: "Barlow", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--sbpx-navy);
  background: var(--sbpx-bg);
  font-size: 1.0625rem;
  line-height: 1.55;
}
.sbpx *, .sbpx *::before, .sbpx *::after { box-sizing: border-box; }
.sbpx h1, .sbpx h2, .sbpx h3, .sbpx h4 { font-family: "Barlow Condensed", "Barlow", sans-serif; color: var(--sbpx-navy); line-height: 1.1; margin: 0 0 .4em; letter-spacing: .01em; }
.sbpx h1 { font-size: clamp(2.4rem, 8vw, 4.2rem); text-transform: uppercase; color: #fff; }
.sbpx h2 { font-size: clamp(1.9rem, 5vw, 2.8rem); text-transform: uppercase; }
.sbpx h3 { font-size: 1.5rem; }
.sbpx .sbpx-h3 { margin-top: 2.2rem; }
.sbpx p { margin: 0 0 1em; }
.sbpx a { color: var(--sbpx-accent); }
.sbpx :focus-visible { outline: 3px solid var(--sbpx-gold); outline-offset: 2px; }
.sbpx-wrap { width: min(1120px, 100% - 32px); margin: 0 auto; }
.sbpx-narrow { max-width: 760px; }
.sbpx-sr { position: absolute; left: -9999px; }
.sbpx-sec { padding: 56px 0; }
.sbpx-alt { background: var(--sbpx-white); }
.sbpx-sub { color: var(--sbpx-muted); max-width: 44em; }
.sbpx-note { color: var(--sbpx-muted); font-size: .95rem; }
.sbpx-eyebrow { color: var(--sbpx-gold); font-weight: 700; letter-spacing: .1em; text-transform: uppercase; font-size: .85rem; margin-bottom: .6em; }

/* buttons: 44px+ touch targets */
.sbpx-btn, .sbpx button { font-family: inherit; }
.sbpx-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 24px; background: var(--sbpx-accent); color: #fff !important; border: 2px solid var(--sbpx-accent); border-radius: 8px; font-weight: 700; font-size: 1rem; text-decoration: none; cursor: pointer; }
.sbpx-btn:hover { background: #9A3412; border-color: #9A3412; }
.sbpx-btn-ghost { background: transparent; color: var(--sbpx-accent) !important; }
.sbpx-btn-ghost:hover { background: var(--sbpx-peach); border-color: var(--sbpx-accent); }
.sbpx-hero .sbpx-btn-ghost { color: #fff !important; border-color: rgba(255,255,255,.7); }
.sbpx-hero .sbpx-btn-ghost:hover { background: rgba(255,255,255,.12); }

/* hero */
.sbpx-hero { background: var(--sbpx-navy); color: #fff; padding: 64px 0 56px; }
.sbpx-lead { font-size: 1.2rem; max-width: 36em; color: #E6ECF4; }
.sbpx-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 1.4em; }

/* calculator */
.sbpx-calc { background: var(--sbpx-white); border: 1px solid var(--sbpx-line); border-radius: 14px; padding: 20px; margin-top: 22px; }
.sbpx-inputs { display: grid; gap: 18px; }
.sbpx-field { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 4px 12px; }
.sbpx-field label { font-weight: 600; }
.sbpx-field output { font-family: "Barlow Condensed", sans-serif; font-size: 1.5rem; font-weight: 700; color: var(--sbpx-accent); }
.sbpx-field input[type=range] { grid-column: 1 / -1; width: 100%; height: 44px; margin: 0; accent-color: var(--sbpx-accent); cursor: pointer; }
.sbpx-billing, .sbpx-toggle { display: inline-flex; flex-wrap: wrap; border: 2px solid var(--sbpx-navy); border-radius: 10px; overflow: hidden; margin: 22px 0 6px; }
.sbpx-toggle { margin-top: 12px; }
.sbpx-billing button, .sbpx-toggle button { min-height: 44px; padding: 8px 18px; background: #fff; color: var(--sbpx-navy); border: 0; font-weight: 600; font-size: 1rem; cursor: pointer; }
.sbpx-billing button[aria-pressed=true], .sbpx-toggle button[aria-pressed=true] { background: var(--sbpx-navy); color: #fff; }
.sbpx-plans { border: 0; padding: 0; margin: 18px 0 0; min-width: 0; }
.sbpx-plans legend { font-weight: 600; padding: 0; margin-bottom: 8px; }
.sbpx-choices { display: grid; gap: 10px; }
.sbpx-choice { position: relative; display: grid; gap: 2px; padding: 14px 16px; border: 2px solid var(--sbpx-line); border-radius: 12px; cursor: pointer; min-height: 44px; background: #fff; }
.sbpx-choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.sbpx-choice.is-on { border-color: var(--sbpx-accent); background: var(--sbpx-peach); }
.sbpx-choice:focus-within { outline: 3px solid var(--sbpx-gold); outline-offset: 2px; }
.sbpx-choice-name { font-family: "Barlow Condensed", sans-serif; font-size: 1.4rem; font-weight: 700; }
.sbpx-choice-cost { font-size: 1.6rem; font-weight: 700; }
.sbpx-choice-sub { color: var(--sbpx-muted); font-size: .9rem; }
.sbpx-badge { justify-self: start; background: var(--sbpx-gold); color: var(--sbpx-navy); font-weight: 700; font-size: .8rem; padding: 2px 10px; border-radius: 999px; }

.sbpx-summary { display: grid; gap: 14px; margin-top: 20px; padding: 18px; background: var(--sbpx-navy); color: #fff; border-radius: 12px; }
.sbpx-summary .sbpx-label { display: block; font-size: .85rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sbpx-gold); font-weight: 700; }
.sbpx-summary strong { display: block; font-family: "Barlow Condensed", sans-serif; font-size: 2.4rem; line-height: 1.05; }
.sbpx-summary .sbpx-keep strong { font-size: 3.2rem; }
.sbpx-summary .sbpx-sub { color: #CBD5E3; font-size: .9rem; }
.sbpx-nudge { margin: 0; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.2); font-weight: 600; }

/* comparison rows */
.sbpx-cmps { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 12px; }
.sbpx-cmp { border: 1px solid var(--sbpx-line); border-radius: 12px; padding: 14px 16px; background: #fff; }
.sbpx-cmp.is-me { border-color: var(--sbpx-accent); background: var(--sbpx-peach); }
.sbpx-cmp-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sbpx-cmp-name { font-weight: 700; }
.sbpx-cmp-keep strong { font-size: 1.3rem; }
.sbpx-bar { height: 12px; background: var(--sbpx-line); border-radius: 999px; margin: 10px 0 8px; overflow: hidden; }
.sbpx-bar span { display: block; height: 100%; background: var(--sbpx-accent); border-radius: 999px; }
.sbpx-cmp-foot { display: grid; gap: 4px; color: var(--sbpx-muted); font-size: .95rem; }
.sbpx-diff { color: var(--sbpx-navy); font-weight: 600; }
.sbpx-buys { margin: 10px 0 0; padding: 10px 12px; background: var(--sbpx-peach); border-left: 4px solid var(--sbpx-gold); border-radius: 6px; font-size: .95rem; }
.sbpx-buys-panel { margin-top: 22px; padding: 20px; background: var(--sbpx-peach); border: 2px solid var(--sbpx-gold); border-radius: 12px; }
.sbpx-buys-panel[hidden] { display: none; }
.sbpx-buys-panel ul { margin: 0; padding-left: 1.2em; }
.sbpx-buys-panel li { margin-bottom: .4em; }

/* plan cards */
.sbpx-cards { display: grid; gap: 18px; margin-top: 24px; }
.sbpx-card { position: relative; background: #fff; border: 1px solid var(--sbpx-line); border-radius: 14px; padding: 24px 20px; display: flex; flex-direction: column; }
.sbpx-card.is-popular { border: 3px solid var(--sbpx-accent); }
.sbpx-flag { position: absolute; top: -14px; left: 20px; background: var(--sbpx-accent); color: #fff; font-weight: 700; font-size: .85rem; padding: 3px 12px; border-radius: 999px; }
.sbpx-price { font-family: "Barlow Condensed", sans-serif; font-size: 3rem; font-weight: 700; line-height: 1; margin-bottom: .1em; }
.sbpx-price span { font-family: "Barlow", sans-serif; font-size: 1rem; font-weight: 500; color: var(--sbpx-muted); }
.sbpx-year { color: var(--sbpx-muted); font-size: .9rem; }
.sbpx-fee { padding: 10px 12px; background: var(--sbpx-peach); border-radius: 8px; }
.sbpx-feat { list-style: none; padding: 0; margin: 0 0 20px; flex: 1; }
.sbpx-feat li { position: relative; padding: 4px 0 4px 26px; }
.sbpx-feat li::before { content: "\2713"; position: absolute; left: 0; color: var(--sbpx-accent); font-weight: 700; }

/* fee ladder */
.sbpx-ladder { margin: 34px 0 10px; padding: 20px; background: #fff; border: 1px solid var(--sbpx-line); border-radius: 14px; }
.sbpx-ladder ol { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 12px; }
.sbpx-ladder li { display: grid; grid-template-columns: 78px 1fr 58px; gap: 10px; align-items: center; }
.sbpx-ladder-name { font-weight: 700; }
.sbpx-ladder-track { height: 22px; background: var(--sbpx-line); border-radius: 6px; overflow: hidden; }
.sbpx-ladder-track span { display: block; height: 100%; background: var(--sbpx-navy); border-radius: 6px; }
.sbpx-ladder li:nth-child(2) .sbpx-ladder-track span { background: var(--sbpx-accent); }
.sbpx-ladder-val { font-weight: 700; text-align: right; }

/* tables */
.sbpx-tablewrap { overflow-x: auto; margin: 18px 0; border: 1px solid var(--sbpx-line); border-radius: 12px; background: #fff; }
.sbpx-table { width: 100%; border-collapse: collapse; min-width: 520px; }
.sbpx-table caption { text-align: left; font-family: "Barlow Condensed", sans-serif; font-size: 1.3rem; font-weight: 700; padding: 12px 14px; }
.sbpx-table th, .sbpx-table td { padding: 11px 14px; border-top: 1px solid var(--sbpx-line); text-align: left; vertical-align: top; }
.sbpx-table thead th { background: var(--sbpx-navy); color: #fff; border-top: 0; }
.sbpx-table tr.is-ours { background: var(--sbpx-peach); }
.sbpx-table .v-keep { display: none; }
[data-show=keep] .sbpx-table .v-keep { display: inline; }
[data-show=keep] .sbpx-table .v-fee { display: none; }
.sbpx-matrix td.m-yes { color: #14532D; font-weight: 600; }
.sbpx-matrix td.m-no { color: #7F1D1D; }
.sbpx-matrix td.m-mid { color: var(--sbpx-muted); }
.sbpx-straight { margin-top: 24px; padding: 20px; background: var(--sbpx-peach); border-left: 6px solid var(--sbpx-accent); border-radius: 8px; }
.sbpx-straight ul { margin: 0; padding-left: 1.2em; }
.sbpx-straight li { margin-bottom: .5em; }

/* stack */
.sbpx-stack-grid { display: grid; gap: 16px; margin-top: 12px; }
.sbpx-stack-col { background: #fff; border: 1px solid var(--sbpx-line); border-radius: 12px; padding: 18px; }
.sbpx-stack-col.is-ours { border: 3px solid var(--sbpx-accent); background: var(--sbpx-peach); }
.sbpx-stack-col ul { list-style: none; padding: 0; margin: 0; }
.sbpx-stack-col li { display: flex; justify-content: space-between; gap: 14px; padding: 8px 0; border-bottom: 1px solid var(--sbpx-line); }
.sbpx-total { display: flex; justify-content: space-between; align-items: baseline; margin: 12px 0 0; font-weight: 700; }
.sbpx-total strong { font-family: "Barlow Condensed", sans-serif; font-size: 2.2rem; }
.sbpx-save { margin: 8px 0 0; font-weight: 600; }

/* FAQ */
.sbpx-faq { background: #fff; border: 1px solid var(--sbpx-line); border-radius: 10px; margin-bottom: 10px; }
.sbpx-faq summary { min-height: 44px; padding: 12px 16px; font-weight: 700; cursor: pointer; list-style-position: inside; }
.sbpx-faq p { padding: 0 16px; margin: 0 0 14px; color: var(--sbpx-muted); }

/* founding offer + form */
.sbpx-founding { background: var(--sbpx-navy); color: #fff; }
.sbpx-founding h2 { color: #fff; }
.sbpx-founding .sbpx-sub { color: #D5DEEA; }
.sbpx-form { background: #fff; color: var(--sbpx-navy); border-radius: 14px; padding: 22px; margin-top: 18px; }
.sbpx-form label { display: block; font-weight: 600; margin: 14px 0 4px; }
.sbpx-form input[type=text], .sbpx-form input[type=email], .sbpx-form input[type=tel], .sbpx-form select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid #8A97AB; border-radius: 8px; font: inherit; color: var(--sbpx-navy); background: #fff; }
.sbpx-form .sbpx-btn { margin-top: 18px; width: 100%; }
.sbpx-trap { position: absolute; left: -9999px; height: 0; overflow: hidden; }
.sbpx-alert { padding: 12px 16px; border-radius: 8px; margin-top: 14px; font-weight: 600; }
.sbpx-alert.ok { background: #DCFCE7; color: #14532D; }
.sbpx-alert.err { background: #FEE2E2; color: #7F1D1D; }

/* footnotes */
.sbpx-foot { padding: 32px 0 48px; font-size: .9rem; color: var(--sbpx-muted); }
.sbpx-foot ul { padding-left: 1.2em; }

/* wider screens */
@media (min-width: 720px) {
  .sbpx-sec { padding: 76px 0; }
  .sbpx-calc { padding: 32px; }
  .sbpx-inputs { grid-template-columns: 1fr 1fr; gap: 22px 36px; }
  .sbpx-choices { grid-template-columns: repeat(3, 1fr); }
  .sbpx-summary { grid-template-columns: 1.3fr 1fr 1fr; align-items: end; }
  .sbpx-nudge { grid-column: 1 / -1; }
  .sbpx-cmp-foot { grid-template-columns: 1fr auto; }
  .sbpx-cards { grid-template-columns: repeat(2, 1fr); }
  .sbpx-stack-grid { grid-template-columns: 1fr 1fr; }
  .sbpx-ladder li { grid-template-columns: 110px 1fr 70px; }
}
@media (min-width: 1040px) { .sbpx-cards { grid-template-columns: repeat(4, 1fr); } }
@media (prefers-reduced-motion: reduce) { .sbpx * { transition: none !important; animation: none !important; } }

/* value tiles */
.sbpx-values { display: grid; gap: 16px; margin-top: 26px; }
.sbpx-value { background: #fff; border: 1px solid var(--sbpx-line); border-top: 4px solid var(--sbpx-accent); border-radius: 12px; padding: 20px; }
.sbpx-value h3 { font-size: 1.35rem; }
.sbpx-value p { margin: 0; color: var(--sbpx-muted); }
.sbpx-value:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 720px) { .sbpx-values { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1040px) { .sbpx-values { grid-template-columns: repeat(3, 1fr); } }

/* coming soon strip */
.sbpx-soon { margin: 22px 0 0; padding: 16px 18px; background: var(--sbpx-peach); border: 2px dashed var(--sbpx-gold); border-radius: 12px; }
.sbpx-soon-tag { display: inline-block; background: var(--sbpx-navy); color: #fff; font-weight: 700; font-size: .8rem; text-transform: uppercase; letter-spacing: .06em; padding: 3px 10px; border-radius: 999px; margin-right: 6px; }

/* ---- Grover look: paper, blue, tape-measure yellow, Poppins + Inter ---- */
.sbpx {
  --sbpx-navy: #10243B;
  --sbpx-accent: #2A598F;
  --sbpx-yellow: #F2B01E;
  --sbpx-peach: #FFF4D1;
  --sbpx-gold: #F2B01E;
  --sbpx-muted: #5B6B80;
  --sbpx-line: #E4DFD3;
  --sbpx-bg: #F7F4EE;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}
.sbpx h1, .sbpx h2, .sbpx h3, .sbpx h4, .sbpx-price, .sbpx-choice-name, .sbpx-total strong, .sbpx-summary strong, .sbpx-field output, .sbpx-table caption { font-family: "Poppins", "Inter", sans-serif; letter-spacing: -.01em; }
.sbpx h1 { text-transform: none; font-size: clamp(2.1rem, 6vw, 3.4rem); line-height: 1.1; font-weight: 700; }
.sbpx h2 { text-transform: none; font-size: clamp(1.7rem, 4.2vw, 2.4rem); font-weight: 700; }
.sbpx h3 { font-weight: 600; }
.sbpx-price { font-size: 2.6rem; }
.sbpx-eyebrow { color: var(--sbpx-yellow); letter-spacing: .08em; }
.sbpx-hero { position: relative; overflow: hidden; padding: 72px 0 84px; background: radial-gradient(900px 420px at 88% 20%, #1F4670 0%, rgba(31,70,112,0) 70%), var(--sbpx-navy); }
/* tape-measure ticks along the bottom edge */
.sbpx-hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 22px; pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(242,176,30,.9) 0 2px, transparent 2px 16px) bottom / 100% 12px no-repeat,
    repeating-linear-gradient(90deg, rgba(242,176,30,.9) 0 2px, transparent 2px 64px) bottom / 100% 22px no-repeat,
    linear-gradient(rgba(242,176,30,.9), rgba(242,176,30,.9)) bottom / 100% 2px no-repeat; }
.sbpx-seal { position: absolute; right: -10px; top: 50%; width: 360px; height: 360px; transform: translateY(-50%) rotate(-6deg); filter: drop-shadow(0 22px 26px rgba(0,0,0,.45)); }
@media (max-width: 1100px) { .sbpx-seal { width: 280px; height: 280px; right: -30px; } }
@media (max-width: 900px) { .sbpx-seal { display: none; } }
.sbpx-hero .sbpx-wrap { position: relative; z-index: 1; }
.sbpx-hero h1 { max-width: 15em; }
.sbpx-btn { background: var(--sbpx-yellow); border-color: var(--sbpx-yellow); color: var(--sbpx-navy) !important; border-radius: 999px; font-family: "Poppins", sans-serif; font-weight: 600; }
.sbpx-btn:hover { background: #DB9A0C; border-color: #DB9A0C; }
.sbpx-btn-ghost { background: transparent; color: var(--sbpx-accent) !important; border-color: var(--sbpx-accent); }
.sbpx-btn-ghost:hover { background: rgba(42,89,143,.08); border-color: var(--sbpx-accent); }
.sbpx-hero .sbpx-btn-ghost { color: #fff !important; }
.sbpx-flag { background: var(--sbpx-yellow); color: var(--sbpx-navy); }
.sbpx-card.is-popular { border: 3px solid var(--sbpx-yellow); }
.sbpx-feat li::before { color: #8F6200; }
.sbpx-value { border-top-color: var(--sbpx-yellow); }
.sbpx-stack-col.is-ours { border-color: var(--sbpx-yellow); }
.sbpx-straight { border-left-color: var(--sbpx-yellow); }
.sbpx-ladder li:nth-child(2) .sbpx-ladder-track span { background: var(--sbpx-yellow); }
.sbpx-table thead th { background: var(--sbpx-accent); }
.sbpx-table tr.is-ours { background: var(--sbpx-peach); }
.sbpx-founding { background: var(--sbpx-navy); }
.sbpx-card, .sbpx-value, .sbpx-stack-col, .sbpx-faq, .sbpx-tablewrap, .sbpx-ladder, .sbpx-form { border-radius: 16px; }
.sbpx-faq summary { font-family: "Poppins", sans-serif; font-weight: 600; }
.sbpx a { color: var(--sbpx-accent); }
.sbpx-soon-tag { background: var(--sbpx-accent); }
.sbpx-compare{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px}.sbpx-buys-panel ul{margin:.4em 0 0;padding-left:1.2em}.sbpx-addons th small{color:var(--sbpx-muted);font-weight:400}

.sbpx-obo{grid-template-columns:repeat(auto-fit,minmax(250px,1fr))}.sbpx-obo-credit{font-size:.95rem;color:var(--sbpx-muted)}.sbpx-obo-head{font-family:"Poppins",sans-serif;font-weight:600;margin:.6em 0 .3em;color:var(--sbpx-accent)}

.sbpx-goes{margin:.7em 0 0;font-size:.95rem;color:var(--sbpx-muted)}.sbpx-goes strong{color:var(--sbpx-navy)}

.sbpx-obo-card h3{margin-bottom:.2em}
.sbpx-obo-credit{margin:0 0 14px}
.sbpx-obo-ours{margin-top:auto;background:#EAF0F7;border:1.5px solid var(--sbpx-accent);border-radius:12px;padding:14px 14px 10px}
.sbpx-obo-head{display:flex;align-items:center;gap:8px;margin:0 0 .5em!important;color:var(--sbpx-accent)!important;font-size:.95rem}
.sbpx-obo-head img{border-radius:6px;flex:none}
.sbpx-obo-ours ul{list-style:none;margin:0;padding:0}
.sbpx-obo-ours li{position:relative;padding:3px 0 3px 22px;font-size:.95rem}
.sbpx-obo-ours li::before{content:"+";position:absolute;left:4px;top:2px;font-weight:800;color:var(--sbpx-accent)}
.sbpx-goes{background:#EAF0F7;border-left:4px solid var(--sbpx-accent);border-radius:6px;padding:8px 12px;color:var(--sbpx-navy)}

.sbpx-tm{margin-top:1em;font-size:.9rem;color:var(--sbpx-muted)}

.sbpx-obo-cta{display:flex;flex-direction:row;justify-content:center;align-items:center;gap:26px;padding:26px 28px;background:var(--sbpx-navy);border-color:var(--sbpx-navy);color:#E6ECF4}
.sbpx-obo-cta h3{color:#fff;margin-bottom:.3em}
.sbpx-obo-cta p{color:#D5DEEA}
.sbpx-obo-badge{width:180px;height:180px;flex:none;transform:rotate(-6deg);filter:drop-shadow(0 16px 20px rgba(0,0,0,.45))}
.sbpx-obo-cta .sbpx-actions{margin:.6em 0 0}
.sbpx-obo-cta .sbpx-btn-ghost{color:#fff!important;border-color:rgba(255,255,255,.7)}
.sbpx-obo-cta .sbpx-btn-ghost:hover{background:rgba(255,255,255,.12)}
@media (min-width:1000px){.sbpx-obo-cta{grid-column:2 / -1}}
@media (max-width:760px){.sbpx-obo-cta{flex-direction:column;text-align:center}.sbpx-obo-cta .sbpx-actions{justify-content:center}}

@media (min-width:1000px){.sbpx-obo-cta h3{white-space:nowrap;font-size:clamp(.95rem,1.4vw,1.2rem)}.sbpx-obo-cta>div{min-width:0}}

/* tall CTA card: stack the button above the words so Grover can be big */
.sbpx-obo-cta{flex-direction:column;text-align:center;gap:18px;padding:30px 28px}
.sbpx-obo-cta .sbpx-actions{justify-content:center}
.sbpx-obo-badge{width:230px;height:230px}
@media (min-width:1000px){.sbpx-obo-cta h3{font-size:clamp(1.1rem,1.9vw,1.55rem)}}

/* All-in cost: Stripe and Grover shown together */
.sbpx-allin { padding: 12px 14px; background: var(--sbpx-peach); border-radius: 10px; margin: 0 0 14px; }
.sbpx-allin p { margin: 0; }
.sbpx-allin-head { font-weight: 700; margin-bottom: 6px !important; }
.sbpx-allin-list { margin: 0 0 8px; }
.sbpx-allin-list > div { display: flex; justify-content: space-between; gap: 10px; padding: 3px 0; }
.sbpx-allin-list dt, .sbpx-allin-list dd { margin: 0; }
.sbpx-allin-list .is-total { border-top: 1.5px solid var(--sbpx-navy); margin-top: 4px; padding-top: 6px; font-weight: 700; }
.sbpx-allin-list .is-total dd span { font-weight: 500; color: var(--sbpx-muted); }
.sbpx-allin-ach, .sbpx-allin-note { font-size: .88rem; color: var(--sbpx-muted); margin-top: 6px !important; }
.sbpx-allin-ach strong { color: inherit; }
.sbpx-legend { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 8px 0 0; font-size: .9rem; }
.sbpx-legend i, .sbpx-ladder-track .k-stripe, .sbpx-ladder-track .k-ours { display: inline-block; }
.sbpx-legend i { width: 14px; height: 14px; border-radius: 3px; vertical-align: -2px; margin-right: 6px; }
.k-stripe { background: var(--sbpx-navy); }
.k-ours { background: var(--sbpx-yellow, #F2B01E); }
.sbpx-ladder-track { display: flex; }
.sbpx-ladder-track span { height: 100%; border-radius: 0 !important; }
.sbpx-ladder li:nth-child(2) .sbpx-ladder-track span.k-stripe { background: var(--sbpx-navy); }
.sbpx-ladder li:nth-child(2) .sbpx-ladder-track span.k-ours { background: var(--sbpx-yellow, #F2B01E); }
.sbpx-ladder li { grid-template-columns: 78px 1fr 72px; }
.sbpx-ladder .sbpx-ladder-track span.k-stripe { background: var(--sbpx-navy); }
.sbpx-ladder .sbpx-ladder-track span.k-ours { background: var(--sbpx-yellow, #F2B01E); border-left: 2px solid #fff; }
