/* hvps-configurator.css — Hourly VPS / Cloud VPS configurator widget.
   Extracted from site-palette.css; page-scoped via needs_hvps_configurator. */
.tbox-hvps-comparison-section .tbox-card--highlight .tbox-card__text ul li {
  margin-bottom: var(--space-xs);
}

:where(.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-pricing-intro p),
:where(#hourly-vps-configurator) .tbox-pricing-intro p {
  font-size: var(--fs-lg);
  color: var(--tbox-hvps-text-medium);
  margin: 0;
}

:where(.tbox-hvps-comparison-section .tbox-comparison-container h2) {
  font-size: var(--fs-card-price);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

.tbox-comparison-subtitle {
  text-align: center;
  color: var(--ahcalc-slate-600);
  font-size: var(--fs-lg);
  margin: 0 0 2rem;
}



.tbox-hvps-comparison-section .tbox-comparison-subtitle {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  margin: 0 0 2rem;
}

:root[data-theme="dark"] .tbox-comparison-subtitle {
  color: var(--text-secondary);
}



:where(.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-pricing-intro h3) {
  font-size: var(--fs-card-price);
  font-weight: var(--fw-bold);
  color: var(--tbox-hvps-text-dark);
  margin: 0 0 var(--space-sm);
}

/* stylelint-disable-next-line no-descending-specificity */
:where(.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-pricing-intro h2),
:where(#hourly-vps-configurator) .tbox-pricing-intro h2 {
  font-size: var(--fs-card-price);
  font-weight: var(--fw-bold);
  color: var(--tbox-hvps-text-dark);
  margin: 0 0 var(--space-sm);
}
/* stylelint-disable-next-line no-descending-specificity */
:where(:root[data-theme="dark"]) .tbox-comparison-section h2 {
  color: var(--text-primary);
}



.tbox-hvps-performance-guard-section .tbox-pga-caption span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

.tbox-hvps-stepper__step.is-complete .tbox-hvps-stepper__circle span {
  display: none;
}
/* stylelint-disable-next-line no-descending-specificity */
.tbox-comparison-section h2 {
  font-size: var(--fs-card-price);
  font-weight: var(--fw-extrabold);
  color: var(--ahcalc-slate-900);
  margin: 0 0 var(--space-sm);
  text-align: center;
}



.tbox-hvps-managed-infra a {
  color: var(--brand-primary-text);
  text-decoration: none;
  font-weight: var(--fw-medium);
}

.tbox-hvps-managed-infra a:hover {
  text-decoration: underline;
}

:root[data-theme="dark"] .tbox-hvps-managed-infra a {
  color: var(--brand-primary);
}



#hourly-vps-configurator .tbox-hvps-backup__addons-note a {
  color: var(--brand-primary-text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

:where(#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist a),
:where(#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist button) {
  color: var(--brand-highlight);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

:where(#hourly-vps-configurator .tbox-hvps-backup__addons-note a:hover) {
  text-decoration: underline;
}

:where(#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist a:hover),
:where(#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist button:hover) {
  text-decoration: underline;
}

.tbox-hvps-comparison-section .tbox-card--highlight .tbox-card__text ul {
  margin: var(--space-sm) 0 0;
  padding-left: var(--space-lg-plus);
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

.tbox-hvps-utility-btn .material-symbols-outlined,
.tbox-hvps-utility-btn svg {
  font-size: var(--fs-xl);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.tbox-hvps-share-action .material-symbols-outlined,
.tbox-hvps-share-action svg {
  font-size: var(--fs-xl);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

#hourly-vps-configurator .tbox-hvps-backup__count span {
  font-size: var(--fs-base);
  color: var(--text-muted);
}

:where(.tbox-hvps-price-compare-table th),
:where(.tbox-hvps-price-compare-table td) {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-md);
}

:where(.tbox-hvps-price-compare-row--highlight td) {
  background: var(--brand-highlight-bg);
  color: var(--gray-900);
}

:where(.tbox-comparison-table th),
:where(.tbox-comparison-table td) {
  padding: var(--space-lg);
  text-align: left;
  border-bottom: 1px solid var(--ahcalc-slate-100);
  font-variant-numeric: tabular-nums;
}



:where(.tbox-hvps-price-compare-table) tbody td {
  border-bottom: 1px solid var(--gray-100);
  color: var(--tbox-hvps-text-medium);
  vertical-align: top;
  font-variant-numeric: tabular-nums;
}

:where(.tbox-hvps-price-compare-table thead th) {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  line-height: var(--lh-tight);
  color: var(--text-secondary);
  border-bottom: 2px solid var(--gray-200);
}

:where(.tbox-hvps-comparison-section .tbox-comparison-table th),
:where(.tbox-hvps-comparison-section .tbox-comparison-table td) {
  padding: var(--space-lg) var(--space-lg-plus);
  font-size: var(--fs-md);
}

:where(.tbox-comparison-table th:first-child) {
  border-top-left-radius: var(--radius-12);
}


:where(.tbox-comparison-table th:last-child) {
  border-top-right-radius: var(--radius-12);
}



.tbox-hvps-comparison-section .tbox-comparison-table thead th {
  background: var(--gray-800);
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
  text-align: center;
}

:root[data-theme="dark"] .tbox-comparison-table th {
  background: var(--surface-glass-06);
  color: var(--text-primary);
  border-bottom-color: var(--border-mid);
}



:where(.tbox-hvps-comparison-section .tbox-comparison-table tbody td) {
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  text-align: center;
}

:where(.tbox-comparison-table tr.highlight td) {
  color: var(--ahcalc-slate-900);
  font-weight: var(--fw-medium);
}



:where(.tbox-hvps-price-compare-table tbody tr:last-child td) {
  border-bottom: none;
}

:where(.tbox-hvps-price-compare-table tbody tr:nth-child(odd) td) {
  background: var(--surface-subtle);
}

:where(.tbox-hvps-price-compare-table tbody tr:hover td) {
  background: var(--brand-highlight-bg);
}

:where(.tbox-hvps-price-compare-table tbody tr[data-provider="togglebox"] td) {
  background: var(--brand-highlight-bg);
  color: var(--gray-900);
  font-weight: var(--fw-bold);
}

:where(:root[data-theme="dark"]) .tbox-hvps-price-compare-row--highlight td,
:where(:root[data-theme="dark"]) .tbox-hvps-comparison-section .tbox-comparison-chip--highlight,
:where(:root[data-theme="dark"]) .tbox-hvps-comparison-section .tbox-comparison-chip--addon,
:where(:root[data-theme="dark"]) .tbox-hvps-comparison-section .tbox-comparison-chip--limited {
  color: var(--text-primary);
}

:where(:root[data-theme="dark"]) .tbox-comparison-table tr.highlight td {
  color: var(--text-primary);
}



:where(:root[data-theme="dark"]) .tbox-hvps-price-compare-table tbody tr[data-provider="togglebox"] td {
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-comparison-table td {
  color: var(--text-secondary);
  border-bottom-color: var(--border-light);
}



.tbox-hvps-comparison-section .tbox-comparison-table tbody td:first-child {
  text-align: left;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-hvps-price-compare-table tbody td {
  border-bottom-color: var(--border-light);
}

.tbox-hvps-comparison-section .tbox-comparison-table tbody tr:last-child td {
  border-bottom: none;
}

.tbox-hvps-comparison-section .tbox-comparison-table tbody td:nth-child(2):not(.tbox-comparison__highlight) {
  background: var(--brand-primary-12);
}




.tbox-hvps-managed-infra svg {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--text-muted);
}

/* ----- PHASE 5: Tables + FAQ Enhancements ----- */

.tbox-hvps-comparison-section .tbox-comparison-table thead th:first-child {
  text-align: left;
  background: var(--gray-900);
}

:root[data-theme="dark"] .tbox-hvps-price-compare-table thead th {
  border-bottom-color: var(--border-mid);
}

#hourly-vps-configurator .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__content strong {
  display: block;
  color: var(--text-inverse);
  font-size: var(--fs-md);
  margin-bottom: 0.125rem;
}

.tbox-hvps-managed-section {
  background: var(--surface-base);
}

:root[data-theme="dark"] .tbox-hvps-managed-section {
  background: var(--surface-card);
}

@media (width > 1024px) {
.tbox-paas-compare__intro .tbox-comparison-subtitle {
    text-align: left;
  }
}



/* PGA scoping: override custom properties for compact sizing */
.tbox-hvps-performance-guard-section .tbox-pga-stage {
  --pga-dur: 10s;
  --pga-gap: 22px;
  --pga-node-w: clamp(170px, 22vw, 220px);
  --pga-node-h: 180px;
  --pga-travel-x: calc(var(--pga-node-w) + var(--pga-gap));
  --pga-travel-y: calc(var(--pga-node-h) + var(--pga-gap));
  --pga-beam-y: 122px;
  --pga-beam-thickness: 8px;
  --pga-beam-span: calc(var(--pga-gap) + 160px);
  --pga-vm-green: rgb(16 185 129 / 85%);
  --pga-vm-green-border: rgb(16 185 129 / 70%);
  --pga-vm-amber: rgb(245 158 11 / 92%);
  --pga-vm-amber-border: rgb(245 158 11 / 78%);

  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--pga-gap);
  position: relative;
  z-index: 0;
  padding: var(--space-lg) var(--space-lg-plus) 2.75rem;
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  border: 1px solid var(--tbox-hvps-border);
  box-shadow:
    0 4px 20px var(--overlay-12),
    inset 0 0 0 1px var(--brand-primary-08);
  overflow: hidden;
}

.tbox-standard-features-grid--bento-cloud .tbox-hvps-performance-guard-section .tbox-pga-stage {
  --pga-node-w: clamp(110px, 14vw, 140px);
  --pga-node-h: 140px;
  --pga-gap: var(--space-md);

  padding: var(--space-md) var(--space-lg) 4rem;
}

.tbox-hvps-performance-guard-section .tbox-pga-node {
  width: var(--pga-node-w);
  height: var(--pga-node-h);
  border-radius: var(--radius-12);
  background: var(--gray-900);
  border: 1px solid var(--brand-primary-25);
  padding: var(--space-md-plus);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm-mid);
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 12px var(--overlay-25);
}

.tbox-standard-features-grid--bento-cloud .tbox-hvps-performance-guard-section .tbox-pga-node {
  padding: var(--space-sm);
}

.tbox-hvps-performance-guard-section .tbox-pga-node-label {
  position: relative;
  z-index: 1;
  font-size: var(--fs-xs);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgb(226 232 240 / 90%);
  display: flex;
  align-items: center;
}

#content .tbox-standard-features-grid--bento-cloud .tbox-hvps-performance-guard-section .tbox-pga-node-label {
  font-size: 0.625rem; /* micro-UI: intentional literal */
  margin-bottom: 0.375rem;
}

.tbox-hvps-performance-guard-section .tbox-pga-vm {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 20px;
  border-radius: var(--radius-sm);
  background: rgb(15 23 42 / 32%);
  border: 1px solid rgb(148 163 184 / 22%);
  box-shadow: inset 0 0 0 1px rgb(2 6 23 / 22%);
  overflow: hidden;
}

.tbox-standard-features-grid--bento-cloud .tbox-hvps-performance-guard-section .tbox-pga-vm {
  height: 14px;
  margin-bottom: 5px;
  border-radius: var(--radius-xs);
}

.tbox-hvps-performance-guard-section .tbox-pga-caption {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  height: 1.4em;
  text-align: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--tbox-hvps-text-medium);
  overflow: hidden;
}

#content .tbox-standard-features-grid--bento-cloud .tbox-hvps-performance-guard-section .tbox-pga-caption {
  font-size: var(--fs-2xs);
  bottom: 0.5rem;
  height: 3.2em;
}

.tbox-standard-features-grid--bento-cloud .tbox-hvps-performance-guard-section {
  padding: 0;
  background: transparent;
}

.tbox-hvps-performance-guard-section .tbox-perf-guard-container {
  max-width: 980px;
  margin: 0 auto;
  padding: var(--space-2xl);
  border-radius: var(--radius-lg);
  background: var(--tbox-hvps-bg-light);
  border: 1px solid var(--focus-ring);
  box-shadow: 0 2px 8px var(--overlay-10);
}

.tbox-standard-features-grid--bento-cloud .tbox-hvps-performance-guard-section .tbox-perf-guard-container {
  padding: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  max-width: none;
  border-radius: 0;
}

.tbox-hvps-performance-guard-section .tbox-perf-guard-flow {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--space-lg);
  margin: 0 0 var(--space-xl);
}

.tbox-standard-features-grid--bento-cloud .tbox-hvps-performance-guard-section .tbox-perf-guard-flow {
  margin: 0;
}

.tbox-hvps-performance-guard-section .tbox-perf-guard-flow--diagram {
  flex-direction: column;
  align-items: center;
  gap: var(--space-lg);
}

.tbox-standard-features-grid--bento-cloud .tbox-hvps-performance-guard-section .tbox-perf-guard-flow--diagram {
  gap: var(--space-sm);
}

/* --- Support card — left green border + pulse --- */

.tbox-standard-features-grid--bento-cloud .tbox-hvps-availability {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--success-text);
}

.tbox-standard-features-grid--bento-cloud [data-bento-slot="support"] .tbox-hvps-availability {
  grid-column: 1 / -1;
}

.tbox-standard-features-grid--bento-cloud .tbox-hvps-availability .tbox-hvps-pulse {
  width: 8px;
  height: 8px;
  background: var(--success);
  border-radius: 50%;
  animation: cvps2Pulse 2s infinite;
}

.tbox-hourly-cloud-vps .tbox-pricing-footnote {
  margin: var(--space-md) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  text-align: center;
}

/* ============================================
   Configurator Layout
   ============================================ */
#hourly-vps-configurator {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-2xl);
  max-width: 1100px;
  margin: 0 auto;
  align-items: stretch;
  font-family: var(--calc-font);

  /* Reserve the hydrated height from first paint. The form is JS-built after an
     async bootstrap fetch that, on production behind CloudFlare, resolves ~1.4s
     in (it competes with third-party JS for the main thread). Without a floor
     the container paints collapsed (~120px) then grows to its full height when
     the form hydrates, shoving the rest of the page down — a post-paint reflow
     that measured CLS 0.21 cold (up to 0.5 with the configurator in view).
     At the max-width two-column regime (>=1136px viewport) the layout is fixed
     at ~1700px regardless of width, so this floor matches it (the form lands
     within a few px, making the release below a no-op shift); the 961-1135px
     band runs a little taller and absorbs that small remainder. The floor is
     dropped again via .is-hydrated once the form is in place so it never leaves
     dead space; the taller stacked floor is in the <=960px query below. */
  min-height: 1700px;

  /* Legacy HVPS tokens (scoped to configurator). Prefer semantic equivalents for new code. */
  --brand-blue-accent: var(--brand-primary);
  --brand-blue-primary: var(--brand-primary-dark);
  --brand-blue-deep: var(--brand-primary-deep);
  --cta-primary: var(--brand-cta);
  --cta-hover: var(--brand-highlight);
  --surface-white: var(--surface-base);
  --surface-alt: var(--surface-muted);
  --surface-dark: var(--gray-800);
  --success: var(--success);
}

/* Once the form has hydrated, drop the reservation so collapsed phases or a
   short bootstrap-error message don't leave a tall empty configurator. The
   form is always >= the floor at hydration, so this never shifts layout. The
   id+class selector outranks both the base and the stacked (<=960px) floor. */
#hourly-vps-configurator.is-hydrated {
  min-height: 0;
}

#hourly-vps-configurator > .tbox-config-card,
#hourly-vps-configurator > .tbox-hvps-form-column,
#hourly-vps-configurator > .tbox-pricing-sidebar {
  min-width: 0;
}

#hourly-vps-configurator #tbox-hvps-form-content {
  display: contents;
}

#hourly-vps-configurator .tbox-hvps-bootstrap-error {
  grid-column: 1 / -1;
  padding: var(--space-xl, 1.5rem);
  text-align: center;
  color: var(--text-muted);
}

#hourly-vps-configurator .tbox-hvps-bootstrap-error__msg {
  margin-bottom: var(--space-md, 1rem);
  font-size: 1rem;
}

#hourly-vps-configurator .tbox-hvps-bootstrap-error__retry {
  appearance: none;
  padding: 0.5rem 1.25rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm, 4px);
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
  font-size: var(--fs-base);
  font-family: inherit;
}

:where(#hourly-vps-configurator .tbox-hvps-bootstrap-error__retry:hover) {
  background: var(--surface-alt);
}

#hourly-vps-configurator .tbox-hvps-input-hint {
  display: block;
  font-size: var(--fs-xs);
  color: var(--brand-orange, #f5a623);
  margin-top: 0.25rem;
}

#hourly-vps-configurator .tbox-hvps-form-column {
  display: flex;
  flex-direction: column;
  background: var(--surface-white);
  border-radius: var(--radius-12);
  padding: 18px;
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-light);
  gap: var(--space-md);
}

/* ============================================
   Configuration Cards
   ============================================ */
#hourly-vps-configurator .tbox-config-card {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  box-sizing: border-box;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--tbox-hvps-border);
}

#hourly-vps-configurator .tbox-config-card-header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-lg-plus);
  padding-bottom: var(--space-lg);
  border-bottom: 1px solid var(--tbox-hvps-border);
}

#tbox-hvps-configure-btn svg {
  width: 18px;
  height: 18px;
}

#tbox-hvps-configure-btn.is-submitting svg {
  display: none;
}

#hourly-vps-configurator .tbox-config-card-header .tbox-config-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* ============================================
   Form Elements
   ============================================ */
#hourly-vps-configurator .tbox-form-group {
  margin-bottom: 0.625rem;
}

#hourly-vps-configurator .tbox-form-group:last-child {
  margin-bottom: 0;
}

/* Two-column row for inline selects */
#hourly-vps-configurator .tbox-form-row--two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm-plus);
  margin-bottom: 0.625rem;
}

#hourly-vps-configurator .tbox-form-row--two-col .tbox-form-group {
  margin-bottom: 0;
}

#hourly-vps-configurator .tbox-form-label {
  display: block;
  font-weight: var(--fw-semibold);
  text-transform: none;
  letter-spacing: var(--ls-normal);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-bottom: 0.375rem;
}

#hourly-vps-configurator .tbox-form-select {
  width: 100%;
  font-weight: var(--fw-medium);
  color: var(--text-primary);
  background-color: var(--text-inverse);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--tbox-hvps-transition);
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  height: 40px;
  padding: 0 2.25rem 0 0.875rem;
  font-size: var(--fs-base);
}

#hourly-vps-configurator .tbox-form-select:hover {
  border-color: var(--brand-primary);
}

#hourly-vps-configurator .tbox-form-select:focus {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 3px var(--brand-primary-bg);
}

/* Template cost display */
#hourly-vps-configurator .tbox-hvps-template-cost {
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-bg) 8%);
  border: 1px solid color-mix(in srgb, var(--border-light) 82%, var(--brand-primary) 18%);
  border-radius: var(--radius-md);
  font-family: var(--calc-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

/* ============================================
   Sliders
   ============================================ */
#hourly-vps-configurator .tbox-slider-container {
  margin-bottom: var(--space-lg);
}

#hourly-vps-configurator .tbox-slider-container:last-of-type {
  margin-bottom: 0;
}

#hourly-vps-configurator .tbox-slider-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: 2;
  margin-bottom: var(--space-sm);
}

#hourly-vps-configurator .tbox-slider-label .tbox-hvps-label-text {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: none;
  letter-spacing: var(--ls-normal);
}

#hourly-vps-configurator .tbox-slider-value {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

#hourly-vps-configurator .tbox-slider-value input[type="number"] {
  padding: 0 0.5rem;
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
  text-align: center;
  background: var(--surface-base);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  transition: all var(--tbox-hvps-transition);
  width: 64px;
  height: 32px;
  font-size: var(--fs-base);
}

