/* ─────────────────────────────────────────────────────────────────────────────
   BuiltOS pricing — the consolidated rate card, live.

   One building, one twin. You pay once to build it, then monthly to keep it, and
   you choose whether the twin is for Scope3D, Clickpad or both. The build fee is
   charged once per BUILDING, never once per product — which is the whole reason
   to turn both on in one go rather than mapping twice.

   Everything is scoped under .bo-pr so none of it can reach the theme. Colour
   comes from tokens defined twice: the bare block is the dark palette, because
   the theme treats dark as default and only stamps data-color-scheme="light"
   when a visitor picks light.
   ───────────────────────────────────────────────────────────────────────────── */

.bo-pr{
  /* Accent is the one thing that is NOT identical across the three sites: each carries its
     own brand. Everything reads --pr-accent-rgb, so a host restates that single triplet and
     every tint, ring, chip and button follows. Defaults to the BuiltOS green. */
  --pr-accent-rgb: var(--jkd-accent-rgb, 0, 255, 133);
  --pr-accent: rgb(var(--pr-accent-rgb));
  --pr-accent-ink:#06210f;
  --pr-s3d:#9d8bff;
  --pr-cp:#5ec8ff;
  --pr-ground:#0e0f11;
  --pr-raise:#16181b;
  --pr-sunk:#111315;
  --pr-line:rgba(255,255,255,.11);
  --pr-line-2:rgba(255,255,255,.22);
  --pr-ink:#ffffff;
  --pr-ink-2:rgba(255,255,255,.64);
  --pr-ink-3:rgba(255,255,255,.40);
  --pr-field:rgba(255,255,255,.04);
  --pr-shadow:0 30px 80px rgba(0,0,0,.45);
  --pr-mono:ui-monospace,SFMono-Regular,Menlo,monospace;
  color:var(--pr-ink);
}
/* Three hosts, three different theme systems, one widget. BuiltOS stamps
   data-color-scheme on :root, Clickpad toggles body.dark-mode, and scope3d.com is
   light-only — so the light palette is reachable by any of those routes and the dark
   palette wins back under Clickpad's toggle. */
.bo-pr[data-bo-theme="light"],
body:not(.dark-mode) .bo-pr[data-bo-theme="auto-cp"],
:root[data-color-scheme="light"] .bo-pr{
  --pr-accent-ink:#06210f;
  --pr-s3d:#5a45c8;
  --pr-cp:#0a72ab;
  --pr-ground:#ffffff;
  --pr-raise:#f5f6f4;
  --pr-sunk:#eef0ed;
  --pr-line:rgba(13,15,14,.13);
  --pr-line-2:rgba(13,15,14,.26);
  --pr-ink:#0d0f0e;
  --pr-ink-2:rgba(13,15,14,.66);
  --pr-ink-3:rgba(13,15,14,.44);
  --pr-field:rgba(13,15,14,.03);
  --pr-shadow:0 24px 60px rgba(13,15,14,.10);
}

body.dark-mode .bo-pr[data-bo-theme="auto-cp"]{
  --pr-accent-ink:#06210f; --pr-s3d:#9d8bff; --pr-cp:#5ec8ff;
  --pr-ground:#0e0f11; --pr-raise:#16181b; --pr-sunk:#111315;
  --pr-line:rgba(255,255,255,.11); --pr-line-2:rgba(255,255,255,.22);
  --pr-ink:#ffffff; --pr-ink-2:rgba(255,255,255,.64); --pr-ink-3:rgba(255,255,255,.40);
  --pr-field:rgba(255,255,255,.04); --pr-shadow:0 30px 80px rgba(0,0,0,.45);
}

.bo-pr{ padding:0 20px 110px; }
/* On builtos.com and clickpad.com the widget is the last thing on the page, so that trailing
   110px is the gap before the footer. scope3d.com continues with its own sections afterwards,
   where it stacks with the next section's own 64px top margin and opens a 174px hole mid-page.
   The host that has content after the widget says so. */
.bo-pr[data-bo-flush="bottom"]{ padding-bottom:16px; }
.bo-pr__in{ max-width:1180px; margin:0 auto; }
.bo-pr *{ box-sizing:border-box; }

/* ── section furniture ─────────────────────────────────────────────────────── */
.bo-pr__eyebrow{
  font-family:var(--pr-mono); font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--pr-accent); margin:0 0 12px;
}
.bo-pr h2{
  font-size:clamp(26px,3.4vw,38px); font-weight:600; letter-spacing:-.025em; line-height:1.1;
  margin:0 0 10px; color:var(--pr-ink);
}
.bo-pr__lede{ font-size:17px; line-height:1.6; color:var(--pr-ink-2); margin:0 0 26px; max-width:66ch; }
.bo-pr__sec{ padding:72px 0 0; }

