body[data-app="us-demo"] { color-scheme: light; }

body[data-step="plans"] #app,
body[data-step="community"] #app,
body[data-step="community-detail"] #app,
body[data-step="quote"] #app {
  width:min(100%,1280px);
  max-width:1280px;
}
body[data-step="plans"] #screen,
body[data-step="community"] #screen,
body[data-step="community-detail"] #screen,
body[data-step="quote"] #screen { padding-inline:clamp(20px,4vw,40px); }
body[data-step="legal"] #app { width:min(100%,760px); max-width:760px; }

.us-unit-toggle { display:inline-flex; align-items:center; gap:2px; padding:3px; border:1px solid #d7dee7; border-radius:11px; background:#f5f7fa; }
.us-unit-toggle button { min-width:58px; min-height:44px; padding:7px 12px; border:0; border-radius:8px; background:transparent; color:#667386; font:800 11px/1 inherit; cursor:pointer; }
.us-unit-toggle button.is-active { color:#172033; background:#fff; box-shadow:0 1px 5px rgba(23,32,51,.12); }

.us-plan-gallery-screen { max-width:1180px !important; padding-bottom:120px; }
.us-plan-hero { max-width:820px; }
.us-plan-head-tools { display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:18px; color:#637083; font-size:12px; }
.us-plan-head-tools > div:first-child { display:flex; flex-wrap:wrap; gap:3px; }
.us-plan-head-tools strong { color:#253044; }
.us-admin-shortcut { min-height:44px; display:inline-flex; align-items:center; padding:7px 11px; border:1px solid #bfd3ed; border-radius:9px; background:#fff; color:#175cae; font-size:10.5px; font-weight:850; text-decoration:none; white-space:nowrap; }
.us-admin-shortcut:hover { border-color:#79a7df; background:#f7fbff; }
.us-plan-method-note { display:flex; align-items:flex-start; gap:8px; margin:20px 0 14px; padding:13px 15px; border:1px solid #cfe0f7; border-radius:14px; background:#f2f7ff; color:#52657c; font-size:12px; line-height:1.5; }
.us-plan-method-note strong { flex:0 0 auto; color:#1d5fb5; }
.us-plan-filters { display:flex; gap:7px; margin:10px 0 15px; overflow-x:auto; scrollbar-width:none; }
.us-plan-filters::-webkit-scrollbar { display:none; }
.us-plan-filters button { flex:0 0 auto; min-height:44px; padding:9px 14px; border:1px solid #dce3ea; border-radius:999px; background:#fff; color:#596779; font:750 12px/1 inherit; cursor:pointer; }
.us-plan-filters button.is-active { border-color:#2563eb; color:#fff; background:#2563eb; }
.us-plan-refine { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; margin:0 0 15px; }
.us-plan-refine label { display:grid; gap:5px; min-width:0; color:#667385; font:750 10px/1.2 inherit; letter-spacing:.04em; text-transform:uppercase; }
.us-plan-refine select { width:100%; min-height:44px; padding:0 34px 0 12px; border:1px solid #dce3ea; border-radius:10px; background:#fff; color:#243041; font:700 12px/1 inherit; text-transform:none; }
.us-plan-empty { grid-column:1/-1; display:grid; justify-items:start; gap:8px; padding:24px; border:1px dashed #cbd5e1; border-radius:14px; background:#f8fafc; color:#334155; }
.us-plan-empty p { margin:0; color:#64748b; font-size:12px; }
.us-plan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.us-plan-card { min-width:0; overflow:hidden; padding:0; border:1px solid #dfe5eb; border-radius:18px; background:#fff; color:inherit; text-align:left; box-shadow:0 7px 22px rgba(20,34,54,.06); cursor:pointer; transition:border-color .18s,transform .18s,box-shadow .18s; }
.us-plan-card:hover { transform:translateY(-2px); border-color:#a9c5ee; box-shadow:0 12px 28px rgba(20,34,54,.1); }
.us-plan-card:focus-visible { outline:3px solid rgba(37,99,235,.32); outline-offset:2px; }
.us-plan-card.is-selected { border-color:#2563eb; box-shadow:0 0 0 2px rgba(37,99,235,.16),0 12px 28px rgba(20,34,54,.1); }
.us-plan-canvas-wrap { position:relative; padding:10px; background:linear-gradient(145deg,#f6f8fb,#eef2f7); }
.us-plan-canvas { width:100%; height:148px; display:block; border-radius:10px; background:#fff; }
.us-plan-selected-badge { position:absolute; top:12px; right:12px; padding:6px 9px; border-radius:999px; color:#fff; background:#2563eb; font-size:10px; font-weight:850; }
.us-plan-card-body { padding:14px 15px 16px; }
.us-plan-card-title { color:#182133; font-size:15px; font-weight:850; line-height:1.25; }
.us-plan-card-type { margin-top:3px; color:#6c7888; font-size:11px; }
.us-plan-specs,.us-plan-tags { display:flex; flex-wrap:wrap; gap:5px; margin-top:10px; }
.us-plan-specs span { padding:5px 7px; border-radius:8px; background:#f1f4f7; color:#4d5a6c; font-size:9.5px; font-weight:750; }
.us-plan-tags span { color:#1d64ba; font-size:9.5px; font-weight:700; }
.us-plan-tags span + span::before { content:'·'; margin-right:5px; color:#9aabc0; }
.us-plan-level-note { margin:8px 0 0; color:#8a96a5; font-size:9.5px; line-height:1.45; }

.us-live-budget { position:sticky; top:10px; z-index:8; display:flex; align-items:center; justify-content:space-between; gap:15px; margin:12px 0; padding:13px 14px; border:1px solid rgba(49,130,246,.26); border-radius:16px; background:rgba(245,249,255,.96); box-shadow:0 8px 24px rgba(39,79,128,.10); backdrop-filter:blur(12px); }
.us-live-budget-copy { min-width:0; display:flex; flex-direction:column; gap:2px; }
.us-live-budget-copy span { color:#2863a6; font-size:9px; font-weight:900; letter-spacing:.08em; }
.us-live-budget-copy strong { overflow:hidden; color:#142238; font-size:18px; line-height:1.2; text-overflow:ellipsis; white-space:nowrap; }
.us-live-budget-copy small { color:#6f7f92; font-size:10px; }
.us-budget-details-btn { flex:0 0 auto; min-height:40px; padding:9px 12px; border:1px solid #bad1ee; border-radius:11px; background:#fff; color:#1b5ba9; font:800 11px/1 inherit; cursor:pointer; }
.us-budget-detail { padding-bottom:18px; }
.us-budget-line { padding:13px 0; border-bottom:1px solid #e7ebf0; }
.us-budget-line-head,.us-budget-summary-row,.us-budget-total { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.us-budget-line-head strong { color:#192437; font-size:13px; }
.us-budget-line-head span { color:#172033; font-size:13px; font-weight:850; }
.us-budget-product { margin-top:3px; color:#6e7b8d; font-size:10px; }
.us-budget-line dl { display:grid; gap:5px; margin:10px 0 0; }
.us-budget-line dl div { display:grid; grid-template-columns:80px minmax(0,1fr); gap:10px; color:#596779; font-size:10.5px; line-height:1.45; }
.us-budget-line dt { font-weight:800; }
.us-budget-line dd { margin:0; text-align:right; }
.us-budget-summary-row { padding:8px 0; color:#596779; font-size:11px; }
.us-budget-total { margin-top:7px; padding:14px 0 5px; border-top:2px solid #24334a; color:#172033; font-size:15px; }
.us-budget-total strong { color:#1d64c8; font-size:20px; }
.us-budget-disclaimer { margin:13px 0 0; padding:11px; border-radius:10px; background:#f4f6f8; color:#778496; font-size:10px; line-height:1.5; }

.us-render-quota { margin:12px 0; padding:14px; border:1px solid #dde4ec; border-radius:16px; background:#fff; }
.us-render-quota-top { display:flex; align-items:flex-start; justify-content:space-between; gap:14px; }
.us-render-quota-top > div:first-child { min-width:0; display:flex; flex-direction:column; gap:3px; }
.us-render-quota-top strong { color:#1e293b; font-size:12px; }
.us-render-quota-top small { color:#8290a1; font-size:9.5px; line-height:1.35; }
.us-render-tier { display:inline-flex; flex:0 0 auto; gap:2px; padding:3px; border-radius:10px; background:#edf1f5; }
.us-render-tier button { min-height:44px; padding:6px 9px; border:0; border-radius:7px; background:transparent; color:#6c7888; font:800 9.5px/1 inherit; cursor:pointer; }
.us-render-tier button.is-active { color:#1d4ed8; background:#fff; box-shadow:0 1px 4px rgba(15,23,42,.12); }
.us-quota-label { display:flex; justify-content:space-between; gap:12px; margin-top:13px; color:#667386; font-size:10px; }
.us-quota-label strong { color:#29364a; }
.us-quota-track { height:7px; margin-top:6px; overflow:hidden; border-radius:999px; background:#e9eef4; }
.us-quota-track span { display:block; height:100%; border-radius:inherit; background:linear-gradient(90deg,#60a5fa,#2563eb); transition:width .25s; }
.us-render-quota > p { margin:8px 0 0; color:#8a96a5; font-size:9.5px; line-height:1.45; }

.preview-demo-tools { display:flex; flex-wrap:wrap; align-items:center; gap:7px; margin:12px 0; }
.preview-demo-tools > button,.preview-demo-tools > a { min-height:44px; padding:8px 11px; border:1px solid #d8e0e9; border-radius:11px; background:#fff; color:#475569; font:800 10.5px/1 inherit; text-decoration:none; cursor:pointer; }
.preview-demo-tools > button:hover,.preview-demo-tools > a:hover { border-color:#9ebce2; color:#195fb3; }
.preview-demo-tools > button:focus-visible,.preview-demo-tools > a:focus-visible { outline:3px solid rgba(37,99,235,.42); outline-offset:2px; }
.preview-demo-tools .us-unit-toggle { margin-left:auto; }
.live-product-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  align-items:stretch;
}
.live-product-card {
  position:relative;
  min-width:0;
  min-height:230px;
  padding:0;
  overflow:hidden;
  border:1.5px solid #53657d;
  border-radius:15px;
  background:#26364d;
  color:#fff;
  cursor:default;
  box-shadow:0 5px 14px rgba(3,10,22,.14);
  transition:border-color .15s,background .15s,box-shadow .15s,transform .15s;
}
.live-product-card:hover { transform:translateY(-2px); border-color:#7186a2; background:#2d405a; }
.live-product-card.selected {
  border-color:#4fc3f7;
  background:#183f5f;
  box-shadow:0 0 0 2px rgba(79,195,247,.24),0 10px 24px rgba(3,15,30,.22);
}
.live-product-card.selected::after { content:none; }
.live-product-select {
  display:flex;
  width:100%;
  min-height:230px;
  flex-direction:column;
  align-items:stretch;
  padding:0 11px 13px;
  border:0;
  border-radius:14px;
  background:transparent;
  color:#fff;
  font:inherit;
  text-align:left;
  cursor:pointer;
}
.live-product-select:focus-visible { outline:3px solid #93d9ff; outline-offset:-4px; }
.live-product-select:active { background:rgba(255,255,255,.055); }
.live-product-swatch {
  width:calc(100% + 22px);
  height:88px;
  margin:0 -11px;
  display:block;
  flex:0 0 auto;
  object-fit:cover;
  border-bottom:1px solid rgba(255,255,255,.16);
}
.live-product-tier {
  display:block;
  margin:10px 0 0;
  color:#8fddff;
  font-size:8.5px;
  font-weight:900;
  letter-spacing:.1em;
  line-height:1.35;
}
.live-product-name {
  display:-webkit-box;
  min-height:3.8em;
  margin:4px 0 0;
  overflow:hidden;
  color:#fff;
  font-size:11px;
  font-weight:820;
  line-height:1.27;
  text-align:left;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:3;
}
.live-product-price {
  display:block;
  margin-top:auto;
  padding-top:9px;
  color:#a8dcff;
  font-size:12px;
  font-weight:900;
  line-height:1.35;
  text-align:left;
}
.live-product-code {
  display:block;
  overflow:hidden;
  margin:3px 0 0;
  color:#bdc9d8;
  font-size:8.5px;
  line-height:1.35;
  text-align:left;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.live-product-info {
  position:absolute;
  z-index:5;
  top:3px;
  left:3px;
  display:grid;
  width:44px;
  height:44px;
  place-items:center;
  padding:0;
  border:0;
  border-radius:50%;
  background:transparent;
  cursor:pointer;
}
.live-product-info > span {
  display:grid;
  width:29px;
  height:29px;
  place-items:center;
  border:1px solid rgba(255,255,255,.82);
  border-radius:50%;
  background:rgba(11,24,42,.92);
  color:#fff;
  font:italic 850 15px/1 Georgia,serif;
  box-shadow:0 2px 8px rgba(0,0,0,.28);
}
.live-product-info:hover > span { background:#075f94; }
.live-product-info:focus-visible { outline:3px solid #93d9ff; outline-offset:-2px; }
.live-product-selected-mark {
  position:absolute;
  z-index:4;
  top:9px;
  right:9px;
  display:grid;
  width:27px;
  height:27px;
  place-items:center;
  border:2px solid #fff;
  border-radius:50%;
  background:#0284c7;
  box-shadow:0 2px 8px rgba(0,0,0,.24);
  pointer-events:none;
}
.live-product-selected-mark > span {
  width:11px;
  height:6px;
  margin-top:-2px;
  border:solid #fff;
  border-width:0 0 2px 2px;
  transform:rotate(-45deg);
}

.product-detail-sheet { color:#263244; }
.product-detail-swatch {
  display:block;
  width:100%;
  height:150px;
  border:1px solid #dce4ec;
  border-radius:14px;
  object-fit:cover;
}
.product-detail-summary { margin-top:14px; border-top:1px solid #e4e9ef; }
.product-detail-summary > div,
.product-detail-specs dl > div {
  display:flex;
  justify-content:space-between;
  gap:18px;
  padding:9px 0;
  border-bottom:1px solid #edf1f5;
}
.product-detail-summary dt,
.product-detail-specs dt { color:#6e7b8b; font-size:11px; }
.product-detail-summary dd,
.product-detail-specs dd { max-width:62%; color:#263244; font-size:11px; font-weight:750; text-align:right; overflow-wrap:anywhere; }
.product-detail-considerations {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:15px;
}
.product-detail-considerations section { padding:13px; border:1px solid #dfe6ed; border-radius:12px; }
.product-detail-considerations .is-pro { border-color:#bee4d0; background:#f0faf5; }
.product-detail-considerations .is-con { border-color:#efd6ae; background:#fff8ec; }
.product-detail-sheet h3 { margin:0; color:#263244; font-size:12px; }
.product-detail-considerations ul { margin:8px 0 0; padding-left:17px; color:#485565; font-size:11px; line-height:1.5; }
.product-detail-considerations li + li { margin-top:5px; }
.product-detail-specs,
.product-detail-evidence { margin-top:16px; }
.product-detail-specs dl { margin-top:7px; }
.product-detail-evidence { padding:13px; border:1px solid #dce5ee; border-radius:12px; background:#f7f9fb; }
.product-detail-evidence p { margin:5px 0 0; color:#617082; font-size:10.5px; line-height:1.45; }
.product-detail-evidence a {
  display:inline-flex;
  min-height:44px;
  align-items:center;
  margin-top:6px;
  color:#185fb5;
  font-size:11px;
  font-weight:800;
}
.product-detail-caveat { margin:13px 0 2px; color:#798697; font-size:10px; line-height:1.5; }
.preview-community-actions { display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin:14px 0; padding:13px; border:1px solid #dce4ec; border-radius:15px; background:#f8fafc; }
.preview-community-actions > div { min-width:180px; flex:1 1 220px; }
.preview-community-actions h4 { margin:0; color:#1f2b3d; font-size:12px; }
.preview-community-actions p { margin:4px 0 0; color:#758294; font-size:9.5px; line-height:1.4; }
.preview-community-actions button { min-height:38px; padding:8px 11px; border:1px solid #bdd0e8; border-radius:10px; background:#fff; color:#185aa8; font:800 10px/1 inherit; cursor:pointer; }
.quote-unit-tools { display:flex; align-items:center; justify-content:space-between; gap:12px; margin:10px 0 14px; }
.quote-unit-tools > span { color:#667386; font-size:10px; line-height:1.4; }

@media (min-width:760px) {
  .live-product-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}

@media (min-width:760px) {
  .us-plan-refine { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .us-plan-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (min-width:1080px) { .us-plan-grid { grid-template-columns:repeat(4,minmax(0,1fr)); } }
@media (max-width:420px) {
  .us-plan-refine { grid-template-columns:1fr; }
  .us-plan-refine select { font-size:16px; }
}
@media (max-width:620px) {
  .us-plan-head-tools,.us-render-quota-top { align-items:stretch; flex-direction:column; }
  .us-plan-grid { grid-template-columns:1fr; }
  .us-live-budget { top:6px; }
  .us-live-budget-copy strong { font-size:15px; }
  .us-render-tier { align-self:flex-start; }
  .preview-demo-tools .us-unit-toggle { margin-left:0; }
  .quote-unit-tools { align-items:flex-start; flex-direction:column; }
  .product-detail-considerations { grid-template-columns:1fr; }
}
@media (prefers-reduced-motion:reduce) { .us-plan-card,.us-quota-track span { transition:none; } }