/* Force native increment/decrement spinners to stay visible at rest.
   WebKit/Blink only reveals them on hover/focus by default; opacity:1 keeps
   them shown so the field reads as editable, not a preset-only display. */
#hourly-vps-configurator .tbox-slider-value input[type="number"]::-webkit-inner-spin-button,
#hourly-vps-configurator .tbox-slider-value input[type="number"]::-webkit-outer-spin-button {
  opacity: 1;
}

:where(#hourly-vps-configurator .tbox-slider-value input[type="number"]:hover) {
  border-color: var(--tbox-hvps-blue-1);
}

:where(#hourly-vps-configurator .tbox-slider-value input[type="number"]:focus) {
  outline: none;
  border-color: var(--tbox-hvps-blue-1);
  background: var(--surface-base);
}

#hourly-vps-configurator .tbox-slider-unit {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
  min-width: 36px;
}

/* Disk GB/TB Toggle */
#hourly-vps-configurator .tbox-hvps-disk-unit-toggle {
  display: inline-flex;
  border: 1px solid rgb(15 23 42 / 18%);
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
}

#hourly-vps-configurator .tbox-hvps-disk-unit-btn {
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: 1;
  padding: 4px 10px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast);
}

#hourly-vps-configurator .tbox-hvps-disk-unit-btn--active {
  background: var(--brand-primary-deep);
  color: var(--text-inverse);
}

#hourly-vps-configurator .tbox-hvps-disk-unit-btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: -2px;
}

#hourly-vps-configurator .tbox-hvps-disk-unit-btn:not(.tbox-hvps-disk-unit-btn--active):hover {
  background: rgb(15 23 42 / 14%);
}

#hourly-vps-configurator .tbox-slider-value input[type="number"].tb-mode {
  width: 72px;
}

/* Slider step buttons */
#hourly-vps-configurator .tbox-hvps-slider-stepper {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

#hourly-vps-configurator .tbox-slider-wrapper {
  --tbox-hvps-tooltip-offset: 10px;

  position: relative;
  height: 8px;
  background: rgb(15 23 42 / 10%);
  border-radius: var(--radius-xs);
  overflow: visible;
  z-index: 1;
}

#hourly-vps-configurator .tbox-hvps-slider-stepper .tbox-slider-wrapper {
  flex: 1 1 auto;
}

#hourly-vps-configurator .tbox-hvps-slider-step-btn {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-300);
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: 1;
  cursor: pointer;
  user-select: none;
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast), transform 0.05s;
}

#hourly-vps-configurator .tbox-hvps-slider-step-btn:hover {
  border-color: var(--tbox-hvps-blue-1);
  background: var(--brand-primary-14);
}

#hourly-vps-configurator .tbox-hvps-slider-step-btn:active {
  transform: translateY(1px);
}

#hourly-vps-configurator .tbox-hvps-slider-step-btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

#hourly-vps-configurator .tbox-hvps-slider-step-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  border-color: var(--gray-300);
  background: var(--surface-base);
}

/* Slider Track & Thumb */

#hourly-vps-configurator .tbox-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: var(--tbox-hvps-blue-1);
  border-radius: var(--radius-xs);
  transform: scaleX(0);
  transform-origin: left center;
  /* .animating opts into smooth transition for preset applies */
  pointer-events: none;
}

#hourly-vps-configurator .tbox-slider-wrapper input[type="range"] {
  position: absolute;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  width: 100%;
  height: 24px;
  margin: 0;
  background: transparent;
  appearance: none;
  cursor: pointer;
}

#hourly-vps-configurator .tbox-slider-wrapper input[type="range"]:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

#hourly-vps-configurator .tbox-slider-wrapper input[type="range"]:focus:not(:focus-visible) {
  outline: none;
}

#hourly-vps-configurator .tbox-slider-wrapper input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--tbox-hvps-blue-1);
  border: 3px solid var(--surface-glass-85);
  border-radius: 50%;
  box-shadow: 0 2px 4px var(--overlay-18);
  cursor: grab;
  transition: box-shadow var(--tbox-hvps-transition);
}

#hourly-vps-configurator .tbox-slider-wrapper input[type="range"]::-webkit-slider-thumb:hover {
  box-shadow: 0 2px 6px var(--overlay-25);
}

#hourly-vps-configurator .tbox-slider-wrapper input[type="range"]::-webkit-slider-thumb:active {
  cursor: grabbing;
}

#hourly-vps-configurator .tbox-slider-wrapper input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--tbox-hvps-blue-1);
  border: 3px solid var(--surface-glass-85);
  border-radius: 50%;
  box-shadow: 0 2px 4px var(--overlay-18);
  cursor: grab;
}

#hourly-vps-configurator .tbox-slider-wrapper input[type="range"]::-moz-range-track {
  background: transparent;
  border: none;
}

@media (width <= 480px) {
  #hourly-vps-configurator .tbox-slider-container {
    display: grid;
    grid-template-columns: 1fr;
    grid-template-areas:
      "label"
      "slider"
      "value";
    row-gap: var(--space-sm);
  }

  #hourly-vps-configurator .tbox-slider-label {
    display: contents;
  }

  #hourly-vps-configurator .tbox-slider-label .tbox-hvps-label-text {
    grid-area: label;
  }

  #hourly-vps-configurator .tbox-hvps-slider-stepper {
    grid-area: slider;
  }

  #hourly-vps-configurator .tbox-slider-wrapper {
    grid-area: slider;
  }

  #hourly-vps-configurator .tbox-slider-label .tbox-slider-value {
    grid-area: value;
    justify-self: start;
  }
}


/* ============================================
   VolumeCare Row
   ============================================ */
#hourly-vps-configurator .tbox-hvps-volumecare-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-lg-plus);
  margin-top: var(--space-lg-plus);
  border-top: 1px solid var(--tbox-hvps-border);
}

.tbox-hvps-comparison-section .tbox-comparison-mobile-selector label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--tbox-hvps-text-medium);
  margin-bottom: var(--space-sm);
}

#hourly-vps-configurator .tbox-hvps-volumecare-row > label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Keep "(DRaaS)" and its help icon together so the tiny "?" never
   wraps onto a line of its own at narrow widths. */
#hourly-vps-configurator .tbox-hvps-volumecare-tail {
  white-space: nowrap;
}

#hourly-vps-configurator .tbox-hvps-volumecare-tail .tbox-hvps-tooltip__content {
  white-space: normal;
}

#hourly-vps-configurator .tbox-hvps-volumecare-row .tbox-form-select {
  width: auto;
  min-width: 160px;
  height: 40px;
}

/* ============================================
   Backups Card
   ============================================ */
#hourly-vps-configurator .tbox-config-card--backups .tbox-hvps-backup-total-cost {
  margin-left: auto;
  display: inline-block;
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  background: var(--brand-primary-20);
  border: 1px solid var(--brand-primary-bg-18);
  line-height: 1.1;
  text-align: center;
  vertical-align: middle;
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--brand-blue-accent);
}

#hourly-vps-configurator .tbox-hvps-backup-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.875rem 1rem 0.875rem calc(1rem + 16px);
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  margin-bottom: 0.625rem;
}

#hourly-vps-configurator .tbox-hvps-backup-row::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-muted);
  transform: translateY(-50%);
}

#hourly-vps-configurator .tbox-hvps-backup-row:last-child {
  margin-bottom: 0;
}

#hourly-vps-configurator .tbox-hvps-backup-row--daily::before {
  background: var(--success);
}

#hourly-vps-configurator .tbox-hvps-backup-row--weekly::before {
  background: var(--tbox-hvps-backup-weekly);
}

#hourly-vps-configurator .tbox-hvps-backup-row--monthly::before {
  background: var(--tbox-hvps-backup-monthly);
}

#hourly-vps-configurator .tbox-hvps-backup__label {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

#hourly-vps-configurator .tbox-hvps-backup__controls {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
}

#hourly-vps-configurator .tbox-hvps-backup__controls label {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  cursor: pointer;
}

#hourly-vps-configurator .tbox-hvps-backup__controls input[type="radio"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  appearance: none;
  border: 2px solid var(--border-muted);
  border-radius: 50%;
  background: var(--surface-base);
  position: relative;
  transition: border-color var(--ease-fast);
}

#hourly-vps-configurator .tbox-hvps-backup__controls input[type="radio"]:checked {
  border-color: var(--tbox-hvps-blue-1);
}

#hourly-vps-configurator .tbox-hvps-backup__controls input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 8px;
  height: 8px;
  background: var(--tbox-hvps-blue-1);
  border-radius: 50%;
}

#hourly-vps-configurator .tbox-hvps-backup__count {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-left: var(--space-lg);
  border-left: 1px solid var(--tbox-hvps-border);
}

.tbox-hvps-comparison-section .tbox-comparison-mobile-selector select {
  width: 100%;
  height: 44px;
  padding: 0 2.5rem 0 1rem;
  font-size: var(--fs-lg);
  font-weight: var(--fw-medium);
  background: var(--surface-base);
  border: 1px solid var(--tbox-hvps-border);
  border-radius: var(--radius-sm-plus);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
}

#hourly-vps-configurator .tbox-hvps-backup__count select {
  height: 32px;
  padding: 0 2rem 0 0.75rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1px solid var(--tbox-hvps-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

/* Horizontal compact backup layout */
#hourly-vps-configurator .tbox-hvps-backup-row-compact {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  gap: 18px;
}

#hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  flex: 1;
  background: transparent;
  border: none;
  padding: 0;
  min-width: 0;
}

#hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item .tbox-hvps-backup__label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--text-primary);
  min-width: 50px;
  min-width: auto;
}

#hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item label {
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-secondary);
  cursor: pointer;
}

#hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item input[type="radio"] {
  width: 14px;
  height: 14px;
  cursor: pointer;
  appearance: none;
  border: 2px solid var(--border-muted);
  border-radius: 50%;
  background: var(--surface-base);
  position: relative;
  transition: border-color var(--ease-fast);
}

#hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item input[type="radio"]:checked {
  border-color: var(--tbox-hvps-blue-1);
}

#hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item input[type="radio"]:checked::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 6px;
  height: 6px;
  background: var(--tbox-hvps-blue-1);
  border-radius: 50%;
}

/* Backup count - display below the controls */
#hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item .tbox-hvps-backup__count {
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-secondary);
  width: auto;
  padding-top: 0;
  margin-top: 0;
  border-top: none;
  border-left: none;
  padding-left: 0;
}

:where(#hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item .tbox-hvps-backup__count select) {
  height: 28px;
  padding: 0 1.75rem 0 0.5rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  background: var(--surface-base);
  border: 1px solid var(--tbox-hvps-border);
  border-radius: var(--radius-xs);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
}

#hourly-vps-configurator .tbox-hvps-backup__addons-note {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm-plus) var(--space-lg);
  border-radius: var(--radius-md);
  background: var(--brand-cta-16);
  border: 1px solid var(--brand-cta-bg-soft);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: var(--prose-measure-default);
}

/* ============================================
   Pricing Sidebar
   ============================================ */
#hourly-vps-configurator .tbox-pricing-sidebar {
  position: relative;
  width: 100%;
  min-width: 0;
  /* align-self: stretch inherited from grid's align-items: stretch */
}

#hourly-vps-configurator .tbox-pricing-card-header {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  margin-bottom: 10px;
  color: var(--text-muted);
}

#hourly-vps-configurator .tbox-pricing-total {
  margin-bottom: var(--space-xl);
}

/* Pricing Breakdown */
#hourly-vps-configurator .tbox-pricing-breakdown {
  border-top: 1px solid var(--surface-glass-10);
  padding-top: var(--space-lg-plus);
  margin-bottom: var(--space-xl);
  border-top-color: var(--border-light);
}

#hourly-vps-configurator .tbox-pricing-breakdown-title {
  font-size: var(--fs-2xs);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  justify-content: space-between;
  color: var(--text-muted);
}

#hourly-vps-configurator .tbox-pricing-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-sm) 0;
  font-size: var(--fs-sm);
  border-bottom: 1px solid var(--surface-glass-05);
  border-bottom-color: var(--border-light);
  color: var(--text-secondary);
}

#hourly-vps-configurator .tbox-pricing-row:last-child {
  border-bottom: none;
}

.tbox-hvps-comparison-section .comparison-mobile-row .tbox-pricing-row__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--tbox-hvps-text-medium);
  margin-bottom: 0.375rem;
}

#hourly-vps-configurator .tbox-pricing-row .tbox-pricing-row__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-secondary);
}

#hourly-vps-configurator .tbox-pricing-row .tbox-pricing-row__icon {
  display: none;
}

#hourly-vps-configurator .tbox-pricing-row .tbox-pricing-row__label .tbox-pricing-row__icon {
  width: 14px;
  height: 14px;
  opacity: 0.6;
}

#hourly-vps-configurator .tbox-pricing-row .tbox-pricing-row__value {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

/* Static info rows (bandwidth, etc.) */
#hourly-vps-configurator .tbox-pricing-row--static .tbox-pricing-row__value {
  color: var(--success);
  font-weight: var(--fw-semibold);
}

/* Discount Info */
#hourly-vps-configurator #tbox-hvps-discount-info {
  background: var(--brand-cta-16);
  border: 1px solid color-mix(in srgb, var(--brand-highlight) 35%, transparent);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  margin-bottom: var(--space-lg-plus);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/* Configure Button */
#tbox-hvps-configure-btn:hover {
  background: var(--tbox-btn-accent-bg-hover);
  box-shadow: none;
  filter: saturate(1.05);
}

#tbox-hvps-configure-btn:active {
  transform: translateY(0);
}

#hourly-vps-configurator #tbox-hvps-configure-btn {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm-plus);
  font-size: var(--fs-lg);
  border: none;
  transition: background var(--ease-base), color var(--ease-base),
              box-shadow var(--ease-base), filter var(--ease-fast);
  background: var(--cta-primary);
  color: var(--brand-cta-ink);
  box-shadow: none;
  position: relative;
  /* Must stay below the share popover panel so its controls remain clickable */
  z-index: var(--z-above);
}

/* ============================================
   Loading State
   ============================================ */
.tbox-hvps-loading {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-3xl);
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.tbox-hvps-loading::after {
  content: '';
  width: 20px;
  height: 20px;
  margin-left: var(--space-md);
  border: 2px solid var(--border-light);
  border-top-color: var(--tbox-hvps-blue-1);
  border-radius: 50%;
  animation: hvps-spin 0.8s linear infinite;
}

@media (width <= 960px) {
  #hourly-vps-configurator {
    grid-template-columns: minmax(0, 1fr);
    max-width: 760px;
    gap: var(--space-lg-plus);

    /* Stacked single-column layout is taller (form over sidebar). Floor sits
       just below the shortest stacked height (~2399px at 960px) so it never
       leaves a gap; narrower phones run taller still and grow below the fold. */
    min-height: 2300px;
  }

  #hourly-vps-configurator .tbox-pricing-sidebar {
    position: relative;
    top: 0;
    order: 0;
    max-height: none;
    overflow: visible;
  }

  #hourly-vps-configurator .tbox-pricing-card {
    display: block;
    padding: var(--space-lg-plus);
  }

  #hourly-vps-configurator .tbox-pricing-breakdown {
    border-left: none;
    border-top: 1px solid var(--surface-glass-10);
    padding-left: 0;
    padding-top: var(--space-lg);
    margin-top: var(--space-lg);
    margin-bottom: 0;
  }
}

@media (width <= 640px) {
  #hourly-vps-configurator .tbox-config-card {
    padding: var(--space-lg-plus);
    border-radius: var(--radius-lg);
  }

  /* Stack two-column row on mobile */
  #hourly-vps-configurator .tbox-form-row--two-col {
    grid-template-columns: 1fr;
  }

  #hourly-vps-configurator .tbox-hvps-backup-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  #hourly-vps-configurator .tbox-hvps-backup__controls {
    width: 100%;
    flex-wrap: wrap;
  }

  /* Stack compact backups on mobile */
  #hourly-vps-configurator .tbox-hvps-backup-row-compact {
    flex-direction: column;
  }

  #hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item {
    width: 100%;
    min-width: auto;
  }

  #hourly-vps-configurator .tbox-hvps-backup__count {
    width: 100%;
    padding-left: 0;
    padding-top: var(--space-md);
    border-left: none;
    border-top: 1px solid var(--tbox-hvps-border);
  }

  #hourly-vps-configurator .tbox-hvps-volumecare-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm-plus);
  }

  #hourly-vps-configurator .tbox-hvps-volumecare-row .tbox-form-select {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
:where(#hourly-vps-configurator *),
  :where(#hourly-vps-configurator *::before),
  :where(#hourly-vps-configurator *::after),
  :where(.tbox-hvps-comparison-section *),
  :where(.tbox-hvps-comparison-section *::before),
  :where(.tbox-hvps-comparison-section *::after) {
    animation-duration: 0.01ms;
    transition-duration: 0.01ms;
  }
}


#hourly-vps-configurator #tbox-hvps-configure-btn:focus-visible {
  outline: 3px solid var(--brand-highlight);
  outline-offset: 3px;
}

#hourly-vps-configurator .tbox-form-select:focus-visible,
:where(#hourly-vps-configurator .tbox-slider-value input[type="number"]:focus-visible) {
  outline: var(--focus-outline-width) solid var(--tbox-hvps-blue-1);
  outline-offset: var(--focus-outline-offset);
}

/* ============================================
   Tooltip Styles
   ============================================ */
#hourly-vps-configurator .tbox-hvps-tooltip__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin: -14px -10px -14px 2px;
  background: transparent;
  border: none;
  padding: 0;
  border-radius: 50%;
  font-size: var(--fs-2xs);
  cursor: help;
  position: relative;
  vertical-align: middle;
  line-height: 1;
}

#hourly-vps-configurator .tbox-hvps-tooltip__trigger::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 16px;
  transform: translate(-50%, -50%);
  background: var(--surface-glass-20);
  border-radius: 50%;
  pointer-events: none;
}

#hourly-vps-configurator .tbox-hvps-tooltip__trigger > :not(.tbox-hvps-tooltip__content) {
  position: relative;
  z-index: 1;
}

#hourly-vps-configurator .tbox-hvps-tooltip__trigger:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-highlight);
  outline-offset: 3px;
}

#hourly-vps-configurator .tbox-hvps-tooltip__content {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  max-width: calc(100vw - 32px);
  padding: var(--space-md);
  margin-bottom: var(--space-sm);
  background: var(--gray-800);
  border: 1px solid var(--surface-glass-10);
  border-radius: var(--radius-sm-plus);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  color: var(--gray-200);
  text-align: left;
  box-shadow: 0 4px 12px var(--overlay-30);
  z-index: 100;
}

/* No-JS fallback — suppressed when JS is ready */
#hourly-vps-configurator:not(.tbox-tooltip-js-ready) .tbox-hvps-tooltip__trigger:hover .tbox-hvps-tooltip__content,
#hourly-vps-configurator:not(.tbox-tooltip-js-ready) .tbox-hvps-tooltip__trigger:focus-within .tbox-hvps-tooltip__content,
#hourly-vps-configurator:not(.tbox-tooltip-js-ready) .tbox-hvps-tooltip__trigger.is-open .tbox-hvps-tooltip__content {
  display: block;
}

#hourly-vps-configurator .tbox-hvps-tooltip__content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--gray-800);
}

#tbox-hvps-floating-tip {
  position: fixed;
  width: 280px;
  max-width: calc(100vw - 32px);
  padding: var(--space-md);
  background: var(--gray-800);
  border: 1px solid var(--surface-glass-10);
  border-radius: var(--radius-sm-plus);
  font-size: var(--fs-sm);
  font-weight: var(--fw-normal);
  line-height: var(--lh-relaxed);
  color: var(--gray-200);
  text-align: left;
  box-shadow: 0 4px 12px var(--overlay-30);
  z-index: 300;
  pointer-events: none;
  transform: translateX(-50%);
  display: none;
}