/* ── the estimator ─────────────────────────────────────────────────────────── */
.bo-pr__calc{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(340px,.82fr); gap:24px; align-items:start;
}
.bo-pr__form{
  background:var(--pr-raise); border:1px solid var(--pr-line); border-radius:20px;
  padding:26px 26px 24px; box-shadow:var(--pr-shadow);
}
.bo-pr__field{ margin:0 0 20px; }
.bo-pr__field:last-child{ margin-bottom:0; }
.bo-pr__lbl{
  display:block; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--pr-ink-3); margin:0 0 8px;
}

/* product picker */
.bo-pr__prod{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bo-pr__prod label{ position:relative; margin:0; display:block; }
.bo-pr__prod input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.bo-pr__prod span{
  display:block; text-align:center; padding:13px 8px 12px; border-radius:12px; cursor:pointer;
  border:1px solid var(--pr-line); background:var(--pr-field); font-size:14px; font-weight:600;
  color:var(--pr-ink-2); line-height:1.25; transition:border-color .12s, background .12s, color .12s;
}
.bo-pr__prod span small{
  display:block; font-size:11px; font-weight:500; letter-spacing:.02em; color:var(--pr-ink-3);
  margin-top:3px;
}
.bo-pr__prod input:hover + span{ border-color:var(--pr-line-2); }
.bo-pr__prod input:checked + span{
  border-color:var(--pr-accent); background:rgba(var(--pr-accent-rgb),.10);
  color:var(--pr-ink);
}
.bo-pr__prod input:checked + span small{ color:var(--pr-accent); }
.bo-pr__prod input:focus-visible + span{ outline:2px solid var(--pr-accent); outline-offset:2px; }

/* search combobox */
.bo-pr__anchor{ position:relative; }
.bo-pr__bar{
  display:flex; align-items:center; height:54px; background:var(--pr-ground);
  border:1px solid var(--pr-line); border-radius:13px;
  transition:border-color .12s, box-shadow .12s;
}
.bo-pr__bar:focus-within{
  border-color:var(--pr-accent);
  box-shadow:0 0 0 4px rgba(var(--pr-accent-rgb),.14);
}
.bo-pr__bar svg{
  flex:0 0 auto; width:19px; height:19px; margin-left:16px; color:var(--pr-ink-3);
  fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round;
}
.bo-pr__bar:focus-within svg{ color:var(--pr-accent); }
.bo-pr input[type="search"]{
  flex:1 1 auto; min-width:0; height:100%; margin:0; padding:0 8px 0 11px; border:0;
  background:transparent; color:var(--pr-ink); font-family:inherit; font-size:16px;
  -webkit-appearance:none; appearance:none;
}
.bo-pr input[type="search"]:focus{ outline:none; }
.bo-pr input[type="search"]::placeholder{ color:var(--pr-ink-3); opacity:1; }
.bo-pr input[type="search"]::-webkit-search-decoration,
.bo-pr input[type="search"]::-webkit-search-cancel-button{ -webkit-appearance:none; display:none; }
.bo-pr__x{
  display:none; flex:0 0 auto; width:42px; height:42px; margin-right:5px; align-items:center;
  justify-content:center; border:0; background:none; color:var(--pr-ink-3); border-radius:10px;
  cursor:pointer; -webkit-tap-highlight-color:transparent;
}
.bo-pr.is-typed .bo-pr__x{ display:flex; }
.bo-pr__x svg{ margin:0; width:16px; height:16px; stroke-width:2; }
.bo-pr__x:hover{ background:var(--pr-field); color:var(--pr-ink); }

/* the synonym that matched, shown in the option row */
.bo-pr__list i{ font-style:normal; color:var(--pr-accent); opacity:.95; }
.bo-pr__pop{
  position:absolute; z-index:40; left:0; right:0; top:calc(100% + 8px); max-height:340px;
  overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch;
  background:var(--pr-ground); border:1px solid var(--pr-line); border-radius:14px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.bo-pr__pop[hidden]{ display:none !important; }
.bo-pr__count{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between;
  height:33px; padding:0 13px; background:var(--pr-ground); border-bottom:1px solid var(--pr-line);
  font-family:var(--pr-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pr-ink-3); white-space:nowrap;
}
.bo-pr__list{ margin:0; padding:5px 6px 6px; list-style:none; }
.bo-pr__list li[role="option"]{
  padding:10px 13px; border-radius:9px; font-size:15px; line-height:1.3; color:var(--pr-ink);
  cursor:pointer; scroll-margin-top:33px; -webkit-tap-highlight-color:transparent;
}
.bo-pr__list li[role="option"] small{
  display:block; margin-top:2px; font-size:12px; color:var(--pr-ink-3);
}
.bo-pr__list mark{ background:none; color:var(--pr-accent); font-weight:700; }
.bo-pr__list li[role="option"]:hover{ background:var(--pr-field); }
.bo-pr__list li[role="option"].is-active{
  background:rgba(var(--pr-accent-rgb),.12);
  box-shadow:inset 0 0 0 2px var(--pr-accent);
}
.bo-pr__list li.is-cat{
  position:sticky; top:33px; z-index:1; padding:11px 13px 5px; background:var(--pr-ground);
  font-family:var(--pr-mono); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase;
  color:var(--pr-ink-3); cursor:default;
}
.bo-pr__none{ padding:16px 13px; font-size:14px; color:var(--pr-ink-2); }
.bo-pr__none a{ color:var(--pr-accent); }

/* picked chip */
.bo-pr__picked{
  display:flex; flex-wrap:wrap; align-items:baseline; gap:0 9px; margin:11px 0 0; padding:11px 14px;
  background:rgba(var(--pr-accent-rgb),.08);
  border:1px solid rgba(var(--pr-accent-rgb),.26); border-radius:12px;
}
.bo-pr__picked em{
  flex:0 0 100%; font-style:normal; font-family:var(--pr-mono); font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--pr-accent); margin-bottom:3px;
}
.bo-pr__picked b{ font-size:14.5px; font-weight:600; color:var(--pr-ink); }
.bo-pr__picked span{ font-size:12.5px; color:var(--pr-ink-3); }

/* plain fields */
.bo-pr input[type="number"]{
  width:100%; height:50px; padding:0 15px; font-family:inherit; font-size:16px; color:var(--pr-ink);
  background:var(--pr-ground); border:1px solid var(--pr-line); border-radius:12px;
  -webkit-appearance:none; appearance:none;
}
.bo-pr input[type="number"]:focus{
  outline:none; border-color:var(--pr-accent);
  box-shadow:0 0 0 4px rgba(var(--pr-accent-rgb),.14);
}
.bo-pr__row{ display:flex; gap:11px; align-items:center; }
.bo-pr__row input{ flex:1 1 auto; min-width:0; }
.bo-pr__unit{ flex:0 0 auto; font-size:14px; color:var(--pr-ink-3); white-space:nowrap; }
.bo-pr__hint{ display:block; margin-top:7px; font-size:12.5px; color:var(--pr-ink-3); }

.bo-pr__seg{ display:flex; gap:8px; }
.bo-pr__seg label{ flex:1; position:relative; margin:0; }
.bo-pr__seg input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.bo-pr__seg span{
  display:block; text-align:center; padding:12px 8px; font-size:14px; border-radius:11px;
  border:1px solid var(--pr-line); background:var(--pr-field); color:var(--pr-ink-2); cursor:pointer;
}
.bo-pr__seg input:checked + span{
  border-color:var(--pr-accent); background:rgba(var(--pr-accent-rgb),.10);
  color:var(--pr-ink); font-weight:600;
}
.bo-pr__seg input:focus-visible + span{ outline:2px solid var(--pr-accent); outline-offset:2px; }

/* ── the answer ────────────────────────────────────────────────────────────── */
.bo-pr__out{ position:sticky; top:96px; }
.bo-pr__for{ margin:0 0 11px; padding:0 3px; font-size:13px; line-height:1.5; color:var(--pr-ink-3); }
.bo-pr__for b{ color:var(--pr-ink); font-weight:600; }
.bo-pr__res{
  display:grid; gap:1px; background:var(--pr-line); border:1px solid var(--pr-line);
  border-radius:20px; overflow:hidden; box-shadow:var(--pr-shadow);
}
.bo-pr__line{ background:var(--pr-raise); padding:24px 26px; }
.bo-pr__k{
  display:block; font-family:var(--pr-mono); font-size:10.5px; letter-spacing:.16em;
  text-transform:uppercase; margin:0 0 9px; color:var(--pr-ink-3);
}
.bo-pr__line--build .bo-pr__k{ color:var(--pr-s3d); }
.bo-pr__line--keep  .bo-pr__k{ color:var(--pr-accent); }
.bo-pr__v{
  display:block; font-size:40px; font-weight:700; letter-spacing:-.035em; line-height:1;
  color:var(--pr-ink); font-variant-numeric:tabular-nums;
}
.bo-pr__v i{ font-style:normal; font-size:17px; font-weight:500; color:var(--pr-ink-3); margin-left:4px; }
.bo-pr__sub{ display:block; margin-top:10px; font-size:13px; line-height:1.5; color:var(--pr-ink-3); }
.bo-pr__split{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:12px; padding-top:12px;
  border-top:1px solid var(--pr-line);
}
.bo-pr__split div{ font-size:12.5px; color:var(--pr-ink-3); }
.bo-pr__split b{ display:block; font-size:15px; color:var(--pr-ink); font-variant-numeric:tabular-nums; }
.bo-pr__split .s3d{ color:var(--pr-s3d); }
.bo-pr__split .cp{ color:var(--pr-cp); }
.bo-pr__tot{
  margin:0; background:var(--pr-raise); padding:18px 26px; font-size:13.5px; color:var(--pr-ink-2);
}
.bo-pr__tot b{ color:var(--pr-ink); font-variant-numeric:tabular-nums; }
.bo-pr__cta{
  display:block; margin:14px 0 0; padding:16px 22px; text-align:center; border-radius:48px;
  background:var(--pr-accent); color:var(--pr-accent-ink); font-weight:700; font-size:15px;
  text-decoration:none;
}
.bo-pr__cta:hover{ filter:brightness(1.06); color:var(--pr-accent-ink); }
.bo-pr__note{ margin:12px 3px 0; font-size:12.5px; line-height:1.5; color:var(--pr-ink-3); }
.bo-pr.is-quote .bo-pr__v{ font-size:27px; }

/* ── included / feature grid ───────────────────────────────────────────────── */
.bo-pr__two{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:20px; }
.bo-pr__card{
  background:var(--pr-raise); border:1px solid var(--pr-line); border-radius:20px; padding:28px;
}
.bo-pr__card h3{
  display:flex; align-items:center; gap:10px; margin:0 0 6px; font-size:20px; font-weight:600;
  letter-spacing:-.02em; color:var(--pr-ink);
}
.bo-pr__dot{ width:9px; height:9px; border-radius:50%; flex:0 0 auto; }
.bo-pr__dot--s3d{ background:var(--pr-s3d); }
.bo-pr__dot--cp{ background:var(--pr-cp); }
.bo-pr__card > p{ margin:0 0 18px; font-size:14.5px; line-height:1.6; color:var(--pr-ink-2); }
/* Host pages style their own list items, and those margins land on ours: Clickpad's theme adds
   ~20px to every li, which turned an 11px list gap into 31px and blew the fine-print grid's 1px
   hairline out to a 21px trough — the separators stopped reading as a table at all. The widget's
   lists therefore state their own margin rather than inheriting whatever the host sets, and the
   spacing comes from the grid gap alone, so all three sites match. */
.bo-pr__feat{ list-style:none; margin:0; padding:0; display:grid; gap:9px; }
.bo-pr__feat > li, .bo-pr__terms > li{ margin:0 !important; }
.bo-pr__feat li{ display:flex; gap:11px; align-items:flex-start; font-size:14px; line-height:1.5; }
.bo-pr__feat svg{
  width:16px; height:16px; flex:0 0 auto; margin-top:3px; color:var(--pr-accent);
  fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round;
}
.bo-pr__feat b{ color:var(--pr-ink); font-weight:600; }
.bo-pr__feat span{ color:var(--pr-ink-2); }

/* ── ladder table ──────────────────────────────────────────────────────────── */
.bo-pr__tw{
  overflow-x:auto; border:1px solid var(--pr-line); border-radius:18px; background:var(--pr-raise);
}
.bo-pr table{ border-collapse:collapse; width:100%; font-size:14.5px; min-width:720px; margin:0; }
.bo-pr th, .bo-pr td{
  text-align:left; padding:14px 18px; border-bottom:1px solid var(--pr-line); vertical-align:baseline;
}
.bo-pr thead th{
  font-family:var(--pr-mono); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--pr-ink-3); font-weight:500; white-space:nowrap; background:var(--pr-sunk);
}
.bo-pr tbody tr:last-child td{ border-bottom:0; }
.bo-pr td.num, .bo-pr th.num{
  text-align:right; white-space:nowrap; font-variant-numeric:tabular-nums; font-family:var(--pr-mono);
}
.bo-pr td.b{ font-family:var(--pr-mono); font-weight:700; color:var(--pr-accent); }
.bo-pr td.q{ color:var(--pr-ink-3); }
.bo-pr tbody tr:hover{ background:var(--pr-field); }