#tbox-hvps-floating-tip.is-visible { display: block; }

#tbox-hvps-floating-tip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--gray-800);
}

#tbox-hvps-floating-tip.tbox-hvps-floating-tip--below::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: var(--gray-800);
}

#hourly-vps-configurator .tbox-pricing-card .cta-microcopy {
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--gray-100);
  text-align: center;
  letter-spacing: var(--ls-wide);
}

/* Pricing trust line in sidebar */
#hourly-vps-configurator .tbox-pricing-card .tbox-pricing-trust-line {
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--gray-100);
  text-align: center;
}

#hourly-vps-configurator .tbox-pricing-card .tbox-pricing-cap-note {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-xs);
  text-align: center;
  letter-spacing: var(--ls-wide);
  color: var(--text-muted);
}

/* ============================================
   Competitor Price Comparison Section
   ============================================ */
#tbox-hvps-price-comparison-section {
  background: var(--surface-base);
  padding: var(--space-3xl) var(--space-xl);
}

.tbox-hvps-price-compare-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.tbox-hvps-price-compare-title {
  font-size: var(--fs-card-price);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
}

.tbox-hvps-price-compare-subtitle {
  font-size: var(--fs-lg);
  color: var(--text-muted);
  margin: 0 0 var(--space-xl);
}

.tbox-hvps-price-compare-controls {
  display: flex;
  justify-content: center;
  margin: 0 0 var(--space-lg);
}

.tbox-hvps-price-compare-control {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
}

.tbox-hvps-price-compare-control-label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.tbox-hvps-price-compare-tier {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  padding: var(--space-2xs) var(--space-sm-plus);
  border: 1px solid var(--gray-300);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-primary);
}

.tbox-hvps-price-compare-tier:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.tbox-hvps-price-compare-status {
  font-size: var(--fs-md);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg);
}

.tbox-hvps-price-compare-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tbox-hvps-price-compare-table {
  width: 100%;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.tbox-hvps-price-compare-table thead {
  background: var(--gray-50);
}

.tbox-hvps-price-compare-table thead th.is-num,
.tbox-hvps-price-compare-table tbody td.is-num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.tbox-hvps-price-compare-waste {
  display: block;
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

.tbox-hvps-price-compare-footnote {
  font-size: var(--fs-sm);
  color: var(--text-disabled);
  margin: 1rem 0 0;
  font-style: italic;
}

/* Togglebox highlight row */

.tbox-hvps-price-compare-features {
  display: block;
  font-size: var(--fs-xs);
  color: var(--state-success-text);
  font-weight: var(--fw-medium);
  margin-top: var(--space-xs);
}

.tbox-hvps-price-compare-meta {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
  margin-top: var(--space-xs);
}

.tbox-hvps-price-compare-waste--none {
  color: var(--state-success-text);
  font-weight: var(--fw-semibold);
}

/* Compare Mode Toggle */
.tbox-hvps-compare-mode-toggle {
  display: inline-flex;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  overflow: hidden;
}

.tbox-hvps-compare-mode-btn {
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  padding: 0.5rem 0.875rem;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast);
  white-space: nowrap;
}

.tbox-hvps-compare-mode-btn:hover {
  background: rgb(15 23 42 / 14%);
}

.tbox-hvps-compare-mode-btn--active {
  background: var(--brand-primary-deep);
  color: var(--text-inverse);
}

.tbox-hvps-compare-mode-btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: -2px;
}

:root[data-theme="dark"] .tbox-hvps-compare-mode-btn {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-hvps-compare-mode-btn:hover {
  background: var(--surface-glass-08);
  color: var(--text-primary);
}

/* Compare Mode Disclaimer */
.tbox-hvps-compare-mode-disclaimer {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: var(--space-md) 0 0;
  font-style: italic;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

/* Default: show reliability framing unless a mode class overrides it */
.tbox-hvps-compare-mode-disclaimer--base {
  display: none;
}

/* Mode-driven visibility (set via JS on #tbox-hvps-price-comparison-section) */
#tbox-hvps-price-comparison-section.tbox-hvps-compare-mode--base .tbox-hvps-compare-mode-disclaimer--reliability {
  display: none;
}

#tbox-hvps-price-comparison-section.tbox-hvps-compare-mode--base .tbox-hvps-compare-mode-disclaimer--base {
  display: block;
}

/* Price label swap (Base vs Equivalent reliability) */
.tbox-hvps-price-compare-price--base {
  display: none;
}

#tbox-hvps-price-comparison-section.tbox-hvps-compare-mode--reliability .tbox-hvps-price-compare-price--plain {
  display: none;
}

#tbox-hvps-price-comparison-section.tbox-hvps-compare-mode--reliability .tbox-hvps-price-compare-price--base {
  display: inline;
}

/* HA Badge (Togglebox row) */
.tbox-hvps-ha-badge {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--state-success-text);
  background: var(--state-success-bg-soft);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
  margin-left: 0.375rem;
  vertical-align: middle;
  cursor: help;
}

/* Reliability Note (Competitor rows) */
.tbox-hvps-reliability-note {
  display: inline-block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--text-secondary);
  background: rgb(15 23 42 / 14%);
  padding: 0.2rem var(--space-xs-plus);
  border-radius: var(--radius-xs);
  margin-top: var(--space-xs);
  cursor: help;
}

#tbox-hvps-price-comparison-section.tbox-hvps-compare-mode--base .tbox-hvps-reliability-note {
  display: none;
}

/* Overbuy / waste cell */
.tbox-hvps-waste {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.tbox-hvps-waste-label {
  display: inline-block;
  width: fit-content;
  font-size: 0.625rem; /* micro-UI: intentional literal */
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: 0.18rem 0.4rem;
  border-radius: var(--radius-sm);
}

.tbox-hvps-waste-label--exact {
  color: var(--state-success-text);
  background: var(--state-success-bg-soft);
}

.tbox-hvps-waste-label--overbuy {
  color: var(--state-warning-text);
  background: var(--state-warning-bg);
}

.tbox-hvps-waste-bars {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.tbox-hvps-waste-bar {
  display: flex;
  height: 6px;
  border-radius: var(--radius-cap);
  overflow: hidden;
  background: var(--gray-200);
}

.tbox-hvps-waste-bar-needed,
.tbox-hvps-waste-bar-unused {
  display: block;
  height: 100%;
}

.tbox-hvps-waste-bar-needed {
  background: color-mix(in srgb, var(--brand-primary) 90%, transparent);
}

.tbox-hvps-waste-bar-unused {
  background: rgb(245 158 11 / 85%);
}

.tbox-hvps-waste-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

.tbox-hvps-waste-text {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-weight: var(--fw-medium);
}

/* Price comparison insights (callout + micro-summary) */
.tbox-hvps-price-compare-insight {
  margin: 1rem 0 0;
}

.tbox-hvps-price-compare-callout {
  margin: var(--space-md) auto 0;
  padding: var(--space-md) var(--space-lg);
  max-width: 720px;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  background: var(--brand-primary-06);
  color: var(--text-secondary);
  font-style: italic;
}

.tbox-hvps-price-compare-summary {
  margin: var(--space-md) auto 0;
  max-width: 720px;
  font-size: var(--fs-md);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

@media (width <= 768px) {
  :where(.tbox-hvps-price-compare-table th), :where(.tbox-hvps-price-compare-table td) {
    padding: 0.75rem 0.625rem;
    font-size: var(--fs-sm);
  }

  .tbox-hvps-price-compare-title {
    font-size: var(--fs-heading-md);
  }

  .tbox-hvps-price-compare-control {
    padding: 0.5rem 0.625rem;
  }

  .tbox-hvps-price-compare-tier {
    font-size: var(--fs-base);
  }

  .tbox-hvps-price-compare-controls {
    flex-direction: column;
    gap: var(--space-sm);
  }

  .tbox-hvps-compare-mode-toggle {
    width: 100%;
    justify-content: center;
  }

  .tbox-hvps-compare-mode-btn {
    flex: 1;
    font-size: var(--fs-base);
    padding: var(--space-sm);
  }

  .tbox-hvps-ha-badge {
    display: block;
    margin-left: 0;
    margin-top: var(--space-xs);
  }
}


/* ============================================
   REMOVED: Provider Plan Grid (PPG)
   ============================================ */

/* ============================================
   Comparison Table Section
   ============================================ */
.tbox-hvps-comparison-section {
  background: var(--tbox-hvps-bg-light);
  padding: var(--space-3xl) var(--space-xl);
}

.tbox-hvps-comparison-section .tbox-comparison-container {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
}

.tbox-comparison-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -1rem;
  padding: 0 var(--space-lg);
}



.tbox-hvps-comparison-section .tbox-comparison-table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tbox-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-base);
  border-radius: var(--radius-12);
  overflow: hidden;
  box-shadow: 0 1px 3px var(--overlay-10);
}



.tbox-hvps-comparison-section .tbox-comparison-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  text-align: left;
}

.tbox-hvps-comparison-section .tbox-comparison-table thead th.tbox-comparison__highlight {
  background: var(--brand-primary-dark);
  box-shadow: inset 0 -3px 0 var(--brand-highlight);
}

.tbox-hvps-comparison-section .tbox-comparison-table tbody td.tbox-comparison__highlight {
  background: var(--brand-primary-bg);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.tbox-hvps-comparison-section .tbox-comparison-table tbody tr:hover {
  background: var(--surface-subtle);
}

.tbox-hvps-comparison-section .tbox-comparison-table tbody tr:hover td.tbox-comparison__highlight {
  background: var(--brand-primary-12);
}

.tbox-hvps-comparison-section .tbox-comparison-table .tbox-comparison__check {
  color: var(--brand-primary-text);
  font-weight: var(--fw-bold);
  margin-right: var(--space-xs);
}

/* Status indicators (use within comparison tables) */
.tbox-hvps-comparison-section .tbox-comparison-included { color: var(--brand-primary-text); }

.tbox-hvps-comparison-section .tbox-comparison-addon { color: var(--state-warning-text); }

.tbox-hvps-comparison-section .tbox-comparison-unavailable { color: var(--calc-slate-400); }

.tbox-comparison-footnote {
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--ahcalc-slate-500);
  margin: var(--space-xl) 0 0;
}



.tbox-hvps-comparison-section .tbox-comparison-footnote {
  font-size: var(--fs-sm);
  color: var(--text-disabled);
  margin: 1rem 0 0;
  font-style: italic;
}

/* Comparison Section - Compare Mode Toggle */
.tbox-hvps-comparison-section .tbox-hvps-compare-mode-toggle {
  display: flex;
  justify-content: center;
  margin: 1rem auto 0;
}

/* Comparison Framing Note */
.tbox-hvps-comparison-section .tbox-comparison-framing-note {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  margin: var(--space-md) auto 1.25rem;
  font-style: italic;
  max-width: 600px;
  text-align: center;
}

/* Column Badge (HA Included in header) */
.tbox-hvps-column-badge {
  display: inline-block;
  font-size: 0.625rem; /* micro-UI: intentional literal */
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  color: var(--state-success-text);
  background: rgb(21 128 61 / 20%);
  padding: 0.2rem var(--space-xs-plus);
  border-radius: var(--radius-2xs);
  margin-left: var(--space-xs);
  vertical-align: middle;
  cursor: help;
}

/* Tooltip Icon */
.tbox-hvps-comparison-section .tbox-hvps-tooltip__icon {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  cursor: help;
  margin-left: var(--space-xs);
}

/* Feature Item Highlight (HA feature) */
.tbox-hvps-comparison-section .tbox-card--highlight {
  background: var(--brand-primary-08);
  border: 1px solid rgb(21 128 61 / 20%);
  border-radius: var(--radius-lg, var(--radius-12));
  padding: var(--space-lg);
}

.tbox-hvps-comparison-section .tbox-card--highlight .feature-title {
  color: var(--state-success-text);
  font-weight: var(--fw-bold);
}

@media (width <= 768px) {
  :where(.tbox-hvps-comparison-section .tbox-comparison-table th), :where(.tbox-hvps-comparison-section .tbox-comparison-table td) {
    padding: 0.75rem 0.625rem;
    font-size: var(--fs-sm);
  }

  :where(.tbox-hvps-comparison-section .tbox-comparison-container h2) {
    font-size: var(--fs-heading-md);
  }

  .tbox-hvps-comparison-section .tbox-hvps-compare-mode-toggle {
    flex-direction: column;
    gap: var(--space-sm);
    width: 100%;
    max-width: 300px;
  }

  .tbox-hvps-comparison-section .tbox-hvps-compare-mode-btn {
    width: 100%;
  }

  .tbox-hvps-column-badge {
    display: block;
    margin-left: 0;
    margin-top: var(--space-xs);
  }
}


/* ============================================
   Performance Guard Section
   ============================================ */
.tbox-hvps-performance-guard-section.tbox-hourly-cloud-vps {
  padding: var(--space-3xl) var(--space-xl);
  background: var(--surface-base);
}

.tbox-hvps-performance-guard-section .tbox-perf-guard-animation {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}

.tbox-hvps-performance-guard-section .tbox-pga-legend {
  display: inline-block;
  margin-top: var(--space-sm-mid);
  padding: var(--space-xs-plus) var(--space-md);
  border-radius: var(--radius-sm-plus);
  background: var(--brand-primary-14);
  border: 1px solid var(--brand-primary-22);
  color: var(--tbox-hvps-text-medium);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
  max-width: 100%;
  box-shadow: 0 2px 8px var(--brand-primary-10);
}

.tbox-hvps-performance-guard-section .tbox-pga-stage::after {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--pga-beam-y);
  transform: translate(-50%, -50%);
  width: var(--pga-beam-span);
  height: var(--pga-beam-thickness);
  border-radius: var(--radius-cap);
  background: rgb(56 189 248 / 50%);
  opacity: 0;
  pointer-events: none;
  z-index: 0;
  animation: pga-beam-x var(--pga-dur) infinite linear;
}


.tbox-hvps-performance-guard-section .tbox-pga-node-a {
  z-index: 2;
}

.tbox-hvps-performance-guard-section .tbox-pga-node-b {
  z-index: 1;
  animation: pga-node-b-accept var(--pga-dur) infinite ease-in-out;
}

.tbox-hvps-performance-guard-section .tbox-pga-node-label::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pga-vm-green);
  margin-right: 6px;
  animation: pga-status-pulse 2s infinite ease-in-out;
}

.tbox-hvps-performance-guard-section .tbox-pga-vm::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0);
  background: var(--pga-vm-green);
}

.tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--healthy {
  border-color: rgb(16 185 129 / 35%);
}

.tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--healthy::before {
  transform: scaleX(0.42);
  background: var(--pga-vm-green);
  animation: pga-load-healthy 5.75s infinite ease-in-out;
}

.tbox-hvps-performance-guard-section .tbox-pga-node-b .tbox-pga-vm.tbox-pga-vm--healthy::before {
  transform: scaleX(0.02);
  animation-name: pga-load-healthy-node-b;
}

.tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--empty {
  opacity: 0.25;
}

.tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--empty::before {
  transform: scaleX(0);
  background: transparent;
  animation: none;
}

.tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--noisy {
  z-index: 3;
  border-color: rgb(16 185 129 / 35%);
  will-change: transform;
  animation: pga-migrate-x var(--pga-dur) infinite ease-in-out;
}

.tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--noisy::before {
  transform: scaleX(0.44);
  background: var(--pga-vm-green);
  animation: pga-load-noisy var(--pga-dur) infinite ease-in-out;
}

.tbox-hvps-performance-guard-section .tbox-pga-node-a .tbox-pga-vm.tbox-pga-vm--healthy:nth-of-type(2)::before {
  animation-delay: -0.7s;
}

.tbox-hvps-performance-guard-section .tbox-pga-node-a .tbox-pga-vm.tbox-pga-vm--healthy:nth-of-type(3)::before {
  animation-delay: -2.1s;
}

.tbox-hvps-performance-guard-section .tbox-pga-node-b .tbox-pga-vm.tbox-pga-vm--healthy:nth-of-type(2)::before {
  animation-delay: -1.9s;
}

.tbox-hvps-performance-guard-section .tbox-pga-node-b .tbox-pga-vm.tbox-pga-vm--healthy:nth-of-type(3)::before {
  animation-delay: -0.4s;
}

.tbox-hvps-performance-guard-section .tbox-pga-badge {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 10px;
  transform: translateX(-50%);
  padding: var(--space-xs-plus) var(--space-sm-plus);
  border-radius: var(--radius-sm-plus);
  background: rgb(2 132 199 / 20%);
  border: 1px solid rgb(2 132 199 / 25%);
  color: var(--tbox-hvps-blue-2);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-align: center;
  white-space: nowrap;
}

@keyframes pga-load-healthy {
  0% {
    transform: scaleX(0.12);
  }

  18% {
    transform: scaleX(0.48);
  }

  37% {
    transform: scaleX(0.22);
  }

  58% {
    transform: scaleX(0.5);
  }

  76% {
    transform: scaleX(0.18);
  }

  92% {
    transform: scaleX(0.18);
  }

  100% {
    transform: scaleX(0.12);
  }
}

@keyframes pga-load-healthy-node-b {
  0% {
    transform: scaleX(0.02);
  }

  18% {
    transform: scaleX(0.19);
  }

  37% {
    transform: scaleX(0.07);
  }

  58% {
    transform: scaleX(0.2);
  }

  76% {
    transform: scaleX(0.05);
  }

  92% {
    transform: scaleX(0.05);
  }

  100% {
    transform: scaleX(0.02);
  }
}

@keyframes pga-load-noisy {
  0% {
    transform: scaleX(0.18);
    background: var(--pga-vm-green);
  }

  10% {
    transform: scaleX(0.5);
    background: var(--pga-vm-green);
  }

  20% {
    transform: scaleX(0.28);
    background: var(--pga-vm-green);
  }

  26%, 28%, 48%, 56% {
    transform: scaleX(0.75);
    background: var(--pga-vm-amber);
  }

  62% {
    transform: scaleX(0.42);
    background: var(--pga-vm-green);
  }

  66%, 78% {
    transform: scaleX(0.35);
    background: var(--pga-vm-green);
  }

  88% {
    transform: scaleX(0.22);
    background: var(--pga-vm-green);
  }

  100% {
    transform: scaleX(0.18);
    background: var(--pga-vm-green);
  }
}

@keyframes pga-migrate-x {
  0%,
  20% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    border-color: var(--pga-vm-green-border);
  }

  25% {
    transform: translate3d(0, 0, 0) scale(1.01);
    border-color: var(--pga-vm-amber-border);
  }

  28% {
    transform: translate3d(0, -4px, 0) scale(1.06);
    border-color: var(--pga-vm-amber-border);
  }

  48% {
    transform: translate3d(0, -4px, 0) scale(1.06);
    border-color: var(--pga-vm-amber-border);
  }

  56% {
    transform: translate3d(var(--pga-travel-x), -4px, 0) scale(0.98);
    opacity: 0.92;
    border-color: var(--pga-vm-amber-border);
  }

  58% {
    transform: translate3d(var(--pga-travel-x), 0, 0) scale(1);
    opacity: 1;
    border-color: var(--pga-vm-green-border);
  }

  78% {
    transform: translate3d(var(--pga-travel-x), 0, 0) scale(1);
    opacity: 1;
    border-color: var(--pga-vm-green-border);
  }

  82% {
    transform: translate3d(var(--pga-travel-x), 0, 0) scale(1);
    opacity: 0;
    border-color: var(--pga-vm-green-border);
  }

  83% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0;
    border-color: var(--pga-vm-green-border);
  }

  88%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    border-color: var(--pga-vm-green-border);
  }
}

@keyframes pga-migrate-y {
  0%,
  20% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    border-color: var(--pga-vm-green-border);
  }

  25% {
    transform: translate3d(0, 0, 0) scale(1.01);
    border-color: var(--pga-vm-amber-border);
  }

  28% {
    transform: translate3d(0, -4px, 0) scale(1.06);
    border-color: var(--pga-vm-amber-border);
  }

  48% {
    transform: translate3d(0, -4px, 0) scale(1.06);
    border-color: var(--pga-vm-amber-border);
  }

  56% {
    transform: translate3d(0, var(--pga-travel-y), 0) scale(0.98);
    opacity: 0.92;
    border-color: var(--pga-vm-amber-border);
  }

  58% {
    transform: translate3d(0, var(--pga-travel-y), 0) scale(1);
    opacity: 1;
    border-color: var(--pga-vm-green-border);
  }

  78% {
    transform: translate3d(0, var(--pga-travel-y), 0) scale(1);
    opacity: 1;
    border-color: var(--pga-vm-green-border);
  }

  82% {
    transform: translate3d(0, var(--pga-travel-y), 0) scale(1);
    opacity: 0;
    border-color: var(--pga-vm-green-border);
  }

  83% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 0;
    border-color: var(--pga-vm-green-border);
  }

  88%, 100% {
    transform: translate3d(0, 0, 0) scale(1);
    opacity: 1;
    border-color: var(--pga-vm-green-border);
  }
}

@keyframes pga-beam-x {
  0%, 46% { opacity: 0; }

  48%, 58% { opacity: 0.9; }

  64%, 100% { opacity: 0; }
}

@keyframes pga-beam-y {
  0%, 46% { opacity: 0; }

  48%, 58% { opacity: 0.9; }

  64%, 100% { opacity: 0; }
}

@keyframes pga-node-b-accept {
  0%,
  54%,
  80%,
  100% {
    box-shadow: 0 4px 12px var(--overlay-25);
    border-color: var(--brand-primary-25);
  }

  58% {
    box-shadow:
      0 0 0 2px rgb(56 189 248 / 30%),
      0 4px 12px var(--overlay-25);
    border-color: rgb(56 189 248 / 50%);
  }

  64%, 78% {
    box-shadow:
      0 0 0 1px rgb(56 189 248 / 15%),
      0 4px 12px var(--overlay-25);
    border-color: var(--brand-primary-25);
  }
}

@keyframes pga-status-pulse {
  0%, 100% { opacity: 0.7; }

  50% { opacity: 1; }
}

/* --- PGA caption (cycling text below animation) --- */

.tbox-hvps-performance-guard-section .tbox-pga-caption-1 {
  animation: pga-caption-cycle-1 10s infinite ease-in-out;
}

.tbox-hvps-performance-guard-section .tbox-pga-caption-2 {
  animation: pga-caption-cycle-2 10s infinite ease-in-out;
}

@keyframes pga-caption-cycle-1 {
  0%, 22%   { opacity: 0; }

  28%, 48%  { opacity: 1; }

  54%, 100% { opacity: 0; }
}

@keyframes pga-caption-cycle-2 {
  0%, 52%   { opacity: 0; }

  58%, 78%  { opacity: 1; }

  84%, 100% { opacity: 0; }
}

@media (width <= 900px) {
  .tbox-hvps-performance-guard-section .tbox-pga-stage {
    flex-direction: column;
    align-items: center;

    --pga-node-w: min(420px, 100%);
    --pga-beam-span: calc(var(--pga-gap) + 140px);
  }

  .tbox-hvps-performance-guard-section .tbox-pga-stage::after {
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: var(--pga-beam-thickness);
    height: var(--pga-beam-span);
    background: rgb(56 189 248 / 50%);
    animation-name: pga-beam-y;
  }

  .tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--noisy {
    animation-name: pga-migrate-y;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--healthy::before {
    animation: none;
    transform: scaleX(0.42);
  }

  .tbox-hvps-performance-guard-section .tbox-pga-node-b .tbox-pga-vm.tbox-pga-vm--healthy::before {
    transform: scaleX(0.12);
  }

  .tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--noisy {
    animation: none;
    border-color: var(--pga-vm-amber-border);
  }

  .tbox-hvps-performance-guard-section .tbox-pga-vm.tbox-pga-vm--noisy::before {
    animation: none;
    transform: scaleX(0.75);
    background: var(--pga-vm-amber);
  }

  .tbox-hvps-performance-guard-section .tbox-pga-stage::after {
    animation: none;
    opacity: 0;
  }

  .tbox-hvps-performance-guard-section .tbox-pga-node-b {
    animation: none;
  }

  .tbox-hvps-performance-guard-section .tbox-pga-node-label::before {
    animation: none;
    opacity: 0.85;
  }

  .tbox-hvps-performance-guard-section .tbox-pga-caption span {
    animation: none;
  }

  .tbox-hvps-performance-guard-section .tbox-pga-caption-1 {
    opacity: 1;
  }
}

@media (width <= 900px) {
  .tbox-hvps-performance-guard-section .tbox-perf-guard-flow {
    flex-direction: column;
  }
}

@media (width <= 768px) {
  .tbox-hvps-performance-guard-section .tbox-perf-guard-container {
    padding: var(--space-xl);
  }
}


/* ============================================
   Comparison Cards (Mobile)
   ============================================ */
.tbox-hvps-comparison-section .tbox-comparison-cards {
  display: none;
}

@media (width <= 768px) {
  body.tbox-hvps-compare-cards-ready .tbox-hvps-comparison-section .tbox-comparison-table-wrapper {
    display: none;
  }

  body.tbox-hvps-compare-cards-ready .tbox-hvps-comparison-section .tbox-comparison-cards {
    display: grid;
    gap: var(--space-lg);
    text-align: left;
  }
}


.tbox-hvps-comparison-section .tbox-comparison-card {
  background: var(--surface-base);
  border: 1px solid var(--tbox-hvps-border);
  border-radius: var(--radius-12);
  padding: var(--space-lg);
  box-shadow: var(--tbox-hvps-shadow);
}

.tbox-hvps-comparison-section .tbox-comparison-card--highlight {
  border-color: var(--focus-ring);
  box-shadow: 0 4px 12px rgb(4 115 169 / 10%);
}

.tbox-hvps-comparison-section .tbox-comparison-card-title {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.tbox-hvps-comparison-section .tbox-comparison-card-facts {
  margin: 0;
}

.tbox-hvps-comparison-section .tbox-comparison-card-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--space-md);
  padding: 0.625rem 0;
  border-top: 1px solid var(--border-light);
}

.tbox-hvps-comparison-section .tbox-comparison-card-row:first-child {
  border-top: none;
  padding-top: 0;
}

.tbox-hvps-comparison-section .tbox-comparison-card-row dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.tbox-hvps-comparison-section .tbox-comparison-card-row dd {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-align: right;
}

.tbox-hvps-comparison-section .tbox-comparison-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.15rem 0.5rem;
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  border: 1px solid transparent;
  white-space: nowrap;
}

.tbox-hvps-comparison-section .tbox-comparison-chip--highlight {
  background: var(--brand-highlight-bg);
  border-color: color-mix(in srgb, var(--brand-highlight) 45%, transparent);
  color: var(--gray-900);
}

.tbox-hvps-comparison-section .tbox-comparison-chip--included {
  background: var(--brand-primary-bg);
  border-color: var(--brand-primary-25);
  color: var(--brand-primary-text);
}

.tbox-hvps-comparison-section .tbox-comparison-chip--addon {
  background: var(--brand-highlight-bg);
  border-color: var(--brand-cta-35);
  color: var(--state-warning-text);
}

.tbox-hvps-comparison-section .tbox-comparison-chip--limited {
  background: rgb(239 68 68 / 20%);
  border-color: rgb(239 68 68 / 25%);
  color: var(--state-danger-text);
}

.tbox-hvps-comparison-section .tbox-comparison-chip--varies {
  background: rgb(148 163 184 / 25%);
  border-color: rgb(148 163 184 / 35%);
  color: var(--text-secondary);
}

/* Monthly emphasis (actual HTML structure) */
#hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total--monthly-primary > .tbox-hvps-price-label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--surface-glass-75);
  margin-bottom: var(--space-xs);
}

#hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total--monthly-primary > .tbox-hvps-price-value {
  display: block;
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  font-size: 3rem;
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-md);
  color: var(--text-inverse);
}


/* ============================================
   Mobile Cost Breakdown Collapse
   ============================================ */
#hourly-vps-configurator .tbox-pricing-breakdown-toggle {
  display: none;
  width: 100%;
  padding: var(--space-md);
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  margin-bottom: var(--space-md);
  text-align: left;
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

#hourly-vps-configurator .tbox-pricing-breakdown-toggle .tbox-hvps-toggle-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--ease-base);
}

#hourly-vps-configurator .tbox-pricing-breakdown-toggle[aria-expanded="true"] .tbox-hvps-toggle-icon {
  transform: rotate(180deg);
}

#hourly-vps-configurator .tbox-pricing-breakdown-toggle .tbox-hvps-toggle-text-hide {
  display: none;
}

#hourly-vps-configurator .tbox-pricing-breakdown-toggle[aria-expanded="true"] .tbox-hvps-toggle-text-show {
  display: none;
}

#hourly-vps-configurator .tbox-pricing-breakdown-toggle[aria-expanded="true"] .tbox-hvps-toggle-text-hide {
  display: inline;
}

#hourly-vps-configurator .tbox-pricing-breakdown-summary {
  display: none;
}

@media (width <= 960px) {
  #hourly-vps-configurator .tbox-pricing-breakdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  #hourly-vps-configurator .tbox-pricing-breakdown-details {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--ease-slow);
  }

  #hourly-vps-configurator .tbox-pricing-breakdown-details > .tbox-pricing-breakdown-details__inner {
    min-height: 0;
    overflow: hidden;
  }

  #hourly-vps-configurator .tbox-pricing-breakdown-details.is-expanded {
    grid-template-rows: 1fr;
  }

  #hourly-vps-configurator .tbox-pricing-breakdown-summary {
    display: block;
    padding: 0.75rem 0;
    border-top: 1px solid var(--surface-glass-10);
    margin-top: var(--space-sm);
  }

  #hourly-vps-configurator .tbox-pricing-breakdown-summary .summary-row {
    display: flex;
    justify-content: space-between;
    padding: 0.375rem 0;
    font-size: var(--fs-base);
  }

  #hourly-vps-configurator .tbox-pricing-breakdown-summary .summary-row .summary-label {
    color: var(--surface-glass-70);
  }

  #hourly-vps-configurator .tbox-pricing-breakdown-summary .summary-row .summary-value {
    font-weight: var(--fw-semibold);
    color: var(--text-inverse);
  }
}


/* ============================================
   Bottom-Sheet Tooltips (Mobile)
   ============================================ */
.tbox-hvps-bottom-sheet-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: var(--overlay-50);
  z-index: 10000;
  opacity: 0;
  transition: opacity var(--ease-base);
}

.tbox-hvps-bottom-sheet-overlay.is-visible {
  display: block;
  opacity: 1;
}

.tbox-hvps-bottom-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 70vh;
  background: var(--surface-base);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  z-index: 10001;
  transform: translateY(100%);
  transition: transform var(--ease-slow);
  overflow-y: auto;
}

.tbox-hvps-bottom-sheet.is-visible {
  transform: translateY(0);
}

.tbox-hvps-bottom-sheet-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 32px;
  height: 32px;
  background: var(--tbox-hvps-bg-light);
  border: none;
  border-radius: 50%;
  font-size: var(--fs-heading-md);
  line-height: 1;
  color: var(--tbox-hvps-text-medium);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tbox-hvps-bottom-sheet-close:hover {
  background: var(--tbox-hvps-bg-gray);
}

.tbox-hvps-bottom-sheet-content {
  padding: var(--space-xl);
  padding-top: var(--space-3xl);
  font-size: var(--fs-md);
  line-height: var(--lh-loose);
  color: var(--tbox-hvps-text-dark);
}

/* ============================================
   Mobile Comparison Selector
   ============================================ */
.tbox-hvps-comparison-section .tbox-comparison-mobile-selector {
  display: none;
  margin-bottom: var(--space-xl);
  padding: var(--space-lg);
  background: var(--tbox-hvps-bg-light);
  border-radius: var(--radius-sm-plus);
}

.tbox-hvps-comparison-section .tbox-comparison-mobile-list {
  display: none;
}

@media (width <= 768px) {
  .tbox-hvps-comparison-section .tbox-comparison-mobile-selector {
    display: block;
  }

  .tbox-hvps-comparison-section .tbox-comparison-mobile-list {
    display: block;
  }

  /* Hide table on mobile when selector is active */
  body.tbox-hvps-mobile-compare-ready .tbox-hvps-comparison-section .tbox-comparison-table-wrapper {
    display: none;
  }
}


.tbox-hvps-comparison-section .comparison-mobile-header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--tbox-hvps-blue-3);
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  border-radius: var(--radius-sm-plus) var(--radius-sm-plus) 0 0;
}

.tbox-hvps-comparison-section .comparison-mobile-row {
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-base);
  border-bottom: 1px solid var(--tbox-hvps-border);
}

.tbox-hvps-comparison-section .comparison-mobile-row:last-child {
  border-bottom: none;
  border-radius: 0 0 var(--radius-sm-plus) var(--radius-sm-plus);
}

.tbox-hvps-comparison-section .comparison-mobile-row .tbox-pricing-row__values {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  font-size: var(--fs-base);
}

.tbox-hvps-comparison-section .comparison-mobile-row .togglebox-value {
  font-weight: var(--fw-semibold);
  color: var(--tbox-hvps-blue-2);
}

.tbox-hvps-comparison-section .comparison-mobile-row .competitor-value {
  color: var(--tbox-hvps-text-dark);
}

/* ============================================
   Pricing Intro Section
   ============================================ */

/* Chat assist nudge */
#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist {
  display: block;
  text-align: center;
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  background: var(--brand-primary-bg);
  border-radius: var(--radius-sm-plus);
  font-size: var(--fs-base);
  color: var(--gray-100);
}

/* Prominent Chat Assist Nudge — full-width footer band */
#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent {
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin: var(--space-md) calc(-1 * var(--tbox-hvps-pricing-card-pad)) calc(-1 * var(--tbox-hvps-pricing-card-pad-bottom));
  padding: 12px var(--tbox-hvps-pricing-card-pad) calc(12px + var(--tbox-hvps-pricing-card-safe-bottom));
  background: var(--surface-muted);
  border: none;
  border-top: 1px solid var(--border-light);
  border-radius: 0 0 var(--tbox-hvps-pricing-card-radius) var(--tbox-hvps-pricing-card-radius);
}

#hourly-vps-configurator .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__icon {
  display: none;
}

#hourly-vps-configurator .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__content {
  flex: 1 1 auto;
  min-width: 0;
}

#hourly-vps-configurator .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn {
  flex-shrink: 0;
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: var(--brand-cta);
  color: var(--brand-cta-ink);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--ease-base);
}

#hourly-vps-configurator .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn:hover {
  background: var(--brand-highlight);
  text-decoration: none;
}

@media (width <= 640px) {
  #hourly-vps-configurator .tbox-hvps-chat-assist--prominent {
    flex-direction: column;
    align-items: stretch;
    text-align: center;
  }

  #hourly-vps-configurator .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn {
    width: 100%;
    text-align: center;
  }
}


.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-pricing-intro {
  padding-top: 0;
}

/* Ensure configurator has proper max-width when standalone */
.tbox-pricing-section #hourly-vps-configurator {
  max-width: 1100px;
  margin: 0 auto;
}

/* ============================================
   Quick Start Presets
   ============================================ */

/* ============================================
   Model pills (pricing section header)
   ============================================ */
.tbox-hvps-model-pills {
  display: flex;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

.tbox-hvps-model-pill {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  white-space: nowrap;
}

.tbox-hvps-model-pill strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.tbox-hvps-model-pill + .tbox-hvps-model-pill::before {
  content: '·';
  margin-right: var(--space-md);
  color: var(--text-muted);
}

@media (width <= 640px) {
  .tbox-hvps-model-pills {
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
  }

  .tbox-hvps-model-pill + .tbox-hvps-model-pill::before {
    content: none;
  }
}


/* ============================================
   Preset tier cards
   ============================================ */
#hourly-vps-configurator .tbox-preset-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
}

/* Legend explaining the "~" on preset monthly prices (the price formats vary
   across presets, the live total, and the reference table; label it once).
   #tbox-hvps-form-content is display:contents, so this <p> is hoisted into the
   configurator's 2-column grid; span the full width like .tbox-preset-buttons
   so it forms its own row rather than stealing a column from the form. */
#hourly-vps-configurator .tbox-preset-legend {
  grid-column: 1 / -1;
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
  max-width: var(--prose-measure-default);
}

/* Match the "~$33.46" price rendering so the tilde reads as a tilde,
   not a dash, at legend size */
#hourly-vps-configurator .tbox-preset-legend__tilde {
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-primary-deep);
}

#hourly-vps-configurator .tbox-preset-btn {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  cursor: pointer;
  position: relative;
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
  box-sizing: border-box;
  border-radius: var(--radius-xl);
  border: 1.5px solid var(--border-light);
  background: var(--surface-card);
  color: var(--text-primary);
  align-items: flex-start;
  text-align: left;
  transform: none;
  box-shadow: var(--shadow-card);
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
  overflow: hidden;
}

/* Accent bar at top */
#hourly-vps-configurator .tbox-preset-accent {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--border-light);
  pointer-events: none;
}

#hourly-vps-configurator .tbox-preset-btn--tier1 .tbox-preset-accent { background: var(--color-teal); }

#hourly-vps-configurator .tbox-preset-btn--tier2 .tbox-preset-accent { background: var(--brand-primary); }

#hourly-vps-configurator .tbox-preset-btn--tier3 .tbox-preset-accent { background: var(--brand-cta); }

#hourly-vps-configurator .tbox-preset-btn--custom .tbox-preset-accent { background: var(--text-muted); }
/* Custom card is the default-active selection; muted gray reads disabled,
   so the active state earns the brand accent like the other tiers. */
#hourly-vps-configurator .tbox-preset-btn--custom.tbox-preset-btn--active .tbox-preset-accent { background: var(--brand-primary); }

/* Preset name: larger */
#hourly-vps-configurator .tbox-preset-name {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2xs);
}

/* Specs: mono,
secondary */
#hourly-vps-configurator .tbox-preset-specs {
  font-family: var(--calc-mono, var(--tbox-font-mono));
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
  margin-bottom: var(--space-xs);
}

/* Price preview: bold,
brand-colored */
#hourly-vps-configurator .tbox-preset-price {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
}

#hourly-vps-configurator .tbox-preset-price__amount {
  font-size: var(--fs-xl);
  font-weight: var(--fw-extrabold);
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary-deep);
}

#hourly-vps-configurator .tbox-preset-price__suffix {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--text-muted);
}

@media (width <= 960px) and (width > 640px) {
  #hourly-vps-configurator .tbox-preset-buttons {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ============================================
   Preset Microcopy
   ============================================ */
#hourly-vps-configurator .tbox-preset-microcopy {
  display: block;
  position: static;
  transform: none;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  z-index: auto;
  width: auto;
  min-width: 0;
  max-width: none;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: var(--space-xs);
  line-height: var(--lh-relaxed);
  text-align: left;
}

/* Remove tooltip arrow */
#hourly-vps-configurator .tbox-preset-microcopy::before {
  display: none;
}

#hourly-vps-configurator .tbox-preset-price__prefix {
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--text-muted);
}

#hourly-vps-configurator .tbox-preset-microcopy-label {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
  margin-bottom: var(--space-xs);
}

/* "Why this size:" stays in flow (no layout shift) and fades in on hover */
#hourly-vps-configurator .tbox-preset-microcopy-reason {
  display: block;
  margin-top: var(--space-xs);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  opacity: 0;
  transition: opacity var(--ease-fast);
}