/* ── terms ─────────────────────────────────────────────────────────────────── */
.bo-pr__terms{
  list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(272px,1fr)); gap:1px;
  background:var(--pr-raise); border:1px solid var(--pr-line); border-radius:18px; overflow:hidden;
}
.bo-pr__terms li{
  background:var(--pr-raise); padding:22px; box-shadow:0 0 0 1px var(--pr-line);
  display:flex; gap:13px; align-items:flex-start;
}
.bo-pr__terms svg{
  width:19px; height:19px; flex:0 0 auto; margin-top:2px; color:var(--pr-accent);
  fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round;
}
.bo-pr__terms b{ display:block; font-size:15px; font-weight:600; color:var(--pr-ink); margin-bottom:4px; }
.bo-pr__terms span{ display:block; font-size:13.5px; line-height:1.55; color:var(--pr-ink-2); }
.bo-pr__terms a{ color:var(--pr-accent); text-decoration:underline; }
.bo-pr__fine{
  margin:18px auto 0; max-width:66ch; text-align:center; font-size:12px; line-height:1.6;
  color:var(--pr-ink-3);
}

/* ── the receipt ───────────────────────────────────────────────────────────── */
.bo-pr__receipt{
  background:linear-gradient(180deg, rgba(var(--pr-accent-rgb),.09), transparent 62%), var(--pr-raise);
  border:1px solid rgba(var(--pr-accent-rgb),.28); border-radius:22px; padding:34px 34px 30px;
}
.bo-pr__receipt h2{ margin-bottom:12px; }
.bo-pr__receipt p{ font-size:15.5px; line-height:1.65; color:var(--pr-ink-2); margin:0 0 14px; max-width:70ch; }
.bo-pr__receipt p:last-child{ margin-bottom:0; }
.bo-pr__receipt strong{ color:var(--pr-ink); font-weight:600; }
.bo-pr__stats{
  display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:0;
  margin:26px 0 24px; border-top:1px solid var(--pr-line); border-bottom:1px solid var(--pr-line);
}
@media (max-width:1000px){ .bo-pr__stats{ grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media (max-width:620px){ .bo-pr__stats{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.bo-pr__stats div{ padding:18px 18px 16px 0; min-width:0; }
.bo-pr__stats dt{
  font-family:var(--pr-mono); font-size:31px; font-weight:700; letter-spacing:-.03em;
  color:var(--pr-accent); line-height:1;
}
.bo-pr__stats dd{ margin:6px 0 0; font-size:13px; line-height:1.4; color:var(--pr-ink-3); }

@media (max-width:980px){
  .bo-pr__calc{ grid-template-columns:1fr; }
  .bo-pr__out{ position:static; }
}
@media (max-width:600px){
  .bo-pr{ padding:0 16px 80px; }
  .bo-pr__sec{ padding:54px 0 0; }
  .bo-pr__form{ padding:20px; border-radius:16px; }
  .bo-pr__line{ padding:20px; }
  .bo-pr__v{ font-size:33px; }
  .bo-pr__prod{ grid-template-columns:1fr; }
  .bo-pr__card{ padding:22px; }
  .bo-pr__receipt{ padding:24px; }
}

/* ── the three build tiers ─────────────────────────────────────────────────── */
.bo-pr__tiers3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.bo-pr__tiers3 label{ position:relative; margin:0; display:block; }
.bo-pr__tiers3 input{ position:absolute; opacity:0; inset:0; cursor:pointer; margin:0; }
.bo-pr__tiers3 span{
  display:block; text-align:center; padding:13px 8px 12px; border-radius:12px; cursor:pointer;
  border:1px solid var(--pr-line); background:var(--pr-field); line-height:1.25;
  transition:border-color .12s, background .12s;
}
.bo-pr__tiers3 span b{ display:block; font-size:14px; font-weight:600; color:var(--pr-ink-2); }
.bo-pr__tiers3 span small{ display:block; font-size:11px; color:var(--pr-ink-3); margin-top:3px; }
.bo-pr__tiers3 input:hover + span{ border-color:var(--pr-line-2); }
.bo-pr__tiers3 input:checked + span{
  border-color:var(--pr-accent); background:rgba(var(--pr-accent-rgb),.10);
}
.bo-pr__tiers3 input:checked + span b{ color:var(--pr-ink); }
.bo-pr__tiers3 input:checked + span small{ color:var(--pr-accent); }
.bo-pr__tiers3 input:focus-visible + span{ outline:2px solid var(--pr-accent); outline-offset:2px; }

/* drawing quality: four rows, each carrying its own multiplier */
.bo-pr__seg--stack{ flex-direction:column; gap:7px; }
.bo-pr__seg--stack span{
  display:flex; align-items:center; justify-content:space-between; gap:12px; text-align:left;
  padding:12px 14px;
}
.bo-pr__seg--stack span em{
  font-style:normal; font-family:var(--pr-mono); font-size:12px; color:var(--pr-ink-3);
  white-space:nowrap;
}
.bo-pr__seg--stack input:checked + span em{ color:var(--pr-accent); }

/* "from" prefix and the quoted note on the two largest bands */
.bo-pr__from{
  font-style:normal; font-size:17px; font-weight:500; color:var(--pr-ink-3);
  letter-spacing:0; margin-right:2px;
}
.bo-pr__quoted{
  display:block; margin-top:10px; padding:9px 12px; border-radius:10px;
  background:var(--pr-field); border:1px solid var(--pr-line);
  font-size:12.5px; line-height:1.5; color:var(--pr-ink-3);
}
.bo-pr__up{
  display:block; margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--pr-ink-3);
}
.bo-pr__up b{ color:var(--pr-ink-2); font-weight:600; }

@media (max-width:600px){
  .bo-pr__tiers3{ grid-template-columns:1fr; }
}

/* ── the ladder's tier dropdown ────────────────────────────────────────────── */
.bo-pr__ladderhead{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 16px;
}
.bo-pr__select{
  height:46px; padding:0 40px 0 14px; font-family:inherit; font-size:15px; color:var(--pr-ink);
  background:var(--pr-ground); border:1px solid var(--pr-line); border-radius:12px; cursor:pointer;
  -webkit-appearance:none; appearance:none; min-width:290px;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 20px) 21px, calc(100% - 14px) 21px;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat;
}
.bo-pr__select:focus{
  outline:none; border-color:var(--pr-accent);
  box-shadow:0 0 0 4px rgba(var(--pr-accent-rgb),.14);
}
.bo-pr__sm{ color:var(--pr-ink-3); font-size:13px; }

/* ── platform logos in the product picker ──────────────────────────────────── */
/* One row of logos, one line of caption, the same box every time — the three options have to be
   visually interchangeable or the picker reads as a hierarchy it is not. The img gets BOTH a width
   and a height so object-fit:contain has a box to work in; height alone lets the intrinsic ratio
   blow past max-width and the logo gets clipped. */
/* !important throughout: the theme sizes every <img> in content and wins on specificity —
   the same reason the pipeline lightbox logos carry it. */
.bo-pr__plogo{
  display:block !important; width:100% !important; max-width:106px !important;
  height:18px !important; object-fit:contain; object-position:center;
}
/* The theme is dark by default, so the -dark artwork (light ink) ships visible and the -light
   artwork only appears once a visitor picks light mode. */
/* The artwork swap follows the palette, and the palette is reachable three ways. Keying this
   to :root alone left scope3d.com — which sets the theme on the widget, not the document —
   showing white-ink logos on a white card. */
.bo-pr__plogo.is-lt{ display:none !important; }
:root[data-color-scheme="light"] .bo-pr__plogo.is-dk,
.bo-pr[data-bo-theme="light"] .bo-pr__plogo.is-dk,
body:not(.dark-mode) .bo-pr[data-bo-theme="auto-cp"] .bo-pr__plogo.is-dk{ display:none !important; }
:root[data-color-scheme="light"] .bo-pr__plogo.is-lt,
.bo-pr[data-bo-theme="light"] .bo-pr__plogo.is-lt,
body:not(.dark-mode) .bo-pr[data-bo-theme="auto-cp"] .bo-pr__plogo.is-lt{ display:block !important; }
.bo-pr__prod span{
  height:74px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:4px;
}
.bo-pr__pboth{
  display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px;
  width:100%; font-style:normal;
}
.bo-pr__pboth > i{ font-style:normal; font-size:12px; font-weight:700; color:var(--pr-ink-3); line-height:1; flex:0 0 auto; }
.bo-pr__pboth .bo-pr__plogo{ max-width:74px !important; height:14px !important; }

/* ── equal heights everywhere ──────────────────────────────────────────────── */
.bo-pr__seg--stack span{ min-height:54px; }
.bo-pr__two{ align-items:stretch; }
.bo-pr__card{ height:100%; display:flex; flex-direction:column; }
/* The lists sit under their intro, not pushed to the floor of the card. margin-top:auto here
   bottom-aligned them, which only looks deliberate when the columns hold the same amount: the
   card with four items opened a hole above its list to match the card with seven, and the two
   platform cards disagreed by about eighty pixels. Cards still stretch to equal height. */
.bo-pr__card .bo-pr__feat{ margin-top:0; }
.bo-pr__tiers3 span{ min-height:74px; display:flex; flex-direction:column; justify-content:center; }

/* ── why both ──────────────────────────────────────────────────────────────── */
.bo-pr__why{
  margin:30px 0 0; padding:30px 32px;
  background:linear-gradient(180deg, rgba(var(--pr-accent-rgb),.07), transparent 62%), var(--pr-raise);
  border:1px solid var(--pr-line); border-radius:20px;
}
.bo-pr__why h3{ margin:0 0 14px; font-size:23px; font-weight:600; letter-spacing:-.02em; color:var(--pr-ink); }
/* Full width inside the card. The 74ch measure left a ragged column of empty panel down the
   right of a card that is already only as wide as the page, so it read as unfinished rather
   than as a considered measure. */
.bo-pr__why p{ font-size:15.5px; line-height:1.65; color:var(--pr-ink-2); margin:0 0 14px; max-width:none; }
.bo-pr__why p:last-child{ margin-bottom:0; }
.bo-pr__why b{ color:var(--pr-ink); font-weight:600; }
.bo-pr__whyfoot{
  padding-top:16px; border-top:1px solid var(--pr-line); font-size:14px !important; color:var(--pr-ink-3) !important;
}

/* ── product logos, on the cards that explain the products ─────────────────── */
.bo-pr__logohead{ display:block !important; margin:0 0 14px !important; }
.bo-pr__cardlogo{
  display:block !important; width:auto !important; max-width:158px !important;
  height:26px !important; object-fit:contain; object-position:left center;
}
.bo-pr__cardlogo.is-lt{ display:none !important; }
:root[data-color-scheme="light"] .bo-pr__cardlogo.is-dk,
.bo-pr[data-bo-theme="light"] .bo-pr__cardlogo.is-dk,
body:not(.dark-mode) .bo-pr[data-bo-theme="auto-cp"] .bo-pr__cardlogo.is-dk{ display:none !important; }
:root[data-color-scheme="light"] .bo-pr__cardlogo.is-lt,
.bo-pr[data-bo-theme="light"] .bo-pr__cardlogo.is-lt,
body:not(.dark-mode) .bo-pr[data-bo-theme="auto-cp"] .bo-pr__cardlogo.is-lt{ display:block !important; }

/* ── per-host brand accents ────────────────────────────────────────────────── */
.bo-pr[data-bo-accent="clickpad"]{ --pr-accent-rgb:124,58,237; --pr-accent-ink:#ffffff; }
.bo-pr[data-bo-accent="scope3d"] { --pr-accent-rgb:125,217,85; --pr-accent-ink:#10280a; }

/* ── the receipt ────────────────────────────────────────────────────────────
   Headline and lede, then the model itself full width because it is the evidence
   for the claim above it, then the five numbers from that build in one row, then
   what it means in two columns. The image used to sit in a right-hand column that
   ran out of picture halfway down the card and left a quarter of the panel empty. */
.bo-pr__receipt{ display:block; }
.bo-pr__rhead{ max-width:74ch; }
.bo-pr__rhead h2{ margin-bottom:14px; text-wrap:balance; }
.bo-pr__rlede{ font-size:16.5px !important; line-height:1.6 !important; color:var(--pr-ink-2); margin:0 !important; }

.bo-pr__rshot{ margin:26px 0 0; min-width:0; }
.bo-pr__rshot img{
  display:block !important; width:100% !important; height:auto !important; border-radius:14px;
  border:1px solid var(--pr-line);
}
.bo-pr__rshot figcaption{ margin-top:10px; font-size:12.5px; line-height:1.5; color:var(--pr-ink-3); max-width:78ch; }

.bo-pr__rcols{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 40px; }
.bo-pr__rcols p{ margin:0 !important; max-width:none !important; }
@media (max-width:820px){ .bo-pr__rcols{ grid-template-columns:1fr; gap:14px; } }

/* ── band detail popup ─────────────────────────────────────────────────────── */
.bo-pr__info{
  display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px;
  margin-left:6px; border-radius:50%; border:1px solid currentColor; background:none;
  color:inherit; font-size:10px; font-weight:700; cursor:pointer; vertical-align:middle;
  font-family:var(--pr-mono); line-height:1; padding:0;
}
.bo-pr__info:hover{ color:var(--pr-accent); border-color:var(--pr-accent); }
.bo-pr__bandbtn{
  background:none; border:0; padding:0; font:inherit; color:var(--pr-accent); cursor:pointer;
  text-decoration:underline; text-underline-offset:2px;
}
.bo-pr__modal{
  position:fixed; inset:0; z-index:2147483000; display:flex; align-items:center;
  justify-content:center; padding:24px; background:rgba(4,5,5,.66);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  font-family:inherit;
}
.bo-pr__modal[hidden]{ display:none !important; }
.bo-pr__mbox{
  position:relative; width:min(780px,100%); max-height:84vh; overflow-y:auto;
  background:var(--pr-raise,#16181b); color:var(--pr-ink,#fff);
  border:1px solid var(--pr-line,rgba(255,255,255,.11)); border-radius:20px;
  padding:30px 32px 32px; box-shadow:0 40px 120px rgba(0,0,0,.55);
}
.bo-pr__mx{
  position:absolute; top:18px; right:18px; width:34px; height:34px; border:0; border-radius:10px;
  background:var(--pr-field,rgba(255,255,255,.06)); color:var(--pr-ink-2,rgba(255,255,255,.64));
  font-size:20px; line-height:1; cursor:pointer; z-index:2;
}
.bo-pr__mx:hover{ background:var(--pr-line,rgba(255,255,255,.14)); color:var(--pr-ink,#fff); }
.bo-pr__mband{
  font-family:var(--pr-mono,monospace); font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--pr-accent,#00ff85); margin:0 0 8px; padding-right:44px;
}
.bo-pr__mbox h3{
  margin:0 0 6px; font-size:24px; font-weight:600; letter-spacing:-.02em;
  color:var(--pr-ink,#fff); padding-right:44px;
}
.bo-pr__mbox > p{ margin:0 0 20px; font-size:14.5px; line-height:1.55; color:var(--pr-ink-2,rgba(255,255,255,.64)); }
.bo-pr__mprices{ display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px; margin:0 0 8px; }
.bo-pr__mprices div{
  background:var(--pr-ground,#0e0f11); border:1px solid var(--pr-line,rgba(255,255,255,.11));
  border-radius:12px; padding:13px 15px;
}
.bo-pr__mprices dt{
  font-family:var(--pr-mono,monospace); font-size:10px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--pr-ink-3,rgba(255,255,255,.4)); margin-bottom:6px;
}
.bo-pr__mprices dd{
  margin:0; font-family:var(--pr-mono,monospace); font-size:19px; font-weight:700;
  color:var(--pr-ink,#fff); font-variant-numeric:tabular-nums;
}
.bo-pr__mlist{
  list-style:none; margin:0 0 4px; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:8px 22px;
}
.bo-pr__mlist li{
  font-size:13.5px; line-height:1.45; color:var(--pr-ink-2,rgba(255,255,255,.64));
  padding:7px 0; border-bottom:1px solid var(--pr-line,rgba(255,255,255,.08));
}
.bo-pr__mlist li small{ display:block; color:var(--pr-ink-3,rgba(255,255,255,.4)); font-size:12px; margin-top:2px; }
@media (max-width:560px){ .bo-pr__mbox{ padding:24px 20px 26px; } }
.bo-pr__mh{
  font-family:var(--pr-mono,monospace); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--pr-ink-3,rgba(255,255,255,.4)); margin:22px 0 8px;
}

/* ── the two wordmarks are not the same shape ───────────────────────────────
   Scope3D's mark is roughly 2.5:1 and Clickpad's roughly 4.2:1, so matching their heights
   makes Scope3D look half the size. It gets the taller box, the same 36-vs-26 ratio the
   pipeline lightbox already uses. */
.bo-pr__cardlogo[src*="scope3d"]{ height:36px !important; max-width:150px !important; }
.bo-pr__cardlogo[src*="clickpad"]{ height:26px !important; max-width:158px !important; }
.bo-pr__plogo[src*="scope3d"]{ height:25px !important; max-width:104px !important; }
.bo-pr__pboth .bo-pr__plogo[src*="scope3d"]{ height:20px !important; max-width:74px !important; }

/* ── scrollbars ────────────────────────────────────────────────────────────────
   The modal, the property list and the wide tables all scroll. A default OS scrollbar
   inside a rounded dark panel reads as a rendering accident, so they get a thin one in
   the widget's own ink that fades up on hover. */
.bo-pr__mbox, .bo-pr__pop, .bo-pr__tw, .bo-pr__quick, .bo-pr__cats{
  overscroll-behavior:contain;
  scrollbar-width:thin;
  scrollbar-color:rgba(var(--pr-accent-rgb),.45) transparent;
}
.bo-pr__mbox::-webkit-scrollbar,
.bo-pr__pop::-webkit-scrollbar,
.bo-pr__tw::-webkit-scrollbar,
.bo-pr__quick::-webkit-scrollbar,
.bo-pr__cats::-webkit-scrollbar{ width:10px; height:10px; }
.bo-pr__mbox::-webkit-scrollbar-track,
.bo-pr__pop::-webkit-scrollbar-track,
.bo-pr__tw::-webkit-scrollbar-track,
.bo-pr__quick::-webkit-scrollbar-track,
.bo-pr__cats::-webkit-scrollbar-track{ background:transparent; }
.bo-pr__mbox::-webkit-scrollbar-thumb,
.bo-pr__pop::-webkit-scrollbar-thumb,
.bo-pr__tw::-webkit-scrollbar-thumb,
.bo-pr__quick::-webkit-scrollbar-thumb,
.bo-pr__cats::-webkit-scrollbar-thumb{
  background:rgba(var(--pr-accent-rgb),.32); border-radius:999px;
  border:3px solid transparent; background-clip:content-box;
}
.bo-pr__mbox:hover::-webkit-scrollbar-thumb,
.bo-pr__pop:hover::-webkit-scrollbar-thumb,
.bo-pr__tw:hover::-webkit-scrollbar-thumb{
  background:rgba(var(--pr-accent-rgb),.58); background-clip:content-box;
}
.bo-pr__mbox::-webkit-scrollbar-thumb:active,
.bo-pr__pop::-webkit-scrollbar-thumb:active{
  background:rgba(var(--pr-accent-rgb),.8); background-clip:content-box;
}