#hourly-vps-configurator .tbox-preset-btn:hover .tbox-preset-microcopy .tbox-preset-microcopy-reason,
#hourly-vps-configurator .tbox-preset-btn:focus-visible .tbox-preset-microcopy .tbox-preset-microcopy-reason {
  opacity: 1;
}

@media (width <= 960px) {
  #hourly-vps-configurator .tbox-preset-microcopy {
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }
  /* Reason stays hidden on mobile (no hover); also don't reserve its space */
  #hourly-vps-configurator .tbox-preset-microcopy-reason {
    display: none;
  }
}


/* ============================================
   Micro-interactions (Pricing + Reveal)
   ============================================ */
@keyframes hvps-price-bump {
  0%, 100% { opacity: 1; }

  50% { opacity: 0.6; }
}

#hourly-vps-configurator .price-updating {
  animation: hvps-price-bump var(--ease-slow);
}

#hourly-vps-configurator .reveal-section {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--ease-animate), transform var(--ease-animate);
}

#hourly-vps-configurator .reveal-section.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   Slider tooltip
   ============================================ */
.tbox-hvps-slider-tooltip {
  position: absolute;
  top: calc(-34px - var(--tbox-hvps-tooltip-offset));
  left: 0;
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  pointer-events: none;
  padding: var(--space-xs-plus) var(--space-sm-plus);
  border-radius: var(--radius-md);
  background: rgb(15 23 42 / 92%);
  border: 1px solid rgb(34 211 238 / 18%);
  color: rgb(226 232 240 / 95%);
  font-family: var(--tbox-font-mono);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: 1;
  letter-spacing: var(--ls-wide);
  text-shadow: 0 1px 0 var(--overlay-35);
  box-shadow: 0 4px 12px var(--overlay-12);
  transition: opacity var(--ease-fast), transform var(--ease-fast);
  z-index: 5;
}

.tbox-hvps-slider-tooltip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: rgb(15 23 42 / 92%);
}

#hourly-vps-configurator .tbox-slider-wrapper.is-dragging .tbox-hvps-slider-tooltip,
#hourly-vps-configurator .tbox-slider-wrapper:hover .tbox-hvps-slider-tooltip,
#hourly-vps-configurator .tbox-slider-wrapper:focus-within .tbox-hvps-slider-tooltip {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   Layering + readability fixes (Presets)
   ============================================ */
#hourly-vps-configurator .tbox-config-card--resources {
  position: relative;
  z-index: 1;
}

#hourly-vps-configurator .tbox-preset-btn:hover,
#hourly-vps-configurator .tbox-preset-btn:focus-visible,
#hourly-vps-configurator .tbox-preset-btn--active {
  z-index: 2;
}

:where(#hourly-vps-configurator .tbox-hvps-price-value),
:where(.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-hvps-price-value),
:where(#hourly-vps-configurator .tbox-pricing-row .tbox-pricing-row__value),
:where(#hourly-vps-configurator .tbox-slider-value input[type="number"]),
:where(#hourly-vps-configurator .tbox-preset-specs) {
  font-family: var(--tbox-font-mono);
  font-variant-numeric: tabular-nums;
}

/* Pricing summary card: use body font (Rubik) instead of mono — matches App Hosting */
:where(#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-price-value),
:where(#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-price-suffix),
:where(#hourly-vps-configurator .tbox-pricing-card .tbox-pricing-row__value) {
  font-family: inherit;
}

:where(#hourly-vps-configurator .tbox-preset-btn--active .tbox-preset-specs) {
  color: var(--text-secondary);
}

#hourly-vps-configurator .tbox-preset-btn--custom:not(.tbox-preset-btn--active) {
  border-style: dashed;
  border-color: var(--border-mid);
}

/* ============================================
   Use Case Marquee Strip
   ============================================ */

/* Moved to shared `.tbox-proof-strip` component in style.css */

/* ============================================
   Config Step Numbers
   ============================================ */
#hourly-vps-configurator .tbox-config-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--tbox-hvps-blue-1);
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-inverse);
  flex-shrink: 0;
}

/* Scroll-reveal animations removed (designcheck) */

/* ============================================
   Pricing Card Pulse Animation
   ============================================ */
#hourly-vps-configurator .tbox-pricing-card.tbox-pricing-updated {
  box-shadow: var(--shadow-xl);
}

@keyframes hvps-row-flash {
  from { background-color: var(--brand-highlight-bg); }

  to { background-color: transparent; }
}

#hourly-vps-configurator .tbox-pricing-row--changed {
  animation: hvps-row-flash 0.4s ease;
  border-radius: var(--radius-xs);
}

@media (prefers-reduced-motion: reduce) {
  #hourly-vps-configurator .tbox-pricing-row--changed { animation: none; }
}


/* ============================================
   Next-Step Bridge (under CTA)
   ============================================ */
.tbox-hvps-next-step-bridge {
  display: block;
  margin-top: var(--space-sm);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  text-align: center;
  line-height: var(--lh-normal);
}

@media (width <= 640px) {
  #hourly-vps-configurator .tbox-preset-buttons {
    grid-template-columns: 1fr;
    overflow: visible;
    padding-bottom: 0;
  }

  #hourly-vps-configurator .tbox-preset-btn {
    width: 100%;
  }

  #hourly-vps-configurator .tbox-preset-btn--custom {
    width: 100%;
  }
}


/* ============================================
   Comparison Strip — Skeleton Placeholder
   ============================================ */
.tbox-hvps-pc-strip__skeleton {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tbox-hvps-pc-strip__skeleton-row {
  height: 1rem;
  border-radius: var(--radius-xs);
  background: linear-gradient(90deg, var(--surface-muted) 25%, var(--surface-subtle) 50%, var(--surface-muted) 75%);
  background-size: 200% 100%;
  animation: hvps-skeleton-shimmer 1.5s ease-in-out infinite;
}

.tbox-hvps-pc-strip__skeleton-row--short {
  width: 60%;
}

@keyframes hvps-skeleton-shimmer {
  0%   { background-position: 200% 0; }

  100% { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-hvps-pc-strip__skeleton-row { animation: none; }
}


/* ============================================
   Comparison Strip — Tier Context Label
   ============================================ */
.tbox-hvps-pc-strip__tier-context {
  display: block;
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  margin-top: var(--space-2xs);
  line-height: var(--lh-snug);
}

/* ============================================
   Comparison Strip — Weighted "Same reliability" Column
   ============================================ */
.tbox-hvps-pc-col-h--weighted {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-primary);
}

.tbox-hvps-pc-price--comp-same,
.tbox-hvps-pc-price--tb-same {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

/* ============================================
   Smooth Slider Transitions (Preset Application)
   State-bound: only active during JS-initiated preset apply (the JS adds
   the .animating class for one frame to opt into a smooth fill change),
   so this layout-property transition is bounded and intentional, not the
   per-drag jank pattern.
   ============================================ */
#hourly-vps-configurator .tbox-slider-wrapper.animating .tbox-slider-fill {
  transition: transform var(--ease-slow);
}

@media (prefers-reduced-motion: reduce) {
  #hourly-vps-configurator .tbox-slider-wrapper.animating .tbox-slider-fill {
    transition: none;
  }
}


#hourly-vps-configurator .tbox-slider-value input[type="number"].animating {
  transition: none;
}

/* ============================================
   Preset Toast Notification
   ============================================ */
.tbox-hvps-preset-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--calc-slate-900);
  color: var(--text-inverse);
  padding: 12px 20px;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  box-shadow: 0 2px 8px var(--overlay-22);
  border: 1px solid rgb(34 211 238 / 25%);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-base), transform var(--ease-base);
  display: flex;
  align-items: center;
  gap: 10px;
}

.tbox-hvps-preset-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.tbox-hvps-preset-toast::before {
  content: '';
  width: 18px;
  height: 18px;
  background: var(--tbox-hvps-success-500);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E");
  background-size: 10px 10px;
  background-position: center;
  background-repeat: no-repeat;
  flex-shrink: 0;
}

@media (width <= 640px) {
  .tbox-hvps-preset-toast {
    bottom: auto;
    top: 80px;
    font-size: var(--fs-sm);
    padding: var(--space-sm-plus) var(--space-lg);
  }
}


/* ============================================
   Loading Skeleton
   ============================================ */
.tbox-hvps-skeleton {
  background: linear-gradient(90deg, var(--tbox-hvps-skeleton-base) 25%, var(--tbox-hvps-skeleton-highlight) 50%, var(--tbox-hvps-skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
  border-radius: var(--radius-sm-plus);
}

/* Preset price loading state: shimmer pill until bootstrap prices arrive.
   JS (renderPresetMonthlyCosts) removes the class when real amounts render. */
#hourly-vps-configurator .tbox-preset-price__amount--loading {
  color: transparent;
  display: inline-block;
  min-width: 3.5ch;
  border-radius: var(--radius-sm-plus);
  background: linear-gradient(90deg, var(--tbox-hvps-skeleton-base) 25%, var(--tbox-hvps-skeleton-highlight) 50%, var(--tbox-hvps-skeleton-base) 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.5s infinite;
}

.tbox-hvps-skeleton--select {
  height: 44px;
  width: 100%;
  margin-bottom: var(--space-lg);
}

.tbox-hvps-skeleton--slider {
  height: 60px;
  width: 100%;
  margin-bottom: var(--space-lg);
}

.tbox-hvps-skeleton--card {
  height: 200px;
  width: 100%;
  margin-bottom: var(--space-lg-plus);
}

.tbox-hvps-skeleton--h120 { height: 120px; }

.tbox-hvps-skeleton--h400 { height: 400px; }

.tbox-hvps-loading-skeleton {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-2xl);
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.tbox-hvps-loading-skeleton__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg-plus);
}

.tbox-hvps-loading-skeleton__sidebar {
  position: sticky;
  top: 2rem;
}

@media (width <= 960px) {
  .tbox-hvps-loading-skeleton {
    grid-template-columns: 1fr;
    max-width: 600px;
  }

  .tbox-hvps-loading-skeleton__sidebar {
    order: -1;
    position: relative;
    top: 0;
  }
}


/* ============================================
   Enhanced Focus States
   ============================================ */
#hourly-vps-configurator .tbox-slider-wrapper input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

@media (forced-colors: active) {
  #hourly-vps-configurator .tbox-form-select:focus-visible, :where(#hourly-vps-configurator .tbox-slider-value input[type="number"]:focus-visible), #hourly-vps-configurator #tbox-hvps-configure-btn:focus-visible {
    outline: 3px solid CanvasText;
  }
}


/* ============================================
   Mockup Adoption: Compact Pricing Layout
   Scope: #hourly-vps-configurator
   ============================================ */

/* Left column becomes a single card */

#hourly-vps-configurator .tbox-hvps-form-column > .tbox-config-card {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
}

/* Phase headers: numbered badge + title, no divider rule */
#hourly-vps-configurator .tbox-config-card .tbox-config-card-header {
  border-bottom: none;
  padding-bottom: 0;
}

/* Quick Start label + tiles */

/* (presets wrapper removed — config-icon/title rules deleted) */

/* Remove mockup-unneeded ? tooltips for Location + OS Template only */
#hourly-vps-configurator label[for="hvps-location"] .tbox-hvps-tooltip__trigger,
#hourly-vps-configurator label[for="hvps-template"] .tbox-hvps-tooltip__trigger {
  display: none;
}

@media (width >= 961px) {

  /* Match mockup proportions (desktop/tablet) */

  #hourly-vps-configurator {
    grid-template-columns: 1fr 320px;
    gap: var(--space-xl);
  }

  .tbox-pricing-section #hourly-vps-configurator {
    max-width: 1200px;
  }

  #hourly-vps-configurator .tbox-config-card--resources {
    grid-template-columns: 1fr 220px;
    gap: var(--space-md) 24px;
    align-items: start;
    display: block;
  }

  #hourly-vps-configurator .tbox-config-card--resources .tbox-slider-container {
    margin-bottom: 0;
    margin-bottom: 14px;
  }

  #hourly-vps-configurator .tbox-hvps-volumecare-row {
    border-top: none;
    margin-top: 0;
    padding-top: 16px;
    justify-content: flex-start;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-sm);
  }

  #hourly-vps-configurator .tbox-hvps-volumecare-row > label {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: var(--space-xs-plus);
  }

  #hourly-vps-configurator .tbox-hvps-volumecare-row .tbox-form-select {
    width: 100%;
    min-width: 0;
    height: 40px;
  }
}


/* ── Presets: promoted to full-width row above 2-col grid ── */
#hourly-vps-configurator #tbox-hvps-form-content > .tbox-preset-buttons {
  grid-column: 1 / -1;
  margin-bottom: var(--space-md);
}

@media (width <= 960px) {
  #hourly-vps-configurator #tbox-hvps-form-content > .tbox-preset-buttons {
    order: -2;
  }
}


/* ── Location/Type/OS: subtle contrast grouping ── */
#hourly-vps-configurator .tbox-hvps-form-column > .tbox-config-card.tbox-config-card--selects {
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px;
  position: relative;
  z-index: 13; /* above presets card (z-index:12) so tooltips aren't clipped */
}

/* Backups band (inside the left card) */
#hourly-vps-configurator .tbox-hvps-form-column > .tbox-config-card.tbox-config-card--backups {
  background: var(--surface-alt);
  border: none;
  box-shadow: none;
  padding: var(--space-sm-plus) var(--space-lg);
  border-radius: var(--radius-12);
}

#hourly-vps-configurator .tbox-config-card--backups .tbox-config-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

#hourly-vps-configurator .tbox-config-card--backups .tbox-config-title {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

@media (width >= 961px) {
  #hourly-vps-configurator .tbox-hvps-backup-row-compact {
    flex-wrap: nowrap;
  }

  #hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item--daily {
    flex: 1;
  }

  #hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item--weekly,
#hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup-item--monthly {
    flex: 1;
  }
}


/* ============================================
   Network Included Strip (bottom of form column)
   ============================================ */
#hourly-vps-configurator .tbox-hvps-network-strip {
  display: flex;
  align-items: stretch;
  margin-top: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
}

#hourly-vps-configurator .tbox-hvps-network-strip__item {
  flex: 1 1 0%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: var(--space-xs) var(--space-md);
}

#hourly-vps-configurator .tbox-hvps-network-strip__item + .tbox-hvps-network-strip__item {
  border-left: 1px solid var(--border-light);
}

#hourly-vps-configurator .tbox-hvps-network-strip__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: var(--brand-primary);
  opacity: 0.7;
}

#hourly-vps-configurator .tbox-hvps-network-strip__text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

#hourly-vps-configurator .tbox-hvps-network-strip__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  line-height: var(--lh-tight);
}

#hourly-vps-configurator .tbox-hvps-network-strip__value {
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-tight);
}

@media (width <= 480px) {
  #hourly-vps-configurator .tbox-hvps-network-strip {
    flex-direction: column;
    padding: var(--space-sm) var(--space-md);
  }

  #hourly-vps-configurator .tbox-hvps-network-strip__item {
    padding: 8px 4px;
  }

  #hourly-vps-configurator .tbox-hvps-network-strip__item + .tbox-hvps-network-strip__item {
    border-left: none;
    border-top: 1px solid var(--border-light);
  }
}


/* Pricing card base geometry (overridden by tokenized block below) */
#hourly-vps-configurator .tbox-pricing-card {
  width: 100%;
  max-width: none;
  min-width: 0;
  margin-left: 0;
  margin-right: 0;
  box-sizing: border-box;
  border-radius: var(--radius-12);
  padding: 24px;

  --tbox-hvps-pricing-card-pad: 24px;
  --tbox-hvps-pricing-card-pad-bottom: 24px;
  --tbox-hvps-pricing-card-radius: var(--radius-12);
  --tbox-hvps-pricing-card-safe-bottom: 0px; /* stylelint-disable-line length-zero-no-unit -- unit required for calc() */

  background: var(--surface-base);
  color: var(--text-primary);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

#hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total--monthly-primary > .tbox-hvps-price-value::after {
  letter-spacing: var(--ls-normal);
  margin-left: 6px;
  content: ' /mo';
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  opacity: 0.7;
}


#hourly-vps-configurator #tbox-hvps-configure-btn:hover {
  background: var(--tbox-btn-accent-bg-hover);
  transform: none;
  box-shadow: none;
}

@media (prefers-reduced-motion: no-preference) {
  #hourly-vps-configurator #tbox-hvps-configure-btn svg {
    transition: transform var(--ease-fast);
  }

  #hourly-vps-configurator #tbox-hvps-configure-btn:hover svg {
    transform: translateX(3px);
  }
}


#hourly-vps-configurator .tbox-pricing-breakdown-title::after {
  content: '/Mo';
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wider);
  color: var(--text-muted);
  opacity: 1;
}

/* Divider between priced items and included features */
#hourly-vps-configurator #tbox-hvps-breakdown-backup + .tbox-pricing-row--static {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
}

/* Trust-badge pills enabled in configurator sidebar */

/* Help box: closer to mockup */

#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__content strong {
  color: var(--text-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  margin: 0;
}


/* Ghost style: the Review & Launch CTA owns the orange in this column */
#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn {
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: var(--space-2xs) var(--space-md-plus);
  background: var(--surface-base);
  border: 1px solid var(--brand-primary-16);
  border-radius: var(--radius-sm-plus);
  color: var(--brand-primary-text);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background var(--ease-fast), border-color var(--ease-fast);
}

#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn:hover {
  background: var(--surface-muted);
  border-color: var(--brand-primary);
  transform: none;
}

/* ============================================
   Credit Reminder (Pricing Sidebar)
   ============================================ */
.tbox-pricing-card .tbox-hvps-credit-reminder {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--brand-cta-bg-soft);
  border: 1px solid color-mix(in srgb, var(--brand-highlight) 20%, transparent);
  border-radius: var(--radius-md, 10px);
  margin-bottom: var(--space-md);
}

.tbox-hvps-credit-reminder__icon {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--brand-cta);
}

.tbox-hvps-credit-reminder__amount {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-cta);
}

.tbox-hvps-credit-reminder__text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--surface-glass-85);
}

/* ============================================
   Deploy Button Loading State
   ============================================ */
#tbox-hvps-configure-btn.is-submitting {
  pointer-events: none;
  opacity: 0.75;
  position: relative;
}

#tbox-hvps-configure-btn.is-submitting::before {
  content: '';
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--surface-glass-30);
  border-top-color: var(--text-inverse);
  border-radius: 50%;
  animation: hvps-spin 0.6s linear infinite;
  margin-right: var(--space-sm);
}

@keyframes hvps-spin {
  to { transform: rotate(360deg); }
}

/* Deploy Reassurance Micro-copy */
.tbox-hvps-deploy-reassurance {
  font-size: var(--fs-xs);
  color: var(--surface-glass-55);
  text-align: center;
  margin: var(--space-sm) 0 0;
  line-height: var(--lh-normal);
}

@media (width >= 961px) {

  /* Remove LiveChat safe-bottom padding from the pricing card on desktop.
     Once the bottom-of-card content is compacted, the extra reserved space
     is no longer needed and causes an inner scrollbar. */

  /* Tighten vertical rhythm in the pricing summary */
  #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total {
    margin-bottom: var(--space-md);
  }

  #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total--monthly-primary > .tbox-hvps-price-value {
    margin-bottom: var(--space-sm);
  }

  #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-deploy-reassurance {
    margin-top: 6px;
    font-size: var(--fs-xs);
  }

  /* Utility row compaction */
  #hourly-vps-configurator .tbox-hvps-utility-row {
    margin-top: var(--space-sm);
  }

  /* Cost breakdown: slightly tighter but still readable */
  #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-breakdown {
    padding-top: var(--space-md-plus);
    margin-bottom: 0.9rem;
  }

  #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-breakdown-title {
    margin-bottom: var(--space-sm);
  }

  #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-row {
    padding: 0.375rem 0;
  }

  /* Chat nudge: keep row layout, hide icon */
  #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__content strong {
    font-size: var(--fs-xs);
  }

  /* Sticky card: sticks to viewport top while the user scrolls through the
     form. flex:1 is intentionally absent — the card's natural height already
     fills the sidebar at default spec; when the user expands form sections the
     sidebar grows (via grid stretch) while the card stays at natural height,
     giving the sticky element room to activate within its containing block. */
  #hourly-vps-configurator .tbox-pricing-card {
    position: sticky;
    top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 80px) + 1.5rem);
  }
}

@media (width >= 961px) and (height <= 740px) {
  #hourly-vps-configurator .tbox-pricing-card {
    padding-top: 18px;
    padding-bottom: 18px;
  }

  #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-card-header {
    margin-bottom: var(--space-sm);
  }

  #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total--monthly-primary > .tbox-hvps-price-value {
    font-size: var(--fs-heading-xl);
    margin-bottom: 6px;
  }

  #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-deploy-reassurance {
    font-size: var(--fs-2xs);
    line-height: var(--lh-tight);
  }

  #hourly-vps-configurator .tbox-hvps-utility-row {
    margin-top: var(--space-2xs);
  }

  #hourly-vps-configurator .tbox-hvps-utility-btn {
    padding: 0.35rem 0.6rem;
    font-size: var(--fs-xs);
  }

  #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-breakdown {
    padding-top: var(--space-sm);
    margin-bottom: var(--space-sm);
  }

  #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-row {
    padding: 0.25rem 0;
  }
}


/* ============================================
   Utility Row (Share + Reset)
   ============================================ */
.tbox-hvps-utility-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin-top: var(--space-md);
  margin-bottom: var(--space-md);
  position: relative; /* anchor for popover */
}

/* Inside the pricing sidebar card,
sit between price display and CTA */
#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-utility-row {
  margin-top: calc(-1 * var(--space-sm));
}

.tbox-hvps-utility-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm-minus) 0.75rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--surface-glass-70);
  background: transparent;
  border: 1px solid var(--surface-glass-15);
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  transition: color var(--ease-fast), border-color var(--ease-fast), background var(--ease-fast);
  white-space: nowrap;
}

.tbox-hvps-utility-btn:hover,
.tbox-hvps-utility-btn:focus-visible {
  color: var(--text-inverse);
  border-color: var(--surface-glass-35);
  background: var(--surface-glass-06);
}

/* ============================================
   Share Popover
   ============================================ */

.tbox-hvps-share-popover-wrap {
  position: static;
}

.tbox-hvps-share-popover-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--calc-slate-800);
  border: 1px solid var(--surface-glass-10);
  border-radius: var(--radius-md, 10px);
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  /* Above the configure CTA (--z-above) so Copy link / email controls take clicks */
  z-index: calc(var(--z-above) + 1);
  box-shadow: 0 4px 12px var(--overlay-30);
}

.tbox-hvps-share-popover-panel.is-open {
  display: flex;
}

/* Copy-link action button */
.tbox-hvps-share-action {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--surface-glass-80);
  background: var(--surface-glass-06);
  border: 1px solid var(--surface-glass-12);
  border-radius: var(--radius-md, 10px);
  cursor: pointer;
  transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}

.tbox-hvps-share-action:hover,
.tbox-hvps-share-action:focus-visible {
  color: var(--text-inverse);
  background: var(--surface-glass-10);
  border-color: var(--surface-glass-25);
}

/* Phase 1 — Location & image (Variant A layout) */
#hourly-vps-configurator .tbox-config-card--selects .tbox-hvps-phase__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#hourly-vps-configurator .tbox-hvps-os-row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-sm);
  align-items: stretch;
}

#hourly-vps-configurator .tbox-hvps-template-select {
  position: relative;
  min-width: 0;
}

#hourly-vps-configurator .tbox-hvps-image-help {
  margin: var(--space-xs-plus) 0 0;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  max-width: var(--prose-measure-narrow);
}

#hourly-vps-configurator .tbox-hvps-image-help--details > summary {
  cursor: pointer;
  color: var(--text-secondary);
  font-weight: 500;
}

#hourly-vps-configurator .tbox-hvps-image-help--details > summary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: var(--radius-xs);
}

#hourly-vps-configurator .tbox-hvps-image-help--details > p {
  margin: var(--space-2xs) 0 0;
}

@media (width <= 560px) {
  #hourly-vps-configurator .tbox-hvps-os-row {
    grid-template-columns: 1fr;
  }
}

@media (width >= 961px) {
  #hourly-vps-configurator .tbox-config-card--resources .tbox-slider-container:last-of-type {
    margin-bottom: 0;
  }
}


#hourly-vps-configurator .tbox-preset-btn:not(.tbox-preset-btn--active):hover,
#hourly-vps-configurator .tbox-preset-btn:not(.tbox-preset-btn--active):focus-visible {
  border-color: var(--brand-primary);
  box-shadow: var(--shadow-card-hover);
}

#hourly-vps-configurator .tbox-preset-btn--active {
  border-color: var(--brand-primary);
  background: var(--surface-card);
  box-shadow: 0 0 0 2px var(--brand-primary), var(--shadow-card);
}


#hourly-vps-configurator .tbox-preset-microcopy .tbox-preset-microcopy-label {
  color: var(--text-secondary);
}


/* Backups: presets + expandable custom retention */
#hourly-vps-configurator .tbox-hvps-backup-presets {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

#hourly-vps-configurator .tbox-hvps-backup-preset-btn {
  padding: var(--space-sm) var(--space-sm-plus);
  border-radius: var(--radius-sm-plus);
  border: 1.5px solid var(--border-light);
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--ease-fast), border-color var(--ease-fast), box-shadow var(--ease-fast);
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

#hourly-vps-configurator .tbox-hvps-backup-preset-btn:not(.tbox-hvps-backup-preset-btn--active):hover,
#hourly-vps-configurator .tbox-hvps-backup-preset-btn:not(.tbox-hvps-backup-preset-btn--active):focus-visible {
  border-color: var(--border-mid);
  background: var(--surface-subtle);
}

#hourly-vps-configurator .tbox-hvps-backup-preset-btn--active {
  border-color: var(--brand-primary);
  background: var(--surface-base);
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

#hourly-vps-configurator .tbox-hvps-backup-preset-title {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

#hourly-vps-configurator .tbox-hvps-backup-preset-detail {
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

#hourly-vps-configurator .tbox-hvps-backup-preset-btn--active .tbox-hvps-backup-preset-title {
  color: var(--brand-primary-text);
}

#hourly-vps-configurator .tbox-hvps-backup-custom-toggle {
  margin-top: var(--space-sm);
  padding: 0;
  border: none;
  background: none;
  display: inline-flex;
  align-items: flex-start;
  gap: var(--space-xs-plus);
  color: var(--brand-primary-text);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  text-align: left;
}

#hourly-vps-configurator .tbox-hvps-backup-custom-toggle__chev {
  flex: 0 0 auto;
}

#hourly-vps-configurator .tbox-hvps-backup-custom-toggle:hover,
#hourly-vps-configurator .tbox-hvps-backup-custom-toggle:focus-visible {
  text-decoration: underline;
}

#hourly-vps-configurator .tbox-hvps-backup-preset-note,
#hourly-vps-configurator .tbox-hvps-backups-unavailable {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

#hourly-vps-configurator .tbox-hvps-backup-custom-controls {
  margin-top: 10px;
  padding: var(--space-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-12);
}

@media (width <= 640px) {
  #hourly-vps-configurator .tbox-hvps-backup-presets {
    grid-template-columns: repeat(2, 1fr);
  }
}


/* DRaaS VolumeCare now lives in the Backups card */
#hourly-vps-configurator .tbox-config-card--backups .tbox-hvps-volumecare-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
}

#hourly-vps-configurator .tbox-config-card--backups.tbox-hvps-has-volumecare .tbox-hvps-volumecare-row {
  padding-top: var(--space-md);
  margin-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

#hourly-vps-configurator .tbox-config-card--backups .tbox-hvps-volumecare-row .tbox-form-select {
  width: auto;
  min-width: 160px;
}

/* Pricing summary: tokenized (light mode = white card) */

/* Desktop: safe-bottom padding is removed upstream; reflect that in our footer math */

#hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total.tbox-pricing-total--monthly-primary {
  margin: calc(-1 * var(--tbox-hvps-pricing-card-pad) - 1px) calc(-1 * var(--tbox-hvps-pricing-card-pad) - 1px) 14px;
  padding: 20px var(--tbox-hvps-pricing-card-pad) 16px;
  background: var(--brand-primary-dark);
}

#hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total.tbox-pricing-total--monthly-primary .tbox-pricing-cap-note {
  color: var(--surface-glass-65);
}

#hourly-vps-configurator .tbox-pricing-card .pricing-total__hourly {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-md);
  padding: var(--space-2xs) var(--space-sm);
  border-radius: var(--radius-sm);
  /* Dark overlay (not a white glass tint): keeps white chip text well
     above 4.5:1 on the mid-blue pricing band in both themes. */
  background: var(--overlay-20);
  border: 1px solid var(--surface-glass-18);
  font-size: var(--fs-2xs);
  color: var(--surface-glass-80);
}


#hourly-vps-configurator .tbox-pricing-card .pricing-total__hourly-icon {
  width: 1em;
  height: 1em;
  font-size: 16px;
  flex-shrink: 0;
}


#hourly-vps-configurator .tbox-pricing-card .pricing-total__hourly-val {
  margin-left: auto;
  white-space: nowrap;
}


#hourly-vps-configurator .tbox-pricing-card .pricing-total__hourly-val b {
  font-family: var(--ahcalc-mono);
  font-variant-numeric: tabular-nums;
  color: var(--text-inverse);
}



#hourly-vps-configurator .tbox-hvps-deploy-reassurance {
  color: var(--text-muted);
}

/* Keep static included values as success */

/* Divider gap between priced items and included features is handled by margin/padding only */

/* Utility buttons + share popover: tokenized for light mode */
#hourly-vps-configurator .tbox-hvps-utility-btn {
  color: var(--text-secondary);
  border-color: var(--border-light);
  background: transparent;
}

#hourly-vps-configurator .tbox-hvps-utility-btn:hover,
#hourly-vps-configurator .tbox-hvps-utility-btn:focus-visible {
  color: var(--text-primary);
  border-color: var(--brand-primary);
  background: var(--surface-subtle);
}

#hourly-vps-configurator .tbox-hvps-share-popover-panel {
  background: var(--surface-base);
  border-color: var(--border-light);
  box-shadow: var(--shadow-lg);
  color: var(--text-primary);
}

#hourly-vps-configurator #tbox-hvps-share-trigger.tbox-hvps-share--copied {
  color: var(--tbox-hvps-success-500);
  transition: color var(--ease-base);
}

#hourly-vps-configurator .tbox-hvps-share-action {
  color: var(--text-primary);
  background: var(--surface-subtle);
  border-color: var(--border-light);
}

#hourly-vps-configurator .tbox-hvps-share-action:hover,
#hourly-vps-configurator .tbox-hvps-share-action:focus-visible {
  background: var(--surface-muted);
  border-color: var(--border-mid);
}

/* Chat nudge: footer band fills the bottom area */

#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__content {
  display: block;
}

#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn:hover,
#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn:focus-visible {
  background: var(--surface-muted);
  border-color: var(--brand-primary);
  text-decoration: none;
}

/* Mobile breakdown toggle: match tokenized sidebar */

#hourly-vps-configurator .tbox-pricing-breakdown-toggle:hover,
#hourly-vps-configurator .tbox-pricing-breakdown-toggle:focus-visible {
  background: var(--surface-muted);
  border-color: var(--border-mid);
  color: var(--text-primary);
}

#hourly-vps-configurator .tbox-hvps-credit-reminder__text {
  color: var(--text-secondary);
}

/* Light mode: pricing row labels (override dark-theme white text at line 1066) */

/* Light mode: preset name (override dark-theme white at line 4866) */

#hourly-vps-configurator .tbox-preset-btn--active .tbox-preset-name {
  color: var(--brand-primary-text);
}

/* Light mode: discount info (override dark-theme white at line 1098) */

/* Temporary: hide legacy comparison blocks in the Cloud VPS pricing flow. */
.tbox-hvps-comparison-section#comparison-section {
  display: none;
}

/* ============================================
   Managed Services — unique blocks (base provided by .tbox-pillar-*)
   ============================================ */

.tbox-hvps-managed-infra {
  display: flex;
  align-items: center;
  gap: var(--space-xs-plus);
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid #e0e4ea;
  font-size: var(--fs-sm);
  color: #5a6a7e;
  justify-content: center;
}

:root[data-theme="dark"] .tbox-hvps-managed-infra {
  border-top-color: var(--border-mid);
  color: var(--text-muted);
}

/* ============================================
   Price Comparison Strip (accordion layout)
   ============================================ */

/* Accordion wrapper */
.tbox-hvps-pc-accordion {
  max-width: 1100px;
  margin-top: var(--space-xl);
  margin-right: auto;
  margin-left: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--surface-subtle);
  overflow: hidden;
}

/* The configurator shortcode nests the comparison accordion inside the
   configurator grid (1fr + sidebar). Span both tracks so it stays full-width
   and its own max-width/margin centering applies, rather than auto-placing
   into the 1fr column. */
#hourly-vps-configurator > .tbox-hvps-pc-accordion {
  grid-column: 1 / -1;
}

.tbox-hvps-pc-teaser {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-xl);
  flex-wrap: wrap;
}

.tbox-hvps-pc-teaser__lede {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  flex: 1 1 auto;
}

.tbox-hvps-pc-teaser__prices {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.tbox-hvps-pc-teaser__expand {
  flex-shrink: 0;
  padding: var(--space-xs) var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}

.tbox-hvps-pc-teaser__expand:hover,
.tbox-hvps-pc-teaser__expand:focus-visible {
  color: var(--text-primary);
  border-color: var(--brand-primary);
  outline: none;
}

@media (prefers-reduced-motion: no-preference) {
  .tbox-hvps-pc-strip__inner:not(.tbox-hidden) {
    animation: tbox-pc-inner-enter 0.22s ease-out both;
  }
}


/* Hide PPG section when accordion is visible (strip inside pricing section now) */
.tbox-hvps-pc-accordion:not(.tbox-hidden) ~ .tbox-hvps-comparison-section {
  display: none;
}

.tbox-hvps-pc-strip__inner {
  border-top: 1px solid var(--border-light);
  background: var(--surface-subtle);
  overflow: hidden;
}

/* Controls row (tier + provider dropdowns) */
.tbox-hvps-pc-strip__controls {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-base);
  flex-wrap: wrap;
}

/* Provider select */
.tbox-hvps-pc-strip__provider-select {
  display: flex;
  align-items: center;
  gap: var(--space-sm-minus);
}

.tbox-hvps-pc-strip__provider-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--text-secondary);
  white-space: nowrap;
}

.tbox-hvps-pc-strip__tier-select {
  display: flex;
  align-items: center;
  gap: var(--space-sm-minus);
}

.tbox-hvps-pc-strip__tier-label,
.tbox-hvps-pc-col-h,
.tbox-hvps-pc-col-h__sub {
  color: var(--text-secondary);
}

.tbox-hvps-pc-strip__tier-label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
}

.tbox-hvps-pc-strip__tier-dropdown,
.tbox-hvps-pc-strip__provider-dropdown {
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  padding: 0.35rem 1.85rem 0.35rem var(--space-sm-mid);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  color: var(--text-primary);
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2364748B' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.55rem center;
}

.tbox-hvps-pc-strip__tier-dropdown:focus-visible,
.tbox-hvps-pc-strip__provider-dropdown:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-strong);
  outline-offset: 1px;
  border-color: var(--brand-primary);
}

/* Column headers */
.tbox-hvps-pc-strip__col-headers {
  display: grid;
  grid-template-columns: 1fr 120px 140px;
  gap: var(--space-md);
  padding: 0.55rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-base);
}

@media (width <= 700px) {
  .tbox-hvps-pc-strip__col-headers {
    grid-template-columns: 1fr auto auto;
    padding: var(--space-xs) 1rem;
    gap: var(--space-xs);
  }
}


.tbox-hvps-pc-col-h {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  text-align: right;
}

.tbox-hvps-pc-col-h:first-child {
  text-align: left;
}

.tbox-hvps-pc-col-h--accent {
  color: var(--brand-primary-text);
  position: relative;
  padding-bottom: 0.3rem;
}

.tbox-hvps-pc-col-h--accent::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 1px;
}

.tbox-hvps-pc-col-h__sub {
  display: block;
  font-size: 0.6rem; /* micro-UI: intentional literal */
  font-weight: var(--fw-medium);
  text-transform: none;
  letter-spacing: var(--ls-normal);
  margin-top: 0.1rem;
}

/* Savings accent — left border when TB is cheaper */
/* Use box-shadow inset to avoid layout shift vs peer rows */
#hourly-vps-configurator .tbox-hvps-pc-strip__tb-row.tbox-hvps-pc-strip--savings {
  box-shadow: inset 4px 0 0 var(--tbox-hvps-success-600);
}

/* Togglebox row */
.tbox-hvps-pc-strip__tb-row {
  display: grid;
  grid-template-columns: 1fr 120px 140px;
  gap: var(--space-md);
  padding: 1rem 1.5rem;
  align-items: start;
  background: var(--brand-primary-04);
  border-bottom: 2px solid var(--brand-primary);
}

@media (width <= 700px) {
  .tbox-hvps-pc-strip__tb-row {
    grid-template-columns: 1fr auto auto;
    gap: var(--space-xs);
    padding: 0.65rem 1rem;
  }
}


.tbox-hvps-pc-strip__tb-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm-plus);
}

.tbox-hvps-pc-strip__tb-logo {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: var(--brand-primary-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: var(--fw-bold);
  font-size: var(--fs-2xs);
  flex-shrink: 0;
}

.tbox-hvps-pc-strip__tb-name {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.tbox-hvps-pc-strip__tb-ha {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem var(--space-sm-minus);
  border-radius: var(--radius-sm-plus);
  font-size: 0.62rem; /* micro-UI: intentional literal */
  font-weight: var(--fw-semibold);
  background: rgb(16 185 129 / 18%);
  color: var(--text-primary);
  border: 1px solid rgb(16 185 129 / 20%);
  margin-left: var(--space-xs-plus);
  vertical-align: middle;
}

.tbox-hvps-pc-strip__tb-ha::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-primary);
}

.tbox-hvps-pc-strip__tb-plan {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 0.1rem;
}

.tbox-hvps-pc-strip__price-cell {
  text-align: right;
}

@media (width <= 700px) {
  .tbox-hvps-pc-strip__price-cell {
    text-align: right;
  }
}


.tbox-hvps-pc-strip__price-cell-label {
  display: none;
}

@media (width <= 700px) {
  .tbox-hvps-pc-strip__price-cell-label {
    display: none;
  }
}


.tbox-hvps-pc-price {
  font-family: var(--tbox-font-mono);
  font-variant-numeric: tabular-nums;
  line-height: 1.1;
}

.tbox-hvps-pc-price--tb-base {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.tbox-hvps-pc-price--tb-same {
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--brand-primary-text);
}

.tbox-hvps-pc-price__unit,
.tbox-hvps-pc-price__note {
  color: var(--text-secondary);
}

.tbox-hvps-pc-price__unit {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
}

.tbox-hvps-pc-price__note {
  font-size: var(--fs-xs);
  margin-top: 0.1rem;
  font-weight: var(--fw-normal);
}

/* Competitor rows */
.tbox-hvps-pc-strip__comp-rows {
  display: flex;
  flex-direction: column;
}

.tbox-hvps-pc-strip__comp-row {
  display: grid;
  grid-template-columns: 1fr 120px 140px;
  gap: var(--space-md);
  padding: var(--space-md) 1.5rem;
  align-items: start;
  border-bottom: 1px solid var(--border-light);
  transition: background var(--ease-fast);
}

.tbox-hvps-pc-strip__comp-row:last-child {
  border-bottom: none;
}

.tbox-hvps-pc-strip__comp-row:hover {
  background: var(--surface-base);
}

@media (width <= 700px) {
  .tbox-hvps-pc-strip__comp-row {
    grid-template-columns: 1fr auto auto;
    gap: var(--space-xs);
    padding: var(--space-sm) 1rem;
  }

  .tbox-hvps-pc-strip__tb-name {
    font-size: var(--fs-sm);
  }

  .tbox-hvps-pc-strip__comp-name {
    font-size: var(--fs-xs);
  }

  .tbox-hvps-pc-price--tb-base,
.tbox-hvps-pc-price--tb-same {
    font-size: var(--fs-base);
  }

  .tbox-hvps-pc-strip__comp-logo {
    width: 18px;
    height: 18px;
  }

  .tbox-hvps-pc-strip__tb-logo {
    width: 24px;
    height: 24px;
  }
}


.tbox-hvps-pc-strip__comp-left {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.tbox-hvps-pc-strip__comp-logo {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.55rem; /* micro-UI: intentional literal */
  font-weight: var(--fw-bold);
  flex-shrink: 0;
}

.tbox-hvps-pc-strip__comp-name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  color: var(--text-primary);
}

.tbox-hvps-pc-strip__comp-logo,
.tbox-hvps-pc-strip__comp-plan,
.tbox-hvps-pc-strip__footnote {
  color: var(--text-secondary);
}

.tbox-hvps-pc-strip__comp-plan {
  font-size: var(--fs-2xs);
  margin-top: 0.18rem;
  line-height: var(--lh-relaxed);
  white-space: normal;
}

.tbox-hvps-pc-price--comp-base {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

.tbox-hvps-pc-price--comp-same {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: var(--state-danger-text);
}

.tbox-hvps-pc-2x-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.58rem; /* micro-UI: intentional literal */
  font-weight: var(--fw-semibold);
  color: var(--state-danger-text);
  margin-top: 0.1rem;
}

.tbox-hvps-pc-2x-tag__badge {
  font-family: var(--tbox-font-mono);
  font-size: 0.56rem; /* micro-UI: intentional literal */
  font-weight: var(--fw-bold);
  background: rgb(239 68 68 / 14%);
  border: 1px solid rgb(239 68 68 / 18%);
  padding: 0 0.25rem;
  border-radius: var(--radius-2xs);
}

/* N/A row */
.tbox-hvps-pc-strip__comp-row--na {
  opacity: 0.45;
}

.tbox-hvps-pc-strip__comp-row--na .tbox-hvps-pc-strip__comp-plan {
  font-style: italic;
}

/* Strip footer */
.tbox-hvps-pc-strip__footer {
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border-light);
  background: var(--surface-base);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}

.tbox-hvps-pc-strip__insight {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md-plus) var(--space-lg);
  background: var(--brand-primary-04);
  border: 1px solid var(--brand-primary-10);
  border-radius: var(--radius-sm);
}

.tbox-hvps-pc-strip__insight-icon {
  flex-shrink: 0;
  font-size: var(--fs-base);
  margin-top: 0.05rem;
}

.tbox-hvps-pc-strip__insight-text {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
  line-height: var(--lh-normal);
}

.tbox-hvps-pc-strip__insight-detail {
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  margin-top: 0.15rem;
  font-weight: var(--fw-normal);
}

/* Callout above TB row — scannable savings headline */
.tbox-hvps-pc-strip__callout {
  padding: 0.5rem 1.5rem;
  background: rgb(16 185 129 / 6%);
  box-shadow: inset 4px 0 0 var(--tbox-hvps-success-600);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
  line-height: var(--lh-normal);
}

.tbox-hvps-pc-strip__footnote {
  max-width: var(--prose-measure-wide);
  margin: var(--space-md) auto 0;
  font-size: var(--fs-2xs);
  line-height: var(--lh-relaxed);
  text-align: center;
}

@media (width <= 700px) {
  .tbox-hvps-pc-teaser {
    padding: var(--space-sm) var(--space-md);
    gap: var(--space-sm);
  }

  .tbox-hvps-pc-strip__controls {
    flex-direction: column;
    align-items: stretch;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  .tbox-hvps-pc-strip__tier-select,
.tbox-hvps-pc-strip__provider-select {
    min-width: 0;
    width: 100%;
    justify-content: space-between;
  }

  .tbox-hvps-pc-strip__tier-dropdown,
.tbox-hvps-pc-strip__provider-dropdown {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
  }

  .tbox-hvps-pc-strip__price-cell-label {
    display: block;
    margin-bottom: 0.18rem;
    font-size: 0.58rem; /* micro-UI: intentional literal */
    font-weight: var(--fw-semibold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--text-secondary);
  }

  .tbox-hvps-pc-strip__tb-left,
.tbox-hvps-pc-strip__comp-left {
    align-items: flex-start;
  }

  .tbox-hvps-pc-strip__tb-plan,
.tbox-hvps-pc-strip__comp-plan {
    max-width: 11rem;
  }

  .tbox-hvps-pc-strip__callout {
    padding: 0.65rem 1rem;
    font-size: var(--fs-xs);
  }

  .tbox-hvps-pc-strip__footer {
    padding: var(--space-md) var(--space-md-plus);
  }
}


:where(#hourly-vps-configurator .tbox-config-card .tbox-form-label) {
  color: var(--text-secondary);
}

/* ============================================
   Light mode: config cards + pricing card
   (overrides hardcoded dark defaults above;
   dark mode rules in the dark-mode section below
   take precedence for system/manual dark)
   ============================================ */

/* Config cards: give each its own surface within the form column */
:root[data-theme="dark"] #hourly-vps-configurator .tbox-config-card--resources,
:root[data-theme="dark"] #hourly-vps-configurator .tbox-config-card--selects,
:root[data-theme="dark"] #hourly-vps-configurator .tbox-config-card--backups {
  background: var(--surface-subtle);
  border-color: var(--border-light);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-hvps-form-column > .tbox-config-card--selects,
:where(:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-hvps-form-column > .tbox-config-card--resources),
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-hvps-form-column > .tbox-config-card--backups {
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: var(--space-lg-plus);
}

/* Pricing card: white background */
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card {
  background: var(--surface-base);
  border-color: var(--border-light);
  color: var(--text-primary);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card-header {
  color: var(--text-muted);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-breakdown {
  border-top-color: var(--border-light);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-breakdown-title {
  color: var(--text-muted);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-row {
  border-bottom-color: var(--border-light);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-row .tbox-pricing-row__label {
  color: var(--text-secondary);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-row .tbox-pricing-row__value,
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-row--static .tbox-pricing-row__value {
  color: var(--text-primary);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card .cta-microcopy,
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-trust-line,
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-cap-note {
  color: var(--text-secondary);
}

/* Cap note inside the dark-blue header band stays white */
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total--monthly-primary .tbox-pricing-cap-note {
  color: rgb(255 255 255 / 75%);
}

/* Chat nudge footer: distinguish from card background */
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent {
  background: rgb(0 0 0 / 5%);
  border-color: var(--border-light);
}

/* Share / Reset buttons: brand primary accent */
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-hvps-utility-btn {
  color: var(--brand-primary-text);
  border-color: var(--brand-primary-16);
  background: var(--surface-base);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-utility-btn {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-hvps-utility-btn:hover,
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-hvps-utility-btn:focus-visible {
  background: var(--surface-muted);
  border-color: var(--brand-primary);
}

.tbox-comparison-section {
  background: var(--ahcalc-slate-50);
  padding: 4rem var(--space-xl);
}


.tbox-comparison-inner,
.tbox-comparison-group {
  max-width: 1000px;
  margin: 0 auto;
}


.tbox-comparison-group {
  margin-top: 4rem;
}


:where(.tbox-comparison-table th) {
  background: var(--ahcalc-slate-800);
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
}


:where(.tbox-comparison-table td) {
  font-size: var(--fs-md);
  color: var(--ahcalc-slate-700);
}


.tbox-comparison-table tr.highlight {
  background: rgb(34 211 238 / 6%);
}


.tbox-comparison-table .check {
  color: var(--ahcalc-success-500);
  font-weight: var(--fw-bold);
}


.tbox-comparison-table .price {
  font-family: var(--ahcalc-mono);
  font-weight: var(--fw-semibold);
}



/* HVPS highlight chips: ensure text remains readable on dark surfaces */

/* HVPS: avoid bright “light mode” table surfaces in dark mode */

:root[data-theme="dark"] .tbox-hvps-price-compare-table,
:root[data-theme="dark"] .tbox-comparison-table {
  background: var(--surface-glass-04);
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-hvps-price-compare-table thead {
  background: var(--surface-glass-06);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-backup__addons-note {
  background: var(--surface-glass-08);
  border-color: var(--surface-glass-18);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-form-select {
  background-color: var(--surface-glass-06);
  border-color: var(--border-mid);
  color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 16px 16px;
}

:where(:root[data-theme="dark"] #hourly-vps-configurator .tbox-form-select:focus) {
  background-color: var(--surface-glass-08);
  box-shadow: 0 0 0 3px var(--brand-primary-bg);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-slider-value input[type="number"] {
  background-color: var(--surface-glass-06);
  border-color: var(--border-mid);
  color: var(--text-primary);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-slider-value input[type="number"]:focus,
:root[data-theme="dark"] #hourly-vps-configurator .tbox-slider-value input[type="number"]:focus-visible {
  background-color: var(--surface-glass-08);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-slider-step-btn {
  background-color: var(--surface-glass-06);
  border-color: var(--border-mid);
  color: var(--text-primary);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-slider-step-btn:hover {
  background-color: var(--surface-glass-08);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-slider-wrapper {
  background-color: rgb(226 232 240 / 14%);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-disk-unit-toggle {
  border-color: var(--border-mid);
  background-color: var(--surface-glass-06);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-disk-unit-btn:not(.tbox-hvps-disk-unit-btn--active) {
  color: var(--text-secondary);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-disk-unit-btn + .tbox-hvps-disk-unit-btn {
  border-left: 1px solid var(--border-mid);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-disk-unit-btn:not(.tbox-hvps-disk-unit-btn--active):hover {
  background: var(--surface-glass-08);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-preset-price__amount {
  color: var(--brand-primary);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-config-card--backups .tbox-hvps-backup-total-cost {
  color: var(--text-primary);
  background: var(--surface-glass-10);
  border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--border-mid));
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-backup-custom-toggle__text {
  color: var(--text-primary);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-backup-preset-btn--active .tbox-hvps-backup-preset-title {
  color: var(--brand-primary);
}

:root[data-theme="dark"] :is(#hourly-vps-configurator .tbox-hvps-disk-unit-btn--active, #hourly-vps-configurator #tbox-hvps-configure-btn) {
  color: var(--tbox-btn-accent-text);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn:hover,
:root[data-theme="dark"] #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-chat-assist--prominent .tbox-hvps-chat-assist__btn:focus-visible {
  color: var(--brand-primary);
  background: var(--surface-glass-06);
}

:where(:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-backup__count select),
:where(:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup__count select) {
  background-color: var(--surface-glass-06);
  border-color: var(--border-mid);
  color: var(--text-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.5rem center;
  background-size: 16px 16px;
}

:where(:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-backup__count select:focus),
:where(:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-backup-row-compact .tbox-hvps-backup__count select:focus) {
  background-color: var(--surface-glass-08);
  box-shadow: 0 0 0 3px var(--brand-primary-bg);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-form-select {
  color-scheme: dark;
}



/* Performance Guard: remove light surfaces in dark mode */
:root[data-theme="dark"] .tbox-hvps-performance-guard-section.tbox-hourly-cloud-vps {
  background: var(--surface-base);
}

:root[data-theme="dark"] .tbox-hvps-performance-guard-section .tbox-pga-stage {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
}

/* Config cards: visible dark surfaces (cloud-vps pricing configurator) */

/* Resources card: restore padding (cards are padding:0 inside the form column) */
:root[data-theme="dark"] #hourly-vps-configurator .tbox-config-card--resources {
  padding: var(--space-lg-plus);
}

/* Backup rows: lift above card background for row separation */
:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-backup-row {
  background: var(--surface-glass-08);
}

/* Pricing summary card: match config card surface */
:root[data-theme="dark"] #hourly-vps-configurator .tbox-pricing-card {
  background: var(--surface-subtle);
  border-color: var(--border-light);
}

/* Share / Reset buttons: brand primary accent */
:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-utility-btn:hover,
:root[data-theme="dark"] #hourly-vps-configurator .tbox-hvps-utility-btn:focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 16%, transparent);
}

:root[data-theme="dark"] .tbox-comparison-section {
  background: var(--surface-base);
}


:root[data-theme="dark"] .tbox-comparison-footnote {
  color: var(--text-muted);
}


:root[data-theme="dark"] .tbox-comparison-table {
  background: var(--surface-glass-04);
  box-shadow: var(--shadow-sm);
}


:root[data-theme="dark"] .tbox-comparison-table tr.highlight {
  background: var(--brand-primary-bg);
}



/* Home page: stats row (now in trust section) */

/* ── Cloud VPS overhaul: dark mode for new sections ── */

/* Price comparison accordion + strip */

:root[data-theme="dark"] .tbox-hvps-pc-accordion {
  border-color: var(--border-light);
  background: var(--surface-dark);
}

:root[data-theme="dark"] .tbox-hvps-pc-strip__controls {
  background: var(--surface-base);
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-hvps-pc-strip__inner {
  background: var(--surface-dark);
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-hvps-pc-strip__controls,
:root[data-theme="dark"] .tbox-hvps-pc-strip__col-headers,
:root[data-theme="dark"] .tbox-hvps-pc-strip__footer {
  background: var(--surface-base);
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-hvps-pc-col-h,
:root[data-theme="dark"] .tbox-hvps-pc-col-h__sub {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-hvps-pc-col-h--accent {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-hvps-pc-strip__tb-row {
  background: rgb(16 185 129 / 7%);
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-hvps-pc-strip__callout {
  background: rgb(16 185 129 / 8%);
  color: var(--tbox-hvps-success-500);
}

:root[data-theme="dark"] .tbox-hvps-pc-strip__comp-row {
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-hvps-pc-strip__comp-row:hover {
  background: var(--surface-base);
}

:root[data-theme="dark"] .tbox-hvps-pc-price--tb-same {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-hvps-pc-price--comp-same {
  color: var(--state-danger-text);
}

:root[data-theme="dark"] .tbox-hvps-pc-2x-tag {
  color: var(--state-danger-text);
}

:root[data-theme="dark"] .tbox-hvps-pc-strip__tier-dropdown,
:root[data-theme="dark"] .tbox-hvps-pc-strip__provider-dropdown {
  background: var(--surface-dark);
  border-color: var(--border-light);
  color: var(--text-primary);
}

/* Table alternate rows (dark) */
:root[data-theme="dark"] .tbox-comparison-table tbody tr:nth-child(even) {
  background: var(--surface-glass-03);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-slider-track {
  background: var(--surface-glass-12);
}

.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-pricing-intro,
#hourly-vps-configurator .tbox-pricing-intro {
  text-align: center;
  margin-bottom: var(--space-2xl);
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator {
  row-gap: var(--space-lg);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-hvps-form-column {
  gap: var(--space-md-plus);
  padding: clamp(0.95rem, 1.3vw, 1.1rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-base) 92%, var(--surface-subtle)), var(--surface-base));
  border-color: color-mix(in srgb, var(--brand-primary) 14%, var(--border-light));
  box-shadow: var(--shadow-md);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-hvps-form-column > .tbox-config-card:is(.tbox-config-card--selects, .tbox-config-card--resources, .tbox-config-card--backups) {
  padding: clamp(0.95rem, 1.3vw, 1.1rem);
  background: var(--surface-base);
  border-color: color-mix(in srgb, var(--brand-primary) 12%, var(--border-light));
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-config-card--backups .tbox-config-card-header {
  margin-bottom: var(--space-sm);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-buttons {
  gap: var(--space-md-plus);
}

/* Stickiness lives on the inner pricing card only (base rule ~28296): the
   sidebar stays grid-stretched so the card clamps inside its own row and
   never overhangs the competitor comparison strip below the grid. A sticky
   sidebar + sticky card combination let the card escape its row by ~90px and
   cover the strip's "Compare prices side by side" control. The top offset
   clears the fixed header + sticky jump bar so the summary top is not
   clipped. */
#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-pricing-card {
  top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 64px) + 70px + var(--space-md, 1rem));
  padding: clamp(0.95rem, 1.3vw, 1.1rem);
  border-color: color-mix(in srgb, var(--brand-primary) 20%, var(--border-light));
  box-shadow:
    0 18px 40px color-mix(in srgb, var(--brand-primary-deep) 10%, transparent),
    var(--shadow-sm);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn {
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-base) 96%, var(--brand-primary-bg)), var(--surface-base));
  border-color: color-mix(in srgb, var(--brand-primary) 14%, var(--border-light));
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn:is(:hover, :focus-visible),
#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn--active {
  border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--border-light));
  box-shadow: var(--shadow-sm);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-pricing-total {
  margin-bottom: var(--space-md-plus);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-pricing-breakdown {
  margin-bottom: var(--space-md-plus);
  padding-top: var(--space-sm-plus);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-hvps-next-step-bridge {
  margin-top: var(--space-2xs);
}

#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-hvps-managed-infra {
  margin-top: 0.75rem;
  padding-top: 0.9rem;
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-buttons {
  align-items: stretch;
  gap: var(--space-md);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn {
  position: relative;
  overflow: hidden;
  min-height: 13.2rem;
  border-color: color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  box-shadow: none;
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--text-muted);
  opacity: 0.75;
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn--tier1::before {
  background: var(--color-teal);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn--tier2::before {
  background: var(--brand-primary);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn--tier3::before {
  background: var(--brand-cta);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn:is(:hover, :focus-visible, .tbox-preset-btn--active) {
  border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--border-light) 58%);
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary-bg) 12%);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn--custom {
  justify-content: center;
  min-height: 13.2rem;
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-microcopy {
  min-height: 4.35rem;
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-price {
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px solid color-mix(in srgb, var(--border-light) 80%, transparent);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-hvps-form-column,
body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-pricing-card {
  border-color: color-mix(in srgb, var(--border-light) 76%, var(--brand-primary) 24%);
  border-radius: var(--radius-sm-plus);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-pricing-card {
  overflow: hidden;
  box-shadow: 0 12px 28px color-mix(in srgb, var(--gray-950) 10%, transparent);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-config-card {
  border-radius: var(--radius-sm-plus);
  box-shadow: none;
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .reveal-section {
  opacity: 1;
  transform: none;
  transition: border-color var(--ease-base), background-color var(--ease-base), box-shadow var(--ease-base);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-pricing-total {
  border-bottom: 1px solid color-mix(in srgb, var(--border-light) 78%, transparent);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-hvps-price-value {
  letter-spacing: 0;
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator #tbox-hvps-configure-btn {
  border-radius: var(--radius-sm-plus);
}

:root[data-theme="dark"] body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-price {
  border-color: color-mix(in srgb, var(--border-mid) 72%, transparent);
}

:root[data-theme="dark"] body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn,
:root[data-theme="dark"] body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-hvps-form-column,
:root[data-theme="dark"] body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-pricing-card {
  border-color: var(--border-mid);
}


:root[data-theme="dark"] body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn:is(:hover, :focus-visible, .tbox-preset-btn--active) {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 8%);
}



#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-utility-row .tbox-hvps-utility-btn {
  border-color: transparent;
  color: var(--surface-glass-40);
  padding: 0.2rem 0.5rem;
}

#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-utility-row .tbox-hvps-utility-btn:hover,
#hourly-vps-configurator .tbox-pricing-card .tbox-hvps-utility-row .tbox-hvps-utility-btn:focus-visible {
  border-color: var(--surface-glass-15);
  color: var(--surface-glass-70);
  background: var(--surface-glass-06);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-utility-row .tbox-hvps-utility-btn {
  border-color: var(--brand-primary-16);
  color: var(--brand-primary-text);
  background: var(--surface-base);
}

:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-utility-row .tbox-hvps-utility-btn:hover,
:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-pricing-card .tbox-hvps-utility-row .tbox-hvps-utility-btn:focus-visible {
  border-color: var(--brand-primary);
  color: var(--brand-primary-text);
  background: var(--surface-muted);
}

#hourly-vps-configurator .tbox-pricing-card #tbox-hvps-configure-btn {
  margin-top: var(--space-xl);
}

/* ============================================
   Config Phases (Variant E)
   ============================================ */

/* Numbered badge in phase headers */
#hourly-vps-configurator .tbox-hvps-phase__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-cap);
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
}

#hourly-vps-configurator .tbox-hvps-phase__num svg {
  width: 16px;
  height: 16px;
}

/* Collapsed-summary row */
#hourly-vps-configurator .tbox-hvps-phase__summary {
  display: none;
  align-items: center;
  gap: var(--space-md);
  width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
}

#hourly-vps-configurator .tbox-hvps-phase.is-collapsed > .tbox-hvps-phase__summary {
  display: flex;
}

#hourly-vps-configurator .tbox-hvps-phase.is-collapsed > .tbox-config-card-header,
#hourly-vps-configurator .tbox-hvps-phase.is-collapsed > .tbox-hvps-phase__body {
  display: none;
}

/* Collapsed phase: uniform compact card regardless of phase-specific chrome */
#hourly-vps-configurator .tbox-hvps-form-column > .tbox-hvps-phase.is-collapsed {
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

#hourly-vps-configurator .tbox-hvps-form-column > .tbox-hvps-phase.is-collapsed:hover {
  border-color: var(--border-mid);
}

#hourly-vps-configurator .tbox-hvps-phase__summary:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
  border-radius: var(--radius-md);
}

/* Manual collapse caret in the expanded phase header. The whole header is the
   click target (matches the JS handler scope); flex-wrap lets the Phase 3 cost
   pill + caret drop to a second line on narrow viewports instead of
   overflowing the card. */
#hourly-vps-configurator .tbox-hvps-phase > .tbox-config-card-header {
  flex-wrap: wrap;
  cursor: pointer;
}

#hourly-vps-configurator .tbox-hvps-phase__collapse {
  flex: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  padding: 0;
  background: none;
  border: 0;
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--ease-fast);
}

#hourly-vps-configurator .tbox-hvps-phase__collapse svg {
  width: 18px;
  height: 18px;
}

#hourly-vps-configurator .tbox-hvps-phase__collapse:hover {
  color: var(--text-primary);
}

#hourly-vps-configurator .tbox-hvps-phase__collapse:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Phase 3 header: cost pill sits beside the title so the caret alone owns the
   right edge via its auto margin (prevents a double-auto free-space split). */
#hourly-vps-configurator .tbox-config-card--backups .tbox-config-card-header .tbox-hvps-backup-total-cost {
  margin-left: 0;
}

#hourly-vps-configurator .tbox-hvps-phase__summary-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

#hourly-vps-configurator .tbox-hvps-phase__summary-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

#hourly-vps-configurator .tbox-hvps-phase__summary-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

#hourly-vps-configurator .tbox-hvps-summary-pill {
  padding: 2px 9px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-cap);
  background: var(--surface-subtle);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

#hourly-vps-configurator .tbox-hvps-phase__edit {
  flex: none;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-left: auto;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
}

#hourly-vps-configurator .tbox-hvps-phase__edit svg {
  width: 15px;
  height: 15px;
}

#hourly-vps-configurator .tbox-hvps-phase__summary:hover .tbox-hvps-phase__edit {
  text-decoration: underline;
}

/* Quick-pick chips */
#hourly-vps-configurator .tbox-hvps-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-sm);
}

#hourly-vps-configurator .tbox-hvps-chips:empty {
  display: none;
}

#hourly-vps-configurator .tbox-hvps-chip {
  min-width: 34px;
  padding: var(--space-2xs) var(--space-sm-mid);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  font: inherit;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  text-align: center;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast), color var(--ease-fast);
}

#hourly-vps-configurator .tbox-hvps-chip:hover {
  border-color: var(--border-mid);
  color: var(--text-primary);
}

#hourly-vps-configurator .tbox-hvps-chip.is-on {
  background: var(--brand-primary-deep);
  border-color: var(--brand-primary-deep);
  color: var(--text-inverse);
}

#hourly-vps-configurator .tbox-hvps-chip:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

#hourly-vps-configurator .tbox-hvps-chip:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

@media (pointer: coarse) {
  #hourly-vps-configurator .tbox-hvps-chip { min-height: 44px; }
}


/* Region tiles (Phase 1) */
#hourly-vps-configurator .tbox-hvps-regions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

@media (width <= 560px) {
  #hourly-vps-configurator .tbox-hvps-regions {
    grid-template-columns: 1fr;
  }
}


#hourly-vps-configurator .tbox-hvps-region-tile {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1.5px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  text-align: left;
  font: inherit;
  cursor: pointer;
  transition: border-color var(--ease-fast), background var(--ease-fast);
}

#hourly-vps-configurator .tbox-hvps-region-tile:hover {
  border-color: var(--border-mid);
}

#hourly-vps-configurator .tbox-hvps-region-tile.is-active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-06);
}

#hourly-vps-configurator .tbox-hvps-region-tile:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

#hourly-vps-configurator .tbox-hvps-region-tile__icon {
  flex: none;
  color: var(--brand-primary-text);
}

#hourly-vps-configurator .tbox-hvps-region-tile__icon svg {
  display: block;
  width: 18px;
  height: 18px;
}

#hourly-vps-configurator .tbox-hvps-region-tile__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

#hourly-vps-configurator .tbox-hvps-region-tile__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

#hourly-vps-configurator .tbox-hvps-region-tile__meta {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

#hourly-vps-configurator .tbox-hvps-region-tile__tick {
  flex: none;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-left: auto;
  border: 1.5px solid var(--border-mid);
  border-radius: var(--radius-cap);
  color: transparent;
}

#hourly-vps-configurator .tbox-hvps-region-tile.is-active .tbox-hvps-region-tile__tick {
  border-color: var(--brand-primary);
  background: var(--brand-primary);
  color: var(--text-inverse);
}

#hourly-vps-configurator .tbox-hvps-region-tile__tick svg {
  width: 11px;
  height: 11px;
}

/* Segmented OS-family control */
#hourly-vps-configurator .tbox-hvps-os-seg {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

#hourly-vps-configurator .tbox-hvps-os-seg__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2xs) var(--space-md);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast);
}

#hourly-vps-configurator .tbox-hvps-os-seg__btn.is-active {
  background: var(--surface-base);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

#hourly-vps-configurator .tbox-hvps-os-seg__btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus-ring);
}

/* Consistent phase title sizing across all three phases */
#hourly-vps-configurator .tbox-hvps-phase .tbox-config-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
}

/* Included-backup banner (Phase 3) */
#hourly-vps-configurator .tbox-hvps-backup-included {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  background: var(--brand-primary-06);
  border: 1px solid var(--brand-primary-12);
  border-radius: var(--radius-md);
}

#hourly-vps-configurator .tbox-hvps-backup-included__icon {
  flex: none;
  display: flex;
  color: var(--brand-primary-text);
}

#hourly-vps-configurator .tbox-hvps-backup-included__icon svg {
  width: 18px;
  height: 18px;
}

#hourly-vps-configurator .tbox-hvps-backup-included p {
  margin: 0;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  max-width: var(--prose-measure-default);
}

/* ============================================
   Mobile Sticky Price Bar
   ============================================ */

.tbox-hvps-mobile-price-bar {
  display: none;
}

@media (width <= 960px) {


  /* Keep focus/anchor scroll targets clear of the fixed price bar */
  #hourly-vps-configurator button,
  #hourly-vps-configurator input,
  #hourly-vps-configurator select {
    scroll-margin-bottom: calc(var(--hvps-mobile-bar-height) + var(--space-lg));
  }

  .tbox-hvps-mobile-price-bar {
    display: flex;
    flex-direction: column-reverse;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 200;
    background: var(--surface-dark);
    border-top: 1px solid var(--border-light);
    box-shadow: var(--shadow-sticky-cta);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(100%);
    transition:
      opacity 180ms ease-out,
      transform 180ms ease-out,
      visibility 0s linear 180ms;
  }

  .tbox-hvps-mobile-price-bar.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
    transition:
      opacity 180ms ease-out,
      transform 180ms ease-out,
      visibility 0s linear 0s;
  }

  /* Header: tap target that expands the cost summary */
  .tbox-hvps-mobile-price-bar__toggle {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    width: 100%;
    padding: var(--space-md) var(--space-xl);
    padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
    background: transparent;
    border: 0;
    border-top: 1px solid transparent;
    color: var(--text-inverse);
    text-align: left;
    cursor: pointer;
  }

  .tbox-hvps-mobile-price-bar.is-expanded .tbox-hvps-mobile-price-bar__toggle {
    border-top-color: var(--surface-glass-10);
  }

  .tbox-hvps-mobile-price-bar__toggle:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-ring-on-dark);
    outline-offset: -3px;
  }

  .tbox-hvps-mobile-price-bar__summary {
    display: flex;
    align-items: baseline;
    gap: var(--space-sm);
    min-width: 0;
  }

  .tbox-hvps-mobile-price-bar__label {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-wider);
    color: var(--surface-glass-75);
  }

  .tbox-hvps-mobile-price-bar__price {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-bold);
    font-variant-numeric: tabular-nums;
    color: var(--text-inverse);
  }

  .tbox-hvps-mobile-price-bar__chevron {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    color: var(--surface-glass-75);
    transition: transform 180ms ease-out;
  }

  .tbox-hvps-mobile-price-bar.is-expanded .tbox-hvps-mobile-price-bar__chevron {
    transform: rotate(180deg);
  }

  /* Expandable cost-summary panel. The 0fr -> 1fr grid collapse animates on
     `__panel`; `__panel-clip` is the bare grid item that clips (no padding,
     so the 0fr row resolves to 0); `__panel-inner` carries padding + scroll. */
  .tbox-hvps-mobile-price-bar__panel {
    display: grid;
    grid-template-rows: 0fr;
    min-height: 0;
    transition: grid-template-rows var(--ease-slow);
  }

  .tbox-hvps-mobile-price-bar.is-expanded .tbox-hvps-mobile-price-bar__panel {
    grid-template-rows: 1fr;
  }

  .tbox-hvps-mobile-price-bar__panel-clip {
    min-height: 0;
    overflow: hidden;
  }

  .tbox-hvps-mobile-price-bar__panel-inner {
    max-height: calc(70vh - var(--hvps-mobile-bar-height));
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    padding: var(--space-lg) var(--space-xl);
  }

  .tbox-hvps-mobile-price-bar__panel-heading {
    margin: 0;
    font-size: var(--fs-2xs);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    letter-spacing: var(--ls-widest);
    color: var(--surface-glass-60);
  }

  /* Cloned breakdown rows sit on the always-dark bar surface. The in-card row
     colours are theme-relative — and a theme-scoped rule forces dark text in
     light mode — so re-tint them. The panel-id selector is required to
     outrank `:root:not([data-theme="dark"]) #hourly-vps-configurator
     .tbox-pricing-row .tbox-pricing-row__value`. */
  #hourly-vps-configurator #tbox-hvps-mobile-price-bar-panel .tbox-hvps-mobile-price-bar__breakdown .tbox-pricing-row {
    border-bottom-color: var(--surface-glass-10);
  }

  #hourly-vps-configurator #tbox-hvps-mobile-price-bar-panel .tbox-hvps-mobile-price-bar__breakdown .tbox-pricing-row .tbox-pricing-row__label {
    color: var(--surface-glass-75);
  }

  #hourly-vps-configurator #tbox-hvps-mobile-price-bar-panel .tbox-hvps-mobile-price-bar__breakdown .tbox-pricing-row .tbox-pricing-row__value {
    color: var(--text-inverse);
  }

  .tbox-hvps-mobile-price-bar__totals {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xs);
    padding-top: var(--space-sm);
    border-top: 1px solid var(--surface-glass-10);
  }

  .tbox-hvps-mobile-price-bar__total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
  }

  .tbox-hvps-mobile-price-bar__total-label {
    font-size: var(--fs-sm);
    color: var(--surface-glass-75);
  }

  .tbox-hvps-mobile-price-bar__total-value {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    font-variant-numeric: tabular-nums;
    color: var(--text-inverse);
  }

  .tbox-hvps-mobile-price-bar__total-row--primary .tbox-hvps-mobile-price-bar__total-label {
    font-weight: var(--fw-semibold);
    color: var(--text-inverse);
  }

  .tbox-hvps-mobile-price-bar__total-row--primary .tbox-hvps-mobile-price-bar__total-value {
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
  }

  .tbox-hvps-mobile-price-bar__actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
  }

  .tbox-hvps-mobile-price-bar__cta,
  .tbox-hvps-mobile-price-bar__reset {
    width: 100%;
    justify-content: center;
  }

  /* `.tbox-btn-accent` is a light-surface ghost button (grey text on a
     transparent fill); on the always-dark panel that text fails contrast, so
     give the primary CTA a solid accent fill. The panel-id selector outranks
     `.tbox-btn.tbox-btn-accent`. */
  #hourly-vps-configurator #tbox-hvps-mobile-price-bar-panel .tbox-hvps-mobile-price-bar__cta {
    background: var(--warm-3);
    border-color: var(--warm-3);
    color: var(--brand-cta-ink);
  }

  #hourly-vps-configurator #tbox-hvps-mobile-price-bar-panel .tbox-hvps-mobile-price-bar__cta:hover {
    filter: brightness(0.95);
  }

  /* `.tbox-hvps-utility-btn` picks up light-theme brand-blue text/border from
     `:root:not([data-theme="dark"]) #hourly-vps-configurator .tbox-hvps-utility-btn`;
     re-tint the Reset button for the dark panel surface. */
  #hourly-vps-configurator #tbox-hvps-mobile-price-bar-panel .tbox-hvps-mobile-price-bar__reset {
    background: transparent;
    color: var(--surface-glass-75);
    border-color: var(--surface-glass-15);
  }

  #hourly-vps-configurator #tbox-hvps-mobile-price-bar-panel .tbox-hvps-mobile-price-bar__reset:hover,
  #hourly-vps-configurator #tbox-hvps-mobile-price-bar-panel .tbox-hvps-mobile-price-bar__reset:focus-visible {
    color: var(--text-inverse);
    border-color: var(--surface-glass-35);
    background: var(--surface-glass-06);
  }

  #hourly-vps-configurator {
    padding-bottom: calc(var(--hvps-mobile-bar-height) + env(safe-area-inset-bottom, 0px));
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-hvps-mobile-price-bar,
  .tbox-hvps-mobile-price-bar__panel,
  .tbox-hvps-mobile-price-bar__chevron {
    transition: none;
  }
}


:root[data-theme="dark"] body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-pricing-card {
  box-shadow: 0 12px 28px color-mix(in srgb, var(--gray-950) 18%, transparent);
}

@media (width <= 600px) {
  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn,
body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn--custom {
    min-height: 10.25rem;
  }

  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-microcopy {
    min-height: 0;
  }
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator :where(
  .tbox-hvps-slider-step-btn,
  .tbox-hvps-disk-unit-btn,
  .tbox-pricing-breakdown-toggle,
  .tbox-hvps-utility-btn,
  #tbox-hvps-configure-btn,
  .tbox-hvps-chat-assist__btn
) {
  min-width: 44px;
  min-height: 44px;
}



body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-hvps-disk-unit-btn {
  padding-inline: var(--space-md);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-hvps-utility-btn,
body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-hvps-chat-assist__btn {
  align-items: center;
  justify-content: center;
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-price {
  color: var(--text-primary);
}

:root[data-theme="dark"] #content #hourly-vps-configurator .tbox-hvps-utility-btn {
  border-color: var(--tbox-btn-outline-blue-border);
  color: var(--tbox-btn-outline-text-dark);
}

:root[data-theme="dark"] #content #hourly-vps-configurator .tbox-hvps-utility-btn:hover,
:root[data-theme="dark"] #content #hourly-vps-configurator .tbox-hvps-utility-btn:focus-visible {
  background: var(--text-inverse-12);
  border-color: var(--tbox-btn-outline-blue-border);
  color: var(--tbox-btn-outline-text-dark);
}


@media (width <= 600px) {
  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn,
  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn--custom {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 0;
    padding: var(--space-md);
    text-align: left;
  }

  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-btn::before {
    inset: 0 auto 0 0;
    width: 3px;
    height: auto;
  }

  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-name,
  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-specs {
    grid-column: 1;
  }

  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-microcopy {
    display: none;
  }

  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-preset-price {
    grid-column: 2;
    grid-row: 1 / span 2;
    margin: 0;
    padding: 0;
    border-top: 0;
    text-align: right;
  }
}



#content #hourly-vps-configurator .tbox-pricing-card .tbox-pricing-total--monthly-primary :where(.tbox-hvps-price-label, .tbox-pricing-cap-note) {
  color: var(--text-inverse);
}

#content #hourly-vps-configurator #tbox-hvps-configure-btn {
  color: var(--tbox-btn-accent-text);
}



#content #hourly-vps-configurator #tbox-hvps-configure-btn {
  background: var(--tbox-btn-accent-bg);
  border: 1px solid var(--tbox-btn-accent-border);
}

#content #hourly-vps-configurator #tbox-hvps-configure-btn:hover,
#content #hourly-vps-configurator #tbox-hvps-configure-btn:focus-visible {
  background: var(--tbox-btn-accent-bg-hover);
  border-color: var(--tbox-btn-accent-bg-hover);
}

/* Chat nudge stays ghost-style: Review & Launch owns the orange in the sidebar */
#content #hourly-vps-configurator .tbox-hvps-chat-assist .tbox-chat-btn {
  background: var(--surface-base);
  border: 1px solid var(--brand-primary-16);
  color: var(--brand-primary-text);
}

#content #hourly-vps-configurator .tbox-hvps-chat-assist .tbox-chat-btn:hover,
#content #hourly-vps-configurator .tbox-hvps-chat-assist .tbox-chat-btn:focus-visible {
  background: var(--surface-muted);
  border-color: var(--brand-primary);
}

:root[data-theme="dark"] #content #hourly-vps-configurator .tbox-hvps-chat-assist .tbox-chat-btn {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
}

:root[data-theme="dark"] #content #hourly-vps-configurator .tbox-hvps-chat-assist .tbox-chat-btn:hover,
:root[data-theme="dark"] #content #hourly-vps-configurator .tbox-hvps-chat-assist .tbox-chat-btn:focus-visible {
  color: var(--brand-primary);
  background: var(--surface-glass-06);
  border-color: var(--brand-primary);
}

/* Cloud VPS and calculator control exceptions. */
#content :where(.tbox-hvps-disk-unit-btn.tbox-hvps-disk-unit-btn--active, .tbox-hvps-disk-unit-btn[aria-pressed="true"]),
body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator :where(.tbox-hvps-disk-unit-btn.tbox-hvps-disk-unit-btn--active, .tbox-hvps-disk-unit-btn[aria-pressed="true"]) {
  background: var(--brand-primary-deep);
  color: var(--text-inverse);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-config-card--backups #tbox-hvps-backup-total-cost {
  color: var(--text-primary);
}


#content #hourly-vps-configurator .tbox-preset-btn {
  line-height: var(--lh-normal);
}