/* site-palette.css
 * Canonical stylesheet loaded as `site-palette`.
 * Includes legacy theme baseline, shared modules, product UI, and dark/light overrides.
 * NOTE: style.css font URLs are rewritten from assets/fonts/ to ../fonts/ for this file location.
 */

/*
Theme Name: TBOX 2022
Text Domain: TBOX2022
Version: 1.20211229.3
Description: Togglebox 2022 Theme
Tags: Togglebox
Author: Dave Sonnie
*/

/* RESETS */
html,
body,
div,
span,
applet,
object,
iframe,
h1,
h2,
h3,
h4,
h5,
h6,
p,
blockquote,
pre,
a,
abbr,
acronym,
address,
big,
cite,
code,
del,
dfn,
em,
img,
ins,
kbd,
q,
s,
samp,
small,
strike,
strong,
sub,
sup,
tt,
var,
b,
u,
i,
center,
dl,
dt,
dd,
ol,
ul,
li,
fieldset,
form,
label,
legend,
table,
caption,
tbody,
tfoot,
thead,
tr,
th,
td,
article,
aside,
canvas,
details,
embed,
figure,
figcaption,
footer,
header,
hgroup,
menu,
nav,
output,
ruby,
section,
summary,
time,
mark,
audio,
video {
	margin: 0;
	padding: 0;
	border: 0;
	font: inherit;
	vertical-align: baseline; /* Safari/Chrome, other WebKit */    /* Firefox, other Gecko */
  box-sizing: border-box;         /* Opera/IE 8+ */
}

/* App Hosting autoscaling polish */
.tbox-hero-v3--autoscale .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.44fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4.5rem);
  max-width: min(1160px, 92vw);
  text-align: left;
}

.tbox-hero-v3--autoscale .tbox-hero-v3__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
  min-width: 0;
}

.tbox-hero-v3--autoscale .tbox-hero-v3__title,
.tbox-hero-v3--autoscale .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

.tbox-hero-v3--autoscale .tbox-hero-v3__title {
  max-width: 15.5ch;
}

.tbox-hero-v3--autoscale .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
}

.tbox-hero-v3--autoscale .tbox-hero-v3__panel {
  display: grid;
  gap: var(--space-md);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--text-inverse-18);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-dark) 72%, var(--brand-primary-dark) 28%);
  box-shadow: 0 1px 0 var(--text-inverse-14) inset;
  color: var(--text-inverse);
}

.tbox-hero-v3--autoscale .tbox-hero-v3__panel-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--text-inverse-14);
}

.tbox-hero-v3--autoscale .tbox-hero-v3__panel-row span {
  color: color-mix(in srgb, var(--text-inverse) 66%, transparent);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
}

.tbox-hero-v3--autoscale .tbox-hero-v3__panel-row strong {
  color: var(--text-inverse);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
}

.tbox-hero-meter.tbox-hero-meter--bars {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: 3px;
  min-height: 3.5rem;
  align-items: end;
  padding-block: var(--space-xs);
}

.tbox-hero-meter.tbox-hero-meter--bars i {
  --i: 1;

  display: block;
  height: calc(0.45rem + (var(--i) * 0.18rem));
  border-radius: var(--radius-2xs);
  background: color-mix(in srgb, var(--brand-cta) calc(34% + (var(--i) * 4%)), var(--text-inverse));
}

.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(2) { --i: 2; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(3) { --i: 3; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(4) { --i: 4; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(5) { --i: 5; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(6) { --i: 6; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(7) { --i: 7; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(8) { --i: 8; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(9) { --i: 9; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(10) { --i: 10; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(11) { --i: 11; }
.tbox-hero-meter.tbox-hero-meter--bars i:nth-child(12) { --i: 12; }

.tbox-hero-v3--autoscale .tbox-hero-v3__panel p {
  margin: 0;
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.tbox-ah-autoscale-section__header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  align-items: center;
  gap: var(--space-xl);
  margin-bottom: var(--space-xl);
}

.tbox-ah-autoscale-section__header .tbox-section__desc {
  margin-bottom: 0;
}

.tbox-ah-autoscale-cap {
  padding: var(--space-lg);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-light) 78%);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary-bg) 12%);
}

.tbox-ah-autoscale-cap strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
}

.tbox-ah-autoscale-cap span {
  display: block;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.tbox-ah-autoscale-section--mechanism .tbox-card--media {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.tbox-ah-autoscale-section--mechanism .tbox-stats-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--border-light);
  overflow: hidden;
}

.tbox-ah-autoscale-section--mechanism .tbox-stat-cell {
  min-height: 100%;
  padding: var(--space-xl) var(--space-lg);
  border: 0;
  border-radius: 0;
  background: var(--surface-base);
  box-shadow: none;
  text-align: left;
  transform: none;
}

#content .tbox-ah-autoscale-section--mechanism .tbox-stat-cell__number {
  color: var(--brand-primary-text);
  font-size: clamp(1.8rem, 2.2vw, 2.45rem);
  line-height: 1.02;
  white-space: nowrap;
  margin-bottom: 0;
}

.tbox-ah-autoscale-section--mechanism .tbox-stat-cell__label {
  margin-top: var(--space-sm);
  color: var(--text-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.tbox-ah-autoscale-section--mechanism .tbox-stat-cell__desc {
  margin-top: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.tbox-ah-autoscale-section--mechanism .tbox-detail-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--border-light);
}

.tbox-ah-autoscale-section--mechanism .tbox-detail-card {
  border: 0;
  border-radius: 0;
  background: var(--surface-base);
  box-shadow: none;
}

.tbox-ah-autoscale-section--mechanism .tbox-detail-card__icon {
  border-radius: var(--radius-sm-plus);
}

.tbox-ah-autoscale-section--mechanism .tbox-extras-checklist {
  margin-top: var(--space-2xl);
  border-radius: var(--radius-md) !important;
  box-shadow: none;
}

.tbox-ah-autoscale-proof {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.tbox-ah-autoscale-proof .tbox-ui-proof__media {
  border-radius: var(--radius-sm-plus);
}

.tbox-ah-autoscale-action-card {
  border-radius: var(--radius-md);
  background: var(--surface-base);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border-light));
  box-shadow: none;
  color: var(--text-primary);
}

.tbox-ah-autoscale-action-card .tbox-bento-cta-card__text {
  max-width: var(--prose-measure-wide);
}

.tbox-ah-autoscale-section--matrix .tbox-scenario-table-wrap {
  max-width: 100%;
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: none;
}

.tbox-ah-autoscale-section--matrix .tbox-scenario-table th {
  color: var(--text-secondary);
  letter-spacing: 0;
}

.tbox-ah-autoscale-section--matrix .tbox-scenario-table__category td {
  color: var(--brand-primary-text);
  letter-spacing: 0;
}

.tbox-ah-autoscale-section--matrix .tbox-scale-badge,
.tbox-ah-autoscale-section--matrix .tbox-idle-badge {
  gap: var(--space-xs);
}

.tbox-ah-autoscale-section--matrix .tbox-scenario-table :where(th, td) {
  letter-spacing: 0;
}

:root[data-theme="dark"] .tbox-ah-autoscale-cap,
:root[data-theme="dark"] .tbox-ah-autoscale-proof,
:root[data-theme="dark"] .tbox-ah-autoscale-action-card,
:root[data-theme="dark"] .tbox-ah-autoscale-section--matrix .tbox-scenario-table-wrap {
  border-color: var(--border-mid);
  background: var(--surface-base);
}

:root[data-theme="dark"] .tbox-ah-autoscale-section--mechanism .tbox-detail-grid {
  background: var(--border-mid);
}

:root[data-theme="dark"] .tbox-ah-autoscale-section--mechanism .tbox-stats-row {
  background: var(--border-mid);
}

:root[data-theme="dark"] #content .tbox-ah-autoscale-section--mechanism .tbox-stat-cell__number,
:root[data-theme="dark"] .tbox-ah-autoscale-section--matrix .tbox-scenario-table__category td {
  color: var(--brand-primary-light);
}

@media (width <= 980px) {
  .tbox-hero-v3--autoscale .tbox-hero-v3__inner,
.tbox-ah-autoscale-section__header {
    grid-template-columns: 1fr;
  }

  .tbox-hero-v3--autoscale .tbox-hero-v3__inner {
    text-align: center;
  }

  .tbox-hero-v3--autoscale .tbox-hero-v3__copy {
    justify-items: center;
  }

  .tbox-hero-v3--autoscale .tbox-hero-v3__title,
.tbox-hero-v3--autoscale .tbox-hero-v3__subtitle {
    margin-inline: auto;
  }

  .tbox-ah-autoscale-section--mechanism .tbox-stats-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tbox-ah-autoscale-section--mechanism .tbox-detail-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

@media (width <= 640px) {
  .tbox-hero-v3--autoscale .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-hero-v3--autoscale .tbox-hero-v3__panel {
    padding: var(--space-md);
  }

  .tbox-ah-autoscale-section--mechanism .tbox-stat-cell {
    padding: var(--space-lg);
  }

  #content .tbox-ah-autoscale-section--mechanism .tbox-stat-cell__number {
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  .tbox-ah-autoscale-section--mechanism .tbox-stat-cell__desc {
    font-size: var(--fs-base);
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table {
    display: block;
    width: 100%;
    min-width: 0;
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table thead {
    display: none;
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table tbody,
  .tbox-ah-autoscale-section--matrix .tbox-scenario-table tr,
  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td {
    display: block;
    width: 100%;
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table tbody {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-sm);
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table tr {
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm-plus);
    background: var(--surface-base);
    overflow: hidden;
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table__category {
    border: 0;
    background: transparent;
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table__category td {
    padding: var(--space-xs) 0 0;
    border: 0;
    background: transparent;
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td {
    display: grid;
    grid-template-columns: minmax(5.8rem, 0.42fr) minmax(0, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-bottom: 1px solid var(--border-light);
    white-space: normal;
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td:last-child {
    border-bottom: 0;
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td::before {
    color: var(--text-tertiary);
    content: "";
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
  }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td:nth-child(1)::before { content: "Workload"; }
  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td:nth-child(2)::before { content: "Scale mode"; }
  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td:nth-child(3)::before { content: "Trigger"; }
  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td:nth-child(4)::before { content: "Result"; }
  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td:nth-child(5)::before { content: "Idle compute"; }
  .tbox-ah-autoscale-section--matrix .tbox-scenario-table td:nth-child(6)::before { content: "Next"; }

  .tbox-ah-autoscale-section--matrix .tbox-scenario-table__category td::before {
    content: none;
  }

  .tbox-ah-autoscale-section--mechanism .tbox-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* HTML5 display-role reset for older browsers */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
	display: block;
}

ol,
ul {
	list-style: none;
}

blockquote,
q {
	quotes: none;
}

blockquote::before,
blockquote::after,
q::before,
q::after {
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

/* DEFAULTS */
@font-face {
  font-family: "Varela Round";
  src: url("../fonts/VarelaRound-Regular.woff2") format("woff2"),
       url("../fonts/VarelaRound-Regular.ttf") format("truetype");
  font-weight: normal; /* @font-face descriptors do not support var() */
  font-style: normal;
  font-display: swap;
}

/* Rubik — self-hosted variable font (latin-ext + latin; binary supports wght axis 300–900, declared 400–800 to cover --fw-extrabold) */
@font-face {
  font-family: Rubik;
  src: url("../fonts/Rubik-Regular-latinext.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: Rubik;
  src: url("../fonts/Rubik-Regular.woff2") format("woff2");
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* JetBrains Mono — self-hosted variable font (latin-ext + latin; weight range 400–600) */
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular-latinext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("../fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

*:not(.material-symbols-outlined) {
  font-family: var(--tbox-font-body, system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif);
}

body {
  line-height: var(--lh-relaxed);
  width: 100%;
  margin: 0;
  background-color: var(--surface-base);
  color: var(--text-primary);
}

/* j-calculator.min.css (vendor) sets `body { font-weight: lighter }`, which
   computes to 100. Rubik's 400-800 variable range clamps it to 400 today, but
   any future face with a lighter weight would thin body copy site-wide. Pin
   the intended weight with higher specificity so the vendor rule cannot win. */
html body { font-weight: 400; }
section#content { max-width: 100vw; }

:where(#content) p {
  line-height: var(--lh-relaxed);
}
:where(p+p) { margin-top: var(--space-lg);}
:where(p:empty) { display: none; }

/* HEADER SECTION */

/* Prevent third-party widgets (chat/recaptcha) from creating horizontal scroll */
html,
body { overflow-x: clip; }

@supports not (overflow-x: clip) {
  html,
body { overflow-x: hidden; }
}

/* Hide the floating LiveChat launcher while minimized (all viewports). Chat
   stays reachable via the header chat button, which maximizes the widget. */
:root[data-tbox-livechat-visibility="minimized"] #chat-widget-container {
  display: none !important;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  padding: var(--space-sm-mid) 0.9rem;
  background: var(--surface-base);
  color: var(--text-primary);
  border: 2px solid var(--brand-primary);
  border-radius: var(--radius-sm-plus);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--ease-fast);
  z-index: calc(var(--z-header-dropdown) + 1);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

#header {
  display: block;
  width: 100%;
  height: var(--header-current-height, var(--header-height));

  --header-current-height: var(--header-height);

  margin: 0;
  padding: 0;
  background-color: var(--surface-base);
  position: relative;
  z-index: var(--z-header);
  overflow-anchor: none;
}

.tbox-standard-features-grid > * {
  grid-column: span 4;
  position: relative;
  overflow: hidden;
}

.tbox-standard-features-grid > .tbox-card--bento-hero > * {
  position: relative;
  z-index: 1;
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-ah-bento-hero-card > * {
  position: relative;
  z-index: 1;
}

#header > * {
  align-self: center;
}

#header .tbox-header__drawer-scrim {
  position: fixed;
  inset: calc(var(--wp-admin-bar-h, 0px) + var(--header-current-height, var(--header-main-height, 64px))) 0 0;
  background: rgb(15 23 42 / 52%);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--ease-base), visibility var(--ease-base);
  z-index: calc(var(--z-header-dropdown) - 1);
}

#header.tbox-header--drawer-open .tbox-header__drawer-scrim {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

#main-navigation,
#mobile-menu,
#header .tbox-header-chat-btn,
#header .tbox-header__phone-link {
  align-self: stretch;
}

/* header phone number row */
#header .tbox-header__phone-link {
  display: inline-flex;
  align-items: center;
  justify-content: end;
  gap: var(--space-xs-plus);
  padding: 0;
  min-height: var(--min-touch-target);
  height: 100%;
  box-sizing: border-box;
  text-align: right;
  color: var(--text-primary);
  font-family: var(--tbox-font-body);
  text-decoration: none;
  cursor: pointer;
}

#header .tbox-header-chat-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  padding: 0;
  min-height: var(--min-touch-target);
  height: 100%;
  box-sizing: border-box;
  color: var(--text-primary);
  font-family: var(--tbox-font-body);
  text-decoration: none;
  cursor: pointer;
  background: transparent;
  border: none;
  font-size: var(--fs-lg);
}

:where(#header .tbox-header-chat-btn:hover) {
  color: var(--brand-primary);
}

:where(#header .tbox-header__phone-link:hover) {
  color: var(--brand-primary);
}

:where(#header .tbox-header-chat-btn:focus),
:where(#header .tbox-header-chat-btn:focus-visible),
:where(#header .tbox-header__phone-link:focus),
:where(#header .tbox-header__phone-link:focus-visible) {
  outline: none;
}

#header .tbox-header__action-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-sm-plus);
  line-height: 1;
  box-sizing: border-box;
}

@media only screen and (width <= 1200px) {
  #header .tbox-header__action-chip { padding: var(--space-sm-minus) var(--space-md-minus); }
}

@media only screen and (width <= 900px) {
  #header .tbox-header__action-chip { padding: var(--space-xs-plus) var(--space-sm-plus); }
}

#header .tbox-header-chat-btn .tbox-header__action-chip {
  background: var(--brand-primary-bg);
  border: 1px solid var(--focus-ring-strong);
}

#header .tbox-header__phone-link .tbox-header__action-chip {
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
}

#header .tbox-header-chat-btn:hover .tbox-header__action-chip {
  background: var(--surface-accent-bg-strong);
}

#header .tbox-header__phone-link:hover .tbox-header__action-chip {
  background: var(--brand-primary-bg);
}

#header .tbox-header-chat-btn:focus-visible .tbox-header__action-chip,
#header .tbox-header__phone-link:focus-visible .tbox-header__action-chip {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

/* Responsive header: collapse chat/phone text first (icons only) */
:where(#header.tbox-header--actions-compact > .tbox-header-chat-btn),
#header.tbox-header--actions-compact > .tbox-header__phone-link {
  padding: 0;
}

#header.tbox-header--actions-compact > .tbox-header-chat-btn .chat-text,
#header.tbox-header--actions-compact > .tbox-header__phone-link .phone-text {
  display: none;
}

#header.tbox-header--actions-compact > .tbox-header-chat-btn .chat-icon,
#header.tbox-header--actions-compact > .tbox-header__phone-link .phone-icon {
  font-size: var(--fs-xl);
  line-height: 1;
}

/* Sticky Header on Scroll */
#header.scrolled {
  position: fixed;
  top: var(--wp-admin-bar-h, 0);
  left: 0;
  right: 0;
  z-index: var(--z-header);
  height: var(--header-height-scrolled);

  --header-current-height: var(--header-height-scrolled);

  box-shadow: 0 2px 10px var(--overlay-10);
  background: var(--surface-base);
}

/* Slide-down animation gated by JS to prevent re-firing near threshold.
   Kept short so the transform completes before any re-fix flicker is
   perceptible. */
#header.scrolled--animate {
  animation: slideDown var(--duration-fast) ease-out;
  /* Hint the compositor before the transform animation runs so the slide-in
     paints cleanly. */
  will-change: transform;
}

@keyframes slideDown {
  from { transform: translateY(-100%); }
  to { transform: translateY(0); }
}

/* Motion Respect Rule: users who ask for reduced motion get the compact header
   applied instantly, with no slide-in. */
@media (prefers-reduced-motion: reduce) {
  #header.scrolled--animate {
    animation: none;
  }
}

/* When the mobile drawer is open, skip the compaction slide. The slide's
   transform (and the will-change hint) make #header the containing block for
   its position:fixed descendants — the drawer panel and scrim — which would
   collapse them to the compact header box for the animation's duration. Snap
   straight to the compact header instead; there is no slide to miss while the
   user is looking at the open drawer. */
#header.tbox-header--drawer-open.scrolled--animate {
  animation: none;
  will-change: auto;
}

/* Spacer when header is fixed */
body.header-fixed {
  padding-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-fixed-offset, var(--header-height)));
}

/* Prevent scroll anchoring from fighting the fixed/relative header transition */
html { overflow-anchor: none; }

/* WordPress admin-bar offset — scoped so logged-out visitors are unaffected */
body.admin-bar {
  --wp-admin-bar-h: 32px;
}

@media (width <= 782px) {
  body.admin-bar {
    --wp-admin-bar-h: 46px;
  }
}

:where(#header:nth-child(2)) {
  grid-column: 1 / 2;
  grid-row: 2 / 3;
}

:where(#header:nth-child(3)) {
  grid-column: 2 / 3;
  grid-row: 2 / 3;
}

/* header menu */
#header ul.menu {
  display: flex;
  place-self: center end;
  justify-content: flex-end;
  align-items: center;
	z-index: 99;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 2rem;
  height: 100%;
  padding: 0;
  margin: 0;
  position: relative;
  line-height: 1;
}

:where(.tos li) {
	line-height: 2rem;
}

.tbox-muted {
  color: var(--text-muted);
}

.tbox-offer-list li {
  position: relative;
  padding-left: 1.4rem;
  color: var(--text-secondary);
  line-height: var(--lh-normal);
  min-width: 0;
}

.tbox-offer-list--on-dark li {
  color: var(--gray-200);
}

:where(.tbox-policy-section li + li) {
  margin-top: var(--space-2xs);
}

:where(.tos ul li ul li),
:where(.tos ul li ol li),
:where(.tos ol li ul li),
:where(.tos ol li ol li) {
	margin-left: var(--space-2xl);
}

:where(.tbox-wp-cluster .tbox-topology-body li),
:where(.tbox-wp-devops .tbox-topology-body li) {
	list-style: disc;
	margin-left: var(--space-lg-plus);
}

.tbox-related-links--auto .tbox-related-links__list li {
  margin: 0;
}

.tbox-premium-wp .tbox-topology ul li,
.tbox-standalone-wp .tbox-topology ul li,
.tbox-premium-wp .topology ul li,
.tbox-standalone-wp .topology ul li {
	list-style: disc;
	margin-bottom: var(--space-2xs);
	line-height: var(--lh-loose);
}

.tbox-standard-features-grid--bento-cloud [data-bento-slot="infra"] .feature-list li {
  font-size: var(--fs-base);
  color: var(--text-muted);
  padding-left: var(--space-lg);
  position: relative;
}

.tbox-hvps-comparison-section .tbox-card--highlight .tbox-card__text ul li {
  margin-bottom: var(--space-xs);
}

:where(#content) div {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

/* Dead .tbox-home-grid rules removed */

:where(.tbox-runtime-layout .tbox-topology-media > div) {
	display: grid;
	grid-template-rows: repeat(3, auto) 1fr;
	row-gap: var(--space-2xl);
}

:where(section.branding > h2:first-child + div) {
	margin-bottom: 4rem;
}

: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(section) > h2,
:where(section) > :where(.tbox-container > h2),
:where(.tbox-topology-title h2) {
  color: var(--text-primary);
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
}

:where(.tbox-faq-section > h2) {
  text-align: center;
  margin-bottom: var(--space-xl);
}

:where(.tbox-content-card h2),
:where(.tbox-card--content h2) {
  font-size: var(--fs-heading-md);
  line-height: var(--lh-tight);
}

:where(:is(.tbox-features-section, .tbox-standard-features-section) h2) {
  color: var(--text-secondary);
}

.tbox-contact-us :where(.tbox-content-card h2),
.tbox-contact-us :where(.tbox-card--content h2) {
  font-size: clamp(1.45rem, 2.1vw, 2rem);
  margin-bottom: var(--space-sm-mid);
}

:where(.tbox-case-studies .tbox-content-card h2),
:where(.tbox-case-studies .tbox-card--content h2) {
  font-size: var(--fs-heading-md);
  line-height: var(--lh-snug);
}

/* Case-study hero subtitle renders on the dark hero band; pin an
   on-dark token so it clears the WCAG AA contrast floor. */
#hero-section.tbox-case-studies .tbox-section__desc {
  color: var(--text-on-dark-soft);
}

.tbox-cta-section.tbox-cta-section--blueprint h2 {
  margin: 0 0 var(--space-lg);
  padding: 0 0 1rem;
  font-size: var(--fs-display);
  font-weight: var(--fw-bold);
  font-family: inherit;
  color: var(--text-inverse);
}

/* Compact-hero routes cap the page h1 at 2.375rem; keep the closing CTA h2
   below that so it never outranks the page title. */
#content:has(.tbox-hero-v3--compact) .tbox-cta-section.tbox-cta-section--blueprint h2 {
  font-size: clamp(1.75rem, 2.6vw, 2.125rem);
}

: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);
}

:where(.tbox-datacenters:is(.tbox-features-section, .tbox-standard-features-section) > .tbox-container > h2) {
	grid-column: 1 / -1;
	grid-row: 1 / 2;
}

:where(.tbox-trust-head h2) {
  margin: 0;
  padding: 0;
  color: var(--text-primary);
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-cta-band h2 {
  margin: 0;
  padding: 0;
}

:where(.tbox-home-section p) {
  max-width: var(--prose-measure-default);
  margin-top: 1em;
}

.tbox-card--decision > ul,
.tbox-card--decision > ol,
:where(.tbox-card--decision > p) {
  padding: var(--space-md) var(--space-xl);
  margin: 0;
}

:where(.tbox-trust-head p) {
  margin: 0;
  color: var(--text-secondary);
}

/* :where(.tbox-trust-header p) removed — subheading eliminated */

:where(.tbox-cta-band p) {
  margin: var(--space-xs-plus) 0 0;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

:where(.tbox-card--decision p) {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

:where(.tbox-faq-item p) {
  padding: 0 0 1rem;
  margin: 0;
  font-size: var(--fs-md);
  color: var(--text-secondary);
  line-height: var(--lh-loose);
}

:where(.tbox-search-page__header p),
.tbox-blog-page__header p {
  margin-top: var(--space-xs-plus);
  color: var(--text-secondary);
}

.tbox-ah-databases-layout__main p {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin: 0;
}

.tbox-ahcalc-help-prompt p {
  margin: 0 0 var(--space-xs);
  font-weight: var(--fw-bold);
  color: var(--surface-glass-90);
  font-size: var(--fs-base);
}

.tbox-ahcalc-howitworks-item p {
  font-size: var(--fs-md);
  color: var(--ahcalc-slate-600);
  line-height: var(--lh-loose);
  margin: 0;
}

.tbox-ahcalc-faq-item p {
  padding: 0 1.25rem 1.25rem;
  margin: 0;
  font-size: var(--fs-md);
  color: var(--ahcalc-slate-600);
  line-height: var(--lh-loose);
}

.tbox-ahcalc-faq__item-answer p { margin: 0; }

:where(section.litespeed p) {
  max-width: var(--prose-measure-default);
}

.tos > ul,
.tos > ol {
	padding-left: var(--space-lg);
}

.tbox-info-block ul { margin: 0; padding-left: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-sm); }

.tbox-policy-section ul {
  margin-left: var(--space-lg-plus);
}

.tos ol {
	list-style: decimal;
}

:where(.tbox-standard-features-grid--content-cards > :is(div, article) p),
.tbox-standard-features-grid--content-cards > :is(div, article) ul,
.tbox-standard-features-grid--content-cards > :is(div, article) ol {
  grid-column: 1 / -1;
  grid-row: auto;
}

:where(.tbox-standard-features-grid--decision > :is(div, article) p) {
  grid-column: 1 / -1;
  grid-row: auto;
}

:where(.tbox-standard-features-grid > :is(div, article) > p + p) {
  margin-top: 0.5em;
}

:where(.tbox-standard-features-grid > :is(div, article) > p ~ p) {
  grid-row: auto;
  grid-column: 1 / -1;
}

:where(.tbox-home-section p:first-child) {
  margin-top: 0;
}


:where(.tbox-java h3) {
	font-size: 1.875rem; /* between --fs-heading-md and --fs-heading-lg */
}

:where(.tbox-info-block h3) { font-size: var(--fs-heading-sm); font-weight: var(--fw-semibold); color: var(--text-primary); margin: 0; }

:where(.tbox-how-it-works .tbox-topology-body p) {
	margin-bottom: var(--space-lg);
}

:where(.tbox-premium-wp .tbox-topology p),
:where(.tbox-standalone-wp .tbox-topology p),
:where(.tbox-premium-wp .topology p),
:where(.tbox-standalone-wp .topology p) {
	margin-bottom: var(--space-sm);
	line-height: var(--lh-loose);
}

:where(.tbox-card--decision > h3),
:where(.tbox-card--decision > h4) {
  padding: var(--space-lg) var(--space-xl) 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0;
}

:where(.tbox-ahcalc-card h3) {
  margin: 0 0 var(--space-sm-mid);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  color: var(--ahcalc-slate-900);
}

:where(.tbox-ahcalc-social-section h3) {
  font-size: var(--fs-heading-md);
  font-weight: var(--fw-bold);
  color: var(--text-inverse);
  margin: 0 0 2rem;
}

:where(.tbox-case-studies .tbox-content-card h3),
:where(.tbox-case-studies .tbox-card--content h3) {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-snug);
}

:where(.tbox-standard-features-grid > .tbox-card--full-width p) {
  grid-column: 2;
  grid-row: 2;
}

.tbox-card__link {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  text-decoration: none;
  display: inline-block;
  min-height: 2rem;
}

.tbox-card__link:hover {
  text-decoration: underline;
}

/* Title-only modifier for compact bento features */
.tbox-card--title-only {
  padding: var(--space-lg) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  min-height: 140px; /* Force minimum height to match grid-auto-rows */
}

.tbox-card--title-only p,
.tbox-card--title-only .tbox-card__link {
  display: none !important;
}

.tbox-card--title-only .tbox-card__icon {
  margin-bottom: var(--space-xs) !important;
  margin-top: 0 !important;
}

.tbox-card--title-only h4 {
  margin: 0 !important;
  font-size: var(--fs-base) !important;
  line-height: var(--lh-snug) !important;
}

.tbox-standard-features-grid--accent-top .tbox-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-primary-text);
  text-decoration: none;
  margin-top: var(--space-sm);
}

.tbox-card--decision .tbox-card__link {
  display: inline-block;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
  text-decoration: none;
}

.tbox-ah-databases-layout__main .tbox-card__link {
  grid-column: 1 / -1;
  grid-row: 3;
}

.tbox-standard-features-grid > :is(div, article) .tbox-card__link {
  grid-column: 1 / -1;
  grid-row: 3;
  margin-top: 0;
  place-self: start start;
}

a.tbox-card--interactive .tbox-card__link {
  margin-top: auto;
  margin-bottom: 0;
  font-weight: var(--fw-bold);
  color: var(--brand-primary-text);
}

.tbox-standard-features-grid--accent-top .tbox-card__link:hover {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tbox-mini-note {
  margin-top: 0.9rem;
  font-size: var(--fs-base);
  color: var(--text-muted);
  max-width: var(--prose-measure-wide);
}

/* Inline code block — used for Terraform/API examples in content cards */
.tbox-code-block {
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  overflow-x: auto;
  white-space: pre;
  margin: var(--space-md) 0 0;
  color: var(--text-primary);
  max-width: 100%;
}
:root[data-theme="dark"] .tbox-code-block {
  background: var(--surface-raised, #1e293b);
  border-color: var(--border-mid);
}

/* Optional wrapper + bar — gives static code blocks the same filename rhythm
   as .tbox-hero-terminal. Wrapper owns the frame; child <pre> drops its own
   border/radius/margin so the bar+pre read as one surface. */
.tbox-code-block-wrap {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  margin: var(--space-md) 0 0;
  max-width: 100%;
}
.tbox-code-block-wrap > .tbox-code-block {
  border: 0;
  border-radius: 0;
  margin: 0;
  max-width: none;
}
.tbox-code-block__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: color-mix(in srgb, var(--surface-base) 96%, var(--brand-primary));
  border-bottom: 1px solid var(--border-light);
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
}
.tbox-code-block__bar .material-symbols-outlined { font-size: var(--fs-sm); }
:root[data-theme="dark"] .tbox-code-block-wrap {
  border-color: var(--border-mid);
}
:root[data-theme="dark"] .tbox-code-block__bar {
  background: color-mix(in srgb, var(--surface-raised, #1e293b) 92%, var(--brand-primary));
  border-bottom-color: var(--border-mid);
  color: var(--text-secondary);
}

/* Inline spans inside .tbox-code-block — preserve prompt + comment styling
   without per-page CSS. */
.tbox-code-block__prompt { color: var(--brand-primary); }
.tbox-code-block__muted { color: var(--text-muted); font-style: italic; }

/* Shared syntax-token coloring — used by .tbox-code-block--api/--security/--manifest
   and any future modifier. Token colors come from --code-syntax-* tokens, which
   adapt to light/dark theme. Dark-surface modifiers force the dark-token values
   regardless of theme. */
.tbox-code-block .tk { color: var(--code-syntax-key); }
.tbox-code-block .ts { color: var(--code-syntax-string); }
.tbox-code-block .tn { color: var(--code-syntax-number); }
.tbox-code-block .tc { color: var(--code-syntax-comment); font-style: italic; }
.tbox-code-block--security,
.tbox-code-block--manifest {
  --code-syntax-key: var(--code-syntax-key-dark);
  --code-syntax-string: var(--code-syntax-string-dark);
  --code-syntax-number: var(--code-syntax-number-dark);
  --code-syntax-comment: var(--code-syntax-comment-dark);
}

:where(.tbox-mini-note a) {
  color: var(--brand-primary);
}

:where(.tbox-mini-note a:hover) {
  color: var(--brand-primary-text);
  text-decoration: underline;
}

.tbox-segmented-panel,
.tbox-ah-features-section .tbox-pillar-row--asym,
.tbox-ah-fit-section .tbox-usecase-grid {
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--border-light);
}

.tbox-segmented-panel--grid {
  display: grid;
}

.tbox-card--decision .tbox-card__link:hover {
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-ah-bento-hero-card .tbox-card__link {
  color: var(--brand-highlight);
}

:where(.tbox-cta-section.tbox-cta-section--blueprint p) {
  color: var(--text-on-dark);
}

:where(.tbox-card--decision > ul:last-child),
:where(.tbox-card--decision > ol:last-child),
:where(.tbox-card--decision > p:last-child) {
  padding-bottom: var(--space-xl);
}

/* Blog-template excerpts render without a <p> wrapper (wpautop removed on
   pages), so only search results need this. */
:where(.tbox-search-result .entry-content p) {
  margin: 0;
  color: var(--text-secondary);
}

/* CTA card p — consolidated into shared .tbox-bento-cta-card rules */

:where(.tbox-ahcalc-howitworks-section .tbox-ahcalc-howitworks-item p),
:where(.tbox-ahcalc-howitworks-section .tbox-ahcalc-faq-item p) {
  color: var(--ahcalc-slate-600);
  line-height: var(--lh-loose);
}

:where(.tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt p) {
  color: var(--text-primary);
  font-size: var(--fs-base);
}

/* Topology grid → prose paragraph spacing */
.tbox-topology-grid + p:not([class]) {
  margin-top: var(--space-lg);
}

.tbox-standard-features-grid > .tbox-card--full-width .tbox-card__link {
  grid-column: 3;
  grid-row: 1 / 3;
  align-self: center;
}

.tbox-standard-features-grid--accent-top > :is(div, article):has(.tbox-card__icon) > p,
.tbox-standard-features-grid--accent-top > :is(div, article):has(.tbox-card__icon) > .tbox-card__link,
.tbox-standard-features-grid--accent-top > :is(div, article):has(.tbox-card__icon) > .tbox-mini-note {
  grid-column: 1 / -1;
  grid-row: 3;
}

.tbox-standard-features-grid > :is(div, article) .tbox-card__content > p + p {
  margin-top: 0.5em;
}

.tbox-standard-features-grid > :is(div, article) .tbox-card__content > p ~ p {
  grid-row: auto;
  grid-column: 1 / -1;
}

:where(.tbox-trust-module--compact .tbox-trust-head h3) {
  margin: 0;
  padding: 0;
  color: var(--text-primary);
}

.tbox-cta-section.tbox-cta-section--blueprint > .tbox-cta-section__inner > p {
  max-width: var(--prose-measure-wide);
  margin: 0 auto 2rem;
  font-size: var(--fs-xl);
  line-height: var(--lh-loose);
}

.tbox-ahcalc-final-cta-section > .tbox-ahcalc-final-cta-inner > p:not(.tbox-ahcalc-final-cta-microcopy) {
  font-size: var(--fs-xl);
  margin: 0 0 2rem;
  color: var(--surface-glass-70);
  line-height: var(--lh-relaxed);
}

:where(.tbox-support-features-title h4) {
  padding-bottom: 0;
}

:where(.tbox-standard-features h4) {
  color: var(--brand-primary);
}

:where(.tbox-ahcalc-howitworks-item :is(h3, h4)) {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ahcalc-slate-900);
  margin: 0 0 var(--space-md);
}

/* CTA card h4 — consolidated into shared .tbox-bento-cta-card rules */

.tbox-ahcalc-comparison-subtitle,
.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;
}

.tbox-ahcalc-comparison-section .tbox-ahcalc-comparison-subtitle {
  color: var(--ahcalc-slate-600);
  line-height: var(--lh-relaxed);
}

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

:root[data-theme="dark"] .tbox-ahcalc-howitworks-item p {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt p { color: rgb(255 255 255 / 90%); }

: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);
}

:where(#hero-section),
:where(#hero-section *) {
  color: var(--text-on-dark);
}

/* 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);
}

/* Dead perf-guard selectors removed — section redesigned to use tbox-pga-* classes */

/* stylelint-disable-next-line no-descending-specificity */
:where(:root[data-theme="dark"]) .tbox-ahcalc-comparison-section h2,
/* stylelint-disable-next-line no-descending-specificity */
:where(:root[data-theme="dark"]) .tbox-comparison-section h2 {
  color: var(--text-primary);
}


:root[data-theme="dark"] .tbox-ahcalc-howitworks-item :is(h3, h4) {
  color: var(--text-primary);
}

:where(.tbox-promo-bar__item strong) {
  font-weight: var(--fw-bold);
}

:where(.tbox-wp-balancer strong) {
	font-weight: var(--fw-normal);
}

.tbox-hero-v3__subtitle strong {
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
}

:where(.tbox-ahcalc-cloudlet-info__body strong) {
  color: var(--text-secondary);
}

:where(.tbox-product-card .tbox-card__subtitle strong) {
  color: var(--text-secondary);
}
.tbox-ahcalc-help-prompt span {
  display: block;
  font-size: var(--fs-base);
  color: var(--surface-glass-60);
  margin-bottom: var(--space-md);
}

.tbox-card--bento-hero .tbox-ha-caption span {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
}

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

.tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt span {
  color: var(--text-muted);
  font-size: var(--fs-base);
}

.tbox-hvps-stepper__step.is-complete .tbox-hvps-stepper__circle span {
  display: none;
}

.tbox-premium-wp .tbox-topology p > span:first-child,
.tbox-standalone-wp .tbox-topology p > span:first-child,
.tbox-premium-wp .topology p > span:first-child,
.tbox-standalone-wp .topology p > span:first-child {
	font-weight: var(--fw-semibold);
	color: var(--text-primary);
}

.tbox-ahcalc-dblb input[type='checkbox']:disabled + span {
  opacity: 0.6;
}

.tbox-standard-features-grid > .tbox-card--bento-hero.tbox-card--highlight .tbox-ha-caption span {
  justify-content: center;
}

:root[data-theme="dark"] .tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt span { color: rgb(255 255 255 / 60%); }

/* stylelint-disable-next-line no-descending-specificity */
.tbox-ahcalc-comparison-section h2,
/* 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;
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-ahcalc-final-cta-section h2 {
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-extrabold);
  color: var(--text-inverse);
  margin: 0 0 var(--space-md);
}


#header .tbox-utility-menu > li {
  display: flex;
  align-items: center;
}

#header .tbox-utility-menu li {
  position: relative;
}

#content .tbox-case-study-list li {
  margin-top: var(--space-sm);
  line-height: var(--lh-loose);
}

#header ul.menu,
#header ul.menu li {
  list-style: none;
}

#header ul.sub-menu li {
  min-width: 20ch;
  position: relative;
  padding: 0;
}

a,
a:visited,
a:active,
a:hover {
  text-decoration: none;
}

.entry-footer a {
	font-weight: var(--fw-bold);
	color: var(--brand-primary-text);
}

.pagination a {
  padding: var(--space-sm-plus) var(--space-lg-plus);
  margin: 0 5px;
  border: 1px solid var(--border-mid);
  text-decoration: none;
  color: var(--text-secondary);
}

.recaptcha-attribution a {
    color: var(--text-on-dark);
    text-decoration: underline;
    text-underline-offset: var(--underline-offset);
}

.tbox-promo-bar__item a {
  color: var(--text-inverse);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.tbox-decision-help a {
  color: var(--brand-primary-text);
  text-decoration: none;
  font-weight: var(--fw-medium);
  border-bottom: 1px solid rgb(4 115 169 / 25%);
  transition: border-color var(--ease-fast), color var(--ease-fast);
}


.tbox-faq-item a {
  color: var(--brand-primary);
}

.tbox-ah-hero-pricing-anchor__detail a {
  color: var(--text-on-dark);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

.tbox-callout__text a {
  color: var(--brand-primary-deep);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

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

/* Content link fallback
   Catch-all for prose links not covered by component rules.
   Entire selector in :where() keeps specificity at zero. */
:where(#content :is(p, li, dd, .tbox-section__desc, .tbox-card__text, .tbox-mini-note, .tbox-value-card__desc) a:not(.tbox-btn):not(.tbox-btn-outline):not(.tbox-card__link)) {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

:where(#content :is(p, li, dd, .tbox-section__desc, .tbox-card__text, .tbox-mini-note, .tbox-value-card__desc) a:not(.tbox-btn):not(.tbox-btn-outline):not(.tbox-card__link):hover) {
  color: var(--brand-primary-text);
}

:where(#content :is(p, li, dd, .tbox-section__desc, .tbox-card__text, .tbox-mini-note, .tbox-value-card__desc) a:not(.tbox-btn):not(.tbox-btn-outline):not(.tbox-card__link):visited) {
  color: var(--brand-primary);
}

.tbox-ahcalc-section-nav__link {
  display: inline-flex;
  align-items: center;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--ahcalc-slate-600);
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--ease-fast);
  border-radius: var(--radius-md);
}
.tbox-ahcalc-faq__item-answer a { color: var(--brand-primary-text); }

.entry-footer a:visited {
	color: var(--text-primary);
}

.entry-footer a:hover {
	color: var(--brand-primary-text);
	text-decoration: underline;
}

.pagination a:hover,
.pagination a.active {
  background: var(--blue-6);
  color: var(--text-inverse);
  border-color: var(--blue-6);
}

.recaptcha-attribution a:hover {
    color: var(--text-inverse);
}

.tbox-promo-bar__item a:hover {
  text-decoration-thickness: var(--underline-thickness);
}

.tbox-decision-help a:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.tbox-decision-help a:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-xs);
}

.tbox-ah-hero-pricing-anchor__detail a:hover {
  color: var(--text-inverse);
}

.tbox-callout__text a:hover {
  color: var(--brand-primary-text);
}

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

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

.tbox-ahcalc-section-nav__link:hover {
  color: var(--brand-primary);
  background: var(--brand-primary-16);
}

.tbox-ahcalc-section-nav__link:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

:root[data-theme="dark"] .tbox-products-compare a {
  color: var(--brand-primary);
  background: var(--brand-primary-08);
  border-color: var(--brand-primary-16);
}

:root[data-theme="dark"] .tbox-products-compare a:hover {
  background: var(--brand-primary-14);
  border-color: var(--brand-primary-25);
}

#content .tbox-breadcrumbs a {
  color: var(--brand-primary);
  text-decoration: none;
}

#content .tbox-error-card__links a {
  color: var(--brand-primary);
  text-decoration: underline;
}

#content .tbox-products-compare a {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  background: var(--brand-primary-04);
  border: 1px solid var(--brand-primary-12);
  border-radius: var(--radius-md);
  transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}

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

#header ul.menu a {
  font-size: var(--fs-lg);
  text-decoration: none;
  color: inherit;
  font-family: var(--ff-display);
}

.tbox-compare-mode-toggle button {
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-secondary);
  padding: var(--space-sm-minus) var(--space-md-minus);
  font: inherit;
  font-weight: var(--fw-semibold);
  cursor: pointer;
}

:where(.tbox-compare-mode-toggle button:hover) {
  border-color: var(--border-mid);
}

:where(.tbox-compare-mode-toggle button:focus-visible) {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

.tbox-compare-mode-toggle button.is-active {
  border-color: var(--brand-primary);
  color: var(--brand-primary-text);
  background: var(--brand-primary-bg);
}

:root[data-theme="dark"] :where(.tbox-compare-mode-toggle button) {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

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

:root[data-theme="dark"] .tbox-compare-mode-toggle button.is-active {
  background: var(--brand-primary-bg);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.tbox-ahcalc-toggle button {
  appearance: none;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: var(--space-2xs) var(--space-md);
  min-height: var(--min-touch-target);
  border-radius: var(--radius-xs);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ahcalc-slate-600);
  transition: all var(--ease-fast);
}

.tbox-ahcalc-tab-buttons button {
  flex: 1;
  padding: var(--space-lg) var(--space-xl);
  background: transparent;
  border: none;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--ahcalc-slate-600);
  cursor: pointer;
  border-bottom: 3px solid transparent;
  transition: all var(--ease-fast);
}

:where(.tbox-ahcalc-toggle button:hover) {
  background: var(--overlay-12);
}

:where(.tbox-ahcalc-toggle button:focus-visible) {
  outline: var(--focus-outline-width) solid var(--ahcalc-accent-500);
  outline-offset: 1px;
}

:where(.tbox-ahcalc-tab-buttons button:hover) {
  color: var(--ahcalc-slate-900);
}

:where(.tbox-ahcalc-tab-buttons button:focus-visible) {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

:where(:root[data-theme="dark"] .tbox-ahcalc-tab-buttons button) {
  color: var(--text-secondary);
}

:where(:root[data-theme="dark"] .tbox-ahcalc-tab-buttons button:hover) {
  color: var(--text-primary);
}

:where(#header ul.menu button) {
  font-size: var(--fs-lg);
  text-decoration: none;
  color: inherit;
  font-family: var(--ff-display);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
}

#header .tbox-utility-menu > li > a,
:where(#header .tbox-utility-menu > li > button:not(.tbox-nav__submenu-toggle)) {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs-plus) var(--space-sm-plus);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--surface-glass-75);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1;
  transition: background var(--ease-fast), color var(--ease-fast);
}

#header ul.menu :where(li > a),
#header ul.menu :where(li > button:not(.tbox-nav__submenu-toggle)) {
  display: inline-flex;
  align-items: center;
  height: 100%;
  min-height: var(--min-touch-target);
  padding-left: var(--space-lg);
  padding-right: var(--space-lg);
  line-height: 1;
  white-space: nowrap;
}

#header ul.sub-menu li a,
#header ul.sub-menu li button:not(.tbox-nav__submenu-toggle) {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: var(--space-md) var(--space-lg);
  min-height: var(--min-touch-target);
  line-height: var(--lh-snug);
  color: var(--text-on-dark);
  white-space: nowrap;
  margin-right: 0;
  background: transparent;
  border: none;
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  cursor: pointer;
  text-align: left;
}

:where(#header ul.sub-menu > li > ul > li > a) {
  color: var(--text-on-dark-muted);
}

: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(#header .tbox-header__utility .tbox-breadcrumbs a) {
  color: var(--surface-glass-92);
  text-decoration: none;
}

:where(#content .tbox-case-study a:not(.tbox-btn)) {
  color: var(--brand-primary);
  text-decoration: underline;
  text-decoration-thickness: var(--underline-thickness);
  text-underline-offset: var(--underline-offset);
}

:where(#content .tbox-breadcrumbs a:hover) {
  text-decoration: underline;
}

:where(#content .tbox-search-result .entry-title a),
:where(#content .tbox-blog-listing .entry-title a) {
  color: var(--text-primary);
}

/* Listing titles lead the row: semibold weight carries the hierarchy and the
   underline appears on hover (site link pattern). Needs #content specificity
   to beat the global link reset. */
#content .tbox-search-result .entry-title a,
#content .tbox-blog-listing .entry-title a {
  font-weight: var(--fw-semibold);
  text-decoration: none;
}

:where(#content .tbox-related-links--auto .tbox-related-links__list a) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm-minus) 0.85rem;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--brand-primary-text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  line-height: var(--lh-tight);
}

:where(#content .tbox-products-compare a:hover) {
  color: var(--brand-primary);
  background: var(--brand-primary-08);
  border-color: var(--brand-primary-20);
}

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

:where(#header ul.menu a:focus),
:where(#header ul.menu a:focus-visible),
:where(#header ul.menu button:focus),
:where(#header ul.menu button:focus-visible) {
	    outline: var(--focus-outline-width) solid var(--brand-primary);
	    outline-offset: var(--focus-outline-offset);
	    border-radius: var(--radius-2xs);
}

:where(#header ul.menu a:focus:not(:focus-visible)),
:where(#header ul.menu button:focus:not(:focus-visible)) {
  outline: none;
}

/* stylelint-disable-next-line no-descending-specificity -- utility-menu,
not sub-menu */
#header .tbox-utility-menu > li > a:where(:hover),
:where(#header .tbox-utility-menu > li > button:not(.tbox-nav__submenu-toggle):where(:hover)) {
  color: var(--text-inverse);
  background: var(--surface-glass-10);
}

/* stylelint-disable-next-line no-descending-specificity -- utility-menu,
not sub-menu */
#header .tbox-utility-menu > li > a:where(:focus-visible),
:where(#header .tbox-utility-menu > li > button:not(.tbox-nav__submenu-toggle):where(:focus-visible)) {
  outline: var(--focus-outline-width) solid var(--focus-ring-on-dark);
  outline-offset: var(--focus-outline-offset);
}

:where(#header .tbox-utility-menu .sub-menu li a),
:where(#header .tbox-utility-menu .sub-menu li button:not(.tbox-nav__submenu-toggle)),
:where(#header .tbox-utility-menu .sub-menu > li > button.tbox-nav__submenu-toggle) {
  font-size: inherit;
}

:where(#header ul.menu > li:hover > a),
:where(#header ul.menu > li:hover > button) {
  color: var(--brand-primary);
}

:where(#header ul.menu > li.tbox-nav__item--submenu-open > a),
:where(#header ul.menu > li.tbox-nav__item--submenu-open > button:not(.tbox-nav__submenu-toggle)) {
  color: var(--brand-primary);
}

#header ul.sub-menu > li:where(:hover) > a,
:where(#header ul.sub-menu > li:hover > button) {
  color: var(--text-inverse);
}

#header ul.menu li:where(.menu-item-has-children) > a,
:where(#header ul.menu li.menu-item-has-children > button) {
	    display: inline-flex;
	    align-items: center;
	    gap: 0.45em;
}

#header ul.sub-menu > li:where(.menu-item-has-children) > a,
:where(#header ul.sub-menu > li.menu-item-has-children > button) {
	    display: flex;
	    align-items: center;
	    justify-content: space-between;
	    gap: var(--space-lg);
	    margin-right: 0;
}

#header ul.menu > li:where(.menu-item-has-children) > a {
  flex: 1 1 auto;
}

: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;
}

/* stylelint-disable no-descending-specificity -- app-hosting configurator,
not sub-menu */
:where(:root[data-theme="dark"]) :where(#tbox-app-hosting-configurator) .tbox-ahcalc-subtitle,
:where(:root[data-theme="dark"]) :where(#tbox-app-hosting-configurator) .tbox-ahcalc-inline-label,
:where(:root[data-theme="dark"]) :where(#tbox-app-hosting-configurator) .tbox-ahcalc-stack-meta,
:where(:root[data-theme="dark"]) :where(#tbox-app-hosting-configurator) .tbox-ahcalc-card-subtitle,
:where(:root[data-theme="dark"]) :where(#tbox-app-hosting-configurator) .tbox-ahcalc-hint,
:where(:root[data-theme="dark"]) :where(#tbox-app-hosting-configurator) .tbox-ahcalc-toggle button,
:where(:root[data-theme="dark"]) :where(#tbox-app-hosting-configurator) .tbox-ahcalc-step {
  color: var(--text-secondary);
}
/* stylelint-enable no-descending-specificity */

#header ul.sub-menu > li:where(.order) > a,
#header ul.sub-menu > li.order > button:not(.tbox-nav__submenu-toggle) {
  color: var(--text-primary);
}

.tbox-ahcalc-subtitle {
  color: var(--ahcalc-slate-600);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.tbox-ahcalc-inline-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--ahcalc-slate-700);
}

.tbox-ahcalc-step {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--surface-glass-75);
  border: 1px solid var(--ahcalc-slate-200);
  border-radius: var(--radius-md);
  padding: 0.55rem var(--space-md-minus);
  font-size: var(--fs-base);
  color: var(--ahcalc-slate-700);
}

.tbox-ahcalc-card-subtitle {
  margin: -0.25rem 0 0.85rem;
  color: var(--ahcalc-slate-600);
  font-size: var(--fs-base);
  line-height: var(--lh-normal);
}

.tbox-ahcalc-stack-meta {
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-data);
  color: var(--ahcalc-slate-600);
}

.tbox-ahcalc-hint {
  font-size: var(--fs-base);
  color: var(--ahcalc-slate-600);
  line-height: var(--lh-snug);
  margin-top: var(--space-sm);
}

#tbox-app-hosting-configurator .tbox-ahcalc-subtitle {
  color: var(--ahcalc-slate-600);
  line-height: var(--lh-relaxed);
  max-width: min(var(--width-desc), 70ch);
}

:root[data-theme="dark"] .tbox-ahcalc-step {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
}

#tbox-app-hosting-configurator .tbox-ahcalc-step {
  color: var(--ahcalc-slate-700);
  font-size: var(--fs-base);
}

#tbox-app-hosting-configurator .tbox-ahcalc-stack-meta {
  font-size: var(--fs-data);
  color: var(--ahcalc-slate-600);
}

.tbox-ahcalc-foot {
  margin-top: var(--space-md-plus);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--ahcalc-slate-600);
}

#tbox-app-hosting-configurator .tbox-ahcalc-hint,
#tbox-app-hosting-configurator .tbox-ahcalc-foot {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--ahcalc-slate-600);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-subtitle {
  color: var(--text-secondary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-inline-label {
  color: var(--text-secondary);
}

#header ul.menu > li > button.tbox-nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: var(--min-touch-target);
  min-width: 44px;
  padding-left: var(--space-sm-plus);
  padding-right: var(--space-sm-plus);
  line-height: 1;
}

#header ul.sub-menu > li > button.tbox-nav__submenu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: var(--min-touch-target);
  padding: var(--space-md) var(--space-md-plus);
  background: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
}

#header ul.menu > li {
  position: relative;
  height: 100%;
  line-height: 1;
  padding: 0;
  font-family: "Varela Round", sans-serif;
  font-size: var(--fs-lg);
  flex: 0 0 auto;
}

/* Top-level menu hit area should be the actual control,
not <li> padding */

#header ul.menu > li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#header ul.sub-menu {
  padding: 0;
  background-color: var(--surface-dark);
}

#header ul.menu > li.menu-item-has-children > ul.sub-menu {
  flex: 0 0 100%;
}

/* Responsive header spacing (every ~200px) */
@media only screen and (width <= 1600px) {
  #header { column-gap: var(--space-sm-minus); }

  #header ul.menu > li > a,
  #header ul.menu > li > button:not(.tbox-nav__submenu-toggle) { padding-left: var(--space-md-plus); padding-right: var(--space-md-plus); }
}

@media only screen and (width <= 1400px) {
  #header { column-gap: var(--space-xs-plus); }

  #header ul.menu > li > a,
#header ul.menu > li > button:not(.tbox-nav__submenu-toggle) { padding-left: var(--space-md); padding-right: var(--space-md); }
}

@media only screen and (width <= 1200px) {
  #header { column-gap: var(--space-2xs); }

  #header ul.menu > li > a,
#header ul.menu > li > button:not(.tbox-nav__submenu-toggle) { padding-left: var(--space-sm-plus); padding-right: var(--space-sm-plus); }
}

@media only screen and (width <= 1000px) {
  #header { column-gap: var(--space-xs); padding-left: var(--space-lg); padding-right: var(--space-lg); }

  #header ul.menu > li > a,
#header ul.menu > li > button:not(.tbox-nav__submenu-toggle) { padding-left: var(--space-sm); padding-right: var(--space-sm); }
}

@media only screen and (width <= 900px) {
  #header { column-gap: var(--space-xs); }

  #header ul.menu > li > a,
#header ul.menu > li > button:not(.tbox-nav__submenu-toggle) { padding-left: var(--space-xs-plus); padding-right: var(--space-xs-plus); }
}

@media only screen and (width <= 800px) {
  #header { column-gap: var(--space-xs); }
  #header ul.menu a,
:where(#header ul.menu button) { font-size: var(--fs-md); }

  #header ul.menu > li > a,
#header ul.menu > li > button:not(.tbox-nav__submenu-toggle) { padding-left: var(--space-2xs); padding-right: var(--space-2xs); }

  #header .tbox-header-chat-btn,
#header .tbox-header__phone-link {
    font-size: var(--fs-md);
  }
}

#header ul.sub-menu > li.menu-item-has-children {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
}

#header ul.sub-menu > li:where(.menu-item-has-children) > a {
  flex: 1 1 auto;
  width: auto;
}

#header ul.sub-menu > li.menu-item-has-children > ul.sub-menu {
  flex: 0 0 100%;
}


.tbox-premium-wp .tbox-topology ul,
.tbox-standalone-wp .tbox-topology ul,
.tbox-premium-wp .topology ul,
.tbox-standalone-wp .topology ul {
	margin-top: var(--space-md);
	padding-left: var(--space-lg-plus);
}

.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);
}

#header ul.menu li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  z-index: var(--z-header-dropdown);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--ease-base), transform var(--ease-base), visibility 0.2s;
}

#header ul.sub-menu > li > ul {
  position: absolute;
  top: 0;
  left: 100%;
}

#header ul.menu li:hover > ul {
  display: block;
  background-color: var(--surface-dark);
}

/* nested menus */
#header ul.sub-menu > li {
  background-color: transparent;
}

:where(#header ul.sub-menu > li > ul > li) {
  background-color: transparent;
}

:where(#header ul.sub-menu > li > ul > li > ul > li) {
  background-color: transparent;
}

:where(#header ul.sub-menu > li:hover) {
  background-color: var(--hover-on-dark);
}

:where(#header ul.sub-menu > li > ul > li:hover) {
  background-color: var(--hover-on-dark);
}

/* Old submenu arrow (pre .tbox-nav__dropdown-indicator) */
#header ul.sub-menu > li.menu-item-has-children::before,
#header ul.sub-menu > li.menu-item-has-children.order::before {
    content: none;
    display: none;
}

:where(#header ul.sub-menu > li > ul > li > ul > li:hover) {
  background-color: var(--hover-on-dark);
}

/* Order menu items: align to STYLE.md brand CTA */
#header ul.sub-menu > li.order {
  background-color: var(--brand-cta);
}

#header ul.sub-menu > li.order:hover {
  background-color: var(--brand-highlight);
}

#header ul.sub-menu > li.order > ul.sub-menu {
  background-color: var(--brand-cta);
}

:where(#header .tbox-header__utility .tbox-breadcrumbs a:where(:hover)),
:where(#header .tbox-header__utility .tbox-breadcrumbs a:focus-visible) {
  text-decoration: underline;
}

#content .tbox-case-study a:not(.tbox-btn):hover {
  color: var(--brand-primary-text);
}

#content .tbox-search-result .entry-title a:hover,
#content .tbox-blog-listing .entry-title a:hover {
  color: var(--brand-primary-text);
  text-decoration: underline;
  text-decoration-color: currentcolor;
}

#content .tbox-related-links--auto .tbox-related-links__list a:hover {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

:root[data-theme="dark"] #content .tbox-callout a {
  color: var(--brand-primary);
}

#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-cta-section__note a,
:where(#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-cta-section__note a:visited) {
  color: var(--text-on-dark-muted);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

#header ul.sub-menu > li.order > ul.sub-menu > li > a,
#header ul.sub-menu > li.order > ul.sub-menu > li > button:not(.tbox-nav__submenu-toggle) {
  color: var(--text-on-dark-muted);
}

:where(#header ul.sub-menu > li.order > ul.sub-menu > li:hover) {
  background-color: var(--brand-highlight);
}

span#mobile-menu {
	display:none;
}

/* FOOTER */
#footer {
  padding: var(--space-4xl) max(var(--space-xl), calc(50% - 585px));
  background-color: var(--surface-dark);
  color: var(--text-on-dark);
}

#footer > * {
  max-width: 1170px;
  margin-left: auto;
  margin-right: auto;
}

/* Footer navigation: clean product-column grid (Variant A). */
.tbox-footer__cols {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--space-2xl) var(--space-xl);
}

.tbox-footer__col {
  min-width: 0;
}

.tbox-footer__heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-on-dark);
}

.tbox-footer__heading::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--radius-2xs);
  background: var(--brand-cta);
}

.tbox-footer__col--vps .tbox-footer__heading::before {
  background: var(--brand-primary);
}

.tbox-footer__col--app .tbox-footer__heading::before {
  background: var(--blue-0);
}

.tbox-footer__col--sol .tbox-footer__heading::before {
  background: var(--warm-2);
}

.tbox-footer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md-minus);
}

.tbox-footer__list a {
  display: inline-flex;
  align-items: center;
  color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-decoration: none;
}

.tbox-footer__list a:hover,
.tbox-footer__list a:focus-visible {
  color: var(--neutral-white);
}

:where(#footer-copyright > div) {
  max-width: var(--max-width);
  margin-left: auto;
  margin-right: auto;
  padding: var(--space-lg);
}

.tbox-footer__legal-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-lg) var(--space-lg) 0;
}

.tbox-footer__copy {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
}

.tbox-footer__legal {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
}

.tbox-footer__legal a {
  display: inline-flex;
  align-items: center;
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
  text-decoration: none;
}

.tbox-footer__legal a:hover,
.tbox-footer__legal a:focus-visible {
  color: var(--neutral-white);
}

/* Touch devices and narrow viewports get full 44px tap targets (WCAG 2.5.8
   AAA / touch HIG). Desktop fine-pointer keeps natural link height — at
   --fs-sm with the list gap, links already clear the 24px AA floor. The
   44px boxes carry their own breathing room, so the list gap
   shrinks to compensate. */
@media (pointer: coarse), (width <= 600px) {
  /* stylelint-disable-next-line no-descending-specificity */
  .tbox-footer__list a,
  .tbox-footer__legal a {
    min-height: var(--min-touch-target);
  }

  .tbox-footer__list {
    gap: var(--space-2xs);
  }

}

#footer-copyright {
  background-color: color-mix(in srgb, var(--surface-dark) 70%, black);
  color: var(--text-on-dark);
}

@media only screen and (width <= 1024px) {
  .tbox-footer__cols {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* HEADER TAGS */
:where(h4) {
  color: var(--brand-primary-text);
	font-size: var(--fs-heading-md);
	line-height: var(--lh-snug);
	padding-bottom: var(--space-2xl);
}

:where(h5) {
	font-size: var(--fs-2xl);
	line-height: var(--lh-snug);
	padding-bottom: var(--space-sm);
}

:where(#content .tbox-error-card h1) {
  margin: var(--space-2xs) 0 var(--space-sm-mid);
}

:where(#hero-section:not(.tbox-hero-v3):not(.ah-calc-header) h1) {
    color: var(--text-inverse);
    font-weight: var(--fw-bold);
}

/* A Tags */

/* Paragraphs */

/* Divs */
div.grid-align-center {
	place-items: center;
}

div.grid-justify-center {
	justify-items: center;
}

/* Strong */
/* stylelint-disable-next-line no-descending-specificity */
strong {
  font-weight: var(--fw-bold);
  color: inherit;
}

/* SECTIONS */

/* center all content inside 1170px,
with min 1.5rem padding at narrow viewports */

/* HERO SECTION */
#hero-section:not(.hero-v3):not(.tbox-hero-v3):not(.ah-calc-header) {
  background-color: var(--brand-hero-mid);
	background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:a='http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/' x='0px' y='0px' width='66px' height='100.5px' viewBox='0 0 66 100.5' style='overflow:scroll;enable-background:new 0 0 66 100.5;' xml:space='preserve'%3E%3Cstyle type='text/css'%3E .st0%7Bfill:%23006187;%7D%0A%3C/style%3E%3Cdefs%3E%3C/defs%3E%3Cpolygon class='st0' points='66,37.1 66,1.1 34,13.1 34,49.1 '/%3E%3Cpolygon class='st0' points='34,87.3 66,99.3 66,63.3 34,51.3 '/%3E%3Cpolygon class='st0' points='32.9,13.1 0.9,1.1 0.9,37.1 32.9,49.1 '/%3E%3Cpolygon class='st0' points='32.9,51.3 0.9,63.3 0.9,99.3 32.9,87.3 '/%3E%3Cpolygon class='st0' points='0.4,37.9 0.4,37.9 0.4,37.9 0.4,37.9 0,38.1 0,62.1 0.4,62.3 0.4,62.3 0.4,62.3 0.4,62.3 0.4,62.3 32.9,50.1 0.4,37.9 '/%3E%3Cpolygon class='st0' points='66,100.5 66,100.5 33.5,88.3 33.5,88.3 33.5,88.3 33.5,88.3 33.5,88.3 1,100.5 1.1,100.5 65.9,100.5 '/%3E%3Cpolygon class='st0' points='66,0 1.1,0 33.5,12.2 33.5,12.2 33.5,12.2 33.5,12.2 33.5,12.2 66,0 '/%3E%3Cpolygon class='st0' points='66,62.1 66,38.1 34,50.1 '/%3E%3C/svg%3E");
	background-position: center bottom;
}

:where(#hero-section h2:last-child),
#hero-section h4:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
}

/* **************************************************
Shared utilities (legacy)
**************************************************** */

blockquote {
	padding-left: 25px;
	position: relative;
	margin-bottom: 30px;
}

blockquote::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	width: 2px;
	height: 100%;
}

blockquote.grve-element:last-child {
	margin-bottom: 0;
}

#hero-section.tbox-hourly-cloud-vps,
#hero-section.app-hosting-calc {
  padding-bottom: 0;
}

#hero-section.app-hosting {
	padding-bottom: 0;
}

/*
 * Headings
 */
:where(h1, h2) {
	margin-bottom: 0;
	font-size: var(--fs-heading-lg);
	font-weight: var(--fw-bold);
	line-height: var(--lh-tight);
	color: var(--text-primary);
}

:where(h3) {
	font-family: var(--tbox-font-body);
	font-size: var(--fs-heading-md);
	line-height: var(--lh-snug);
	padding-bottom: var(--space-sm);
	font-weight: var(--fw-semibold);
	color: var(--brand-primary-text);
	margin-top: var(--space-2xl);
}

img.center {
	display: block;
	margin: 0 auto;
}

/*
 * Sections defaults
 */

/*
 * Features section
 */
.features-section {
	display: grid;
	gap: var(--space-lg);
	grid-template-columns: auto auto auto;
	grid-template-rows: auto auto;
}

h3.hero-section {
	margin-top: 0;
}

/* TOS */

/* Branding Assets */

/* Blog Page */
section.blog-list-item {
	display: grid;
	grid-template-columns: 150px 75ch;
	column-gap: var(--space-2xl);
}

.thumbnail-missing {
	background-color: var(--brand-primary);
}

.entry-footer {
	padding: 1rem 0.5rem;
}

.blog-list-item .entry-content {
	line-height: var(--lh-loose);
}

/* If you have pagination */
.pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}

span.page-numbers.current {
	padding: var(--space-sm-plus) var(--space-lg-plus);
    margin: 0 5px;
    border: 1px solid var(--blue-6);
    text-decoration: none;
    background: var(--blue-6);
    color: var(--text-inverse);
}

/*
 * Responsive CSS
 */
 @media only screen and (width <= 600px) {
			#header {
				width: 100%;
				margin: 0;
				padding-left: 1em;
				padding-right: 1em;
				grid-template-columns: 200px 1fr max-content;
				column-gap: var(--space-lg);
			}

			/* keep header height stable on smaller screens */
			#header > .tbox-header-chat-btn,
			#header > .tbox-header__phone-link {
				display: none;
			}
	 
	/* Headers */
	
	h1 {
		text-align: center;
	}

	h3 {
		font-weight: var(--fw-bold);
		font-size: 1.2em; /* relative: intentional em */
	}

	h4 {
		font-size: 0.9em; /* relative: intentional em */
	}

	h5 {
		font-size: 0.8em; /* relative: intentional em */
	}

	h3.hero-section {
		text-align: center;
	}

		.tbox-footer__list a {
			font-size: var(--fs-lg);
			line-height: var(--lh-normal);
		}

			.tbox-footer__cols {
				grid-template-columns: repeat(2, minmax(0, 1fr));
			gap: var(--space-xl);
		}

		.tbox-footer__legal-bar {
			flex-direction: column;
			align-items: flex-start;
		}

 /* SECTIONS */
	 #hero-section h4 {
		 margin-bottom: var(--space-xl);
		 color: var(--text-inverse);
		 max-width: var(--prose-measure-wide);
		 text-align: center;
	}

		:where(#content) div {
			font-size: var(--fs-sm);
			line-height: var(--lh-relaxed);
		}

		:where(#content > section), .tbox-page-content > section {
			padding: 4rem 1rem;
	}

	}

/* Hide Google reCAPTCHA badge (attribution in footer per Google TOS) */
.grecaptcha-badge {
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* reCAPTCHA attribution styling: lives inside .tbox-footer__legal-bar and
   wraps to its own full-width row, inheriting the bar's padding/max-width. */
.recaptcha-attribution {
    flex-basis: 100%;
    font-size: var(--fs-2xs);
    color: var(--text-on-dark-muted);
    margin: 0;
}

/* ================================================
   ACCESSIBLE NAVIGATION STYLES
   ================================================ */

/* Progressive Enhancement - CSS-only fallback still works */
#main-navigation {
    display: block;
    justify-self: stretch;
    min-width: 0;
    width: 100%;
}

/* Focus Indicators - WCAG 2.1 AA Compliant */

/* High contrast mode support */
@media (prefers-contrast: high) {
    :where(#header ul.menu a:focus) {
        outline: 3px solid currentcolor;
    }

    :where(#header ul.menu button:focus) {
        outline: 3px solid currentcolor;
    }
}

/* Dropdown Indicator - Parent link uses flexbox for proper alignment */

/* Submenu items: keep caret from colliding with label text */

.tbox-nav__dropdown-indicator {
    display: inline-block;
    width: 0.35em;
    height: 0.35em;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    transform: rotate(45deg);
    transition: transform var(--ease-base);
    flex-shrink: 0;
    margin-top: -0.1em;
    margin-left: 0.35em;
}

.tbox-nav__submenu-toggle .tbox-nav__dropdown-indicator {
    margin-left: 0;
}

.menu-item-has-children > a[aria-expanded="true"] .tbox-nav__dropdown-indicator,
.menu-item-has-children > button[aria-expanded="true"] .tbox-nav__dropdown-indicator {
	    transform: rotate(-135deg);
}

/* Hide old chevron indicator since we now have .tbox-nav__dropdown-indicator */
#header ul.menu li.menu-item-has-children > a::before {
	    display: none;
}

/* Submenu positioning for nested menus that overflow */
#header .sub-menu.submenu-flip-left {
    left: auto;
    right: 100%;
}

#header ul.menu li.tbox-nav__item--submenu-open > ul,
:where(.no-js #header ul.menu li:hover > ul),
#header ul.menu li:hover > ul,
.tbox-env--hover #header ul.menu li:hover > ul {
    display: block;
    position: absolute;
    background-color: var(--surface-dark);
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

/* Touch device adjustments - disable hover,
require tap */
.tbox-env--touch #header ul.menu li:hover > ul {
    display: none;
    opacity: 0;
    visibility: hidden;
}

.tbox-env--touch #header ul.menu li.tbox-nav__item--submenu-open > ul {
    display: block;
    opacity: 1;
    visibility: visible;
}

/* Screen reader-only utility (shared by runtime announcers). */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Shared hidden textarea style for clipboard fallbacks in first-party JS. */
.tbox-copy-buffer {
  position: fixed;
  left: -9999px;
  opacity: 0;
  pointer-events: none;
}

/* Keep JLC init state in CSS instead of runtime inline styles. */
.jlc-wrapper.is-initializing {
  opacity: 0.5;
  filter: blur(4px);
}

	/* ================================================
	   APP HOSTING - MEGA MENU (DESKTOP)
	   ================================================ */

	@media only screen and (width >= 1180px) {
	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu {
	    grid-template-columns: repeat(3, minmax(170px, 1fr));
	    gap: var(--space-xs-plus) var(--space-md);
	    padding: var(--space-sm-plus) var(--space-md) var(--space-sm-plus);
	    min-width: min(760px, calc(100vw - 2rem));
	    align-items: start;
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting.tbox-nav__item--submenu-open > ul.sub-menu,
	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting:hover > ul.sub-menu,
	  .no-js #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting:hover > ul.sub-menu,
	  .tbox-env--hover #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting:hover > ul.sub-menu {
	    display: grid;
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu::before {
	    content: "App Hosting: deploy, scale, and operate without managing the platform.";
	    grid-column: 1 / -1;
	    display: block;
	    padding: 0.05rem var(--space-sm-plus) var(--space-sm-minus);
	    border-bottom: 1px solid var(--surface-glass-08);
	    color: var(--text-on-dark-muted);
	    font-size: var(--fs-xs);
	    font-weight: var(--fw-semibold);
	    line-height: var(--lh-snug);
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col,
	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col:hover {
	    background-color: transparent;
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col > .tbox-nav__mega-heading,
	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col > a,
	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col > button:not(.tbox-nav__submenu-toggle) {
	    display: block;
	    padding: var(--space-xs-plus) var(--space-sm-plus);
	    min-height: auto;
	    color: var(--text-on-dark-muted);
	    font-size: var(--fs-xs);
	    font-weight: var(--fw-bold);
	    text-transform: uppercase;
	    letter-spacing: var(--ls-wide);
	    cursor: default;
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col > a:hover,
	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col > button:not(.tbox-nav__submenu-toggle):hover {
	    color: var(--text-on-dark-muted);
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col > button:not(.tbox-nav__submenu-toggle) .tbox-nav__submenu-toggle-chip {
	    display: none;
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col > ul.sub-menu {
	    display: block;
	    position: static;
	    left: auto;
	    right: auto;
	    top: auto;
	    opacity: 1;
	    visibility: visible;
	    transform: none;
	    box-shadow: none;
	    background-color: transparent;
	    padding: 0;
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col > ul.sub-menu > li > a,
	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.tbox-nav__item--mega-col > ul.sub-menu > li > button:not(.tbox-nav__submenu-toggle) {
	    padding: 0.38rem var(--space-sm-plus);
	    min-height: 2rem;
	    font-size: var(--fs-base);
	    line-height: var(--lh-snug);
	    border-radius: var(--radius-sm);
	    white-space: normal;
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.order {
	    grid-column: 1 / -1;
	    margin-top: var(--space-2xs);
	    padding-top: var(--space-sm);
	    border-top: 1px solid var(--surface-glass-08);
	  }

	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.order > a,
	  #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting > ul.sub-menu > li.order > button:not(.tbox-nav__submenu-toggle) {
	    min-height: 2.75rem;
	    padding: var(--space-sm) var(--space-md);
	    background: var(--brand-cta);
	    color: var(--brand-cta-ink);
	    font-size: var(--fs-base);
	    font-weight: var(--fw-semibold);
	    border-radius: var(--radius-sm-plus);
	  }
	}

	/* ================================================
	   MOBILE NAVIGATION ENHANCEMENTS
	   ================================================ */

/* Mobile Menu Button */
#mobile-menu {
    display: none;
    align-items: center;
    gap: var(--space-sm-minus);
    padding: var(--space-sm) var(--space-md);
    min-height: var(--min-touch-target);
    height: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: var(--ff-display);
    color: var(--brand-logo-gray);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
}

#mobile-menu:focus-visible {
    outline: var(--focus-outline-width) solid var(--brand-primary);
    outline-offset: var(--focus-outline-offset);
}

#mobile-menu:focus:not(:focus-visible) {
    outline: none;
}

/* Hamburger Icon */
.tbox-nav-toggle__icon {
    display: block;
    width: 24px;
    height: 2px;
    background: var(--text-primary);
    position: relative;
    transition: background var(--ease-base);
}

.tbox-nav-toggle__icon::before,
.tbox-nav-toggle__icon::after {
    content: '';
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--text-primary);
    transition: transform var(--ease-base);
}

.tbox-nav-toggle__icon::before {
    top: -7px;
}

.tbox-nav-toggle__icon::after {
    top: 7px;
}

/* Hamburger to X animation */
#mobile-menu .tbox-nav-toggle__icon,
#mobile-menu .tbox-nav-toggle__icon::before,
#mobile-menu .tbox-nav-toggle__icon::after {
  background: currentcolor;
}

#mobile-menu[aria-expanded="true"] .tbox-nav-toggle__icon {
    background: transparent;
}

#mobile-menu[aria-expanded="true"] .tbox-nav-toggle__icon::before {
    transform: rotate(45deg);
    top: 0;
}

#mobile-menu[aria-expanded="true"] .tbox-nav-toggle__icon::after {
    transform: rotate(-45deg);
    top: 0;
}

/* Mobile Menu Open State */
body.tbox-nav--mobile-open {
    overflow: hidden;
}

					@media only screen and (width <= 1179px) {
            #header {
              --header-main-height: 56px;
              --header-height: var(--header-main-height);
            }

            #header .tbox-header__inner {
              gap: var(--space-sm);
              padding-left: max(1rem, calc(50% - 700px));
              padding-right: max(1rem, calc(50% - 700px));
            }

					    #mobile-menu {
					        display: flex;
					        justify-self: end;
					    }

            #header .tbox-header__main .tbox-chat-btn--main {
              justify-content: center;
              width: 44px;
              height: 44px;
              padding: 0;
            }

					    #header .tbox-header__main #menu-header-menu-2022 {
					        justify-content: flex-start;
					        padding-right: 0;
					        position: fixed;
					        top: calc(var(--wp-admin-bar-h, 0px) + var(--header-current-height, var(--header-main-height, 64px)));
					        right: 0;
					        bottom: 0;
					        width: min(390px, 42vw);
					        max-width: 100vw;
					        background-color: var(--surface-base);
				        z-index: calc(var(--z-header-dropdown) + 1);
				        box-shadow: -4px 0 12px rgb(15 23 42 / 12%);
				        border-left: 1px solid var(--border-light);
					        display: block;
					        transform: translateX(100%);
					        transition: transform var(--ease-slow);
					        max-height: calc(100vh - var(--wp-admin-bar-h, 0px) - var(--header-current-height, var(--header-main-height, 64px)));
					        overflow-y: auto;
					        overscroll-behavior: contain;
					    }

					    #header #menu-header-menu-2022 > li {
					        display: block;
					        width: 100%;
					        height: auto;
					        transform: none;
					    }

					    #header #menu-header-menu-2022 > li + li {
					        border-top: 1px solid var(--overlay-06);
					    }

					    #header .tbox-header__main #menu-header-menu-2022 > li.tbox-nav__item--cta {
					        position: static;
					        top: auto;
					        right: auto;
					        height: auto;
					        display: flex;
					        align-items: stretch;
					    }

            #header #menu-header-menu-2022 > li.tbox-nav__mobile-heading {
              padding: var(--space-sm-plus) var(--space-lg) var(--space-xs);
              border-top: none;
              background: rgb(15 23 42 / 2%);
            }

#header #menu-header-menu-2022 > li.tbox-nav__mobile-heading > span {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  color: var(--text-muted);
}

            #header #menu-header-menu-2022 > li.tbox-nav__mobile-group-label {
              padding: var(--space-sm-plus) var(--space-lg) var(--space-xs);
              border-top: 1px solid var(--overlay-08);
              background: rgb(15 23 42 / 2%);
            }

#header #menu-header-menu-2022 > li.tbox-nav__mobile-group-label > span {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--text-muted);
}

            #header #menu-header-menu-2022 > li.tbox-nav__mobile-group-label + li {
              border-top: none;
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--mobile-contact {
              display: flex;
              gap: var(--space-sm);
              padding: var(--space-sm-plus) var(--space-lg);
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--mobile-contact .tbox-header__phone-link,
            #header #menu-header-menu-2022 > li.tbox-nav__item--mobile-contact .tbox-header-chat-btn {
              flex: 0 1 auto;
              width: auto;
              height: auto;
              min-height: var(--min-touch-target);
              padding: 0;
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--mobile-contact .tbox-header__action-chip {
              width: auto;
              min-height: var(--min-touch-target);
              padding: var(--space-sm-minus) var(--space-sm-plus);
              border-radius: var(--radius-sm);
            }

				    #header #menu-header-menu-2022 > li.menu-item-has-children {
				        display: flex;
				        flex-wrap: wrap;
				        align-items: stretch;
				    }

				    #header #menu-header-menu-2022 > li.menu-item-has-children > ul.sub-menu {
				        flex: 0 0 100%;
				    }

				    #header #menu-header-menu-2022 > li > button.tbox-nav__submenu-toggle {
				        display: flex;
				        align-items: center;
				        justify-content: center;
				        min-width: 44px;
				        min-height: var(--min-touch-target);
				        padding: var(--space-lg);
				        background: transparent;
				        border: none;
				        color: inherit;
				        cursor: pointer;
				    }

			    #header .tbox-header__main #menu-header-menu-2022.tbox-nav__menu--open {
			        transform: translateX(0);
			    }

            #header .tbox-header__main #menu-header-menu-2022[aria-hidden="true"]:not(.tbox-nav__menu--open) {
              display: none;
            }

				    #header #menu-header-menu-2022 .sub-menu {
			        display: none;
			        overflow: hidden;
			        position: static;
			        opacity: 1;
	        visibility: visible;
	        transform: none;
	        box-shadow: none;
	        padding-left: var(--space-lg);
	        background-color: transparent;
	    }

			    #header #menu-header-menu-2022 .menu-item-has-children > button {
			        position: static;
			    }

					    #header #menu-header-menu-2022 > li > a,
#header #menu-header-menu-2022 > li > button:not(.tbox-nav__submenu-toggle) {
					        display: flex;
				        align-items: center;
				        justify-content: flex-start;
				        gap: var(--space-sm-plus);
				        padding: var(--space-sm-plus) var(--space-lg);
				        min-height: var(--min-touch-target);
				        color: var(--text-primary);
				        text-decoration: none;
				        background: transparent;
				        border: none;
					        font-family: var(--ff-display);
				        font-size: var(--fs-md);
				        width: 100%;
					        text-align: left;
					    }

			    #header #menu-header-menu-2022 .menu-item-has-children > a {
			        position: static;
			    }

	            #header #menu-header-menu-2022 > li.tbox-nav__item--mobile-phone > a,
#header #menu-header-menu-2022 > li.tbox-nav__item--mobile-chat > button,
#header #menu-header-menu-2022 > li.tbox-nav__item--mobile-contact > a,
#header #menu-header-menu-2022 > li.tbox-nav__item--mobile-contact > button,
#header #menu-header-menu-2022 > li.tbox-nav__item--mobile-theme > button,
#header #menu-header-menu-2022 > li.tbox-nav__item--mobile-login > a {
	              justify-content: flex-start;
	            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--mobile-theme {
              padding: var(--space-sm-plus) var(--space-lg);
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--mobile-theme .tbox-theme-control--drawer {
              display: inline-flex;
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--mobile-theme .tbox-theme-control__toggle {
              display: inline-flex;
              align-items: center;
              gap: var(--space-sm);
              width: auto;
              min-width: var(--min-touch-target);
              height: var(--min-touch-target);
              padding-inline: var(--space-md);
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--mobile-theme .tbox-theme-control__text {
              font-size: var(--fs-sm);
              font-weight: var(--fw-medium);
            }

				    #header #menu-header-menu-2022 > li > a:hover,
#header #menu-header-menu-2022 > li > button:hover {
				        background-color: var(--overlay-04);
				    }

	    #header #menu-header-menu-2022 .sub-menu li a,
#header #menu-header-menu-2022 .sub-menu li button:not(.tbox-nav__submenu-toggle) {
	      color: var(--text-primary);
	    }

	    #header #menu-header-menu-2022 .sub-menu > li:hover {
	      background-color: rgb(15 23 42 / 4%);
	    }

				    #header #menu-header-menu-2022 .tbox-nav__item--submenu-open > .sub-menu {
				        display: block;
				        max-height: 500px;
				    }

            #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting .tbox-nav__item--mega-col {
              border-top: 1px solid var(--overlay-06);
            }

            #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting.tbox-nav__item--submenu-open > .sub-menu {
              max-height: none;
            }

#header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting .tbox-nav__item--mega-col > .tbox-nav__mega-heading {
  display: block;
  padding: var(--space-sm-plus) var(--space-lg) var(--space-xs);
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}

            #header #menu-header-menu-2022 li.tbox-nav__item--mega-apphosting .tbox-nav__item--mega-col > ul.sub-menu {
              display: block;
              max-height: none;
              padding-left: 0;
            }

		    #header #menu-header-menu-2022 .tbox-nav__dropdown-indicator {
		        position: static;
		        margin-top: 0;
		        margin-left: var(--space-sm);
		    }

				    /* Mobile submenu styling */

				    #header #menu-header-menu-2022 > li.menu-item-has-children > a {
				        flex: 1 1 auto;
				        width: auto;
				    }

	    :where(#header #menu-header-menu-2022 .sub-menu > li:hover > a),
#header #menu-header-menu-2022 .sub-menu > li:hover > button {
	      color: var(--text-primary);
	    }

		    /* Mobile dropdown indicator */

				    #header #menu-header-menu-2022 > li.menu-item-has-children > a,
#header #menu-header-menu-2022 > li.menu-item-has-children > button:not(.tbox-nav__submenu-toggle) {
				        justify-content: space-between;
				        gap: var(--space-lg);
				    }

            #header #menu-header-menu-2022 > li.tbox-nav__item--cta > button:not(.tbox-nav__submenu-toggle) {
              flex: 1 1 auto;
              width: auto;
              min-width: 0;
              padding: 0;
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--cta > button.tbox-nav__submenu-toggle {
              flex: 0 0 auto;
              padding: 0;
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--cta .tbox-nav__cta-label,
            #header #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children .tbox-nav__cta-label,
            #header #menu-header-menu-2022 > li.tbox-nav__item--cta > button.tbox-nav__submenu-toggle .tbox-nav__submenu-toggle-chip,
            #header #menu-header-menu-2022 > li.tbox-nav__item--cta > button:not(.tbox-nav__submenu-toggle) .tbox-nav__submenu-toggle-chip {
              box-sizing: border-box;
              height: auto;
              min-height: var(--min-touch-target);
              border-radius: 0;
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--cta .tbox-nav__cta-label {
              justify-content: flex-start;
              width: 100%;
              padding: 0 var(--space-lg);
            }

            #header #menu-header-menu-2022 > li.tbox-nav__item--cta > button.tbox-nav__submenu-toggle .tbox-nav__submenu-toggle-chip,
            #header #menu-header-menu-2022 > li.tbox-nav__item--cta > button:not(.tbox-nav__submenu-toggle) .tbox-nav__submenu-toggle-chip {
              padding: 0 var(--space-md);
            }

            #header #menu-header-menu-2022 > li > a:focus-visible,
            #header #menu-header-menu-2022 > li > button:focus-visible {
              outline: none;
              box-shadow: inset 0 0 0 var(--focus-outline-width) var(--brand-primary);
              border-radius: var(--radius-sm);
            }
				}

@media only screen and (width <= 767px) {
  #header .tbox-header__main #menu-header-menu-2022 {
    width: 100vw;
  }
}

/* ================================================
   REDUCED MOTION
   ================================================ */
@media (prefers-reduced-motion: reduce) {
    #header ul.menu li ul,
    #header #menu-header-menu-2022,
    #header #menu-header-menu-2022 .sub-menu,
    .tbox-nav-toggle__icon,
    .tbox-nav-toggle__icon::before,
    .tbox-nav-toggle__icon::after,
    .tbox-nav__dropdown-indicator {
        transition: none;
    }
}

/* ================================================
   NO-JS FALLBACK
   ================================================ */
:where(.no-js #header ul.menu li:hover > ul) {
    display: block;
    opacity: 1;
    visibility: visible;
}

.no-js #mobile-menu {
    display: none !important;
}

.no-js #header #menu-header-menu-2022 {
    display: flex !important;
    transform: none !important;
    position: static !important;
    width: auto !important;
    max-height: none !important;
    overflow: visible !important;
    box-shadow: none !important;
    border-left: 0 !important;
    background: transparent !important;
}

/* Primary header CTA (top-level "Order") */
#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-cta-section__note a:hover {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] #content .entry-footer a:visited,
:root[data-theme="dark"] #content :is(.tbox-page-content, .entry-content) a:not(.tbox-btn):not(.tbox-btn-secondary):not(.tbox-btn-outline):not(.tbox-btn-on-dark):not(.tbox-btn-outline-dark):not(.tbox-btn-ghost):not(.tbox-btn-ghost-dark):visited {
  color: var(--brand-primary);
}

/* stylelint-disable no-descending-specificity */
/* Keep prose links visually distinct even when component rules reset anchors later. */
#content :is(.tbox-page-content, .entry-content) :is(p, li, dd, .tbox-section__desc, .tbox-card__text, .tbox-mini-note, .tbox-value-card__desc) a:not(.tbox-btn):not(.tbox-btn-secondary):not(.tbox-btn-outline):not(.tbox-btn-on-dark):not(.tbox-btn-outline-dark):not(.tbox-btn-ghost):not(.tbox-btn-ghost-dark):not(.tbox-card__link) {
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: var(--underline-offset);
}

:root:not([data-theme="dark"]) #content :is(.tbox-page-content, .entry-content) :is(p, li, dd, .tbox-section__desc, .tbox-card__text, .tbox-mini-note, .tbox-value-card__desc) a:not(.tbox-btn):not(.tbox-btn-secondary):not(.tbox-btn-outline):not(.tbox-btn-on-dark):not(.tbox-btn-outline-dark):not(.tbox-btn-ghost):not(.tbox-btn-ghost-dark):not(.tbox-card__link) {
  color: var(--brand-primary-text);
}

:root:not([data-theme="dark"]) #content :is(.tbox-page-content, .entry-content) :is(p, li, dd, .tbox-section__desc, .tbox-card__text, .tbox-mini-note, .tbox-value-card__desc) a:not(.tbox-btn):not(.tbox-btn-secondary):not(.tbox-btn-outline):not(.tbox-btn-on-dark):not(.tbox-btn-outline-dark):not(.tbox-btn-ghost):not(.tbox-btn-ghost-dark):not(.tbox-card__link):hover {
  color: var(--brand-primary-deep);
}

:root[data-theme="dark"] #content :is(.tbox-page-content, .entry-content) :is(p, li, dd, .tbox-section__desc, .tbox-card__text, .tbox-mini-note, .tbox-value-card__desc) a:not(.tbox-btn):not(.tbox-btn-secondary):not(.tbox-btn-outline):not(.tbox-btn-on-dark):not(.tbox-btn-outline-dark):not(.tbox-btn-ghost):not(.tbox-btn-ghost-dark):not(.tbox-card__link) {
  color: var(--brand-primary);
}
/* stylelint-enable no-descending-specificity */

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > a,
#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button:not(.tbox-nav__submenu-toggle) {
  background: transparent;
  color: inherit;
  padding-left: 0;
  padding-right: 0;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta {
  --tbox-nav__item--cta-chip-height: 34px;
  /* Variant B "Order now": solid orange fill (not the rail gradient) with dark
     ink for accessible contrast on the bright --brand-cta. Scoped to the header
     CTA only — the global --rail-grad / --tbox-btn-accent-* tokens are untouched. */
  --tbox-nav-cta-bg: var(--brand-cta);
  --tbox-nav-cta-bg-hover: var(--brand-cta-hover);
  --tbox-nav-cta-ink: var(--brand-cta-ink);
  --tbox-nav-cta-hover-ink: var(--brand-cta-ink);
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > a:hover,
#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button:not(.tbox-nav__submenu-toggle):hover {
  background: transparent;
  color: inherit;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > a:focus-visible,
#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button:not(.tbox-nav__submenu-toggle):focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children > button:not(.tbox-nav__submenu-toggle) {
  gap: 0;
  position: relative;
  color: var(--tbox-nav-cta-ink, var(--brand-cta-ink));
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children > button:not(.tbox-nav__submenu-toggle)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: var(--tbox-nav__item--cta-chip-height);
  transform: translateY(-50%);
  box-sizing: border-box;
  background: var(--tbox-nav-cta-bg, var(--tbox-btn-accent-bg));
  border: 1px solid var(--tbox-btn-accent-border);
  border-radius: var(--radius-md);
  pointer-events: none;
  z-index: 0;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children > button:not(.tbox-nav__submenu-toggle):hover::before {
  background: var(--tbox-nav-cta-bg-hover, var(--tbox-btn-accent-bg-hover));
  border-color: var(--tbox-btn-accent-border);
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children > button:not(.tbox-nav__submenu-toggle) > * {
  position: relative;
  z-index: 1;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > a:focus:not(:focus-visible),
#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button:not(.tbox-nav__submenu-toggle):focus:not(:focus-visible) {
  outline: none;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta .tbox-nav__cta-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tbox-nav__item--cta-chip-height);
  padding: 0 0.9rem;
  border-radius: var(--radius-md);
  background: var(--tbox-nav-cta-bg, var(--tbox-btn-accent-bg));
  border: 1px solid var(--tbox-btn-accent-border);
  color: var(--tbox-nav-cta-ink, var(--brand-cta-ink));
  line-height: 1;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children .tbox-nav__cta-label {
  background: transparent;
  border: 0;
  border-radius: 0;
  color: inherit;
  padding-right: var(--space-sm);
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button.tbox-nav__submenu-toggle {
  min-width: 0;
  padding-left: 0;
  padding-right: 0;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button.tbox-nav__submenu-toggle .tbox-nav__submenu-toggle-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tbox-nav__item--cta-chip-height);
  padding: 0 var(--space-sm-minus);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background: var(--tbox-nav-cta-bg, var(--tbox-btn-accent-bg));
  border: 1px solid var(--tbox-btn-accent-border);
  border-left: 0;
  color: var(--tbox-nav-cta-ink, var(--brand-cta-ink));
  line-height: 1;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children > button:not(.tbox-nav__submenu-toggle) .tbox-nav__submenu-toggle-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: var(--tbox-nav__item--cta-chip-height);
  padding: 0 var(--space-sm-minus);
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: inset 1px 0 0 color-mix(in oklch, currentcolor 25%, transparent);
  color: inherit;
  line-height: 1;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > a:hover .tbox-nav__cta-label,
:where(#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button:not(.tbox-nav__submenu-toggle):hover .tbox-nav__cta-label) {
  background: var(--tbox-nav-cta-bg-hover, var(--tbox-btn-accent-bg-hover));
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-nav-cta-hover-ink, var(--brand-cta-ink));
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta:not(.menu-item-has-children) > a:focus-visible .tbox-nav__cta-label,
#header #menu-header-menu-2022 > li.tbox-nav__item--cta:not(.menu-item-has-children) > button:not(.tbox-nav__submenu-toggle):focus-visible .tbox-nav__cta-label {
  outline: 3px solid var(--text-primary);
  outline-offset: var(--focus-outline-offset);
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button.tbox-nav__submenu-toggle .tbox-nav__submenu-toggle-chip .tbox-nav__dropdown-indicator {
  border-right-color: currentcolor;
  border-bottom-color: currentcolor;
  margin-left: 0;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button:not(.tbox-nav__submenu-toggle) .tbox-nav__submenu-toggle-chip .tbox-nav__dropdown-indicator {
  margin-left: 0;
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta > button.tbox-nav__submenu-toggle:hover .tbox-nav__submenu-toggle-chip {
  background: var(--tbox-nav-cta-bg-hover, var(--tbox-btn-accent-bg-hover));
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-nav-cta-hover-ink, var(--brand-cta-ink));
}

#header #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children > button:not(.tbox-nav__submenu-toggle):hover .tbox-nav__submenu-toggle-chip {
  background: transparent;
  color: inherit;
}

/* Shared tokens + components (canonical owner) */

/**
 * site-palette.css — Global STYLE.md tokens + shared components
 * Canonical stylesheet loaded site-wide (single owner for shared tokens/components).
 */

/* ============================================
   Tokens (STYLE.md + app UI slate scale)
   ============================================ */

:root {
  /* Primitive ramps — single source of truth for brand palette steps */
  --neutral-white: #ffffff;
  --neutral-0: #e6edf5;
  --neutral-1: #bdc2ca;
  --neutral-2: #aaafbb;
  --neutral-3: #969dab;
  --neutral-4: #828a9b;
  --neutral-5: #6f788a;
  --neutral-6: #5f6777;
  --neutral-7: #4f5563;
  --neutral-8: #3f444f;
  --neutral-9: #2f333b;
  --neutral-10: #1f2227;

  --blue-0: #8dcdfa;
  --blue-1: #6bbef9;
  --blue-2: #49aef8;
  --blue-3: #269ff6;
  --blue-4: #088ff0;
  --blue-5: #077bce;
  --blue-6: #0666ac;
  --blue-7: #055289;
  --blue-8: #033d67;
  --blue-9: #022944;

  --warm-0: #fbc88d;
  --warm-1: #fab76a;
  --warm-2: #f8a648;
  --warm-3: #f79625;
  --warm-4: #f18508;
  --warm-5: #cf7206;
  --warm-6: #ac5f05;
  --warm-7: #8a4c04;
  --warm-8: #673903;
  --warm-9: #452602;

  /* Brand colors */
  --brand-primary: var(--blue-3);
  --brand-primary-dark: var(--blue-6);
  --brand-primary-deep: var(--blue-7);
  --brand-primary-ink: var(--blue-9);
  --brand-primary-text: var(--blue-7); /* contrast-safe brand text on white/tinted light surfaces */
  --text-on-dark-strong: #c2ccd6;   /* WCAG-safe body text on hero dark surfaces (≥ 5.5:1) */
  --text-terminal-muted: #a5acb1;   /* WCAG-safe muted text on terminal navy (≥ 5:1) */
  --brand-primary-bg: color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --brand-primary-bg-18: color-mix(in srgb, var(--brand-primary) 18%, transparent);  /* tag/badge tint — lighter than --brand-primary-bg (20%) */
  --brand-primary-04: color-mix(in srgb, var(--brand-primary) 4%, transparent);
  --brand-primary-06: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  --brand-primary-08: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  --brand-primary-10: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --brand-primary-12: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --brand-primary-14: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --brand-primary-15: color-mix(in srgb, var(--brand-primary) 15%, transparent);
  --brand-primary-16: color-mix(in srgb, var(--brand-primary) 16%, transparent);
  --brand-primary-20: var(--brand-primary-bg);
  --brand-primary-22: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --brand-primary-25: color-mix(in srgb, var(--brand-primary) 25%, transparent);
  --brand-primary-30: color-mix(in srgb, var(--brand-primary) 30%, transparent);
  --brand-primary-50: color-mix(in srgb, var(--brand-primary) 50%, transparent);
  /* Pre-mixed brand-primary + border-light blends (rule 1px tints, soft cards). */
  --brand-primary-border-tint-16: color-mix(in srgb, var(--brand-primary) 16%, var(--border-light) 84%);
  --brand-primary-border-tint-18: color-mix(in srgb, var(--brand-primary) 18%, var(--border-light) 82%);
  --brand-hero-mid: #045a84;   /* bespoke hero midpoint — sits between blue-8/#blue-7; no exact ramp step */
  --brand-hero-dark: #07192b;   /* deep navy hero start/end — darker than brand-primary-deep */
  --brand-hero-end: #0d1f32;    /* deep navy hero end stop */
  --brand-cta: var(--warm-3);
  --brand-cta-hover: var(--warm-4);
  --brand-cta-active: var(--warm-5);
  /* Button-only CTA tokens: kept on the orange end of the warm ramp so the
     CTA reads as brand orange (warm-6/7 reads brown). White ink stays;
     accepted trade-off per design direction. */
  --brand-cta-btn: var(--brand-cta);
  --brand-cta-btn-deep: var(--brand-cta-active);
  --rail-grad: linear-gradient(135deg, var(--brand-cta-btn) 0%, var(--brand-cta-btn-deep) 100%);
  /* Hover steps both stops one notch down the warm ramp so the gradient
     deepens instead of collapsing to a flat warm-5. Keeps :active free
     to represent the solid pressed terminal state. */
  --rail-grad-hover: linear-gradient(135deg, var(--brand-cta-hover) 0%, var(--warm-6) 100%);

  /* CTA (orange) soft backgrounds */
  --brand-cta-bg-soft: color-mix(in srgb, var(--brand-cta) 20%, transparent);   /* PaaS tags, credit badges */
  --brand-cta-10: color-mix(in srgb, var(--brand-cta) 10%, transparent);
  --brand-cta-14: color-mix(in srgb, var(--brand-cta) 14%, transparent);
  --brand-cta-16: color-mix(in srgb, var(--brand-cta) 16%, transparent);
  --brand-cta-22: color-mix(in srgb, var(--brand-cta) 22%, transparent);
  --brand-cta-25: color-mix(in srgb, var(--brand-cta) 25%, transparent);
  --brand-cta-30: color-mix(in srgb, var(--brand-cta) 30%, transparent);
  --brand-cta-35: color-mix(in srgb, var(--brand-cta) 35%, transparent);
  --brand-cta-ink: #0f172a;
  --brand-cta-ink-strong: var(--brand-cta-ink);
  --brand-cta-text-deep: var(--warm-7);             /* dark orange text on --brand-cta-bg-soft */
  --brand-highlight: var(--warm-1);
  --brand-highlight-bg: color-mix(in srgb, var(--brand-highlight) 30%, transparent);
  /* Phase 1.6.5 — Cyan-accent-budget primitive. Use for treatments that
     need brand-flavored color without the full vividness of --brand-primary
     (deemphasized links inside cyan-saturated sections, secondary chip
     outlines, ghost icons in dense cards). The full --brand-primary stays
     reserved for high-signal moments: links, focus rings, mechanism callouts,
     selected/active states, recommended-path indicators. */
  --brand-primary-quiet: color-mix(in oklab, var(--brand-primary) 40%, var(--text-secondary));
  /* Phase 2 (Track 1 §6.10) — Cyan accent budget. Use --accent-quiet for
     repeated body chips/icons/list markers/category-row icons that historically
     ate a saturated cyan slot they did not earn. Reserve full --brand-primary
     for hover/focus, active/selected state,
     mechanism callouts, recommended-path indicators, and the one signature
     artifact per fold band. Aliased here to --brand-primary-quiet so both
     contract names resolve to the same OKLCH-mixed neutral. */
  --accent-quiet: var(--brand-primary-quiet);
  --brand-logo-gray: #494949;
  /* Button role contract: primary and accent CTAs both use the filled
     orange→dark-orange rail gradient with white text. */
  --tbox-btn-primary-bg: var(--rail-grad);
  --tbox-btn-primary-bg-hover: var(--rail-grad-hover);
  --tbox-btn-primary-text: var(--text-inverse);
  --tbox-btn-primary-text-hover: var(--text-inverse);
  --tbox-btn-primary-border: transparent;
  --tbox-btn-accent-bg: var(--rail-grad);
  --tbox-btn-accent-bg-hover: var(--rail-grad-hover);
  --tbox-btn-accent-text: var(--text-inverse);
  --tbox-btn-accent-text-hover: var(--text-inverse);
  --tbox-btn-accent-border: transparent;
  --tbox-btn-outline-text: var(--neutral-7);
  --tbox-btn-outline-text-dark: var(--neutral-0);
  --tbox-btn-outline-blue-border: var(--blue-3);
  --tbox-btn-outline-warm-border: var(--warm-3);
  --tbox-nav-cta-bg: var(--tbox-btn-accent-bg);
  --tbox-nav-cta-bg-hover: var(--tbox-btn-accent-bg-hover);
  --tbox-nav-cta-ink: var(--tbox-btn-accent-text);
  --tbox-nav-cta-hover-ink: var(--tbox-btn-accent-text-hover, var(--brand-cta-ink));
  --tbox-btn-ink: var(--tbox-btn-primary-text);
  --tbox-btn-secondary-text: var(--tbox-btn-outline-text);

  /* Focus rings / input focus */
  --focus-border: color-mix(in srgb, var(--brand-primary) 55%, transparent);
  --focus-ring: color-mix(in srgb, var(--brand-primary) 35%, transparent);
  --focus-ring-strong: color-mix(in srgb, var(--brand-primary) 45%, transparent);
  --focus-ring-soft: color-mix(in srgb, var(--brand-primary) 20%, transparent);
  --focus-ring-on-dark: rgb(255 255 255 / 35%);

  /* Neutrals — light steps use pure neutral (zero chroma) for off-white surfaces;
     mid/dark steps retain the 230° brand tint so text/icons keep a cool slate cast. */
  --gray-50: oklch(0.988 0 0);
  --gray-100: oklch(0.975 0 0);
  --gray-200: oklch(0.940 0 0);
  --gray-300: oklch(0.872 0.012 230);
  --gray-400: oklch(0.704 0.014 230);
  --gray-500: oklch(0.554 0.016 230);
  --gray-600: oklch(0.446 0.014 230);
  --gray-700: oklch(0.372 0.012 230);
  --gray-800: oklch(0.279 0.012 230);
  --gray-900: oklch(0.208 0.010 230);
  --gray-950: oklch(0.129 0.010 230);  /* darkest slate — below gray-900; used in HVPS/AH calc */

  /* Semantic aliases */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-500);
  --text-tertiary: var(--text-muted); /* alias */
  --text-disabled: var(--gray-400);
  --text-inverse: #fff;
  /* Pre-mixed translucent text-inverse for borders, scrims, and tinted overlays
     on dark surfaces. Equivalent to color-mix(in srgb, var(--text-inverse) NN%, transparent). */
  --text-inverse-08: rgb(255 255 255 / 8%);
  --text-inverse-12: rgb(255 255 255 / 12%);
  --text-inverse-14: rgb(255 255 255 / 14%);
  --text-inverse-16: rgb(255 255 255 / 16%);
  --text-inverse-18: rgb(255 255 255 / 18%);
  --surface-base: #fff;
  --surface-subtle: var(--gray-100);
  --surface-muted: oklch(0.958 0 0);
  --surface-tint: oklch(0.910 0.015 230);
  --surface-dark: var(--gray-800);
  --border-light: oklch(0.860 0 0);
  --border-mid: oklch(0.760 0 0);
  --border-muted: oklch(0.604 0.020 230);

  /* Shared component surfaces (cards/panels) */
  --surface-card: rgb(255 255 255 / 92%);
  --border-card: var(--border-light);
  --shadow-card: var(--shadow-sm);
  /* Phase 2 (§6.5) — light-theme row-header tint for tbox-spec-table. */
  --surface-row-header: color-mix(in srgb, var(--surface-subtle) 50%, var(--surface-base));

  /* Jump bar (section navigation) */
  --surface-jump-bar: #ffffff;
  --border-jump-bar: var(--brand-primary);
  --shadow-jump-bar: var(--shadow-md);
  --surface-accent-bg-strong: color-mix(in srgb, var(--brand-primary) 12%, transparent);

  /* Brand gradients */
  --gradient-brand-primary: var(--brand-primary-deep);

  /* CTA band (marketing CTA panel) */
  --surface-cta-band: var(--surface-muted);
  --border-cta-band: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --shadow-cta-band: var(--shadow-lg);

  /* Common dark-surface text helpers (used in theme already) */
  --text-on-dark: rgb(226 232 240 / 96%);
  --text-on-dark-muted: rgb(226 232 240 / 84%);
  --text-on-dark-soft: rgb(226 232 240 / 92%);   /* near-full body text on dark bg */

  /* Common dark-surface overlays (glass) */
  --surface-glass-02: rgb(255 255 255 / 2%);
  --surface-glass-025: rgb(255 255 255 / 2.5%);
  --surface-glass-03: rgb(255 255 255 / 3%);
  --surface-glass-035: rgb(255 255 255 / 3.5%);
  --surface-glass-04: rgb(255 255 255 / 4%);
  --surface-glass-05: rgb(255 255 255 / 5%);
  --surface-glass-06: rgb(255 255 255 / 6%);
  --surface-glass-07: rgb(255 255 255 / 7%);
  --surface-glass-08: rgb(255 255 255 / 8%);
  --surface-glass-10: rgb(255 255 255 / 10%);
  --surface-glass-12: rgb(255 255 255 / 12%);
  --surface-glass-14: rgb(255 255 255 / 14%);
  --surface-glass-15: rgb(255 255 255 / 15%);
  --surface-glass-16: rgb(255 255 255 / 16%);
  --surface-glass-18: rgb(255 255 255 / 18%);
  --surface-glass-20: rgb(255 255 255 / 20%);
  --surface-glass-22: rgb(255 255 255 / 22%);
  --surface-glass-24: rgb(255 255 255 / 24%);
  --surface-glass-25: rgb(255 255 255 / 25%);
  --surface-glass-30: rgb(255 255 255 / 30%);
  --surface-glass-35: rgb(255 255 255 / 35%);
  --surface-glass-40: rgb(255 255 255 / 40%);
  --surface-glass-45: rgb(255 255 255 / 45%);
  --surface-glass-50: rgb(255 255 255 / 50%);
  --surface-glass-55: rgb(255 255 255 / 55%);
  --surface-glass-60: rgb(255 255 255 / 60%);
  --surface-glass-65: rgb(255 255 255 / 65%);
  --surface-glass-70: rgb(255 255 255 / 70%);
  --surface-glass-72: rgb(255 255 255 / 72%);
  --surface-glass-75: rgb(255 255 255 / 75%);
  --surface-glass-80: rgb(255 255 255 / 80%);
  --surface-glass-82: rgb(255 255 255 / 82%);
  --surface-glass-85: rgb(255 255 255 / 85%);
  --surface-glass-88: rgb(255 255 255 / 88%);
  --surface-glass-90: rgb(255 255 255 / 90%);
  --surface-glass-92: rgb(255 255 255 / 92%);
  --surface-glass-95: rgb(255 255 255 / 95%);

  /* Border-radius scale */
  --radius-2xs: 2px;
  --radius-xs: 4px;
  --radius-sm: 6px;
  --radius-sm-plus: 8px;
  --radius-md: 10px;
  --radius-12: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  /* Functional round caps and circles only — bars, beams, dots, slider thumbs, switch knobs/tracks, circular icon buttons. Never on text-bearing containers. */
  --radius-cap: 9999px;

  /* Typography scale — see DESIGN.md "Font Size Guardrails" and STYLE.md "Typography scale" for pairing rules (contrast/weight) per tier. */
  --fs-base: 1rem;        /* 16px — body, FAQ answers, form inputs, buttons, tappable controls, nav. Floor for prose and tappable UI. */
  --fs-body: var(--fs-base);
  --fs-body-sm: var(--fs-base);
  --fs-body-xs: var(--fs-base);
  --fs-label: var(--fs-base);
  --fs-data: var(--fs-base);
  --fs-2xs: 0.75rem;             /* 12px — badges, chips, pill text, code-bar labels, diagram annotations. ≥500 weight (or uppercase+letter-spacing), AAA contrast (7:1). */
  --fs-xs: 0.8125rem;            /* 13px — code/terminal body, dense table cell data. Same pairing as --fs-2xs. */
  --fs-sm: 0.875rem;             /* 14px — secondary labels, table headers, captions, breadcrumbs. AA contrast (4.5:1), ≥400 weight. */
  --fs-md: var(--fs-base);       /* transitional, aliased to base; do not extend */
  --fs-lg: 1.125rem;      /* 18px — prominent text */
  --fs-prominent-body: var(--fs-lg);
  --fs-xl: var(--fs-prominent-body);       /* legacy subheading token, now prominent body */
  --fs-2xl: 1.375rem;     /* 22px — section titles */
  --fs-heading-sm: 1.375rem;  /* 22px — compact headings (h3 in cards, responsive hero/bento) */
  --fs-pricing-display: 1.6rem; /* 25.6px — prominent pricing (hero pricing anchors) */
  --fs-card-name: 1.4rem;      /* 22.4px — product card names (home) */
  --fs-card-price: 1.75rem;    /* 28px — product card prices (home) */
  --fs-case-study-heading: clamp(1.8rem, 2.5vw, 2.6rem); /* case study h2 */
  --fs-heading-md: 1.5rem;    /* 24px — h3/h4 headings */
  --fs-heading-lg: 2rem;      /* 32px — h2 headings */
  --fs-heading-xl: 2.25rem;   /* 36px — display headings, pricing card values */
  --fs-display: 2.5rem;       /* 40px — industrial/diagram card display */
  --heading--font-size-h2: var(--fs-pricing-display);

  /* Font-weight scale */
  --fw-normal: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;

  /* Line-height scale */
  --lh-tight: 1.2;        /* headings */
  --lh-snug: 1.3;         /* compact headings */
  --lh-normal: 1.4;       /* card body text */
  --lh-relaxed: 1.5;      /* standard body */
  --lh-loose: 1.6;        /* comfortable body */

  /* Dark-surface leading bump (PLAN_CRITIQUE_2 Phase 1).
     Light text on dark backgrounds reads more comfortably with ~0.05–0.10
     more leading. The on-dark variants derive from the base scale plus
     --line-height-dark-add so the bump is a single source of truth;
     consumers inherit them through the shared on-dark prose rule and the
     .tbox-on-dark-prose utility. */
  --line-height-dark-add: 0.08;
  --lh-on-dark-normal: calc(var(--lh-normal) + var(--line-height-dark-add));
  --lh-on-dark-relaxed: calc(var(--lh-relaxed) + var(--line-height-dark-add));
  --lh-on-dark-loose: calc(var(--lh-loose) + var(--line-height-dark-add));

  /* Letter-spacing scale */
  --ls-tight: 0;
  --ls-normal: 0;
  --ls-wide: 0;
  --ls-wider: 0;
  --ls-widest: 0;

  /* Display font stack (headings, FAQ labels, navigation accents) */
  --ff-display: "Varela Round", georgia, serif;

  /* Width constraint scale */
  --width-narrow-xs: 520px;   /* centered narrow text blocks, hero subtitles */
  --width-narrow-sm: 720px;   /* narrow content (CTA descriptions) */
  --width-narrow: 52rem;      /* 832px — standard narrow content */
  --width-narrow-md: 880px;   /* medium-narrow (closing CTA inner) */
  --width-hero-compact: 800px; /* hero-v3 --compact inner */
  --width-content: 980px;     /* content width (policy, CTA sections, sticky bars) */
  --width-faq: 1000px;        /* FAQ accordion grid */
  --width-value-strip: 1080px; /* value strip component */
  --width-prose: var(--prose-measure-wide);            /* legacy alias; unified onto the prose-measure system (was 75ch) per owner 120ch override */
  --width-prose-narrow: var(--prose-measure-default);  /* legacy "tight" alias; unified onto the prose-measure system (was 65ch) per owner 120ch override */

  /* PLAN_CRITIQUE_2 Phase 1 prose-measure contract. Three named steps for
     shared section description, intro, dense paragraph, table explanatory
     text, card body, and shortcode CTA notes. Use these in component rules
     instead of bespoke ch values; the existing --width-prose / --width-prose-narrow
     remain as legacy aliases for the .tbox-prose utility.
     Measure ceiling raised to 120ch per owner override (was 60/68/75ch). This is
     an intentional deviation from the impeccable ~65-80ch default -- do NOT revert
     these toward 75ch in a critique/polish pass. See DESIGN.md + .impeccable/critique/ignore.md. */
  --prose-measure-narrow: 90ch;   /* dense supporting copy, helper notes */
  --prose-measure-default: 105ch; /* standard body / section description */
  --prose-measure-wide: 120ch;    /* wider editorial prose, fit honesty band */
  --width-desc: var(--prose-measure-default); /* section description / prose measure. Unified onto the prose-measure token system (was 680px) per owner measure override; tracks --prose-measure-default (105ch). */
  --width-cta-action-max: 360px;
  --width-cta-action-max-mobile: 320px;
  --width-stat-label: 300px;          /* stat card prose label max-width */

  /* Spacing scale */
  --space-2xs: 0.35rem;   /* 5.6px — dense tabs/chips and compact controls */
  --space-xs: 0.25rem;    /* 4px */
  --space-xs-plus: 0.4rem; /* 6.4px — compact control padding/gaps */
  --space-sm-minus: 0.45rem; /* 7.2px — compact controls/chip padding */
  --space-sm: 0.5rem;     /* 8px */
  --space-sm-plus: 0.6rem; /* 9.6px — metadata rows/chip groups */
  --space-sm-mid: 0.65rem; /* 10.4px — dense card spacing */
  --space-md-minus: 0.7rem; /* 11.2px — tight labels and helper copy */
  --space-md: 0.75rem;    /* 12px */
  --space-md-plus: 0.85rem; /* 13.6px — tight panel rhythm */
  --space-lg: 1rem;       /* 16px */
  --space-lg-plus: 1.25rem; /* 20px — between lg and xl */
  --space-xl: 1.5rem;     /* 24px */
  --space-2xl: 2rem;      /* 32px */
  --space-3xl: 3rem;      /* 48px */
  --space-xl-plus:  1.75rem; /* 28px — decision grid margin, compact hero mobile */
  --space-2xl-plus: 2.5rem;  /* 40px — case-study grid, mobile split-layout gap, hero bottom */
  --space-3xl-plus: 3.5rem;  /* 56px — hero bottom padding, responsive section padding */
  --space-4xl:      4rem;    /* 64px — footer, footer-nav, CTA section, split layout column gap */
  --space-5xl:      4.5rem;  /* 72px — split-hero column gaps, runtime/hero section padding max */
  --space-section-y: 4.5rem;     /* section vertical padding */

  /* Transition timing */
  --ease-fast: 0.15s ease;
  --ease-base: 0.2s ease;
  --ease-slow: 0.3s ease;

  /* Duration-only tokens (for multi-property transitions) */
  --duration-fast: 0.15s;
  --duration-base: 0.2s;
  --duration-slow: 0.3s;

  /* Animation-speed tokens (longer than transitions) */
  /* --ease-reveal removed: consumers inlined (designcheck) */
  --ease-animate: 0.6s ease;      /* content entrance animations */

  /* Shadow scale */
  --shadow-sm: 0 1px 4px rgb(0 0 0 / 8%);
  --shadow-card-sm: var(--shadow-sm);
  --shadow-md: 0 2px 8px rgb(0 0 0 / 10%);
  --shadow-lg: 0 4px 12px rgb(0 0 0 / 12%);
  --shadow-xl: 0 4px 12px rgb(0 0 0 / 14%);
  --shadow-value-strip-connector: 0 -4px 6px -1px rgb(0 0 0 / 10%), 0 0 0 1px rgb(0 0 0 / 4%);
  --shadow-sticky-cta: 0 -10px 28px rgb(0 0 0 / 10%);

  /* Semantic shadow aliases */
  --shadow-card-hover: 0 8px 20px var(--overlay-10);
  --shadow-brand-accent: 0 6px 20px rgb(4 115 169 / 12%);
  --shadow-technical-panel: 0 12px 28px color-mix(in srgb, var(--gray-950) 7%, transparent);
  --shadow-segmented-panel: 0 16px 34px color-mix(in srgb, var(--gray-950) 7%, transparent);
  --shadow-card-hairline: 0 1px 0 color-mix(in srgb, var(--surface-dark) 4%, transparent);

  /* Accessibility / interaction tokens */
  --min-touch-target: 44px;
  --focus-outline-width: 2px;
  --focus-outline-offset: 2px;
  --underline-offset: 2px;
  --underline-thickness: 2px;

  /* Button component tokens */
  --btn-padding-y: 0.85rem;
  --btn-padding-x: 1.5rem;

  /* Black overlay scale (standalone alpha values for bg, border, filter) */
  --overlay-03: rgb(0 0 0 / 3%);
  --overlay-04: rgb(0 0 0 / 4%);
  --overlay-05: rgb(0 0 0 / 5%);
  --overlay-06: rgb(0 0 0 / 6%);
  --overlay-07: rgb(0 0 0 / 7%);
  --overlay-08: rgb(0 0 0 / 8%);
  --overlay-10: rgb(0 0 0 / 10%);
  --overlay-12: rgb(0 0 0 / 12%);
  --overlay-18: rgb(0 0 0 / 18%);
  --overlay-20: rgb(0 0 0 / 20%);
  --overlay-22: rgb(0 0 0 / 22%);
  --overlay-25: rgb(0 0 0 / 25%);
  --overlay-28: rgb(0 0 0 / 28%);
  --overlay-30: rgb(0 0 0 / 30%);
  --overlay-35: rgb(0 0 0 / 35%);
  --overlay-40: rgb(0 0 0 / 40%);
  --overlay-45: rgb(0 0 0 / 45%);
  --overlay-50: rgb(0 0 0 / 50%);
  --overlay-67: rgb(0 0 0 / 67%);

  /* Semantic / status */
  --success: #10b981;
  --success-deep: #059669;
  --success-text: #0d6e4e; /* WCAG-safe success text on light surfaces (≥ 4.8:1) */
  --success-ink: var(--success-text);
  --state-success-text: #15803d;
  --state-success-bg-soft: rgb(16 185 129 / 20%);
  --state-success-border-soft: rgb(16 185 129 / 25%);
  --state-success-text-deep: #065F46;               /* very dark green text on --state-success-bg-soft */
  --state-warning-text: #92400e;
  --state-warning-bg-soft: rgb(245 158 11 / 20%);
  --state-warning-bg: rgb(245 158 11 / 24%);
  --state-danger-text: #991b1b;
  --hover-on-dark: rgb(255 255 255 / 8%);
  --color-red: #EF4444;
  --color-teal: #0D9488;
  --color-cyan: #06B6D4;
  --color-slate: #64748B;
  --color-yellow: #facc15;

  /* Icon soft-background tokens (base color @ 0.26 alpha — always-on hover brightness) */
  --icon-bg-blue:    color-mix(in srgb, var(--brand-primary) 26%, transparent);
  --icon-bg-green:   rgb(16 185 129 / 26%);
  --icon-bg-orange:  color-mix(in srgb, var(--brand-cta) 26%, transparent);
  --icon-bg-red:     rgb(239 68 68 / 26%);
  --icon-bg-dark:    rgb(15 23 42 / 22%);
  --icon-bg-teal:    rgb(13 148 136 / 26%);
  --icon-bg-cyan:    rgb(6 182 212 / 26%);
  --icon-bg-slate:   rgb(100 116 139 / 26%);
  --icon-bg-inverse: rgb(255 255 255 / 22%);

  /* Icon border tokens (base color @ 0.26 alpha — matches bg alpha) */
  --icon-border-blue:    color-mix(in srgb, var(--brand-primary) 26%, transparent);
  --icon-border-green:   rgb(16 185 129 / 26%);
  --icon-border-orange:  color-mix(in srgb, var(--brand-cta) 26%, transparent);
  --icon-border-red:     rgb(239 68 68 / 26%);
  --icon-border-dark:    rgb(15 23 42 / 22%);
  --icon-border-teal:    rgb(13 148 136 / 26%);
  --icon-border-cyan:    rgb(6 182 212 / 26%);
  --icon-border-slate:   rgb(100 116 139 / 26%);

  /* Card surface tints — keyed to data-feature-cat categories */
  --card-tint-blue:    color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --card-tint-green:   rgb(16 185 129 / 10%);
  --card-tint-orange:  color-mix(in srgb, var(--brand-cta) 10%, transparent);
  --card-tint-teal:    rgb(13 148 136 / 10%);
  --card-tint-red:     rgb(239 68 68 / 10%);
  --card-tint-cyan:    rgb(6 182 212 / 10%);
  --card-tint-slate:   rgb(100 116 139 / 10%);

  /* Card border tints */
  --card-border-blue:    color-mix(in srgb, var(--brand-primary) 24%, transparent);
  --card-border-green:   rgb(16 185 129 / 24%);
  --card-border-orange:  color-mix(in srgb, var(--brand-cta) 24%, transparent);
  --card-border-teal:    rgb(13 148 136 / 24%);
  --card-border-red:     rgb(239 68 68 / 24%);
  --card-border-cyan:    rgb(6 182 212 / 24%);
  --card-border-slate:   rgb(100 116 139 / 24%);

  /* Card hover tints (stronger alpha) */
  --card-tint-blue-hover:    color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --card-tint-green-hover:   rgb(16 185 129 / 18%);
  --card-tint-orange-hover:  color-mix(in srgb, var(--brand-cta) 18%, transparent);
  --card-tint-teal-hover:    rgb(13 148 136 / 18%);
  --card-tint-red-hover:     rgb(239 68 68 / 18%);
  --card-tint-cyan-hover:    rgb(6 182 212 / 18%);
  --card-tint-slate-hover:   rgb(100 116 139 / 18%);

  /* App Hosting portability timeline accents */
  --ah-portability-timeline-blue: var(--brand-primary-dark);
  --ah-portability-timeline-slate: var(--gray-700);
  --ah-portability-timeline-green-dark: var(--success);
  --ah-portability-timeline-blue-dark: var(--brand-primary);

  --surface-success-bg-soft: rgb(16 185 129 / 20%);
  --surface-success-bg: rgb(192 233 223 / 45%);
  --surface-success-bg-strong: rgb(192 233 223 / 65%);
  /* --surface-info-bg-strong shares its light-mode value with --surface-pricing-table-prepaid
     but serves a different semantic purpose (see Legacy pricing tables below). Do not consolidate
     without an explicit migration. */
  --surface-info-bg: rgb(206 219 255 / 45%);
  --surface-info-bg-soft: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --surface-info-bg-strong: rgb(206 219 255 / 65%);
  --surface-pricegrid-reserved: rgb(192 233 223 / 100%);
  --surface-pricegrid-band-a: var(--surface-pricing-table-prepaid);
  --surface-pricegrid-band-b: var(--surface-pricing-table-zebra);
  --border-pricegrid: var(--border-mid);

  /* Shared switch controls */
  --switch-track-bg: rgb(100 116 139 / 25%);
  --switch-track-border: rgb(100 116 139 / 25%);
  --switch-track-active-bg: var(--brand-primary);
  --switch-track-active-border: rgb(6 182 212 / 45%);
  --switch-knob-bg: var(--surface-base);
  --switch-knob-shadow: 0 6px 10px rgb(2 6 23 / 15%);
  --switch-focus-ring: rgb(34 211 238 / 18%);

  /* Legacy pricing tables */
  --pricing-table-clear-borders: var(--surface-base);
  --surface-pricing-table-zebra: rgb(0 0 0 / 7%);
  --surface-pricing-table-label: #f8f8f8;
  --surface-pricing-table-unit: var(--border-light);
  --surface-pricing-table-postpaid: var(--surface-pricegrid-reserved);
  --surface-pricing-table-prepaid: rgb(206 219 255 / 65%);
  --surface-pricing-table-prepaid-strong: rgb(206 219 255 / 85%);
  --surface-volume-table-popular-bg: rgb(16 185 129 / 6%);

  /* Legacy panels */
  --surface-decision-panel: var(--surface-base);
  --shadow-decision-panel: 0 18px 42px rgb(0 0 0 / 6%);

  /* Typography */
  --tbox-font-body: "Rubik", system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --tbox-font-mono: "JetBrains Mono", ui-monospace, sfmono-regular, menlo, monaco, consolas, "Liberation Mono", "Courier New", monospace;

  /* Header */
  --header-promo-height: 0;
  --header-utility-height: 48px;
  --header-main-height: 64px;
  --header-height: calc(var(--header-promo-height) + var(--header-utility-height) + var(--header-main-height));

  /* Legacy primitives (migrated from top-of-file :root)
     Prefer modern semantic tokens for new code:
       --gray-6  → var(--text-muted)
       --orange-1 → var(--brand-primary)
       --gray-2  → var(--gray-900)
       --gray-3  → var(--border-light)
       --gray-5  → var(--surface-subtle)
       --gray-7  → var(--border-mid)  */
  --gray-2: #222;
  --gray-3: #e5e5e5;
  --gray-4: #eaeaea;
  --gray-5: #f5f5f5;
  --gray-6: #a0a0a0;
  --gray-7: #ccc;
  --orange-1: #ff5123;

  /* Layout tokens */
  --max-width: 1170px;
  --width-content-max: var(--max-width);
  --header-height-scrolled: 64px;
  --wp-admin-bar-h: 0px; /* stylelint-disable-line length-zero-no-unit -- unitless 0 breaks calc() addition */
  /* Z-index scale */
  --z-above: 100;              /* overlays above content */
  --z-sticky: 1000;            /* sticky elements (CTAs) */
  --z-header: 5000;
  --z-header-dropdown: 6000;
  --z-modal: 10000;            /* modals, dialogs */
  --z-toast: 10050;            /* toasts, notifications */

  /* Color scheme */
  color-scheme: light;

  /* App Hosting autoscale */
  --ah-autoscale-pay-gradient: var(--success);
  --ah-autoscale-pay-shadow:
    0 4px 12px rgb(0 0 0 / 10%);
  --ah-autoscale-free-fill: var(--text-inverse);
  --ah-autoscale-free-stroke: var(--text-primary);
  --ah-autoscale-free-shadow: 0 8px 18px rgb(0 0 0 / 12%);
  --ah-autoscale-img-shadow: 0 12px 24px rgb(0 0 0 / 10%);
  --ah-hscale-track-rail: var(--border-light);
  --ah-hscale-container-bg: var(--surface-card);
  --ah-hscale-container-border: var(--border-mid);
  --ah-hscale-container-icon-bg: var(--brand-primary-bg);
  --ah-hscale-container-icon-border: var(--brand-primary);
  --ah-hscale-util-track: var(--surface-subtle);

  /* Shared calculator tokens (HVPS + App Hosting) */
  --calc-slate-900: var(--gray-900);
  --calc-slate-800: var(--gray-800);
  --calc-slate-700: var(--gray-700);
  --calc-slate-400: var(--gray-400);
  --calc-accent-400: #22d3ee;
  --calc-accent-300: #67e8f9;
  --calc-success-500: #22c55e;
  --calc-success-700: #047857;
  --calc-success-600: #059669;
  --calc-warn-500: #f59e0b;

  /* HVPS configurator */
  --tbox-hvps-blue-1: var(--brand-primary);
  --tbox-hvps-blue-2: var(--brand-primary-dark);
  --tbox-hvps-blue-3: #005b80;
  --tbox-hvps-text-dark: var(--text-primary);
  --tbox-hvps-text-medium: var(--text-secondary);
  --tbox-hvps-text-light: var(--text-muted);
  --tbox-hvps-bg-white: var(--surface-base);
  --tbox-hvps-bg-light: var(--surface-subtle);
  --tbox-hvps-bg-gray: var(--surface-muted);
  --tbox-hvps-border: var(--border-light);
  --tbox-hvps-shadow: var(--shadow-sm);
  --tbox-hvps-transition: var(--ease-base);
  --tbox-hvps-success-500: var(--calc-success-500);
  --tbox-hvps-backup-weekly: #3b82f6;
  --tbox-hvps-backup-monthly: var(--brand-cta);
  --tbox-hvps-slate-850: #111827;
  --tbox-hvps-skeleton-base: #f0f0f0;
  --tbox-hvps-skeleton-highlight: #e0e0e0;
  --tbox-hvps-success-700: var(--calc-success-700);
  --tbox-hvps-success-600: var(--calc-success-600);
  --tbox-hvps-orange: var(--brand-cta);
  --tbox-hvps-focus-ring: 4px;

  /* App Hosting calculator */
  --ahcalc-slate-900: var(--calc-slate-900);
  --ahcalc-slate-800: var(--calc-slate-800);
  --ahcalc-slate-700: var(--calc-slate-700);
  --ahcalc-slate-600: var(--gray-600);
  --ahcalc-slate-500: var(--gray-500);
  --ahcalc-slate-400: var(--calc-slate-400);
  --ahcalc-slate-300: var(--gray-300);
  --ahcalc-slate-200: var(--gray-200);
  --ahcalc-slate-100: var(--gray-100);
  --ahcalc-slate-50: var(--gray-50);
  --ahcalc-accent-600: var(--brand-primary-dark);
  --ahcalc-accent-500: var(--brand-primary);
  --ahcalc-accent-400: var(--calc-accent-400);
  --ahcalc-accent-300: var(--calc-accent-300);
  --ahcalc-action-500: var(--brand-cta);
  --ahcalc-action-600: var(--brand-cta-hover);
  --ahcalc-success-500: var(--calc-success-500);
  --ahcalc-success-700: var(--state-success-text);
  --ahcalc-success-200: var(--state-success-border-soft);
  --ahcalc-success-50: var(--state-success-bg-soft);
  --ahcalc-warn-500: var(--calc-warn-500);
  --ahcalc-warn-300: #fbbf24;
  --ahcalc-info-700: var(--brand-primary-dark);
  --ahcalc-svc-dblb-500: #3b82f6;
  --ahcalc-svc-cache-500: var(--color-teal);
  --ahcalc-toast-success-end: var(--calc-success-700);
  --ahcalc-toast-error-start: #dc2626;
  --ahcalc-toast-error-end: #b91c1c;
  --ahcalc-hero-grad-start: var(--ahcalc-slate-900);
  --ahcalc-shadow: 0 1px 3px rgb(0 0 0 / 10%), 0 1px 2px rgb(0 0 0 / 6%);
  --ahcalc-shadow-lg: 0 12px 30px rgb(2 6 23 / 18%);
  --ahcalc-font: 'Rubik', system-ui, -apple-system, "Segoe UI", roboto, helvetica, arial, sans-serif;
  --ahcalc-mono: 'JetBrains Mono', ui-monospace, sfmono-regular, menlo, monaco, consolas, 'Liberation Mono', 'Courier New', monospace;

  /* Shared video carousel controls */
  --video-carousel-fullscreen-bg: var(--gray-950);
  --video-carousel-control-bg: color-mix(in srgb, var(--gray-950) 85%, transparent);
  --video-carousel-control-bg-hover: color-mix(in srgb, var(--gray-950) 95%, transparent);
  --video-carousel-control-border: var(--surface-glass-20);
  --video-carousel-control-text: var(--text-inverse);

  /* Shared calculator font tokens — unified across App Hosting and Cloud VPS */
  --calc-font: var(--ahcalc-font);
  --calc-mono: var(--ahcalc-mono);

  /* Code/command syntax tokens.
     Dark-surface palette is defined once as --code-syntax-*-dark so the dark
     theme override and the forced light override on dark-surface modifiers
     (.tbox-code-block--security/--manifest) both reference the same source. */
  --code-syntax-key-dark: #7dd3fc;
  --code-syntax-string-dark: #86efac;
  --code-syntax-number-dark: #fbbf24;
  --code-syntax-comment-dark: #94a3b8;

  /* Active syntax tokens — light defaults for light code surfaces. */
  --code-syntax-key: #0369a1;
  --code-syntax-string: #15803d;
  --code-syntax-number: #b45309;
  --code-syntax-comment: #64748b;

  /* Terminal traffic-light dots */
  --terminal-dot-red: #ff5f57;
  --terminal-dot-yellow: #febc2e;
  --terminal-dot-green: #28c840;
}

/* ============================================
   Spacing & alignment utilities
   ============================================ */

/* Margin-top */
.tbox-mt-0 { margin-top: 0; }
.tbox-mt-2 { margin-top: var(--space-sm); }
.tbox-mt-3 { margin-top: var(--space-md); }
.tbox-mt-4 { margin-top: var(--space-lg); }
.tbox-mt-6 { margin-top: var(--space-xl); }
.tbox-mt-8 { margin-top: var(--space-2xl); }
.tbox-mt-12 { margin-top: var(--space-3xl); }

/* Margin-bottom */
.tbox-mb-0 { margin-bottom: 0; }
.tbox-mb-2 { margin-bottom: var(--space-sm); }
.tbox-mb-3 { margin-bottom: var(--space-md); }
.tbox-mb-4 { margin-bottom: var(--space-lg); }
.tbox-mb-6 { margin-bottom: var(--space-xl); }
.tbox-mb-8 { margin-bottom: var(--space-2xl); }
.tbox-mb-12 { margin-bottom: var(--space-3xl); }

/* Margin reset */
.tbox-m-0 { margin: 0; }

/* Padding */
.tbox-pb-4 { padding-bottom: var(--space-lg); }
.tbox-pb-6 { padding-bottom: var(--space-xl); }
.tbox-pb-8 { padding-bottom: var(--space-2xl); }
.tbox-p-8 { padding: var(--space-2xl); }

/* Text utilities */
.tbox-text-sm {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}
.tbox-text-secondary { color: var(--text-secondary); }
.tbox-lh-copy { line-height: var(--lh-relaxed); }

/* Width constraints */
.tbox-narrow { max-width: var(--width-narrow); }
.tbox-narrow-sm { max-width: var(--width-narrow-sm); }
.tbox-narrow-md { max-width: var(--width-narrow-md); }
.tbox-center-narrow { max-width: var(--width-narrow-xs); margin-left: auto; margin-right: auto; }

.tbox-inline-icon {
  display: inline-block;
  width: 1.1em;
  height: 1.1em;
  vertical-align: -0.15em;
  margin-right: 0.3em;
}

/* ============================================
   Typography (site-wide)
   ============================================ */

/* Override legacy theme-wide `* { font-family: Hind; }` without breaking icon fonts. */
#header,
#content,
#footer,
#footer-copyright {
  font-family: var(--tbox-font-body);
}

#header *:not(.material-symbols-outlined),
#content *:not(.material-symbols-outlined),
#footer *:not(.material-symbols-outlined),
#footer-copyright *:not(.material-symbols-outlined) {
  font-family: inherit;
}

code,
pre,
kbd,
samp,
.tbox-mono {
  font-family: var(--tbox-font-mono);
}

.material-symbols-outlined,
:where(#header) .material-symbols-outlined,
:where(#content) .material-symbols-outlined,
:where(#footer) .material-symbols-outlined,
:where(#footer-copyright) .material-symbols-outlined {
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: var(--fw-normal);
  font-style: normal;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: var(--ls-normal);
  white-space: nowrap;
  overflow-wrap: normal;
  direction: ltr;
  font-variant-ligatures: contextual;
  font-feature-settings: "liga";
  -webkit-font-smoothing: antialiased;
}

.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;
}

.tbox-ahcalc-utility-btn .material-symbols-outlined {
  font-size: var(--fs-xl);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

.tbox-sa-rating-badge__stars .material-symbols-outlined,
:where(#hero-section .tbox-sa-rating-badge__stars .material-symbols-outlined) {
  font-size: var(--fs-lg);
  line-height: 1;
  color: var(--color-yellow);
  font-variation-settings: 'FILL' 1;
}

.tbox-quote .tbox-stars .material-symbols-outlined {
  font-variation-settings: 'FILL' 1;
  font-size: inherit;
}

/* Header/footer overrides where the legacy theme hard-codes Varela Round / Hind. */
:where(#header .tbox-header__phone-link),
:where(#header .tbox-header-chat-btn),
:where(#header ul.menu button),
#header ul.menu > li {
  font-family: var(--tbox-font-body);
}

/* ============================================
   Runtime Trial Modal (JLC)
   ============================================ */
#tbox-jlc-runtime-modal {
  position: fixed;
  inset: 0;
  z-index: 10050;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
  background: rgb(2 6 23 / 88%);
}

#tbox-jlc-runtime-modal[hidden] {
  display: none !important;
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-panel {
  position: relative;
  display: grid;
  gap: var(--space-md);
  width: min(560px, calc(100vw - 32px));
  background: var(--surface-base, #fff);
  border: 1px solid var(--border-mid, rgb(15 23 42 / 16%));
  border-radius: var(--radius-xl, 18px);
  padding: var(--space-xl) var(--space-lg-plus) 18px;
  box-shadow: var(--shadow-xl, 0 4px 12px var(--overlay-22));
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-close {
  position: absolute;
  right: 10px;
  top: 10px;
  border: 1px solid var(--border-light, rgb(15 23 42 / 16%));
  background: var(--surface-card, var(--surface-glass-92));
  font-size: var(--fs-2xl);
  line-height: 1;
  cursor: pointer;
  color: var(--text-primary, #0b2a4a);
  border-radius: var(--radius-md);
  width: 34px;
  height: 34px;
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-close:hover {
  background: var(--surface-base, #fff);
  border-color: rgb(15 23 42 / 28%);
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-close:focus-visible {
  outline: 3px solid var(--focus-ring, var(--focus-border));
  outline-offset: var(--focus-outline-offset);
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-kicker {
  margin: 0;
  font-size: var(--fs-xs);
  color: var(--text-muted, #667085);
  font-weight: var(--fw-semibold);
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-title {
  margin: 0;
  font-size: 1.875rem; /* between --fs-heading-md and --fs-heading-lg */
  line-height: 1.12;
  color: var(--text-primary, #0f172a);
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-copy {
  margin: 0;
  color: var(--text-secondary, #334155);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-form-slot {
  display: contents;
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-finefacts {
  margin: 0;
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
  display: grid;
  gap: var(--space-2xs);
  color: var(--text-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-finefacts__lead {
  margin: 0;
  color: inherit;
  font-weight: var(--fw-semibold);
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-finefacts__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-sm);
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-finefacts__list li {
  color: inherit;
  display: inline-flex;
  align-items: center;
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-finefacts__list li:not(:last-child)::after {
  content: "\00b7";
  margin-left: var(--space-sm);
  opacity: 0.6;
}

.tbox-offer-list li::before {
  content: "\2713";
  color: var(--brand-primary-text);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-normal);
  position: absolute;
  left: 0;
}

.tbox-offer-list--on-dark li::before {
  color: var(--tbox-hvps-success-500);
}

.tbox-offer-list--caution li::before {
  content: "\2192";
  color: var(--state-warning-text);
}

/* Paid services: a "+" marker so paid items don't scan as included-free */
.tbox-offer-list--paid li::before {
  content: "\002b";
}

/* Neutral lists (e.g. contact channels) where a checkmark carries no meaning */
.tbox-offer-list--plain li {
  padding-left: 0;
}

.tbox-offer-list--plain li::before {
  content: none;
}

.tbox-standard-features-grid--bento-cloud [data-bento-slot="infra"] .feature-list li::before {
  content: '→';
  position: absolute;
  left: 0;
  color: var(--brand-primary);
  font-size: var(--fs-xs);
}

#tbox-jlc-runtime-modal .tbox-runtime-jlc-note {
  margin: 0;
  color: var(--text-muted, #667085);
  font-size: var(--fs-xs);
}

.tbox-btn,
.tbox-btn-primary,
.tbox-btn[data-cta-tier="primary"],
.tbox-btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  background: var(--tbox-btn-primary-bg);
  color: var(--tbox-btn-ink, var(--text-inverse));
  padding: var(--btn-padding-y) var(--btn-padding-x);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  box-shadow: none;
  transition: background var(--ease-base), border-color var(--ease-base), box-shadow var(--ease-base), color var(--ease-base);
  text-decoration: none;
  border: 1px solid var(--tbox-btn-primary-border);
  cursor: pointer;
}

.tbox-cta-row .tbox-btn,
.tbox-cta-row a.btn {
  margin: 0;
}

/* Canonical outline CTA button (blueprint-safe). */
.tbox-btn-outline,
.tbox-btn.tbox-btn-outline,
.tbox-btn[data-cta-tier="secondary"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent !important;
  color: var(--tbox-btn-secondary-text);
  border: 1px solid var(--tbox-btn-outline-blue-border);
  font-weight: var(--fw-semibold);
  /* Match `.tbox-btn` vertical padding (--btn-padding-y) so accent + outline
     buttons paired in the same row render at identical height. */
  padding: var(--btn-padding-y) 1.75rem;
  font-size: var(--fs-lg);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: background var(--ease-base), border-color var(--ease-base), color var(--ease-base);
  box-shadow: none;
}

/* WCAG AA contrast scope on dark surfaces (PLAN_CRITIQUE_2 outline-button fix).
   The default translucent border collapses to ~2.7:1 on tinted-dark sections;
   --brand-primary now clears 5.86:1+ on protected dark surfaces. */
:is(.tbox-section--alt,
    .tbox-band--matrix,
    .tbox-band--route,
    .tbox-band--faq,
    .tbox-cta-section--blueprint,
    .tbox-cta-section,
    .tbox-fit-honesty) :is(.tbox-btn-outline, .tbox-btn.tbox-btn-outline) {
  color: var(--tbox-btn-secondary-text);
  border-color: var(--tbox-btn-outline-blue-border);
  background: transparent !important;
}

:is(
    #hero-section.tbox-hero-v3,
    .tbox-hero-v3,
    .tbox-section--dark,
    .tbox-cta-section.tbox-cta-section--blueprint,
    .tbox-trust-section--slim,
    .tbox-band--trust) :is(.tbox-btn-outline, .tbox-btn.tbox-btn-outline, .tbox-btn[data-cta-tier="secondary"]) {
  color: var(--tbox-btn-outline-text-dark);
  border-color: var(--tbox-btn-outline-blue-border);
}

:is(.tbox-section--alt,
    .tbox-band--matrix,
    .tbox-band--route,
    .tbox-band--faq,
    .tbox-cta-section--blueprint,
    .tbox-cta-section,
    .tbox-fit-honesty) :is(.tbox-btn-outline, .tbox-btn.tbox-btn-outline):hover,
:is(.tbox-section--alt,
    .tbox-band--matrix,
    .tbox-band--route,
    .tbox-band--faq,
    .tbox-cta-section--blueprint,
    .tbox-cta-section,
    .tbox-fit-honesty) :is(.tbox-btn-outline, .tbox-btn.tbox-btn-outline):focus-visible {
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent) !important;
}

.tbox-mobile-sticky-cta .tbox-btn,
.tbox-mobile-sticky-cta .tbox-btn-outline {
  width: 100%;
  max-width: none;
  padding: 0.8rem 0.9rem;
}

.tbox-cta-row .jlc-wrapper {
  margin: 0;
  max-width: var(--width-cta-action-max);
}

.tbox-btn:hover,
.tbox-btn-primary:hover,
.tbox-btn[data-cta-tier="primary"]:hover,
:where(.tbox-btn-secondary:hover) {
  background: var(--tbox-btn-primary-bg-hover);
  border-color: var(--tbox-btn-primary-border);
  box-shadow: none;
  color: var(--tbox-btn-primary-text-hover, var(--brand-cta-ink));
}

.tbox-btn:focus-visible,
.tbox-btn-primary:focus-visible,
:where(.tbox-btn-secondary:focus-visible) {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-btn:active,
:where(.tbox-btn-secondary:active) {
  transform: translateY(1px);
  box-shadow: 0 1px 2px var(--overlay-10);
}

.tbox-btn:disabled,
.tbox-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* ─── Shared bento CTA card base — used by both Cloud VPS and App Hosting bento grids ─── */
/* PLAN_CRITIQUE_2 Phase 1 — orange CTA contrast contract: ink resolves to
   --brand-cta-ink for ~7.4:1 against the orange fill (white was ~2.36:1). */
:is(.tbox-bento-cta-card, .tbox-card.tbox-bento-cta-card) {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-lg);
  border: none;
  color: var(--brand-cta-ink);
  padding: 1.5rem 2rem;
  transform: none;
  background: var(--brand-cta);
}

:is(.tbox-bento-cta-card, .tbox-card.tbox-bento-cta-card):hover {
  transform: none;
  box-shadow: 0 4px 10px var(--brand-cta-16);
}

:is(.tbox-bento-cta-card, .tbox-card.tbox-bento-cta-card):active {
  transform: none;
}

:is(.tbox-bento-cta-card, .tbox-card.tbox-bento-cta-card) > .tbox-btn {
  flex-shrink: 0;
  background: var(--text-inverse);
  color: var(--brand-cta-ink-strong);
  border-color: var(--text-inverse);
}

:is(.tbox-bento-cta-card, .tbox-card.tbox-bento-cta-card) > .tbox-btn:hover {
  background: var(--surface-glass-90);
}

/* Secondary (adjacent) button in bento CTA card — dark ink on the orange fill
   for AA contrast (PLAN_CRITIQUE_2 Phase 1 orange CTA contrast contract). */
:is(.tbox-bento-cta-card, .tbox-card.tbox-bento-cta-card) > .tbox-btn + .tbox-btn {
  background: transparent;
  color: var(--brand-cta-ink);
  border: 2px solid color-mix(in srgb, var(--brand-cta-ink) 60%, transparent);
  box-shadow: none;
}

:is(.tbox-bento-cta-card, .tbox-card.tbox-bento-cta-card) > .tbox-btn + .tbox-btn:hover {
  background: color-mix(in srgb, var(--brand-cta-ink) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand-cta-ink) 80%, transparent);
  box-shadow: none;
}

/* Shared CTA card typography — beats card grid heading rules at (0,1,2) */
.tbox-standard-features-grid .tbox-bento-cta-card :is(h3, h4) {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--brand-cta-ink);
}
#content .tbox-standard-features-grid .tbox-bento-cta-card p {
  margin: 0;
  font-size: var(--fs-base);
  color: color-mix(in srgb, var(--brand-cta-ink) 88%, transparent);
}

/* Same typography overrides for CTA card placed directly in topology grid or as a standalone card in a container */
:is(.tbox-topology-grid, .tbox-container) .tbox-bento-cta-card :is(h3, h4) {
  margin: 0 0 var(--space-xs);
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--brand-cta-ink);
}
#content :is(.tbox-topology-grid, .tbox-container) .tbox-bento-cta-card p {
  margin: 0;
  font-size: var(--fs-base);
  color: color-mix(in srgb, var(--brand-cta-ink) 88%, transparent);
}

/* Neutral CTA card variant for action panels that use bento CTA structure without the orange fill. */
.tbox-bento-cta-card.tbox-bento-cta-card--surface {
  border: 1px solid color-mix(in srgb, var(--border-light) 72%, var(--brand-cta) 28%);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  color: var(--text-primary);
  box-shadow: none;
}

.tbox-bento-cta-card.tbox-bento-cta-card--surface:hover {
  box-shadow: none;
}

#content .tbox-bento-cta-card.tbox-bento-cta-card--surface :is(h3, h4) {
  margin: 0 0 var(--space-xs);
  color: var(--text-primary);
}

#content .tbox-bento-cta-card.tbox-bento-cta-card--surface p {
  margin: 0;
  color: var(--text-secondary);
}

.tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn {
  background: var(--brand-cta);
  border-color: var(--brand-cta);
  color: var(--brand-cta-ink);
}

.tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn:hover {
  background: var(--brand-cta-hover);
  border-color: var(--brand-cta-hover);
}

.tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn + .tbox-btn {
  background: transparent;
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary-text);
}

.tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn + .tbox-btn:hover {
  background: var(--brand-primary-bg);
  border-color: var(--brand-primary-text);
  color: var(--brand-primary-text);
}

:root[data-theme="dark"] .tbox-bento-cta-card.tbox-bento-cta-card--surface {
  background: color-mix(in srgb, var(--surface-raised, var(--surface-base)) 94%, var(--brand-cta) 6%);
  border-color: color-mix(in srgb, var(--border-mid) 78%, var(--brand-cta) 22%);
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn + .tbox-btn {
  background: transparent;
  border-color: var(--brand-primary);
  color: var(--brand-primary-light);
}

:root[data-theme="dark"] .tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn + .tbox-btn:hover {
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  border-color: var(--brand-primary-light);
  color: var(--text-on-dark);
}

/* WordPress page — quiet the clustering callout so it does not out-shout the
   primary page CTA. Scoped to the #included section instance only. The
   #content #included prefix (two ids) is needed to beat the shared
   #content .tbox-card.tbox-bento-cta-card:not(--surface) orange-fill rules. */
#content #included .tbox-card.tbox-bento-cta-card {
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base));
  border: 1px solid var(--border-light);
  color: var(--text-primary);
  box-shadow: none;
}

#content #included .tbox-card.tbox-bento-cta-card:hover {
  box-shadow: none;
}

#content #included .tbox-card.tbox-bento-cta-card :is(h3, h4) {
  color: var(--text-primary);
}

#content #included .tbox-card.tbox-bento-cta-card p {
  color: var(--text-secondary);
}

#content #included .tbox-card.tbox-bento-cta-card > .tbox-btn {
  background: var(--brand-cta);
  border-color: var(--brand-cta);
  color: var(--brand-cta-ink);
}

#content #included .tbox-card.tbox-bento-cta-card > .tbox-btn:hover {
  background: var(--brand-cta-hover);
  border-color: var(--brand-cta-hover);
}

:root[data-theme="dark"] #content #included .tbox-card.tbox-bento-cta-card {
  background: color-mix(in srgb, var(--surface-raised, var(--surface-base)) 94%, var(--brand-primary) 6%);
  border-color: var(--border-mid);
}

#tbox-jlc-runtime-modal .jlc-wrapper {
  max-width: 100%;
  width: 100%;
  margin: 0;
}

#content .tbox-runtime-layout .tbox-topology-media .tbox-btn,
#content .tbox-runtime-layout .tbox-topology-media .jlc-wrapper {
	width: 100%;
	max-width: initial;
}


#tbox-jlc-runtime-modal .jlc-wrapper .jlc-cover {
  height: auto;
  min-height: 60px;
}


.jlc-wrapper.tbox-blue .jlc-cover .jlc-btn {
	background-color: var(--brand-primary);
}

#tbox-jlc-runtime-modal .jlc-wrapper .jlc-cover .jlc-btn {
  display: none !important;
}

#tbox-jlc-runtime-modal .jlc-wrapper .jlc-cover .jlc-form {
  display: block !important;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

:root[data-theme="dark"] .jlc-input-wrapper {
  background: var(--surface-glass-06);
  border-color: var(--border-mid);
}

#tbox-jlc-runtime-modal .jlc-wrapper .jlc-cover .jlc-input-wrapper {
  border: 1px solid var(--border-mid, rgb(15 23 42 / 16%));
  border-radius: var(--radius-12);
  overflow: hidden;
  background: var(--surface-base, #fff);
}

#tbox-jlc-runtime-modal .jlc-wrapper .jlc-cover .jlc-input {
  width: calc(100% - 70px);
  height: 58px;
  font-size: var(--fs-md);
  padding-left: 16px;
  padding-right: 16px;
}

#tbox-jlc-runtime-modal .jlc-wrapper .jlc-cover .jlc-input::placeholder {
  color: var(--text-muted, #7a8599);
}

#tbox-jlc-runtime-modal .jlc-wrapper .jlc-cover .jlc-sbmt {
  width: 70px;
  height: 58px;
}

#tbox-jlc-runtime-modal .jlc-wrapper .jlc-error {
  margin-top: var(--space-sm);
  font-size: var(--fs-sm);
}

@media (width <= 600px) {
  #tbox-jlc-runtime-modal .tbox-runtime-jlc-panel {
    padding: var(--space-lg-plus) var(--space-md-plus) var(--space-md-plus);
    gap: var(--space-md);
  }

  #tbox-jlc-runtime-modal .tbox-runtime-jlc-title {
    font-size: var(--fs-heading-md);
  }

  #tbox-jlc-runtime-modal .jlc-wrapper .jlc-cover .jlc-input {
    font-size: var(--fs-lg);
  }
}

body.tbox-runtime-jlc-open {
  overflow: hidden;
}

/* ============================================
   Promo announcement bar
   ============================================ */

.tbox-promo-bar {
  background: var(--brand-cta);
  color: var(--brand-cta-ink);
  text-align: center;
  padding: var(--space-sm-minus) 1rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  font-family: var(--tbox-font-body);
  line-height: var(--lh-normal);
  position: relative;
}

.tbox-promo-bar__inner {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs-plus);
  flex-wrap: wrap;
}

.tbox-promo-bar__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
}

:where(.tbox-hero-v3__subtitle em),
:where(.tbox-value-card em),
:where(.tbox-card__text em),
:where(.tbox-cta-section em),
:where(.tbox-ah-bento-hero__title em),
:where(.tbox-offer-list em),
:where(.tbox-stat-cell__desc em),
:where(.tbox-trust-section h2 em),
blockquote em {
  font-style: normal;
  color: var(--brand-highlight);
  font-weight: var(--fw-semibold);
}

.tbox-promo-bar__item em {
  font-style: normal;
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
}

.tbox-promo-bar__divider {
  margin: 0 0.3rem;
  opacity: 0.6;
}

.tbox-promo-bar__close {
  position: absolute;
  right: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--surface-glass-80);
  font-size: var(--fs-xl);
  cursor: pointer;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tbox-promo-bar__close:hover {
  color: var(--text-inverse);
}

.tbox-promo-bar--dismissed {
  display: none;
}

@media (width <= 600px) {
  .tbox-promo-bar {
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    font-size: var(--fs-base);
  }

  .tbox-promo-bar__divider {
    display: none;
  }

  .tbox-promo-bar__inner {
    flex-direction: column;
    gap: 0.15rem;
  }
}

/* ============================================
   Header (two-tier)
   ============================================ */

#header .tbox-header__utility {
  height: var(--header-utility-height);
  background: var(--surface-dark);
}

#header .tbox-header__main {
  height: var(--header-main-height);
  background: transparent;
  color: var(--brand-logo-gray);
}

/* Logo: support a dedicated light logo when available,
otherwise use a dark-mode filter fallback. */
#header .site-logo {
  display: inline-flex;
  align-items: center;
  min-height: var(--min-touch-target);
  gap: 0;
}

#header .site-logo .tbox-logo__img {
  display: block;
  max-width: 100%;
  height: auto;
}

#header .site-logo .tbox-logo__img--on-dark {
  display: none;
}

#header .tbox-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  width: 100%;
  height: 100%;
  padding-left: max(1.5rem, calc(50% - 700px));
  padding-right: max(1.5rem, calc(50% - 700px));
  box-sizing: border-box;
}

#header .tbox-utility-right {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-sm);
}

#header .tbox-utility-left {
  display: flex;
  align-items: center;
  flex: 1 1 auto;
  min-width: 0;
  padding-right: var(--space-sm);
}

.tbox-breadcrumbs {
  margin: 1rem 0 1.25rem;
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

#header .tbox-header__utility .tbox-breadcrumbs {
  margin: 0;
  min-width: 0;
  max-width: 100%;
  font-size: var(--fs-label);
  color: var(--surface-glass-72);
}

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

#header .tbox-header__utility .tbox-breadcrumbs > span {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#header .tbox-header__utility .tbox-breadcrumbs .breadcrumb_last {
  color: var(--surface-glass-72);
}

/* Theme control (Dark/Light) */
#header .tbox-theme-control {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: var(--radius-sm-plus);
  background: transparent;
  line-height: 1;
}

#header .tbox-theme-control__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm-plus);
  background: transparent;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1;
  cursor: pointer;
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast), box-shadow var(--ease-fast);
}

#header .tbox-theme-control__toggle:hover {
  background: var(--brand-primary-bg);
  border-color: var(--focus-ring);
  color: var(--text-primary);
}

#header .tbox-theme-control__toggle:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-strong);
  outline-offset: var(--focus-outline-offset);
}

#header .tbox-theme-control .material-symbols-outlined {
  display: inline-block;
  font-size: var(--fs-lg);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

#header .tbox-theme-control--utility {
  background: transparent;
}

#header .tbox-theme-control--utility .tbox-theme-control__toggle {
  border-color: var(--surface-glass-20);
  color: var(--surface-glass-75);
}

#header .tbox-theme-control--utility .tbox-theme-control__toggle:hover {
  background: var(--surface-glass-10);
  border-color: var(--surface-glass-40);
  color: var(--text-inverse);
}

#header .tbox-theme-control--utility .tbox-theme-control__toggle:focus-visible {
  outline-color: var(--focus-ring-on-dark);
}

	/* ============================================================
	 * Chat button — Variant C "agent card"
	 * Replaces both utility-bar (.tbox-chat-btn) and main-bar
	 * (.tbox-chat-btn--main) chat buttons with the Intercom/Drift
	 * agent-card pattern: pill surface + 30px avatar circle
	 * (reusing the icon node) + 2-line label. The status dot is
	 * a pseudo on the avatar so it stays anchored regardless of
	 * the button's padding (including the 44×44 mobile-compact state).
	 * ============================================================ */

	/* Header live-chat button — single main-bar variant, docked by the order CTA */
	#header .tbox-chat-btn--main {
	  align-items: center;
	  gap: 0.55rem;
	  height: auto;
	  flex-shrink: 0;
	  box-sizing: border-box;
	  padding: 0.35rem 0.85rem 0.35rem 0.35rem;
	  background: var(--surface-card);
	  border: 1px solid var(--border-light);
	  border-radius: var(--radius-md);
	  color: var(--text-primary);
	  box-shadow: var(--shadow-md);
	  font-size: var(--fs-sm);
	  font-weight: var(--fw-medium);
	  line-height: 1.15;
	  text-align: left;
	  text-decoration: none;
	  cursor: pointer;
	  position: relative;      /* anchor the sheen layer */
	  isolation: isolate;      /* contain the sheen blend to the button */
	  display: inline-flex;    /* always visible, docked next to the order CTA */
	  justify-content: center;
	  min-width: var(--min-touch-target);
	  min-height: var(--min-touch-target);
	  transition: box-shadow var(--ease-fast), border-color var(--ease-fast);
	}

	#header .tbox-chat-btn--main:hover {
	  border-color: var(--warm-3);
	  box-shadow: var(--shadow-lg);
	}

	#header .tbox-chat-btn--main:focus-visible {
	  outline: var(--focus-outline-width) solid var(--focus-ring-strong);
	  outline-offset: var(--focus-outline-offset);
	}

	/* Avatar — restyle the existing icon node into the gradient circle */
	#header .tbox-chat-btn--main > .material-symbols-outlined {
	  position: relative;
	  flex: 0 0 auto;
	  display: inline-flex;
	  align-items: center;
	  justify-content: center;
	  width: 30px;
	  height: 30px;
	  background: linear-gradient(135deg, var(--warm-1), var(--warm-4));
	  color: var(--text-inverse);
	  border-radius: 50%;
	  font-size: 18px;
	  line-height: 1;
	  font-variation-settings: "FILL" 1, "wght" 500, "GRAD" 0, "opsz" 20;
	}

	/* Status dot — anchored to the avatar so it survives the
	   mobile 44×44 padding-0 collapse. Hidden by default; only
	   visible when JS sets [data-livechat-status="online"]. */
	#header .tbox-chat-btn--main > .material-symbols-outlined::after {
	  content: "";
	  position: absolute;
	  top: -2px;
	  right: -2px;
	  display: none;
	  width: 9px;
	  height: 9px;
	  background: #22c55e;
	  border: 2px solid var(--surface-card);
	  border-radius: 50%;
	}

	#header .tbox-chat-btn--main[data-livechat-status="online"] > .material-symbols-outlined::after {
	  display: block;
	}

	#header .tbox-chat-btn--main .tbox-chat-btn__name {
	  font-size: var(--fs-sm);
	  font-weight: var(--fw-semibold);
	  color: var(--text-primary);
	  white-space: nowrap;
	}

	/* Short label — only used by the main-bar variant in the sticky state */
	#header .tbox-chat-btn--main .tbox-chat-btn__short {
	  display: none;
	  font-size: var(--fs-sm);
	  font-weight: var(--fw-semibold);
	  color: var(--text-primary);
	  white-space: nowrap;
	}

	/* Recurring sheen — a light streak sweeps across the pill about every
	   10s while an agent is online, drawing the eye to live chat without
	   moving the button. The streak is the pseudo-element's background,
	   clipped to the pill by border-radius (background-clip defaults to
	   border-box), so the status dot on the avatar is never clipped. */
	#header .tbox-chat-btn--main::before {
	  content: "";
	  position: absolute;
	  inset: 0;
	  z-index: 1;
	  border-radius: inherit;
	  pointer-events: none;
	  background: linear-gradient(
	    115deg,
	    transparent 42%,
	    rgb(255 255 255 / 55%) 50%,
	    transparent 58%
	  );
	  background-repeat: no-repeat;
	  background-size: 250% 100%;
	  background-position: 220% 0;   /* parked off-right: invisible at rest */
	  mix-blend-mode: plus-lighter;
	}

	@media (prefers-reduced-motion: no-preference) {
	  #header .tbox-chat-btn--main[data-livechat-status="online"]::before {
	    animation: tbox-chat-sheen 10s var(--tbox-ease-out-quart, cubic-bezier(0.25, 1, 0.5, 1)) infinite;
	  }
	}

	@keyframes tbox-chat-sheen {
	  0%   { background-position: -160% 0; }   /* enter from off-left */
	  9%   { background-position: 220% 0; }    /* exit off-right (~0.9s sweep) */
	  100% { background-position: 220% 0; }    /* parked ~9s, then repeat */
	}

	/* Mobile — collapse to avatar-only on the main-bar variant. */
	@media only screen and (width <= 1179px) {
	  #header .tbox-chat-btn--main {
	    padding: 0.2rem;
	    gap: 0;
	  }

	  #header .tbox-chat-btn--main .tbox-chat-btn__label,
	  #header.scrolled .tbox-chat-btn--main .tbox-chat-btn__short {
	    display: none;
	  }
	}

/* Main header control: show only when utility bar is hidden or in compact header mode. */
#header .tbox-theme-control--main {
  display: none;
}

#header.scrolled .tbox-theme-control--main,
#header[data-header-mode="compact"] .tbox-theme-control--main {
  display: inline-flex;
}

@media only screen and (width <= 767px) {
  #header .tbox-theme-control--main {
    display: none !important;
  }
}

#header .tbox-utility-menu {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0;
  margin: 0;
  list-style: none;
}

#header .tbox-utility-divider {
  width: 1px;
  height: 16px;
  background: var(--surface-glass-20);
  margin: 0 0.35rem;
}

#header .tbox-utility-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-xs-plus) var(--space-sm-plus);
  min-height: var(--min-touch-target);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--surface-glass-75);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  line-height: 1;
  transition: background var(--ease-fast), color var(--ease-fast);
}

#header .tbox-utility-link .material-symbols-outlined {
  font-size: var(--fs-lg);
  line-height: 1;
  font-variation-settings: "FILL" 0, "wght" 400, "GRAD" 0, "opsz" 20;
}

#header .tbox-utility-link:hover {
  color: var(--text-inverse);
  background: var(--surface-glass-10);
}

#header .tbox-utility-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-on-dark);
  outline-offset: var(--focus-outline-offset);
}

#header .tbox-utility-login {
  display: inline-flex;
  align-items: center;
  min-height: 1.65rem;
  padding: var(--space-2xs) var(--space-sm-plus);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-inverse);
  text-decoration: none;
  background: var(--surface-glass-08);
  border: 1px solid var(--surface-glass-30);
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast);
}

#header .tbox-utility-login:hover {
  color: var(--text-inverse);
  background: var(--surface-glass-16);
  border-color: var(--surface-glass-40);
}

#header .tbox-utility-login:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-on-dark);
  outline-offset: var(--focus-outline-offset);
}

/* Utility menu dropdown behavior
   NOTE: Utility nav does NOT use the legacy `.menu` class (per plan), so we must provide
   the hide/show + positioning rules that `#header ul.menu li ul` would normally cover. */

#header .tbox-utility-menu li > .sub-menu {
  display: none;
  position: absolute;
  top: calc(100% + 0.25rem);
  left: 0;
  z-index: var(--z-header-dropdown);
  font-size: var(--fs-label); /* match utility menubar text size */
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: opacity var(--ease-base), transform var(--ease-base), visibility 0.2s;
}

/* Touch devices: disable hover-open,
require explicit `.tbox-nav__item--submenu-open` */
#header .tbox-utility-menu .sub-menu > li > .sub-menu {
  top: 0;
  left: 100%;
}

:where(.tbox-env--touch #header .tbox-utility-menu li:hover > .sub-menu) {
  display: none;
  opacity: 0;
  visibility: hidden;
}

:where(.tbox-env--touch #header .tbox-utility-menu li.tbox-nav__item--submenu-open > .sub-menu) {
  display: block;
  opacity: 1;
  visibility: visible;
}

/* Nested submenu positioning (Data Centers → …) */

#header .tbox-utility-menu .sub-menu.submenu-flip-left {
  right: 100%;
  left: auto;
}

#header .tbox-header__main #main-navigation {
  flex: 1 1 auto;
  min-width: 0;
}

@media only screen and (width <= 1179px) {
  #header .site-logo {
    flex: 0 0 auto;
    width: clamp(7rem, 32vw, 8.75rem);
  }

  #header .site-logo .tbox-logo__img {
    width: 100%;
  }
}

/* Submenu items in main nav: keep label + caret on one line.
   Exclude the App Hosting mega-menu columns (`.tbox-nav__item--mega-col`) which intentionally use a different layout. */
#header #menu-header-menu-2022 ul.sub-menu > li.menu-item-has-children:not(.tbox-nav__item--mega-col) {
  flex-wrap: nowrap;
}

#header #menu-header-menu-2022 ul.sub-menu > li.menu-item-has-children:not(.tbox-nav__item--mega-col) > a,
#header #menu-header-menu-2022 ul.sub-menu > li.menu-item-has-children:not(.tbox-nav__item--mega-col) > button:not(.tbox-nav__submenu-toggle) {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

#header .tbox-header__main #menu-header-menu-2022 {
  justify-content: flex-start;
  justify-self: auto;
}

@media only screen and (width >= 1180px) {
  /* Center the primary nav items while keeping the "Order" CTA pinned to the right. */
  #header .tbox-header__main #menu-header-menu-2022 {
    justify-content: center;
    position: relative;

    /* Default reserve prevents first-paint overlap before JS measures the CTA width. */
    padding-right: var(--tbox-header-cta-space, 140px);
  }

  #header .tbox-header__main #menu-header-menu-2022 > li:not(.tbox-nav__item--cta) > a,
  #header .tbox-header__main #menu-header-menu-2022 > li:not(.tbox-nav__item--cta) > button:not(.tbox-nav__submenu-toggle) {
    font-size: var(--fs-md);
  }

  #header .tbox-header__main #menu-header-menu-2022 > li.tbox-nav__item--cta {
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    display: flex;
    align-items: center;
    margin-left: 0;
    /* Variant B: grow the chip to a 48px pill, height-aligned with the chat pill. */
    --tbox-nav__item--cta-chip-height: 48px;
  }

  /* Variant B "Order now" — bold solid CTA: squared-off rounded corners that
     match the canonical button radius, a soft warm glow, and a touch more
     horizontal breathing room so the label/caret clear the curve. */
  #header .tbox-header__main #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children > button:not(.tbox-nav__submenu-toggle)::before {
    border-radius: var(--radius-md);
    box-shadow: 0 6px 18px var(--brand-cta-30);
  }

  #header .tbox-header__main #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children > button:not(.tbox-nav__submenu-toggle):hover::before {
    box-shadow: 0 8px 22px var(--brand-cta-35);
  }

  #header .tbox-header__main #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children .tbox-nav__cta-label {
    padding-left: 1.15rem;
  }

  #header .tbox-header__main #menu-header-menu-2022 > li.tbox-nav__item--cta.menu-item-has-children > button:not(.tbox-nav__submenu-toggle) .tbox-nav__submenu-toggle-chip {
    padding-right: 0.85rem;
  }

  /* Height-align the chat pill with the taller Order CTA. */
  #header .tbox-chat-btn--main {
    min-height: 48px;
  }

  /* Tighten the visual gap between the label and the caret when the caret is a separate control. */
  #header .tbox-header__main #menu-header-menu-2022
    > li.menu-item-has-children:not(.tbox-nav__item--cta)
    > button.tbox-nav__submenu-toggle {
    margin-left: -0.95rem;
  }

  #header .tbox-header__main #menu-header-menu-2022 > li:not(.tbox-nav__item--cta) {
    transform: translateX(var(--tbox-header-nav-offset, 0));
  }
}

#header.scrolled .tbox-promo-bar,
#header.scrolled .tbox-header__utility {
  display: none;
}

#header.scrolled .tbox-header__main {
  height: var(--header-height-scrolled);
}

@media only screen and (width <= 1179px) {
  #header {
    --header-height: var(--header-main-height);
  }

  #header .tbox-header__utility {
    display: none;
  }
}

/* ============================================
   Base colors (site-wide)
   ============================================ */

/* Theme uses these for body copy via semantic text elements. */
/* stylelint-disable-next-line no-descending-specificity */
:where(#content) :is(p, li, dd) {
  color: var(--text-secondary);
}

/* Ensure hero copy remains readable on dark hero backgrounds (including legacy hero sections). */

/* Hero body copy should not inherit site-wide #content paragraph color tokens. */
/* stylelint-disable-next-line no-descending-specificity -- hero body copy must override broad content paragraph rules */
#hero-section.tbox-hero-v3 p {
  color: var(--text-on-dark-soft);
}

/* Keep existing theme behavior: hero H1 is stronger. */
#hero-section h1 {
  color: var(--text-inverse);
}

/* Global section heading accent bar — centered by default */
/* stylelint-disable no-descending-specificity -- scoped to different components than CTA/footer h2 */
section > h2,
section > .tbox-container > h2 {
  text-align: center;
  padding-bottom: var(--space-md);
  margin-bottom: var(--space-lg-plus);
  position: relative;
}
/* stylelint-enable no-descending-specificity */

:where(.tbox-faq-section > h2::after) {
  left: 50%;
  transform: translateX(-50%);
}

section > h2::after,
section > .tbox-container > h2::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  border-radius: var(--radius-xs);
  background: var(--brand-primary);
}

/* FAQ section heading — always centered */

/* Accent bar on dark sections (white headings) */

/* ============================================
   Buttons (global component)
   ============================================ */

.tbox-btn svg,
.tbox-btn-outline svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Tertiary "Chat with an engineer" CTA — decoupled from primary tokens so the
   sweep-to-filled-gradient pass on primary buttons does not flip this tier
   too. Keeps the prior warm-outline + dark-ink treatment. */
.tbox-btn-secondary,
.tbox-btn.tbox-btn-secondary {
  background: transparent;
  border-color: var(--warm-3);
  color: var(--neutral-7);
  box-shadow: 0 2px 6px rgb(4 115 169 / 14%);
}

:where(.tbox-btn-secondary:hover),
.tbox-btn.tbox-btn-secondary:hover {
  background: var(--warm-3);
  border-color: var(--warm-3);
  color: var(--brand-cta-ink);
  box-shadow: 0 4px 12px rgb(4 115 169 / 18%);
}

/* Secondary (tertiary-tier) button on dark bands: the light-surface dark ink
   above is unreadable on the blueprint/dark sections, so swap to the same
   on-dark ink the outline tier uses and drop the colored glow. */
:is(.tbox-hero-v3, .tbox-section--dark, .tbox-cta-section.tbox-cta-section--blueprint) .tbox-btn-secondary,
:is(.tbox-hero-v3, .tbox-section--dark, .tbox-cta-section.tbox-cta-section--blueprint) .tbox-btn.tbox-btn-secondary {
  color: var(--tbox-btn-outline-text-dark);
  box-shadow: none;
}

:is(.tbox-hero-v3, .tbox-section--dark, .tbox-cta-section.tbox-cta-section--blueprint) .tbox-btn-secondary:hover,
:is(.tbox-hero-v3, .tbox-section--dark, .tbox-cta-section.tbox-cta-section--blueprint) .tbox-btn.tbox-btn-secondary:hover {
  color: var(--brand-cta-ink);
}

.tbox-btn-accent,
.tbox-btn.tbox-btn-accent {
  background: var(--tbox-btn-accent-bg);
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text);
}

.tbox-btn-accent:hover,
.tbox-btn.tbox-btn-accent:hover {
  background: var(--tbox-btn-accent-bg-hover);
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text-hover, var(--brand-cta-ink));
  box-shadow: none;
}

.tbox-btn-accent-outline,
.tbox-btn.tbox-btn-accent-outline {
  background: var(--tbox-btn-accent-bg);
  border: 1px solid var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text);
  box-shadow: none;
}

.tbox-btn-accent-outline:hover,
.tbox-btn.tbox-btn-accent-outline:hover {
  background: var(--tbox-btn-accent-bg-hover);
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text-hover, var(--brand-cta-ink));
  box-shadow: none;
}

.tbox-btn-accent:focus-visible,
.tbox-btn.tbox-btn-accent:focus-visible,
.tbox-btn-accent-outline:focus-visible,
.tbox-btn.tbox-btn-accent-outline:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-btn-outline:hover,
.tbox-btn.tbox-btn-outline:hover,
.tbox-btn[data-cta-tier="secondary"]:hover {
  background: var(--brand-primary-14) !important;
  border-color: var(--tbox-btn-outline-blue-border);
  color: var(--tbox-btn-secondary-text);
  box-shadow: none;
}

.tbox-btn-outline:focus-visible,
.tbox-btn.tbox-btn-outline:focus-visible,
.tbox-btn[data-cta-tier="secondary"]:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-btn-outline:active,
.tbox-btn.tbox-btn-outline:active,
.tbox-btn[data-cta-tier="secondary"]:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Outline button on light section backgrounds — swap to dark text/border. */
.tbox-section .tbox-btn-outline,
.tbox-section .tbox-btn.tbox-btn-outline {
  color: var(--tbox-btn-secondary-text);
  border-color: var(--tbox-btn-outline-blue-border);
}

.tbox-section .tbox-btn-outline:hover,
.tbox-section .tbox-btn.tbox-btn-outline:hover {
  background: var(--brand-primary-bg) !important;
  border-color: var(--tbox-btn-outline-blue-border);
  color: var(--tbox-btn-secondary-text);
}

/* stylelint-disable no-descending-specificity */
.tbox-section--dark .tbox-btn-outline,
.tbox-section--dark .tbox-btn.tbox-btn-outline,
.tbox-section--dark .tbox-btn[data-cta-tier="secondary"] {
  color: var(--tbox-btn-outline-text-dark);
  border-color: var(--tbox-btn-outline-blue-border);
}

.tbox-section--dark .tbox-btn-outline:hover,
.tbox-section--dark .tbox-btn.tbox-btn-outline:hover,
.tbox-section--dark .tbox-btn[data-cta-tier="secondary"]:hover {
  background: var(--brand-primary-14) !important;
  border-color: var(--tbox-btn-outline-blue-border);
  color: var(--tbox-btn-outline-text-dark);
}
/* stylelint-enable no-descending-specificity */

/* Ghost button — transparent,
for use on light backgrounds. */
.tbox-btn-ghost,
.tbox-btn.tbox-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--brand-primary-text);
  border: 1.5px solid var(--border-mid);
  box-shadow: none;
}

.tbox-btn-ghost:hover,
.tbox-btn.tbox-btn-ghost:hover {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
  background: var(--brand-primary-bg);
  box-shadow: none;
}

.tbox-btn-ghost:focus-visible,
.tbox-btn.tbox-btn-ghost:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-btn-ghost:active,
.tbox-btn.tbox-btn-ghost:active {
  transform: translateY(1px);
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-btn-outline,
:root[data-theme="dark"] .tbox-btn.tbox-btn-outline,
:root[data-theme="dark"] .tbox-btn[data-cta-tier="secondary"] {
  color: var(--tbox-btn-outline-text-dark);
  border-color: var(--tbox-btn-outline-blue-border);
  background: transparent !important;
}

:root[data-theme="dark"] .tbox-btn-outline:hover,
:root[data-theme="dark"] .tbox-btn.tbox-btn-outline:hover,
:root[data-theme="dark"] .tbox-btn[data-cta-tier="secondary"]:hover {
  background: var(--brand-primary-14) !important;
  border-color: var(--tbox-btn-outline-blue-border);
  color: var(--tbox-btn-outline-text-dark);
}

#hero-section.tbox-hero-v3 :is(.tbox-btn-outline, .tbox-btn.tbox-btn-outline, .tbox-btn[data-cta-tier="secondary"]) {
  color: var(--tbox-btn-outline-text-dark);
  border-color: var(--tbox-btn-outline-blue-border);
}

#hero-section.tbox-hero-v3 :is(.tbox-btn-outline, .tbox-btn.tbox-btn-outline, .tbox-btn[data-cta-tier="secondary"]):hover {
  background: color-mix(in srgb, var(--text-inverse) 12%, transparent) !important;
  border-color: var(--tbox-btn-outline-blue-border);
  color: var(--tbox-btn-outline-text-dark);
}

:root[data-theme="dark"] .tbox-btn-ghost,
:root[data-theme="dark"] .tbox-btn.tbox-btn-ghost {
  color: var(--text-on-dark);
  border-color: var(--surface-glass-30);
  background: var(--surface-glass-06);
}

:root[data-theme="dark"] .tbox-btn-ghost:hover,
:root[data-theme="dark"] .tbox-btn.tbox-btn-ghost:hover {
  color: var(--text-inverse);
  border-color: var(--surface-glass-55);
  background: var(--surface-glass-12);
}

/* On-dark button — orange CTA for use on dark/coloured section backgrounds.
   Ink uses --brand-cta-ink (~7.4:1 on --brand-cta) per the PLAN_CRITIQUE_2
   Phase 1 orange CTA contrast contract. */
.tbox-btn-on-dark,
.tbox-btn.tbox-btn-on-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tbox-btn-accent-bg);
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text);
}

.tbox-btn-on-dark:hover,
.tbox-btn.tbox-btn-on-dark:hover {
  background: var(--tbox-btn-accent-bg-hover);
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text-hover, var(--brand-cta-ink));
  box-shadow: none;
}

.tbox-btn-on-dark:focus-visible,
.tbox-btn.tbox-btn-on-dark:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-btn-on-dark:active,
.tbox-btn.tbox-btn-on-dark:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Outline-dark button — transparent with neutral text and blue border. */
.tbox-btn-outline-dark,
.tbox-btn.tbox-btn-outline-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: var(--tbox-btn-outline-text-dark);
  border: 1px solid var(--tbox-btn-outline-blue-border);
  box-shadow: none;
}

.tbox-btn-outline-dark:hover,
.tbox-btn.tbox-btn-outline-dark:hover {
  background: var(--surface-glass-10);
  border-color: var(--tbox-btn-outline-blue-border);
  color: var(--tbox-btn-outline-text-dark);
  box-shadow: none;
}
.tbox-btn-outline-dark:focus-visible,
.tbox-btn.tbox-btn-outline-dark:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-btn-outline-dark:active,
.tbox-btn.tbox-btn-outline-dark:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Ghost-dark button — frosted white appearance,
for dark section backgrounds. */
.tbox-btn-ghost-dark,
.tbox-btn.tbox-btn-ghost-dark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-glass-08);
  color: var(--surface-glass-90);
  border: 1.5px solid var(--surface-glass-20);
  box-shadow: none;
}

.tbox-btn-ghost-dark:hover,
.tbox-btn.tbox-btn-ghost-dark:hover {
  background: var(--surface-glass-14);
  border-color: var(--surface-glass-35);
  color: var(--text-inverse);
  box-shadow: none;
}

.tbox-btn-ghost-dark:focus-visible,
.tbox-btn.tbox-btn-ghost-dark:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-btn-ghost-dark:active,
.tbox-btn.tbox-btn-ghost-dark:active {
  transform: translateY(1px);
  box-shadow: none;
}

/* Legacy .tbox-product-cards,
.tbox-card--offer,
.tbox-card-bullets removed — unused */

@media (prefers-reduced-motion: reduce) {
  .tbox-btn:active, :where(.tbox-btn-secondary:active),
  .tbox-btn-outline:active, .tbox-btn.tbox-btn-outline:active,
  .tbox-btn-ghost:active, .tbox-btn.tbox-btn-ghost:active,
  .tbox-btn-on-dark:active, .tbox-btn.tbox-btn-on-dark:active,
  .tbox-btn-outline-dark:active, .tbox-btn.tbox-btn-outline-dark:active,
  .tbox-btn-ghost-dark:active, .tbox-btn.tbox-btn-ghost-dark:active {
    transform: none;
  }
}

/* ============================================
   Dead legacy homepage CSS removed (tbox-hero-trust-badges, tbox-home-grid,
   tbox-proof-bar, tbox-proof-columns, tbox-home-action-secondary, tbox-text-link, etc.)
   ============================================ */

.tbox-promo-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-2xl);
}

.tbox-branding-badges {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-2xl);
}

.tbox-branding-badges img {
  max-width: 300px;
  width: 100%;
  height: auto;
}

.tbox-branding-powered {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto 1fr;
  gap: var(--space-2xl);
}

@media (width <= 600px) {
  .tbox-branding-badges {
    grid-template-columns: 1fr;
    row-gap: var(--space-xl);
  }

  .tbox-branding-powered {
    grid-template-columns: 1fr;
  }
}

.tbox-contact-grid,
.tbox-standard-features-grid--split,
.tbox-standard-features-grid--content-split {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  column-gap: var(--space-2xl);
}

.tbox-content-grid,
.tbox-standard-features-grid--split,
.tbox-standard-features-grid--content-split,
.tbox-standard-features-grid--case-study {
  display: grid;
  gap: var(--space-2xl);
}

.tbox-content-grid--split,
.tbox-standard-features-grid--split,
.tbox-standard-features-grid--content-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  grid-auto-rows: auto;
}

.tbox-content-card,
.tbox-card--content {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-xl);
  /* Long-form prose: single-column block layout, no overflow clip.
     Overrides the bento `.tbox-standard-features-grid > *` contract that
     applies `grid-column: span 4; overflow: hidden;` to grid children. */
  display: block;
  overflow: visible;
}

/* Specificity boost so the base block-layout rule wins against the bento
   parent contract (`.tbox-standard-features-grid > *` at 0,1,1) on routes
   like /case-studies/ that nest a content card inside a features grid. */
.tbox-standard-features-grid > .tbox-content-card,
.tbox-standard-features-grid > .tbox-card--content {
  display: block;
  overflow: visible;
  grid-column: 1 / -1;
}

.tbox-content-card > :first-child,
.tbox-card--content > :first-child {
  margin-top: 0;
}

@media (width <= 900px) {
  .tbox-content-grid--split,
.tbox-standard-features-grid--split,
.tbox-standard-features-grid--content-split {
    grid-template-columns: 1fr;
  }
}

.tbox-mobile-app-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: auto;
  column-gap: var(--space-2xl);
}

@media (width <= 600px) {

.tbox-promo-grid {
    grid-template-columns: 1fr;
    row-gap: var(--space-xl);
  }
}

/* ============================================
   Migrated components (from style.css)
   PLAN_CSS_REFACTOR Phase 3
   ============================================ */

/*
 * Pricing Section (legacy class-driven component)
 */
.tbox-pricing-grid {
	grid-template-areas: "a"
						 "b"
						 "c";
	grid-template-columns: auto;
	grid-template-rows: auto;
}

.tbox-data-table {
  width: 100%;
  border-collapse: collapse;
}

.tbox-pricing-table {
	border-collapse: collapse;
	border: none;
	width: 100%;
}

.tbox-pricing-table tr {
	border: none;
}

:where(.tbox-pricing-table th),
:where(.tbox-pricing-table td) {
	padding: var(--space-md) var(--space-xl);
	border: none;
	white-space: nowrap;
  text-align: center;
}

:where(.tbox-pricing-table th) {
	font-size: var(--fs-lg);
	font-weight: var(--fw-bold);
	white-space: nowrap;
}

:where(.tbox-compare-table th),
:where(.tbox-compare-table td) {
  padding: 0.62rem 0.68rem;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

/* ── Common Scenarios comparison table — autoscaling page ── */
.tbox-scenario-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}
.tbox-scenario-table {
  width: 100%;
  border-collapse: collapse;
}
:where(.tbox-scenario-table) th {
  padding: 11px 16px;
  text-align: left;
  font-size: var(--fs-label);
  font-weight: 600;
  letter-spacing: var(--ls-normal);
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-mid);
  white-space: nowrap;
}
:where(.tbox-scenario-table) thead { background: var(--surface-base); }
:where(.tbox-scenario-table) td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: 1.45;
}
:where(.tbox-scenario-table__category) td {
  padding: 8px 16px 6px;
  background: var(--surface-subtle);
  font-size: var(--fs-label);
  font-weight: 700;
  color: var(--text-tertiary);
  border-bottom: 1px solid var(--border-light);
}
:where(.tbox-scenario-table td:first-child) { font-weight: 600; color: var(--text-primary); white-space: nowrap; }
:where(.tbox-scenario-table tbody tr:last-child td) { border-bottom: none; }
:where(.tbox-scenario-table tbody tr:hover td) { background: var(--surface-subtle); }
.tbox-scenario-table__link {
  color: var(--brand-primary);
  text-decoration: none;
  font-size: var(--fs-label);
  white-space: nowrap;
}
.tbox-scenario-table__link:hover { text-decoration: underline; }
.tbox-scale-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-label);
  font-weight: 600;
  white-space: nowrap;
}
.tbox-scale-badge--v { color: var(--brand-primary-text); }
:root[data-theme="dark"] .tbox-scale-badge--v { color: var(--brand-primary); }
.tbox-scale-badge--vh { color: hsl(210 80% 45%); }
:root[data-theme="dark"] .tbox-scale-badge--vh { color: hsl(210 80% 65%); }
.tbox-idle-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-label);
  font-weight: 600;
  color: hsl(142 50% 38%);
}
:root[data-theme="dark"] .tbox-idle-badge { color: hsl(142 60% 55%); }

: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-ahcalc-comparison-table th),
:where(.tbox-ahcalc-comparison-table td),
: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-ahcalc-vol-table tbody td) {
  padding: var(--space-sm-minus) var(--space-sm-mid);
  border-bottom: 1px solid var(--border-light, var(--ahcalc-slate-200));
  font-family: var(--ahcalc-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-data);
  color: var(--text-secondary, var(--ahcalc-slate-600));
}

: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-ahcalc-vol-table thead th) {
  text-align: left;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  color: var(--text-disabled, var(--gray-400));
  padding: var(--space-sm-minus) var(--space-sm-mid);
  border-bottom: 2px solid var(--border-light, var(--ahcalc-slate-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-ahcalc-comparison-table th:first-child),
:where(.tbox-comparison-table th:first-child) {
  border-top-left-radius: var(--radius-12);
}

:where(.tbox-ahcalc-comparison-table th:last-child),
: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;
}
.tbox-ahcalc-vol-table thead th:not(:first-child) { text-align: right; }

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

.tbox-pricing-table tr:nth-child(2) th:nth-child(3),
:where(.tbox-pricing-table td:nth-child(3)) {
	padding-right: var(--space-sm);
}

.tbox-pricing-table tr:nth-child(2) th:nth-child(4),
:where(.tbox-pricing-table td:nth-child(4)) {
	padding-left: var(--space-sm);
}

:where(.tbox-pricing-table .hour-avg-col td) {
	padding-left: var(--space-sm);
}

:where(.tbox-pricing-table tr td:first-child) {
	padding-right: var(--space-lg);
	font-weight: var(--fw-bold);
	text-align: right;
}

.tbox-pricing-table .empty {
	background: none !important;
	background-color: transparent !important;
}

/* remove borders from empty top-left table cells */
.tbox-pricing-table tr:first-child th:first-child {
	border-top: none;
	border-left: none;
	border-bottom: none;
}

.tbox-pricing-table tr:nth-child(2) th:first-child {
	border-top: none;
	border-left: none;
	border-right: none;
}

.tbox-pricing-table tr:nth-child(2) th:nth-child(2) {
	border-top: none;
	border-left: none;
}

/* row background colors */
:where(.tbox-pricing-table tbody tr:nth-child(odd)) {
	background: var(--surface-pricing-table-zebra);
}

/* Add-on pricing card grid (addons page).
   Sub-token rem values below are intentional: spacing baked from the accepted
   compact density (0.6) rather than snapped to the --space-* scale. */
.tbox-cloud-addons .tbox-addon-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
	gap: var(--space-sm-plus);
	margin-top: var(--space-lg);
}

.tbox-cloud-addons__guide {
	margin-top: var(--space-sm);
	max-width: var(--prose-measure-default);
	color: var(--text-secondary);
}

.tbox-cloud-addons .tbox-addon-cards__cat {
	grid-column: 1 / -1;
	margin: 0.72rem 0 0.12rem;
	padding-bottom: 0.24rem;
	font-family: var(--ff-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-sm);
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--brand-primary-dark);
	border-bottom: 2px solid color-mix(in srgb, var(--brand-primary) 26%, transparent);
}

.tbox-cloud-addons .tbox-addon-cards__cat:first-child {
	margin-top: 0;
}

.tbox-cloud-addons .tbox-addon-cards__card {
	display: flex;
	flex-direction: column;
	gap: 0.21rem;
	padding: 0.66rem 0.69rem;
	background: var(--surface-base);
	border: 1px solid var(--border-light);
	border-radius: var(--radius-12);
	box-shadow: var(--shadow-sm);
	transition: box-shadow var(--duration-base) ease, transform var(--duration-base) ease;
}

.tbox-cloud-addons .tbox-addon-cards__card:hover {
	box-shadow: var(--shadow-card-hover);
	transform: translateY(-2px);
}

.tbox-cloud-addons .tbox-addon-cards__name {
	font-weight: var(--fw-medium);
	line-height: var(--lh-snug);
	color: var(--text-primary);
}

.tbox-cloud-addons .tbox-addon-cards__name a {
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-decoration-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
	text-underline-offset: 0.16em;
}

.tbox-cloud-addons .tbox-addon-cards__name a:hover,
.tbox-cloud-addons .tbox-addon-cards__name a:focus-visible {
	color: var(--brand-primary-dark);
	text-decoration-color: currentcolor;
}

.tbox-cloud-addons .tbox-addon-cards__desc {
	font-size: var(--fs-xs);
	line-height: var(--lh-snug);
	color: var(--text-secondary);
}

.tbox-cloud-addons .tbox-addon-cards__from {
	font-family: var(--tbox-font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-normal);
	color: var(--text-muted);
}

.tbox-cloud-addons .tbox-addon-cards__price {
	margin-top: auto;
	font-family: var(--ff-display);
	font-weight: var(--fw-bold);
	font-size: 1.65rem;
	font-variant-numeric: tabular-nums;
	color: var(--text-primary);
}

.tbox-cloud-addons .tbox-addon-cards__per {
	font-family: var(--tbox-font-body);
	font-size: var(--fs-xs);
	font-weight: var(--fw-normal);
	color: var(--text-muted);
}

.tbox-cloud-addons .tbox-addon-cards__cta {
	display: inline-block;
	margin-top: 0.36rem;
	padding: 0.3rem 0.6rem;
	border-radius: var(--radius-cap);
	background: var(--brand-cta);
	color: var(--brand-cta-ink);
	font-weight: var(--fw-semibold);
	font-size: var(--fs-sm);
	text-align: center;
	text-decoration: none;
	transition: background var(--duration-base) ease;
}

.tbox-cloud-addons .tbox-addon-cards__cta:hover,
.tbox-cloud-addons .tbox-addon-cards__cta:focus-visible {
	background: var(--brand-cta-hover);
}

@media (pointer: coarse), (width <= 600px) {
	.tbox-cloud-addons .tbox-addon-cards__cta {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: var(--min-touch-target);
	}
}

@media (prefers-reduced-motion: reduce) {
	.tbox-cloud-addons .tbox-addon-cards__card,
	.tbox-cloud-addons .tbox-addon-cards__card::before,
	.tbox-cloud-addons .tbox-addon-cards__card::after,
	.tbox-cloud-addons .tbox-addon-cards__cta,
	.tbox-cloud-addons .tbox-addon-cards__cta::before,
	.tbox-cloud-addons .tbox-addon-cards__cta::after {
		transition: none;
	}
}

:where(.tbox-pricing-section.tbox-pricing-section--table-layout table td) {
    padding: var(--space-lg);
}

: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-ahcalc-comparison-table tr.highlight td),
:where(.tbox-comparison-table tr.highlight td) {
  color: var(--ahcalc-slate-900);
  font-weight: var(--fw-medium);
}

:where(.tbox-ahcalc-vol-table tbody td:first-child) {
  font-family: var(--ahcalc-font);
  color: var(--text-primary, var(--ahcalc-slate-900));
  font-weight: var(--fw-medium);
}
:where(.tbox-ahcalc-vol-table tbody td:not(:first-child)) { text-align: right; }

: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(.tbox-ahcalc-vol-table tbody tr:last-child td) { border-bottom: none; }

: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-ahcalc-comparison-table tr.highlight td,
: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-ahcalc-comparison-table td,
:root[data-theme="dark"] .tbox-comparison-table td {
  color: var(--text-secondary);
  border-bottom-color: var(--border-light);
}

.tbox-pricing-table tr:nth-child(even) td:first-child {
	background: var(--surface-pricing-table-label);
}

.tbox-pricing-section.tbox-pricing-section--table-layout table td:first-child {
    padding-right: var(--space-2xl);
}

.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);
}

:where(.tbox-pricing-table tr:first-child),
:where(.tbox-pricing-table tr:nth-child(2)) {
	background: inherit;
}

/* colgroups */
.tbox-pricing-table .unit-col {
	background: var(--surface-pricing-table-unit);
	border-left: 1px solid var(--pricing-table-clear-borders);
}

.tbox-pricing-table .hour-col {
	background: var(--surface-pricing-table-postpaid);
	border-left: 1px solid var(--pricing-table-clear-borders);
	border-collapse: separate;
}

.tbox-pricing-table .hour-avg-col {
	background: var(--surface-pricing-table-postpaid);
	border-right: 1px solid var(--pricing-table-clear-borders);
	border-collapse: separate;
}

.tbox-pricing-table .mo1-col {
	background: var(--surface-pricing-table-prepaid-strong);
}

.tbox-pricing-table .mo3-col {
	background: var(--surface-pricing-table-prepaid);
}

.tbox-pricing-table .mo6-col {
	background: var(--surface-pricing-table-prepaid-strong);
}

.tbox-pricing-table .mo12-col {
	background: var(--surface-pricing-table-prepaid);
}

.tbox-pricing-table .post-paid-tag {
	background: var(--surface-pricing-table-postpaid);
	border-collapse: separate;
}

.tbox-pricing-table .pre-paid-tag {
	background: var(--surface-pricing-table-prepaid-strong);
	border-collapse: separate;
}

/* rows */

.tbox-pricing-table .bandwidth {
	background: var(--surface-pricing-table-prepaid-strong);
}

/* Legacy .tbox-features-grid and .tbox-features-cta removed — migrated to bento grid */

@media (width <= 600px) {
  .tbox-pricing-section .tbox-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tbox-pricing-section .tbox-pricing-table {
    min-width: 320px;
  }

  :where(.tbox-pricing-section .tbox-pricing-table th),
  :where(.tbox-pricing-section .tbox-pricing-table td) {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-sm);
    white-space: normal;
  }

  .tbox-pricing-section--table-layout .tbox-card--pricing p .tbox-btn {
    display: block;
    width: 100%;
    margin-bottom: var(--space-sm);
    box-sizing: border-box;
    text-align: center;
  }
}

/* Cloud Addons */

.tbox-cloud-addons__next-step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  margin-top: clamp(1.75rem, 2.8vw, 2.5rem);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--border-light);
}

.tbox-cloud-addons__next-step-note {
  margin: 0;
  max-width: var(--prose-measure-wide);
  color: var(--text-secondary);
}

@media (width <= 600px) {
  .tbox-cloud-addons .tbox-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tbox-cloud-addons__next-step {
    flex-direction: column;
    align-items: flex-start;
  }

  .tbox-cloud-addons__next-step .tbox-btn {
    width: 100%;
    justify-content: center;
  }
}

/* LITESPEED */

/* Legacy section-scoped table styles removed — tables now use .tbox-pricing-table */

.tbox-pricing-section.tbox-pricing-section--table-layout table {
    padding: var(--space-2xl);
    font-size: var(--fs-xl);
}

.tbox-pricing-section.tbox-pricing-section--table-layout .tbox-definitions {
    display: grid;
    gap: var(--space-2xl);
    grid-template-columns: repeat(2, 1fr);
}

.tbox-card--pricing {
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  max-width: var(--width-narrow-xs);
  margin-left: auto;
  margin-right: auto;
}

.tbox-card--pricing:focus-visible,
.tbox-card--pricing:focus-within {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

/* POLISH fix G: contain the pricing table inside its card on /litespeed/ at ≤480px.
   Card width 291 vs table scrollWidth 352 → table visually breaks the card edge.
   Scope the overflow to the card and trim padding/font so the table fits cleanly. */
.tbox-pricing-section.tbox-pricing-section--table-layout .tbox-card--pricing {
    max-width: var(--width-content-max);
    text-align: left;
    overflow-x: auto;
}

@media (width <= 480px) {
  .tbox-pricing-section.tbox-pricing-section--table-layout .tbox-card--pricing > table.tbox-pricing-table th,
  .tbox-pricing-section.tbox-pricing-section--table-layout .tbox-card--pricing > table.tbox-pricing-table td {
    padding: 6px 8px;
    font-size: var(--fs-xs);
  }
}

/*
 * Cloudlet/app-hosting calculator + product sections (legacy)
 * Migrated from style.css to keep style.css closer to "base theme only".
 */

div.j-calculator.loading::after {
	left: calc(50% - 300px); /* loading popup width is 400px +  200px (loader img), 300px centers popup */
	 border-radius: 0;
	 width: 400px;
	 height: 200px;
	 background-image: url('/wp-content/uploads/2021/01/Spinner-1s-200px.svg');
	 background-repeat: no-repeat;
	 background-color: var(--overlay-67);
	 color: var(--text-inverse);
	 padding: 0;
	 padding-left: 220px;
	 text-align: center;
	 animation: none;
}

.tbox-runtime-layout .tbox-topology-media {
	display: grid;
	justify-items: center;
	width: 75%;
	grid-template-rows: 1fr;
}

.tbox-standard-features-grid--feature-cards > .tbox-topology-media {
  grid-template-columns: initial;
  gap: initial;
}

.tbox-java-logo-bar img { height: 2.5rem; width: auto; transition: opacity var(--ease-base); }

.tbox-card--media img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.tbox-single-author__avatar img {
  border-radius: 50%;
}
.tbox-java-logo-bar img:hover { opacity: 0.85; }

.tbox-how-it-works .tbox-topology-media img,
.tbox-how-it-works .img img {
	width: 100%;
}

.tbox-standard-features-grid--two-col .tbox-topology-media img {
  margin-bottom: var(--space-2xl);
}

.tbox-standard-features-grid .tbox-card__icon img {
  max-width: 18px;
  max-height: 18px;
  width: 18px;
  height: 18px;
}

.tbox-standard-features-grid--feature-cards .tbox-topology-media img {
  max-width: 100%;
  height: auto;
}

.tbox-search-result .post-thumbnail img,
.tbox-blog-listing .post-thumbnail img {
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: var(--radius-md);
}.tbox-value-card__icon svg { width: 18px; height: 18px; }
.tbox-bonus-badge svg { width: 14px; height: 14px; }

.tbox-hero-v3__prop svg {
  width: 14px;
  height: 14px;
  opacity: 0.65;
  flex-shrink: 0;
}

.tbox-products-compare svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  transition: transform var(--ease-base);
}

.tbox-ah-bento-hero__cloudlet-def svg {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}

.tbox-ah-bento-hero__step svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.tbox-callout__icon svg {
  width: 20px;
  height: 20px;
}




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

.tbox-ahcalc-topology-preview__canvas svg {
  display: block;
  width: 100%;
  height: auto;
}

.tbox-ahcalc-share-btn svg {
  flex-shrink: 0;
}

.tbox-runtime-layout .tbox-topology-media > div img {
	height: 10rem;
}

.tbox-standard-features-grid .tbox-card__icon svg {
  max-width: 18px;
  max-height: 18px;
  width: 18px;
  height: 18px;
}

.tbox-card--decision .tbox-card__icon svg {
  width: 15px;
  height: 15px;
}

.tbox-card--decision .tbox-card__link svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.tbox-standard-features-grid--lang-links .tbox-card__icon svg {
  width: 15px;
  height: 15px;
}

.tbox-products-compare a:hover svg,
.tbox-products-compare a:focus-visible svg {
  opacity: 0.7;
}

.tbox-card--decision .tbox-card__icon {
  width: 27px;
  height: 27px;
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.tbox-card--best-fit .tbox-card__icon {
  background: var(--state-success-bg-soft);
  color: var(--success-deep);
}

.tbox-card--consider .tbox-card__icon {
  background: var(--brand-cta-bg-soft);
  color: var(--brand-cta);
}

.tbox-standard-features-grid--lang-links .tbox-card__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--brand-primary);
  background: none;
  border: 0;
}

.tbox-standard-features-grid > :is(div, article) .icon,
.tbox-standard-features-grid > :is(div, article) .tbox-card__icon,
.tbox-standard-features-grid > :is(div, article) .tbox-card__icon img,
.tbox-standard-features-grid > :is(div, article) .tbox-card__icon svg {
  transition: color var(--ease-base);
}

/* ── Shared split-layout: two-column with sticky visual sidebar ── */

.tbox-split-layout {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-4xl);
  align-items: start;
}
.tbox-split-layout--wide { grid-template-columns: 1fr 440px; }
.tbox-split-layout__content { display: flex; flex-direction: column; gap: var(--space-2xl); }
.tbox-split-layout__visual { display: flex; flex-direction: column; gap: var(--space-xl); position: sticky; top: 2rem; }

@media (width <= 900px) {
  .tbox-split-layout { grid-template-columns: 1fr; gap: var(--space-2xl-plus); }
  .tbox-split-layout__visual { position: static; }
}

/* ── Java Hosting ── */

.tbox-java-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(21rem, 0.46fr);
  gap: clamp(var(--space-2xl), 5vw, var(--space-5xl));
  align-items: center;
  max-width: min(1180px, 92vw);
  text-align: left;
}

.tbox-java-hero__content {
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
  max-width: 720px;
}

.tbox-java-hero .tbox-hero-v3__title,
.tbox-java-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
  text-align: left;
}

.tbox-java-hero .tbox-hero-v3__title {
  max-width: 21ch;
}

.tbox-java-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 82%, transparent);
}

.tbox-java-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

.tbox-hero-panel--deep {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid var(--tbox-hero-panel-border, var(--text-inverse-18));
  border-radius: var(--tbox-hero-panel-radius, var(--radius-md));
  background: var(--tbox-hero-panel-bg, var(--brand-primary-deep));
  color: var(--text-inverse);
  box-shadow: var(--tbox-hero-panel-shadow, 0 1px 0 var(--text-inverse-14) inset);
}

.tbox-hero-panel--deep > * {
  position: relative;
  z-index: 1;
}

.tbox-java-hero__panel {
  --tbox-hero-panel-radius: var(--radius-lg);

  gap: var(--space-lg);
  padding: clamp(var(--space-lg), 2.2vw, var(--space-2xl));
}

.tbox-java-hero__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm-mid);
  font-size: var(--fs-lg);
}

.tbox-java-hero__panel-head .material-symbols-outlined {
  color: var(--brand-cta);
  font-size: 1.45rem;
}

.tbox-java-hero__release {
  display: grid;
  gap: var(--space-xs);
}

.tbox-java-hero__release span {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 2.5rem;
  padding: 0 var(--space-md);
  border: 1px solid var(--text-inverse-14);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-primary-deep) 74%, var(--brand-primary-light) 26%);
  color: color-mix(in srgb, var(--text-inverse) 86%, transparent);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
}

.tbox-java-hero__specs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: 0;
}

.tbox-java-hero__specs div {
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--text-inverse-12);
  border-radius: var(--radius-sm);
  background: var(--text-inverse-08);
}

.tbox-java-hero__specs dt {
  margin: 0 0 var(--space-2xs);
  color: color-mix(in srgb, var(--text-inverse) 74%, transparent);
  font-size: var(--fs-xs);
}

.tbox-java-hero__specs dd {
  margin: 0;
  color: var(--text-inverse);
  font-family: var(--tbox-font-mono);
  font-size: clamp(0.74rem, 0.69rem + 0.2vw, var(--fs-sm));
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

/* Section tightening */
#deploy-flow .tbox-java-deploy-showcase {
  display: grid;
  grid-template-columns: minmax(0, 780px);
  column-gap: var(--space-4xl);
  row-gap: var(--space-2xl);
  align-items: start;
  max-width: 780px;
}

.tbox-java-deploy-showcase__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

#deploy-flow .tbox-section__heading {
  max-width: 18ch;
  text-align: left !important;
}

#deploy-flow .tbox-prose {
  max-width: var(--prose-measure-default);
  margin: 0;
}

.tbox-java-flow-pills {
  display: grid;
  gap: var(--space-xs);
  max-width: 42rem;
}

.tbox-java-flow-pills span {
  display: flex;
  align-items: center;
  min-height: 2.25rem;
  padding-block: var(--space-xs);
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-light) 78%);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

#deploy-flow .tbox-hero-terminal {
  width: 100%;
  max-width: 100%;
  overflow: hidden;
  margin: 0;
  border: 1px solid color-mix(in srgb, var(--surface-dark) 18%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--surface-dark) 18%, transparent);
}

#deploy-flow .tbox-hero-terminal__body {
  padding: var(--space-xl);
  overflow-x: auto;
}

#deploy-flow .tbox-hero-terminal__line {
  font-size: clamp(0.82rem, 0.72rem + 0.22vw, 0.98rem);
  line-height: 1.75;
}

.tbox-java-deploy-showcase__link {
  grid-column: auto;
  margin: calc(var(--space-md) * -1) 0 0;
  font-weight: var(--fw-semibold);
}

#java.tbox-section { padding-block: calc(var(--space-section-y) * 0.8); }
#java .tbox-split-layout { margin-top: var(--space-2xl); }
#java .tbox-split-layout__content {
  min-width: 0;
  gap: var(--space-xl);
}

.tbox-java-runtime-ledger {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  min-width: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  overflow: hidden;
  box-shadow: var(--shadow-card-hairline);
}

.tbox-java-runtime-ledger > div {
  display: grid;
  align-content: start;
  gap: var(--space-xs-plus);
  min-width: 0;
  padding: var(--space-lg);
}

.tbox-java-runtime-ledger > div + div {
  border-left: 1px solid var(--border-light);
}

.tbox-java-runtime-ledger__label {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.tbox-java-runtime-ledger strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

/* Server tile grid */
.tbox-java-server-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.tbox-java-tile {
  display: flex;
  flex-direction: column;
  min-height: 8rem;
  border: 1px solid var(--border-light);
  background: var(--surface-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-java-tile__trigger {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  border-radius: inherit;
  padding: var(--space-md) var(--space-md) var(--space-xs);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  text-align: left;
}

.tbox-java-tile__panel {
  display: grid;
  grid-template-rows: 1fr;
}

.tbox-java-tile__panel-inner {
  overflow: hidden;
  padding-inline: var(--space-md);
  padding-block-end: var(--space-sm-mid);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

/* Supplementary rows */
.tbox-java-deploy-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.tbox-java-deploy-row__item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  min-height: 2.25rem;
  padding: 0;
  border-bottom: 1px solid var(--border-light);
  background: transparent;
}

.tbox-java-deploy-row__item .tbox-java-deploy-icon { flex-shrink: 0; color: var(--brand-primary); }

.tbox-java-jdk-row {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  font-family: var(--tbox-font-mono);
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: var(--space-sm-mid);
  row-gap: var(--space-xs-plus);
}

.tbox-java-jdk-row__label {
  color: var(--text-secondary); font-weight: var(--fw-medium);
}

/* Info blocks */
.tbox-info-block { display: flex; flex-direction: column; gap: var(--space-md); }

@media (width <= 1100px) {
  #deploy-flow .tbox-java-deploy-showcase {
    grid-template-columns: 1fr;
  }

  .tbox-java-hero .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
  }

  #deploy-flow .tbox-section__heading {
    max-width: 18ch;
  }

  .tbox-java-deploy-showcase__link {
    grid-column: auto;
    margin-top: 0;
  }

  .tbox-java-runtime-ledger {
    grid-template-columns: 1fr;
  }

  .tbox-java-runtime-ledger > div + div {
    border-top: 1px solid var(--border-light);
    border-left: 0;
  }

  #java .tbox-split-layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

.tbox-card--media {
  display: flex; flex-direction: column; gap: var(--space-lg);
  padding: var(--space-xl); background: var(--surface-base);
  border: 1px solid var(--border-card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

@media (width <= 600px) {
  #deploy-flow .tbox-hero-terminal__body {
    padding: var(--space-lg);
  }

  #deploy-flow .tbox-hero-terminal__line {
    font-size: var(--fs-2xs);
    line-height: 1.55;
    white-space: normal;
    overflow-wrap: anywhere;
  }

  .tbox-java-server-grid { grid-template-columns: 1fr; }
  .tbox-java-tile { min-height: auto; transition: border-color var(--ease-slow), background var(--ease-slow); }
  .tbox-java-tile__trigger { font-size: var(--fs-base); padding: 0.55rem 0.75rem; cursor: pointer; }
  .tbox-java-tile__trigger:hover { color: var(--text-primary); }
  .tbox-java-tile__panel {
    grid-template-rows: 0fr; visibility: hidden;
    transition: grid-template-rows var(--ease-slow), visibility var(--ease-slow);
  }
  .tbox-java-tile__panel-inner { font-size: var(--fs-xs); padding-block-end: 0; }
  .tbox-java-tile--active { border-color: var(--brand-primary); background: var(--brand-primary-06); }
  .tbox-java-tile--active .tbox-java-tile__panel { grid-template-rows: 1fr; visibility: visible; }
  .tbox-java-tile--active .tbox-java-tile__panel-inner { padding-block-end: var(--space-sm-mid); }
  .tbox-java-deploy-row { gap: var(--space-md); }
}

@media (width <= 600px) and (prefers-reduced-motion: reduce) {
  .tbox-java-tile,
.tbox-java-tile__panel {
    transition: none;
  }
}

/* Runtime/language page right-col layout (NodeJS, PHP, Go, Python, Ruby, .NET) */

/* WORDPRESS HOSTING */

.tbox-topology-section-grid,
.tbox-standard-features-grid--topology {
  display: grid;
  gap: var(--space-2xl);
}

.tbox-topology-section-grid > :is(.tbox-topology-title, .tbox-topology-body),
.tbox-standard-features-grid--topology > :is(.tbox-topology-title, .tbox-topology-body) {
  min-width: 0;
}

/* Topology wrappers inside --topology grids are content containers, not grid cards.
   Strip card visual properties from :where(.tbox-standard-features-grid > div/article).
   grid-column uses !important to override bento nth-child defaults (~line 6052). */
.tbox-standard-features-grid--topology > :is(div, article):is(.tbox-topology-title, .tbox-topology-body, .tbox-topology-media):nth-child(n) {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: none;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

.tbox-standard-features-grid--topology > .tbox-topology-title,
.tbox-standard-features-grid--topology > .tbox-topology-body {
  display: block;
  grid-template-columns: initial;
  grid-template-rows: initial;
  gap: initial;
  align-items: initial;
  align-content: initial;
}

.tbox-standard-features-grid--topology > :is(div, article):is(.tbox-topology-title, .tbox-topology-body, .tbox-topology-media):hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

.tbox-standard-features-grid--topology > :is(div, article):is(.tbox-topology-title, .tbox-topology-body, .tbox-topology-media):active {
  transform: none;
  box-shadow: none;
}

/* Topology body h3 — subsection label,
not a full section heading */
.tbox-standard-features-grid--topology .tbox-topology-body h3 {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-normal);
  margin-bottom: var(--space-sm);
}



@media (width <= 768px) {
	:where(.tbox-home-section p) {
		font-size: var(--fs-sm);
		line-height: var(--lh-relaxed);
		color: var(--text-secondary);
	}
}

/* Datacenters (feature cards layout) */
.tbox-container {
  width: min(1170px, calc(100% - 3rem));
  margin: 0 auto;
}

.tbox-policy-section .tbox-container {
  max-width: var(--width-content);
}

.tbox-policy-section .tbox-policy-layout {
  display: grid;
  grid-template-columns: minmax(13rem, 0.78fr) minmax(0, 2.35fr);
  gap: clamp(var(--space-2xl), 5vw, var(--space-4xl));
  align-items: start;
  width: 100%;
}

.tbox-policy-toc {
  position: sticky;
  top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 64px) + var(--space-xl));
  padding: var(--space-xl);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

.tbox-policy-toc :is(h2, h3) {
  margin: 0 0 var(--space-md);
  color: var(--text-primary);
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-tight);
}

.tbox-policy-toc ol {
  display: grid;
  gap: var(--space-xs);
  padding-left: 1.25rem;
  margin: 0;
  list-style: decimal;
}

.tbox-policy-toc li {
  padding-left: var(--space-2xs);
  color: var(--text-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.tbox-policy-toc a {
  color: var(--text-secondary);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

.tbox-policy-toc a:hover {
  color: var(--brand-primary-dark);
}

.tbox-policy-toc a.is-active {
  color: var(--brand-primary-dark);
  font-weight: 600;
}

.tbox-policy-block {
  min-width: 0;
  max-width: var(--prose-measure-wide);
}

.tbox-policy-block--solo {
  margin-inline: auto;
}

.tbox-policy-block > a[id] {
  display: block;
  scroll-margin-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 64px) + var(--space-xl));
}

.tbox-policy-block > a[id]:not(:first-child) {
  margin-top: clamp(var(--space-3xl), 6vw, var(--space-4xl));
}

.tbox-policy-block > h3:not(:first-child) {
  margin-top: clamp(var(--space-2xl), 5vw, var(--space-3xl));
}

/* Section headings carrying their own ids (tos) replace the legacy empty
   <a id> anchors: same scroll offset and inter-section rhythm. */
.tbox-policy-block > h2[id] {
  scroll-margin-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 64px) + var(--space-xl));
}

.tbox-policy-block > h2:not(:first-child) {
  margin-top: clamp(var(--space-3xl), 6vw, var(--space-4xl));
}

.tbox-policy-meta-heading {
  max-width: min(var(--width-content), 52rem);
  margin-inline: auto;
  color: var(--text-primary);
  font-size: clamp(var(--fs-heading-sm), 2vw, var(--fs-heading-md));
  line-height: var(--lh-tight);
}

.tbox-policy-block h3 {
  margin: 0 0 var(--space-md);
  color: var(--text-primary);
  font-size: clamp(var(--fs-heading-sm), 1.6vw, var(--fs-heading-md));
  line-height: var(--lh-tight);
}

.tbox-policy-block h2 {
  margin: 0 0 var(--space-md);
  color: var(--text-primary);
  font-size: clamp(var(--fs-heading-sm), 1.6vw, var(--fs-heading-md));
  line-height: var(--lh-tight);
}

/* On pages whose sections are h2 (tos), h3 steps down to a sub-heading. */
.tbox-policy-block.tos h3 {
  font-size: var(--fs-lg);
}

.tbox-policy-block :where(p, li) {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}

.tbox-policy-block :where(p, ol, ul) {
  margin-top: 0;
  margin-bottom: 0;
}

.tbox-policy-block :where(p + p, p + ol, p + ul, ol + p, ul + p, ol + ol, ul + ol) {
  margin-top: var(--space-lg);
}

.tbox-policy-block :where(ol, ul) {
  padding-left: 1.35rem;
}

.tbox-policy-block ol {
  list-style: decimal;
}

/* Lettered clause lists (aup): honor the type="a" attribute that the
   `ol` default above would otherwise override. */
.tbox-policy-block ol[type='a'] {
  list-style: lower-alpha;
}

.tbox-policy-block ul {
  list-style: disc;
}

.tbox-policy-block :where(li + li) {
  margin-top: var(--space-sm);
}

.tbox-policy-block :where(li > ul, li > ol) {
  margin-top: var(--space-sm);
}

.tbox-policy-block blockquote {
  margin: var(--space-sm) 0 0;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.tbox-policy-block strong {
  color: var(--text-primary);
}

.tbox-policy-changelog {
  margin-top: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.tbox-policy-changelog summary {
  cursor: pointer;
  color: var(--text-secondary);
}

.tbox-policy-changelog summary:hover {
  color: var(--text-primary);
}

.tbox-policy-changelog ul {
  margin: var(--space-sm) 0 0;
  padding-left: 1.35rem;
}

.tbox-policy-changelog li + li {
  margin-top: var(--space-2xs);
}

.tbox-policy-summary {
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.tbox-policy-summary p {
  margin: 0;
  color: var(--text-secondary);
}

.tbox-policy-summary ul {
  margin: var(--space-sm) 0 0;
  padding-left: 1.35rem;
  color: var(--text-secondary);
  list-style: disc;
}

.tbox-policy-summary li + li {
  margin-top: var(--space-2xs);
}

@media (width <= 900px) {
  .tbox-policy-section .tbox-policy-layout {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .tbox-policy-toc {
    position: static;
  }
}

@media (width <= 640px) {
  .tbox-policy-toc {
    padding: var(--space-lg);
    border-radius: var(--radius-md);
  }

  .tbox-policy-block :is(h2, h3) {
    font-size: var(--fs-heading-sm);
  }

  .tbox-policy-block.tos h3 {
    font-size: var(--fs-lg);
  }
}

.tbox-datacenters:is(.tbox-features-section, .tbox-standard-features-section) > .tbox-container {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: auto 1fr;
	row-gap: var(--space-2xl);
}

/* Datacenters — locations split: blueprint US map beside stacked location cards */
.tbox-dc-locations {
	display: grid;
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
	gap: var(--space-2xl);
	align-items: center;
	margin-top: var(--space-2xl);
}

.tbox-dc-map {
	margin: 0;
}

.tbox-dc-map__svg {
	display: block;
	width: 100%;
	height: auto;
}

.tbox-dc-map__states path {
	fill: var(--brand-primary-06);
	stroke: var(--brand-primary-30);
	stroke-width: 0.75;
	stroke-linejoin: round;
}

.tbox-dc-map__link {
	fill: none;
	stroke: var(--brand-primary);
	stroke-width: 2.5;
	stroke-dasharray: 7 7;
}

/* SVG text sizes are in viewBox units (760-wide); rendered size scales with the
   map column, so the small-viewport override below re-inflates the labels. */
.tbox-dc-map__link-label {
	font-family: var(--tbox-font-body);
	font-size: 18px; /* intentional literal — SVG viewBox units (926-wide), not screen px */
	font-weight: var(--fw-semibold);
	fill: var(--text-secondary);
}

.tbox-dc-map__pin-label {
	font-family: var(--tbox-font-body);
	font-size: 21px;
	font-weight: var(--fw-semibold);
	fill: var(--text-primary);
}

.tbox-dc-map__pin-ring {
	fill: var(--brand-primary-20);
}

.tbox-dc-map__pin-dot {
	fill: var(--brand-primary);
}

.tbox-dc-locations__cards {
	display: grid;
	gap: var(--space-lg);
}

.tbox-dc-compliance-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var(--space-sm);
}

.tbox-dc-compliance-list strong {
	color: var(--text-primary);
}

@media (width <= 900px) {
	.tbox-dc-locations {
		grid-template-columns: 1fr;
		gap: var(--space-xl);
	}
}

@media (width <= 600px) {
	.tbox-dc-map__pin-label {
		font-size: 37px;
	}

	.tbox-dc-map__link-label {
		font-size: 32px;
	}
}

/* DNS Failover — features + pricing sections stack their content in block flow */
.tbox-dns-failover.tbox-standard-features-section > .tbox-container > h2,
.tbox-dns-failover.tbox-pricing-section > .tbox-container > h2 {
	text-align: center;
}

.tbox-dns-failover .tbox-dnsf-features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	max-width: 1080px;
	margin-inline: auto;
}

.tbox-dns-failover .tbox-dnsf-features__item {
	padding: 0.25rem 2rem;
}

.tbox-dns-failover .tbox-dnsf-features__item + .tbox-dnsf-features__item {
	border-left: 1px solid var(--border-light);
}

.tbox-dns-failover .tbox-dnsf-features__title {
	margin: 0 0 0.4rem;
	font-family: var(--ff-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-2xl);
	color: var(--text-primary);
}

.tbox-dns-failover .tbox-dnsf-features__desc {
	margin: 0;
	color: var(--text-secondary);
	font-size: var(--fs-lg);
	line-height: var(--lh-relaxed);
}

@media (width <= 900px) {
	.tbox-dns-failover .tbox-dnsf-features {
		grid-template-columns: 1fr;
	}

	.tbox-dns-failover .tbox-dnsf-features__item {
		padding: 1rem 0;
	}

	.tbox-dns-failover .tbox-dnsf-features__item + .tbox-dnsf-features__item {
		border-left: 0;
		border-top: 1px solid var(--border-light);
	}
}

/* DNS Failover — failover event diagram */
.tbox-dns-failover .tbox-dnsf-diagram {
	max-width: 680px;
	margin: var(--space-lg) auto var(--space-xl);
}

.tbox-dns-failover .tbox-dnsf-diagram svg {
	display: block;
	width: 100%;
	height: auto;
}

.tbox-dns-failover .tbox-dnsf-diagram__node {
	fill: var(--surface-card);
	stroke: var(--border-card);
	stroke-width: 1.5;
}

.tbox-dns-failover .tbox-dnsf-diagram__node--down {
	stroke: var(--color-red);
	stroke-dasharray: 6 5;
}

.tbox-dns-failover .tbox-dnsf-diagram__node--up {
	stroke: var(--success);
}

.tbox-dns-failover .tbox-dnsf-diagram__label {
	fill: var(--text-primary);
	font-family: var(--ff-display);
	font-weight: var(--fw-bold);
	font-size: 17px;
}

.tbox-dns-failover .tbox-dnsf-diagram__sub {
	fill: var(--text-muted);
	font-family: var(--tbox-font-body);
	font-size: 13px; /* intentional literal: SVG viewBox units, scales with the diagram */
}

.tbox-dns-failover .tbox-dnsf-diagram__sub--down {
	fill: var(--color-red);
}

.tbox-dns-failover .tbox-dnsf-diagram__sub--up {
	fill: var(--success);
}

.tbox-dns-failover .tbox-dnsf-diagram__link {
	fill: none;
	stroke: var(--text-muted);
	stroke-width: 1.5;
}

.tbox-dns-failover .tbox-dnsf-diagram__link--dead {
	stroke-dasharray: 5 6;
	opacity: 0.6;
}

.tbox-dns-failover .tbox-dnsf-diagram__link--traffic {
	stroke: var(--brand-primary);
	stroke-width: 3;
}

.tbox-dns-failover .tbox-dnsf-diagram__cross {
	fill: none;
	stroke: var(--color-red);
	stroke-width: 2.5;
	stroke-linecap: round;
}

.tbox-dns-failover .tbox-dnsf-diagram__head {
	fill: var(--text-muted);
}

.tbox-dns-failover .tbox-dnsf-diagram__head--traffic {
	fill: var(--brand-primary);
}

@media (width <= 640px) {
	.tbox-dns-failover .tbox-dnsf-diagram__label {
		font-size: 22px;
	}

	.tbox-dns-failover .tbox-dnsf-diagram__sub {
		font-size: 17px;
	}
}

/* DNS Failover pricing — centered stack */
.tbox-dns-failover .tbox-dnsf-price {
	max-width: 480px;
	margin: 0 auto var(--space-sm);
}

.tbox-dns-failover .tbox-dnsf-price__note {
	max-width: 480px;
	margin: 0 auto var(--space-xl);
	color: var(--text-muted);
	font-size: var(--fs-sm);
	text-align: center;
}

.tbox-dns-failover .tbox-dnsf-price__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: var(--space-lg);
	padding: 0.7rem 0;
}

.tbox-dns-failover .tbox-dnsf-price__row + .tbox-dnsf-price__row {
	border-top: 1px solid var(--border-light);
}

.tbox-dns-failover .tbox-dnsf-price__label {
	margin: 0;
	color: var(--text-secondary);
}

.tbox-dns-failover .tbox-dnsf-price__value {
	margin: 0;
	font-family: var(--ff-display);
	font-weight: var(--fw-bold);
	font-size: var(--fs-xl);
	color: var(--text-primary);
	white-space: nowrap;
}

.tbox-dns-failover .tbox-dnsf-price__unit {
	font-family: var(--tbox-font-body);
	font-weight: var(--fw-normal);
	font-size: var(--fs-sm);
	color: var(--text-muted);
}

.tbox-dns-failover.tbox-pricing-section .tbox-cta-row {
	justify-content: center;
}

/* Contact us */
.tbox-contact-us .tbox-contact-grid,
.tbox-contact-us .tbox-standard-features-grid--split,
.tbox-contact-us .tbox-standard-features-grid--content-split {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: var(--space-2xl);
}

.tbox-contact-us .tbox-contact-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
}

/* Balance the office/form split: stretch the shorter card to fill its column
   instead of leaving a dead void beside the taller form card. */
.tbox-contact-us .tbox-standard-features-grid--content-split {
  align-items: stretch;
}

@media (width <= 900px) {
  .tbox-contact-us .tbox-contact-grid,
.tbox-contact-us .tbox-standard-features-grid--split,
.tbox-contact-us .tbox-standard-features-grid--content-split {
    grid-template-columns: 1fr;
    row-gap: var(--space-2xl);
  }
}

/* POLISH fix A: keep the contact-us cards from clipping their CF7 fields on mobile.
   The card may render as a multi-column grid; below 768px, collapse to single-column
   block flow so inputs and the submit button render at full container width. */
@media (width <= 768px) {
  .tbox-contact-us .tbox-contact-card {
    display: block;
    grid-template-columns: none;
    overflow: visible;
  }

  .tbox-contact-us .tbox-contact-card > * {
    max-width: 100%;
  }
}

/* POLISH fix B: scope the submit-button tap target + primary CTA treatment to the
   contact-us route so it does not bleed into other CF7 forms. */
.tbox-contact-us .wpcf7 input[type="submit"] {
  min-height: 44px;
  padding: 12px 16px;
  background: var(--tbox-btn-accent-bg);
  border: 1px solid var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text);
}

.tbox-contact-us .wpcf7 input[type="submit"]:hover,
.tbox-contact-us .wpcf7 input[type="submit"]:focus-visible {
  background: var(--tbox-btn-accent-bg-hover);
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text-hover, var(--brand-cta-ink));
}

/* POLISH fix C: private-clouds quote-form submit reads as disabled in dark mode.
   Scope the accent treatment to the quote-form wrapper so it stays out of other forms. */
.tbox-pc-quote-form .wpcf7 input[type="submit"] {
  min-height: 44px;
  padding: 12px 16px;
  background: var(--tbox-btn-accent-bg);
  border: 1px solid var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text);
}

.tbox-pc-quote-form .wpcf7 input[type="submit"]:hover,
.tbox-pc-quote-form .wpcf7 input[type="submit"]:focus-visible {
  background: var(--tbox-btn-accent-bg-hover);
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text-hover, var(--brand-cta-ink));
}

/* ----- CF7 Form Styling ----- */
.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  display: block;
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-input, var(--surface-base));
  border: 1px solid var(--border-input, var(--border-light));
  border-radius: var(--radius-sm);
  outline: none;
  transition: border-color 0.15s;
  box-sizing: border-box;
}

.wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select):focus {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.wpcf7 textarea {
  resize: vertical;
  min-height: 120px;
}

.wpcf7 .wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-base);
  font-family: inherit;
  font-weight: 600;
  color: var(--btn-primary-text, #fff);
  background: var(--brand-primary);
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.wpcf7 .wpcf7-submit:hover {
  opacity: 0.88;
}

:root[data-theme="dark"] .wpcf7 :is(input[type="text"], input[type="email"], input[type="tel"], textarea, select) {
  background: var(--surface-input, var(--surface-muted));
  border-color: var(--border-input, var(--border-light));
}

/* CF7's default #dc3232 validation red is ~3.6:1 on dark cards; lighten it. */
:root[data-theme="dark"] .wpcf7 .wpcf7-not-valid-tip {
  color: #ff9d96;
}

/* ----- FAQ Accordion Styling ----- */
.tbox-faq-section .tbox-faq-accordion {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    max-width: var(--width-faq);
    margin: 0 auto;
    align-items: stretch;
}

@media (width <= 768px) {
    .tbox-faq-section .tbox-faq-accordion {
        grid-template-columns: 1fr;
    }
}

.tbox-faq-item {
  border-bottom: 1px solid var(--border-light);
  padding: 0;

  /* Deep-linked items (#faq-…) scroll under the sticky header otherwise */
  scroll-margin-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 64px) + var(--space-xl));
}

.tbox-faq-section .tbox-faq-item {
    background: transparent;
    border: none;
    border-bottom: 1px solid var(--border-light);
    border-radius: 0;
    margin-bottom: 0;
    padding-bottom: 0;
    transition: background var(--ease-slow), border-color var(--ease-slow);
    overflow: hidden;
}

.tbox-faq-section .tbox-faq-item:first-child {
    border-top: 1px solid var(--border-light);
}

.tbox-cta-section__inner {
  max-width: var(--width-content);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}

.tbox-card--decision {
  background: var(--surface-base);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: 0;
  display: flex;
  flex-direction: column;
  transition: box-shadow var(--ease-base), border-color var(--ease-base);
  overflow: hidden;
}

.tbox-card--decision:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-mid);
}

.tbox-card--decision:focus-visible,
.tbox-card--decision:focus-within {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

/* Phase 1.5 — Featured (recommended-path) decision card modifier.
   Marks one card in a decision strip as the recommended option without
   introducing a side-stripe (banned) or a colored heading band.
   Applied as `.tbox-card--decision.tbox-card--featured`. */
.tbox-card--decision.tbox-card--featured {
  border-color: var(--brand-highlight);
  box-shadow: inset 0 0 0 1px var(--brand-highlight), var(--shadow-md);
  background-color: color-mix(in srgb, var(--warm-0) 8%, var(--surface-card));
}

.tbox-card--decision.tbox-card--featured:hover {
  border-color: var(--brand-highlight);
  box-shadow: inset 0 0 0 1px var(--brand-highlight), var(--shadow-lg);
}

.tbox-card--decision.tbox-card--featured:focus-visible,
.tbox-card--decision.tbox-card--featured:focus-within {
  outline-offset: calc(var(--focus-outline-offset) + 2px);
}

.tbox-faq-section .tbox-faq-item:hover {
    border-bottom-color: var(--border-muted);
}

.tbox-faq-section .tbox-faq-item[open] {
    background: color-mix(in srgb, var(--brand-primary) 3%, transparent);
    border-bottom-color: var(--brand-primary);
    box-shadow: none;
}

.tbox-faq-section .tbox-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1.35rem 1.75rem;
    cursor: pointer;
    list-style: none;
    font-family: var(--ff-display);
    font-size: var(--fs-lg);
    font-weight: var(--fw-bold);
    color: var(--brand-primary-text);
    transition: background var(--ease-base);
}

.tbox-faq-section .tbox-faq-item:hover .tbox-faq-question {
    background: color-mix(in srgb, var(--brand-primary) 3%, transparent);
}

.tbox-faq-section .tbox-faq-item[open] .tbox-faq-question {
    background: var(--brand-primary-12);
    border-bottom: 1px solid var(--brand-primary-bg);
}

.tbox-faq-section .tbox-faq-question::-webkit-details-marker {
    display: none;
}

.tbox-faq-section .tbox-faq-question::after {
    content: "";
    width: 12px;
    height: 12px;
    border-right: 2px solid currentcolor;
    border-bottom: 2px solid currentcolor;
    border-color: var(--brand-primary);
    transform: rotate(45deg);
    transition: transform var(--ease-slow);
    opacity: 1;
}

.tbox-faq-section .tbox-faq-item[open] .tbox-faq-question::after {
    content: "";
    transform: rotate(-135deg);
}

@media (prefers-reduced-motion: reduce) {
  .tbox-faq-section .tbox-faq-question::after {
    transition: none;
  }
}

.tbox-faq-section .tbox-faq-answer {
    padding: 1.25rem 1.75rem 1.75rem;
    font-size: var(--fs-md);
    color: var(--text-secondary);
    line-height: var(--lh-loose);
}

/* ----- 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);
}

/* ----- FAQ Tag Filter Tabs ----- */

.tbox-faq-section__tabs-shell {
    position: relative;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

/* Segmented-control treatment shared with .tbox-video-carousel__tabs and
   (dark variant) .tbox-fops-tablist — one tab pattern site-wide. */
.tbox-faq-section__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    justify-content: center;
    padding: var(--space-2xs);
    background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-base) 28%);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg-plus);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

:root[data-theme="dark"] .tbox-faq-section__tabs {
    background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 8%);
}

@media (width <= 768px) {
  .tbox-faq-section .tbox-faq-section__tabs-shell {
    max-width: none;
    margin-inline: calc(-1 * var(--space-md));
  }

  .tbox-faq-section__tabs-shell::before,
  .tbox-faq-section__tabs-shell::after {
    position: absolute;
    top: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    width: 2rem;
    height: var(--min-touch-target);
    color: var(--brand-primary-dark);
    font-family: var(--ff-display);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease-fast);
  }

  .tbox-faq-section__tabs-shell::before {
    content: "<";
    left: 0;
    justify-content: center;
  }

  .tbox-faq-section__tabs-shell::after {
    content: ">";
    right: 0;
    justify-content: center;
  }

  .tbox-faq-section__tabs-shell--has-prev::before,
  .tbox-faq-section__tabs-shell--has-next::after {
    opacity: 1;
  }

  :root[data-theme="dark"] .tbox-faq-section__tabs-shell::before,
  :root[data-theme="dark"] .tbox-faq-section__tabs-shell::after {
    color: var(--brand-highlight);
  }

  .tbox-faq-section__tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    max-width: none;
    margin-inline: 0;
    overflow-x: auto;
    padding-inline: var(--space-md);
    padding-bottom: var(--space-2xs);
    scroll-padding-inline: var(--space-md);
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--text-primary) 1.25rem, var(--text-primary) calc(100% - 1.25rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, var(--text-primary) 1.25rem, var(--text-primary) calc(100% - 1.25rem), transparent 100%);
  }

  .tbox-faq-section__tabs::-webkit-scrollbar {
    display: none;
  }

  .tbox-faq-section__tab {
    flex: 0 0 auto;
    scroll-snap-align: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-faq-section__tabs-shell::before,
  .tbox-faq-section__tabs-shell::after {
    transition: none;
  }
}

.tbox-faq-section__tab {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--min-touch-target);
    padding: var(--space-xs-plus) var(--space-sm);
    border: 1px solid transparent;
    border-radius: var(--radius-sm-plus);
    background: none;
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    color: var(--text-secondary);
    transition: color var(--ease-fast), border-color var(--ease-fast), background-color var(--ease-fast);
}

.tbox-faq-section__tab[data-faq-tag="all"] {
    min-width: var(--min-touch-target);
}

.tbox-faq-section__tab:hover {
    color: var(--text-primary);
    background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
}

.tbox-faq-section__tab:focus-visible {
    outline: var(--focus-outline-width) solid var(--brand-primary);
    outline-offset: var(--focus-outline-offset);
}

.tbox-faq-section__tab--active {
    color: var(--brand-primary-text);
    background: var(--surface-base);
    border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--border-light));
    box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] .tbox-faq-section__tab--active {
    background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 10%);
    border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-mid));
}

.tbox-faq-item[data-tbox-faq-hidden] {
    display: none;
}

.tbox-faq-item.tbox-faq-search-hidden {
    display: none;
}

/* ----- FAQ Search Input ----- */

.tbox-faq-search-wrapper {
    position: relative;
    max-width: 400px;
    margin: 0 auto 1.25rem;
}

.tbox-faq-search {
    width: 100%;
    height: 48px;
    padding: 0 var(--space-lg) 0 3rem;
    font-size: var(--fs-md);
    border: 1px solid var(--gray-3, #e2e8f0);
    border-radius: var(--radius-md);
    background: var(--surface-base, #fff);
    color: var(--text-primary);
    transition: border-color var(--ease-base), box-shadow var(--ease-base);
}

.tbox-faq-search:focus-visible {
    outline: var(--focus-outline-width) solid var(--brand-primary);
    outline-offset: var(--focus-outline-offset);
    border-color: var(--brand-primary);
}

.tbox-faq-search:focus:not(:focus-visible) {
    outline: none;
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.tbox-faq-search-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    color: var(--text-muted, #94a3b8);
    pointer-events: none;
}

.tbox-faq-no-results {
    text-align: center;
    padding: 2rem 1rem;
    color: var(--text-muted, #94a3b8);
}

/* ----- FAQ Row Collapse / Show More ----- */

.tbox-faq-item.tbox-faq-row-hidden {
    display: none;
}

.tbox-faq-show-more-wrapper {
    display: flex;
    justify-content: center;
    max-width: var(--width-faq);
    margin: var(--space-lg) auto 0;
}

/* display:flex above beats the UA [hidden] rule, which script.js relies on to
   hide Show More during search/filter and zero-result states */
.tbox-faq-show-more-wrapper[hidden] {
    display: none;
}

.tbox-faq-show-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--min-touch-target);
    gap: var(--space-2xs);
    padding: var(--space-xs-plus) 1.25rem;
    border-radius: var(--radius-md);
    font-family: var(--ff-display);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    border: 1px solid var(--gray-3, #e2e8f0);
    background: var(--surface-base, #fff);
    color: var(--text-secondary, #475569);
    transition: background var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast);
}

.tbox-faq-show-more:hover {
    border-color: var(--border-mid, #cbd5e1);
    background: var(--surface-raised, #f8fafc);
}

.tbox-faq-show-more:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-ring);
    outline-offset: var(--focus-outline-offset);
}

.tbox-faq-show-more__icon {
    transition: transform var(--ease-fast);
}

.tbox-faq-show-more[aria-expanded="true"] .tbox-faq-show-more__icon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .tbox-faq-show-more__icon {
        transition: none;
    }
}

/* ----- Additional Polish ----- */

@media (width <= 600px) {
    .tbox-faq-section .tbox-faq-question {
        padding: 1.15rem 1.25rem;
    }

    .tbox-faq-section .tbox-faq-answer {
        padding: var(--space-lg) var(--space-lg-plus) 1.5rem;
    }

}

/* ============================================
   Cards + sections (new components)
   ============================================ */

.tbox-card {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-card);
  padding: var(--space-2xl);
  transition: box-shadow var(--ease-base);
}

.tbox-card:hover {
  box-shadow: var(--shadow-lg);
}

.tbox-stack {
  display: grid;
  gap: var(--space-xl);
}

.tbox-section {
  padding-top: var(--space-section-y);
  padding-bottom: var(--space-section-y);
}

/* Reset legacy #content > section padding for modern .tbox-section
   (which uses .tbox-container for centering and its own vertical rhythm) */

.tbox-section--alt {
  /* Navy Mist: 6% --blue-9 on --surface-base — quiet brand-blue wash,
     replaces the cyan-leaning oklch(0.925 0.014 230). */
  background: color-mix(in oklab, var(--blue-9) 6%, var(--surface-base));
  border-top: 1px solid var(--border-light);
}

:root[data-theme="dark"] .tbox-section--alt {
  /* Dark mode: drop the alt step so the section inherits body bg and avoids
     banding against the surrounding navy stack (jump bar, subtle, body). The
     alt distinction is preserved in light mode via the Navy Mist background. */
  background: transparent;
  border-top-color: transparent;
}

/* --- Dark section variant --- */

.tbox-section--dark {
  background: var(--surface-dark);
  color: var(--text-on-dark);
  border-top: 1px solid var(--surface-glass-10);
}

:root[data-theme="dark"] .tbox-section--dark {
  background: var(--surface-muted);
  border-color: var(--border-light);
}

/* --- Tint section variant (cool blue-grey rhythm break) --- */

.tbox-section--tint {
  background: var(--surface-tint);
  border-top: 1px solid var(--border-light);
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-section--tint {
  background: var(--surface-card);
  border-color: var(--border-light);
}

/* --- Visual Module component --- */
/* Reusable base component for spoke-specific visual landmarks */

.tbox-visual-module {
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  overflow: hidden;
}

.tbox-section--dark .tbox-visual-module {
  background: var(--surface-glass-05);
  border-color: var(--surface-glass-12);
}

/* Helper: stacked content within a --split left column */

.tbox-vm-split-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

/* Body text inside a dark-section split column (replaces inline styles) */
.tbox-vm-body-text {
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-md);
}

.tbox-section--dark .tbox-vm-body-text {
  color: var(--text-on-dark-soft);
}

/* When a --split grid follows a --bento-repack in the same section */
.tbox-standard-features-grid--bento-repack + .tbox-standard-features-grid--split {
  margin-top: var(--space-lg);
  margin-bottom: calc(var(--space-section-y) / -2);
}

/* When a --bento-repack CTA follows a --detail-columns grid in the same section */
.tbox-standard-features-grid--detail-columns + .tbox-standard-features-grid--bento-repack {
  margin-top: var(--space-lg);
}

/* --terminal: code/command panel (API page) */

.tbox-visual-module--terminal {
  background: #0d1117;
  border-color: var(--surface-glass-10);
  color: var(--text-on-dark);
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-sm);
}

.tbox-vm-header {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--surface-glass-08);
  background: var(--surface-glass-04);
}

.tbox-vm-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.tbox-vm-dot:nth-child(1) { background: #ff5f57; }
.tbox-vm-dot:nth-child(2) { background: #ffbd2e; }
.tbox-vm-dot:nth-child(3) { background: #28ca41; }

.tbox-vm-header-title,
.tbox-vm-panel-label {
  font-size: var(--fs-label);
  color: var(--surface-glass-40);
  text-transform: uppercase;
  letter-spacing: var(--ls-normal);
  font-family: var(--tbox-font-body);
}

.tbox-vm-header-title { margin-left: auto; }
.tbox-vm-panel-label { margin-bottom: var(--space-sm); }

.tbox-vm-panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.tbox-vm-panel {
  padding: var(--space-md);
  min-width: 0;
  overflow: hidden;
}

.tbox-vm-panel + .tbox-vm-panel {
  border-left: 1px solid var(--surface-glass-08);
}

.tbox-vm-code {
  display: block;
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: rgb(226 232 240 / 88%);
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: pre;
}

.tbox-vm-code .tbox-vm-key { color: #79c0ff; }
.tbox-vm-code .tbox-vm-val { color: #a5d6ff; }
.tbox-vm-code .tbox-vm-str { color: #a8d8a8; }
.tbox-vm-code .tbox-vm-num { color: #f2cc60; }
.tbox-vm-code .tbox-vm-punct { color: rgb(226 232 240 / 45%); }

.tbox-vm-annotation {
  display: block;
  font-size: var(--fs-base);
  color: var(--brand-highlight);
  font-family: var(--tbox-font-body);
  margin-top: var(--space-sm);
  font-style: normal;
}

@media (width <= 700px) {
  .tbox-vm-panels {
    grid-template-columns: 1fr;
  }

  .tbox-vm-panel {
    padding: var(--space-sm);
  }

  .tbox-vm-panel + .tbox-vm-panel {
    border-left: none;
    border-top: 1px solid var(--surface-glass-08);
  }

  .tbox-vm-code {
    font-size: 0.68rem; /* micro-UI: intentional literal */
    line-height: var(--lh-relaxed);
  }
}

/* --timeline: numbered step rail (Backups page) */

.tbox-visual-module--timeline {
  padding: var(--space-lg);
}

.tbox-vm-timeline-step {
  display: grid;
  grid-template-columns: 32px 1fr;
  column-gap: var(--space-md);
  position: relative;
  padding-bottom: var(--space-xl);
}

.tbox-vm-timeline-step:last-child {
  padding-bottom: 0;
}

.tbox-vm-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--brand-primary);
  color: var(--text-inverse);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

/* Connector line between steps */
.tbox-vm-timeline-step:not(:last-child) .tbox-vm-step-num::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: var(--space-xl);
  background: var(--border-card);
}

.tbox-section--dark .tbox-vm-timeline-step:not(:last-child) .tbox-vm-step-num::after {
  background: var(--surface-glass-15);
}

.tbox-vm-step-content {
  padding-top: 4px;
}

.tbox-vm-step-label {
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

.tbox-vm-step-desc {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 2px;
  line-height: var(--lh-relaxed);
}

.tbox-vm-step-time {
  display: inline-block;
  font-size: var(--fs-label);
  color: var(--brand-highlight);
  margin-top: 2px;
}

.tbox-section--dark .tbox-vm-step-label {
  color: var(--text-on-dark);
}

.tbox-section--dark .tbox-vm-step-desc {
  color: var(--text-on-dark-muted);
}

/* --topology: node/rule propagation diagram (Security page) */

.tbox-visual-module--topology {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  justify-content: center;
  min-height: 160px;
}

.tbox-vm-topo-row {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tbox-vm-topo-node {
  border: 2px solid var(--border-card);
  border-radius: var(--radius-md);
  padding: var(--space-xs) var(--space-md);
  text-align: center;
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  background: var(--surface-card);
  color: var(--text-primary);
  flex: 1;
  min-width: 0;
}

.tbox-vm-topo-node--source {
  border-color: var(--brand-primary);
  background: var(--brand-primary-08);
  color: var(--brand-primary-text);
}

.tbox-vm-topo-node-sublabel {
  display: block;
  font-size: var(--fs-label);
  font-weight: var(--fw-normal);
  margin-top: 2px;
  color: var(--brand-highlight);
}

.tbox-vm-topo-arrow,
.tbox-vm-lifecycle-arrow {
  color: var(--text-muted);
  font-size: 1rem;
  flex-shrink: 0;
  line-height: 1;
}

.tbox-vm-topo-connector {
  width: 48px;
  flex-shrink: 0;
  color: var(--text-muted);
  align-self: stretch;
}

.tbox-vm-topo-vms {
  display: flex;
  gap: var(--space-sm);
  flex: 3;
}

.tbox-vm-topo-vms .tbox-vm-topo-node {
  flex: 1;
}

.tbox-vm-topo-row--fan .tbox-vm-topo-node--source {
  flex: none;
  min-width: 120px;
  padding: var(--space-sm) var(--space-lg);
}

.tbox-vm-topo-row--fan .tbox-vm-topo-vms {
  flex-direction: column;
}

.tbox-vm-topo-sublabel-row {
  font-size: var(--fs-label);
  color: var(--text-muted);
  margin-top: var(--space-xs);
  text-align: center;
}

.tbox-section--dark .tbox-vm-topo-node {
  background: var(--surface-glass-05);
  border-color: var(--surface-glass-15);
  color: var(--text-on-dark);
}

.tbox-section--dark .tbox-vm-topo-node--source {
  border-color: var(--brand-primary);
  background: var(--brand-primary-15);
  color: var(--brand-primary);
}

.tbox-section--dark .tbox-vm-topo-sublabel-row {
  color: var(--text-on-dark-muted);
}

.tbox-section--dark .tbox-vm-topo-connector {
  color: var(--text-on-dark-muted);
}

@media (width <= 600px) {
  .tbox-vm-topo-row {
    flex-direction: column;
    align-items: stretch;
  }

  .tbox-vm-topo-arrow {
    transform: rotate(90deg);
    align-self: center;
  }

  .tbox-vm-topo-connector {
    display: none;
  }

  .tbox-vm-topo-vms {
    width: 100%;
    flex-direction: column;
    flex-wrap: wrap;
  }

  .tbox-vm-topo-node {
    width: 100%;
  }

  .tbox-vm-topo-sublabel-row {
    text-align: left;
  }
}

/* --lifecycle: horizontal state flow (Volumes page) */

.tbox-visual-module--lifecycle {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-md);
}

.tbox-vm-lifecycle-flow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.tbox-vm-lifecycle-state {
  background: var(--surface-subtle);
  border: 1.5px solid var(--border-card);
  border-radius: var(--radius-sm-plus);
  padding: var(--space-xs) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  white-space: nowrap;
}

.tbox-vm-lifecycle-state--active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-10);
  color: var(--brand-primary-text);
}

.tbox-vm-lifecycle-caption {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-loose);
}

.tbox-section--dark .tbox-vm-lifecycle-state {
  background: var(--surface-glass-06);
  border-color: var(--surface-glass-15);
  color: var(--text-on-dark);
}

.tbox-section--dark .tbox-vm-lifecycle-state--active {
  border-color: var(--brand-primary);
  background: var(--brand-primary-15);
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-vm-topo-node--source,
:root[data-theme="dark"] .tbox-vm-lifecycle-state--active {
  border-color: var(--brand-primary-30);
  background: var(--brand-primary-16);
  color: var(--brand-primary);
}

.tbox-section--dark .tbox-vm-topo-arrow,
.tbox-section--dark .tbox-vm-lifecycle-arrow,
.tbox-section--dark .tbox-vm-lifecycle-caption {
  color: var(--text-on-dark-muted);
}

/* ── Fix: --split layout columns are not feature cards ── */
/* The base feature-grid card rule (display:grid + card styles) matches ALL direct
   div/article children of .tbox-standard-features-grid, including the --split
   variant. --split columns are layout containers — reset card treatment here. */

.tbox-standard-features-grid--split > :is(div, article) {
  display: block;
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  border-radius: 0;
}

.tbox-standard-features-grid--split > :is(div, article):hover {
  transform: none;
  background: transparent;
  box-shadow: none;
}

/* Restore flex for the vm-split-content text wrapper */
.tbox-standard-features-grid--split > .tbox-vm-split-content {
  display: flex;
}

/* Restore visual module card appearance (reset above cleared bg/border/padding) */
.tbox-standard-features-grid--split > .tbox-visual-module {
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.tbox-section--dark .tbox-standard-features-grid--split > .tbox-visual-module {
  background: var(--surface-glass-05);
  border-color: var(--surface-glass-12);
}

/* Terminal variant uses child-level padding — don't apply outer padding */
.tbox-standard-features-grid--split > .tbox-visual-module--terminal { padding: 0; }

/* Restore correct flex display for each visual module modifier */
.tbox-standard-features-grid--split > .tbox-visual-module--lifecycle { display: flex; }
.tbox-standard-features-grid--split > :is(.tbox-visual-module--terminal, .tbox-visual-module--timeline, .tbox-visual-module--topology) {
  display: flex;
  flex-direction: column;
}

@media (width <= 768px) {
  .tbox-standard-features-grid--split {
    gap: var(--space-xl);
  }

  .tbox-standard-features-grid--split > .tbox-vm-split-content {
    gap: var(--space-lg);
  }

  .tbox-standard-features-grid--split > .tbox-visual-module {
    width: min(100%, 40rem);
    margin-inline: auto;
  }

  .tbox-vm-header {
    padding: var(--space-xs) var(--space-sm);
  }
}

/* --- Section heading with brand accent bar --- */

.tbox-section__heading {
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-tight);
  color: var(--text-primary);
  text-align: center;
  padding-bottom: var(--space-md);
  position: relative;
}

.tbox-section__heading::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 48px;
  height: 3px;
  border-radius: var(--radius-xs);
  background: var(--brand-primary);
}

.tbox-section--dark .tbox-section__heading::after {
  background: var(--brand-highlight);
}

/* Case-study cards: left-align headings and suppress the accent bar.
   Plain class selectors (not :where) so specificity clears the global
   .tbox-section__heading centering rule. */
.tbox-case-studies .tbox-content-card .tbox-section__heading,
.tbox-case-studies .tbox-card--content .tbox-section__heading,
.tbox-case-study .tbox-content-card .tbox-section__heading,
.tbox-case-study .tbox-card--content .tbox-section__heading {
  text-align: left;
  padding-bottom: 0;
}
.tbox-case-studies .tbox-content-card .tbox-section__heading::after,
.tbox-case-studies .tbox-card--content .tbox-section__heading::after,
.tbox-case-study .tbox-content-card .tbox-section__heading::after,
.tbox-case-study .tbox-card--content .tbox-section__heading::after {
  display: none;
}

/* Anchor-blue heading modifier — apply to one section per page that anchors
   the page's main value claim. Brand-blue rhythm; absolute ban on stacking.
   Specificity bump (#content + compound) clears `#content .tbox-section__heading`
   and `.tbox-pillar-section .tbox-section__heading` defaults. */
#content .tbox-section__heading.tbox-section__heading--brand {
  color: var(--brand-primary-text);
}

:root[data-theme="dark"] #content .tbox-section__heading.tbox-section__heading--brand {
  color: var(--brand-primary);
}

/*
 * Editorial left-aligned heading variant.
 * Use on explanatory sections (mechanism / architecture / deployment flow /
 * runtime behavior / cost mechanics / operational responsibility /
 * migration / observability walkthroughs). Centered heading is reserved for
 * summary objects (FAQ, final CTA, trust, comparison tables, short choice
 * sections). See DESIGN.md § "App Hosting Page Family Rhythm Contract".
 */
/* Chained selector + descendant guard so this beats the global
   `section > .tbox-container > h2 { text-align: center }` rule (specificity 0,1,2). */
.tbox-section__heading.tbox-section__heading--start,
section > .tbox-container > h2.tbox-section__heading--start {
  text-align: left;
  max-width: 64ch;
  margin-left: 0;
  margin-right: auto;
}

.tbox-section__heading.tbox-section__heading--start::after,
section > .tbox-container > h2.tbox-section__heading--start::after {
  left: 0;
  transform: none;
}

/* --- Section description text (constrained measure) --- */

.tbox-section__desc {
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: var(--lh-loose);
  max-width: var(--width-desc);
  margin-top: var(--space-md);
  margin-bottom: var(--space-lg);
  margin-left: auto;
  margin-right: auto;
}

.tbox-spoke-overview .tbox-section__desc {
  max-width: var(--prose-measure-default);
  margin: 0 auto clamp(1.5rem, 2.4vw, 2.25rem);
  text-align: center;
}

.tbox-section__desc--center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.tbox-section__desc--start {
  max-width: var(--width-desc);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

/* When the heading is left-aligned (--start variant),
the following description
   should track the heading's left edge instead of centering. */
.tbox-section__heading--start + .tbox-section__desc {
  max-width: var(--width-desc);
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.tbox-section__desc--sub {
  font-size: var(--fs-base);
  margin-top: calc(var(--space-md) * -0.5);
}

/* Dark section heading/desc color overrides — placed after base selectors to satisfy source-order rules */
.tbox-section--dark .tbox-section__heading,
.tbox-section--dark .tbox-section__desc {
  color: var(--text-on-dark);
}

.tbox-section--dark .tbox-section__desc {
  color: var(--text-on-dark-soft);
}

/* stylelint-disable no-descending-specificity */
/* Subsection headings/copy in modern section containers.
   Keeps legacy global h3/h4 rules from leaking into page-body subsection blocks. */
.tbox-section .tbox-container > :is(h3, h4):not(.tbox-card__heading):not(.tbox-section__heading) {
  font-family: inherit;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  letter-spacing: var(--ls-normal);
  line-height: var(--lh-snug);
  margin: 2rem 0 0.75rem;
  padding: 0;
  text-align: left;
}

.tbox-section .tbox-container > h3:not(.tbox-card__heading):not(.tbox-section__heading) {
  font-size: var(--fs-heading-md);
}

.tbox-section .tbox-container > h4:not(.tbox-card__heading):not(.tbox-section__heading) {
  font-size: var(--fs-heading-sm);
}

/* Keep section body paragraphs visually consistent when mixed desc/plain copy is used. */
.tbox-section .tbox-container > p.tbox-section__desc + p,
.tbox-section .tbox-container > p.tbox-section__desc + p + p,
.tbox-section .tbox-container > :is(h3, h4):not(.tbox-card__heading):not(.tbox-section__heading) + p,
.tbox-section .tbox-container > :is(h3, h4):not(.tbox-card__heading):not(.tbox-section__heading) + p + p {
  max-width: var(--width-desc);
  margin-left: auto;
  margin-right: auto;
  line-height: var(--lh-loose);
}
/* stylelint-enable no-descending-specificity */

/* --- Card accent-top variant --- */

.tbox-card--accent-top {
  border-top: 3px solid var(--brand-primary);
}

#tbox-portability-note-card {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-ah-bento-hero-card .tbox-card__icon svg {
  width: 16px;
  height: 16px;
  color: rgb(255 255 255 / 85%);
  stroke: rgb(255 255 255 / 85%);
}

.tbox-standard-features-grid--bento-cloud [data-bento-slot="ha"] :is(.tbox-feature-card__icon, .tbox-card__icon) svg {
  color: var(--text-inverse);
}

.tbox-standard-features-grid--bento-cloud [data-bento-slot="ha"] .tbox-ha-caption svg {
  color: var(--brand-highlight, var(--brand-highlight));
}

/* Cloud VPS bento color overrides removed — replaced by data-feature-cat system (see icon color section) */

/* Icon color change on card hover (no scale) */
.tbox-standard-features-grid > :is(div, article):not(.tbox-topology-title):not(.tbox-topology-body):not(.tbox-topology-media):hover :is(.icon, .tbox-card__icon) svg {
  color: var(--brand-primary);
}

#tbox-portability-note-card > svg {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--brand-primary);
}

#content .tbox-wp-region-heading {
  text-align: center;
  margin-bottom: var(--space-md);
}

@media (width <= 600px) {
  .tbox-section {
    padding: var(--space-3xl-plus) 0;
  }
}

.tbox-standard-features {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-3xl) 0;
}

/* Standard Features cards grid */
.tbox-standard-features-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-md);
  grid-auto-rows: minmax(140px, auto);
}

/* stylelint-disable-next-line no-descending-specificity -- cascade override: must follow base 12-column rule */
.tbox-standard-features-grid--split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}

/* stylelint-disable-next-line no-descending-specificity -- sibling p,
not descendant p inside cards */
.tbox-standard-features-grid + p:not([class]) {
  margin-top: var(--space-lg);
}

p:not([class]) + :is(.tbox-standard-features-grid, .tbox-topology-grid) {
  margin-top: var(--space-lg);
}

/* display: grid promoted out of :where() to beat article { display: block } reset at (0,0,1) */
.tbox-standard-features-grid > :is(div, article) {
  display: grid;
}

:where(.tbox-standard-features-grid > :is(div, article)) {
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  align-items: start;
  align-content: start;
  gap: var(--space-xs) var(--space-md);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-card);
  box-shadow: var(--shadow-card);
  transition: background-color var(--ease-base), box-shadow var(--ease-base);
}

:where(.tbox-standard-features-grid > :is(div, article)):hover {
  background: var(--surface-subtle);
  box-shadow: var(--shadow-card-hover);
}

/* ── Bento card surface tints (keyed to data-feature-cat on icon) ──
   Sets --_card-tint / --_card-border-tint / --icon-color private props so
   higher-specificity dark-mode rules can consume them via var(<fallback>).
   --icon-color is forwarded here because the dark-mode accent-top border rule
   reads it from the card (article) level; the child icon element still wins
   via its own directly-declared --icon-color (specificity 0,2,0 beats inherit). */
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="data"]) {
  --_card-tint: var(--card-tint-cyan);
  --_card-border-tint: var(--card-border-cyan);
  --icon-color: var(--color-cyan, #06B6D4);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="security"]) {
  --_card-tint: var(--card-tint-green);
  --_card-border-tint: var(--card-border-green);
  --icon-color: var(--success);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="performance"]) {
  --_card-tint: var(--card-tint-cyan);
  --_card-border-tint: var(--card-border-cyan);
  --icon-color: var(--color-cyan, #06B6D4);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="developer"]) {
  --_card-tint: var(--card-tint-teal);
  --_card-border-tint: var(--card-border-teal);
  --icon-color: var(--color-teal);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="resilience"]) {
  --_card-tint: var(--card-tint-blue);
  --_card-border-tint: var(--card-border-blue);
  --icon-color: var(--brand-primary);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="management"]) {
  --_card-tint: var(--card-tint-slate);
  --_card-border-tint: var(--card-border-slate);
  --icon-color: var(--color-slate, #64748B);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="infrastructure"]) {
  --_card-tint: var(--card-tint-blue);
  --_card-border-tint: var(--card-border-blue);
  --icon-color: var(--brand-primary);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="destructive"]) {
  --_card-tint: var(--card-tint-red);
  --_card-border-tint: var(--card-border-red);
  --icon-color: var(--color-red);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}

/* Hover: strengthen tint */
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="data"]):hover {
  --_card-tint: var(--card-tint-cyan-hover);
  background: var(--_card-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="security"]):hover {
  --_card-tint: var(--card-tint-green-hover);
  background: var(--_card-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="performance"]):hover {
  --_card-tint: var(--card-tint-cyan-hover);
  background: var(--_card-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="developer"]):hover {
  --_card-tint: var(--card-tint-teal-hover);
  background: var(--_card-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="resilience"]):hover {
  --_card-tint: var(--card-tint-blue-hover);
  background: var(--_card-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="management"]):hover {
  --_card-tint: var(--card-tint-slate-hover);
  background: var(--_card-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="infrastructure"]):hover {
  --_card-tint: var(--card-tint-blue-hover);
  background: var(--_card-tint);
}
.tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="destructive"]):hover {
  --_card-tint: var(--card-tint-red-hover);
  background: var(--_card-tint);
}

/* ── Spotlight card modifier ──
   Dark gradient card for lead/hero features. Composable with data-feature-cat
   (icon color still applies via the child icon element). */
.tbox-card--spotlight {
  background: var(--brand-primary-deep) !important;
  border: none !important;
  color: var(--text-inverse);
  position: relative;
  overflow: hidden;
}

.tbox-card--spotlight:hover {
  background: var(--brand-primary-deep) !important;
}

/* Spotlight card — no decorative pseudo-elements */

.tbox-card--spotlight > * {
  position: relative;
  z-index: 1;
}

.tbox-card--spotlight :is(.tbox-feature-card__icon, .tbox-card__icon) {
  background: var(--icon-bg-inverse) !important;
  border: 0 !important;
}

.tbox-card--spotlight :is(.tbox-feature-card__icon, .tbox-card__icon) svg {
  color: var(--text-inverse) !important;
}

.tbox-card--spotlight .tbox-card__heading {
  color: var(--text-inverse);
}

.tbox-card--spotlight .tbox-card__text {
  color: var(--gray-200);
}

.tbox-card--spotlight .tbox-card__link {
  color: var(--gray-200);
}

/* ── Category label ──
   Full-width heading that groups cards within a standard-features-grid.
   Place as a direct child of the grid before each card group.
   Must use !important on grid-column to beat bento-repack dense packing. */
.tbox-standard-features-grid__category-label {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-tertiary);
  margin: var(--space-lg) 0 0;
  padding: 0 0 var(--space-xs) !important;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  transform: none !important;
  min-height: auto;
}

.tbox-standard-features-grid__category-label:first-child {
  margin-top: 0;
}

.tbox-standard-features-grid__category-label::before {
  content: '';
  width: 3px;
  height: 14px;
  border-radius: 2px;
  flex-shrink: 0;
  background: var(--icon-color, var(--brand-primary));
}

/* Optional tone helpers for card-level tinting without inline styles. */
.tbox-card--tone-teal {
  --_card-tint: var(--card-tint-teal);
  --_card-border-tint: var(--card-border-teal);
  --icon-color: var(--color-teal);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}

.tbox-card--tone-cyan {
  --_card-tint: var(--card-tint-cyan);
  --_card-border-tint: var(--card-border-cyan);
  --icon-color: var(--color-cyan, #06B6D4);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}

.tbox-card--tone-orange {
  --_card-tint: var(--card-tint-blue);
  --_card-border-tint: var(--card-border-blue);
  --icon-color: var(--brand-primary);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}

.tbox-card--tone-blue {
  --_card-tint: var(--card-tint-blue);
  --_card-border-tint: var(--card-border-blue);
  --icon-color: var(--brand-primary);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}

.tbox-card--tone-green {
  --_card-tint: var(--card-tint-green);
  --_card-border-tint: var(--card-border-green);
  --icon-color: var(--success);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}

.tbox-card--tone-slate {
  --_card-tint: var(--card-tint-slate);
  --_card-border-tint: var(--card-border-slate);
  --icon-color: var(--color-slate, #64748B);
  background: var(--_card-tint);
  border-color: var(--_card-border-tint);
}

:where(.tbox-standard-features-grid .icon,
       .tbox-standard-features-grid .tbox-card__icon) {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--icon-color, var(--brand-primary));
}

.tbox-standard-features-grid .tbox-card__content {
  display: contents;
}

:where(.tbox-standard-features-grid .tbox-card__heading,
       .tbox-standard-features-grid > :is(div, article) :is(h3, h4, h5)) {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  margin: 0;
  text-align: left;
}

.tbox-standard-features-grid .tbox-card__heading {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

/* Reset heading margin/padding/typography for card titles — beats type-selector resets.
   Targets direct-child headings and headings inside .tbox-card__content (display:contents). */
.tbox-standard-features-grid > :is(div, article) > :is(h3, h4, h5),
.tbox-standard-features-grid > :is(div, article) > .tbox-card__content > :is(h3, h4, h5) {
  margin: 0;
  padding: 0;
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

:where(.tbox-standard-features-grid > :is(div, article) > p:first-of-type,
       .tbox-standard-features-grid > :is(div, article) .tbox-card__content > p:first-of-type) {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: var(--fs-base);
  color: var(--text-muted);
  margin: 0;
  align-self: start;
  text-align: left;
  line-height: var(--lh-relaxed);
}

/* Spacing between consecutive paragraphs in grid cards (direct children) */

/* Let additional direct-child paragraphs flow naturally after the first */

/* Same rules for paragraphs wrapped in .tbox-card__content (display: contents) */

.tbox-standard-features-grid > :is(div, article) :is(.icon, .tbox-card__icon) {
  margin: 0;
  line-height: 1;
}

/* Feature-card icons align to the first heading line instead of centering
   against the full heading block, so they don't float mid-heading when
   titles wrap on narrow viewports. Offset re-centers the 18px glyph
   within one --fs-heading-sm line. */
.tbox-standard-features-grid > .tbox-card--feature > .tbox-card__icon {
  align-self: start;
  margin-top: calc((var(--fs-heading-sm) * var(--lh-snug) - 18px) / 2);
}

/* === .tbox-card__link (--feature context: arrow CTA link) ===
   Canonical arrow source for card-link CTAs. Do NOT also include inline
   `&rarr;` / `→` glyphs in the HTML — that produces a "→→" double-arrow.
   Page authors: use plain link text, the arrow renders here. */

.tbox-card__link::after {
  content: "\00A0\2192";
  display: inline-block;
  transition: transform var(--ease-base);
}

.tbox-card__link:hover::after {
  transform: translateX(3px);
}

.tbox-card--bento-hero .tbox-ha-animation {
  position: absolute;
  top: 12px;
  right: 16px;
  z-index: 1;
  pointer-events: none;
}

.tbox-standard-features-grid > .tbox-card--bento-hero .tbox-ha-animation {
  grid-column: 1 / -1;
  grid-row: 3;
  align-self: start;
}

/* Cloud VPS hero: keep HA animation under description and left aligned. */
.tbox-standard-features-grid--bento-cloud [data-bento-slot="ha"] .tbox-ha-animation {
  position: relative;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  width: clamp(240px, 22vw, 280px);
  pointer-events: none;
  align-self: center;
}

.tbox-standard-features-grid > .tbox-card--bento-hero.tbox-card--highlight .tbox-ha-animation {
  position: relative;
  top: auto;
  right: auto;
  justify-self: start;
  margin-top: var(--space-xs);
}

.tbox-card--bento-hero .tbox-ha-stage {
  --ha-dur: 11s;
  --ha-node-w: 120px;
  --ha-node-h: 110px;
  --ha-gap: 10px;
  --ha-travel-x: calc(var(--ha-node-w) + var(--ha-gap));
  --ha-vm-green: rgb(16 185 129 / 85%);
  --ha-vm-green-border: rgb(16 185 129 / 70%);
  --ha-vm-green-outline-soft: rgb(16 185 129 / 25%);
  --ha-vm-red: rgb(239 68 68 / 92%);
  --ha-vm-red-border: rgb(239 68 68 / 70%);
  --ha-vm-red-glow-soft: rgb(239 68 68 / 20%);
  --ha-node-border-fail: rgb(239 68 68 / 60%);

  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: var(--ha-gap);
  position: relative;
  padding: 10px 12px 4.5rem;
  border-radius: var(--radius-12);
  background: var(--surface-base);
  border: 1px solid var(--tbox-hvps-border, var(--brand-primary-bg-18));
  box-shadow:
    0 4px 16px var(--overlay-12),
    inset 0 0 0 1px var(--brand-primary-08);
  overflow: hidden;
}

.tbox-standard-features-grid--bento-cloud [data-bento-slot="ha"] .tbox-ha-stage {
  background: var(--overlay-20);
  border-color: var(--surface-glass-08);
  box-shadow: none;
}

.tbox-standard-features-grid > .tbox-card--bento-hero.tbox-card--highlight .tbox-ha-stage {
  justify-content: flex-start;
}

.tbox-card--bento-hero .tbox-ha-caption {
  position: absolute;
  bottom: 0.5rem;
  left: 0;
  right: 0;
  height: 4em;
  text-align: center;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark-muted);
  overflow: hidden;
}

.tbox-standard-features-grid > .tbox-card--bento-hero.tbox-card--highlight .tbox-ha-caption {
  text-align: center;
}

/* Keep the Cloud VPS highlighted hero card from stretching rows,
otherwise the HA animation gets clipped by card overflow on desktop. */
.tbox-standard-features-grid > .tbox-card--bento-hero.tbox-card--highlight {
  align-content: start;
}

.tbox-standard-features-grid .tbox-card__content > .tbox-card__text {
  grid-column: 1 / -1;
}

.tbox-standard-features-grid .tbox-card__text { /* stylelint-disable-line no-descending-specificity */
  color: var(--text-secondary);
  margin-top: 0;
}

/* ============================================
   Standard Features: Bento layout rules
   - Opt-in classes supported, but works without them via nth-child.
   ============================================ */

/* Tile sizes (explicit) */
.tbox-standard-features-grid > .tbox-card--bento-hero {
  grid-column: span 7;
  grid-row: span 2;
}

.tbox-standard-features-grid > .tbox-card--bento-hero::before {
  content: none;
}

.tbox-standard-features-grid > .tbox-card--bento-stack {
  grid-column: span 5;
}

.tbox-standard-features-grid > .tbox-card--bento-med {
  grid-column: span 4;
}

.tbox-standard-features-grid > .tbox-card--full-width {
  grid-column: 1 / -1;
  grid-template-columns: auto 1fr auto;
}

/* Tile sizes (implicit defaults when explicit classes are not present) */
.tbox-standard-features-grid > :nth-child(1):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero) {
  grid-column: span 7;
  grid-row: span 2;
}

.tbox-standard-features-grid > :nth-child(2):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero),
.tbox-standard-features-grid > :nth-child(3):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero) {
  grid-column: span 5;
}

.tbox-standard-features-grid > :nth-child(4):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero),
.tbox-standard-features-grid > :nth-child(5):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero),
.tbox-standard-features-grid > :nth-child(6):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero) {
  grid-column: span 4;
}

/* Reset bento column/row spans inside split grids — must follow base nth-child rules to win cascade */
.tbox-standard-features-grid--split > :nth-child(n):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero) {
  grid-column: span 1;
  grid-row: span 1;
}

@media (width <= 1024px) {
  .tbox-standard-features-grid {
    grid-template-columns: repeat(8, minmax(0, 1fr));
  }

  .tbox-standard-features-grid > .tbox-card--bento-hero,
.tbox-standard-features-grid > :nth-child(1):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero) {
    grid-column: span 5;
    grid-row: span 2;
  }

  .tbox-standard-features-grid > .tbox-card--bento-stack,
.tbox-standard-features-grid > :nth-child(2):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero),
.tbox-standard-features-grid > :nth-child(3):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero) {
    grid-column: span 3;
  }

  .tbox-standard-features-grid > .tbox-card--bento-med,
.tbox-standard-features-grid > :nth-child(4):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero),
.tbox-standard-features-grid > :nth-child(5):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero),
.tbox-standard-features-grid > :nth-child(6):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero) {
    grid-column: span 4;
  }

  .tbox-standard-features-grid > .tbox-card--full-width {
    grid-column: 1 / -1;
  }
}

@media (width <= 768px) {
  .tbox-standard-features-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tbox-standard-features-grid > *,
.tbox-standard-features-grid > .tbox-card--bento-stack,
.tbox-standard-features-grid > .tbox-card--bento-med {
    grid-column: span 1;
  }

  .tbox-standard-features-grid > .tbox-card--bento-hero,
.tbox-standard-features-grid > .tbox-card--full-width,
.tbox-standard-features-grid > :nth-child(1):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero) {
    grid-column: 1 / -1;
    grid-row: auto;
  }
}

@media (width <= 600px) {
  .tbox-standard-features-grid {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .tbox-standard-features-grid > * {
    grid-column: 1 / -1;
  }

  .tbox-standard-features-grid > .tbox-card--full-width {
    grid-template-columns: auto 1fr;
  }

  .tbox-standard-features-grid > .tbox-card--full-width .tbox-card__link {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* ============================================
   Grid modifier: --feature-cards
   Explicit replacement for legacy bare grid roots.
   Keeps icon+content feature-card layout without
   bento nth-child spanning behavior.
   ============================================ */
.tbox-standard-features-grid--feature-cards {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}

.tbox-standard-features-grid--feature-cards > :is(div, article, a):not(.tbox-card--full-width):nth-child(n) {
  grid-column: span 1 !important;
  grid-row: auto !important;
}

.tbox-standard-features-grid--feature-cards > .tbox-card--full-width {
  grid-column: 1 / -1 !important;
}

@media (width <= 900px) {
  .tbox-standard-features-grid--feature-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (width <= 600px) {
  .tbox-standard-features-grid--feature-cards {
    grid-template-columns: 1fr;
  }
}

/* Spacing between consecutive feature-cards grids (e.g. SQL topology sections) */
.tbox-standard-features-grid--feature-cards + .tbox-standard-features-grid--feature-cards {
  margin-top: var(--space-xl);
}

/* Topology wrappers inside feature-cards are content containers, not grid cards.
   Strip card visual properties applied by :where(.tbox-standard-features-grid > div/article).
   :is(div, article) + :is(.tbox-topology-*) + :nth-child(n) = (0,3,1) — ties
   line 3330's span-1 rule and wins by source order. */
.tbox-standard-features-grid--feature-cards > :is(div, article):is(.tbox-topology-title, .tbox-topology-body, .tbox-topology-media):nth-child(n) {
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: none;
  box-shadow: none;
  transition: none;
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

/* Title and body are block containers with neutralized card grid internals.
   Media keeps display:grid and grid-template-* from .tbox-runtime-layout. */
.tbox-standard-features-grid--feature-cards > .tbox-topology-title,
.tbox-standard-features-grid--feature-cards > .tbox-topology-body {
  display: block;
  grid-template-columns: initial;
  grid-template-rows: initial;
  gap: initial;
  align-items: initial;
  align-content: initial;
}

/* Prevent hover/active card effects on topology wrappers */
.tbox-standard-features-grid--feature-cards > :is(div, article):is(.tbox-topology-title, .tbox-topology-body, .tbox-topology-media):hover {
  background: transparent;
  transform: none;
  box-shadow: none;
}

.tbox-standard-features-grid--feature-cards > :is(div, article):is(.tbox-topology-title, .tbox-topology-body, .tbox-topology-media):active {
  transform: none;
  box-shadow: none;
}

/* Bento size hints inside feature-cards grids */
.tbox-standard-features-grid--feature-cards > [data-bento-size="lg"]:nth-child(n) {
  grid-column: span 2 !important;
}

.tbox-standard-features-grid--feature-cards > [data-bento-size="full"]:nth-child(n) {
  grid-column: 1 / -1 !important;
}

@media (width <= 600px) {
  .tbox-standard-features-grid--feature-cards > [data-bento-size]:nth-child(n) {
    grid-column: span 1 !important;
  }
}

/* Reset bento-size spans when --two-col collapses to 1-col at <=768px */
@media (width <= 768px) {
  .tbox-standard-features-grid--feature-cards.tbox-standard-features-grid--two-col > [data-bento-size]:nth-child(n) {
    grid-column: 1 / -1 !important;
  }
}

/* Topology side-by-side layout:
   add this modifier on the parent grid when body + media are sibling items. */
.tbox-standard-features-grid.tbox-standard-features-grid--topology-side-by-side > .tbox-topology-title:nth-child(n) {
  grid-column: 1 / -1 !important;
}

.tbox-standard-features-grid.tbox-standard-features-grid--topology-side-by-side > .tbox-topology-body:nth-child(n) {
  grid-column: 1 / 7 !important;
}

.tbox-standard-features-grid.tbox-standard-features-grid--topology-side-by-side > .tbox-topology-media:nth-child(n) {
  grid-column: 7 / -1 !important;
  align-self: center;
}

.tbox-standard-features-grid.tbox-standard-features-grid--topology-side-by-side > .tbox-topology-media :is(img, div img) {
  margin-bottom: 0;
}

@media (width <= 900px) {
  .tbox-standard-features-grid.tbox-standard-features-grid--topology-side-by-side > .tbox-topology-body:nth-child(n),
.tbox-standard-features-grid.tbox-standard-features-grid--topology-side-by-side > .tbox-topology-media:nth-child(n) {
    grid-column: 1 / -1 !important;
  }
}

/* Topology compact grid — image + flex-stacked cards.
   Cards size to content (no grid row-equalization). */
.tbox-topology-grid {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
  gap: var(--space-lg);
  align-items: start;
}

/* Override base .tbox-standard-features-grid grid behavior → flex column */
.tbox-topology-grid__cards.tbox-standard-features-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* Topology bento repack (opt-in):
   promote topology cards to parent grid items so dense packing can
   move overflow cards below the media cell at intermediate widths. */
@media (width > 900px) {
  .tbox-topology-grid--bento-repack {
    --tbox-topo-repack-media-span: 7;
    --tbox-topo-repack-card-span: 5;
    --tbox-topo-repack-media-row-span: 3;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
  }

  .tbox-topology-grid--bento-repack > .tbox-card--media[data-bento-size="hero"] {
    grid-column: span var(--tbox-topo-repack-media-span);
    grid-row: span var(--tbox-topo-repack-media-row-span);
    align-self: stretch;
  }

  .tbox-topology-grid--bento-repack > .tbox-card--media[data-bento-size="hero"] img {
    max-height: 320px;
    object-fit: contain;
  }

  .tbox-topology-grid--bento-repack > .tbox-topology-grid__cards > :is(div, article) {
    align-self: stretch;
  }

  .tbox-topology-grid--bento-repack > .tbox-topology-grid__cards.tbox-standard-features-grid {
    display: contents;
  }

  .tbox-topology-grid--bento-repack > .tbox-topology-grid__cards > :is(div, article)[data-bento-size="sm"],
  .tbox-topology-grid--bento-repack > .tbox-topology-grid__cards > :is(div, article):not([data-bento-size]) {
    grid-column: span var(--tbox-topo-repack-card-span) !important;
    grid-row: auto !important;
  }

  .tbox-topology-grid--bento-repack > .tbox-topology-grid__cards > :is(div, article)[data-bento-size="md"] {
    grid-column: span 6 !important;
  }

  .tbox-topology-grid--bento-repack > .tbox-topology-grid__cards > :is(div, article)[data-bento-size="lg"] {
    grid-column: span 7 !important;
  }

  .tbox-topology-grid--bento-repack > .tbox-topology-grid__cards > :is(div, article)[data-bento-size="full"],
  .tbox-topology-grid--bento-repack > .tbox-topology-grid__cards > div.tbox-extras-checklist:not([data-bento-size]) {
    grid-column: 1 / -1 !important;
  }

  /* Extras tier and CTA card placed as direct children of topology grid */
  .tbox-topology-grid--bento-repack > .tbox-bento-extras,
  .tbox-topology-grid--bento-repack > .tbox-bento-cta-card[data-bento-size="full"],
  .tbox-topology-grid--bento-repack > .tbox-callout--icon {
    grid-column: 1 / -1;
  }
}

@media (width <= 900px) {
  .tbox-topology-grid {
    grid-template-columns: 1fr;
  }
}

/* Reset base card grid-template-columns and gap on media (but NOT grid-template-rows,
   which .tbox-runtime-layout sets to 1fr and must be preserved). */

/* Topology diagrams: ensure responsive scaling within feature-card grid cells */

/* ============================================
   Grid modifier: --content-split bento opt-out
   Two equal long-form content cards (e.g. /case-studies/).
   Must follow the bento nth-child span rules and their media
   blocks so the reset wins the cascade at every breakpoint.
   ============================================ */
.tbox-standard-features-grid--content-split {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
}

/* Case-studies index: peer proof cards present as equals, so stretch
   both to the taller card's height. Scoped so /contact-us/ keeps its
   start-aligned form/info pair. */
.tbox-case-studies .tbox-standard-features-grid--content-split {
  align-items: stretch;
}

/* Pin each card's actions to the bottom of the stretched pair so both
   "Read case study" buttons and their meta rows share a baseline. */
.tbox-case-studies .tbox-standard-features-grid--content-split > .tbox-content-card {
  display: flex;
  flex-direction: column;
}

.tbox-case-studies .tbox-standard-features-grid--content-split > .tbox-content-card .tbox-cta-section__actions {
  margin-top: auto;
}

.tbox-standard-features-grid--content-split > :is(div, article):nth-child(n) {
  grid-column: span 1 !important;
  grid-row: auto !important;
}

@media (width <= 900px) {
  .tbox-standard-features-grid--content-split {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Database Clusters — tabbed engine selector
   ============================================ */
.dbcl-tabs {
  display: flex;
  border-bottom: 2px solid var(--border-light);
  margin-bottom: var(--space-xl);
}
.dbcl-tab {
  padding: 0.75rem 1.25rem;
  cursor: pointer;
  font-family: var(--ff-heading, 'Varela Round', sans-serif);
  font-size: var(--fs-label);
  font-weight: 600;
  color: var(--text-secondary);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  transition: color 0.15s, border-color 0.15s;
}
.dbcl-tab:hover { color: var(--text-primary); }
.dbcl-tab[aria-selected="true"] {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}
.dbcl-panel { display: none; }
.dbcl-panel[data-active] { display: block; }
.dbcl-panel__layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}
.dbcl-panel__image img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg, 12px);
}
.dbcl-panel__features {
  display: grid;
  gap: var(--space-lg);
}
.dbcl-panel__feature :is(h3, h4) {
  margin: 0 0 0.25rem;
  font-size: var(--fs-base);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: 6px;
}
.dbcl-panel__feature :is(h3, h4) .material-symbols-outlined {
  font-size: 18px;
  color: var(--brand-primary);
}
.dbcl-panel__feature p {
  margin: 0;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: 1.55;
}
.dbcl-problem-sub {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0 0 var(--space-lg);
  line-height: 1.5;
}
.dbcl-section-footnote {
  margin: var(--space-xl) 0 0;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  text-align: center;
}

/* Comparison table */
.dbcl-compare { overflow-x: auto; }
.dbcl-compare table { width: 100%; border-collapse: collapse; font-size: var(--fs-base); }
.dbcl-compare th,
.dbcl-compare td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-light); }
.dbcl-compare th {
  font-weight: 600;
  color: var(--text-primary);
  background: var(--surface-alt, #f8fafc);
  white-space: nowrap;
}
.dbcl-compare tbody th {
  color: var(--text-secondary);
  background: transparent;
}
.dbcl-compare td { color: var(--text-secondary); }
.dbcl-compare tbody tr:hover { background: var(--brand-primary-04); }
:root[data-theme="dark"] .dbcl-compare th { background: var(--surface-raised, #1e293b); }
:root[data-theme="dark"] .dbcl-compare tbody th { background: transparent; }

@media (max-width: 768px) {
  .dbcl-panel__layout { grid-template-columns: 1fr; }
  .dbcl-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .dbcl-tab { white-space: nowrap; }
}

/* stylelint-disable no-duplicate-selectors -- route polish intentionally layers over earlier database-cluster base selectors. */
/* Database Clusters route polish */
.dbcl-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(22rem, 0.54fr);
  align-items: center;
  gap: clamp(2.25rem, 5vw, 5rem);
  max-width: min(1160px, 92vw);
  text-align: left;
}

.dbcl-hero__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
  min-width: 0;
}

#content .dbcl-hero .tbox-hero-v3__title,
.dbcl-hero .tbox-hero-v3__title {
  max-width: 16ch;
  margin-inline: 0;
}

#content .dbcl-hero .tbox-hero-v3__subtitle,
.dbcl-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  margin-inline: 0;
  color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
}

.dbcl-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-top: var(--space-sm);
}

.dbcl-hero__diagram {
  gap: var(--space-md);
  padding: clamp(1.1rem, 2.4vw, 1.65rem);
}

.dbcl-hero__diagram-head {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: color-mix(in srgb, var(--text-inverse) 88%, transparent);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.dbcl-hero__diagram-head .material-symbols-outlined {
  color: var(--brand-cta);
  font-size: 1.15rem;
}

.dbcl-hero__diagram-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.85fr) minmax(1rem, 0.4fr) minmax(5.5rem, 1fr) minmax(1rem, 0.4fr) minmax(5rem, 0.9fr);
  align-items: center;
  gap: var(--space-xs);
}

.dbcl-hero__diagram-row :where(span, strong),
.dbcl-hero__replicas span {
  min-width: 0;
  padding: 0.62rem 0.7rem;
  border: 1px solid var(--text-inverse-14);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--brand-primary-deep) 76%, var(--brand-primary-light) 24%);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
}

.dbcl-hero__diagram-row strong {
  background: color-mix(in srgb, var(--brand-cta) 84%, var(--surface-base) 16%);
  color: var(--text-primary);
}

.dbcl-hero__diagram-row i {
  height: 1px;
  min-width: 1.5rem;
  background: color-mix(in srgb, var(--text-inverse) 34%, transparent);
}

.dbcl-hero__replicas {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--text-inverse-14);
}

.dbcl-hero__replicas span {
  background: color-mix(in srgb, var(--surface-dark) 82%, var(--brand-primary-light) 18%);
  color: color-mix(in srgb, var(--text-inverse) 88%, transparent);
}

.dbcl-hero__diagram p {
  max-width: 34ch;
  margin: 0;
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.dbcl-topology-matrix {
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.dbcl-topology-matrix .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--surface-base) 82%, var(--brand-primary-bg) 18%);
}

.dbcl-topology-matrix .tbox-feature-matrix__row {
  align-items: center;
  background: var(--surface-base);
}

.dbcl-topology-matrix .tbox-chip {
  justify-self: end;
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--brand-primary-bg) 78%, var(--surface-base) 22%);
  color: var(--brand-primary-text);
}

.dbcl-tabs {
  gap: var(--space-xs);
  margin-bottom: var(--space-lg);
  padding: var(--space-xs);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary) 8%) inset;
}

.dbcl-tab {
  min-height: 42px;
  margin-bottom: 0;
  padding: 0.65rem 1rem;
  border: 1px solid transparent;
  border-radius: var(--radius-sm-plus);
  line-height: var(--lh-snug);
  transition: background-color 0.16s ease-out, border-color 0.16s ease-out, color 0.16s ease-out;
}

.dbcl-tab:hover {
  border-color: var(--border-light);
  background: var(--surface-alt);
}

.dbcl-tab[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border-light) 72%);
  background: var(--brand-primary-bg);
}

.dbcl-panel[data-active] {
  padding: var(--space-xl);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 12%) inset;
}

.dbcl-panel__image {
  padding: var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-alt) 86%, var(--surface-base) 14%);
}

.dbcl-panel__image img {
  border-radius: var(--radius-sm-plus);
}

.dbcl-panel__features {
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--border-light);
}

.dbcl-panel__feature {
  padding: var(--space-lg);
  background: var(--surface-base);
}

.dbcl-panel__feature :is(h3, h4) {
  line-height: var(--lh-snug);
}

.dbcl-problem-sub {
  margin-bottom: var(--space-md);
  color: var(--text-primary);
  font-weight: 600;
}

#sql-clustering .tbox-ui-proof {
  border-radius: var(--radius-md);
  box-shadow: none;
}

#sql-clustering .tbox-ui-proof__media {
  border-radius: var(--radius-sm-plus);
}

#sql-clustering .tbox-ui-proof__image,
#sql-clustering .tbox-ui-proof__video {
  border-radius: var(--radius-sm-plus);
}

.dbcl-compare {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary) 10%) inset;
}

.dbcl-compare table {
  min-width: 760px;
}

.dbcl-compare :where(th, td) {
  vertical-align: top;
}

.dbcl-compare th {
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-base) 84%, var(--brand-primary-bg) 16%);
}

.dbcl-split {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(1.5rem, 4vw, 3.25rem);
  align-items: start;
}

.dbcl-split--ops {
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
}

.dbcl-section-head {
  display: grid;
  gap: var(--space-md);
  max-width: 42rem;
}

#content .dbcl-section-head .tbox-section__heading,
.dbcl-section-head .tbox-section__heading,
#content .dbcl-section-head .tbox-section__desc,
.dbcl-section-head .tbox-section__desc {
  margin-inline: 0;
  text-align: left;
}

.dbcl-engine-rail,
.dbcl-ops-stack {
  display: grid;
  gap: var(--space-md);
}

.dbcl-engine-rail__item,
.dbcl-ops-stack li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: clamp(1rem, 2vw, 1.35rem);
  border: 1px solid var(--brand-primary-border-tint-16);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-bg) 14%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary) 10%) inset;
}

.dbcl-engine-rail__icon,
.dbcl-ops-stack .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 2.35rem;
  height: 2.35rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border-light) 76%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 78%, var(--brand-primary-bg) 22%);
  color: var(--brand-primary);
  font-size: 1.2rem;
  font-variation-settings: 'FILL' 1;
}

.dbcl-engine-rail__item h4,
.dbcl-ops-stack strong {
  display: block;
  margin: 0 0 var(--space-xs);
  color: var(--text-primary);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.dbcl-engine-rail__item p,
.dbcl-ops-stack p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.dbcl-engine-rail__item .tbox-offer-list {
  margin-top: var(--space-md);
}

.dbcl-ops-stack {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dbcl-fit-matrix .tbox-chip {
  justify-self: end;
  max-width: 32rem;
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--brand-primary-bg) 76%, var(--surface-base) 24%);
  color: var(--brand-primary-text);
  line-height: var(--lh-snug);
  white-space: normal;
}

:root[data-theme="dark"] .dbcl-topology-matrix,
:root[data-theme="dark"] .dbcl-tabs,
:root[data-theme="dark"] .dbcl-panel[data-active],
:root[data-theme="dark"] .dbcl-panel__image,
:root[data-theme="dark"] .dbcl-panel__features,
:root[data-theme="dark"] .dbcl-compare {
  border-color: var(--border-mid);
  background: var(--surface-base);
}

:root[data-theme="dark"] .dbcl-panel__image {
  background: var(--neutral-0);
}

:root[data-theme="dark"] .dbcl-topology-matrix .tbox-feature-matrix__row,
:root[data-theme="dark"] .dbcl-panel__feature {
  background: var(--surface-base);
}

:root[data-theme="dark"] .dbcl-engine-rail__item,
:root[data-theme="dark"] .dbcl-ops-stack li {
  border-color: var(--border-mid);
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 12%);
}

:root[data-theme="dark"] .dbcl-topology-matrix .tbox-feature-matrix__header,
:root[data-theme="dark"] .dbcl-tab:hover,
:root[data-theme="dark"] .dbcl-tab[aria-selected="true"],
:root[data-theme="dark"] .dbcl-compare th {
  background: color-mix(in srgb, var(--surface-base) 82%, var(--brand-primary) 18%);
}

:root[data-theme="dark"] .dbcl-panel__features {
  background: var(--border-mid);
}

@media (width <= 768px) {
  .dbcl-hero .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
  }

  .dbcl-hero .tbox-hero-v3__inner,
.dbcl-hero.tbox-hero-v3--compact {
    text-align: center;
  }

  .dbcl-hero__copy {
    justify-items: center;
  }

  .dbcl-hero .tbox-hero-v3__title,
.dbcl-hero .tbox-hero-v3__subtitle {
    margin-inline: auto;
  }

  .dbcl-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .dbcl-hero__diagram {
    width: min(100%, 24rem);
    margin-inline: auto;
  }

  .dbcl-panel[data-active] {
    padding: var(--space-lg);
  }

  .dbcl-tabs {
    scroll-snap-type: x proximity;
  }

  .dbcl-tab {
    scroll-snap-align: start;
  }

  .dbcl-split,
  .dbcl-split--ops {
    grid-template-columns: 1fr;
  }

  .dbcl-section-head {
    max-width: none;
  }
}

@media (width <= 460px) {
  .dbcl-hero__diagram {
    padding: var(--space-md);
  }

  .dbcl-hero__diagram-row {
    grid-template-columns: 1fr;
    justify-items: center;
  }

  .dbcl-hero__diagram-row :where(span, strong) {
    width: min(100%, 11rem);
  }

  .dbcl-hero__diagram-row i {
    width: 1px;
    height: 1rem;
    min-width: 0;
    margin-inline: auto;
  }

  .dbcl-hero__diagram-row span:first-child {
    min-width: 0;
  }

  .dbcl-hero__replicas {
    grid-template-columns: 1fr;
  }

  .dbcl-panel__layout {
    gap: var(--space-lg);
  }

  .dbcl-engine-rail__item,
  .dbcl-ops-stack li {
    grid-template-columns: 1fr;
  }

  .dbcl-fit-matrix .tbox-chip {
    justify-self: start;
  }
}
/* stylelint-enable no-duplicate-selectors */

/* ============================================
   Icon color system — custom properties
   Sets --icon-color, --icon-bg, and hover variants.
   Consumed by the icon container base rule above.
   Apply these classes to icon containers (.icon,
   .tbox-card__icon).
   ============================================ */
.tbox-icon--blue { --icon-color: var(--brand-primary); --icon-bg: var(--icon-bg-blue);   --icon-border: var(--icon-border-blue);   }
.tbox-icon--green { --icon-color: var(--success); --icon-bg: var(--icon-bg-green);  --icon-border: var(--icon-border-green);  }
.tbox-icon--orange { --icon-color: var(--brand-primary); --icon-bg: var(--icon-bg-blue);   --icon-border: var(--icon-border-blue);   }
.tbox-icon--red { --icon-color: var(--color-red); --icon-bg: var(--icon-bg-red);    --icon-border: var(--icon-border-red);    }
.tbox-icon--dark { --icon-color: var(--text-primary); --icon-bg: var(--icon-bg-dark);   --icon-border: var(--icon-border-dark);   }
.tbox-icon--teal { --icon-color: var(--color-teal); --icon-bg: var(--icon-bg-teal);  --icon-border: var(--icon-border-teal);  }

/* ============================================
   Feature-category icon colors (data-feature-cat)
   Semantic mapping: category → color via data attribute.
   Specificity 0,2,0 — beats legacy .tbox-icon--* (0,1,0).
   ============================================ */
:is(.tbox-card__icon, .tbox-feature-card__icon, .tbox-feature-matrix__icon)[data-feature-cat="security"] { --icon-color: var(--success);                  --icon-bg: var(--icon-bg-green);  --icon-border: var(--icon-border-green);  }
:is(.tbox-card__icon, .tbox-feature-card__icon, .tbox-feature-matrix__icon)[data-feature-cat="resilience"] { --icon-color: var(--brand-primary);             --icon-bg: var(--icon-bg-blue);   --icon-border: var(--icon-border-blue);   }
:is(.tbox-card__icon, .tbox-feature-card__icon, .tbox-feature-matrix__icon)[data-feature-cat="performance"] { --icon-color: var(--color-cyan, #06B6D4);       --icon-bg: var(--icon-bg-cyan);   --icon-border: var(--icon-border-cyan);   }
:is(.tbox-card__icon, .tbox-feature-card__icon, .tbox-feature-matrix__icon)[data-feature-cat="developer"] { --icon-color: var(--color-teal);       --icon-bg: var(--icon-bg-teal);   --icon-border: var(--icon-border-teal);   }
:is(.tbox-card__icon, .tbox-feature-card__icon, .tbox-feature-matrix__icon)[data-feature-cat="data"] { --icon-color: var(--color-cyan, #06B6D4);       --icon-bg: var(--icon-bg-cyan);   --icon-border: var(--icon-border-cyan);   }
:is(.tbox-card__icon, .tbox-feature-card__icon, .tbox-feature-matrix__icon)[data-feature-cat="infrastructure"] { --icon-color: var(--brand-primary);              --icon-bg: var(--icon-bg-blue);   --icon-border: var(--icon-border-blue);   }
:is(.tbox-card__icon, .tbox-feature-card__icon, .tbox-feature-matrix__icon)[data-feature-cat="management"] { --icon-color: var(--color-slate, #64748B);      --icon-bg: var(--icon-bg-slate);  --icon-border: var(--icon-border-slate);  }
:is(.tbox-card__icon, .tbox-feature-card__icon, .tbox-feature-matrix__icon)[data-feature-cat="destructive"] { --icon-color: var(--color-red);        --icon-bg: var(--icon-bg-red);    --icon-border: var(--icon-border-red);    }

/* ============================================
   Grid modifier: --two-col
   Forces 2-column equal layout, bypassing bento nth-child spans.
   Use for simple side-by-side sections (2-4 cards).
   ============================================ */
.tbox-standard-features-grid--two-col {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-lg);
}

.tbox-standard-features-grid--two-col > :is(div, article, a):nth-child(n) {
  grid-column: span 1 !important;
  grid-row: auto !important;
}

@media (width <= 768px) {
  .tbox-standard-features-grid--two-col {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Grid modifier: --content-cards
   Larger padding, no icon column, 2-col grid.
   For comparison sections (SQL vs NoSQL, etc.).
   ============================================ */
.tbox-standard-features-grid--content-cards {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-xl);
  margin-top: var(--space-lg-plus);
}

.tbox-standard-features-grid--content-cards > :is(div, article):nth-child(n) {
  grid-column: span 1 !important;
  grid-row: auto !important;
  grid-template-columns: 1fr;
  padding: var(--space-xl);
}

/* Single-card content grids should render full-width rather than occupying a half column. */
.tbox-standard-features-grid--content-cards:has(> :is(div, article):only-child) {
  grid-template-columns: 1fr;
}

/* Keep non-card children (notes/inline copy) full-width in content-card grids.
   Use !important to override base bento nth-child span defaults. */
.tbox-standard-features-grid--content-cards > :not(:is(div, article)):nth-child(n) {
  grid-column: 1 / -1 !important;
  grid-row: auto !important;
}

.tbox-standard-features-grid--content-cards > :is(div, article) :is(h3, h4, h5) {
  grid-column: 1;
  grid-row: 1;
}

.tbox-standard-features-grid--content-cards > :is(div, article) :is(h3, h4, h5):first-child {
  margin-top: 0;
}

/* Content-cards with icons: switch to inline icon+heading grid */
.tbox-standard-features-grid--content-cards > :is(div, article):has(.tbox-card__icon) {
  grid-template-columns: auto 1fr;
}

.tbox-standard-features-grid--content-cards > :is(div, article):has(.tbox-card__icon) > :is(h3, h4, h5) {
  grid-column: 2;
  grid-row: 1;
}

.tbox-standard-features-grid--content-cards > :is(div, article):has(.tbox-card__icon) > :not(:is(h3, h4, h5, .tbox-card__icon)) {
  grid-column: 1 / -1;
}

/* --- Global offer list (checkmark bullets via CSS ::before) --- */

.tbox-offer-list {
  list-style: none;
  margin: var(--space-md) 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

:where(.tbox-offer-list a) {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: var(--underline-offset);
}

:where(.tbox-offer-list a:hover) {
  color: var(--brand-primary-text);
}

/* Grid card context: span offer list across icon + content columns */
.tbox-standard-features-grid .tbox-offer-list {
  grid-column: 1 / -1;
  margin-top: var(--space-md);
}

/* Topology grid → offer list spacing */
.tbox-topology-grid + .tbox-offer-list {
  margin-top: var(--space-lg);
}

@media (width <= 900px) {
  .tbox-standard-features-grid--content-cards {
    grid-template-columns: 1fr;
  }
}

/* Section heading/description classes inside --content-cards should render as card content. */
.tbox-standard-features-grid--content-cards > :is(div, article) > .tbox-section__heading {
  grid-column: 1 / -1;
  text-align: left;
  font-size: var(--fs-heading-sm);
  padding-bottom: 0;
}

.tbox-standard-features-grid--content-cards > :is(div, article) > .tbox-section__heading::after {
  display: none;
}

.tbox-standard-features-grid--content-cards > :is(div, article) > .tbox-section__desc {
  grid-column: 1 / -1;
  max-width: none;
  margin-left: 0;
  margin-right: 0;
  text-align: left;
}

/* Content-cards 3-column override for sections with 3 children */
.tbox-standard-features-grid--content-cards.tbox-standard-features-grid--three-col {
  grid-template-columns: repeat(3, 1fr);
}

@media (width <= 900px) {
  .tbox-standard-features-grid--content-cards.tbox-standard-features-grid--three-col {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 600px) {
  .tbox-standard-features-grid--content-cards.tbox-standard-features-grid--three-col {
    grid-template-columns: 1fr;
  }
}

/* Bento size hints inside content-cards grids */
.tbox-standard-features-grid--content-cards > [data-bento-size="lg"]:nth-child(n) {
  grid-column: span 2 !important;
}

.tbox-standard-features-grid--content-cards > [data-bento-size="full"]:nth-child(n) {
  grid-column: 1 / -1 !important;
}

@media (width <= 900px) {
  .tbox-standard-features-grid--content-cards > [data-bento-size]:nth-child(n) {
    grid-column: span 1 !important;
  }
}

/* Content-cards: prevent <pre> overflow on narrow viewports */
.tbox-standard-features-grid--content-cards pre {
  overflow-x: auto;
  max-width: 100%;
}

/* ============================================
   Grid modifier: --detail-columns
   Flat 2-col layout with top divider. Use for
   narrative/detail sections on Cloud VPS pages.
   ============================================ */
.tbox-standard-features-grid--detail-columns {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-xl) var(--space-2xl);
  margin-top: var(--space-lg-plus);
}

.tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(n) {
  display: block;
  grid-column: span 1 !important;
  grid-row: auto !important;
  background: none;
  border: none;
  border-top: 1px solid var(--border-light);
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-lg) 0 0;
  transition: none;
}

.tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(n):hover {
  background: none;
  transform: none;
  box-shadow: none;
}

/* Reset icon-category tints from the base grid contract so detail columns stay flat */
.tbox-standard-features-grid--detail-columns > :is(div, article):has(.tbox-card__icon[data-feature-cat]),
.tbox-standard-features-grid--detail-columns > :is(div, article):has(.tbox-card__icon[data-feature-cat]):hover {
  background: none;
  border-color: transparent;
  border-top-color: var(--border-light);
}

/* Detail-columns with icons: restore inline icon+heading grid */
.tbox-standard-features-grid--detail-columns > :is(div, article):has(.tbox-card__icon) {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  align-content: start;
  gap: var(--space-xs) var(--space-md);
}

.tbox-standard-features-grid--detail-columns > :is(div, article):has(.tbox-card__icon) > :is(h3, h4, h5) {
  grid-column: 2;
  grid-row: 1;
}

.tbox-standard-features-grid--detail-columns > :is(div, article):has(.tbox-card__icon) > :not(:is(h3, h4, h5, .tbox-card__icon)) {
  grid-column: 1 / -1;
}

/* 3-child detail grids: fill one row instead of 2+1 */
.tbox-standard-features-grid--detail-columns:has(> :nth-child(3)):not(:has(> :nth-child(4))) {
  grid-template-columns: repeat(3, 1fr);
}

@media (width <= 900px) {
  .tbox-standard-features-grid--detail-columns {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Grid modifier: --accent-top
   Colored 4px top border on cards + optional pill badge.
   Replaces tbox-topology-grid for architecture option sections.
   ============================================ */
.tbox-standard-features-grid--accent-top {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-lg);
  margin-top: var(--space-lg-plus);
}

.tbox-standard-features-grid--accent-top > :is(div, article):nth-child(n) {
  display: block;
  grid-column: span 1 !important;
  grid-row: auto !important;
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: var(--space-lg-plus) var(--space-xl);
}

/* Accent-top cards with icons: switch to inline icon+heading grid */
.tbox-standard-features-grid--accent-top > :is(div, article):has(.tbox-card__icon) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  align-content: start;
  gap: var(--space-xs) var(--space-md);
}

.tbox-standard-features-grid--accent-top .tbox-chip--pill {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-sm);
  background: var(--icon-bg, var(--icon-bg-blue));
  color: var(--icon-color, var(--brand-primary));
  grid-column: 1 / -1;
  margin-bottom: var(--space-xs);
}

/* Override general grid-row:1 rules so chip sits above icon+heading */
.tbox-standard-features-grid--accent-top > :is(div, article):has(.tbox-card__icon) .tbox-chip--pill {
  grid-row: 1;
}

.tbox-standard-features-grid--accent-top > :is(div, article):has(.tbox-card__icon) :where(.tbox-card__icon) {
  grid-row: 2;
}

.tbox-standard-features-grid--accent-top > :is(div, article):has(.tbox-card__icon) :is(h3, h4, h5) {
  grid-row: 2;
}

/* Paragraphs wrapped in .tbox-card__content (display:contents) also need row 3 */
/* stylelint-disable-next-line no-descending-specificity -- false positive; selects different elements than unrelated p rules above */
.tbox-standard-features-grid--accent-top > :is(div, article):has(.tbox-card__icon) .tbox-card__content > p {
  grid-column: 1 / -1;
  grid-row: 3;
}

@media (width <= 900px) {
  .tbox-standard-features-grid--accent-top {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 600px) {
  .tbox-standard-features-grid--accent-top {
    grid-template-columns: 1fr;
  }
}

/* --- Grid modifier: --four-up (4 columns desktop, inherits 2/1 from --accent-top) --- */
.tbox-standard-features-grid--accent-top.tbox-standard-features-grid--four-up {
  grid-template-columns: repeat(4, 1fr);
}

@media (width <= 900px) {
  .tbox-standard-features-grid--accent-top.tbox-standard-features-grid--four-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 600px) {
  .tbox-standard-features-grid--accent-top.tbox-standard-features-grid--four-up {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Grid modifier: --step-columns
   Flat columns with left accent. Use for sequential
   steps and architecture reference sections.
   ============================================ */
.tbox-standard-features-grid--step-columns {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-xl);
  margin-top: var(--space-lg-plus);
}

.tbox-standard-features-grid--step-columns > :is(div, article):nth-child(n) {
  display: block;
  grid-column: span 1 !important;
  grid-row: auto !important;
  background: none;
  border: none;
  border-inline-start: 1px solid var(--border-light);
  border-radius: 0;
  box-shadow: none;
  padding: 0 0 0 var(--space-lg);
  transition: none;
}

.tbox-standard-features-grid--step-columns > :is(div, article):hover {
  background: none;
  transform: none;
  box-shadow: none;
}

/* Step-columns with icons: restore inline icon+heading grid */
.tbox-standard-features-grid--step-columns > :is(div, article):has(.tbox-card__icon) {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto 1fr;
  align-items: start;
  align-content: start;
  gap: var(--space-xs) var(--space-md);
}

/* stylelint-disable-next-line no-descending-specificity -- step-columns intentionally overrides generic and accent-top chip placement in a separate modifier */
.tbox-standard-features-grid--step-columns .tbox-chip--pill {
  grid-column: 1 / -1;
  margin-bottom: var(--space-xs);
}

/* stylelint-disable-next-line no-descending-specificity -- step-columns link treatment intentionally differs from the shared card link contract */
.tbox-standard-features-grid--step-columns .tbox-card__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--fw-bold);
  color: var(--brand-primary-text);
}

/* stylelint-disable-next-line no-descending-specificity -- hover treatment is scoped to the step-columns modifier */
.tbox-standard-features-grid--step-columns .tbox-card__link:hover {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (width <= 900px) {
  .tbox-standard-features-grid--step-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 600px) {
  .tbox-standard-features-grid--step-columns {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Grid modifier: --step-cards
   Carded chooser/reference grids that keep
   step-style chips and optional icon+heading rows.
   ============================================ */
.tbox-standard-features-grid--step-cards {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-xl);
  margin-top: var(--space-lg-plus);
}

.tbox-standard-features-grid--step-cards > :is(div, article):nth-child(n) {
  grid-column: span 1 !important;
  grid-row: auto !important;
  grid-template-columns: 1fr;
  grid-template-rows: auto auto 1fr;
  gap: var(--space-sm-mid);
  align-content: start;
}

.tbox-standard-features-grid--step-cards > :is(div, article):has(.tbox-card__icon) {
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-md);
}

/* stylelint-disable-next-line no-descending-specificity -- step-cards intentionally overrides shared chip placement for chooser cards */
.tbox-standard-features-grid--step-cards > :is(div, article) > .tbox-chip--pill {
  grid-column: 1 / -1;
  grid-row: 1;
  margin-bottom: 0;
}

.tbox-standard-features-grid--step-cards > :is(div, article) > .tbox-card__icon {
  grid-column: 1;
  grid-row: 2;
}

.tbox-standard-features-grid--step-cards > :is(div, article) > :is(h3, h4, h5) {
  grid-column: 1 / -1;
  grid-row: 2;
  margin: 0;
}

.tbox-standard-features-grid--step-cards > :is(div, article):has(.tbox-card__icon) > :is(h3, h4, h5) {
  grid-column: 2;
  grid-row: 2;
  align-self: center;
}

.tbox-standard-features-grid--step-cards > :is(div, article) > :is(p, ul, ol):not(.tbox-chip--pill) {
  grid-column: 1 / -1;
  grid-row: 3;
}

@media (width <= 900px) {
  .tbox-standard-features-grid--step-cards {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 600px) {
  .tbox-standard-features-grid--step-cards,
.tbox-standard-features-grid--step-cards.tbox-standard-features-grid--two-col {
    grid-template-columns: 1fr;
  }
}

.tbox-standard-features-grid--step-cards.tbox-standard-features-grid--two-col {
  grid-template-columns: repeat(2, 1fr);
}

/* --four-up variant (4 cols) */
.tbox-standard-features-grid--step-columns.tbox-standard-features-grid--four-up {
  grid-template-columns: repeat(4, 1fr);
}

@media (width <= 900px) {
  .tbox-standard-features-grid--step-columns.tbox-standard-features-grid--four-up {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 600px) {
  .tbox-standard-features-grid--step-columns.tbox-standard-features-grid--four-up {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   Grid modifier: --decision
   Panel wrapper with rounded border + 3-col card grid.
   Absorbs tbox-decision-panel + tbox-decision-card.
   ============================================ */
.tbox-standard-features-grid--decision {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: var(--space-lg-plus);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  background: var(--surface-decision-panel);
  box-shadow: var(--shadow-decision-panel);
  padding: var(--space-xl);
  margin-bottom: var(--space-lg-plus);
}

.tbox-standard-features-grid--decision > :is(div, article):nth-child(n) {
  grid-column: span 1 !important;
  grid-row: auto !important;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: box-shadow var(--ease-base), border-color var(--ease-base);
}

.tbox-standard-features-grid--decision > :is(div, article):hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-mid);
}

.tbox-standard-features-grid--decision > :is(div, article) :is(h3, h4, h5) {
  grid-column: 1 / -1;
  grid-row: auto;
}

/* stylelint-disable no-descending-specificity */
/* Fallback for legacy decision markup that does not use .tbox-card--decision wrappers. */
.tbox-standard-features-grid--decision > :is(div, article):not(.tbox-card--decision) {
  padding: var(--space-lg-plus) var(--space-xl);
}

.tbox-standard-features-grid--decision > :is(div, article):not(.tbox-card--decision) > :is(h3, h4, h5) {
  margin: 0;
  padding: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.tbox-standard-features-grid--decision > :is(div, article):not(.tbox-card--decision) > p {
  margin: var(--space-sm-mid) 0 0;
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-loose);
}

.tbox-standard-features-grid--decision > :is(div, article):not(.tbox-card--decision) > p + p {
  margin-top: var(--space-sm);
}
/* stylelint-enable no-descending-specificity */

@media (width <= 900px) {
  .tbox-standard-features-grid--decision {
    grid-template-columns: 1fr;
  }
}

/* ── Decision grid: 2-column override ── */
.tbox-standard-features-grid--decision.tbox-standard-features-grid--two-col {
  grid-template-columns: repeat(2, 1fr);
}

@media (width <= 700px) {
  .tbox-standard-features-grid--decision.tbox-standard-features-grid--two-col {
    grid-template-columns: 1fr;
  }
}

.tbox-card--decision .tbox-card__heading {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  margin: 0;
}

:where(:root[data-theme="dark"] .tbox-product-card .tbox-card__heading) {
  color: var(--text-inverse);
}

.tbox-standard-features-grid--lang-links .tbox-card__text { /* stylelint-disable-line no-descending-specificity */
  flex: 1;
}

/* ============================================
   Bento size-hint variant (--bento-hint)
   Opt-in for new pages: tag each child card with
   data-bento-size="sm|md|lg|hero|full|x-sm|sm-v|md-v|x-sm-v" and the
   grid handles column spans via dense auto-flow.
   ============================================ */
.tbox-standard-features-grid.tbox-standard-features-grid--bento-hint {
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row dense;
  grid-auto-rows: auto auto;
  gap: var(--space-lg);
}

/* sm: 1/3 width — spans 2 row tracks for subgrid alignment */
.tbox-standard-features-grid--bento-hint > [data-bento-size="sm"] {
  grid-column: span 4 !important;
  grid-row: span 2 !important;
  grid-template-rows: subgrid;
  align-content: unset;
}

/* x-sm: 1/4 width */
.tbox-standard-features-grid--bento-hint > [data-bento-size="x-sm"] {
  grid-column: span 3 !important;
  grid-row: span 2 !important;
  grid-template-rows: subgrid;
  align-content: unset;
}

/* md: 1/2 width */
.tbox-standard-features-grid--bento-hint > [data-bento-size="md"] {
  grid-column: span 6 !important;
  grid-row: span 2 !important;
  grid-template-rows: subgrid;
  align-content: unset;
}

/* lg: 2/3 width */
.tbox-standard-features-grid--bento-hint > [data-bento-size="lg"] { /* stylelint-disable-line no-descending-specificity */
  grid-column: span 8 !important;
  grid-row: span 2 !important;
  grid-template-rows: subgrid;
  align-content: unset;
}

/* x-sm-v: 1/4 width × portrait (4 row tracks) */
.tbox-standard-features-grid--bento-hint > [data-bento-size="x-sm-v"] {
  grid-column: span 3 !important;
  grid-row: span 4 !important;
  grid-template-rows: subgrid;
  align-content: unset;
}

/* sm-v: 1/3 width × portrait (4 row tracks) */
.tbox-standard-features-grid--bento-hint > [data-bento-size="sm-v"] {
  grid-column: span 4 !important;
  grid-row: span 4 !important;
  grid-template-rows: subgrid;
  align-content: unset;
}

/* md-v: 1/2 width × portrait (4 row tracks) */
.tbox-standard-features-grid--bento-hint > [data-bento-size="md-v"] {
  grid-column: span 6 !important;
  grid-row: span 4 !important;
  grid-template-rows: subgrid;
  align-content: unset;
}

/* hero: 58% wide × 2 rows */
.tbox-standard-features-grid--bento-hint > [data-bento-size="hero"] {
  grid-column: span 7 !important;
  grid-row: span 2 !important;
}

/* full: spans entire row */
.tbox-standard-features-grid--bento-hint > [data-bento-size="full"] { /* stylelint-disable-line no-descending-specificity */
  grid-column: 1 / -1 !important;
  grid-row: span 1 !important;
}

/* default: no hint → same as sm */
.tbox-standard-features-grid--bento-hint > :not([data-bento-size]) {
  grid-column: span 4 !important;
  grid-row: span 2 !important;
  grid-template-rows: subgrid;
  align-content: unset;
}

/* Tablet */
@media (width <= 1024px) {
  .tbox-standard-features-grid.tbox-standard-features-grid--bento-hint {
    grid-template-columns: repeat(8, 1fr);
  }

  .tbox-standard-features-grid--bento-hint > [data-bento-size="hero"] {
    grid-column: span 5 !important;
  }

  .tbox-standard-features-grid--bento-hint > [data-bento-size="lg"] {
    grid-column: span 6 !important;
  }

  .tbox-standard-features-grid--bento-hint > [data-bento-size="md"],
  .tbox-standard-features-grid--bento-hint > [data-bento-size="sm"],
  .tbox-standard-features-grid--bento-hint > [data-bento-size="x-sm"],
  .tbox-standard-features-grid--bento-hint > :not([data-bento-size]) {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
  }

  .tbox-standard-features-grid--bento-hint > [data-bento-size="x-sm-v"],
  .tbox-standard-features-grid--bento-hint > [data-bento-size="sm-v"] {
    grid-column: span 4 !important;
    grid-row: span 4 !important;
  }

  .tbox-standard-features-grid--bento-hint > [data-bento-size="md-v"] {
    grid-column: span 6 !important;
    grid-row: span 4 !important;
  }

}

/* Mobile */
@media (width <= 600px) {
  .tbox-standard-features-grid--bento-hint > [data-bento-size],
  .tbox-standard-features-grid--bento-hint > :not([data-bento-size]) {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
    grid-template-rows: auto !important; /* disable subgrid — only 1 track available */
  }

}

/* ============================================
   Flat bento repack (--bento-repack)
   12-col dense grid for feature cards without
   a topology hero. Cards auto-pack and stretch.
   ============================================ */
@media (width > 900px) {
  .tbox-standard-features-grid.tbox-standard-features-grid--bento-repack {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-flow: row dense;
    grid-auto-rows: minmax(140px, auto);
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a) {
    align-self: stretch;
  }

  /* When category labels are present, switch to auto rows so label rows
     collapse to content height instead of the 140px card-row minimum. */
  .tbox-standard-features-grid--bento-repack:has(.tbox-standard-features-grid__category-label) {
    grid-auto-rows: auto;
  }

  .tbox-standard-features-grid--bento-repack > .tbox-standard-features-grid__category-label {
    min-height: 0 !important;
    align-self: end;
    padding-bottom: 0 !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="sm"]:nth-child(n),
  .tbox-standard-features-grid--bento-repack > :is(div, article, a):not([data-bento-size]):nth-child(n) {
    grid-column: span 4 !important;
    grid-row: auto !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="md"]:nth-child(n) {
    grid-column: span 6 !important;
    grid-row: auto !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="lg"]:nth-child(n) {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="full"]:nth-child(n) {
    grid-column: 1 / -1 !important;
    grid-row: span 1 !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="x-sm"]:nth-child(n) {
    grid-column: span 3 !important;
    grid-row: auto !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="x-sm-v"]:nth-child(n) {
    grid-column: span 3 !important;
    grid-row: span 2 !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="sm-v"]:nth-child(n) {
    grid-column: span 4 !important;
    grid-row: span 2 !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="md-v"]:nth-child(n) {
    grid-column: span 6 !important;
    grid-row: span 2 !important;
  }

  /* Extended sizes for denser bento packing */
  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="tiny"]:nth-child(n) {
    grid-column: span 2 !important;
    grid-row: auto !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="x-wide"]:nth-child(n) {
    grid-column: span 8 !important;
    grid-row: auto !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="x-wide-v"]:nth-child(n) {
    grid-column: span 8 !important;
    grid-row: span 2 !important;
  }

  /* Let link and notes flow after extra content in tall cards instead of hard-coded row 3 */
  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="x-wide-v"] > :is(.tbox-card__link, .tbox-mini-note) {
    grid-row: auto;
    grid-column: 1 / -1;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="xx-wide"]:nth-child(n) {
    grid-column: span 9 !important;
    grid-row: auto !important;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size="tall-v"]:nth-child(n) {
    grid-column: span 4 !important;
    grid-row: span 3 !important;
  }
}

@media (width <= 900px) {
  .tbox-standard-features-grid.tbox-standard-features-grid--bento-repack {
    grid-template-columns: 1fr;
  }

  .tbox-standard-features-grid--bento-repack > :is(div, article, a)[data-bento-size]:nth-child(n),
.tbox-standard-features-grid--bento-repack > :is(div, article, a):not([data-bento-size]):nth-child(n) {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
  }
}

/* Content-cards + bento-repack: 2-column intermediate at tablet.
   At desktop (>900px) the bento 12-col grid applies. Below 900px
   the bento repack collapses to 1-col which is too narrow for tablets.
   Override to 2-col in the 600-900px range for sm/md cards. */
@media (600px < width <= 900px) {
  .tbox-standard-features-grid--content-cards.tbox-standard-features-grid--bento-repack {
    grid-template-columns: repeat(2, 1fr);
  }

  .tbox-standard-features-grid--content-cards.tbox-standard-features-grid--bento-repack > :is(div, article)[data-bento-size="sm"]:nth-child(n),
  .tbox-standard-features-grid--content-cards.tbox-standard-features-grid--bento-repack > :is(div, article)[data-bento-size="md"]:nth-child(n),
  .tbox-standard-features-grid--content-cards.tbox-standard-features-grid--bento-repack > :is(div, article):not([data-bento-size]):nth-child(n) {
    grid-column: span 1 !important;
    grid-row: auto !important;
  }

  .tbox-standard-features-grid--content-cards.tbox-standard-features-grid--bento-repack > :is(div, article)[data-bento-size="full"]:nth-child(n) {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================
   Stat / proof metrics strip
   Compact section (proof points below feature bento grid).
   ============================================ */

/* ============================================
   Bento stat / proof card
   Used in --bento-hint sections for metric proof points.
   ============================================ */
.tbox-bento-stat-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  text-align: center;
  background: transparent;
  border-radius: 0;
  border: none;
  padding: 1.5rem 1.25rem;
  position: relative;
}

.tbox-bento-stat-card + .tbox-bento-stat-card::before {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 1px;
  background: var(--border-light);
}

@media (width <= 600px) {
  .tbox-bento-stat-card + .tbox-bento-stat-card::before {
    display: none;
  }
}

.tbox-bento-stat-card__metric {
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--brand-cta);
  line-height: 1;
}

.tbox-bento-stat-card__label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.tbox-stat-proof-section .tbox-bento-stat-card__label {
  text-transform: none;
  letter-spacing: var(--ls-normal);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  max-width: var(--width-stat-label);
}

/* Per-card accent borders */
.tbox-bento-stat-card[data-stat="uptime"] {
  border-top: 3px solid var(--brand-cta);
}

.tbox-bento-stat-card[data-stat="billing"] {
  border-top: 3px solid var(--brand-primary);
}

.tbox-bento-stat-card[data-stat="latency"],
.tbox-bento-stat-card[data-stat="backups"] {
  border-top: 3px solid var(--tbox-hvps-success-600);
}

.tbox-bento-stat-card[data-stat="latency"] .tbox-bento-stat-card__metric,
.tbox-bento-stat-card[data-stat="backups"] .tbox-bento-stat-card__metric {
  color: var(--tbox-hvps-success-600);
}

.tbox-bento-stat-card[data-stat="billing"] .tbox-bento-stat-card__metric {
  color: var(--brand-primary);
}

/* Stat card entrance animation removed (designcheck) */

.tbox-stat-proof-section__nudge {
  text-align: center;
  margin-top: var(--space-lg);
  font-size: var(--fs-base);
}
.tbox-stat-proof-section__nudge-link {
  color: var(--brand-cta);
  text-decoration: none;
  font-weight: var(--fw-semibold);
}
.tbox-stat-proof-section__nudge-link:hover {
  text-decoration: underline;
}

/* ============================================
   Shared expand/collapse button
   ============================================ */
.tbox-features-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-xl);
  background: transparent;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  cursor: pointer;
  transition: background-color var(--ease-base), border-color var(--ease-base), color var(--ease-base);
  margin-top: var(--space-xl);
}

.tbox-features-expand-btn:hover {
  background: var(--surface-subtle);
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.tbox-features-expand-btn .expand-icon {
  width: 16px;
  height: 16px;
  transition: transform var(--ease-slow);
}

.tbox-features-expand-btn[aria-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

.tbox-features-expand-btn .expand-text { display: inline; }
.tbox-features-expand-btn .collapse-text { display: none; }
.tbox-features-expand-btn[aria-expanded="true"] .expand-text { display: none; }
.tbox-features-expand-btn[aria-expanded="true"] .collapse-text { display: inline; }

.tbox-features-expand-btn .feature-count {
  background: var(--brand-primary-bg);
  color: var(--brand-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 0.125rem var(--space-sm);
  border-radius: var(--radius-md);
}

.tbox-nowrap {
  white-space: nowrap;
}

.tbox-hidden {
  display: none !important;
}

.tbox-text-center {
  text-align: center;
}

.tbox-measure-65ch {
  max-width: 65ch;
}

.tbox-img-75 {
  width: 75%;
  max-width: 100%;
  height: auto;
}

.tbox-img-no-border {
  border: 0;
}

/* Many legacy hero sections force all text colors; allow semantic success messaging inside hero banners. */

@media (width <= 600px) {
  .tbox-container {
    width: calc(100% - 2.25rem);
  }
}

.tbox-chip {
  display: inline-flex;
  align-items: center;
  padding: var(--space-xs) var(--space-sm-plus);
  border-radius: var(--radius-sm-plus);
  border: 1px solid var(--brand-primary-25);
  background: var(--brand-primary-bg);
  color: var(--brand-primary-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  line-height: 1;
  white-space: nowrap;
}

/* Chip on dark-background cards (e.g., industrial/terminal card) */
.tbox-chip--dark {
  background: rgb(255 255 255 / 0.10);
  color: var(--text-inverse);
  border-color: rgb(255 255 255 / 0.18);
}

.tbox-trust-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm-minus);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-sm-plus);
  background: var(--surface-glass-10);
  border: 1px solid var(--surface-glass-18);
  font-size: var(--fs-base);
  color: var(--surface-glass-92);
  white-space: nowrap;
}

/* ============================================
   Jump bar (section navigation)
   ============================================ */

.tbox-jump-bar {
  display: flex;
  justify-content: safe center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-jump-bar);
  border-bottom: 2px solid var(--border-jump-bar);
  position: sticky;
  top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 80px));
  z-index: 200;
  box-shadow: var(--shadow-jump-bar);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.tbox-jump-bar[data-global-jump-bar="1"] {
  scroll-behavior: smooth;
}

.tbox-jump-bar::-webkit-scrollbar {
  display: none;
}

.tbox-jump-target {
  /* +78px = sticky jump bar height (~70px) + the 8px cushion the JS
     scroll-spy uses, so native hash navigation lands where the JS click
     handler does (getStickyOffset in initGlobalJumpBars). */
  scroll-margin-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 80px) + 78px);
}

.tbox-jump-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  text-decoration: none;
  border-radius: var(--radius-md);
  transition: all var(--ease-base);
  white-space: nowrap;
  flex-shrink: 0;
}

.tbox-jump-link:hover {
  color: var(--brand-primary);
  background: var(--brand-primary-bg);
}

.tbox-jump-link.is-active {
  color: var(--brand-primary-text);
  background: var(--surface-accent-bg-strong);
  font-weight: var(--fw-semibold);
}

.tbox-jump-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

@media (width <= 768px) {
  .tbox-jump-bar[data-auto-jump-bar="1"] {
    display: none;
  }

  .tbox-jump-bar {
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-2xs);
    padding-inline: var(--space-md);
    scroll-padding-inline: var(--space-lg);
    scroll-snap-type: x proximity;
    max-width: 100vw;
    -webkit-mask-image: linear-gradient(90deg, var(--text-primary) 0, var(--text-primary) calc(100% - 3rem), transparent 100%);
    mask-image: linear-gradient(90deg, var(--text-primary) 0, var(--text-primary) calc(100% - 3rem), transparent 100%);
  }

  /* Scroll-state edge fades: a wide fade only on the side with more
     content, so the clipped pill reads as "scroll for more". States
     are toggled by initJumpBarScrollState in script.js. */
  .tbox-jump-bar.is-scroll-mid {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--text-primary) 3rem, var(--text-primary) calc(100% - 3rem), transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, var(--text-primary) 3rem, var(--text-primary) calc(100% - 3rem), transparent 100%);
  }

  .tbox-jump-bar.is-scroll-end {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, var(--text-primary) 3rem, var(--text-primary) 100%);
    mask-image: linear-gradient(90deg, transparent 0, var(--text-primary) 3rem, var(--text-primary) 100%);
  }

  .tbox-jump-bar.is-scroll-none {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .tbox-jump-link {
    min-height: 2.75rem;
    padding: var(--space-sm) var(--space-xs);
    font-size: var(--fs-base);
    scroll-snap-align: center;
  }

  .tbox-jump-bar[data-tbox-hvps-tabs="1"] {
    gap: 0.25rem;
    padding-inline: 0.75rem;
    scroll-padding-inline: 0.75rem;
  }

  .tbox-jump-bar[data-tbox-hvps-tabs="1"] .tbox-jump-link {
    padding-inline: 0.75rem;
  }

  .tbox-jump-bar[data-tbox-hvps-tabs="1"] .tbox-jump-link[href="#fit-section"],
.tbox-jump-bar[data-tbox-hvps-tabs="1"] .tbox-jump-link[href="#managed-services-section"] {
    font-size: var(--fs-sm);
  }
}

@media (width > 600px) and (width <= 1024px) {
  .tbox-jump-bar[data-global-jump-bar="1"] {
    justify-content: center;
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: var(--space-xs);
    padding-block: var(--space-sm);
    scroll-snap-type: none;
  }

  .tbox-jump-bar[data-global-jump-bar="1"] .tbox-jump-link {
    min-height: var(--min-touch-target);
    padding: var(--space-xs-plus) var(--space-md);
    font-size: var(--fs-sm);
  }

  .tbox-jump-target {
    scroll-margin-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 80px) + 130px);
  }
}

/* ============================================
   Back to top (injected by initBackToTop in script.js)
   ============================================ */

.tbox-back-to-top {
  position: fixed;
  inset-block-end: 6.5rem; /* clears the LiveChat launcher bottom-right */
  inset-inline-end: var(--space-lg);
  width: var(--min-touch-target, 44px);
  height: var(--min-touch-target, 44px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--surface-card);
  color: var(--text-secondary);
  border: 1px solid var(--border-mid);
  border-radius: 50%;
  box-shadow: var(--shadow-card);
  cursor: pointer;
  z-index: var(--z-above);
  opacity: 0;
  pointer-events: none;
  translate: 0 8px;
  transition: opacity var(--ease-base), translate var(--ease-base), color var(--ease-base), border-color var(--ease-base);
}

.tbox-back-to-top.is-visible {
  opacity: 1;
  pointer-events: auto;
  translate: 0 0;
}

.tbox-back-to-top:hover,
.tbox-back-to-top:focus-visible {
  color: var(--brand-primary);
  border-color: var(--brand-primary);
}

.tbox-back-to-top:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

.tbox-back-to-top .material-symbols-outlined {
  font-size: 1.375rem;
}

@media (prefers-reduced-motion: reduce) {
  .tbox-back-to-top {
    transition: none;
    translate: 0 0;
  }
}

.tbox-diagram {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin: var(--space-md) 0 0.9rem;
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.tbox-diagram .tbox-node {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  padding: 0.35rem 0.6rem;
  border-radius: var(--radius-sm-plus);
  border: 1px solid var(--border-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
  color: var(--text-primary);
  line-height: 1;
  white-space: nowrap;
}

.tbox-diagram .tbox-node::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: var(--radius-xs);
  background: var(--brand-primary);
}

.tbox-diagram .tbox-node--accent::before {
  background: var(--brand-highlight);
}

.tbox-diagram .tbox-arrow {
  color: var(--text-muted);
  user-select: none;
}

.tbox-trust-module {
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-card);
  background: var(--surface-base);
  box-shadow: var(--shadow-card);
  padding: 2.25rem;
}

.tbox-trust-head {
  display: grid;
  gap: var(--space-xs-plus);
  margin-bottom: var(--space-lg-plus);
}

.tbox-quote {
  background: var(--surface-base);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: 2.25rem 1.25rem 1.75rem;
  box-shadow: var(--shadow-card);
}

.tbox-quote blockquote {
  margin: 0;
  padding: 0;
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-relaxed);
  /* Intentional full-width measure -- do not re-clamp (owner decision).
     Review text is meant to fill its slide; do NOT add a max-width / ch
     measure cap here even though lines may exceed ~75ch. See
     .impeccable/critique/ignore.md. */
}

.tbox-quote .tbox-quote-meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm-plus);
  margin-top: var(--space-md-plus);
  color: var(--text-muted);
  font-size: var(--fs-sm);
}

.tbox-quote-author { font-weight: var(--fw-semibold); color: var(--text-secondary); }
.tbox-quote-location { color: var(--text-secondary); }

.tbox-trust-module--compact .tbox-stars {
  justify-content: center;
}

.tbox-trust-section .tbox-stars {
  justify-content: center;
  margin-bottom: var(--space-sm-plus);
}

#content .tbox-quote .tbox-stars {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  color: var(--brand-cta);
  font-size: var(--fs-base);
  line-height: 1;
}

.tbox-trust-foot {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--space-xl);
}

.tbox-trust-foot .tbox-trust-attrib {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

/* --- Trust Module: Carousel --- */

.tbox-trust-carousel {
  overflow: hidden;
  position: relative;
}

.tbox-trust-carousel__track {
  display: flex;
  transition: transform var(--ease-slow);
}

.tbox-trust-carousel__slide {
  flex: 0 0 100%;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
}

@media (width <= 900px) {
  .tbox-trust-carousel__slide {
    grid-template-columns: 1fr;
  }
}

.tbox-trust-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-lg-plus);
}

.tbox-trust-carousel__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  border-radius: 50%;
  border: 1px solid var(--border-mid);
  background: var(--surface-base);
  color: var(--text-secondary);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
  padding: 0;
  font-size: var(--fs-2xl);
  line-height: 1;
}

.tbox-trust-carousel__btn:hover,
.tbox-trust-carousel__btn:focus-visible {
  border-color: var(--brand-primary);
  color: var(--brand-primary);
}

.tbox-trust-carousel__dots {
  display: flex;
  align-items: center;
  gap: var(--space-xs-plus);
}

.tbox-trust-carousel__dot {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-cap);
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.tbox-trust-carousel__dot::before {
  content: '';
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border-light);
  transition: background 0.2s, transform 0.2s;
}

.tbox-trust-carousel__dot.is-active::before {
  background: var(--brand-primary);
  width: 20px;
  border-radius: var(--radius-cap);
}

.tbox-trust-carousel__dot:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-border);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-cap);
}

.tbox-trust-carousel__dot:focus:not(:focus-visible) {
  outline: none;
}

/* Carousel counter + progress bar (shown in place of dots on long carousels) */
.tbox-trust-carousel__counter-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2xs);
  min-width: 7rem;
}

.tbox-trust-carousel__counter {
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.tbox-trust-carousel__progress {
  width: 100%;
  height: 3px;
  border-radius: var(--radius-cap);
  background: var(--border-light);
  overflow: hidden;
}

.tbox-trust-carousel__progress-bar {
  width: 100%;
  height: 100%;
  border-radius: var(--radius-cap);
  background: var(--brand-primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s;
}

@media (prefers-reduced-motion: reduce) {
  .tbox-trust-carousel__progress-bar {
    transition: none;
  }
}

.tbox-trust-carousel__pause-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch-target);
  height: var(--min-touch-target);
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  border: none;
  background: transparent;
  color: var(--text-muted);
  font-size: var(--fs-base);
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: color var(--ease-base), background var(--ease-base);
  flex-shrink: 0;
}
.tbox-trust-carousel__pause-btn:hover {
  color: var(--text-primary);
  background: var(--surface-muted);
}
.tbox-trust-carousel__pause-btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-border);
  outline-offset: var(--focus-outline-offset);
}
/* stylelint-disable-next-line no-descending-specificity */
.tbox-trust-carousel__pause-btn .material-symbols-outlined {
  font-size: var(--fs-lg);
  pointer-events: none;
}

.tbox-trust-carousel__pause-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.tbox-trust-carousel__pause-icon svg {
  display: block;
}

/* Review-theme tag row — used above review carousels. Plain text, not
   pills: pill styling reads as clickable next to the real pill links in
   the cards above, and these tags are not interactive. */
.tbox-reviews-mentioned {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-2xl);
  margin-bottom: 24px;
}

.tbox-reviews-mentioned__label {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-right: var(--space-xs);
}

.tbox-reviews-mentioned__tag {
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
}

.tbox-reviews-mentioned__tag + .tbox-reviews-mentioned__tag::before {
  content: "\00B7";
  margin-right: var(--space-sm);
  color: var(--text-secondary);
}

/* --- Trust Module: Compact variant --- */

.tbox-trust-module--compact {
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
  border: none;
  box-shadow: none;
  background: transparent;
  padding: 1.5rem 0;
  text-align: center;
}

.tbox-trust-module--compact .tbox-trust-head {
  justify-items: center;
}

.tbox-trust-module--compact .tbox-trust-carousel__slide {
  grid-template-columns: 1fr;
  justify-items: center;
}

.tbox-trust-module--compact .tbox-quote {
  border: none;
  box-shadow: none;
  background: transparent;
  max-width: 560px;
}

.tbox-trust-module--compact .tbox-quote blockquote {
  font-style: italic;
  font-weight: var(--fw-medium);
}

.tbox-trust-module--compact .tbox-quote-meta {
  justify-content: center;
}

.tbox-trust-module--compact .tbox-trust-foot {
  justify-content: center;
}

/* --- Trust Module: Fade variant --- */

.tbox-trust-carousel--fade .tbox-trust-carousel__track {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: auto;
  transition: none;
}

.tbox-trust-carousel--fade .tbox-trust-carousel__slide {
  grid-column: 1;
  grid-row: 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.15s ease, visibility 0.15s ease;
}

.tbox-trust-carousel--fade .tbox-trust-carousel__slide.is-active {
  opacity: 1;
  visibility: visible;
}

/* --- Trust Module: Reduced motion --- */

@media (prefers-reduced-motion: reduce) {
  .tbox-trust-carousel__track {
    transition: none;
  }

  .tbox-trust-carousel--fade .tbox-trust-carousel__slide {
    transition: none;
  }
}

/* --- Trust Module: Seal --- */

/* ============================================
   Unified Trust Section ([tbox_trust_section])
   ============================================ */

.tbox-trust-section {
  padding: 3.5rem 0;
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

/* .tbox-trust-header removed — subheading eliminated */

/* stylelint-disable-next-line no-descending-specificity */
.tbox-trust-section > .tbox-container > h2 {
  margin-bottom: var(--space-md);
}

/* Aggregate rating badge row (both variants) */
.tbox-trust-badge-row {
  text-align: center;
  margin-bottom: var(--space-xl);
}

.tbox-sa-rating-badge--trust {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  color: var(--text-primary);
}

.tbox-sa-rating-badge__text {
  font-size: var(--fs-sm);
  line-height: var(--lh-tight);
}

.tbox-sa-rating-badge--trust .tbox-sa-rating-badge__text {
  color: var(--text-secondary);
}

/* Shared stat primitives. Legacy .tbox-stats-row/.tbox-stat-cell remain aliases. */
.tbox-stat-list--feature,
.tbox-stats-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl) var(--space-xl);
  margin: 0 auto 4.5rem;
  max-width: 1000px;
}

.tbox-stat-list__item,
.tbox-stat-cell {
  text-align: center;
  padding: var(--space-lg);
  position: relative;
}

#content :is(.tbox-stat-list__value, .tbox-stat-cell__number) {
  font-family: var(--tbox-font-mono);
  font-size: clamp(3.2rem, 8vw, 5.5rem);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary-text);
  line-height: 1;
  margin-bottom: 8px;
  display: block;
}

:is(.tbox-stat-list__label, .tbox-stat-cell__label) {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

:is(.tbox-stat-list__desc, .tbox-stat-cell__desc) {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  max-width: 240px;
  margin: 0 auto;
}

@media (width >= 768px) {
  .tbox-stat-list--feature .tbox-stat-list__item:nth-child(even),
  .tbox-stat-cell:nth-child(even) {
    transform: translateY(3.5rem);
  }
}

@media (width <= 768px) {
  .tbox-stat-list--feature,
  .tbox-stats-row {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
    margin-bottom: 3rem;
  }

  #content :is(.tbox-stat-list__value, .tbox-stat-cell__number) {
    font-size: clamp(3rem, 12vw, 4.5rem);
  }
}

/* --- Featured quote (pinned, static, page-relevant) --- */
.tbox-trust-featured {
  max-width: 680px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.tbox-quote--featured {
  background: var(--surface-base);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  padding: var(--space-xl) var(--space-2xl);
  box-shadow: 0 4px 12px var(--overlay-06);
}

.tbox-trust-section .tbox-quote--featured blockquote,
.tbox-trust-featured--inline .tbox-quote--featured blockquote {
  font-size: var(--fs-xl);
  font-style: italic;
  color: var(--brand-primary-text);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-medium);
  text-align: left;
}

/* Inline featured quote (quote-only trust variant) beside decision moments */
.tbox-trust-featured--inline {
  margin-top: var(--space-2xl);
  margin-bottom: 0;
}

.tbox-trust-featured--inline .tbox-quote--featured .tbox-quote-meta {
  justify-content: flex-start;
}

.tbox-quote-source {
  display: inline-block;
  margin-top: var(--space-sm);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  font-style: italic;
}

.tbox-quote-source--case-study::before,
.tbox-quote-source--verified::before,
.tbox-quote-source--sa::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  margin-right: var(--space-xs);
  vertical-align: middle;
}

.tbox-quote-source--case-study::before {
  background: var(--brand-cta);
}

.tbox-quote-source--verified::before,
.tbox-quote-source--sa::before {
  background: var(--status-success, #22c55e);
}

/* Source badge inside quote-meta row (inline) */
.tbox-quote-meta .tbox-quote-source {
  margin-top: 0;
  margin-left: auto;
}

/* --- Compact proof strip (4-up horizontal) --- */
.tbox-trust-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  max-width: 720px;
  margin: 0 auto var(--space-xl);
  text-align: center;
}

.tbox-trust-strip__stat {
  padding: var(--space-md) var(--space-sm);
}

#content .tbox-trust-strip__number {
  font-family: var(--tbox-font-body);
  /* Body font is proportional; keep stat digits column-aligned in the grid */
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--fw-bold);
  color: var(--brand-primary-text);
  line-height: 1;
  margin-bottom: 4px;
  display: block;
}

.tbox-trust-strip__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}

/* stylelint-disable-next-line no-descending-specificity */
#content .tbox-trust-strip__stat--ctx .tbox-trust-strip__number {
  color: var(--brand-cta-text-deep);
}

@media (width <= 600px) {
  .tbox-trust-strip {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
    max-width: 360px;
  }

  #content .tbox-trust-strip__number {
    font-size: var(--fs-2xl);
  }
}

/* --- Trust section: CTA pair --- */
.tbox-trust-section__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
  flex-wrap: wrap;
}

/* --- Carousel card overrides within trust section --- */
.tbox-trust-section .tbox-trust-module--compact {
  max-width: 640px;
  margin: 0 auto;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: var(--space-lg) 0;
  text-align: center;
}

.tbox-trust-section .tbox-trust-carousel__slide {
  grid-template-columns: 1fr;
  min-height: auto;
}

.tbox-trust-section .tbox-quote:not(.tbox-quote--featured) {
  max-width: none;
  width: 100%;
  padding: var(--space-md) var(--space-xl);
  background: transparent;
  border: none;
  box-shadow: none;
  display: flex;
  flex-direction: column;
  min-height: 10rem;
}

.tbox-trust-section .tbox-quote:not(.tbox-quote--featured) blockquote {
  font-size: var(--fs-lg);
  font-style: italic;
  color: var(--brand-primary-text);
  line-height: var(--lh-relaxed);
  font-weight: var(--fw-medium);
  flex: 1;
  display: flex;
  align-items: center;
  text-align: left;
  /* Readable measure: long reviews were hitting 99-114 chars/line.
     --width-desc is the intended ~75-char measure for Rubik. */
  width: 100%;
  max-width: var(--width-desc);
  margin-inline: auto;
}

.tbox-trust-section .tbox-quote-meta {
  margin-top: var(--space-sm-plus);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  justify-content: flex-start;
}

/* Attribution footer — improved visibility */
.tbox-trust-section .tbox-trust-foot {
  margin-top: var(--space-sm);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
}

@media (width <= 600px) {
  .tbox-trust-section {
    padding: 2.5rem 0;
  }

  .tbox-trust-section .tbox-quote:not(.tbox-quote--featured) {
    min-height: 8rem;
    padding: var(--space-sm) var(--space-md);
  }

  .tbox-quote--featured {
    padding: var(--space-lg) var(--space-lg);
  }

  .tbox-trust-section .tbox-quote--featured blockquote,
  .tbox-trust-featured--inline .tbox-quote--featured blockquote {
    font-size: var(--fs-lg);
  }

  /* Cap visible carousel dots on mobile — hide 6th+ dot cleanly */
  .tbox-trust-section .tbox-trust-carousel__dot:nth-child(n+6) {
    display: none;
  }
}

.tbox-trust-section .tbox-quote--featured .tbox-quote-meta {
  justify-content: flex-start;
}

/* --- Slim variant: reduced height,
no badge/featured quote --- */
.tbox-trust-section--slim {
  --trust-clip-inset: 28px;
  --trust-bg:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='72' height='72'%3E%3Cpath d='M72 0H0v72' fill='none' stroke='rgba(255,255,255,0.055)' stroke-width='0.5'/%3E%3C/svg%3E") repeat,
    var(--brand-primary-deep);
  padding: clamp(4.5rem, 7vw, 6.25rem) 0 clamp(4.25rem, 6vw, 5.75rem);
  background: var(--trust-bg);
  clip-path: polygon(0 var(--trust-clip-inset), 100% 0, 100% calc(100% - var(--trust-clip-inset)), 0 100%);
  margin-top: calc(var(--trust-clip-inset) * -1);
  margin-bottom: calc(var(--trust-clip-inset) * -1);
  position: relative;
  z-index: 1;
  overflow: hidden;
  border: none;
}

#trust-section.tbox-trust-section--slim .tbox-container {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-areas:
    "heading"
    "band"
    "foot";
  row-gap: clamp(2rem, 4vw, 3rem);
  align-items: stretch;
}

#trust-section.tbox-trust-section--slim .tbox-section__heading {
  grid-area: heading;
  margin: 0;
  color: var(--text-inverse);
  text-align: left;
}

/* The slim orange ::before is the accent; hide the redundant base blue bar.
   Scoped to non-home: body.home repurposes ::after as its single accent. */
body:not(.home) .tbox-trust-section--slim .tbox-section__heading::after {
  display: none;
}

.tbox-trust-section--slim .tbox-section__heading::before {
  content: "";
  display: block;
  width: 2.75rem;
  height: 2px;
  background: var(--brand-cta);
  border-radius: var(--radius-2xs);
  margin-bottom: var(--space-md);
}

#trust-section.tbox-trust-section--slim .tbox-section__heading em {
  color: var(--brand-cta);
}

.tbox-trust-section--slim .tbox-trust-module--compact {
  grid-area: band;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: clamp(1.5rem, 3vw, 2.5rem) clamp(1.5rem, 3.5vw, 3rem);
  text-align: left;
  background: color-mix(in srgb, var(--brand-primary-deep) 74%, var(--gray-950) 26%);
  border: 1px solid var(--text-inverse-16);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--gray-950) 22%, transparent);
}

:where(.tbox-trust-section--slim) .tbox-trust-module--compact .tbox-quote:not(.tbox-quote--featured) {
  min-height: 8rem;
  padding: var(--space-lg) 0 var(--space-md);
}

.tbox-trust-section--slim .tbox-trust-module--compact .tbox-quote:not(.tbox-quote--featured) blockquote {
  /* --prose-measure-wide (75ch) renders ~95 chars/line in Rubik;
     --width-desc keeps reviews at the intended ~75-char measure. */
  max-width: var(--width-desc);
  margin: 0;
  text-align: left;
  color: color-mix(in srgb, var(--text-inverse) 90%, transparent);
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
}

.tbox-trust-section--slim .tbox-trust-module--compact .tbox-quote-meta {
  justify-content: flex-start;
  margin-top: var(--space-sm-plus);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--text-inverse-14);
  color: color-mix(in srgb, var(--text-inverse) 58%, transparent);
}

.tbox-trust-section--slim .tbox-trust-module--compact .tbox-quote-source {
  color: color-mix(in srgb, var(--text-inverse) 50%, transparent);
  text-align: left;
}

.tbox-trust-section--slim .tbox-trust-module--compact .tbox-quote-meta .tbox-quote-source {
  margin-left: 0;
}

/* --- Slim trust: dark text overrides --- */

.tbox-trust-section--slim .tbox-quote-author {
  color: color-mix(in srgb, var(--text-inverse) 58%, transparent);
}

/* --- Slim trust: section footer (seal + CTA) --- */

.tbox-trust-section--slim .tbox-trust-section__foot {
  grid-area: foot;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(1rem, 2.5vw, 2rem);
  margin: 0;
  padding-top: clamp(1.25rem, 2.5vw, 1.75rem);
  border-top: 1px solid var(--text-inverse-14);
}

.tbox-trust-section--slim .tbox-trust-section__proof {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm-plus);
}

.tbox-trust-section--slim .tbox-trust-section__seal-cap {
  color: color-mix(in srgb, var(--text-inverse) 60%, transparent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}

.tbox-trust-section--slim .tbox-trust-section__seal-stat {
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  letter-spacing: 0.01em;
}

.tbox-trust-section--slim .tbox-trust-section__seal-stat strong {
  color: color-mix(in srgb, var(--text-inverse) 92%, transparent);
  font-weight: var(--fw-bold);
}

.tbox-trust-section--slim .tbox-trust-section__seal-link {
  display: inline-flex;
  border-radius: var(--radius-xs);
}

.tbox-trust-section--slim .tbox-trust-section__seal-link img {
  display: block;
  max-width: 100%;
  height: auto;
  border: 0;
}

.tbox-trust-section--slim .tbox-trust-section__seal-link:focus-visible {
  outline: 2px solid var(--focus-ring-on-dark);
  outline-offset: 3px;
}

/* --- Slim trust: carousel controls (dark glass) --- */

.tbox-trust-section--slim .tbox-trust-carousel__btn,
.tbox-trust-section--slim .tbox-trust-carousel__pause-btn {
  background: var(--text-inverse-08);
  border: 1px solid var(--text-inverse-18);
  color: var(--text-inverse);
}

.tbox-trust-section--slim .tbox-trust-carousel__btn:hover,
.tbox-trust-section--slim .tbox-trust-carousel__btn:focus-visible {
  background: var(--text-inverse-14);
  border-color: color-mix(in srgb, var(--text-inverse) 28%, transparent);
}

.tbox-trust-section--slim .tbox-trust-carousel__nav {
  gap: var(--space-sm);
}

.tbox-trust-section--slim .tbox-trust-carousel__dots {
  background: var(--text-inverse-08);
  border-radius: var(--radius-md);
  padding: 4px 10px;
  gap: 2px;
}

.tbox-trust-section--slim .tbox-trust-carousel__dot {
  width: 20px;
  min-width: 20px;
  height: 28px;
}

.tbox-trust-section--slim .tbox-trust-carousel__dot::before {
  width: 6px;
  height: 6px;
  background: color-mix(in srgb, var(--text-inverse) 32%, transparent);
}

.tbox-trust-section--slim .tbox-trust-carousel__dot.is-active::before {
  background: var(--brand-primary-light, var(--brand-primary));
  width: 14px;
  border-radius: var(--radius-cap);
}

/* Slim variant counter + progress (dark-glass treatment) */
.tbox-trust-section--slim .tbox-trust-carousel__counter {
  color: color-mix(in srgb, var(--text-inverse) 64%, transparent);
}

.tbox-trust-section--slim .tbox-trust-carousel__progress {
  background: var(--text-inverse-14);
}

.tbox-trust-section--slim .tbox-trust-carousel__progress-bar {
  background: var(--brand-primary-light, var(--brand-primary));
}

.tbox-trust-section--slim .tbox-trust-carousel__pause-btn {
  color: color-mix(in srgb, var(--text-inverse) 54%, transparent);
}

.tbox-trust-section--slim .tbox-trust-carousel__pause-btn:hover,
.tbox-trust-section--slim .tbox-trust-carousel__pause-btn:focus-visible {
  color: var(--text-inverse);
  background: var(--text-inverse-14);
}

/* --- Slim trust: CTA ghost button override --- */

.tbox-trust-section--slim .tbox-btn-ghost {
  color: color-mix(in srgb, var(--text-inverse) 86%, transparent);
  border-color: color-mix(in srgb, var(--text-inverse) 24%, transparent);
}

.tbox-trust-section--slim .tbox-btn-ghost:hover,
.tbox-trust-section--slim .tbox-btn-ghost:focus-visible {
  color: var(--text-inverse);
  background: var(--text-inverse-08);
  border-color: color-mix(in srgb, var(--text-inverse) 32%, transparent);
}

.tbox-trust-section--slim .tbox-trust-section__cta {
  justify-content: flex-end;
  gap: var(--space-sm);
  margin: 0;
}

@media (width <= 1024px) {
  .tbox-trust-section--slim {
    --trust-clip-inset: 24px;
  }
}

@media (width <= 860px) {
  .tbox-trust-section--slim .tbox-trust-section__foot {
    flex-direction: column;
    align-items: flex-start;
  }

  .tbox-trust-section--slim .tbox-trust-section__cta {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (width <= 600px) {
  .tbox-trust-section--slim {
    --trust-clip-inset: 14px;
    padding: 4rem 0 3.5rem;
  }

  #trust-section.tbox-trust-section--slim .tbox-container > * {
    min-width: 0;
  }

  .tbox-trust-section--slim .tbox-trust-module--compact {
    padding: 20px 16px;
  }

  .tbox-trust-section--slim .tbox-trust-carousel__nav {
    flex-wrap: wrap;
    max-width: 100%;
    row-gap: var(--space-xs);
  }

  .tbox-trust-section--slim .tbox-trust-carousel__dot:nth-child(n+4) {
    display: none;
  }

  .tbox-trust-section--slim .tbox-trust-carousel__pause-btn {
    flex-basis: 44px;
  }
}

/* ============================================
   Inline Trust Element ([tbox_trust_inline])
   ============================================ */

.tbox-trust-inline {
  max-width: 640px;
  border: 1px solid var(--brand-primary-22);
  background: var(--surface-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-lg) var(--space-xl);
  margin: var(--space-xl) 0;
}

.tbox-trust-inline--center {
  margin-left: auto;
  margin-right: auto;
}

.tbox-trust-inline--combo {
  display: flex;
  align-items: center;
  gap: var(--space-xl);
}

.tbox-trust-inline__body {
  flex: 1;
  min-width: 0;
}

.tbox-trust-inline__quote {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  font-style: normal;
  color: var(--text-primary);
  line-height: var(--lh-loose);
  margin: 0 0 var(--space-sm);
  padding: 0;
  border: none;
}

#content .tbox-trust-inline__quote {
  font-size: var(--fs-base);
  font-weight: var(--fw-normal);
  color: var(--text-primary);
}

.tbox-trust-inline__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.tbox-trust-inline__author {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.tbox-trust-inline__source {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}

.tbox-trust-inline__source--verified {
  background: var(--brand-primary-08);
  color: var(--brand-primary-deep);
}

.tbox-trust-inline__source--case-study {
  background: var(--surface-muted);
  color: var(--text-secondary);
}

.tbox-trust-inline__stat {
  text-align: center;
  flex-shrink: 0;
  min-width: 80px;
}

#content .tbox-trust-inline__number {
  font-family: inherit;
  font-variant-numeric: tabular-nums;
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: var(--fw-bold);
  color: var(--brand-primary-text);
  line-height: 1;
  display: block;
  margin-bottom: 4px;
}

.tbox-trust-inline__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
}

/* Stat-only mode: compact pill */
.tbox-trust-inline--stat {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  max-width: none;
}

.tbox-trust-inline--stat .tbox-trust-inline__stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

/* Quote-only mode */
.tbox-trust-inline--quote {
  max-width: 560px;
}

/* Hero rating badge */
.tbox-sa-rating-badge--hero {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
  margin-top: var(--space-sm);
}

.tbox-sa-rating-badge--hero .tbox-sa-rating-badge__stars {
  color: var(--brand-cta);
  font-size: var(--fs-base);
  letter-spacing: 1px;
}

/* Dark hero badge bg ~rgba(137,166,199,0.18) on near-black: warm-3 (#f79625)
   composites at ~2.93:1. Swap to color-yellow (#facc15) on dark, which clears AA. */
:root[data-theme="dark"] .tbox-sa-rating-badge--hero .tbox-sa-rating-badge__stars {
  color: var(--color-yellow);
}

.tbox-sa-rating-badge--hero .tbox-sa-rating-badge__text {
  color: inherit;
  font-size: inherit;
}

@media (width <= 600px) {
  .tbox-trust-inline--combo {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
  }

  .tbox-trust-inline__stat {
    text-align: left;
  }

  .tbox-trust-inline {
    padding: var(--space-md) var(--space-lg);
  }
}

/* ============================================
   CTA Sections (Canonical)
   ============================================ */

/* Base contract */
.tbox-cta-section {
  padding: var(--space-4xl) var(--space-xl);
  text-align: center;
}

.tbox-cta-section__actions {
  display: flex;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin: 0 0 var(--space-xl);
}

.tbox-cta-section__actions :is(.tbox-widget-host, .jlc-wrapper, .jlc-app) {
  margin: 0;
  width: 100%;
  max-width: var(--width-cta-action-max);
  flex: 0 1 var(--width-cta-action-max);
}

/* Match the outline sibling (--fs-lg, centered label): the primary tier
   otherwise inherits body font-size and left-aligns when full-width on mobile. */
.tbox-cta-section__actions .tbox-btn[data-cta-tier="primary"] {
  justify-content: center;
  font-size: var(--fs-lg);
}

.tbox-cta-section__summary {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm-plus);
  margin-bottom: var(--space-2xl);
}

.tbox-cta-section__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-md);
  max-width: 1080px;
  margin: 0 auto var(--space-2xl);
}

.tbox-cta-section__note {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* ── Trust echo under the closing CTA actions (peak-end reassurance) ── */
.tbox-cta-section__assure {
  margin: var(--space-md) 0 0;
  font-size: var(--fs-sm);
  color: var(--text-on-dark-muted);
}

/* ── Case studies proof link (below CTA actions, above note) ── */
.tbox-cta-section__case-studies-link {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-cta-section__case-studies-link a {
  color: var(--text-on-dark-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--surface-glass-25);
  transition: color var(--ease-base), border-color var(--ease-base);
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-cta-section__case-studies-link a:hover {
  color: var(--text-inverse);
  border-bottom-color: var(--text-inverse);
}

/* Mobile: this standalone proof link renders ~23px tall, just under the WCAG
   2.5.8 24px floor. Give it a full 44px touch target; the underline moves from
   border-bottom to text-decoration so it stays tight to the text inside the
   taller hit box. Desktop is unchanged. */
@media (width <= 600px) {
  /* stylelint-disable-next-line no-descending-specificity */
  .tbox-cta-section__case-studies-link a {
    display: inline-flex;
    align-items: center;
    min-height: var(--min-touch-target);
    border-bottom: 0;
    text-decoration: underline;
    text-decoration-color: var(--surface-glass-25);
    text-underline-offset: 4px;
  }
  /* stylelint-disable-next-line no-descending-specificity */
  .tbox-cta-section__case-studies-link a:hover {
    text-decoration-color: var(--text-inverse);
  }
}

/* ── CTA related links + quote note (pill links below main actions) ── */
.tbox-cta-section__related {
  margin-top: var(--space-xl);
  padding-top: 1.15rem;
  border-top: 1px solid var(--surface-glass-10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm-plus);
  flex-wrap: wrap;
}

.tbox-cta-section__related-label {
  font-size: var(--fs-xs);
  color: var(--text-on-dark);
  font-weight: var(--fw-medium);
}

/* Label + link pair that wraps as one unit, so a label never strands
   on the line above its link on narrow viewports. */
.tbox-cta-section__related-group {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm-plus);
}

.tbox-cta-section__related-link {
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm-plus);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--surface-glass-80);
  background: var(--surface-glass-08);
  border: 1px solid var(--surface-glass-10);
  text-decoration: none;
  transition: background var(--ease-fast);
}

.tbox-cta-section__related-link:hover {
  background: var(--surface-glass-15);
}

/* Theme-aware fallback for `.tbox-cta-section__related` when nested in a light
   surface (e.g. inside `.tbox-content-card` on /case-studies/). The base rule
   above is tuned for dark CTA surfaces; on light cards the white-on-white
   tokens collapse to ~1:1 contrast. Use solid text + outline-link tokens
   instead. Dark surfaces continue to fall through to the base styling. */
.tbox-content-card .tbox-cta-section__related,
.tbox-card--content .tbox-cta-section__related {
  border-top-color: var(--border-light);
}

.tbox-content-card .tbox-cta-section__related-label,
.tbox-card--content .tbox-cta-section__related-label {
  color: var(--text-primary);
}

.tbox-content-card .tbox-cta-section__related-link,
.tbox-card--content .tbox-cta-section__related-link {
  color: var(--brand-primary-text);
  background: transparent;
  border-color: var(--tbox-btn-outline-blue-border);
}

.tbox-content-card .tbox-cta-section__related-link:hover,
.tbox-card--content .tbox-cta-section__related-link:hover {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
}

/* Blueprint / Dark (industrial closing CTA look) */
.tbox-cta-section.tbox-cta-section--blueprint {
  position: relative;
  overflow: hidden;
  color: var(--text-on-dark);
  background-color: var(--gray-950);
  border-top: 1px solid var(--brand-primary-30);
  border-bottom: 1px solid var(--brand-primary-30);
}

/* Dark mode: `--gray-950` (rgb 4,8,10) paints darker than body bg
   (`--surface-base` = rgb 7,17,31), so the blueprint band reads as an inset
   bar. Lift the band one step above body bg so it reads as a lifted surface. */
:root[data-theme="dark"] .tbox-cta-section.tbox-cta-section--blueprint {
  background-color: var(--surface-band);
}

.tbox-cta-section.tbox-cta-section--blueprint::before,
.tbox-cta-section.tbox-cta-section--blueprint::after {
  content: none;
}

/* ── Closing-CTA decision recap: two-column product summary that restates
   the hero's choice (who it's for / failover / from-price) so the end of
   the page doesn't depend on specs read ~2,500px earlier. Reuses the
   spec-dl grammar on the dark blueprint band via glass-surface tokens. ── */
.tbox-cta-recap {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  max-width: 820px;
  margin: var(--space-xl) auto;
  text-align: left;
}

.tbox-cta-recap__col {
  padding: var(--space-lg);
  background: var(--surface-glass-04);
  border: 1px solid var(--surface-glass-10);
  border-radius: var(--radius-md);
}

.tbox-cta-recap__name {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark);
}

.tbox-cta-recap__specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1rem;
  margin: 0;
  font-size: var(--fs-sm);
}

.tbox-cta-recap__specs dt {
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 0.15rem;
}

.tbox-cta-recap__specs dd {
  margin: 0;
  color: var(--text-on-dark-soft);
  line-height: var(--lh-on-dark-normal);
}

.tbox-cta-recap__specs dd strong {
  color: var(--brand-primary-text);
}

@media (width <= 700px) {
  .tbox-cta-recap {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

@media (width <= 600px) {
  .tbox-cta-section.tbox-cta-section--blueprint h2 {
    font-size: var(--fs-pricing-display);
  }
}

/* ── Blueprint CTA: split layout (value props left, card right) ── */
.tbox-cta-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  max-width: 1080px;
  margin: 0 auto;
}

.tbox-cta-section__left {
  text-align: left;
}

.tbox-cta-section--blueprint .tbox-cta-section__left .tbox-section__heading {
  text-align: left;
  margin-bottom: var(--space-xl);
}

.tbox-cta-section__props {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

/* In the split layout the trust strip renders inside the left column, below
   the value props, so the column balances against the taller card. */
.tbox-cta-section__left .tbox-cta-section__trust {
  justify-content: flex-start;
  margin: var(--space-2xl) 0 0;
}

/* PLAN_CRITIQUE_2 Issue 4: authored-lead variant of the family blueprint CTA.
   When the shortcode is invoked with a `lead` arg, the 4-promise grid is
   suppressed and a centered lead paragraph anchors the closing block. */
.tbox-cta-section__lead {
  max-width: var(--prose-measure-default, 68ch);
  margin: 0 auto var(--space-xl);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.tbox-cta-section__prop {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm-plus);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-muted);
}

.tbox-cta-section__prop .material-symbols-outlined {
  font-size: 20px;
  /* infrastructure blue — decorative; cyan still reserved for interactive */
  color: var(--brand-primary-text);
  flex-shrink: 0;
  margin-top: 2px;
  font-variation-settings: 'FILL' 1;
}

.tbox-cta-section__prop strong {
  color: var(--text-on-dark);
  font-weight: var(--fw-semibold);
}

/* CTA card (right column) */
.tbox-cta-section__card {
  background-color: var(--brand-primary-08);
  border: 1px solid var(--surface-glass-25);
  border-radius: var(--radius-md, 8px);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
}

.tbox-cta-section__card-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs-plus) var(--space-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  /* This chip sits on the dark blueprint card, so it uses on-dark text and a
     translucent brand-glass fill. The prior white-mixed fill rendered as a
     pale chip with low-contrast brand-blue text on the dark surface. */
  color: var(--text-on-dark);
  background-color: var(--brand-primary-12);
  border: 1px solid var(--brand-primary-25);
  border-radius: var(--radius-sm-plus);
  margin-bottom: var(--space-lg);
}

.tbox-cta-section__card-note .material-symbols-outlined {
  font-size: 16px;
  color: inherit;
}

.tbox-cta-section__card-heading {
  font-family: var(--ff-display);
  font-size: var(--fs-heading-md);
  font-weight: var(--fw-bold);
  color: var(--text-on-dark);
  margin: 0 0 var(--space-sm);
}

.tbox-cta-section__card-desc {
  font-size: var(--fs-base);
  color: var(--text-on-dark-muted);
  margin: 0 0 var(--space-xl);
  line-height: var(--lh-relaxed);
}

.tbox-cta-section__card-actions {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm-plus);
  align-items: stretch;
}

.tbox-cta-section__card-actions .tbox-btn {
  width: 100%;
  justify-content: center;
}

.tbox-cta-section__trust-item {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  /* Cramped-padding detector requires >=6px vertical inside compact chips. */
  padding: var(--space-xs-plus) var(--space-md);
  font-size: var(--fs-base);
  color: var(--surface-glass-75);
  background-color: var(--brand-primary-04);
  border: 1px solid var(--surface-glass-25);
  border-radius: var(--radius-sm-plus);
}

/* Chip rendered as a link (e.g. SLA chip -> /tos/) keeps chip styling
   but signals interactivity on hover/focus. */
a.tbox-cta-section__trust-item--link {
  text-decoration: none;
  cursor: pointer;
}

a.tbox-cta-section__trust-item--link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
  border-color: var(--surface-glass-45);
}

a.tbox-cta-section__trust-item--link:focus-visible {
  outline: 2px solid var(--brand-primary-text);
  outline-offset: 2px;
}

.tbox-cta-section__trust-item .material-symbols-outlined {
  font-size: 18px;
  /* infrastructure blue — decorative; cyan still reserved for interactive */
  color: var(--brand-primary-text);
  font-variation-settings: 'FILL' 1;
}

@media (width <= 768px) {
  .tbox-cta-section__grid {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }

  .tbox-cta-section__left {
    text-align: center;
  }

  .tbox-cta-section--blueprint .tbox-cta-section__left .tbox-section__heading {
    text-align: center;
    font-size: var(--fs-heading-md);
  }

  .tbox-cta-section__props {
    align-items: center;
  }

  .tbox-cta-section__prop {
    text-align: left;
  }

  .tbox-cta-section__trust {
    gap: var(--space-md);
  }

  .tbox-cta-section__left .tbox-cta-section__trust {
    justify-content: center;
  }
}

/* `#content p,
#content div { color: … }` is a high-specificity global rule,
so we must
   explicitly re-assert light-on-dark body copy within blueprint CTA sections. */
/* stylelint-disable-next-line no-descending-specificity -- content shells need local paragraph control */
#content .tbox-case-study p {
  margin-top: var(--space-lg);
  line-height: var(--lh-loose);
  max-width: var(--width-desc);
}

/* stylelint-disable-next-line no-descending-specificity -- card paragraph reset is scoped to product-search cards */
#content .tbox-search-product-card p {
  margin: 0;
}

/* stylelint-disable no-descending-specificity -- route-definition paragraphs intentionally override generic content rules */
#content .tbox-route-definition p,
#content .tbox-route-definition--auto p {
  margin: 0;
  color: var(--text-secondary);
}
/* stylelint-enable no-descending-specificity */

/* stylelint-disable-next-line no-descending-specificity -- configurator prompt copy is intentionally scoped */
#tbox-app-hosting-configurator .tbox-ahcalc-help-prompt p {
  color: var(--surface-glass-90);
  line-height: var(--lh-normal);
}

#content .tbox-cta-section.tbox-cta-section--blueprint p {
  color: var(--text-on-dark);
}

#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-cta-section__note {
  color: var(--text-on-dark-muted);
}

/* stylelint-disable-next-line no-descending-specificity -- card desc must override #content p color */
#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-cta-section__card-desc {
  color: var(--text-on-dark-muted);
}

#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-cta-section__prop {
  color: var(--text-on-dark-muted);
}

.tbox-sa-rating-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  padding: var(--space-sm-minus) 0.85rem;
  border: 1px solid var(--surface-glass-35);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-glass-12);
  color: var(--text-on-dark);
  margin: var(--space-md) auto 1rem;
}

#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;
}

#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-sa-rating-badge,
#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-sa-rating-badge__text,
#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-sa-rating-badge strong {
  color: var(--text-inverse);
}

@media (width <= 600px) {
  .tbox-cta-section.tbox-cta-section--blueprint h2 {
    font-size: var(--fs-heading-md);
  }

  .tbox-cta-section__actions {
    flex-direction: column;
    align-items: center;
  }

  .tbox-cta-section__actions a,
.tbox-cta-section__actions button,
.tbox-cta-section__actions :is(.tbox-widget-host, .jlc-wrapper, .jlc-app) {
    width: 100%;
    max-width: var(--width-cta-action-max-mobile);
  }
}

.tbox-cta-band {
  border-radius: var(--radius-lg, 12px);
  padding: 2.25rem;
  border: 1px solid var(--border-cta-band);
  background: var(--surface-cta-band);
  box-shadow: var(--shadow-cta-band);
}

.tbox-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-md-plus);
  margin-top: var(--space-lg-plus);
}

.tbox-cta-row--flush {
  margin-top: 0;
}

.tbox-cta-row--center {
  justify-content: center;
}

/* POLISH fix F: equalize centered CTA-row button height so the primary cart-add
   button matches the outline chat button on the Managed Firewalls add-on family
   (/managed-firewalls/, /managed-vpn/, /managed-virtual-routers/).
   Outline buttons in this row land at ~58px; pin a 56px floor on the row siblings.
   Scoped to the page #pricing anchor used by the add-on family so this does not
   reshape unrelated centered CTA rows across the site. */
section#pricing .tbox-cta-row.tbox-cta-row--center > a.tbox-btn {
  min-height: 56px;
  box-sizing: border-box;
}

@media (width <= 480px) {
  section#pricing .tbox-cta-row.tbox-cta-row--center > a.tbox-btn {
    font-size: 16px;
  }
}

@media (width <= 600px) {
  .tbox-cta-row {
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
  }

  .tbox-cta-row .tbox-btn,
.tbox-cta-row .tbox-btn-outline,
.tbox-cta-row a.btn {
    width: 100%;
    max-width: 320px;
  }
}

.tbox-decision-panel {
  border-radius: var(--radius-lg, 12px);
  border: 1px solid var(--border-light);
  background: var(--surface-decision-panel);
  box-shadow: var(--shadow-decision-panel);
  padding: var(--space-xl);
}

/* ── Decision section wrapper ── */
.tbox-decision-section {
  padding: var(--space-section-y) var(--space-xl);
}

/* ── Decision card grid ── */
.tbox-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg-plus);
  margin-bottom: var(--space-xl-plus);
}

@media (width <= 900px) {
  .tbox-decision-grid {
    grid-template-columns: 1fr;
  }
}

/* === .tbox-card--decision (absorbs .tbox-decision-card + .ah-rfy-card) === */

/* Override base .tbox-card padding + grid align-items so the colored header band spans full width */
/* stylelint-disable-next-line no-duplicate-selectors,
no-descending-specificity */
.tbox-card--decision {
  padding: 0;
  overflow: hidden;
  align-items: stretch;
}

.tbox-card--decision .tbox-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm-plus);
  padding: var(--space-lg-plus) var(--space-xl);
  border-bottom: 1px solid var(--border-light);
}

.tbox-card--decision .tbox-card__body {
  padding: var(--space-lg-plus) var(--space-xl) 1.5rem;
  flex: 1;
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-card--decision .tbox-card__body > p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-loose);
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-card--decision .tbox-card__body > p + p {
  margin-top: var(--space-sm);
}

.tbox-card--decision .tbox-card__footer {
  padding: 0 1.5rem 1.25rem;
}

/* Stacked variant: Best fit (green/success) */
.tbox-card--best-fit {
  border: 1px solid var(--brand-primary-22);
  background: color-mix(in srgb, var(--brand-primary) 4%, var(--surface-base));
  box-shadow: var(--shadow-md);
}

.tbox-card--best-fit .tbox-card__header {
  background: rgb(16 185 129 / 14%);
}

/* Stacked variant: Consider instead (orange/CTA) */
.tbox-card--consider {
  opacity: 0.92;
}

.tbox-card--consider .tbox-card__header {
  background: var(--brand-cta-10);
}

/* ── Decision section: separated-card layout with OR divider ── */

/* Grid: 3-column layout — card | OR separator | card.
   !important on gap/padding to beat the page-specific rule
   #hero-section.tbox-hourly-cloud-vps ~ #fit-section (spec 2,2,0) which sets both. */
.tbox-decision-section .tbox-standard-features-grid--decision {
  grid-template-columns: 1fr auto 1fr !important;
  gap: 0 !important;
  padding: 0 !important;
  align-items: stretch;
  position: relative;
}

/* Decision card hover */
.tbox-decision-section .tbox-card--decision {
  transition: border-color var(--ease-slow), box-shadow var(--ease-slow);
}

.tbox-decision-section .tbox-card--decision:hover {
  border-color: var(--brand-primary-30, var(--border-mid));
  box-shadow: var(--shadow-md);
}

@media (prefers-reduced-motion: reduce) {
  .tbox-decision-section .tbox-card--decision {
    transition: none;
  }

}

/* OR separator — reset card defaults from .tbox-standard-features-grid > :is(div, article) */
.tbox-decision-section .tbox-products-or-sep {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
}

/* Best-fit card: standalone dark card */
.tbox-decision-section .tbox-standard-features-grid--decision .tbox-card--best-fit {
  background: var(--brand-hero-dark);
  border-left: none;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  overflow: hidden;
}

/* Consider card: standalone light card */
.tbox-decision-section .tbox-standard-features-grid--decision .tbox-card--consider {
  margin-top: 0 !important;
  opacity: 1;
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Mobile: single column,
hide OR separator */
@media (width <= 900px) {
  .tbox-decision-section .tbox-standard-features-grid--decision {
    grid-template-columns: 1fr !important;
  }

  .tbox-decision-section .tbox-products-or-sep {
    display: none;
  }
}

.tbox-decision-section .tbox-standard-features-grid--decision .tbox-card--best-fit .tbox-card__header {
  background: rgb(255 255 255 / 6%);
  border-bottom-color: rgb(255 255 255 / 10%);
}

.tbox-decision-section .tbox-standard-features-grid--decision .tbox-card--best-fit .tbox-card__heading {
  color: #fff;
}

.tbox-decision-section .tbox-standard-features-grid--decision .tbox-card--best-fit .tbox-offer-list li {
  color: rgb(226 232 240 / 85%);
  border-color: rgb(255 255 255 / 8%);
}

.tbox-decision-section .tbox-standard-features-grid--decision .tbox-card--best-fit .tbox-offer-list li em {
  color: #fff;
  font-style: normal;
  font-weight: var(--fw-semibold);
}

.tbox-decision-section .tbox-standard-features-grid--decision .tbox-card--best-fit .tbox-card__icon {
  background: rgb(255 255 255 / 8%);
  border-color: rgb(255 255 255 / 12%);
  color: #fff;
}

/* App Hosting card header */
.tbox-decision-section .tbox-standard-features-grid--decision .tbox-card--consider .tbox-card__header {
  background: transparent;
  border-bottom-color: var(--border-light);
}

/* Eyebrow labels */
.tbox-decision-eyebrow {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-right: var(--space-xs);
}

.tbox-decision-section .tbox-card--best-fit .tbox-decision-eyebrow {
  color: var(--brand-primary);
}

.tbox-decision-section .tbox-card--consider .tbox-decision-eyebrow {
  color: var(--brand-primary-text);
}

/* Single-line scannable items */
.tbox-decision-section .tbox-offer-list li {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-card CTAs */
.tbox-decision-cta {
  display: inline-block;
  margin-top: var(--space-lg);
  padding: var(--space-sm-plus) var(--space-lg);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  letter-spacing: 0.03em;
  text-decoration: none;
}

.tbox-decision-cta--primary {
  background: var(--brand-cta);
  color: #fff;
}

.tbox-decision-cta--primary:hover,
.tbox-decision-cta--primary:focus {
  background: var(--brand-cta-hover);
  color: #fff;
}

.tbox-decision-cta--secondary {
  color: var(--brand-primary-text);
  border: 2px solid var(--border-light);
}

.tbox-decision-cta--secondary:hover,
.tbox-decision-cta--secondary:focus {
  border-color: var(--brand-primary-text);
}

/* App Hosting strong labels: muted,
not orange */
.tbox-card--consider .tbox-offer-list li strong {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.tbox-theme-dark .tbox-card--consider,
[data-theme="dark"] .tbox-card--consider {
  background: var(--surface-card);
  border-color: var(--border-mid);
}

/* --- Pricing card variant --- */

.tbox-card--pricing .tbox-offer-list {
  text-align: left;
}

.tbox-card__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-xs);
}

.tbox-card__price {
  font-size: var(--heading--font-size-h2);
  font-weight: var(--fw-bold);
  font-variant-numeric: tabular-nums;
  color: var(--brand-primary-text);
  line-height: var(--lh-tight);
  margin-bottom: var(--space-sm);
}

.tbox-card__sublabel {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-tertiary);
  margin-top: var(--space-lg);
  margin-bottom: var(--space-sm);
}

/* ── Compare card body ── */
.tbox-decision-compare__text {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  margin-bottom: var(--space-lg-plus);
}

/* ── Bottom help line ── */
.tbox-decision-help {
  text-align: center;
  font-size: var(--fs-base);
  /* --text-muted failed AA on .tbox-section--alt surfaces (4.07:1 on #e8eef4) */
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin-top: var(--space-lg);
}

/* ── Decision panel reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .tbox-card--decision,
  .tbox-decision-help a {
    transition-duration: 0.01ms;
  }
}

/* ── Decision grid: 2-column variant ── */
.tbox-decision-grid--two-col {
  grid-template-columns: 1fr 1fr;
}

@media (width <= 700px) {
  .tbox-decision-grid--two-col {
    grid-template-columns: 1fr;
  }
}

/* ── Use-case segmentation grid (fit-section) ── */

.tbox-usecase-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.tbox-usecase-card {
  background: var(--surface-base);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: box-shadow var(--ease-base), border-color var(--ease-base);
}

.tbox-usecase-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-mid);
}

.tbox-usecase-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tbox-usecase-card__header h3 {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-semibold);
  margin: 0;
  color: var(--text-primary);
}

.tbox-usecase-card__header .material-symbols-outlined {
  font-size: 20px;
  flex-shrink: 0;
}

.tbox-usecase-card__body {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* Icon color accents per use-case card */
.tbox-usecase-card--saas .material-symbols-outlined { color: var(--brand-primary); }
.tbox-usecase-card--wordpress .material-symbols-outlined { color: var(--brand-cta); }
.tbox-usecase-card--ecommerce .material-symbols-outlined { color: var(--success); }
.tbox-usecase-card--data .material-symbols-outlined { color: var(--color-cyan); }
.tbox-usecase-card--spiky .material-symbols-outlined { color: var(--color-teal); }
.tbox-usecase-card--agency .material-symbols-outlined { color: var(--brand-primary-text); }

/* Cloud VPS use-case card variants */
.tbox-usecase-card--root    .material-symbols-outlined { color: var(--brand-primary); }
.tbox-usecase-card--windows .material-symbols-outlined { color: var(--color-cyan); }
.tbox-usecase-card--cicd    .material-symbols-outlined { color: var(--color-teal); }
.tbox-usecase-card--db      .material-symbols-outlined { color: var(--success); }
.tbox-usecase-card--network .material-symbols-outlined { color: var(--brand-cta); }
.tbox-usecase-card--devenv  .material-symbols-outlined { color: var(--brand-primary-text); }

/* Callout spacing when it follows the usecase grid */
.tbox-usecase-grid + .tbox-callout--icon {
  margin-top: var(--space-xl);
}

/* Consecutive callouts */
.tbox-callout--icon + .tbox-callout--icon {
  margin-top: var(--space-md);
}

.tbox-usecase-grid ~ .tbox-callout--icon .tbox-callout__icon .material-symbols-outlined {
  font-size: 24px;
  color: var(--brand-cta);
}

@media (width <= 900px) {
  .tbox-usecase-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 600px) {
  .tbox-usecase-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-btn,
.tbox-btn:hover,
.tbox-btn-outline,
.tbox-btn-outline:hover,
a.btn,
button.btn,
.tbox-trust-badge,
.tbox-card--feature,
.tbox-cta-section__inner,
.tbox-card,
.tbox-usecase-card,
.tbox-standard-features-grid > :is(div, article) {
    transition: none;
  }

  .tbox-btn:hover,
.tbox-trust-badge:hover,
.tbox-card--feature:hover,
.tbox-card:hover,
.tbox-standard-features-grid > :is(div, article):hover {
    transform: none;
  }

  .tbox-card--feature:hover .tbox-card__icon {
    transform: none;
  }

}

/* ============================================
   Hero V3 (shared base for redesigned heroes)
   ============================================ */

/* Base hero container: solid dark background */
.tbox-hero-v3 {
  position: relative;
  overflow: hidden;
  --brand-primary-dark: var(--brand-primary-deep);
  --brand-hero-mid: var(--brand-primary);
  background: var(--brand-primary-deep);
  padding: var(--space-section-y) var(--space-xl) var(--space-3xl-plus);
  text-align: center;
  color: var(--text-inverse);
}

/* Extra bottom padding for full heroes — trust bar pill needs clearance above value strip.
   #hero-section specificity needed to beat #hero-section.tbox-hourly-cloud-vps { padding-bottom: 0 } at line 2044 */
#hero-section.tbox-hero-v3:not(.tbox-hero-v3--compact):not(.tbox-home-hero) {
  padding-bottom: 5rem;
}

.tbox-hero-v3::before,
.tbox-hero-v3::after {
  content: none;
}

.tbox-hero-v3__inner {
  position: relative;
  z-index: 2;
  max-width: var(--width-narrow-md);
  margin: 0 auto;
}

/* ── Headline ── */
.tbox-hero-v3__title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.2;
  letter-spacing: var(--ls-normal);
  margin-bottom: var(--space-lg-plus);
  text-wrap: balance;
}

/* Full-hero typography refinements (not compact) */
.tbox-hero-v3:not(.tbox-hero-v3--compact) .tbox-hero-v3__title {
  line-height: var(--lh-tight);
  margin-bottom: var(--space-2xl);
}

.tbox-hero-v3__title em {
  font-style: normal;
  color: var(--brand-highlight);
}

/* ── Orange <em> for mechanism emphasis (rebrand) ── */

/* FAQ answers keep italic em — mechanism emphasis doesn't belong in FAQ prose */
.tbox-faq-section .tbox-faq-answer em,
.tbox-faq-item .tbox-faq-item__answer em {
  font-style: italic;
  color: inherit;
  font-weight: inherit;
}

/* ── Subtitle ── */
#hero-section.tbox-hero-v3 .tbox-hero-v3__subtitle {
  font-size: clamp(1rem, 1.8vw, 1.15rem);
  line-height: var(--lh-loose);
  color: var(--text-inverse);
  max-width: 640px;
  margin: 0 auto 2.25rem;
  text-wrap: pretty;
}

/* ── CTA row ── */
.tbox-hero-v3__cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-md);
  flex-wrap: wrap;
  margin-bottom: var(--space-lg);
}

/* Signup-offer note under the hero CTA row. Sits on dark Hero V3
   backgrounds in both themes, so it keys off --text-inverse. */
.tbox-hero-v3__cta-note {
  margin: calc(-1 * var(--space-sm)) 0 var(--space-lg);
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--text-inverse) 85%, transparent);
  text-align: center;
}

/* Canonical hero proof/trust strip. Item shapes documented in
   docs/reference-design-system.md. Defaults target dark Hero V3;
   light heroes opt in via .tbox-hero-v3--light or --light modifier. */
.tbox-hero-proof {
  --tbox-hero-proof-emphasis: var(--text-inverse);
  --tbox-hero-proof-body: color-mix(in srgb, var(--text-inverse) 78%, transparent);
  --tbox-hero-proof-rule: var(--text-inverse-18);

  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  width: 100%;
  margin: clamp(var(--space-md), 2vw, var(--space-xl)) 0 0;
  border-block: 1px solid var(--tbox-hero-proof-rule);
}
.tbox-hero-proof span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  min-height: 2.75rem;
  padding: var(--space-2xs) clamp(var(--space-md), 2vw, var(--space-lg));
  color: var(--tbox-hero-proof-body);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}
.tbox-hero-proof strong {
  color: var(--tbox-hero-proof-emphasis);
  font-weight: var(--fw-semibold);
}
.tbox-hero-proof svg {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--tbox-hero-proof-emphasis);
  opacity: 0.85;
}
@media (width <= 760px) {
  .tbox-hero-proof span { width: 100%; justify-content: flex-start; }
}

.tbox-hero-v3--light .tbox-hero-proof,
.tbox-hero-proof.tbox-hero-proof--light {
  --tbox-hero-proof-emphasis: var(--text-primary);
  --tbox-hero-proof-body: color-mix(in srgb, var(--text-primary) 76%, transparent);
  --tbox-hero-proof-rule: color-mix(in srgb, var(--text-primary) 18%, transparent);
}

/* ── Value strip (App Hosting + Cloud VPS) ── */

/* Reduce overlap for compact heroes (less bottom padding) */
.tbox-value-strip {
  --tbox-connected-value-strip-shadow: var(--shadow-value-strip-connector);
  position: relative;
  z-index: 2;
  max-width: var(--width-value-strip);
  margin: -1.5rem auto 0;
  padding: 0 1.5rem;
}

.tbox-hero-v3--compact + .tbox-value-strip {
  margin-top: -0.75rem;
}

.tbox-value-strip__wrap {
  background: var(--border-light);
  border-radius: var(--radius-lg);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  box-shadow: var(--shadow-md), 0 0 0 1px var(--overlay-04);
  overflow: hidden;
}

.tbox-value-card {
  background: var(--surface-base);
  padding: var(--space-lg-plus);
  text-align: left;
  position: relative;
}

.tbox-value-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm-plus);
  margin-bottom: var(--space-xs-plus);
}

.tbox-value-card:first-child { border-radius: var(--radius-lg) 0 0 var(--radius-lg); }
.tbox-value-card:last-child { border-radius: 0 var(--radius-lg) var(--radius-lg) 0; }

/* Flush bottom corners when value strip connects to jump bar or proof strip */
.tbox-value-strip:has(+ :is(.tbox-jump-bar, .tbox-proof-strip-compact)) .tbox-value-strip__wrap {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  box-shadow: var(--tbox-connected-value-strip-shadow);
}

#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip {
  --tbox-connected-value-strip-shadow:
    0 22px 44px rgb(15 23 42 / 12%),
    var(--shadow-value-strip-connector);
  max-width: min(1120px, calc(100vw - 2rem));
  margin-top: -2.25rem;
  padding-inline: 1rem;
}

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

.tbox-value-strip:has(+ :is(.tbox-jump-bar, .tbox-proof-strip-compact)) .tbox-value-card:first-child {
  border-radius: var(--radius-lg) 0 0 0;
}

.tbox-value-strip:has(+ :is(.tbox-jump-bar, .tbox-proof-strip-compact)) .tbox-value-card:last-child {
  border-radius: 0 var(--radius-lg) 0 0;
}

.tbox-value-strip + .tbox-jump-bar {
  border-top: 1px solid var(--border-light);
}

.tbox-hero-v3--compact + .tbox-jump-bar {
  border-top: 1px solid var(--surface-glass-10);
}

.tbox-value-strip + .tbox-section,
.tbox-hero-v3--compact + .tbox-jump-bar + .tbox-section,
.tbox-value-strip + .tbox-jump-bar + .tbox-section {
  padding-top: clamp(2.75rem, 4vw, 3.5rem);
}

/* stylelint-disable-next-line no-descending-specificity -- scoped proof-strip adjacency complements the compact-hero section rhythm rules */
.tbox-proof-strip + .tbox-section,
.tbox-value-strip + .tbox-proof-strip + .tbox-section {
  padding-top: clamp(2.75rem, 4vw, 3.5rem);
}

.tbox-proof-strip + .tbox-section :is(.tbox-standard-features-grid--bento-repack, .tbox-standard-features-grid--content-cards, .tbox-standard-features-grid--detail-columns),
.tbox-value-strip + .tbox-proof-strip + .tbox-section :is(.tbox-standard-features-grid--bento-repack, .tbox-standard-features-grid--content-cards, .tbox-standard-features-grid--detail-columns) {
  margin-top: clamp(1rem, 1.6vw, 1.5rem);
}

.tbox-trust-section--slim + .tbox-faq-section,
.tbox-trust-inline + .tbox-faq-section {
  padding-top: clamp(3.5rem, 5vw, 4.5rem);
}

.tbox-faq-section + .tbox-cta-section--blueprint,
.tbox-trust-section--slim + .tbox-cta-section--blueprint {
  margin-top: 0;
}

.tbox-value-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--brand-primary);
}

.tbox-value-card__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

/* WordPress value strip — reserve two title lines so card bodies start at the
   same y-position even when one title wraps. Scoped to the wordpress set. */
.tbox-value-strip[data-value-strip-set="wordpress"] .tbox-value-card__title {
  min-height: calc(2 * var(--fs-lg) * var(--lh-snug));
  min-height: 2lh;
}

.tbox-value-card__desc {
  font-size: var(--fs-base);
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
  padding-left: calc(18px + var(--space-sm-plus));
}

/* ── Pricing anchor (App Hosting + Cloud VPS) ── */
.tbox-pricing-anchor {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  flex-wrap: wrap;
  margin-top: var(--space-xl);
  padding: var(--space-lg) var(--space-xl);
}

.tbox-pricing-chip {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-xs-plus);
  padding: 0.55rem 1rem;
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  position: relative;
  z-index: 1;
  box-shadow: var(--shadow-sm);
}

.tbox-pricing-chip__price {
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xl);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap; /* "1 TB" must not split mid-unit on narrow chips */
}

.tbox-pricing-chip__unit {
  font-size: var(--fs-xs);
  color: var(--text-muted);
}

.tbox-pricing-chip__context {
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  padding-left: var(--space-sm);
  border-left: 1px solid var(--border-light);
  margin-left: var(--space-xs);
}

/* ── Hero entrance animation ── */
@keyframes tbox-hero-enter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Hero entrance animation removed (designcheck) */


/* ── Hero V3 responsive ── */
@media (width <= 900px) {
  .tbox-hero-v3 { padding: var(--space-3xl-plus) var(--space-lg-plus) var(--space-3xl); }
  .tbox-value-strip__wrap { grid-template-columns: repeat(2, 1fr); }
  .tbox-value-card:first-child { border-radius: var(--radius-lg) 0 0 0; }
  .tbox-value-card:nth-child(2) { border-radius: 0 var(--radius-lg) 0 0; }
  .tbox-value-card:nth-child(3) { border-radius: 0 0 0 var(--radius-lg); }
  .tbox-value-card:last-child { border-radius: 0 0 var(--radius-lg) 0; }
  .tbox-value-strip:has(+ :is(.tbox-jump-bar, .tbox-proof-strip-compact)) .tbox-value-card:nth-child(3),
  .tbox-value-strip:has(+ :is(.tbox-jump-bar, .tbox-proof-strip-compact)) .tbox-value-card:last-child { border-radius: 0; }
  .tbox-pricing-anchor { gap: var(--space-md); }
}

@media (width <= 700px) {
  .tbox-home-hero.tbox-hero-v3 { padding: var(--space-3xl) var(--space-lg) var(--space-2xl-plus); }
}

@media (width <= 600px) {
  .tbox-hero-v3 { padding: var(--space-3xl) var(--space-lg) var(--space-2xl-plus); }
  .tbox-hero-v3__title {
    text-wrap: balance;
    overflow-wrap: break-word;
    word-break: normal;
    hyphens: auto;
  }
  .tbox-hero-v3__cta-row { flex-direction: column; }

  .tbox-hero-v3__cta-row .tbox-btn,
.tbox-hero-v3__cta-row .tbox-btn-outline { width: 100%; justify-content: center; }
  .tbox-pricing-anchor { flex-direction: column; margin-top: var(--space-xl); }
}

/* ── Hero V3 compact modifier ── */
.tbox-hero-v3.tbox-hero-v3--compact {
  padding: 2.25rem 1.5rem 1.75rem;
  text-align: center;
}

.tbox-hero-v3--compact .tbox-hero-v3__inner {
  max-width: var(--width-hero-compact);
}

/* stylelint-disable-next-line no-descending-specificity -- compact overrides full-hero refinements,
disjoint selectors */
.tbox-hero-v3--compact .tbox-hero-v3__title {
  /* Floor sits just above --fs-heading-lg (2rem) so the page h1 outranks
     section h2s at every viewport. */
  font-size: clamp(2.0625rem, 3.2vw, 2.375rem);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  margin-bottom: var(--space-sm);
}

/* stylelint-disable-next-line no-descending-specificity -- compact overrides full-hero refinements,
disjoint selectors */
#hero-section.tbox-hero-v3--compact .tbox-hero-v3__subtitle {
  /* Prominent-body size so the hero's lead sentence outranks ordinary card copy. */
  font-size: var(--fs-prominent-body);
  line-height: var(--lh-relaxed);
  color: var(--text-inverse);
  max-width: 600px;
  margin: 0 auto 0.75rem;
}

/* ── Props chip row (compact hero) ── */
.tbox-hero-v3__props {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  justify-content: center;
  margin-top: var(--space-lg);
}

.tbox-hero-v3__prop {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  padding: var(--space-xs-plus) var(--space-md);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-glass-08);
  border: 1px solid var(--surface-glass-10);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: rgb(226 232 240 / 82%);
  white-space: nowrap;
}

/* ── Compact hero responsive ── */
@media (width <= 600px) {
  .tbox-hero-v3.tbox-hero-v3--compact { padding: var(--space-xl-plus) var(--space-lg) var(--space-xl); }
  .tbox-hero-v3--compact .tbox-hero-v3__subtitle { max-width: 100%; }
}

/* Cloud VPS API page polish: compact hero with an automation artifact. */
.tbox-cvps-api-hero.tbox-hero-v3--compact {
  padding-block: clamp(3rem, 5vw, 5.25rem);
  text-align: left;
}

.tbox-cvps-api-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 0.7fr);
  align-items: center;
  gap: clamp(2.25rem, 5vw, 4.75rem);
  max-width: min(1180px, 92vw);
}

#content .tbox-cvps-api-hero .tbox-hero-v3__title {
  margin-inline: 0;
  max-width: 13ch;
}

#content .tbox-cvps-api-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
  max-width: var(--prose-measure-wide);
}

.tbox-cvps-api-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

.tbox-cvps-api-hero__terminal {
  position: relative;
  border-radius: var(--radius-sm-plus);
  overflow: hidden;
  box-shadow: 0 14px 28px color-mix(in srgb, var(--gray-950) 18%, transparent);
}

.tbox-cvps-api-hero__terminal::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-cta);
}

.tbox-cvps-api-hero__terminal-body {
  background: color-mix(in srgb, var(--gray-950) 72%, var(--brand-primary-dark) 28%);
}

/* Shared hero step list — used by Cloud VPS api and backups hero panels.
   Replaces the page-scoped .tbox-cvps-api-hero__steps and .bkp-hero__steps
   one-offs. Vertical row stack on a dark hero surface, no decorative number
   badge (semantic <ol> order only). */
.tbox-hero-step-list {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbox-hero-step-list > li {
  display: grid;
  gap: var(--space-xs-plus) var(--space-sm);
  padding: var(--space-sm-plus) var(--space-md-plus);
  border-bottom: 1px solid color-mix(in srgb, var(--surface-base) 12%, transparent);
}

.tbox-hero-step-list > li:nth-child(2n) {
  background: color-mix(in srgb, var(--text-inverse) 3%, transparent);
}

.tbox-hero-step-list > li:last-child {
  border-bottom: 0;
}

.tbox-hero-step-list > li > strong,
.tbox-hero-step-list > li > em {
  min-width: 0;
  font-style: normal;
}

.tbox-hero-step-list > li > strong {
  color: var(--text-on-dark);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
}

.tbox-hero-step-list > li > em {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.tbox-cvps-api-hero__commands {
  border-top: 1px solid color-mix(in srgb, var(--surface-base) 12%, transparent);
  background: color-mix(in srgb, var(--gray-950) 62%, var(--brand-primary-dark) 38%);
}

#content .tbox-cvps-api-hero__commands .tbox-hero-terminal__line {
  white-space: normal;
}

.tbox-cvps-api-hero + .tbox-value-strip {
  position: relative;
  z-index: 2;
}

.tbox-cvps-api-hero ~ .tbox-band .tbox-section__heading {
  text-wrap: balance;
}

.tbox-cvps-api-hero ~ .tbox-band .tbox-section__desc {
  max-width: 760px;
}

.tbox-cvps-api-section .tbox-container {
  max-width: min(1180px, 92vw);
}

#content .tbox-cvps-api-section .tbox-section__heading {
  text-align: left;
  max-width: 20ch;
  margin-inline: 0 auto;
}

.tbox-cvps-api-section .tbox-section__heading::after {
  left: 0;
  transform: none;
}

.tbox-cvps-api-section .tbox-section__desc,
.tbox-spoke-overview.tbox-cvps-api-section .tbox-section__desc {
  margin-inline: 0 auto;
  max-width: 760px;
  text-align: left;
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--border-light) 82%, var(--brand-primary) 18%);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  overflow: hidden;
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card {
  display: grid;
  grid-template-columns: 2rem minmax(0, 1fr);
  align-items: start;
  gap: var(--space-md);
  min-width: 0;
  padding: clamp(var(--space-md-plus), 2vw, var(--space-xl));
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card + .tbox-detail-card {
  border-left: 1px solid var(--border-light);
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card:hover {
  border-color: var(--border-light);
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card__icon {
  width: 2rem;
  height: 2rem;
  color: var(--brand-primary-text);
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card:nth-child(2) .tbox-detail-card__icon {
  color: var(--color-teal, var(--brand-primary));
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card:nth-child(3) .tbox-detail-card__icon {
  color: var(--brand-cta);
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card__text {
  min-width: 0;
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card__text :is(h3, h4) {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card__text p {
  font-size: var(--fs-sm);
}

.tbox-code-block--api {
  position: relative;
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
  border: 1px solid color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 76%, var(--surface-subtle) 24%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-inverse) 72%, transparent);
  overflow-x: auto;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

.tbox-cvps-api-matrix {
  border-radius: var(--radius-sm-plus);
  border: 1px solid color-mix(in srgb, var(--border-light) 76%, var(--brand-primary) 24%);
  box-shadow: none;
  overflow: hidden;
}

.tbox-cvps-api-matrix .tbox-feature-matrix__header,
.tbox-cvps-api-matrix .tbox-feature-matrix__row {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.35fr);
}

.tbox-cvps-api-matrix .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--brand-primary-dark) 92%, var(--gray-950) 8%);
  color: var(--text-on-dark);
}

.tbox-cvps-api-matrix .tbox-feature-matrix__row {
  min-height: 4.25rem;
}

.tbox-cvps-api-matrix .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--brand-primary-bg) 54%, var(--surface-base) 46%);
}

.tbox-cvps-api-matrix__label {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.tbox-cvps-api-matrix__value {
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-cvps-api-doc-note {
  max-width: var(--prose-measure-wide);
  color: var(--text-secondary);
}

.tbox-cvps-api-action.tbox-bento-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-md);
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
}

.tbox-cvps-api-action.tbox-bento-cta-card > .tbox-btn {
  min-width: 9.5rem;
  text-align: center;
}

.tbox-cvps-api-audit {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 0.82fr);
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
  align-items: stretch;
  padding: clamp(var(--space-lg), 2.4vw, var(--space-2xl));
  border: 1px solid color-mix(in srgb, var(--border-light) 76%, var(--brand-primary) 24%);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  box-shadow: none;
}

.tbox-cvps-api-audit__copy {
  align-self: center;
}

.tbox-cvps-api-audit__copy h3 {
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
  font-size: clamp(var(--fs-xl), 2vw, var(--fs-2xl));
  line-height: var(--lh-snug);
}

.tbox-cvps-api-audit__copy p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-cvps-api-audit__log {
  display: grid;
  align-content: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbox-cvps-api-audit__log li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 0 var(--space-sm);
  min-width: 0;
  padding: var(--space-sm-plus) var(--space-md);
  border: 1px solid color-mix(in srgb, var(--border-light) 68%, var(--brand-primary) 32%);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-subtle) 70%, var(--surface-base) 30%);
}

.tbox-cvps-api-audit__log span {
  grid-row: span 2;
  color: var(--brand-primary);
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tbox-cvps-api-audit__log strong,
.tbox-cvps-api-audit__log em {
  min-width: 0;
  font-style: normal;
}

.tbox-cvps-api-audit__log strong {
  color: var(--text-primary);
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.tbox-cvps-api-audit__log em {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
}

.tbox-cvps-api-section--activity .tbox-extras-strip {
  border-radius: var(--radius-sm-plus);
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
}

.tbox-cvps-api-section--activity .tbox-extras-strip__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm-plus);
}

.tbox-cvps-api-section--activity .tbox-extras-strip__item {
  align-items: flex-start;
  width: 100%;
  white-space: normal;
}

:root[data-theme="dark"] .tbox-cvps-api-hero__terminal-body {
  background: color-mix(in srgb, var(--gray-950) 78%, var(--brand-primary-dark) 22%);
}

:root[data-theme="dark"] .tbox-code-block--api {
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--brand-primary-dark) 12%);
  border-color: var(--border-mid);
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-grid,
:root[data-theme="dark"] .tbox-cvps-api-audit,
:root[data-theme="dark"] .tbox-cvps-api-section--activity .tbox-extras-strip {
  background: color-mix(in srgb, var(--surface-raised) 92%, var(--brand-primary-dark) 8%);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-cvps-api-matrix .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--gray-950) 84%, var(--brand-primary) 16%);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-cvps-api-audit__log li {
  background: color-mix(in srgb, var(--surface-dark) 74%, var(--surface-raised) 26%);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-cvps-api-matrix .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-raised) 90%);
}

:root[data-theme="dark"] .tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card + .tbox-detail-card {
  border-color: var(--border-mid);
}

@media (width <= 900px) {
  .tbox-cvps-api-hero.tbox-hero-v3--compact {
    text-align: center;
  }

  .tbox-cvps-api-hero .tbox-hero-v3__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--width-hero-compact);
  }

  #content .tbox-cvps-api-hero .tbox-hero-v3__title,
#content .tbox-cvps-api-hero .tbox-hero-v3__subtitle {
    margin-inline: auto;
  }

  .tbox-cvps-api-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-grid,
.tbox-cvps-api-matrix .tbox-feature-matrix__header,
.tbox-cvps-api-matrix .tbox-feature-matrix__row,
.tbox-cvps-api-action.tbox-bento-cta-card,
.tbox-cvps-api-audit,
.tbox-cvps-api-section--activity .tbox-extras-strip__items {
    grid-template-columns: minmax(0, 1fr);
  }

  .tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card + .tbox-detail-card {
    border-top: 1px solid var(--border-light);
    border-left: 0;
  }

  :root[data-theme="dark"] .tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card + .tbox-detail-card {
    border-top-color: var(--border-mid);
  }
}

@media (width <= 600px) {
  #content .tbox-cvps-api-hero .tbox-hero-v3__title {
    max-width: 13ch;
  }

  #content .tbox-cvps-api-hero .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
  }

  .tbox-cvps-api-hero .tbox-hero-v3__cta-row {
    gap: var(--space-sm-plus);
  }

  .tbox-cvps-api-hero__terminal {
    display: none;
  }

  .tbox-cvps-api-hero ~ .tbox-band--code .tbox-detail-card {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-sm);
  }

  .tbox-cvps-api-action.tbox-bento-cta-card > .tbox-btn {
    width: 100%;
  }

  .tbox-cvps-api-audit {
    padding: var(--space-lg);
  }

  .tbox-cvps-api-audit__log li {
    grid-template-columns: 3rem 1fr;
  }

  .tbox-code-block--api {
    padding: var(--space-lg);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* ── Cloud VPS API · MCP interaction demo ──────────────────────── */

.tbox-cvps-mcp-demo {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: var(--space-xl);
  align-items: stretch;
}

.tbox-cvps-mcp-demo__chat,
.tbox-cvps-mcp-demo__result {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: clamp(var(--space-md-plus), 1.6vw, var(--space-lg));
  border: 1px solid color-mix(in srgb, var(--border-light) 76%, var(--brand-primary) 24%);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  box-shadow: var(--shadow-sm);
}

.tbox-cvps-mcp-demo__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm-plus);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}

.tbox-cvps-mcp-demo__bar-icon {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 18%, transparent);
  font-size: 0;
  line-height: 0;
}

.tbox-cvps-mcp-demo__bar-label {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.tbox-cvps-mcp-demo__bar-status {
  margin-left: auto;
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-base);
  letter-spacing: 0;
  color: var(--text-muted);
}

.tbox-cvps-mcp-demo__msg {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs);
  padding: var(--space-sm-plus) var(--space-md);
  margin-bottom: var(--space-sm-plus);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-subtle) 70%, var(--surface-base) 30%);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 240ms ease, transform 240ms ease;
}

.tbox-cvps-mcp-demo__msg[data-active] {
  opacity: 1;
  transform: none;
}

.tbox-cvps-mcp-demo__msg--user {
  background: color-mix(in srgb, var(--brand-primary-bg, var(--surface-subtle)) 32%, var(--surface-base) 68%);
}

.tbox-cvps-mcp-demo__role {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--text-muted);
}

.tbox-cvps-mcp-demo__msg--agent .tbox-cvps-mcp-demo__role {
  color: color-mix(in srgb, var(--brand-primary) 80%, var(--text-primary) 20%);
}

.tbox-cvps-mcp-demo__text {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}

.tbox-cvps-mcp-demo__msg--user .tbox-cvps-mcp-demo__text::after {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-left: 2px;
  vertical-align: -0.18em;
  background: currentcolor;
  opacity: 0;
  animation: tbox-mcp-demo-cursor 1s steps(1, end) infinite;
}

.tbox-cvps-mcp-demo[data-mcp-state="typing"] .tbox-cvps-mcp-demo__msg--user .tbox-cvps-mcp-demo__text::after {
  opacity: 1;
}

.tbox-cvps-mcp-demo__tools {
  display: grid;
  gap: var(--space-2xs);
  margin: 0 0 var(--space-sm-plus);
  padding: 0;
  list-style: none;
}

.tbox-cvps-mcp-demo__tools li {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-subtle) 60%, var(--surface-base) 40%);
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 200ms ease, transform 200ms ease, border-color 200ms ease, background 200ms ease;
}

.tbox-cvps-mcp-demo__tools li[data-active] {
  opacity: 1;
  transform: none;
  border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--border-light) 68%);
}

.tbox-cvps-mcp-demo__tools code {
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  background: transparent;
  padding: 0;
}

.tbox-cvps-mcp-demo__tools em {
  font-style: normal;
  font-size: var(--fs-xs);
  color: var(--text-secondary);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.tbox-cvps-mcp-demo__check {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success-text, var(--success-deep));
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: 1;
  opacity: 0;
  transform: scale(0.6);
}

.tbox-cvps-mcp-demo__tools li[data-active] .tbox-cvps-mcp-demo__check {
  animation: tbox-mcp-demo-stamp 220ms ease-out forwards;
}

.tbox-cvps-mcp-demo__result-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding-bottom: var(--space-sm-plus);
  margin-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
}

.tbox-cvps-mcp-demo__result-status {
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-base);
  letter-spacing: 0;
  color: var(--text-muted);
  transition: color 200ms ease;
}

.tbox-cvps-mcp-demo[data-mcp-state="tools"] .tbox-cvps-mcp-demo__result-status {
  color: var(--brand-cta);
}

.tbox-cvps-mcp-demo[data-mcp-state="final"] .tbox-cvps-mcp-demo__result-status,
.tbox-cvps-mcp-demo[data-mcp-state="hold"] .tbox-cvps-mcp-demo__result-status,
.tbox-cvps-mcp-demo[data-mcp-state="done"] .tbox-cvps-mcp-demo__result-status {
  color: var(--success-text, var(--success-deep));
}

.tbox-cvps-mcp-demo__result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin-bottom: var(--space-sm-plus);
}

.tbox-cvps-mcp-demo__node {
  display: grid;
  gap: 2px;
  padding: var(--space-sm) var(--space-sm-plus);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-subtle) 50%, var(--surface-base) 50%);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.tbox-cvps-mcp-demo__node[data-active] {
  opacity: 1;
  transform: none;
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border-light) 72%);
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base) 95%);
}

.tbox-cvps-mcp-demo__node strong {
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.tbox-cvps-mcp-demo__node em {
  font-style: normal;
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
}

.tbox-cvps-mcp-demo__net {
  position: relative;
  height: 6px;
  margin-bottom: var(--space-sm-plus);
  border-radius: var(--radius-cap);
  background: color-mix(in srgb, var(--brand-primary) 16%, var(--surface-subtle) 84%);
  clip-path: inset(0 100% 0 0);
  transition: clip-path 480ms ease;
}

.tbox-cvps-mcp-demo__net[data-active] {
  clip-path: inset(0 0 0 0);
}

.tbox-cvps-mcp-demo__backup {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-sm-plus);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-subtle) 60%, var(--surface-base) 40%);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 220ms ease, transform 220ms ease, border-color 220ms ease, background 220ms ease;
}

.tbox-cvps-mcp-demo__backup[data-active] {
  opacity: 1;
  transform: none;
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border-light) 72%);
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base) 95%);
}

.tbox-cvps-mcp-demo__backup .material-symbols-outlined {
  font-size: 18px;
  color: var(--brand-primary);
}

.tbox-cvps-mcp-demo__backup strong {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

.tbox-cvps-mcp-demo__backup em {
  font-style: normal;
  font-family: var(--tbox-font-mono, 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  text-align: right;
}

@keyframes tbox-mcp-demo-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

@keyframes tbox-mcp-demo-stamp {
  0%   { opacity: 0; transform: scale(0.6); }
  60%  { opacity: 1; transform: scale(1.12); }
  100% { opacity: 1; transform: scale(1); }
}

/* Dark mode */
:root[data-theme="dark"] .tbox-cvps-mcp-demo__chat,
:root[data-theme="dark"] .tbox-cvps-mcp-demo__result {
  background: color-mix(in srgb, var(--surface-raised) 92%, var(--brand-primary-dark) 8%);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-cvps-mcp-demo__bar,
:root[data-theme="dark"] .tbox-cvps-mcp-demo__result-head {
  border-bottom-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-cvps-mcp-demo__msg {
  background: color-mix(in srgb, var(--surface-dark) 64%, var(--surface-raised) 36%);
}

:root[data-theme="dark"] .tbox-cvps-mcp-demo__msg--user {
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-raised) 88%);
}

:root[data-theme="dark"] .tbox-cvps-mcp-demo__tools li {
  background: color-mix(in srgb, var(--surface-dark) 60%, var(--surface-raised) 40%);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-cvps-mcp-demo__tools li[data-active] {
  border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--border-mid) 64%);
}

:root[data-theme="dark"] .tbox-cvps-mcp-demo__node,
:root[data-theme="dark"] .tbox-cvps-mcp-demo__backup {
  background: color-mix(in srgb, var(--surface-dark) 60%, var(--surface-raised) 40%);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-cvps-mcp-demo__node[data-active],
:root[data-theme="dark"] .tbox-cvps-mcp-demo__backup[data-active] {
  border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--border-mid) 64%);
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-raised) 88%);
}

:root[data-theme="dark"] .tbox-cvps-mcp-demo__check {
  color: color-mix(in srgb, var(--success) 60%, var(--text-on-dark) 40%);
  background: color-mix(in srgb, var(--success) 22%, transparent);
}

:root[data-theme="dark"] .tbox-cvps-mcp-demo[data-mcp-state="final"] .tbox-cvps-mcp-demo__result-status,
:root[data-theme="dark"] .tbox-cvps-mcp-demo[data-mcp-state="hold"] .tbox-cvps-mcp-demo__result-status,
:root[data-theme="dark"] .tbox-cvps-mcp-demo[data-mcp-state="done"] .tbox-cvps-mcp-demo__result-status {
  color: color-mix(in srgb, var(--success) 70%, var(--text-on-dark) 30%);
}

/* Mobile */
@media (width <= 900px) {
  .tbox-cvps-mcp-demo {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (width <= 640px) {
  .tbox-cvps-mcp-demo__result-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .tbox-cvps-mcp-demo__bar-status {
    display: none;
  }
}

/* Reduced motion: skip transitions, show final state */
@media (prefers-reduced-motion: reduce) {
  .tbox-cvps-mcp-demo,
  .tbox-cvps-mcp-demo *,
  .tbox-cvps-mcp-demo *::before,
  .tbox-cvps-mcp-demo *::after {
    animation: none !important;
    transition: none !important;
  }

  .tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__msg,
  .tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__tools li,
  .tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__node,
  .tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__backup,
  .tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__check {
    opacity: 1 !important;
    transform: none !important;
  }

  .tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__net {
    clip-path: inset(0 0 0 0) !important;
  }

  .tbox-cvps-mcp-demo.is-static .tbox-cvps-mcp-demo__msg--user .tbox-cvps-mcp-demo__text::after {
    display: none;
  }
}

/* Forced colors / high contrast */
@media (forced-colors: active) {
  .tbox-cvps-mcp-demo__chat,
  .tbox-cvps-mcp-demo__result,
  .tbox-cvps-mcp-demo__tools li,
  .tbox-cvps-mcp-demo__node,
  .tbox-cvps-mcp-demo__backup,
  .tbox-cvps-mcp-demo__msg {
    border-color: CanvasText;
  }

  .tbox-cvps-mcp-demo__tools li[data-active],
  .tbox-cvps-mcp-demo__node[data-active],
  .tbox-cvps-mcp-demo__backup[data-active] {
    border-color: Highlight;
  }

  .tbox-cvps-mcp-demo__check {
    color: Highlight;
    background: transparent;
    border: 1px solid Highlight;
  }
}

/* ============================================
   Inline style guardrails (transitional)
   ============================================ */

/* Inline color styles override CSS. These legacy literal selectors are
   intentional compatibility hooks that map old inline values to semantic
   tokens without preserving the old colors. */
[style*="color: #29A7E6"],
[style*="color:#29A7E6"],
[style*="color: #29a7e6"],
[style*="color:#29a7e6"] {
  color: var(--brand-primary);
}

[style*="background: #00C248"],
[style*="background:#00C248"],
[style*="background: #00c248"],
[style*="background:#00c248"],
[style*="background-color: #00C248"],
[style*="background-color:#00C248"],
[style*="background-color: #00c248"],
[style*="background-color:#00c248"] {
  background: var(--brand-cta);
  background-color: var(--brand-cta);
}

[style*="font-family: Hind"],
[style*="font-family:Hind"] {
  font-family: var(--tbox-font-body);
}

/* ============================================
   Homepage: FAQ (conversion objections)
   ============================================ */

.tbox-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  font-family: var(--tbox-font-body);
  color: var(--text-primary);
  cursor: pointer;
  list-style: none;
}

.tbox-faq-item summary::-webkit-details-marker {
  display: none;
}

.tbox-faq-item summary::after {
  content: "+";
  font-size: var(--fs-2xl);
  font-weight: var(--fw-normal);
  color: var(--text-muted);
  transition: transform var(--ease-base);
  flex-shrink: 0;
  margin-left: var(--space-lg);
}

.tbox-ahcalc-faq-item summary::after {
  content: '+';
  font-size: var(--fs-2xl);
  color: var(--ahcalc-slate-400);
  transition: transform var(--ease-fast);
}

.tbox-faq-item[open] summary::after {
  content: "−";
}

/* ============================================
   Case Studies
   ============================================ */

.tbox-case-study-grid,
.tbox-standard-features-grid--case-study {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 360px);
  gap: var(--space-2xl-plus);
  align-items: start;
  grid-auto-rows: auto;
}

/* Reset bento column/row spans inside the case-study grid — must follow base nth-child rules to win cascade */
.tbox-standard-features-grid--case-study > :nth-child(n):not(.tbox-card--bento-stack):not(.tbox-card--bento-med):not(.tbox-card--bento-hero) {
  grid-column: span 1;
  grid-row: span 1;
}

@media (width <= 900px) {
  .tbox-case-study-grid,
.tbox-standard-features-grid--case-study {
    grid-template-columns: 1fr;
  }
}

.tbox-case-study-aside {
  display: grid;
  gap: var(--space-lg-plus);
  align-items: start;
}

.tbox-case-study .tbox-content-card,
.tbox-case-study .tbox-card--content {
  background: transparent;
  border: none;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
}

.tbox-case-study-logo {
  width: 100%;
  max-width: 360px;
  height: auto;
  display: block;
  margin: 0 auto;
}

#content .tbox-case-study h2 {
  font-size: var(--fs-card-price);
  line-height: 2.25rem;
  margin-top: var(--space-2xl);
}

#content .tbox-route-definition h2,
#content .tbox-route-definition--auto h2,
#content .tbox-related-links--auto h2 {
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
}

#content .tbox-compare-page__header h2 {
  margin: 0.3rem 0 var(--space-sm-minus);
}

#content .tbox-case-study h2:first-child {
  margin-top: 0;
}

#content .tbox-case-study p:first-child {
  margin-top: 0;
}

#content .tbox-case-study-list {
  list-style: disc;
  margin: var(--space-md-plus) 0 0 1.25rem;
  padding: 0;
  max-width: var(--width-desc);
}

#content .tbox-case-study-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: 1.75rem;
}

#content .tbox-case-study-download {
  display: flex;
  justify-content: center;
}

.tbox-case-study-carousel.tbox-trust-module--compact {
  max-width: 100%;
  margin: 0;
  padding: 0;
  text-align: left;
}

.tbox-case-study-carousel .tbox-trust-carousel__slide {
  justify-items: stretch;
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-case-study-carousel .tbox-quote {
  max-width: 100%;
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-card);
  background: var(--surface-base);
  padding: var(--space-lg-plus);
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-case-study-carousel .tbox-quote blockquote {
  font-style: normal;
}

/* stylelint-disable-next-line no-descending-specificity -- case-study carousel meta needs its own alignment */
.tbox-case-study-carousel .tbox-quote-meta {
  justify-content: flex-start;
}

.tbox-case-study-carousel .tbox-trust-carousel__nav {
  justify-content: flex-start;
  margin-top: var(--space-md);
}

.tbox-case-studies-reviews.tbox-trust-module--compact {
  margin-top: var(--space-lg);
}

@media (width <= 600px) {
  #content .tbox-case-study-actions .tbox-btn,
#content .tbox-case-study-download .tbox-btn {
    width: 100%;
    max-width: 320px;
  }
}

/* ============================================
   SEO/CRO Support Modules (Optimize 4)
   ============================================ */

/* stylelint-disable-next-line no-descending-specificity */
.tbox-sa-rating-badge__stars {
  display: inline-flex;
  gap: 0.1rem;
}

.tbox-industry-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm) var(--space-sm-mid);
  margin: var(--space-md-plus) 0 0;
}

.tbox-industry-strip__label {
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
  font-weight: var(--fw-semibold);
}

.tbox-industry-strip__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: inline-flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm-minus);
}

.tbox-industry-badge {
  font-size: var(--fs-xs);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-sm);
  border: 1px solid var(--surface-glass-35);
  background: var(--surface-glass-08);
  color: var(--text-on-dark);
}

/* Mobile sticky CTA (moved from app-hosting-family.css so it is reusable site-wide) */
.tbox-mobile-sticky-cta {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1000;
  padding: var(--space-xs-plus) var(--space-md) calc(var(--space-xs-plus) + env(safe-area-inset-bottom));
  background: var(--surface-base);
  border-top: 1px solid var(--border-light);
  box-shadow: var(--shadow-sticky-cta);
  transform: translateY(110%);
  transition: transform var(--ease-base);
  display: none;
}

.tbox-mobile-sticky-cta.visible {
  transform: translateY(0);
}

.tbox-mobile-sticky-cta-inner {
  max-width: var(--width-content);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-sm-plus);
  align-items: center;
}

.tbox-mobile-sticky-cta-offer {
  display: block;
  grid-column: 1 / -1;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  text-align: center;
  line-height: var(--lh-snug);
  margin-bottom: 0;
  letter-spacing: var(--ls-wide);
}

.tbox-mobile-sticky-cta-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

.tbox-mobile-sticky-cta-close {
  appearance: none;
  border: 0;
  background: var(--surface-muted);
  color: var(--text-secondary);
  width: 42px;
  height: 42px;
  border-radius: var(--radius-lg);
  font-size: var(--fs-xl);
  line-height: 1;
  cursor: pointer;
}

.tbox-mobile-sticky-cta-close:focus-visible {
  outline: 3px solid var(--border-muted);
  outline-offset: var(--focus-outline-offset);
}

@media (width <= 768px) {
  .tbox-mobile-sticky-cta {
    display: block;
    bottom: var(--tbox-mobile-sticky-chat-safe-bottom, 0);
    /* Defensive: remove descendants from a11y/tab tree while the bar is
       slid offscreen, even if the runtime `inert` toggle fails. */
    visibility: hidden;
    pointer-events: none;
  }

  .tbox-mobile-sticky-cta.visible {
    visibility: visible;
    pointer-events: auto;
  }

  body.tbox-mobile-sticky-cta-active {
    padding-bottom: var(--tbox-mobile-sticky-cta-space, 0);
  }

  /* The sticky bar already owns the bottom thumb zone; hide the back-to-top
     FAB while it is shown so the two fixed controls never stack. */
  body.tbox-mobile-sticky-cta-active .tbox-back-to-top {
    opacity: 0;
    pointer-events: none;
  }

  .tbox-mobile-sticky-cta-inner {
    max-width: min(42rem, 100%);
  }

  .tbox-mobile-sticky-cta-actions {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .tbox-mobile-sticky-cta-actions .tbox-btn,
.tbox-mobile-sticky-cta-actions .tbox-btn-outline {
    width: 100%;
    min-width: 0;
  }
}

@media (width <= 600px) {
  .tbox-mobile-sticky-cta {
    padding: var(--space-2xs) var(--space-sm) calc(var(--space-2xs) + env(safe-area-inset-bottom));
  }

  .tbox-mobile-sticky-cta-inner {
    gap: var(--space-xs);
  }

  .tbox-mobile-sticky-cta-offer {
    font-size: calc(var(--fs-2xs) - 0.02rem);
  }

  .tbox-mobile-sticky-cta-actions {
    gap: var(--space-xs);
  }

  .tbox-mobile-sticky-cta .tbox-btn,
.tbox-mobile-sticky-cta .tbox-btn-outline {
    min-height: var(--min-touch-target);
    padding-inline: var(--space-md);
    font-size: var(--fs-sm);
  }

  .tbox-mobile-sticky-cta-close {
    width: 44px;
    height: 44px;
  }

  #faq-section .tbox-faq-section__tabs {
    justify-content: flex-start;
    flex-wrap: nowrap;
    overflow-x: auto;
    margin-inline: 0;
    padding-inline: var(--space-md);
    padding-bottom: var(--space-2xs);
    scroll-padding-inline: var(--space-md);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #faq-section .tbox-faq-section__tabs::-webkit-scrollbar {
    display: none;
  }

  #faq-section .tbox-faq-section__tab {
    flex: 0 0 auto;
  }

  #trust-section .tbox-trust-carousel__btn,
#trust-section .tbox-trust-carousel__pause-btn {
    width: 44px;
    height: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-mobile-sticky-cta {
    transition: none;
  }
}

:root[data-theme="dark"] .tbox-mobile-sticky-cta {
  background: var(--surface-subtle);
  border-top-color: var(--border-mid);
}

.tbox-404-shell .site-main,
.tbox-search-page .site-main,
.tbox-blog-page .site-main,
.tbox-single-page .site-main {
  width: min(1200px, 94vw);
  margin: 0 auto;
  padding: 1.25rem 0 3rem;
}

.tbox-error-card {
  margin: var(--space-xl) auto 2.5rem;
  width: min(820px, 100%);
  padding: var(--space-2xl);
  border: 1px solid var(--border-muted);
  border-radius: var(--radius-xl);
  background: var(--surface-card);
  box-shadow: var(--shadow-card-sm);
}

.tbox-error-card__search {
  margin: 1.35rem 0 1.5rem;
}

.tbox-error-card__links {
  list-style: none;
  padding: 0;
  margin: var(--space-md) 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-sm) 0.9rem;
}

.tbox-error-card__chat {
  margin-top: var(--space-xl);
}

.tbox-search-product-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--space-md-plus);
  margin: var(--space-md-plus) 0 1.5rem;
}

.tbox-search-product-card {
  display: grid;
  gap: var(--space-sm);
  align-content: start;
}

#content .tbox-search-product-card h3 {
  margin: 0;
}

.tbox-search-result {
  border-top: 1px solid var(--border-muted);
  padding-top: var(--space-lg-plus);
  margin-top: var(--space-lg-plus);
}

#content .tbox-search-result .entry-title,
#content .tbox-blog-listing .entry-title {
  margin: 0 0 var(--space-sm);
}

.tbox-search-result .blog-list-item,
.tbox-blog-listing .blog-list-item {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: var(--space-md-plus);
  align-items: start;
}

.tbox-search-result .post-thumbnail,
.tbox-blog-listing .post-thumbnail {
  width: 150px;
}

/* Excerpts scan, articles read: cap the measure and clamp to three lines so
   nine rows stay skimmable. */
.tbox-search-result .blog-list-item .entry-content,
.tbox-blog-listing .blog-list-item .entry-content {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  max-width: var(--prose-measure-wide);
}

.tbox-blog-promo-card,
.tbox-blog-subscribe,
.tbox-single-author,
.tbox-single-related {
  margin: 1.35rem 0;
}

.tbox-blog-subscribe__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm-mid);
}

#content .tbox-blog-page__header .page-title {
  font-weight: var(--fw-bold);
}

/* Breathing room between the header/toolbar block and the first post */
.tbox-blog-page__header {
  margin-bottom: var(--space-2xl);
}

/* Blog toolbar: search + topic links under the page header */
.tbox-blog-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm) var(--space-lg);
  margin-top: var(--space-md);
}

.tbox-blog-toolbar__search {
  display: flex;
  gap: var(--space-sm);
  flex: 1 1 280px;
  max-width: 430px;
}

.tbox-blog-toolbar__search input[type="search"] {
  flex: 1 1 auto;
  min-width: 0;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-base);
  font-family: inherit;
  color: var(--text-primary);
  background: var(--surface-input, var(--surface-base));
  border: 1px solid var(--border-input, var(--border-light));
  border-radius: var(--radius-md);
}

.tbox-blog-toolbar__search input[type="search"]:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
  border-color: var(--focus-border);
}

/* tbox-btn relies on inherited font, which <button> elements don't get. */
.tbox-blog-toolbar__search .tbox-btn {
  font-family: inherit;
  font-size: var(--fs-base);
}

.tbox-blog-toolbar__topics {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs) var(--space-xs-plus);
}

.tbox-blog-toolbar__topics-label {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

#content .tbox-blog-toolbar__topic {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2xs) 0.7rem;
  border: 1px solid var(--border-card);
  border-radius: 999px;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: border-color var(--ease-base), color var(--ease-base);
}

#content .tbox-blog-toolbar__topic:hover,
#content .tbox-blog-toolbar__topic:focus-visible {
  border-color: var(--brand-primary);
  color: var(--brand-primary-text);
}

/* Post date line on blog/archive listings */
#content .tbox-blog-listing__meta {
  margin: calc(-1 * var(--space-2xs)) 0 var(--space-sm);
  font-size: var(--fs-sm);
}

/* Subscribe card email form (CF7). CF7 autop-wraps the controls in a <p>,
   so the inner paragraph carries the flex row too. */
.tbox-blog-subscribe .tbox-blog-subscribe__fields,
.tbox-blog-subscribe .tbox-blog-subscribe__fields > p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.tbox-blog-subscribe .tbox-blog-subscribe__fields {
  margin: var(--space-md) 0;
}

#content .tbox-blog-subscribe .tbox-blog-subscribe__fields > p {
  margin: 0;
  flex: 1 1 100%;
}

.tbox-blog-subscribe .tbox-blog-subscribe__fields .wpcf7-form-control-wrap {
  flex: 1 1 240px;
  max-width: 380px;
}

.tbox-blog-subscribe .wpcf7 input[type="submit"] {
  min-height: 44px;
  padding: 12px 16px;
  background: var(--tbox-btn-accent-bg);
  border: 1px solid var(--tbox-btn-accent-border);
  border-radius: var(--radius-md);
  color: var(--tbox-btn-accent-text);
}

.tbox-blog-subscribe .wpcf7 input[type="submit"]:hover,
.tbox-blog-subscribe .wpcf7 input[type="submit"]:focus-visible {
  background: var(--tbox-btn-accent-bg-hover);
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text-hover, var(--brand-cta-ink));
}

.tbox-single-meta {
  color: var(--text-secondary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.tbox-single-author {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-lg);
  align-items: start;
}

@media (width <= 700px) {
  .tbox-error-card {
    padding: 1.35rem;
  }

  .tbox-blog-subscribe__actions .tbox-btn,
.tbox-blog-subscribe__actions .tbox-btn-outline {
    width: 100%;
  }

  .tbox-single-author {
    grid-template-columns: 1fr;
  }

  .tbox-search-result .blog-list-item,
.tbox-blog-listing .blog-list-item {
    grid-template-columns: 92px 1fr;
    gap: var(--space-sm);
  }

  .tbox-search-result .post-thumbnail,
.tbox-blog-listing .post-thumbnail {
    width: 92px;
  }

  .tbox-search-result .post-thumbnail img,
.tbox-blog-listing .post-thumbnail img {
    width: 92px;
    height: 92px;
  }

  /* Excerpt drops below the thumbnail row instead of squeezing beside it. */
  .tbox-search-result .blog-list-item .entry-content,
.tbox-blog-listing .blog-list-item .entry-content {
    grid-column: 1 / -1;
  }
}

/* ============================================
   Route Enhancement Modules
   ============================================ */

.tbox-route-definition,
.tbox-route-definition--auto,
.tbox-related-links--auto {
  margin: var(--space-xl) 0;
  padding: 1.1rem 1.2rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.tbox-route-definition,
.tbox-route-definition--auto {
  border-color: var(--brand-primary-22);
}

@media (width <= 600px) {
  .tbox-route-definition,
.tbox-route-definition--auto,
.tbox-related-links--auto {
    margin: 1rem 0;
    padding: 0.95rem 1rem;
  }

  #content .tbox-route-definition p,
#content .tbox-route-definition--auto p {
    line-height: var(--lh-relaxed);
  }
}

.tbox-related-links--auto {
  border-color: var(--brand-cta-22);
  width: min(1170px, calc(100% - 3rem));
  margin: var(--space-xl) auto;
}

.tbox-related-links--auto .tbox-related-links__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}

@media (width <= 700px) {
  .tbox-related-links--auto {
    width: calc(100% - 2rem);
    margin-left: auto;
    margin-right: auto;
  }
}

.tbox-cta-section--hint {
  box-shadow: 0 0 0 2px var(--brand-primary-bg-18), var(--shadow-cta-band);
}

/* ============================================
   Compare Page Module
   ============================================ */

.tbox-compare-page {
  margin: 2rem 0;
  padding: var(--space-lg-plus);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-card);
  background: var(--surface-card);
  box-shadow: var(--shadow-card);
}

.tbox-compare-page__header {
  margin-bottom: 0.9rem;
}

.tbox-compare-page__controls {
  display: grid;
  gap: var(--space-sm-plus);
  margin-bottom: var(--space-md-plus);
}

.tbox-compare-provider-select {
  width: min(360px, 100%);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-md);
  padding: 0.58rem 0.68rem;
  font: inherit;
  color: var(--text-primary);
  background: var(--surface-base);
}

.tbox-compare-provider-select:focus-visible {
  outline: 3px solid var(--focus-ring);
  outline-offset: 1px;
}

.tbox-compare-mode-toggle {
  display: flex;
  gap: var(--space-sm-minus);
  flex-wrap: wrap;
}

.tbox-compare-mode-note {
  margin: var(--space-sm) 0 0;
  color: var(--text-secondary);
}

.tbox-compare-table-wrap {
  margin-top: var(--space-md);
  overflow-x: auto;
}

.tbox-compare-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 620px;
  border: 1px solid var(--border-light);
}

:where(.tbox-compare-table th) {
  background: var(--surface-subtle);
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

.tbox-compare-table__highlight {
  background: var(--brand-primary-16);
}

.tbox-compare-reliability-required {
  color: var(--state-warning-text);
  font-weight: var(--fw-semibold);
}

.tbox-compare-verified {
  margin: var(--space-sm-mid) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-base);
}

@media (width <= 768px) {
  .tbox-compare-page {
    padding: 1rem 0.85rem;
  }
}

/* ============================================
   Proof Strip (marquee component)
   Migrated from style.css — shared across Cloud VPS & App Hosting pages.
   ============================================ */

.tbox-ui-proof {
    --tbox-ui-proof-accent: color-mix(in srgb, var(--brand-primary) 72%, var(--brand-cta) 28%);
    --tbox-ui-proof-accent-soft: color-mix(in srgb, var(--tbox-ui-proof-accent) 18%, transparent);

    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(17rem, 0.92fr);
    gap: clamp(1.15rem, 2.8vw, 2.4rem);
    align-items: center;
    margin: clamp(1.5rem, 4vw, 2.8rem) 0;
}

.tbox-ui-proof::before {
    content: "";
    position: absolute;
    inset: clamp(-0.75rem, -2vw, -1.25rem) auto auto clamp(1rem, 3vw, 1.75rem);
    width: clamp(5rem, 9vw, 7.5rem);
    height: 1px;
    background: var(--tbox-ui-proof-accent);
    opacity: 0.5;
    pointer-events: none;
}

.tbox-ui-proof--media-last {
    grid-template-columns: minmax(17rem, 0.92fr) minmax(0, 1.3fr);
}

.tbox-ui-proof__media {
    padding: clamp(0.8rem, 1.8vw, 1.15rem);
    border-radius: clamp(1rem, 2vw, 1.5rem);
}

.tbox-ui-proof__trigger {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: zoom-in;
    border-radius: clamp(0.8rem, 1.6vw, 1.1rem);
}

.tbox-ui-proof__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: clamp(0.8rem, 1.6vw, 1.1rem);
    border: 1px solid color-mix(in srgb, var(--border-light) 82%, white 18%);
    background: color-mix(in srgb, var(--surface-card) 92%, white 8%);
}

.tbox-ui-proof__caption {
    display: grid;
    gap: var(--space-md-plus);
    align-content: center;
}

.tbox-ui-proof--media-last .tbox-ui-proof__media {
    order: 2;
}

.tbox-ui-proof--media-last .tbox-ui-proof__caption {
    order: 1;
}

.tbox-ui-proof__title {
    margin: 0;
    color: var(--text-primary);
    font-family: var(--ff-display);
    font-size: var(--fs-heading-md);
    line-height: var(--lh-snug);
    letter-spacing: var(--ls-normal);
}

.tbox-ui-proof__text {
    display: none;
}

/* Bare modifier: lets an existing layout container (e.g. .tbox-pillar-diagram-card,
   a bento card) carry the tbox-ui-proof class for lightbox eligibility without
   inheriting the default proof grid, accent line, or image card chrome. The
   __trigger collapses to a transparent wrapper so the host layout still drives
   sizing and alignment of the inner <img>. The host's own `display` is
   re-asserted below per host pattern (compound-class specificity beats the
   single-class `.tbox-ui-proof { display: grid }`). */
.tbox-ui-proof.tbox-ui-proof--bare {
    grid-template-columns: revert;
    gap: 0;
    margin: 0;
}

.tbox-ui-proof--bare::before {
    content: none;
}

.tbox-ui-proof--bare > .tbox-ui-proof__trigger {
    display: contents;
}

.tbox-ui-proof--bare .tbox-ui-proof__image {
    border: 0;
    background: transparent;
    border-radius: 0;
}

.tbox-pillar-diagram-card.tbox-ui-proof--bare {
    display: flex;
    align-items: center;
    justify-content: center;
}

.tbox-card--media.tbox-ui-proof--bare {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

/* Card modifier: figure becomes a flush white card with a caption below.
   Used wherever a diagram or screenshot benefits from an inline title +
   supporting line (clustering topology diagrams, kubernetes deployment
   screenshot, sequential-restart screenshot). The host page can still
   add its own bg/border via a sibling class (see .tbox-clustering-db__restart). */
.tbox-ui-proof.tbox-ui-proof--card {
    display: block;
    grid-template-columns: revert;
    gap: 0;
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-light);
    box-shadow: var(--shadow-md);
    background: #fff;
}

.tbox-ui-proof--card::before {
    content: none;
}

.tbox-ui-proof--card .tbox-ui-proof__media {
    padding: 0;
    border-radius: 0;
}

.tbox-ui-proof--card .tbox-ui-proof__image {
    border: 0;
    border-radius: 0;
    background: transparent;
    width: 100%;
    height: auto;
    display: block;
}

.tbox-ui-proof--card .tbox-ui-proof__caption {
    display: block;
    padding: 0.75rem 1rem 0.95rem;
}

.tbox-ui-proof--card .tbox-ui-proof__title {
    margin: 0 0 0.25rem;
    font-size: var(--fs-base);
    line-height: 1.3;
}

.tbox-ui-proof--card .tbox-ui-proof__text {
    display: block;
    margin: 0;
    font-size: var(--fs-sm);
    line-height: 1.45;
    color: var(--text-muted);
}

/* Dark mode: card background flips to dark so rounded corners don't bleed white.
   Media area is pinned white explicitly to keep transparent PNG diagrams legible.
   Caption strip inherits the dark card surface with a hairline separator. */
:root[data-theme="dark"] .tbox-ui-proof--card {
    background: var(--surface-card);
}

:root[data-theme="dark"] .tbox-ui-proof--card .tbox-ui-proof__media {
    background: #fff;
}

:root[data-theme="dark"] .tbox-ui-proof--card .tbox-ui-proof__caption {
    border-top: 1px solid var(--border-light);
}

.tbox-ui-proof__expand {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    min-height: var(--min-touch-target);
    padding: 0.72rem 1.05rem;
    border: 1px solid color-mix(in srgb, var(--tbox-ui-proof-accent) 30%, var(--border-light) 70%);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--surface-base) 84%, var(--tbox-ui-proof-accent-soft) 16%);
    color: var(--text-primary);
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition:
        transform var(--duration-base) ease-out,
        border-color var(--ease-base),
        background-color var(--ease-base);
}

.tbox-ui-proof__expand::after {
    content: "↗";
    font-size: 0.95em; /* relative: intentional em */
    line-height: 1;
}

.tbox-ui-proof__expand:hover {
    border-color: color-mix(in srgb, var(--tbox-ui-proof-accent) 46%, var(--border-mid) 54%);
    background: color-mix(in srgb, var(--surface-base) 70%, var(--tbox-ui-proof-accent-soft) 30%);
}

.tbox-ui-proof--gallery {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    grid-template-rows: auto auto;
    gap: clamp(1rem, 2.2vw, 1.6rem);
    align-items: start;
    margin-top: clamp(1.35rem, 3vw, 2rem);
    padding: var(--space-xl);
}

.tbox-ui-proof--gallery::before {
    display: none;
}

.tbox-ui-proof__item {
    --tbox-ui-proof-accent: color-mix(in srgb, var(--brand-primary) 78%, var(--brand-cta) 22%);

    position: relative;
    display: grid;
    gap: var(--space-lg);
    align-content: start;
    padding-top: var(--space-lg-plus);
}

.tbox-ui-proof__item::before {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
    height: 1px;
    background: var(--tbox-ui-proof-accent);
    opacity: 0.5;
}

.tbox-ui-proof__item:nth-child(2) {
    --tbox-ui-proof-accent: color-mix(in srgb, var(--brand-primary) 56%, var(--color-teal) 44%);
}

.tbox-ui-proof__item:nth-child(3) {
    --tbox-ui-proof-accent: color-mix(in srgb, var(--brand-primary) 48%, var(--brand-cta) 52%);
}

.tbox-ui-proof--gallery .tbox-ui-proof__item:nth-child(1) {
    grid-row: 1 / 3;
}

.tbox-ui-proof--gallery .tbox-ui-proof__item:nth-child(1) .tbox-ui-proof__image {
    max-height: 550px;
    object-fit: cover;
    object-position: top center;
}

.tbox-ui-proof--gallery .tbox-ui-proof__caption {
    gap: var(--space-md);
}

.tbox-ui-proof--gallery .tbox-ui-proof__title {
    font-size: var(--fs-heading-sm);
}

.tbox-ui-proof__item--video {
    grid-column: 1 / -1;
}

.tbox-ui-proof__video {
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-lg);
    border: 1px solid var(--border-light);
}

/* Canonical single-embed video wrapper (App Hosting family /automation/#deploy-flow). */
.tbox-deploy-flow-embed {
    margin: var(--space-xl) auto 0;
    max-width: 960px;
}
.tbox-deploy-flow-embed__caption {
    margin-top: var(--space-md);
    color: var(--text-secondary);
    font-size: var(--fs-base);
    text-align: center;
}

.tbox-standard-features-grid > .tbox-ui-proof,
.tbox-standard-features-grid--bento-repack > .tbox-ui-proof,
.tbox-topology-grid > .tbox-ui-proof {
    grid-column: 1 / -1 !important;
}

.tbox-ui-proof-dialog {
    width: min(94vw, 1280px);
    max-width: none;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--text-primary);
}

.tbox-ui-proof-dialog::backdrop {
    background: rgb(8 15 28 / 90%);
}

.tbox-ui-proof-dialog__panel {
    position: relative;
    padding: clamp(1rem, 2vw, 1.4rem);
    border: 1px solid color-mix(in srgb, var(--border-mid) 72%, var(--brand-primary) 28%);
    border-radius: var(--radius-12);
    background: var(--surface-base);
    box-shadow: 0 4px 12px rgb(2 6 23 / 14%);
}

.tbox-ui-proof-dialog__close {
    position: absolute;
    top: clamp(0.7rem, 1.5vw, 1rem);
    right: clamp(0.7rem, 1.5vw, 1rem);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.75rem;
    height: 2.75rem;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-cap);
    background: color-mix(in srgb, var(--surface-base) 84%, var(--brand-primary-12) 16%);
    color: var(--text-primary);
    cursor: pointer;
}

.tbox-ui-proof__trigger:focus-visible,
.tbox-ui-proof__expand:focus-visible,
.tbox-ui-proof-dialog__close:focus-visible {
    outline: var(--focus-outline-width) solid var(--focus-ring);
    outline-offset: 3px;
}

.tbox-ui-proof-dialog__frame {
    display: grid;
    gap: var(--space-lg);
    margin: 0;
}

.tbox-ui-proof-dialog__media {
    overflow: auto;
    border-radius: clamp(0.85rem, 1.5vw, 1.2rem);
    border: 1px solid var(--border-light);
    background: color-mix(in srgb, var(--surface-card) 94%, white 6%);
}

.tbox-ui-proof-dialog__image {
    display: block;
    width: 100%;
    height: auto;
}

.tbox-ui-proof-dialog__caption {
    display: grid;
    gap: var(--space-sm);
}

.tbox-ui-proof-dialog__title {
    margin: 0;
    font-family: var(--ff-display);
    font-size: clamp(1.05rem, 1.4vw, 1.35rem);
    line-height: var(--lh-tight);
}

.tbox-ui-proof-dialog__text {
    margin: 0;
    color: var(--text-secondary);
}

@media (width <= 760px) {
    .tbox-ui-proof,
.tbox-ui-proof--media-last {
        grid-template-columns: 1fr;
    }

    .tbox-ui-proof--media-last .tbox-ui-proof__media,
.tbox-ui-proof--media-last .tbox-ui-proof__caption {
        order: initial;
    }
}

@media (width <= 900px) {
    .tbox-ui-proof--gallery {
        grid-template-columns: 1fr;
    }

    .tbox-ui-proof--gallery .tbox-ui-proof__item:nth-child(1) {
        grid-row: auto;
    }

    .tbox-ui-proof--gallery .tbox-ui-proof__item:nth-child(1) .tbox-ui-proof__image {
        max-height: none;
        object-fit: contain;
    }
}

@media (prefers-reduced-motion: reduce) {
    .tbox-ui-proof__expand {
        transition: none;
    }
}

.tbox-proof-strip {
    --proof-strip-duration: 30s;
    --proof-strip-gap: var(--space-xl);

    padding: 0.9rem max(1.5rem, calc(50% - 585px));
    margin-top: 0;
    color: var(--text-on-dark);
    background: var(--gray-950);
}

/* Override the default section padding for marquee strips */
.tbox-page-content > section.tbox-proof-strip,
#content > section.tbox-proof-strip {
    padding-top: var(--space-md-plus);
    padding-bottom: var(--space-md-plus);
}

/* Marker band wrapping a slim trust section: zero padding so the inner
   .tbox-trust-section--slim's negative margins can collapse through the
   wrapper and overlap neighboring sections (matches the bare-shortcode
   rendering used elsewhere). Horizontal padding is zeroed so the dark
   band fills full width. The wrapper exists only as a band-taxonomy
   marker — see docs/cloud-vps-band-taxonomy.md. */
.tbox-page-content > section.tbox-band--trust,
#content > section.tbox-band--trust {
    padding: 0;
}

.tbox-proof-strip__inner {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm-mid);
    max-width: var(--max-width);
    margin: 0 auto;
}

.tbox-proof-strip__marquee {
    display: flex;
    gap: var(--space-lg);
    overflow: hidden;
}

.tbox-proof-strip__track {
    display: inline-flex;
    gap: 0;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    min-width: max-content;
    animation: tbox-proof-strip-marquee var(--proof-strip-duration, 20s) linear infinite;
    will-change: transform;
}

.tbox-proof-strip__chip {
    display: inline-flex;
    align-items: center;
    padding: var(--space-sm-minus) 0.85rem;
    border-radius: var(--radius-sm-plus);
    background: var(--surface-glass-06);
    border: 1px solid var(--surface-glass-10);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    white-space: nowrap;
    color: var(--text-on-dark-soft);
    margin-right: var(--proof-strip-gap, var(--space-sm-mid));
    transition: all var(--ease-base);
}

.tbox-proof-strip__chip:hover {
    background: var(--surface-glass-10);
    border-color: rgb(34 211 238 / 30%);
    color: var(--text-inverse);
}

@keyframes tbox-proof-strip-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Proof strip – reduced motion */
@media (prefers-reduced-motion: reduce) {
    .tbox-proof-strip__track {
        animation: none;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
        min-width: 0;
        transform: none;
        gap: var(--proof-strip-gap, var(--space-sm-mid));
    }

    .tbox-proof-strip__chip {
        margin-right: 0;
    }

    .tbox-proof-strip__marquee {
        overflow: visible;
        mask-image: none;
    }

    .tbox-proof-strip__track > [aria-hidden="true"] {
        display: none;
    }
}

/* ============================================
   Compact Proof Strip (spoke page stats bar)
   ============================================ */

.tbox-proof-strip-compact {
    padding: var(--space-lg) max(1.5rem, calc(50% - 585px));
    background: var(--surface-base);
    border-top: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
}

.tbox-stat-list--compact .tbox-stat-list__inner,
.tbox-proof-strip-compact__inner {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0;
    row-gap: var(--space-sm);
    max-width: min(960px, calc(100% - 3rem));
    margin: 0 auto;
}

.tbox-proof-strip-compact--3up .tbox-proof-strip-compact__inner {
    grid-template-columns: none;
}

.tbox-stat-list--compact .tbox-stat-list__item,
.tbox-proof-strip-compact__item {
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: var(--space-sm);
    flex: 0 0 auto;
    min-width: 0;
    padding: var(--space-sm) var(--space-lg-plus);
}

.tbox-stat-list--compact .tbox-stat-list__item + .tbox-stat-list__item,
.tbox-proof-strip-compact__item + .tbox-proof-strip-compact__item {
    border-left: 1px solid var(--border-light);
}

#content .tbox-stat-list--compact .tbox-stat-list__value,
.tbox-proof-strip-compact__value {
    font-family: inherit;
    color: var(--brand-primary-text);
    font-size: var(--fs-base);
    font-weight: var(--fw-bold);
    font-variant-numeric: normal;
    line-height: var(--lh-snug);
    margin-bottom: 0;
    white-space: nowrap;
}

.tbox-proof-strip-compact__value--rating {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.tbox-proof-strip-compact__value--rating .tbox-stars {
    flex: 0 0 auto;
    margin-left: var(--space-xs);
}

/* Rating rendered as an in-page link to #trust-section. */
a.tbox-proof-strip-compact__value--link {
    text-decoration: none;
}

a.tbox-proof-strip-compact__value--link:hover,
a.tbox-proof-strip-compact__value--link:focus-visible {
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

.tbox-proof-strip-compact__value--rating .tbox-stars__bg,
.tbox-proof-strip-compact__value--rating .tbox-stars__fg {
    gap: 3px;
}


.tbox-stat-list--compact .tbox-stat-list__label,
.tbox-proof-strip-compact__label {
    margin-bottom: 0;
    font-size: var(--fs-sm);
    color: var(--text-secondary);
    font-weight: var(--fw-medium);
    white-space: nowrap;
}

/* Override default section padding for compact strips */
.tbox-page-content > section.tbox-proof-strip-compact,
#content > section.tbox-proof-strip-compact {
    padding-top: var(--space-lg);
    padding-bottom: var(--space-lg);
}

:root[data-theme="dark"] .tbox-proof-strip-compact {
    /* `--gray-950` is darker than the dark body bg, so the band read as an
       inset bar. Lift one step above body bg (`--surface-base`) instead. */
    background: var(--surface-band);
    border-color: var(--border-light);
}

@media (width <= 600px) {
    .tbox-stat-list--compact .tbox-stat-list__inner,
    .tbox-proof-strip-compact__inner {
        display: grid;
        grid-template-columns: 1fr;
        max-width: min(420px, calc(100% - 2rem));
    }

    .tbox-stat-list--compact .tbox-stat-list__item,
    .tbox-proof-strip-compact__item {
        justify-content: flex-start;
        padding-inline: var(--space-lg);
    }

    .tbox-stat-list--compact .tbox-stat-list__item + .tbox-stat-list__item,
    .tbox-proof-strip-compact__item + .tbox-proof-strip-compact__item {
        border-top: 1px solid var(--border-light);
        border-left: 0;
    }
}

/* ============================================================
   Migrated: home-page.css (front page component styles)
   ============================================================ */

/* #content > scope needed to beat #content > section { padding-bottom: 4rem } in style.css */
html body.home #content > .tbox-home-hero.tbox-hero-v3 {
  padding-bottom: 5rem; /* mobile fallback; desktop override below */
  text-align: left;
}

@media (width > 700px) {
  body.home #content > .tbox-home-hero.tbox-hero-v3 {
    padding-bottom: 7rem; /* product-card overlap allowance */
  }
}

.tbox-spoke-overview :is(.tbox-standard-features-grid--content-cards, .tbox-standard-features-grid--detail-columns, .tbox-standard-features-grid--feature-cards, .tbox-topology-grid) {
  margin-top: 0;
}

/* --- Card grid --- */

.tbox-home-products-grid {
  gap: 22px;
}

/* --- Product card (base) --- */

/* stylelint-disable-next-line no-descending-specificity -- override .tbox-standard-features-grid > article { display: grid } */
.tbox-product-card.tbox-card {
  background: #fff;
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-12);
  overflow: hidden;
  box-shadow: 0 2px 8px rgb(15 23 42 / 7%);
  display: flex;
  flex-direction: column;
  padding: 0;
  position: relative;
  transition: box-shadow var(--ease-slow);
}

.tbox-product-card.tbox-card:hover {
  box-shadow: 0 8px 24px rgb(15 23 42 / 10%);
}

.tbox-product-card:focus-visible,
.tbox-product-card:focus-within {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}


/* --- Cloud VPS card (dark variant) --- */

.tbox-product-card.tbox-card--industrial {
  background: var(--surface-dark);
  border: 1px solid var(--surface-glass-07);
  box-shadow: 0 8px 24px rgb(15 23 42 / 16%);
}

.tbox-product-card.tbox-card--industrial .tbox-card__body {
  padding: 34px 32px 0;
}

.tbox-product-card .tbox-card__body {
  padding: 34px 32px 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  z-index: 1;
}

.tbox-product-card .tbox-card__body::after {
  display: none;
}

/* Shared base for badge chips */
.tbox-product-card .tbox-card__badge {
  font-size: var(--fs-base);
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--radius-xs);
  white-space: nowrap;
  border: none;
}

#content .tbox-product-card .tbox-card__badge--credit {
  background: var(--brand-cta-bg-soft);
  color: var(--brand-cta-text-deep);
  border: 1px solid var(--brand-cta-30);
}

#content .tbox-product-card .tbox-card__badge--trial {
  background: var(--state-success-bg-soft);
  color: var(--success-deep);
  border: 1px solid var(--state-success-border-soft);
}

:root[data-theme="dark"] #content .tbox-product-card .tbox-card__badge--trial {
  background: var(--state-success-bg-soft);
  color: var(--state-success-text);
  border-color: var(--state-success-border-soft);
}

/* Card heading */

.tbox-product-card .tbox-card__heading {
  font-size: var(--fs-heading-md);
  font-weight: 800;
  line-height: 1.2;
  color: #0f172a;
  margin-bottom: 10px;
  grid-column: unset;
  grid-row: unset;
}

.tbox-card--industrial .tbox-card__heading {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) .tbox-card__heading {
  color: var(--text-inverse);
}

/* Descriptor / tagline */

.tbox-home-product-card__descriptor {
  margin: 0 0 10px;
  font-size: var(--fs-lg);
  font-weight: 600;
}

.tbox-card--industrial .tbox-home-product-card__descriptor {
  color: var(--calc-warn-500);
}

.tbox-product-card:not(.tbox-card--industrial) .tbox-home-product-card__descriptor {
  color: #0ea5e9;
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) .tbox-home-product-card__descriptor {
  color: var(--brand-primary);
}

/* Body text */

/* stylelint-disable-next-line no-descending-specificity */
.tbox-product-card .tbox-card__text {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: #475569;
  margin-bottom: 26px;
  align-self: start;
  grid-column: unset;
  grid-row: unset;
}

.tbox-card--industrial .tbox-card__text {
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) .tbox-card__text {
  color: var(--text-muted);
}

/* Feature chip grid */

.tbox-feature-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
  margin: 0 0 26px;
}

.tbox-feature-tile {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 13px 14px;
  border-radius: 11px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
}

.tbox-feature-tile__icon {
  display: none;
}

.tbox-feature-tile__content {
  min-width: 0;
}

.tbox-feature-tile__label {
  font-size: var(--fs-base);
  font-weight: 700;
  color: #0f172a;
  line-height: var(--lh-snug);
  margin-bottom: 3px;
}

.tbox-feature-tile__desc {
  font-size: var(--fs-base);
  line-height: 1.5;
  color: #64748b;
  margin-top: 0;
}

/* Dark card chips */

#content .tbox-card--industrial .tbox-feature-tile {
  background: var(--surface-glass-06);
  border-color: var(--surface-glass-08);
}

#content .tbox-card--industrial .tbox-feature-tile__label {
  color: var(--text-on-dark);
}

#content .tbox-card--industrial .tbox-feature-tile__desc {
  color: var(--text-on-dark-muted);
}

/* Light card dark mode chips */

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) .tbox-feature-tile {
  background: var(--surface-glass-08);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-feature-tile__label {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-feature-tile__desc {
  color: var(--text-muted);
}

/* Included chips row (legacy) */

.tbox-included-chip {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm-plus);
  padding: 3px 10px;
}

:root[data-theme="dark"] .tbox-included-chip {
  background: var(--surface-glass-14);
  border-color: var(--border-mid);
}

/* Best-for line — editorial hairline divider + label + text (no side-stripe borders) */

.tbox-card__best-for {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  align-items: baseline;
  margin: 0 0 26px;
  padding-top: 14px;
  border-top: 1px solid rgb(148 163 184 / 22%);
  font-size: var(--fs-base);
  line-height: 1.6;
  color: #475569;
}

.tbox-card__best-for-label {
  font-size: var(--fs-base);
  font-weight: 700;
  color: #0284c7;
  white-space: nowrap;
}

.tbox-card__best-for-label::after {
  content: ":";
  margin-left: 0;
  color: #cbd5e1;
  font-weight: 400;
}

.tbox-card__best-for-text {
  color: inherit;
}

.tbox-card--industrial .tbox-card__best-for {
  border-top-color: rgb(255 255 255 / 10%);
  color: #94a3b8;
}

.tbox-card--industrial .tbox-card__best-for-label {
  color: #f59e0b;
}

.tbox-card--industrial .tbox-card__best-for-label::after {
  color: rgb(255 255 255 / 18%);
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) .tbox-card__best-for {
  color: var(--text-muted);
  border-top-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) .tbox-card__best-for-label {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) .tbox-card__best-for-label::after {
  color: var(--border-mid);
}

/* Price + CTA footer */

.tbox-product-card .tbox-card__footer {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 32px 30px;
  border-top: 1px solid var(--gray-200);
  background: none;
  margin-top: auto;
  position: relative;
  z-index: 1;
}

.tbox-card--industrial .tbox-card__footer {
  border-top-color: rgb(255 255 255 / 8%);
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) .tbox-card__footer {
  border-top-color: var(--border-mid);
}

.tbox-home-product-card__price-copy {
  display: grid;
  gap: 2px;
}

.tbox-home-product-card__price-kicker {
  font-size: var(--fs-base);
  font-weight: 600;
  color: #94a3b8;
}

.tbox-card--industrial .tbox-home-product-card__price-kicker {
  color: #64748b;
}

.tbox-product-card .tbox-card__price-row {
  display: flex;
  align-items: baseline;
  gap: 2px;
  margin-bottom: 0;
}

.tbox-product-card .tbox-card__price {
  font-size: 36px;
  font-weight: 900;
  letter-spacing: 0;
  color: #0f172a;
  line-height: 1;
  white-space: nowrap;
}

.tbox-card--industrial .tbox-card__price {
  color: #fff;
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) .tbox-card__price {
  color: var(--text-inverse);
}

.tbox-product-card .tbox-card__price-unit {
  font-size: var(--fs-base);
  font-weight: 500;
  color: #94a3b8;
}

.tbox-card--industrial .tbox-card__price-unit {
  color: #64748b;
}

.tbox-home-product-card__spec-line {
  font-size: var(--fs-base);
  color: #94a3b8;
  display: block;
  margin-top: 5px;
}

.tbox-card--industrial .tbox-home-product-card__spec-line {
  color: #475569;
}

/* Offer / promo line */

.tbox-home-product-card__offer-line {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 5px 0 0;
  font-size: var(--fs-base);
  font-weight: 500;
  line-height: 1.4;
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-home-product-card__offer-line .material-symbols-outlined {
  font-size: 1rem;
  flex-shrink: 0;
}

.tbox-home-product-card__offer-line--credit {
  color: #f59e0b;
}

.tbox-home-product-card__offer-line--trial {
  color: var(--success-text);
}

/* CTA buttons */

#content .tbox-product-card .tbox-card__footer .tbox-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 13px 22px;
  border-radius: 11px;
  font-size: var(--fs-base);
  font-weight: 700;
  white-space: nowrap;
  flex-shrink: 0;
  margin-bottom: 0;
  text-transform: none;
  letter-spacing: var(--ls-normal);
  transition: opacity 0.18s ease, transform 0.15s ease;
}

#content .tbox-product-card .tbox-card__footer .tbox-btn:hover {
  opacity: 0.87;
}

/* Hero CTA color (preserved from previous design) */
.tbox-home-hero .tbox-btn[data-cta-tier="primary"] {
  color: var(--tbox-btn-primary-text);
}

/* ============================================================
   Home hero — Aurora variant
   Side-by-side product cards above a continuously drifting
   aurora over the brand navy surface.
   ============================================================ */
.tbox-home-hero-aurora {
  --aurora-a: var(--brand-primary);
  --aurora-b: #6bbef9;
  background: var(--brand-primary-deep);
  color: var(--text-inverse);
  padding: clamp(3.5rem, 7vw, 6rem) clamp(1.25rem, 4vw, 3rem);
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tbox-home-hero-aurora::before {
  content: "";
  position: absolute;
  inset: -30%;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(38% 32% at 22% 28%, color-mix(in srgb, var(--aurora-a) 65%, transparent) 0%, transparent 70%),
    radial-gradient(34% 30% at 78% 72%, color-mix(in srgb, var(--aurora-b) 65%, transparent) 0%, transparent 70%),
    radial-gradient(28% 24% at 50% 50%, color-mix(in srgb, var(--aurora-a) 42%, transparent) 0%, transparent 70%);
  filter: blur(40px);
  animation: tbox-home-hero-aurora-drift 5s ease-in-out infinite alternate;
  opacity: 0.9;
}

.tbox-home-hero-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background: linear-gradient(180deg, rgb(0 0 0 / 12%) 0%, transparent 35%, transparent 65%, rgb(0 0 0 / 18%) 100%);
}

@keyframes tbox-home-hero-aurora-drift {
  0% { transform: translate3d(0, 0, 0) rotate(0deg); }
  50% { transform: translate3d(6%, -5%, 0) rotate(11deg); }
  100% { transform: translate3d(-5%, 6%, 0) rotate(-9deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-home-hero-aurora::before { animation: none; }
}

.tbox-home-hero-aurora__inner {
  max-width: 1180px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.tbox-home-hero-aurora h1 {
  font-family: var(--ff-display);
  font-size: clamp(2.2rem, 4.6vw, 3.8rem);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0 auto 0.8rem;
  max-width: 25ch;
  font-weight: 700;
}

.tbox-home-hero-aurora h1 .tbox-home-hero-aurora__accent {
  color: var(--brand-cta);
}

#hero-section.tbox-home-hero-aurora .tbox-home-hero-aurora__sub {
  font-size: clamp(1rem, 1.3vw, 1.18rem);
  line-height: 1.55;
  margin: 0 auto clamp(2rem, 3.5vw, 2.8rem);
  max-width: var(--prose-measure-wide);
  color: var(--text-inverse);
}

.tbox-home-hero-aurora__paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  text-align: left;
}

.tbox-home-hero-aurora__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.4rem, 2.4vw, 2.1rem);
  text-decoration: none;
  color: var(--text-inverse);
  background: color-mix(in srgb, var(--brand-primary-ink) 70%, transparent);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(255 255 255 / 16%);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: transform 0.35s var(--tbox-ease-out-quart, ease), border-color 0.25s, box-shadow 0.35s;
}

.tbox-home-hero-aurora__card:hover {
  transform: translateY(-4px);
  border-color: color-mix(in srgb, var(--aurora-a) 70%, transparent);
  box-shadow: 0 18px 40px rgb(0 0 0 / 28%), 0 0 0 1px color-mix(in srgb, var(--aurora-a) 30%, transparent);
}

.tbox-home-hero-aurora__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-2xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  /* Lightened from --brand-cta (#f79625, 3.63:1 on the deep-blue card) to clear
     AA for this 12px label; --warm-0 measures 5.34:1 in both themes. */
  color: var(--warm-0);
  font-weight: 700;
}

.tbox-home-hero-aurora__eyebrow::before {
  content: "";
  width: 8px;
  height: 1px;
  background: var(--brand-cta);
}

#hero-section.tbox-home-hero-aurora .tbox-home-hero-aurora__title {
  font-family: var(--ff-display);
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  font-weight: 700;
  margin: 0.15rem 0;
  line-height: 1.08;
  color: var(--text-inverse);
}

#hero-section.tbox-home-hero-aurora .tbox-home-hero-aurora__tagline {
  font-size: 1.02rem;
  color: var(--text-inverse);
  margin: 0;
  line-height: 1.5;
  opacity: 0.92;
}

.tbox-home-hero-aurora__bullets {
  list-style: none;
  margin: 0.4rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.45rem;
}

#hero-section.tbox-home-hero-aurora .tbox-home-hero-aurora__bullets li {
  font-size: var(--fs-sm);
  color: var(--text-inverse);
  opacity: 0.92;
  position: relative;
  padding-left: 1.3rem;
}

.tbox-home-hero-aurora__bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-cta) 70%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-cta) 18%, transparent);
}

.tbox-home-hero-aurora__card-foot {
  display: flex;
  /* Wrap whole units at narrow widths: price and go labels stay intact
     ("Explore App Hosting →" drops to its own line instead of breaking mid-label). */
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.35rem 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgb(255 255 255 / 12%);
  margin-top: 0.4rem;
}

.tbox-home-hero-aurora__price {
  font-family: var(--ff-display);
  font-size: 1.12rem;
  white-space: nowrap;
}

.tbox-home-hero-aurora__price strong {
  /* Lightened from --brand-cta (#f79625, 3.63:1 on the deep-blue card) to clear
     AA at this 17.9px/700 size; --brand-highlight measures 4.68:1 on
     --brand-primary-deep and higher on the darker card foot. */
  color: var(--brand-highlight);
  font-weight: 700;
}

.tbox-home-hero-aurora__go {
  font-weight: 700;
  color: var(--brand-cta);
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  white-space: nowrap;
}

.tbox-home-hero-aurora__go-arrow {
  transition: transform 0.25s var(--tbox-ease-out-quart, ease);
}

.tbox-home-hero-aurora__card:hover .tbox-home-hero-aurora__go-arrow {
  transform: translateX(4px);
}

@media (max-width: 780px) {
  .tbox-home-hero-aurora__paths { grid-template-columns: 1fr; }
}

/* ============================================================
   Hero V3 — Aurora variants for product family pages
   Two motifs share the same scaffolding but read differently:
   --aurora-sweep (App Hosting): rotating conic wedge + warm bloom
   --aurora-band  (Cloud VPS):   slow horizontal aurora curtain
   ============================================================ */
.tbox-hero-v3--aurora-sweep,
.tbox-hero-v3--aurora-band {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}

.tbox-hero-v3--aurora-sweep::before,
.tbox-hero-v3--aurora-sweep::after,
.tbox-hero-v3--aurora-band::before,
.tbox-hero-v3--aurora-band::after {
  content: "";
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/* App Hosting — rotating conic sweep with warm bloom */
.tbox-hero-v3--aurora-sweep {
  --aurora-core: var(--brand-primary);
  --aurora-warm: var(--brand-cta);
}

.tbox-hero-v3--aurora-sweep::before {
  inset: -25%;
  background: conic-gradient(
    from 0deg at 50% 55%,
    transparent 0deg,
    color-mix(in srgb, var(--aurora-core) 58%, transparent) 60deg,
    color-mix(in srgb, var(--aurora-warm) 12%, transparent) 150deg,
    transparent 220deg,
    color-mix(in srgb, var(--aurora-core) 45%, transparent) 320deg,
    transparent 360deg
  );
  filter: blur(60px);
  opacity: 0.85;
  animation: tbox-hero-aurora-sweep-rotate 9s ease-in-out infinite alternate;
}

.tbox-hero-v3--aurora-sweep::after {
  inset: -20%;
  background:
    radial-gradient(36% 28% at 78% 30%, color-mix(in srgb, var(--aurora-warm) 16%, transparent) 0%, transparent 70%),
    radial-gradient(28% 22% at 18% 78%, color-mix(in srgb, var(--aurora-core) 45%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgb(0 0 0 / 12%) 0%, transparent 35%, transparent 65%, rgb(0 0 0 / 22%) 100%);
  filter: blur(45px);
  animation: tbox-hero-aurora-sweep-drift 6s ease-in-out infinite alternate;
}

@keyframes tbox-hero-aurora-sweep-rotate {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(28deg); }
}

@keyframes tbox-hero-aurora-sweep-drift {
  0%   { transform: translate3d(-4%, 2%, 0) scale(1); }
  100% { transform: translate3d(5%, -3%, 0) scale(1.12); }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-hero-v3--aurora-sweep::before,
  .tbox-hero-v3--aurora-sweep::after { animation: none; }
}

/* Cloud VPS — slow horizontal aurora curtain */
.tbox-hero-v3--aurora-band {
  --aurora-core: var(--brand-primary);
  --aurora-cool: #5fd1d0;
}

.tbox-hero-v3--aurora-band::before {
  inset: -10% -20%;
  background:
    linear-gradient(
      100deg,
      transparent 0%,
      color-mix(in srgb, var(--aurora-core) 52%, transparent) 25%,
      color-mix(in srgb, var(--aurora-cool) 24%, transparent) 55%,
      transparent 80%
    ),
    linear-gradient(
      80deg,
      transparent 10%,
      color-mix(in srgb, var(--aurora-cool) 22%, transparent) 45%,
      color-mix(in srgb, var(--aurora-core) 32%, transparent) 70%,
      transparent 95%
    );
  background-size: 200% 55%, 220% 45%;
  background-position: 0% 30%, 100% 75%;
  background-repeat: no-repeat;
  filter: blur(55px);
  opacity: 0.9;
  animation: tbox-hero-aurora-band-glide 9s ease-in-out infinite alternate;
}

.tbox-hero-v3--aurora-band::after {
  inset: 0;
  background:
    radial-gradient(60% 24% at 50% 0%, color-mix(in srgb, var(--aurora-cool) 10%, transparent) 0%, transparent 70%),
    linear-gradient(180deg, rgb(0 0 0 / 14%) 0%, transparent 30%, transparent 70%, rgb(0 0 0 / 24%) 100%);
}

@keyframes tbox-hero-aurora-band-glide {
  0%   { background-position:   0% 28%, 100% 74%; transform: translate3d(-2%, 1%, 0); }
  100% { background-position: 100% 34%,   0% 80%; transform: translate3d(2%, -2%, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-hero-v3--aurora-band::before { animation: none; }
}

/* App Hosting card: set accent since accent bar was removed */
:where(#content .tbox-home-products-grid > .tbox-product-card:not(.tbox-card--industrial)) {
  --product-accent: var(--brand-cta);
  --product-accent-wash: transparent;
  --product-accent-glow: none;
  background: var(--surface-base);
  border: 1px solid var(--gray-200);
}

:where(:root[data-theme="dark"] #content .tbox-home-products-grid > .tbox-product-card:not(.tbox-card--industrial)) {
  background: var(--surface-card-elevated);
  border-color: var(--border-mid);
}

/* Hide accent bars (no longer used) */
.tbox-product-card .tbox-card__accent {
  display: none;
}

/* VPS spec tiles (2×2 grid replacing feature chips) */
.tbox-vps-spec-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  margin-bottom: 22px;
  border-top: 1px solid var(--surface-glass-10);
  border-bottom: 1px solid var(--surface-glass-10);
}

.tbox-vps-spec-tile {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 12px 0;
}

.tbox-vps-spec-tile:nth-child(odd) {
  padding-right: 14px;
}

.tbox-vps-spec-tile:nth-child(even) {
  padding-left: 14px;
  border-left: 1px solid var(--surface-glass-10);
}

.tbox-vps-spec-tile:nth-child(n + 3) {
  border-top: 1px solid var(--surface-glass-10);
}

.tbox-vps-spec-tile__label {
  font-size: var(--fs-base);
  font-weight: 700;
  color: var(--calc-warn-500);
  margin: 0 0 4px;
}

.tbox-vps-spec-tile__val {
  font-size: var(--fs-base);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--text-inverse);
  margin: 0 0 2px;
  line-height: 1.2;
}

.tbox-vps-spec-tile__desc {
  font-size: var(--fs-base);
  color: var(--text-on-dark-muted);
  margin: 0;
}

/* App Hosting checklist (replacing feature chips) */
.tbox-app-checklist {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 22px;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}

.tbox-app-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 0;
}

.tbox-app-check + .tbox-app-check {
  border-top: 1px solid var(--gray-200);
}

.tbox-app-check__dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
}

/* stylelint-disable-next-line no-descending-specificity -- scoped icon override,
no element can match both selectors */
.tbox-app-check__dot .material-symbols-outlined {
  font-size: 16px;
  color: #0284c7;
  font-variation-settings: 'FILL' 0, 'wght' 600;
}

:root[data-theme="dark"] .tbox-app-check__dot .material-symbols-outlined {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-app-checklist,
:root[data-theme="dark"] .tbox-app-check + .tbox-app-check {
  border-color: var(--border-mid);
}

.tbox-app-check__label {
  font-size: var(--fs-base);
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 1px;
}

:root[data-theme="dark"] .tbox-app-check__label {
  color: var(--text-inverse);
}

.tbox-app-check__desc {
  font-size: var(--fs-base);
  color: #64748b;
  line-height: 1.4;
  margin: 0;
}

:root[data-theme="dark"] .tbox-app-check__desc {
  color: var(--text-on-dark-muted);
}

/* --- Arrow hover for homepage sections --- */

.tbox-cta-section .tbox-btn-arrow {
  transition: transform var(--ease-base);
}
.tbox-cta-section .tbox-btn:hover .tbox-btn-arrow,
.tbox-cta-section .tbox-btn-outline:hover .tbox-btn-arrow {
  transform: translateX(3px);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (width <= 900px) {
  body.home #content > .tbox-home-hero.tbox-hero-v3 {
    padding-bottom: 5.75rem;
  }

  #content .tbox-home-hero .tbox-hero-v3__inner.tbox-home-hero__layout {
    grid-template-columns: 1fr;
  }

}

@media (width <= 640px) {
  body.home #content > .tbox-home-hero.tbox-hero-v3 {
    padding-bottom: 3.25rem;
  }

  #content .tbox-home-hero .tbox-hero-v3__title {
    max-width: none;
  }

  #content .tbox-home-hero__rating .tbox-sa-rating-badge--hero {
    width: 100%;
    justify-content: center;
  }

  .tbox-product-card .tbox-card__body {
    padding: 24px 20px 0;
  }

  .tbox-product-card .tbox-card__footer {
    flex-direction: column;
    align-items: stretch;
    padding: 18px 20px 24px;
  }

  .tbox-product-card .tbox-card__footer .tbox-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
  }

  .tbox-feature-grid {
    grid-template-columns: 1fr;
  }

  .tbox-spoke-overview .tbox-section__desc {
    margin-bottom: var(--space-xl);
    text-align: left;
  }

  .tbox-spoke-overview :is(.tbox-callout, .tbox-callout--icon) {
    max-width: none;
    margin-inline: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-product-card,
.tbox-pillar-card,
.tbox-cta-section .tbox-btn-arrow {
    transition: none;
  }
}

/* ============================================================
   Pillar Card Grid — shared base for mechanism-style card sections
   (homepage "What Keeps Production Workloads Running",
    Cloud VPS "Add Managed Infrastructure", etc.)
   ============================================================ */

/* Section wrapper */
.tbox-pillar-section {
  background: var(--surface-muted);
  padding: 64px 24px;
}

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

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

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

.tbox-pillar-section > .tbox-container {
  max-width: 1200px;
  text-align: center;
}

/* Eyebrow */
.tbox-pillar-eyebrow {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  margin: 0 0 10px;
}

/* Heading overrides */
.tbox-pillar-section .tbox-section__heading {
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-extrabold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-normal);
  color: var(--text-primary);
  margin-bottom: 18px;
  text-align: center;
  padding-bottom: 0;
}

.tbox-pillar-section .tbox-section__heading::after {
  display: none;
}

:root[data-theme="dark"] .tbox-pillar-section .tbox-section__heading {
  color: var(--text-inverse);
}

/* Description */
.tbox-pillar-section .tbox-section__desc {
  font-size: var(--fs-md);
  color: #5a6a7e;
  max-width: 620px;
  line-height: var(--lh-loose);
  margin: 0 auto var(--space-3xl-plus);
  text-align: center;
}

:root[data-theme="dark"] .tbox-pillar-section .tbox-section__desc {
  color: var(--text-muted);
}

#managed-services-section .tbox-pillar-card__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: var(--_accent-tint);
}

#managed-services-section .tbox-pillar-card__icon .material-symbols-outlined {
  font-size: 22px;
}

#managed-services-section .tbox-pillar-card__situation {
  font-style: italic;
}

#managed-services-section .tbox-pillar-card__link {
  margin-top: auto;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

#managed-services-section .tbox-pillar-card {
  transition: transform var(--ease-fast), border-color var(--ease-slow), box-shadow var(--ease-slow);
}

#managed-services-section .tbox-pillar-card:hover {
  transform: translateY(-3px);
}

/* 3-col card grid */
.tbox-pillar-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  text-align: left;
}

@media (width <= 900px) {
  .tbox-pillar-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin: 0 auto;
  }
}

.tbox-pillar-grid--two-col {
  grid-template-columns: repeat(2, 1fr);
  max-width: 820px;
  margin-inline: auto;
}

/* Card */
.tbox-pillar-card {
  background: var(--surface-base);
  border-radius: var(--radius-lg);
  padding: var(--space-2xl) var(--space-xl-plus) var(--space-xl-plus);
  border: 1px solid #e8ecf1;
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: inherit;
  transition: border-color var(--ease-slow), box-shadow var(--ease-slow);
}

a.tbox-pillar-card {
  text-decoration: none;
}

.tbox-pillar-card:hover {
  border-color: #d0d6e0;
  box-shadow: 0 2px 8px rgb(0 0 0 / 5%);
}

:root[data-theme="dark"] .tbox-pillar-card {
  background: var(--surface-card-elevated);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-pillar-card:hover {
  border-color: var(--border-muted);
  box-shadow: 0 2px 8px rgb(0 0 0 / 12%);
}

.tbox-pillar-card--blue {
  --_accent: var(--brand-primary);
  --_accent-tint: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --_accent-tint-dark: color-mix(in srgb, var(--brand-primary) 15%, transparent);
}

.tbox-pillar-card--green {
  --_accent: var(--color-teal);
  --_accent-tint: color-mix(in srgb, var(--color-teal) 10%, transparent);
  --_accent-tint-dark: color-mix(in srgb, var(--color-teal) 15%, transparent);
}

:root[data-theme="dark"] .tbox-pillar-card--green {
  --_accent: oklch(72% 0.06 175);
  --_accent-tint: color-mix(in srgb, oklch(72% 0.06 175) 12%, transparent);
  --_accent-tint-dark: color-mix(in srgb, oklch(72% 0.06 175) 18%, transparent);
}

.tbox-pillar-card--orange {
  --_accent: var(--brand-cta);
  --_accent-tint: color-mix(in srgb, var(--brand-cta) 10%, transparent);
  --_accent-tint-dark: color-mix(in srgb, var(--brand-cta) 15%, transparent);
}

/* Top accent bar */
.tbox-pillar-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--_accent);
}

/* Pillar card header (inline icon + heading) */
.tbox-pillar-card__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: var(--space-md);
}

.tbox-pillar-card__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--_accent);
}

.tbox-pillar-card__icon .material-symbols-outlined {
  font-size: 24px;
}

/* Card heading (supports both dedicated class and scoped .tbox-card__heading) */
:is(.tbox-pillar-card__heading, .tbox-pillar-card .tbox-card__heading) {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin-bottom: 10px;
}

:root[data-theme="dark"] :is(.tbox-pillar-card__heading, .tbox-pillar-card .tbox-card__heading) {
  color: var(--text-inverse);
}

/* Buyer-situation question lead-in above body text */
.tbox-pillar-card__situation {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  font-style: italic;
  margin: 0 0 var(--space-xs);
  line-height: var(--lh-snug);
}

/* Card body text */
:is(.tbox-pillar-card__text, .tbox-pillar-card .tbox-card__text) {
  font-size: var(--fs-base);
  line-height: 1.65;
  color: #5a6a7e;
  margin-bottom: 22px;
}

:root[data-theme="dark"] :is(.tbox-pillar-card__text, .tbox-pillar-card .tbox-card__text) {
  color: var(--text-muted);
}

/* Check-dot list */
.tbox-pillar-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tbox-pillar-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: var(--fs-base);
  line-height: 1.55;
  color: #3a4a5e;
}

:root[data-theme="dark"] .tbox-pillar-card__list li {
  color: var(--text-muted);
}

:where(.tbox-pillar-card__list strong) {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

:root[data-theme="dark"] :where(.tbox-pillar-card__list strong) {
  color: var(--text-inverse);
}

/* Check dot */
.tbox-pillar-dot {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  flex-shrink: 0;
  margin-top: 1px;
  background: var(--_accent-tint);
  color: var(--_accent);
}

:root[data-theme="dark"] .tbox-pillar-dot {
  background: var(--_accent-tint-dark);
}

/* stylelint-disable-next-line no-descending-specificity -- scoped icon override,
no element can match both selectors */
.tbox-pillar-dot .material-symbols-outlined {
  font-size: var(--fs-sm);
  font-variation-settings: 'FILL' 0, 'wght' 600;
}

/* Card link arrow (used by managed services cards) */
.tbox-pillar-card__link {
  margin-top: auto;
  padding-top: var(--space-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--_accent);
}

/* ============================================================
   Migrated: app-hosting-family.css (shared App Hosting marketing modules)
   ============================================================ */

/**
 * app-hosting-family.css — Shared App Hosting marketing modules
 *
 * Loaded conditionally when page content includes App Hosting family markers.
 */

/* App Hosting hero pricing anchor */
.tbox-ah-hero-pricing-anchor {
  display: inline-flex;
  align-items: center;
  gap: var(--space-md);
  padding: 0.6rem 1.25rem;
  margin-bottom: var(--space-lg);
  background: var(--surface-glass-08);
  border: 1px solid var(--surface-glass-18);
  border-radius: var(--radius-md);
}

.tbox-ah-hero-pricing-anchor__label {
  font-size: var(--fs-base);
  color: var(--text-on-dark-muted);
  letter-spacing: var(--ls-normal);
  font-weight: var(--fw-semibold);
}

.tbox-ah-hero-pricing-anchor__price {
  font-size: var(--fs-pricing-display);
  font-weight: var(--fw-bold);
  color: var(--text-inverse);
  line-height: 1;
}

.tbox-ah-hero-pricing-anchor__unit {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  opacity: 0.7;
}

.tbox-ah-hero-pricing-anchor__detail {
  font-size: var(--fs-base);
  color: var(--text-on-dark-muted);
}

@media (width <= 600px) {
  .tbox-ah-hero-pricing-anchor {
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-xs) 0.75rem;
    text-align: center;
  }
}

/* Center pricing anchors inside content sections */
.tbox-section .tbox-ah-hero-pricing-anchor {
  display: flex;
  justify-content: center;
  max-width: fit-content;
  margin-inline: auto;
}

/* Light-mode fix: pricing anchor on light-background sections */
:root:not([data-theme="dark"]) .tbox-section .tbox-ah-hero-pricing-anchor {
  background: var(--surface-card);
  border-color: var(--border-card);
}

:root:not([data-theme="dark"]) .tbox-section .tbox-ah-hero-pricing-anchor__label {
  color: var(--text-secondary);
}

:root:not([data-theme="dark"]) .tbox-section .tbox-ah-hero-pricing-anchor__price {
  color: var(--text-primary);
}

:root:not([data-theme="dark"]) .tbox-section .tbox-ah-hero-pricing-anchor__detail {
  color: var(--text-secondary);
}

/* stylelint-disable-next-line no-descending-specificity -- link color stays local to the pricing-anchor detail text */
:root:not([data-theme="dark"]) .tbox-section .tbox-ah-hero-pricing-anchor__detail a {
  color: var(--link);
}

/* ── App Hosting hero: two-column split with centered CTA row ── */
.tbox-app-hosting-hero .tbox-hero-v3__inner {
  max-width: min(1240px, 92vw);
}

.tbox-app-hosting-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.98fr);
  grid-template-rows: auto auto;
  column-gap: clamp(1.5rem, 3vw, 3rem);
  row-gap: clamp(1rem, 2.2vw, 1.75rem);
  align-items: start;
  text-align: left;
}

.tbox-app-hosting-hero__text {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  padding-top: var(--space-xs);
}
/* stylelint-disable-next-line no-descending-specificity */
.tbox-app-hosting-hero .tbox-hero-v3__subtitle {
  margin-left: 0;
  margin-right: 0;
  max-width: 540px;
}

.tbox-app-hosting-hero__cta-block {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-app-hosting-hero__cta-block .tbox-hero-v3__cta-row {
  align-items: center;
  gap: var(--space-sm);
  justify-content: center;
}

/* Hero sits on a deep cobalt fill; pure white reads cleanly on the saturated tint. */
#content .tbox-app-hosting-hero__cta-block .tbox-mini-note {
  color: var(--text-inverse);
}

.tbox-app-hosting-hero__rating {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (width <= 1024px) {
  .tbox-app-hosting-hero__split {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tbox-app-hosting-hero__text {
    padding-top: 0;
  }
  /* stylelint-disable-next-line no-descending-specificity */
  .tbox-app-hosting-hero .tbox-hero-v3__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (width <= 600px) {
  .tbox-app-hosting-hero .tbox-hero-v3__inner {
    display: flex;
    flex-direction: column;
    gap: var(--space-md-plus);
  }
  /* display:contents dissolves the split grid so its children become direct flex items */
  .tbox-app-hosting-hero__split { display: contents; }
  .tbox-app-hosting-hero__text {
    order: 1;
    gap: var(--space-sm);
  }
  .tbox-app-hosting-hero__visual {
    order: 3;
    width: 100%;
    max-width: 100%;
  }
  .tbox-app-hosting-hero__cta-block {
    order: 2;
    margin-top: var(--space-sm);
    gap: var(--space-xs-plus);
  }
  .tbox-app-hosting-hero .tbox-hero-v3__subtitle {
    text-align: left;
    margin-left: 0;
    margin-right: 0;
  }
}

/* ── Hero primary CTA emphasis ── */
/* stylelint-disable-next-line no-descending-specificity */
.tbox-hero-v3 .tbox-btn[data-cta-tier="primary"] {
  padding: 0.9rem 1.9rem;
  font-size: var(--fs-xl);
  letter-spacing: var(--ls-wide);
}

.tbox-hero-v3 .tbox-btn[data-cta-tier="primary"]:hover {
  box-shadow: none;
  animation: none;
}


/* ── Cloud VPS hero: left-aligned two-column split ── */
.tbox-hourly-cloud-vps .tbox-hero-v3__inner {
  max-width: min(1240px, 92vw);
}

.tbox-cloud-vps-hero__split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
  text-align: left;
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
  margin-left: 0;
  margin-right: 0;
  max-width: 540px;
}

.tbox-cloud-vps-hero__cta-block {
  margin-top: var(--space-lg);
  text-align: center;
}

@media (width <= 1024px) {
  .tbox-cloud-vps-hero__split {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block {
    text-align: center;
  }

  /* stylelint-disable-next-line no-descending-specificity */
  .tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
    margin-left: auto;
    margin-right: auto;
  }
}

@media (width <= 600px) {
  .tbox-cloud-vps-hero__split {
    gap: var(--space-xl);
  }

  .tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block {
    margin-top: var(--space-md);
  }

  .tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
    gap: var(--space-sm);
  }
}


.tbox-cloud-vps-hero__title-line2 {
  display: inline-block;
  margin-top: 0.15em;
}

/* ── Cloud VPS hero visual tuning (tokenized, page-scoped) ── */
/* The fleet-monitor custom properties are also handed to the home page's
   .tbox-home-fleet wrapper (Cloud VPS showcase carousel). This rule is pure
   custom-property declarations — no layout — so the home wrapper inherits the
   fleet token set without any hero chrome. */
section#hero-section.tbox-hourly-cloud-vps,
.tbox-home-fleet {
  --cloud-vps-fleet-card-border: rgb(56 189 248 / 22%);
  --cloud-vps-fleet-card-inset: transparent;
  --cloud-vps-fleet-card-shadow-deep: rgb(0 0 0 / 18%);
  --cloud-vps-fleet-card-shadow-mid: transparent;
  --cloud-vps-fleet-conn-base: rgb(56 189 248 / 70%);
  --cloud-vps-fleet-conn-peak: rgb(103 232 249 / 94%);
  --cloud-vps-fleet-conn-diag-opacity: 0.7;
  --cloud-vps-fleet-monitor-shell: rgb(8 27 46 / 96%);
  --cloud-vps-fleet-monitor-head-bg: rgb(8 27 46 / 96%);
  --cloud-vps-fleet-monitor-body-bg: rgb(8 27 46 / 96%);
  --cloud-vps-fleet-monitor-foot-bg: rgb(10 22 38 / 98%);
  --cloud-vps-fleet-monitor-divider: rgb(148 163 184 / 18%);
  --cloud-vps-fleet-monitor-title: rgb(203 213 225 / 78%);
  --cloud-vps-fleet-monitor-strong-text: rgb(241 245 249 / 96%);
  --cloud-vps-fleet-monitor-muted-text: rgb(191 219 254 / 76%);
  --cloud-vps-fleet-monitor-caption-muted: rgb(191 219 254 / 70%);
  --cloud-vps-fleet-monitor-stage-bg: rgb(6 16 30 / 97%);
  --cloud-vps-fleet-monitor-stage-border: rgb(56 189 248 / 18%);
  --cloud-vps-fleet-monitor-stage-inset: rgb(255 255 255 / 6%);
  --cloud-vps-fleet-node-fill: rgb(7 25 43);
  --cloud-vps-fleet-node-stroke: rgb(56 189 248 / 24%);
  --cloud-vps-fleet-node-rim-idle: rgb(56 189 248 / 42%);
  --cloud-vps-fleet-node-shadow: none;
  --cloud-vps-fleet-node-icon-idle: rgb(103 232 249 / 88%);
  --cloud-vps-fleet-node-label: rgb(248 250 252 / 92%);
  --cloud-vps-fleet-node-sublabel: rgb(226 232 240 / 84%);
  --cloud-vps-fleet-node-micro-label: rgb(248 250 252 / 72%);
  --cloud-vps-fleet-node-load-track: rgb(51 65 85 / 92%);
  --cloud-vps-fleet-node-vm-track: rgb(30 41 59 / 96%);
  --cloud-vps-fleet-node-vm-stroke: rgb(71 85 105 / 96%);
  --cloud-vps-fleet-node-offline-bg: rgb(15 23 42 / 96%);
  --cloud-vps-fleet-node-offline-rim: rgb(100 116 139 / 72%);
  --cloud-vps-fleet-node-offline-label: rgb(148 163 184 / 84%);
  --cloud-vps-fleet-status-bg-pct: 12%;
  --cloud-vps-fleet-status-border-pct: 26%;
  --cloud-vps-fleet-status-monitoring-bg-pct: 8%;
  --cloud-vps-fleet-status-monitoring-border-pct: 16%;
  --cloud-vps-sim-congestion-bg: rgb(245 158 11 / 16%);
  --cloud-vps-sim-congestion-border: rgb(245 158 11 / 52%);
  --cloud-vps-sim-congestion-text: var(--brand-cta);
  --cloud-vps-sim-congestion-bg-hover: rgb(245 158 11 / 24%);
  --cloud-vps-sim-congestion-border-hover: rgb(245 158 11 / 76%);
  --cloud-vps-sim-congestion-shadow: rgb(245 158 11 / 26%);
  --cloud-vps-sim-failure-bg: rgb(239 68 68 / 14%);
  --cloud-vps-sim-failure-border: rgb(239 68 68 / 52%);
  --cloud-vps-sim-failure-text: var(--color-red);
  --cloud-vps-sim-failure-bg-hover: rgb(239 68 68 / 22%);
  --cloud-vps-sim-failure-border-hover: rgb(239 68 68 / 76%);
  --cloud-vps-sim-failure-shadow: rgb(239 68 68 / 26%);
  --cloud-vps-hero-outline-border: var(--surface-glass-40);
  --cloud-vps-hero-outline-bg: var(--surface-glass-07);
  --cloud-vps-hero-outline-inset: var(--surface-glass-10);
  --cloud-vps-hero-outline-border-hover: var(--surface-glass-60);
  --cloud-vps-hero-outline-bg-hover: var(--surface-glass-14);

  /* Fleet monitor readability scaling */
  --cloud-vps-fleet-monitor-max-width: 536px;
  --cloud-vps-fleet-monitor-max-width-tablet: 500px;
  --cloud-vps-fleet-monitor-title-size: var(--fs-lg);
  --cloud-vps-fleet-monitor-live-size: var(--fs-base);
  --cloud-vps-fleet-monitor-summary-unit-size: var(--fs-md);
  --cloud-vps-fleet-monitor-legend-size: var(--fs-sm);
  --cloud-vps-fleet-monitor-button-size: var(--fs-sm);
  --cloud-vps-fleet-monitor-foot-size: var(--fs-xs);
  --cloud-vps-fleet-monitor-caption-size: var(--fs-sm);
  --cloud-vps-fleet-monitor-node-label-size: var(--fs-sm);
  --cloud-vps-fleet-monitor-node-sublabel-size: var(--fs-2xs); /* 9px -> 12px */
}

.tbox-fleet-mobile-proof {
  display: none;
}

@media (width <= 600px) {
  .tbox-fleet-mobile-proof {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 0;
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-muted);
    border-radius: var(--radius-sm);
    border: 1px solid var(--border-light);
  }

  .tbox-fleet-mobile-proof__step {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    position: relative;
  }

  /* Timeline connector line between steps */
  .tbox-fleet-mobile-proof__step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 5px;
    top: calc(var(--space-xs) + 14px);
    bottom: 0;
    width: 1px;
    background: var(--border-light);
  }

  .tbox-fleet-mobile-proof__dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--border-mid);
    display: block;
    flex-shrink: 0;
    margin-top: 3px;
    position: relative;
    z-index: 1;
  }

  .tbox-fleet-mobile-proof__content {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .tbox-fleet-mobile-proof__label {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-primary);
  }

  .tbox-fleet-mobile-proof__desc {
    font-size: var(--fs-xs);
    color: var(--text-muted);
    line-height: var(--lh-normal);
  }

  /* Animated dots on mobile steps — pulse removed (designcheck) */
  .tbox-fleet-mobile-proof__step--animated .tbox-fleet-mobile-proof__dot {
    opacity: 1;
  }

  .tbox-fleet-mobile-proof__step--animated[data-mobile-act="failover"] .tbox-fleet-mobile-proof__dot {
    animation-delay: 1s;
  }

  .tbox-fleet-mobile-proof__step--animated[data-mobile-act="restored"] .tbox-fleet-mobile-proof__dot {
    animation-delay: 2s;
  }
}

@keyframes fleet-mobile-dot-pulse {
  0%, 100% { opacity: 0.7; }
  50% { opacity: 1; }
}

@keyframes fleet-conn-pulse-enhanced {
  0%, 100% {
    opacity: 0.5;
    stroke: var(--cloud-vps-fleet-conn-base);
  }
  50% {
    opacity: 1;
    stroke: var(--cloud-vps-fleet-conn-peak);
  }
}

#hero-section.tbox-hourly-cloud-vps #btn-sim-congestion {
  background: var(--cloud-vps-sim-congestion-bg);
  border-color: var(--cloud-vps-sim-congestion-border);
  color: var(--cloud-vps-sim-congestion-text);
  transition:
    background var(--duration-base) ease,
    border-color var(--duration-base) ease,
    box-shadow var(--duration-base) ease;
}

#hero-section.tbox-hourly-cloud-vps #btn-sim-congestion:hover:not(:disabled) {
  background: var(--cloud-vps-sim-congestion-bg-hover);
  border-color: var(--cloud-vps-sim-congestion-border-hover);
  box-shadow: 0 0 6px var(--cloud-vps-sim-congestion-shadow);
}

#hero-section.tbox-hourly-cloud-vps #btn-sim-failure {
  background: var(--cloud-vps-sim-failure-bg);
  border-color: var(--cloud-vps-sim-failure-border);
  color: var(--cloud-vps-sim-failure-text);
  transition:
    background var(--duration-base) ease,
    border-color var(--duration-base) ease,
    box-shadow var(--duration-base) ease;
}

#hero-section.tbox-hourly-cloud-vps #btn-sim-failure:hover:not(:disabled) {
  background: var(--cloud-vps-sim-failure-bg-hover);
  border-color: var(--cloud-vps-sim-failure-border-hover);
  box-shadow: 0 0 6px var(--cloud-vps-sim-failure-shadow);
}

/* stylelint-disable-next-line no-descending-specificity */
#hero-section.tbox-hourly-cloud-vps .tbox-btn.tbox-btn-outline {
  border-color: var(--cloud-vps-hero-outline-border);
  background: var(--cloud-vps-hero-outline-bg) !important;
  box-shadow: inset 0 1px 0 var(--cloud-vps-hero-outline-inset);
}

#hero-section.tbox-hourly-cloud-vps .tbox-btn.tbox-btn-outline:hover {
  border-color: var(--cloud-vps-hero-outline-border-hover);
  background: var(--cloud-vps-hero-outline-bg-hover) !important;
}

/* ── Cloud VPS hero monitor card (wraps HA animation) ── */
.tbox-ha-hero-monitor {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
  background: var(--overlay-12);
  border: 1px solid var(--surface-glass-08);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tbox-ha-hero-monitor__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--surface-glass-08);
}

.tbox-ha-hero-monitor__title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark);
  letter-spacing: var(--ls-wide);
}

.tbox-ha-hero-monitor__live {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--fs-xs);
  color: var(--success-text);
}

.tbox-ha-hero-monitor__live-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--success);
}

.tbox-ha-hero-monitor__body {
  padding: var(--space-md);
}

.tbox-ha-hero-monitor__foot {
  padding: var(--space-xs) var(--space-md);
  border-top: 1px solid var(--surface-glass-08);
  font-size: var(--fs-xs);
  color: var(--text-on-dark-muted);
}

/* HA animation inside hero: larger sizing than bento card */
/* stylelint-disable-next-line no-descending-specificity */
.tbox-ha-hero-monitor .tbox-ha-animation {
  position: relative;
  top: auto;
  right: auto;
  display: flex;
  justify-content: center;
  width: 100%;
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-ha-hero-monitor .tbox-ha-stage {
  --ha-node-w: 140px;
  --ha-node-h: 120px;
  --ha-gap: 14px;
  background: var(--overlay-20);
  border-color: var(--surface-glass-08);
  box-shadow: none;
}

@media (width <= 1024px) {
  .tbox-ha-hero-monitor {
    max-width: 380px;
  }
}

@media (width <= 600px) {
  .tbox-ha-hero-monitor .tbox-ha-stage {
    --ha-node-w: 110px;
    --ha-node-h: 95px;
  }

  /* Mobile: hide animation panel; keep head (title/live) and foot (stats) */
  .tbox-ha-hero-monitor .tbox-ha-hero-monitor__body {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-ha-hero-monitor .tbox-ha-stage,
.tbox-ha-hero-monitor .tbox-ha-stage * {
    animation: none !important;
  }
}

/* ── Cloud VPS Fleet Operations monitor (hero animation) ──────────── */

.tbox-fleet-monitor {
  /* Fleet color tokens */
  --fleet-green: var(--success);
  --fleet-green-border: var(--success);
  --fleet-green-soft: var(--success-deep);
  --fleet-green-outline-soft: rgb(16 185 129 / 25%);
  --fleet-amber: var(--brand-cta);
  --fleet-amber-border: var(--brand-cta);
  --fleet-amber-soft: rgb(245 158 11 / 72%);
  --fleet-amber-glow-soft: rgb(245 158 11 / 20%);
  --fleet-red: rgb(239 68 68 / 92%);
  --fleet-red-border: rgb(239 68 68 / 70%);
  --fleet-red-soft: rgb(239 68 68 / 65%);
  --fleet-red-glow-soft: rgb(239 68 68 / 20%);

  position: relative;
  max-width: var(--cloud-vps-fleet-monitor-max-width, 536px);
  width: 100%;
  margin: 0 auto;
  background: var(--cloud-vps-fleet-monitor-shell, var(--surface-base));
  border: 1px solid var(--cloud-vps-fleet-card-border, var(--border-light));
  border-radius: var(--radius-12);
  overflow: hidden;
}

.tbox-fleet-monitor__title {
  font-size: var(--cloud-vps-fleet-monitor-title-size, var(--fs-sm));
  font-weight: var(--fw-semibold);
  color: var(--cloud-vps-fleet-monitor-title, var(--text-muted));
  white-space: nowrap;
}

/* Service status indicator */
.tbox-fleet-service-status {
  --status-color: var(--fleet-green);
  --status-bg-pct: var(--cloud-vps-fleet-status-bg-pct, 5%);
  --status-border-pct: var(--cloud-vps-fleet-status-border-pct, 14%);

  display: flex;
  align-items: center;
  gap: var(--space-xs-plus);
  padding: 0.35rem var(--space-sm-plus);
  margin-bottom: 7px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--status-color) var(--status-bg-pct), transparent);
  border: 1px solid color-mix(in srgb, var(--status-color) var(--status-border-pct), transparent);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.tbox-fleet-service-status__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--status-color);
  flex-shrink: 0;
  transition: background 0.2s ease;
}

.tbox-fleet-service-status__text {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--cloud-vps-fleet-monitor-strong-text, var(--text-secondary));
  transition: color 0.2s ease;
}

.tbox-fleet-service-status[data-level="recovering"] {
  --status-color: var(--fleet-amber);
}

.tbox-fleet-service-status[data-level="monitoring"] {
  --status-color: var(--fleet-green);
  --status-bg-pct: var(--cloud-vps-fleet-status-monitoring-bg-pct, 3%);
  --status-border-pct: var(--cloud-vps-fleet-status-monitoring-border-pct, 10%);
}

.tbox-fleet-service-status[data-level="monitoring"] .tbox-fleet-service-status__dot {
  opacity: 0.6;
}

.tbox-fleet-service-status[data-level="monitoring"] .tbox-fleet-service-status__text {
  color: var(--cloud-vps-fleet-monitor-strong-text, var(--text-secondary));
}


.tbox-fleet-monitor__body {
  padding: 12px 20px;
  background: var(--cloud-vps-fleet-monitor-body-bg, var(--surface-base));
}

.tbox-fleet-summary {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--cloud-vps-fleet-monitor-divider, var(--border-light));
}

.tbox-fleet-summary-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
}

.tbox-fleet-summary-val {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.tbox-fleet-summary-unit {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--cloud-vps-fleet-monitor-summary-unit-size, var(--fs-md));
  font-weight: var(--fw-medium);
  color: var(--cloud-vps-fleet-monitor-muted-text, var(--text-muted));
}

.tbox-fleet-summary-divider {
  width: 1px;
  height: 16px;
  background: var(--cloud-vps-fleet-monitor-divider, var(--border-light));
}

.tbox-fleet-legend {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px 12px;
  margin-bottom: 8px;
}

.tbox-fleet-legend-item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  color: var(--cloud-vps-fleet-monitor-muted-text, var(--text-muted));
}

.tbox-fleet-legend-swatch {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-xs);
}

.tbox-fleet-legend-swatch--healthy { background: var(--fleet-green); }
.tbox-fleet-legend-swatch--congested { background: var(--fleet-amber); }
.tbox-fleet-legend-swatch--failover { background: var(--fleet-red); }

/* Interactivity cue above the scenario tabs — the monitor otherwise reads as
   a static screenshot */
/* Scenario tab strip — full-width window-chrome tabs */
.tbox-fleet-stages {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  border-bottom: 1px solid var(--cloud-vps-fleet-monitor-divider, var(--border-light));
}

.tbox-fleet-stage-btn {
  flex: 1 1 0;
  min-width: 0;
  background: var(--cloud-vps-fleet-monitor-stage-bg, var(--surface-muted));
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--cloud-vps-fleet-monitor-muted-text, var(--text-muted));
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 0.7rem 1rem;
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tbox-fleet-stage-btn[data-active] {
  background: var(--cloud-vps-fleet-monitor-body-bg, var(--surface-base));
  color: var(--cloud-vps-fleet-monitor-strong-text, var(--text-primary));
  border-bottom-color: var(--brand-cta);
}

.tbox-fleet-stage-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

/* JS-injected pause/resume toggle at the end of the scenario strip */
.tbox-fleet-pause-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  padding: 0;
  background: var(--cloud-vps-fleet-monitor-stage-bg, var(--surface-muted));
  border: 0;
  border-bottom: 2px solid transparent;
  border-left: 1px solid var(--cloud-vps-fleet-monitor-divider, var(--border-light));
  color: var(--cloud-vps-fleet-monitor-muted-text, var(--text-muted));
  cursor: pointer;
  transition: color 0.2s ease, background 0.2s ease;
}

.tbox-fleet-pause-btn:hover,
.tbox-fleet-pause-btn:focus-visible {
  color: var(--cloud-vps-fleet-monitor-strong-text, var(--text-primary));
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--cloud-vps-fleet-monitor-stage-bg, var(--surface-muted)));
}

.tbox-fleet-pause-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

.tbox-fleet-pause-btn__icon {
  width: 1.1rem;
  height: 1.1rem;
}

.tbox-fleet-pause-btn__icon--play,
.tbox-fleet-pause-btn--paused .tbox-fleet-pause-btn__icon--pause {
  display: none;
}

.tbox-fleet-pause-btn--paused .tbox-fleet-pause-btn__icon--play {
  display: block;
}

.tbox-fleet-stage-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.tbox-fleet-stage-btn:hover:not(:disabled):not([data-active]) {
  color: var(--cloud-vps-fleet-monitor-strong-text, var(--text-primary));
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--cloud-vps-fleet-monitor-stage-bg, var(--surface-muted)));
}

/* Subtle play affordance on the inactive scenario tab (both instances) */
#hero-section.tbox-hourly-cloud-vps .tbox-fleet-stage-btn:not([data-active])::before,
.tbox-home-fleet .tbox-fleet-stage-btn:not([data-active])::before {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-right: 0.45em;
  vertical-align: 1px;
  border-style: solid;
  border-width: 0.32em 0 0.32em 0.5em;
  border-color: transparent transparent transparent currentcolor;
  opacity: 0.65;
}

.tbox-fleet-monitor__foot {
  padding: 7px 14px;
  background: var(--cloud-vps-fleet-monitor-foot-bg, var(--surface-subtle));
  border-top: 1px solid var(--cloud-vps-fleet-monitor-divider, var(--border-light));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--cloud-vps-fleet-monitor-foot-size, var(--fs-xs));
  font-weight: var(--fw-medium);
  color: var(--cloud-vps-fleet-monitor-muted-text, var(--text-muted));
}

.tbox-fleet-status {
  letter-spacing: var(--ls-wide);
}

/* stylelint-disable-next-line no-descending-specificity */
#hero-section.tbox-hourly-cloud-vps .tbox-fleet-monitor,
.tbox-home-fleet .tbox-fleet-monitor {
  border: 1px solid var(--cloud-vps-fleet-card-border);
  box-shadow: 0 10px 24px rgb(0 0 0 / 16%);
  border-radius: var(--radius-12);
  overflow: hidden;
}

/* SVG canvas */
.tbox-fleet-svg {
  display: block;
  width: 100%;
  height: auto;
  background: color-mix(in srgb, var(--gray-950) 54%, var(--brand-primary-deep) 16%);
  border: 1px solid var(--cloud-vps-fleet-monitor-stage-border, transparent);
  border-radius: var(--radius-sm-plus);
  box-shadow: inset 0 1px 0 var(--cloud-vps-fleet-monitor-stage-inset, transparent);
}

/* Connection lines */
.tbox-fleet-conn {
  stroke: var(--cloud-vps-fleet-conn-base, var(--brand-primary));
  stroke-width: 1.2;
  fill: none;
  transition: stroke 0.6s ease, opacity 0.6s ease;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  animation: fleet-conn-draw 1.5s ease-out forwards;
}

@keyframes fleet-conn-draw {
  to { stroke-dashoffset: 0; }
}

.tbox-fleet-conn--diag {
  stroke-dasharray: 4 6;
  opacity: 0.4;
}

@keyframes fleet-conn-pulse {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.5; }
}

.tbox-fleet-conn[data-status="red"] {
  stroke: var(--fleet-red-glow-soft);
  opacity: 0.15;
}

/* stylelint-disable-next-line no-descending-specificity */
#hero-section.tbox-hourly-cloud-vps .tbox-fleet-conn,
.tbox-home-fleet .tbox-fleet-conn {
  stroke-width: 1.2;
  stroke: var(--cloud-vps-fleet-conn-base);
  animation: fleet-conn-draw 1.5s ease-out forwards;
}

/* stylelint-disable-next-line no-descending-specificity */
#hero-section.tbox-hourly-cloud-vps .tbox-fleet-conn--diag,
.tbox-home-fleet .tbox-fleet-conn--diag {
  opacity: var(--cloud-vps-fleet-conn-diag-opacity);
}

/* Particles (Chatter dots) */
.tbox-fleet-particle {
  fill: var(--cloud-vps-fleet-conn-peak, var(--brand-primary));
  opacity: 0.82;
  pointer-events: none;
}

/* Nodes */
.tbox-fleet-node {
  /* Transition removed to prevent shift on hover */
}

/* .tbox-fleet-node:hover removed to prevent shift on hover */

/* Vector host node background */
.tbox-fleet-node__bg {
  fill: url(#fleet-node-fill);
  stroke: var(--border-light);
  stroke-width: 1;
  transition: fill 0.2s ease, stroke 0.2s ease;
}

/* stylelint-disable-next-line no-descending-specificity */
#hero-section.tbox-hourly-cloud-vps .tbox-fleet-node__bg,
.tbox-home-fleet .tbox-fleet-node__bg {
  fill: var(--cloud-vps-fleet-node-fill);
  stroke: var(--cloud-vps-fleet-node-stroke);
  filter: var(--cloud-vps-fleet-node-shadow);
}

/* Vector host icon */
.tbox-fleet-node__icon {
  color: var(--cloud-vps-fleet-node-icon-idle, var(--fleet-green));
  opacity: 0.7;
  transition: color 0.2s ease, opacity 0.2s ease;
}

.tbox-fleet-node__icon,
.tbox-fleet-node__icon rect,
.tbox-fleet-node__icon line,
.tbox-fleet-node__icon circle {
  color: var(--cloud-vps-fleet-node-icon-idle, var(--fleet-green));
}

.tbox-fleet-node__icon rect,
.tbox-fleet-node__icon line {
  stroke: currentColor !important;
}

.tbox-fleet-node__icon circle {
  fill: currentColor !important;
}

.tbox-fleet-node:hover .tbox-fleet-node__icon {
  opacity: 1;
}

.tbox-fleet-node[data-status="amber"] .tbox-fleet-node__icon {
  color: var(--fleet-amber);
}

.tbox-fleet-node[data-status="red"] .tbox-fleet-node__icon {
  color: var(--text-muted);
  opacity: 0.3;
}

.tbox-fleet-node__rim {
  fill: none;
  stroke: var(--cloud-vps-fleet-node-rim-idle, var(--fleet-green-border));
  stroke-width: 1;
  transition: stroke 0.2s ease;
  opacity: 0.62;
}

.tbox-fleet-node[data-status="amber"] .tbox-fleet-node__rim,
.tbox-fleet-node[data-status="red"] .tbox-fleet-node__rim {
  will-change: opacity;
  animation: fleet-rim-breathe 4.5s ease-in-out infinite;
}

.tbox-fleet-node[data-status="amber"] .tbox-fleet-node__rim { stroke: var(--fleet-amber-border); }
.tbox-fleet-node[data-status="red"] .tbox-fleet-node__rim   { stroke: var(--fleet-red-border); }

@keyframes fleet-rim-breathe {
  0%, 100% { opacity: 0.3; stroke-width: 1; }
  50% { opacity: 1; stroke-width: 2; }
}

.tbox-fleet-node__led {
  fill: var(--fleet-green);
  opacity: 0.9;
}

@keyframes fleet-led-blink {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.8; }
}

.tbox-fleet-node[data-status="amber"] .tbox-fleet-node__led {
  fill: var(--fleet-amber);
}

.tbox-fleet-node[data-status="red"] .tbox-fleet-node__led {
  fill: var(--fleet-red);
  animation: none;
  opacity: 1;
}

/* stylelint-disable no-descending-specificity */
.tbox-fleet-node[data-status="red"] .tbox-fleet-node__bg {
  fill: var(--cloud-vps-fleet-node-offline-bg, var(--surface-muted));
}
/* stylelint-enable no-descending-specificity */

.tbox-fleet-node__label {
  fill: var(--cloud-vps-fleet-node-label, #ffffff);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--cloud-vps-fleet-monitor-node-label-size, var(--fs-xs));
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  transition: fill 0.2s ease;
}

.tbox-fleet-node__load-value {
  fill: var(--cloud-vps-fleet-node-label, #ffffff);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.tbox-fleet-node__sublabel {
  fill: var(--cloud-vps-fleet-node-sublabel, rgb(255 255 255 / 0.85));
  text-shadow: 0 1px 2px rgb(0 0 0 / 0.8);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--cloud-vps-fleet-monitor-node-sublabel-size, 9px);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  opacity: 0.9;
}

.tbox-fleet-node[data-status="red"] .tbox-fleet-node__sublabel {
  opacity: 0.3;
}

.tbox-fleet-node[data-status="red"] .tbox-fleet-node__label {
  fill: var(--cloud-vps-fleet-node-offline-label, var(--text-muted));
  opacity: 0.72;
}

/* Load bars */
.tbox-fleet-node__load-track {
  fill: var(--cloud-vps-fleet-node-load-track, var(--surface-muted));
}

.tbox-fleet-node__load-bar {
  fill: var(--fleet-green);
  transition: fill 0.2s ease;
}

/* Micro-labels on Node A teach host vs VPS distinction */
.tbox-fleet-node__micro-label {
  fill: var(--cloud-vps-fleet-node-micro-label, rgb(255 255 255 / 0.5));
  font-family: var(--tbox-font-mono);
  font-size: var(--cloud-vps-fleet-monitor-node-sublabel-size, 9px);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

.tbox-fleet-node[data-status="amber"] .tbox-fleet-node__load-bar {
  fill: var(--brand-cta);
}

.tbox-fleet-node[data-status="red"] .tbox-fleet-node__load-bar {
  fill: var(--cloud-vps-fleet-node-offline-rim, var(--border-mid));
}

/* VM bars */
.tbox-fleet-vm {
  transition: opacity 0.35s ease;
}

.tbox-fleet-vm__track {
  fill: var(--cloud-vps-fleet-node-vm-track, var(--surface-muted));
  stroke: var(--cloud-vps-fleet-node-vm-stroke, var(--border-light));
  stroke-width: 1;
}

.tbox-fleet-vm__fill {
  fill: var(--fleet-green);
  /* Width is set via SVG setAttribute("width", n) in cloud-vps-fleet.js;
     CSS transition on SVG presentation attributes is unreliable across
     browsers, so width changes render instantly — only fill/opacity animate. */
  transition: fill 0.2s ease, opacity 0.2s ease;
}

.tbox-fleet-vm-migrating .tbox-fleet-vm__fill {
  fill: var(--fleet-green);
}

.tbox-fleet-vm[data-state="noisy"] .tbox-fleet-vm__fill {
  fill: var(--brand-cta);
}

.tbox-fleet-vm[data-state="failed"] .tbox-fleet-vm__fill {
  fill: var(--fleet-red-soft);
  opacity: 0.55;
}

/* Migration VM (animated traveling bar) */
.tbox-fleet-vm-migrating {
  opacity: 0;
}

.tbox-fleet-vm-migrating[data-state="failover"] {
  opacity: 1;
}

.tbox-fleet-vm-migrating[data-state="noisy"] .tbox-fleet-vm__fill {
  fill: var(--brand-cta);
}

.tbox-fleet-vm-migrating[data-state="failover"] .tbox-fleet-vm__fill {
  fill: rgb(239, 68, 68);
}

/* Acceptance glow ring on receiving node */
.tbox-fleet-accept-ring {
  fill: none;
  stroke: var(--cloud-vps-fleet-node-rim-idle, var(--brand-primary));
  stroke-width: 2;
  opacity: 0;
}

/* Caption area (DOM element below SVG).
   min-height reserves space for the worst-case wrapped caption (2 lines)
   so caption swaps never resize the surrounding hero layout. */
.tbox-fleet-caption-area {
  min-height: 2.85em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 5px var(--space-sm) 4px;
}

#hero-section.tbox-hourly-cloud-vps .tbox-fleet-caption,
.tbox-home-fleet .tbox-fleet-caption {
  color: var(--cloud-vps-fleet-monitor-strong-text, var(--text-primary));
  font-size: var(--cloud-vps-fleet-monitor-caption-size, var(--fs-base));
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  letter-spacing: var(--ls-wide);
  opacity: 0;
  margin: 0;
  text-align: center;
  line-height: var(--lh-relaxed);
}

.tbox-fleet-caption-1 {
  font-weight: var(--fw-semibold);
}

#hero-section.tbox-hourly-cloud-vps .tbox-fleet-caption-2,
.tbox-home-fleet .tbox-fleet-caption-2 {
  color: var(--cloud-vps-fleet-monitor-caption-muted, var(--text-muted));
  font-weight: var(--fw-medium);
}

/* ── Fleet monitor responsive ── */

@media (width <= 1024px) {
  .tbox-fleet-monitor {
    max-width: var(--cloud-vps-fleet-monitor-max-width-tablet, 440px);
  }
}

@media (width <= 600px) {
  /* Mobile: the /cloud-vps/ hero shows the full fleet animation. Tighten the
     monitor chrome so the SVG diagram keeps as much width as possible, and
     make the scenario controls touch-friendly. Scoped to the hero so the
     home page Cloud VPS showcase fleet monitor is unaffected. */
  #hero-section.tbox-hourly-cloud-vps .tbox-fleet-monitor {
    max-width: none;
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-fleet-monitor__body {
    padding: 10px 12px;
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-fleet-stage-btn,
  .tbox-home-fleet .tbox-fleet-stage-btn {
    min-height: var(--min-touch-target);
    padding-inline: 0.5rem;
  }

  /* Keep both scenario labels untruncated next to the pause toggle;
     right padding shifts the icon off the card's rounded corner */
  .tbox-fleet-pause-btn {
    width: 2.25rem;
    padding-right: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-fleet-monitor .tbox-fleet-svg * {
    animation: none !important;
    transition: none !important;
  }

  /* Hide nonfunctional controls when animation is disabled */
  .tbox-fleet-stages {
    display: none;
  }
}

/* ── End Fleet Operations monitor ── */

/* CI/CD platform badges ── automation page */
.tbox-ah-cicd-platforms {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-lg);
  margin: var(--space-xl) auto 0;
  flex-wrap: wrap;
}

.tbox-ah-cicd-platform {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm-mid) 1.25rem;
  border-radius: var(--radius-md);
  background: var(--surface-base);
  border: 1.5px solid var(--border-light);
  box-shadow: var(--shadow-sm);
  transition: border-color var(--ease-base), box-shadow var(--ease-base);
  position: relative;
  overflow: hidden;
}

.tbox-ah-cicd-platform::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 3px;
  background: var(--brand-primary);
  opacity: 0;
  transition: opacity var(--ease-base);
}

.tbox-ah-cicd-platform:hover {
  border-color: var(--focus-ring);
  box-shadow: var(--shadow-md);
}

.tbox-ah-cicd-platform:hover::before { opacity: 1; }

.tbox-ah-cicd-platform:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-ah-cicd-platform__name {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1;
  white-space: nowrap;
}

@media (width <= 600px) {
  .tbox-ah-cicd-platforms { gap: var(--space-md); }
  .tbox-ah-cicd-platform { padding: 0.55rem 1rem; }
  .tbox-ah-cicd-platform__name { font-size: var(--fs-sm); }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-ah-cicd-platform { transition: none; }
  .tbox-ah-cicd-platform:hover { transform: none; }
}

/* Per-platform accent colors for CI/CD chips */
.tbox-ah-cicd-platform[data-platform="github-actions"] { --_platform-color: var(--color-slate); }
.tbox-ah-cicd-platform[data-platform="gitlab-ci"] { --_platform-color: var(--brand-cta); }
.tbox-ah-cicd-platform[data-platform="bitbucket"] { --_platform-color: var(--brand-primary-light); }
.tbox-ah-cicd-platform[data-platform="jenkins"] { --_platform-color: var(--color-teal); }
.tbox-ah-cicd-platform[data-platform="circleci"] { --_platform-color: var(--success); }

.tbox-ah-cicd-platform[data-platform]::before {
  background: var(--_platform-color);
  opacity: 0.6;
}

.tbox-ah-cicd-platform[data-platform]:hover::before { opacity: 1; }

.tbox-ah-cicd-platform[data-platform] {
  background: color-mix(in oklch, var(--_platform-color) 6%, var(--surface-base));
  border-color: color-mix(in oklch, var(--_platform-color) 20%, var(--border-light));
}

.tbox-ah-cicd-platform[data-platform]:hover {
  border-color: color-mix(in oklch, var(--_platform-color) 50%, var(--border-light));
}

:root[data-theme="dark"] .tbox-ah-cicd-platform[data-platform] {
  background: color-mix(in oklch, var(--_platform-color) 8%, transparent);
  border-color: color-mix(in oklch, var(--_platform-color) 22%, rgb(255 255 255 / 12%));
}

/* CI/CD section: single-column compatibility proof */

.tbox-split-layout--cicd {
  grid-template-columns: minmax(0, 760px);
  align-items: center;
  max-width: 760px;
}

.tbox-split-layout--cicd .tbox-split-layout__visual {
  position: static;
}

.tbox-split-layout--cicd .tbox-section__heading {
  text-align: left;
}

.tbox-split-layout--cicd .tbox-section__heading::after {
  left: 0;
  transform: none;
}

.tbox-split-layout--cicd .tbox-section__desc {
  text-align: left;
}

.tbox-split-layout--cicd .tbox-ah-cicd-platforms {
  justify-content: flex-start;
}

@media (width <= 900px) {
  .tbox-split-layout--cicd {
    grid-template-columns: 1fr;
  }

  .tbox-split-layout--cicd .tbox-section__heading {
    text-align: center;
  }

  .tbox-split-layout--cicd .tbox-section__heading::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .tbox-split-layout--cicd .tbox-section__desc {
    text-align: center;
  }

  .tbox-split-layout--cicd .tbox-ah-cicd-platforms {
    justify-content: center;
  }
}

/* ── App Hosting Automation: Deploy Pipeline layout ── */
.tbox-ah-deploy-pipeline {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0;
  margin: 2rem 0;
}

.tbox-ah-deploy-pipeline__step {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  text-align: center;
  transition: border-color var(--ease-base), box-shadow var(--ease-base);
}

.tbox-ah-deploy-pipeline__step:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}

.tbox-ah-deploy-pipeline__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  /* WCAG AA: white on vivid brand-primary is too low here; deeper blue lifts contrast. */
  background: var(--brand-primary-dark);
  color: var(--text-inverse);
  border-radius: 50%;
  font-size: var(--fs-xs);
  font-weight: 700;
  margin: 0 auto 0.75rem;
}

.tbox-ah-deploy-pipeline__title {
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.375rem;
}

.tbox-ah-deploy-pipeline__desc {
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}

.tbox-ah-deploy-pipeline__arrow {
  color: var(--brand-primary);
  padding: 0 0.5rem;
}

.tbox-ah-deploy-pipeline__arrow > .material-symbols-outlined {
  display: none;
}

@media (width <= 768px) {
  .tbox-ah-deploy-pipeline {
    grid-template-columns: 1fr;
  }

  .tbox-ah-deploy-pipeline__arrow {
    text-align: center;
  }

  .tbox-ah-deploy-pipeline__arrow .material-symbols-outlined {
    display: none;
  }

  .tbox-ah-deploy-pipeline__arrow::after {
    display: none;
  }
}

/* ── App Hosting Automation: IaC split + code manifest ── */
.tbox-ah-iac-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  margin-top: 1.5rem;
}
@media (width <= 900px) {
  .tbox-ah-iac-split { grid-template-columns: 1fr; }
}
/* Manifest variant: dark code surface with filename bar. */
.tbox-code-block-wrap.tbox-code-block-wrap--manifest {
  background: var(--gray-950);
  border: 1px solid var(--border-mid);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.tbox-code-block-wrap--manifest .tbox-code-block__bar {
  padding: 0.625rem 1rem;
  background: var(--surface-glass-05);
  border-bottom: 1px solid var(--border-mid);
  font-size: var(--fs-2xs); color: var(--text-tertiary);
}
.tbox-code-block.tbox-code-block--manifest {
  padding: 1.25rem 1.5rem;
  font-size: var(--fs-xs); line-height: 1.7;
  color: var(--text-on-dark, var(--gray-200));
  background: var(--gray-950);
}

/* stylelint-disable no-duplicate-selectors -- route polish intentionally layers over earlier automation base selectors. */
/* App Hosting automation polish */
.tbox-hero-v3--automation .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.46fr);
  gap: clamp(1.75rem, 4.5vw, 3.75rem);
  align-items: center;
  max-width: min(1160px, 92vw);
  text-align: left;
}

.tbox-hero-v3--automation .tbox-hero-v3__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
  min-width: 0;
}

.tbox-hero-v3--automation .tbox-hero-v3__title,
.tbox-hero-v3--automation .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

.tbox-hero-v3--automation .tbox-hero-v3__title {
  max-width: 14.5ch;
}

.tbox-hero-v3--automation .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
}

.tbox-hero-v3--automation .tbox-hero-v3__panel {
  position: relative;
  display: grid;
  gap: var(--space-md);
  overflow: hidden;
  padding: clamp(1rem, 2.1vw, 1.35rem);
  border: 1px solid var(--text-inverse-18);
  border-radius: var(--radius-md);
  background: var(--brand-primary-deep);
  box-shadow: 0 1px 0 var(--text-inverse-14) inset;
  color: var(--text-inverse);
}

.tbox-hero-v3--automation .tbox-hero-v3__panel::before {
  display: none;
}

.tbox-hero-v3--automation .tbox-hero-v3__panel > * {
  position: relative;
  z-index: 1;
}

.tbox-hero-v3--automation .tbox-hero-v3__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: color-mix(in srgb, var(--text-inverse) 82%, transparent);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tbox-hero-v3--automation .tbox-hero-v3__panel-head .material-symbols-outlined {
  color: var(--brand-cta);
  font-size: 20px;
}

.tbox-hero-v3--automation .tbox-hero-v3__ledger {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
}

.tbox-hero-v3--automation .tbox-hero-v3__ledger div {
  display: grid;
  gap: 0.15rem;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--text-inverse-12);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-inverse) 7%, transparent);
}

.tbox-hero-v3--automation .tbox-hero-v3__ledger dt {
  margin: 0;
  color: color-mix(in srgb, var(--text-inverse) 58%, transparent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tbox-hero-v3--automation .tbox-hero-v3__ledger dd {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.tbox-hero-v3--automation .tbox-hero-v3__flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
}

.tbox-hero-v3--automation .tbox-hero-v3__flow span {
  position: relative;
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-xs);
  border: 1px solid var(--text-inverse-14);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-inverse) 6%, transparent);
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
}

.tbox-hero-v3--automation .tbox-hero-v3__flow span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(var(--space-xs) * -0.65);
  width: 0.45rem;
  height: 1px;
  background: var(--brand-cta);
}

#compatible-ci-cd-platforms.tbox-band--code {
  background: var(--gray-950);
}

#content #compatible-ci-cd-platforms.tbox-band--code .tbox-section__heading {
  color: var(--text-on-dark);
}

.tbox-split-layout--cicd {
  grid-template-columns: minmax(0, 760px);
  gap: clamp(1.75rem, 4vw, 4rem);
  max-width: 760px;
}

.tbox-ah-cicd-platforms {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  justify-content: stretch;
  width: 100%;
  margin-top: var(--space-xl);
}

.tbox-ah-cicd-platform {
  justify-content: flex-start;
  min-height: 46px;
  padding: 0.72rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
  border-radius: var(--radius-sm-plus);
  box-shadow: none;
}

.tbox-ah-cicd-platform::before {
  display: none;
}

.tbox-ah-cicd-platform::after {
  content: "";
  width: 0.48rem;
  height: 0.48rem;
  margin-left: auto;
  border-radius: var(--radius-cap);
  background: var(--_platform-color, var(--brand-primary));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--_platform-color, var(--brand-primary)) 15%, transparent);
}

.tbox-ah-cicd-platform:hover {
  border-color: color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
  box-shadow: none;
}

.tbox-ah-cicd-platform__name {
  line-height: 1.2;
}

.tbox-split-layout--cicd .tbox-hero-terminal {
  border-color: color-mix(in srgb, var(--brand-primary-light) 26%, rgb(255 255 255 / 14%));
  box-shadow: 0 14px 32px rgb(2 6 23 / 24%);
}

.tbox-deploy-flow-embed {
  max-width: 1040px;
  padding: clamp(0.6rem, 1.4vw, 0.95rem);
  border: 1px solid color-mix(in srgb, var(--border-light) 82%, var(--brand-primary) 18%);
  border-radius: var(--radius-lg);
  background: var(--surface-base);
  box-shadow: var(--shadow-technical-panel);
}

.tbox-deploy-flow-embed .tbox-ui-proof__video {
  border-radius: var(--radius-md);
  border-color: color-mix(in srgb, var(--border-light) 80%, var(--brand-primary) 20%);
  background: var(--gray-950);
}

.tbox-deploy-flow-embed__caption {
  max-width: var(--prose-measure-default);
  margin-inline: auto;
}

.tbox-ah-deploy-pipeline {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  position: relative;
  margin: clamp(1.75rem, 3vw, 2.5rem) 0;
}

.tbox-ah-deploy-pipeline::before {
  content: "";
  position: absolute;
  top: 2.15rem;
  right: 14%;
  left: 14%;
  height: 1px;
  background: color-mix(in srgb, var(--brand-primary) 34%, var(--border-light));
}

.tbox-ah-deploy-pipeline__step {
  position: relative;
  z-index: 1;
  min-height: 178px;
  padding: 1.35rem 1.25rem 1.45rem;
  border-radius: var(--radius-md);
  box-shadow: none;
  text-align: left;
}

.tbox-ah-deploy-pipeline__step:hover {
  box-shadow: 0 2px 8px rgb(15 23 42 / 8%);
}

.tbox-ah-deploy-pipeline__num {
  width: 34px;
  height: 34px;
  margin-bottom: var(--space-md);
  border: 3px solid var(--surface-base);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--brand-primary) 30%, var(--border-light));
  margin-inline: 0;
}

.tbox-ah-deploy-pipeline__arrow {
  display: none;
}

#how-code-reaches-your-environment .tbox-detail-grid {
  gap: var(--space-lg);
}

#how-code-reaches-your-environment .tbox-detail-card {
  border-radius: var(--radius-md);
  padding: 1.25rem;
}

#define-environments-as-code-automate-the-rest .tbox-ah-iac-split {
  grid-template-columns: minmax(0, 1.04fr) minmax(320px, 0.96fr);
  gap: clamp(1.5rem, 3vw, 2.5rem);
}

#define-environments-as-code-automate-the-rest .tbox-ah-iac-split > *,
#define-environments-as-code-automate-the-rest .tbox-code-block-wrap--manifest {
  min-width: 0;
}

#define-environments-as-code-automate-the-rest .tbox-code-block-wrap--manifest {
  border-color: color-mix(in srgb, var(--brand-primary-light, var(--brand-primary)) 24%, var(--border-mid));
  border-radius: var(--radius-md);
  box-shadow: 0 16px 34px rgb(2 6 23 / 16%);
}

#define-environments-as-code-automate-the-rest .tbox-code-block-wrap--manifest .tbox-code-block__bar {
  padding: 0.75rem 1rem;
  color: color-mix(in srgb, var(--text-on-dark) 78%, var(--brand-primary-light, var(--brand-primary)) 22%);
}

#define-environments-as-code-automate-the-rest .tbox-code-block.tbox-code-block--manifest {
  max-height: 520px;
}

#define-environments-as-code-automate-the-rest .tbox-info-block {
  display: grid;
  gap: var(--space-md);
}

#define-environments-as-code-automate-the-rest .tbox-info-block .tbox-pillar {
  padding: 1.35rem 1.3rem;
  border-radius: var(--radius-md);
  box-shadow: none;
}

#define-environments-as-code-automate-the-rest .tbox-info-block .tbox-pillar__accent {
  display: none;
}

#define-environments-as-code-automate-the-rest .tbox-bento-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-md);
  align-items: center;
  border-radius: var(--radius-md);
  background: var(--brand-cta);
}

:root[data-theme="dark"] .tbox-ah-cicd-platform[data-platform] {
  background: color-mix(in srgb, var(--_platform-color) 9%, var(--surface-card));
  border-color: color-mix(in srgb, var(--_platform-color) 26%, rgb(255 255 255 / 14%));
}

:root[data-theme="dark"] .tbox-deploy-flow-embed {
  background: var(--surface-card);
  border-color: color-mix(in srgb, var(--brand-primary-light) 22%, rgb(255 255 255 / 14%));
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-ah-deploy-pipeline::before {
  background: color-mix(in srgb, var(--brand-primary-light) 42%, rgb(255 255 255 / 18%));
}

:root[data-theme="dark"] .tbox-ah-deploy-pipeline__num {
  border-color: var(--surface-card);
}

@media (width <= 900px) {
  .tbox-hero-v3--automation .tbox-hero-v3__inner,
.tbox-split-layout--cicd,
#define-environments-as-code-automate-the-rest .tbox-ah-iac-split {
    grid-template-columns: 1fr;
  }

  .tbox-hero-v3--automation .tbox-hero-v3__inner {
    text-align: center;
  }

  .tbox-hero-v3--automation .tbox-hero-v3__copy {
    justify-items: center;
  }

  .tbox-hero-v3--automation .tbox-hero-v3__title,
.tbox-hero-v3--automation .tbox-hero-v3__subtitle {
    margin-inline: auto;
  }

  .tbox-ah-deploy-pipeline {
    grid-template-columns: 1fr;
  }

  .tbox-ah-deploy-pipeline::before {
    top: 2.5rem;
    bottom: 2.5rem;
    left: 1rem;
    right: auto;
    width: 1px;
    height: auto;
  }

  .tbox-ah-deploy-pipeline__step {
    min-height: auto;
    padding-left: 3rem;
    text-align: left;
  }

  .tbox-ah-deploy-pipeline__num {
    position: absolute;
    top: 1.25rem;
    left: -0.05rem;
    margin: 0;
  }
}

@media (width <= 640px) {
  .tbox-ah-cicd-platforms,
#how-code-reaches-your-environment .tbox-detail-grid,
#define-environments-as-code-automate-the-rest .tbox-bento-cta-card {
    grid-template-columns: 1fr;
  }

  .tbox-hero-v3--automation .tbox-hero-v3__flow span::after {
    display: none;
  }

  .tbox-hero-v3--automation .tbox-hero-proof span {
    display: block;
    padding-block: var(--space-sm);
    text-align: left;
  }

  .tbox-hero-v3--automation .tbox-hero-proof strong {
    display: block;
    margin-bottom: var(--space-2xs);
  }

  .tbox-hero-v3--automation .tbox-hero-v3__panel {
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  .tbox-hero-v3--automation .tbox-hero-v3__panel-head {
    justify-content: flex-start;
    font-size: var(--fs-2xs);
  }

  .tbox-hero-v3--automation .tbox-hero-v3__ledger div {
    grid-template-columns: minmax(0, 0.65fr) minmax(0, 1fr);
    align-items: center;
    gap: var(--space-sm);
    padding: 0.65rem 0.75rem;
  }

  .tbox-hero-v3--automation .tbox-hero-v3__ledger :where(dt, dd) {
    font-size: var(--fs-2xs);
  }

  .tbox-hero-v3--automation .tbox-hero-v3__ledger dd {
    text-align: right;
  }

  .tbox-hero-v3--automation .tbox-hero-v3__flow span {
    min-height: 2rem;
    font-size: var(--fs-2xs);
  }

  .tbox-deploy-flow-embed {
    padding: var(--space-sm);
  }

  #define-environments-as-code-automate-the-rest .tbox-code-block.tbox-code-block--manifest {
    padding: 1rem;
    font-size: var(--fs-2xs);
  }
}
/* stylelint-enable no-duplicate-selectors */


/* ============================================
   App Hosting Bento Grid — bento-repack variant
   Uses data-bento-size for layout via the shared 12-col dense-pack system.
   Visual styles use .tbox-ah-bento-hero-card, .tbox-ah-bento-databases-card,
   .tbox-ah-bento-auto-card class hooks.
   ============================================ */

/* Hero card visual styles */
.tbox-ah-bento-hero-card {
  background: var(--gradient-brand-primary);
  border: none;
  padding: 44px 48px;
  min-height: 240px;
  align-content: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Databases card */
.tbox-ah-bento-databases-card {
  display: block;
  background: var(--surface-subtle);
}

/* Auto card */
.tbox-ah-bento-auto-card {
  background: var(--surface-subtle);
}

/* CTA card: full-width flex row in both flat and topology bento grids */
:is(.tbox-standard-features-grid--bento-repack > .tbox-bento-cta-card[data-bento-size="full"], .tbox-topology-grid > .tbox-bento-cta-card[data-bento-size="full"], .tbox-topology-grid > .tbox-topology-grid__cards > .tbox-bento-cta-card[data-bento-size="full"]) {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
  background: var(--brand-cta);
}

/* ─── CTA action card ─── */
:is(
  .tbox-standard-features-grid--bento-repack > :where(.tbox-bento-cta-card[data-bento-size="full"]:hover),
  .tbox-topology-grid > :where(.tbox-bento-cta-card[data-bento-size="full"]:hover),
  .tbox-topology-grid > .tbox-topology-grid__cards > :where(.tbox-bento-cta-card[data-bento-size="full"]:hover)
) {
  background: var(--brand-cta-active);
}

.tbox-ah-bento-hero-card::before,
.tbox-ah-bento-hero-card::after {
  content: none;
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-ah-bento-hero-card .tbox-card__icon {
  width: 33px;
  height: 33px;
  border-radius: var(--radius-sm-plus);
  background: rgb(255 255 255 / 12%);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow:
    0 2px 8px rgb(0 0 0 / 12%),
    inset 0 1px 0 rgb(255 255 255 / 8%);
}

.tbox-ah-bento-hero-card :is(h3, h4, h5) {
  font-size: 1.6875rem; /* between --fs-heading-md and --fs-card-price */
  color: var(--text-inverse);
  margin-bottom: 14px;
}

/* stylelint-disable-next-line no-descending-specificity */
#content .tbox-ah-bento-hero-card p {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  font-weight: var(--fw-normal);
  max-width: 520px;
}

.tbox-ah-bento-hero__label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: rgb(255 255 255 / 80%);
  letter-spacing: var(--ls-wide);
}

.tbox-ah-bento-hero__cloudlet-def {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-medium);
  color: rgb(226 232 240 / 85%);
  background: rgb(255 255 255 / 7%);
  border: 1px solid rgb(255 255 255 / 10%);
  border-radius: 8px;
  padding: 7px 14px;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-wide);
  margin-bottom: 0;
}

#content .tbox-ah-bento-hero-card .tbox-ah-bento-hero__label,
#content .tbox-ah-bento-hero-card .tbox-ah-bento-hero__cloudlet-def {
  color: var(--text-on-dark);
}

.tbox-ah-bento-hero-card:hover {
  background: var(--gradient-brand-primary);
  transform: none;
}

/* ─── Bento Hero: Automatic Scaling layout ─── */
.tbox-ah-bento-hero-layout {
  display: grid;
  grid-template-columns: 35% 1fr;
  gap: var(--space-lg) var(--space-2xl);
  align-items: center;
  width: 100%;
}

.tbox-ah-bento-hero-layout__text {
  min-width: 0;
}

.tbox-ah-bento-hero-layout__visual {
  min-width: 0;
  position: relative;
}

.tbox-ah-bento-hero-layout__footer {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xl);
}

/* ─── Hero card: icon + label eyebrow ─── */
.tbox-ah-bento-hero__icon-title {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}

.tbox-ah-bento-hero__title {
  font-size: 1.6875rem; /* between --fs-heading-md and --fs-card-price */
  font-weight: var(--fw-bold);
  color: var(--text-inverse);
  line-height: var(--lh-tight);
  margin: 0 0 14px;
  padding-bottom: 0;
}

.tbox-ah-bento-hero__title .accent {
  color: var(--brand-highlight, #F0C94B);
}

.tbox-ah-bento-hero__desc {
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
  color: rgb(226 232 240 / 78%);
  margin: 0 0 18px;
}

.tbox-ah-bento-hero__steps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 0;
}

.tbox-ah-bento-hero__step {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  border-radius: 6px;
  background: rgb(255 255 255 / 8%);
  border: 1px solid rgb(255 255 255 / 6%);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: rgb(255 255 255 / 78%);
  letter-spacing: var(--ls-wide);
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-ah-bento-hero__steps > * svg {
  width: 12px;
  height: 12px;
  opacity: 0.7;
}

.tbox-ah-bento-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  text-decoration: none;
  letter-spacing: var(--ls-wide);
  transition: color 0.2s ease, gap 0.2s ease, opacity 0.2s ease;
}

.tbox-ah-bento-hero__link:hover {
  opacity: 0.85;
  gap: 0.45em;
  text-decoration: none;
}

.tbox-ah-bento-hero__link:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

/* ─── Bento hero responsive ─── */
@media (width <= 1024px) {
  .tbox-ah-bento-hero-layout {
    grid-template-columns: 1fr;
    gap: var(--space-lg-plus);
  }

  .tbox-ah-bento-hero-layout__visual {
    width: 100%;
    max-width: 400px;
  }

  .tbox-ah-bento-hero-layout__footer {
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: flex-start;
  }

  .tbox-ah-bento-hero__title { font-size: var(--fs-heading-sm); }
}

@media (width <= 600px) {
  .tbox-ah-bento-hero__title { font-size: var(--fs-xl); }
  .tbox-ah-bento-hero__desc { font-size: var(--fs-sm); }
  .tbox-ah-bento-hero-layout {
    gap: var(--space-md);
  }
  .tbox-ah-bento-hero-layout__visual {
    max-width: 100%;
  }
  .tbox-ah-bento-hero-layout__footer {
    align-items: flex-start;
    flex-direction: column;
    gap: var(--space-sm);
  }
  .tbox-ah-bento-hero__steps {
    gap: 6px;
  }
  .tbox-ah-bento-hero__step {
    min-height: 2.75rem;
    padding: var(--space-sm) var(--space-md);
  }
}

/* ─── Stack pills ─── */
.tbox-ah-stack-pills {
  display: none;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
  grid-column: 1 / -1;
}

.tbox-ah-stack-pills__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  min-height: 2.75rem;
  padding: 0.55rem var(--space-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-secondary);
  transition: border-color var(--ease-fast), background var(--ease-fast);
}

.tbox-ah-stack-pills__pill:hover {
  border-color: var(--brand-primary-30);
  background: var(--brand-primary-12);
}

.tbox-ah-stack-pills__pill:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-ah-stack-pills__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tbox-ah-stack-pills__dot--java { background: var(--brand-cta); }
.tbox-ah-stack-pills__dot--node { background: var(--success); }
.tbox-ah-stack-pills__dot--php { background: var(--color-teal); }
.tbox-ah-stack-pills__dot--python { background: var(--brand-primary-dark); }
.tbox-ah-stack-pills__dot--ruby { background: var(--color-red); }
.tbox-ah-stack-pills__dot--dotnet { background: var(--color-slate); }
.tbox-ah-stack-pills__dot--go { background: var(--brand-primary); }
.tbox-ah-stack-pills__dot--docker { background: var(--brand-primary); }
.tbox-ah-stack-pills__dot--k8s { background: var(--brand-primary-deep); }

/* ─── Database card: wide layout with mode chips ─── */
.tbox-ah-bento-databases-card:hover {
  background: var(--surface-base);
}

.tbox-ah-databases-layout {
  display: flex;
  gap: var(--space-2xl);
  align-items: flex-start;
  flex-wrap: wrap;
}

.tbox-ah-databases-layout__main {
  flex: 1;
  min-width: 240px;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs) var(--space-md);
  align-items: start;
}

.tbox-ah-databases-layout__main :is(.icon, .tbox-card__icon) {
  grid-column: 1;
  grid-row: 1;
  align-self: center;
  margin: 0;
}

.tbox-ah-databases-layout__main :is(h3, h4, h5) {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0;
}

/* ─── Portability callout (still in use on /app-hosting/) ─── */
.tbox-callout--icon {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 960px;
  margin: 0 auto var(--space-lg);
  padding: var(--space-md-plus) var(--space-lg);
  background: var(--brand-primary-bg);
  border: 1px solid var(--brand-primary-bg-18);
  border-radius: var(--radius-md, var(--radius-sm-plus));
}

.tbox-callout__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  color: var(--brand-primary);
}

.tbox-callout__text {
  min-width: 0;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

@media (width <= 768px) {
  .tbox-callout--icon {
    margin-left: var(--space-xl);
    margin-right: var(--space-xl);
  }
}

/*
 * Brand-tinted callout — tone-only modifier. Use when a callout should pick
 * up brand-primary tinting instead of the default neutral surface. Spacing
 * is the layout's job and is not included here.
 */
.tbox-callout--brand {
  align-items: flex-start;
  border-radius: var(--radius-md);
  border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border-light) 66%);
  background: color-mix(in srgb, var(--surface-base) 72%, var(--brand-primary-bg) 28%);
}

/* ─── Responsive: CTA column stack at mobile ─── */
@media (width <= 900px) {
  .tbox-standard-features-grid--bento-repack > .tbox-bento-cta-card[data-bento-size="full"] {
    flex-direction: column;
    align-items: flex-start;
  }
  .tbox-topology-grid > .tbox-bento-cta-card[data-bento-size="full"] {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Mobile order: hero first,
CTA second (conversion UX) */
@media (width <= 900px) {
  .tbox-ah-feature-grid-section .tbox-standard-features-grid > .tbox-ah-bento-hero-card { order: -2; }
  .tbox-ah-feature-grid-section .tbox-standard-features-grid > .tbox-bento-cta-card     { order: -1; }
}

#fit-section.tbox-decision-section,
#trust-section.tbox-trust-section--slim,
#faq-section.tbox-faq-section {
  padding-top: clamp(3rem, 4vw, 4rem);
}

.tbox-ah-feature-grid-section,
.tbox-page-content > section.tbox-section.tbox-ah-feature-grid-section {
  --tbox-extras-checklist-padding-top: var(--space-lg);
  padding-top: clamp(2.5rem, 3.5vw, 3.25rem);
  padding-bottom: clamp(2.75rem, 3.8vw, 3.5rem);
}

#faq-section.tbox-faq-section {
  padding-bottom: clamp(2.5rem, 3.5vw, 3.25rem);
}

.tbox-ah-feature-grid-section .tbox-standard-features-grid--bento-repack {
  margin-top: clamp(1rem, 1.8vw, 1.5rem);
  column-gap: clamp(0.75rem, 1.4vw, 1.1rem);
  row-gap: clamp(0.75rem, 1.5vw, 1.15rem);
}

.tbox-ah-feature-grid-section .tbox-card--feature[data-bento-size="sm"] {
  padding: var(--space-xl);
}

.tbox-ah-feature-grid-section .tbox-card--feature[data-bento-size="md"] {
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
}

.tbox-ah-feature-grid-section .tbox-ui-proof--gallery {
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(0.75rem, 1.4vw, 1.05rem);
  margin-top: clamp(0.5rem, 1vw, 0.75rem);
  margin-bottom: 0;
  padding: clamp(0.75rem, 1.5vw, 1.1rem);
}

.tbox-ah-feature-grid-section .tbox-ui-proof--gallery .tbox-ui-proof__item:nth-child(1) .tbox-ui-proof__image {
  max-height: 420px;
}

.tbox-ah-feature-grid-section .tbox-ui-proof__expand {
  padding: 0.65rem 0.95rem;
}

#fit-section.tbox-decision-section {
  padding-bottom: clamp(2.75rem, 4vw, 4rem);
}

#fit-section .tbox-decision-help {
  margin-top: var(--space-md-plus);
  text-align: center;
}

.tbox-paas-vs-vps-summary-grid {
  margin-top: clamp(1rem, 1.6vw, 1.5rem);
}

.tbox-paas-vps-hero.tbox-hero-v3--compact {
  min-height: clamp(24rem, 34vw, 30rem);
  padding-block: clamp(4.25rem, 6.4vw, 6rem);
}

.tbox-paas-vps-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(340px, 0.62fr);
  gap: clamp(2.5rem, 5vw, 4.5rem);
  align-items: center;
  max-width: min(1120px, 92vw);
  text-align: left;
}

.tbox-paas-vps-hero__copy {
  max-width: 720px;
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

.tbox-paas-vps-hero .tbox-hero-v3__title,
.tbox-paas-vps-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
  text-align: left;
}

.tbox-paas-vps-hero .tbox-hero-v3__title {
  max-width: 16ch;
}

.tbox-paas-vps-hero .tbox-hero-v3__title em {
  white-space: nowrap;
}

.tbox-paas-vps-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
}

.tbox-paas-vps-hero__cta-row {
  justify-content: flex-start;
  margin-top: 0;
}

.tbox-paas-vps-hero__panel {
  --tbox-hero-panel-border: color-mix(in oklch, var(--surface-base) 20%, transparent);
  --tbox-hero-panel-bg: color-mix(in oklch, var(--surface-dark) 72%, var(--brand-primary-dark) 28%);
  --tbox-hero-panel-shadow: 0 1px 0 color-mix(in oklch, var(--surface-base) 14%, transparent) inset;

  padding: clamp(0.9rem, 1.6vw, 1.15rem);
}

.tbox-paas-vps-hero__rail {
  display: grid;
  gap: var(--space-xs);
}

.tbox-paas-vps-hero__choice {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-md);
  align-items: center;
  min-height: 5.1rem;
  padding: var(--space-md);
  border: 1px solid color-mix(in oklch, var(--surface-base) 20%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--surface-base) 8%, transparent);
  color: var(--text-inverse);
}

.tbox-paas-vps-hero__choice > .material-symbols-outlined {
  display: inline-grid;
  place-items: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--radius-sm);
  font-size: 1.45rem;
  font-variation-settings: 'FILL' 1;
  background: color-mix(in oklch, var(--surface-base) 14%, transparent);
}

.tbox-paas-vps-hero__choice strong,
.tbox-paas-vps-hero__choice span {
  display: block;
}

.tbox-paas-vps-hero__choice strong {
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.tbox-paas-vps-hero__choice div > span {
  margin-top: 0.1rem;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: color-mix(in oklch, var(--text-inverse) 78%, transparent);
}

.tbox-paas-vps-hero__choice--app {
  border-color: color-mix(in oklch, var(--brand-primary) 45%, transparent);
}

.tbox-paas-vps-hero__choice--vps {
  border-color: color-mix(in oklch, var(--brand-cta) 42%, transparent);
}

.tbox-paas-vps-hero__divider {
  justify-self: center;
  padding: 0.15rem 0.5rem;
  border: 1px solid color-mix(in oklch, var(--surface-base) 18%, transparent);
  border-radius: var(--radius-2xs);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: 0;
  text-transform: uppercase;
  color: color-mix(in oklch, var(--text-inverse) 78%, transparent);
  background: color-mix(in oklch, var(--surface-base) 7%, transparent);
}

.tbox-paas-vps-hero__note {
  margin: var(--space-md) 0 0;
  padding-top: var(--space-md);
  border-top: 1px solid color-mix(in oklch, var(--surface-base) 18%, transparent);
  color: color-mix(in oklch, var(--text-inverse) 82%, transparent);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  text-align: left;
}

/* stylelint-disable no-descending-specificity -- route-scoped buyer-guide layout groups related selectors for maintainability */
.tbox-paas-compare {
  position: relative;
  background: var(--surface-subtle);
}

.tbox-paas-compare .tbox-paas-compare__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(300px, 0.8fr);
  gap: clamp(1.25rem, 2.8vw, 2.5rem);
  align-items: start;
  max-width: 1100px;
  margin-inline: auto;
}

/* .tbox-paas-compare__eyebrow / .tbox-paas-fit__eyebrow removed (designcheck) */

.tbox-paas-compare .tbox-section__heading {
  text-align: left;
}

.tbox-paas-compare__intro-panel {
  margin: 0;
  padding: clamp(1rem, 1.8vw, 1.35rem);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in oklch, var(--brand-primary) 18%, var(--border-light));
  background: var(--surface-base);
  box-shadow: 0 1px 0 color-mix(in oklch, var(--gray-950) 5%, transparent);
}

.tbox-paas-compare__panel-title {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.tbox-paas-compare__signal-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-md);
}

.tbox-paas-compare__signal-list li {
  margin: 0;
  padding-top: var(--space-md);
  border-top: 1px solid color-mix(in oklch, var(--brand-primary) 14%, var(--border-light));
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-paas-compare__signal-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.tbox-paas-compare__signal-list strong {
  color: var(--text-primary);
}

.tbox-paas-compare__proof-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.tbox-paas-compare__proof-row span {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2.25rem;
  padding: 0.4rem 0.65rem;
  border: 1px solid color-mix(in oklch, var(--brand-primary) 13%, var(--border-light));
  border-radius: var(--radius-sm);
  background: color-mix(in oklch, var(--surface-base) 82%, transparent);
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.tbox-paas-compare__proof-row .material-symbols-outlined {
  font-size: 1rem;
  color: var(--brand-primary);
}

.tbox-paas-compare-group {
  max-width: 1100px;
  margin: clamp(3rem, 4.5vw, 4rem) auto 0;
}

.tbox-paas-compare-group + .tbox-paas-compare-group {
  padding-top: clamp(2.5rem, 4vw, 3.5rem);
  border-top: 1px solid color-mix(in oklch, var(--brand-primary) 12%, var(--border-light));
}

.tbox-paas-compare-group__heading {
  margin-bottom: var(--space-lg);
  text-align: center;
}

.tbox-paas-compare-group__labels,
.tbox-paas-compare-row {
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
}

.tbox-paas-compare-group__labels {
  margin-bottom: var(--space-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.tbox-paas-compare-row {
  align-items: stretch;
  padding: 0;
}

.tbox-paas-compare-row + .tbox-paas-compare-row {
  margin-top: var(--space-sm);
  padding-top: var(--space-sm);
  border-top: 1px solid color-mix(in oklch, var(--brand-primary) 10%, var(--border-light));
}

.tbox-paas-compare-row__capability,
.tbox-paas-compare-cell {
  min-width: 0;
  height: 100%;
  border-radius: var(--radius-sm-plus);
  padding: clamp(0.9rem, 1.6vw, 1.2rem);
}

.tbox-paas-compare-row__capability {
  padding-left: 0;
  padding-right: var(--space-md);
  background: transparent;
  border: 0;
}

.tbox-paas-compare-row__capability :is(h3, h4) {
  display: flex;
  align-items: center;
  gap: 0.35em;
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.tbox-paas-compare-row__capability p,
.tbox-paas-compare-cell p {
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-paas-compare-cell {
  position: relative;
  border: 1px solid transparent;
}

.tbox-paas-compare-cell--app {
  background: color-mix(in oklch, var(--brand-primary) 5%, var(--surface-base));
  border-color: color-mix(in oklch, var(--brand-primary) 18%, var(--border-light));
}

.tbox-paas-compare-cell--vps {
  background: color-mix(in oklch, var(--brand-cta) 5%, var(--surface-base));
  border-color: color-mix(in oklch, var(--brand-cta) 18%, var(--border-light));
}

.tbox-paas-compare-cell__label {
  display: none;
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
}

.tbox-paas-fit {
  background: color-mix(in oklch, var(--brand-primary) 4%, var(--surface-muted));
}

.tbox-paas-fit__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: clamp(1.25rem, 2.8vw, 2.5rem);
  align-items: end;
}

.tbox-paas-fit__mini-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.tbox-paas-fit__mini-card {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg);
  border-radius: var(--radius-lg);
  border: 1px solid var(--border-light);
  background: var(--surface-base);
}

.tbox-paas-fit__mini-card span {
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.tbox-paas-fit__mini-card strong {
  color: var(--text-primary);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.tbox-paas-fit__mini-card--app {
  border-color: color-mix(in oklch, var(--brand-primary) 20%, var(--border-light));
  background: color-mix(in oklch, var(--brand-primary) 6%, var(--surface-base));
}

.tbox-paas-fit__mini-card--vps {
  border-color: color-mix(in oklch, var(--brand-cta) 20%, var(--border-light));
  background: color-mix(in oklch, var(--brand-cta) 7%, var(--surface-base));
}

.tbox-paas-fit .tbox-standard-features-grid--decision {
  margin-top: clamp(1.5rem, 2.8vw, 2.25rem);
}

.tbox-paas-fit__callout {
  margin-top: var(--space-xl);
  margin-bottom: var(--space-sm);
  background: color-mix(in oklch, var(--brand-primary) 8%, var(--surface-base));
}

@media (width <= 1024px) {
  .tbox-paas-vps-hero .tbox-hero-v3__inner,
.tbox-paas-compare .tbox-paas-compare__intro,
.tbox-paas-fit__intro {
    grid-template-columns: 1fr;
  }

  .tbox-paas-vps-hero__panel {
    max-width: 680px;
  }
}

@media (width > 1024px) {
  .tbox-paas-compare__intro .tbox-section__heading,
.tbox-paas-compare__intro .tbox-comparison-subtitle,
.tbox-paas-fit__intro:not(.tbox-paas-fit__intro--centered) .tbox-section__heading,
.tbox-paas-fit__intro:not(.tbox-paas-fit__intro--centered) .tbox-section__desc {
    text-align: left;
  }
}

@media (width <= 900px) {
  .tbox-paas-compare-group__labels {
    display: none;
  }

  .tbox-paas-compare-row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .tbox-paas-compare-cell__label {
    display: inline-flex;
  }
}

@media (width <= 700px) {
  .tbox-paas-fit__mini-grid {
    grid-template-columns: 1fr;
  }
}

@media (width <= 600px) {
  .tbox-paas-vps-hero.tbox-hero-v3--compact {
    min-height: auto;
    padding-block: clamp(3rem, 12vw, 4rem);
  }

  .tbox-paas-vps-hero__choice {
    padding: var(--space-md);
  }

  .tbox-paas-vps-hero__choice > .material-symbols-outlined {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1.25rem;
  }

  .tbox-paas-vps-hero__choice strong {
    font-size: var(--fs-md);
  }

  .tbox-paas-compare,
.tbox-paas-fit {
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }

  .tbox-paas-compare-group__heading {
    gap: var(--space-md);
  }
}

:root[data-theme="dark"] .tbox-paas-compare {
  background: var(--surface-base);
}

:root[data-theme="dark"] .tbox-paas-compare .tbox-section__heading,
:root[data-theme="dark"] .tbox-paas-fit .tbox-section__heading {
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-paas-compare__intro-panel,
:root[data-theme="dark"] .tbox-paas-fit__mini-card {
  background: color-mix(in oklch, var(--brand-primary) 5%, var(--surface-subtle));
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-paas-compare__panel-title,
:root[data-theme="dark"] .tbox-paas-compare__signal-list strong,
:root[data-theme="dark"] .tbox-paas-compare-row__capability :is(h3, h4),
:root[data-theme="dark"] .tbox-paas-fit__mini-card strong {
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-paas-compare__signal-list li,
:root[data-theme="dark"] .tbox-paas-compare-row__capability p,
:root[data-theme="dark"] .tbox-paas-compare-cell p,
:root[data-theme="dark"] .tbox-paas-fit__mini-card span {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-paas-compare-group__labels {
  color: var(--text-muted);
}

:root[data-theme="dark"] .tbox-paas-compare__proof-row span {
  background: color-mix(in oklch, var(--surface-subtle) 82%, transparent);
  border-color: color-mix(in oklch, var(--brand-primary) 18%, var(--border-light));
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-paas-compare-group + .tbox-paas-compare-group {
  border-top-color: color-mix(in oklch, var(--brand-primary) 18%, var(--border-light));
}

:root[data-theme="dark"] .tbox-paas-compare-cell--app {
  background: color-mix(in oklch, var(--brand-primary) 10%, var(--surface-subtle));
  border-color: color-mix(in oklch, var(--brand-primary) 24%, var(--border-light));
}

:root[data-theme="dark"] .tbox-paas-compare-cell--vps {
  background: color-mix(in srgb, var(--brand-cta) 10%, var(--surface-subtle));
  border-color: color-mix(in srgb, var(--brand-cta) 22%, var(--border-light));
}

:root[data-theme="dark"] .tbox-paas-fit {
  background: color-mix(in oklch, var(--brand-primary) 8%, var(--surface-subtle));
}

:root[data-theme="dark"] .tbox-paas-fit .tbox-card--consider {
  background: color-mix(in oklch, var(--brand-cta) 10%, var(--surface-subtle));
}

:root[data-theme="dark"] .tbox-paas-fit__callout {
  background: color-mix(in oklch, var(--brand-primary) 10%, var(--surface-subtle));
  border-color: color-mix(in oklch, var(--brand-primary) 20%, var(--border-light));
}
/* stylelint-enable no-descending-specificity */

/* === tbox-paas-matrix — signal comparison table (paas-vs-vps fit-section) === */

.tbox-paas-fit__intro--centered {
  display: block;
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
}

/* Phase 4.4 — collapsible operational checklist on /app-hosting/paas-vs-vps/.
   Wraps the back half of the comparison checklist behind a disclosure so the
   visible page leads with the 6 decisive rows. The summary acts as an inline
   button; the body inherits comparison-row styling because the wrapped groups
   keep their existing classes. */
.tbox-paas-compare-extended {
  margin-top: clamp(1.5rem, 2.5vw, 2.5rem);
  border-top: 1px solid var(--border-light);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}

.tbox-paas-compare-extended__summary {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  cursor: pointer;
  list-style: none;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  color: var(--text-primary);
  transition: background-color 120ms ease-out, border-color 120ms ease-out;
}

.tbox-paas-compare-extended__summary::-webkit-details-marker {
  display: none;
}

.tbox-paas-compare-extended__summary::after {
  content: "▾";
  align-self: flex-end;
  color: var(--text-secondary);
  font-size: 0.85em;
  margin-top: calc(var(--space-2xs) * -1);
}

.tbox-paas-compare-extended[open] > .tbox-paas-compare-extended__summary::after {
  content: "▴";
}

.tbox-paas-compare-extended__summary:hover,
.tbox-paas-compare-extended__summary:focus-visible {
  background: var(--surface-subtle);
  border-color: var(--border-mid);
  outline: none;
}

.tbox-paas-compare-extended__summary strong {
  font-size: 1.05rem;
}

.tbox-paas-compare-extended__summary span {
  color: var(--text-secondary);
  font-size: var(--fs-base);
}

:root[data-theme="dark"] .tbox-paas-compare-extended {
  border-top-color: color-mix(in srgb, var(--surface-base) 14%, transparent);
}

:root[data-theme="dark"] .tbox-paas-compare-extended__summary {
  background: color-mix(in srgb, var(--surface-base) 6%, transparent);
  border-color: color-mix(in srgb, var(--surface-base) 14%, transparent);
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-paas-compare-extended__summary span {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-paas-compare-extended__summary:hover,
:root[data-theme="dark"] .tbox-paas-compare-extended__summary:focus-visible {
  background: color-mix(in srgb, var(--surface-base) 10%, transparent);
  border-color: color-mix(in srgb, var(--surface-base) 22%, transparent);
}

.tbox-paas-matrix {
  --paas-matrix-cols: 1.6fr 1fr 1fr;
  max-width: 940px;
  margin-inline: auto;
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid color-mix(in oklch, var(--brand-primary) 14%, var(--border-light));
  box-shadow: 0 1px 0 color-mix(in oklch, var(--gray-950) 5%, transparent);
  margin-bottom: clamp(1.5rem, 2.5vw, 2rem);
  background: var(--surface-base);
}

.tbox-paas-matrix__header,
.tbox-paas-matrix__row,
.tbox-paas-matrix__cta-row {
  display: grid;
  grid-template-columns: var(--paas-matrix-cols);
}

.tbox-paas-matrix__header {
  background: var(--surface-subtle);
  border-bottom: 1px solid var(--border-light);
}

.tbox-paas-matrix__header-cell {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.tbox-paas-matrix__header-cell--app {
  color: var(--brand-primary);
  background: color-mix(in oklch, var(--brand-primary) 8%, var(--surface-subtle));
}

.tbox-paas-matrix__header-cell--vps {
  color: var(--brand-cta);
  background: color-mix(in oklch, var(--brand-cta) 5%, var(--surface-subtle));
}

.tbox-paas-matrix__header-icon {
  font-size: var(--fs-sm);
  font-variation-settings: 'FILL' 1;
  vertical-align: middle;
  margin-right: 4px;
}

.tbox-paas-matrix__row {
  border-bottom: 1px solid var(--border-light);
}

.tbox-paas-matrix__row:has(+ .tbox-paas-matrix__cta-row) {
  border-bottom: none;
}

.tbox-paas-matrix__row:nth-child(even) {
  background: color-mix(in oklch, var(--surface-subtle) 50%, var(--surface-base));
}

.tbox-paas-matrix__cell {
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: var(--lh-snug);
}

.tbox-paas-matrix__cell--label {
  color: var(--text-primary);
  font-weight: var(--fw-medium);
}

.tbox-paas-matrix__cell--app {
  background: color-mix(in oklch, var(--brand-primary) 4%, transparent);
}

/* stylelint-disable no-descending-specificity */
.tbox-paas-matrix__check {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.tbox-paas-matrix__check .material-symbols-outlined {
  font-size: 17px;
  font-variation-settings: 'FILL' 1;
  flex-shrink: 0;
}

.tbox-paas-matrix__check--app .material-symbols-outlined { color: var(--brand-primary); }
.tbox-paas-matrix__check--vps .material-symbols-outlined { color: var(--brand-cta); }
.tbox-paas-matrix__check--no { color: var(--text-muted); }
.tbox-paas-matrix__check--no .material-symbols-outlined { color: var(--text-muted); opacity: 0.5; }
/* stylelint-enable no-descending-specificity */

.tbox-paas-matrix__cta-row {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-light);
}

.tbox-paas-matrix__cta-cell {
  padding: var(--space-md) var(--space-md-plus);
  display: flex;
  align-items: center;
  justify-content: center;
}

.tbox-paas-matrix__cta-cell:first-child {
  justify-content: flex-start;
  padding-left: var(--space-lg);
}

.tbox-paas-matrix__cta-cell--app {
  background: color-mix(in oklch, var(--brand-primary) 5%, var(--surface-subtle));
}

/* stylelint-disable no-descending-specificity */
.tbox-paas-matrix__cta-cell .tbox-btn,
.tbox-paas-matrix__cta-cell .tbox-btn-outline {
  white-space: nowrap;
}
/* stylelint-enable no-descending-specificity */

.tbox-paas-matrix__cta-label {
  font-size: var(--fs-sm);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

@media (width <= 640px) {
  .tbox-paas-matrix {
    --paas-matrix-cols: 1fr;
    border-radius: var(--radius-sm-plus);
  }

  .tbox-paas-matrix__header {
    display: none;
  }

  .tbox-paas-matrix__row {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .tbox-paas-matrix__cell,
.tbox-paas-matrix__header-cell,
.tbox-paas-matrix__cta-cell {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--fs-xs);
  }

  .tbox-paas-matrix__row .tbox-paas-matrix__cell:nth-child(2)::before,
.tbox-paas-matrix__row .tbox-paas-matrix__cell:nth-child(3)::before {
    flex: 0 0 6.4rem;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
  }

  .tbox-paas-matrix__row .tbox-paas-matrix__cell:nth-child(2)::before {
    content: "App Hosting";
  }

  .tbox-paas-matrix__row .tbox-paas-matrix__cell:nth-child(3)::before {
    content: "Cloud VPS";
  }

  .tbox-paas-matrix__cell--label {
    padding-bottom: var(--space-xs);
    background: var(--surface-subtle);
  }

  .tbox-paas-matrix__cta-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  .tbox-paas-matrix__cta-row .tbox-paas-matrix__cta-cell {
    padding: 0;
    justify-content: center;
    background: transparent;
  }

  .tbox-paas-matrix__cta-row .tbox-paas-matrix__cta-cell:first-child {
    justify-content: center;
    padding-left: 0;
  }

  .tbox-paas-matrix__cta-cell .tbox-btn,
.tbox-paas-matrix__cta-cell .tbox-btn-outline {
    width: 100%;
    justify-content: center;
    white-space: normal;
  }

  .tbox-paas-matrix__cta-label {
    text-align: center;
    display: block;
  }
}

:root[data-theme="dark"] .tbox-paas-matrix {
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-paas-matrix__header {
  background: var(--surface-base);
  border-bottom-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-paas-matrix__header-cell--app {
  background: color-mix(in oklch, var(--brand-primary) 12%, var(--surface-raised));
}

:root[data-theme="dark"] .tbox-paas-matrix__header-cell--vps {
  background: color-mix(in oklch, var(--brand-cta) 10%, var(--surface-raised));
}

:root[data-theme="dark"] .tbox-paas-matrix__row {
  border-bottom-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-paas-matrix__row:nth-child(even) {
  background: color-mix(in oklch, var(--surface-raised) 60%, var(--surface-subtle));
}

:root[data-theme="dark"] .tbox-paas-matrix__cell--app {
  background: color-mix(in oklch, var(--brand-primary) 5%, transparent);
}

:root[data-theme="dark"] .tbox-paas-matrix__cta-row {
  background: var(--surface-base);
  border-top-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-paas-matrix__cta-cell--app {
  background: color-mix(in oklch, var(--brand-primary) 8%, var(--surface-raised));
}

/* ==========================================================================
   PaaS Compare — enhanced layout
   Sticky column strip, numbered groups, verdict chips, bullet cells
   ========================================================================== */

/* Sticky column-label strip — sticks below the jump bar */
.tbox-paas-compare__sticky-cols {
  position: sticky;
  top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 64px) + 71px);
  z-index: 150;
  display: grid;
  grid-template-columns: minmax(0, 0.78fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: 1100px;
  margin-inline: auto;
  padding: var(--space-xs) 0;
  background: var(--surface-subtle);
  border-bottom: 1px solid color-mix(in oklch, var(--brand-primary) 10%, var(--border-light));
  isolation: isolate;
}

.tbox-paas-compare__sticky-col {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  min-height: 2rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.tbox-paas-compare__sticky-col .material-symbols-outlined { font-size: var(--fs-sm); }

.tbox-paas-compare__sticky-col--app {
  color: var(--brand-primary-text);
  background: color-mix(in oklch, var(--brand-primary) 8%, var(--surface-base));
}

.tbox-paas-compare__sticky-col--vps {
  color: color-mix(in srgb, var(--brand-cta) 80%, var(--text-primary));
  background: color-mix(in srgb, var(--brand-cta) 7%, var(--surface-base));
}

/* Capability title inline icon */
.tbox-paas-compare-cap-icon {
  font-size: 17px;
  color: color-mix(in oklch, var(--brand-primary) 55%, var(--text-muted));
  flex-shrink: 0;
  font-family: "Material Symbols Outlined", sans-serif;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
}

/* Verdict chip — squared data label,
not a pill */
.tbox-paas-compare-verdict {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 0 0 0.55em;
  min-height: 1.55rem;
  padding: 1px 7px;
  border-radius: var(--radius-2xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  line-height: 1.6;
}

.tbox-paas-compare-verdict .material-symbols-outlined { font-size: var(--fs-2xs); }

.tbox-paas-compare-verdict--managed {
  background: color-mix(in oklch, var(--calc-success-500) 10%, var(--surface-base));
  color: color-mix(in oklch, var(--state-success-text) 80%, var(--text-primary));
  border: 1px solid color-mix(in oklch, var(--calc-success-500) 20%, var(--border-light));
}

.tbox-paas-compare-verdict--team {
  background: color-mix(in srgb, var(--calc-warn-500) 9%, var(--surface-base));
  color: color-mix(in srgb, var(--state-warning-text) 80%, var(--text-primary));
  border: 1px solid color-mix(in srgb, var(--calc-warn-500) 18%, var(--border-light));
}

/* Bullet list in cells */
.tbox-paas-compare-cell-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45em;
}

.tbox-paas-compare-cell-list li {
  padding-left: 1.15em;
  position: relative;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  font-size: var(--fs-sm);
}

.tbox-paas-compare-cell-list li::before {
  content: "";
  position: absolute;
  left: 0.2em;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: var(--radius-2xs);
}

.tbox-paas-compare-cell--app .tbox-paas-compare-cell-list li::before {
  background: var(--brand-primary);
  opacity: 0.6;
}

.tbox-paas-compare-cell--vps .tbox-paas-compare-cell-list li::before {
  background: color-mix(in srgb, var(--brand-cta) 80%, var(--text-primary));
  opacity: 0.7;
}

/* Dark mode overrides for new elements */
:root[data-theme="dark"] .tbox-paas-compare__sticky-cols {
  background: color-mix(in oklch, var(--surface-base) 90%, transparent);
  border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-paas-compare__sticky-col--app {
  background: color-mix(in oklch, var(--brand-primary) 12%, var(--surface-subtle));
}

:root[data-theme="dark"] .tbox-paas-compare__sticky-col--vps {
  background: color-mix(in srgb, var(--brand-cta) 10%, var(--surface-subtle));
  color: var(--brand-cta);
}

:root[data-theme="dark"] .tbox-paas-compare-cap-icon {
  color: color-mix(in oklch, var(--brand-primary) 68%, var(--text-muted));
}

:root[data-theme="dark"] .tbox-paas-compare-verdict--managed {
  background: color-mix(in oklch, var(--calc-success-500) 13%, var(--surface-subtle));
  color: var(--success-bright);
  border-color: color-mix(in oklch, var(--calc-success-500) 18%, var(--border-light));
}

:root[data-theme="dark"] .tbox-paas-compare-verdict--team {
  background: color-mix(in srgb, var(--calc-warn-500) 10%, var(--surface-subtle));
  color: var(--brand-cta);
  border-color: color-mix(in srgb, var(--calc-warn-500) 15%, var(--border-light));
}

/* Mobile: show cell labels were previously hidden on desktop */
@media (width <= 860px) {
  .tbox-paas-compare__sticky-cols { display: none; }
}

#trust-section.tbox-trust-section--slim {
  padding-bottom: clamp(3rem, 4vw, 4rem);
}

/* Hero responsive font sizes */
@media (width <= 900px) {
  .tbox-ah-bento-hero-card :is(h3, h4) { font-size: var(--fs-heading-sm); }
  .tbox-ah-bento-hero-card              { padding: 1.75rem; min-height: auto; }
}
@media (width <= 600px) {
  .tbox-ah-bento-hero-card :is(h3, h4) { font-size: var(--fs-2xl); }
}

/* ============================================
   Migration Timeline (.tbox-ah-migration-timeline)
   ============================================ */

.tbox-ah-migration-timeline {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  position: relative;
  padding-left: var(--space-2xl);
}

.tbox-ah-migration-timeline::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 0.75rem;
  bottom: 0.75rem;
  width: 2px;
  background: var(--border-light);
  border-radius: var(--radius-xs);
}

.tbox-ah-timeline-item {
  display: grid;
  grid-template-columns: 164px 1fr;
  gap: var(--space-lg);
  position: relative;
}

.tbox-ah-timeline-item::before {
  content: "";
  position: absolute;
  left: -2rem;
  top: 0.875rem;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border-mid);
  background: var(--surface-base);
  z-index: 1;
}

@media (width <= 600px) {
  .tbox-ah-migration-timeline {
    padding-left: var(--space-xl);
  }

  .tbox-ah-migration-timeline::before {
    left: 5px;
  }

  .tbox-ah-timeline-item {
    grid-template-columns: 1fr;
  }

  .tbox-ah-timeline-item::before {
    left: -1.5rem;
    top: 0.625rem;
    width: 8px;
    height: 8px;
  }
}

.tbox-ah-timeline-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  white-space: nowrap;
  align-self: start;
  margin-top: var(--space-xs);
}

.tbox-ah-timeline-badge--green {
  color: var(--success-deep);
}

.tbox-ah-timeline-badge--blue {
  color: var(--ah-portability-timeline-blue);
}

.tbox-ah-timeline-badge--orange {
  color: var(--brand-primary-text);
}

.tbox-ah-timeline-badge--slate {
  color: var(--ah-portability-timeline-slate);
}

:root[data-theme="dark"] .tbox-ah-timeline-badge--green {
  color: var(--ah-portability-timeline-green-dark);
}

:root[data-theme="dark"] .tbox-ah-timeline-badge--blue {
  color: var(--ah-portability-timeline-blue-dark);
}

:root[data-theme="dark"] .tbox-ah-timeline-badge--orange {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-ah-timeline-badge--slate {
  color: var(--gray-300);
}

.tbox-ah-timeline-content {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, var(--radius-12));
  padding: var(--space-lg-plus);
  transition: border-color var(--ease-base);
}

.tbox-ah-timeline-content:hover {
  border-color: var(--border-mid);
}

/* Per-color tinting: dot markers */
.tbox-ah-timeline-item:has(.tbox-ah-timeline-badge--green)::before {
  border-color: var(--success-deep);
}

.tbox-ah-timeline-item:has(.tbox-ah-timeline-badge--blue)::before {
  border-color: var(--ah-portability-timeline-blue);
}

.tbox-ah-timeline-item:has(.tbox-ah-timeline-badge--orange)::before {
  border-color: var(--brand-primary-text);
}

.tbox-ah-timeline-item:has(.tbox-ah-timeline-badge--slate)::before {
  border-color: var(--ah-portability-timeline-slate);
}

/* Per-color tinting: card containers */
.tbox-ah-timeline-item:has(.tbox-ah-timeline-badge--green) .tbox-ah-timeline-content {
  background: var(--card-tint-green);
  border-color: var(--card-border-green);
}

.tbox-ah-timeline-item:has(.tbox-ah-timeline-badge--blue) .tbox-ah-timeline-content {
  background: var(--card-tint-blue);
  border-color: var(--card-border-blue);
}

.tbox-ah-timeline-item:has(.tbox-ah-timeline-badge--orange) .tbox-ah-timeline-content {
  background: var(--surface-subtle);
  border-color: var(--border-light);
}

.tbox-ah-timeline-item:has(.tbox-ah-timeline-badge--slate) .tbox-ah-timeline-content {
  background: var(--card-tint-slate);
  border-color: var(--card-border-slate);
}

.tbox-ah-timeline-content__title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0 0 0.375rem;
}

.tbox-ah-timeline-content__desc {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
  color: var(--text-secondary);
  margin: 0 0 var(--space-md);
}

.tbox-ah-timeline-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

.tbox-ah-timeline-chips .tbox-chip {
  font-size: var(--fs-label);
  padding: 0.2rem 0.625rem;
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  font-weight: var(--fw-medium);
}

/* App Hosting portability polish */
.tbox-hero-v3--portability .tbox-hero-v3__inner {
  display: grid;
  justify-items: center;
  gap: var(--space-lg);
}
.tbox-hero-v3--portability .tbox-hero-v3__subtitle {
  color: var(--text-inverse);
}
.tbox-ah-portability-toolkit {
  background: var(--surface-muted);
}

.tbox-ah-portability-toolkit .tbox-section__desc,
.tbox-ah-portability-timeline-section .tbox-section__desc {
  margin-inline: auto;
  max-width: 760px;
}

.tbox-ah-portability-matrix {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

.tbox-ah-portability-matrix .tbox-feature-matrix__header {
  display: none;
}

.tbox-ah-portability-matrix .tbox-feature-matrix__row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
  align-content: space-between;
  min-height: 100%;
  padding: var(--space-xl);
  border: 1px solid color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-bg) 8%);
  box-shadow: var(--shadow-sm);
}

.tbox-ah-portability-matrix .tbox-feature-matrix__row + .tbox-feature-matrix__row {
  border-top: 1px solid color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
}

.tbox-ah-portability-matrix .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-bg) 14%);
  border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border-light) 66%);
}

.tbox-ah-portability-matrix .tbox-feature-matrix__feature {
  display: grid;
  gap: var(--space-md);
}

.tbox-ah-portability-matrix .tbox-feature-matrix__icon {
  width: 2.5rem;
  height: 2.5rem;
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border-light) 76%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 78%, var(--brand-primary-bg) 22%);
  color: var(--brand-primary);
}

.tbox-ah-portability-matrix .tbox-feature-matrix__icon :where(svg) {
  width: 18px;
  height: 18px;
}

.tbox-ah-portability-matrix .tbox-feature-matrix__text :where(h3, h4) {
  font-size: var(--fs-lg);
  margin-bottom: var(--space-xs);
}

.tbox-ah-portability-matrix .tbox-feature-matrix__text :where(p) {
  font-size: var(--fs-base);
  line-height: var(--lh-loose);
}

.tbox-ah-portability-matrix .tbox-chip {
  justify-self: start;
  border-color: color-mix(in srgb, var(--brand-primary) 20%, var(--border-light) 80%);
  background: color-mix(in srgb, var(--surface-base) 84%, var(--brand-primary-bg) 16%);
}

.tbox-ah-portability-plan .tbox-btn,
.tbox-hero-v3--portability ~ .tbox-cta-section .tbox-btn,
.tbox-hero-v3--portability ~ .tbox-mobile-sticky-cta .tbox-btn {
  color: var(--text-primary);
}

.tbox-hero-v3--portability ~ .tbox-faq-section .tbox-faq-question {
  color: var(--text-primary);
}

.tbox-ah-portability-plan .tbox-container {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(18rem, 1.1fr);
  column-gap: clamp(1.5rem, 4vw, 3.5rem);
  row-gap: var(--space-xl);
  align-items: center;
}

.tbox-ah-portability-plan .tbox-section__heading,
.tbox-ah-portability-plan__copy {
  grid-column: 1;
}

.tbox-ah-portability-plan .tbox-ui-proof {
  grid-column: 2;
  grid-row: 1 / span 3;
  margin: 0;
}

.tbox-ah-portability-plan .tbox-cta-row {
  grid-column: 1;
  justify-content: flex-start;
}

.tbox-ah-portability-timeline-section .tbox-ah-migration-timeline {
  max-width: 940px;
  margin: var(--space-2xl) auto 0;
}

.tbox-ah-portability-timeline-section .tbox-ah-timeline-content {
  box-shadow: var(--shadow-sm);
}

@media (width <= 980px) {
  .tbox-ah-portability-matrix {
    grid-template-columns: 1fr;
  }

  .tbox-ah-portability-plan .tbox-container {
    grid-template-columns: 1fr;
  }

  .tbox-ah-portability-plan .tbox-section__heading,
.tbox-ah-portability-plan__copy,
.tbox-ah-portability-plan .tbox-ui-proof,
.tbox-ah-portability-plan .tbox-cta-row {
    grid-column: auto;
    grid-row: auto;
  }

  .tbox-ah-portability-plan .tbox-cta-row {
    justify-content: center;
  }
}

@media (width <= 600px) {
  .tbox-ah-portability-matrix .tbox-feature-matrix__row {
    padding: var(--space-lg);
  }
}

/* ===================================================================
   App Hosting redesign: feature grid components
   =================================================================== */

/* autoscale-comparison visual removed — replaced by .tbox-ah-scaling-breakout */

.tbox-pricing-section {
  padding-top: clamp(3rem, 4vw, 4rem);
  padding-bottom: clamp(3rem, 4vw, 4.25rem);
}

#pricing-section #calculator-section {
  display: grid;
  row-gap: clamp(1rem, 2vw, 1.5rem);
}

/* The grid row-gap is the single spacing source between these rows; zero the
   heading/desc margins so they don't compound with it into an oversized band. */
#pricing-section #calculator-section > .tbox-section__heading {
  margin-bottom: 0;
}
#pricing-section #calculator-section > .tbox-section__desc {
  margin-top: 0;
  margin-bottom: 0;
}

/* stylelint-disable no-descending-specificity */
/* ── CI/CD card (token-based, no inline styles) ── */
.tbox-card--auto-cicd .tbox-card__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tbox-card--auto-cicd h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: var(--space-sm) 0 var(--space-sm);
}

.tbox-card--auto-cicd p {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  margin: 0 0 var(--space-sm);
}

.tbox-card--auto-cicd .tbox-card-link {
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  text-decoration: none;
}

.tbox-card--auto-cicd .tbox-card-link:hover {
  text-decoration: underline;
}

/* ── Stacks icon grid ── */
/* Keep stack cards in the icon+title header pattern and prevent
   wide child blocks from pushing the title column to the far right. */
.tbox-standard-features-grid > :is(div, article) > .stacks-icon-grid {
  grid-column: 1 / -1;
  grid-row: 3;
}

.stacks-icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-md);
  margin: var(--space-md) 0;
}

.stacks-icon-grid__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  min-height: 5.5rem;
  padding: var(--space-sm);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-card) 62%, transparent);
  transition:
    box-shadow var(--ease-base),
    border-color var(--ease-base),
    background-color var(--ease-base),
    color var(--ease-base);
}

.stacks-icon-grid__item img {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.stacks-icon-grid__item:hover,
.stacks-icon-grid__item:focus-visible {
  box-shadow: 0 4px 12px rgb(15 23 42 / 0.08);
  border-color: var(--border-light);
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.stacks-icon-grid__item:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: 2px;
}

/* .NET inline badge inside stacks grid */
.stacks-icon-grid__item .stacks-dotnet-badge {
  width: 32px;
  height: 32px;
  background: #512bd4;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-inverse);
  font-weight: var(--fw-bold);
  font-size: 0.6875rem; /* micro-UI: intentional literal */
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

@media (width <= 768px) {
  .stacks-icon-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (width <= 480px) {
  .stacks-icon-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 600px) {
  .stacks-icon-grid {
    display: none;
  }

  .tbox-ah-stack-pills {
    display: flex;
    margin-top: var(--space-md);
  }
}

/* ── Bento add-on badge ── */
.tbox-bento-addon-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--text-tertiary);
  color: var(--text-tertiary);
  vertical-align: middle;
  margin-left: 4px;
}

.tbox-bento-included-badge {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 2px 8px;
  border-radius: var(--radius-xs);
  border: 1px solid var(--brand-primary);
  color: var(--brand-primary);
  vertical-align: middle;
  margin-left: 4px;
}

/* ── Dense secondary feature tier ── */
.tbox-bento-extras { padding: var(--space-sm) var(--space-md) var(--space-xs); }

.tbox-bento-extras__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm) var(--space-md);
}

.tbox-bento-extras__item {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border-radius: var(--radius-sm);
}

/* Desktop (3 cols): shade every other row (items 4-6, 10-12, …) */
.tbox-bento-extras__item:nth-child(6n+4),
.tbox-bento-extras__item:nth-child(6n+5),
.tbox-bento-extras__item:nth-child(6n+6) {
  background: var(--surface-muted);
}

.tbox-bento-extras__icon { flex: 0 0 24px; height: 24px; color: var(--text-tertiary); display: none; }
.tbox-bento-extras__icon svg { width: 100%; height: 100%; }

.tbox-bento-extras__text { flex: 1; min-width: 0; }
.tbox-bento-extras__name { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-primary); }
.tbox-bento-extras__desc { font-size: var(--fs-sm); color: var(--text-secondary); line-height: var(--lh-relaxed); margin: 0; }
.tbox-bento-extras__link { font-size: var(--fs-base); color: var(--brand-primary); }
.tbox-bento-extras__link:focus-visible { outline: var(--focus-outline-width) solid var(--focus-ring); outline-offset: var(--focus-outline-offset); border-radius: 2px; }

.tbox-ah-bento-hero__link,
.tbox-bento-extras__link,
.tbox-card-link {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
}

@media (pointer: coarse), (width <= 768px) {
  .tbox-card__link,
.tbox-ah-bento-hero__link,
.tbox-bento-extras__link,
.tbox-card-link {
    min-height: 2.75rem;
    padding-block: 0.3rem;
  }
}

@media (width > 900px) {
  .tbox-standard-features-grid--bento-repack > div.tbox-bento-extras:nth-child(n),
.tbox-standard-features-grid--bento-repack > div.tbox-extras-checklist:nth-child(n) {
    grid-column: 1 / -1 !important;
    display: block !important;
  }
}
/* Tablet (2 cols): shade every other row (items 3-4, 7-8, …) */
@media (width <= 900px) {
  .tbox-bento-extras__items { grid-template-columns: repeat(2, 1fr); }
  .tbox-bento-extras__item:nth-child(6n+4),
  .tbox-bento-extras__item:nth-child(6n+5),
  .tbox-bento-extras__item:nth-child(6n+6) {
    background: transparent;
  }
  .tbox-bento-extras__item:nth-child(4n+3),
  .tbox-bento-extras__item:nth-child(4n+4) {
    background: var(--surface-muted);
  }
}
/* Mobile (1 col): shade every other item */
@media (width <= 600px) {
  .tbox-bento-extras__items { grid-template-columns: 1fr; }
  .tbox-bento-extras__item:nth-child(4n+3),
  .tbox-bento-extras__item:nth-child(4n+4) {
    background: transparent;
  }
  .tbox-bento-extras__item:nth-child(even) {
    background: var(--surface-muted);
  }
}
/* stylelint-enable no-descending-specificity */

/* Mobile extras collapse */
.tbox-bento-extras__expand { display: none; }

@media (width <= 600px) {
  .tbox-bento-extras__expand {
    display: inline-flex;
    width: 100%;
    justify-content: center;
  }
  .tbox-bento-extras__items:not(.is-expanded) .tbox-bento-extras__item:nth-child(n+6) {
    display: none;
  }
}

/* ── Compact extras checklist (flat, no card containers) ── */
/* Override bento grid display:grid and hover effects inherited from
   .tbox-standard-features-grid > :is(div, article) */
.tbox-extras-checklist {
  grid-column: 1 / -1;
  display: block !important;
  margin-top: clamp(0.25rem, 0.8vw, 0.5rem);
  padding: var(--tbox-extras-checklist-padding-top, var(--space-xl)) 0 var(--space-sm);
  padding-top: clamp(1rem, 1.8vw, 1.4rem);
  background: transparent !important;
  border: none !important;
  border-top: 1px solid var(--border-light) !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}
.tbox-extras-checklist:hover {
  transform: none !important;
  box-shadow: none !important;
  background: transparent !important;
}
.tbox-extras-checklist__heading {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
  margin: 0 0 var(--space-md);
}
.tbox-extras-checklist__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(0.35rem, 1vw, 0.65rem) clamp(1rem, 2vw, 1.5rem);
}
@media (width > 900px) {
  .tbox-extras-checklist--three-col .tbox-extras-checklist__list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}
.tbox-extras-checklist__item {
  display: block;
  position: relative;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--border-subtle);
}
.tbox-extras-checklist__item--full {
  grid-column: 1 / -1;
}
.tbox-extras-checklist__item::before {
  content: "";
  position: absolute;
  top: calc(var(--space-md) + 0.45rem);
  left: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 72%, white);
}
.tbox-extras-checklist__item:nth-last-child(-n+2) {
  border-bottom: none;
}
.tbox-extras-checklist__content {
  padding-left: 1rem;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
/* stylelint-disable no-descending-specificity */
.tbox-extras-checklist__content strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}
.tbox-extras-checklist__content a {
  color: var(--brand-primary);
}
.tbox-extras-checklist__content a:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
  border-radius: 2px;
}
/* stylelint-enable no-descending-specificity */
/* Closing "escape hatch" entry — spans the full row, reads apart from the
   qualifying conditions above it, and drops the blue bullet dot. */
.tbox-extras-checklist__item--note {
  grid-column: 1 / -1;
  margin-top: var(--space-sm);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}
.tbox-extras-checklist__item--note::before {
  content: none;
}
.tbox-extras-checklist__item--note .tbox-extras-checklist__content {
  padding-left: 0;
  color: var(--text-muted);
}
@media (width <= 600px) {
  .tbox-extras-checklist__list {
    grid-template-columns: 1fr;
  }
  .tbox-extras-checklist__item:nth-last-child(2) {
    border-bottom: 1px solid var(--border-subtle);
  }
  .tbox-extras-checklist__item:last-child {
    border-bottom: none;
  }
}

/* ── Extras pill grid modifier ──
   Compact pill layout for operational extras checklists.
   Base .tbox-extras-checklist uses !important on border/radius/bg,
so we match. */
.tbox-extras-checklist.tbox-extras-checklist--pill-grid {
  padding: clamp(1.25rem, 2.5vw, 1.75rem) !important;
  border-radius: var(--radius-lg) !important;
  background: var(--surface-subtle) !important;
  border: 1px solid var(--border-card) !important;
}

.tbox-extras-checklist--pill-grid .tbox-extras-checklist__list {
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}

.tbox-extras-checklist--pill-grid .tbox-extras-checklist__item {
  padding: 0.6rem 0.75rem !important;
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  border: 1px solid var(--border-subtle, rgba(0, 0, 0, 0.06)) !important;
  transition: border-color 0.15s ease;
}

.tbox-extras-checklist--pill-grid .tbox-extras-checklist__item:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 30%, transparent) !important;
}

.tbox-extras-checklist--pill-grid .tbox-extras-checklist__item::before {
  top: 0.95rem;
  left: 0.75rem;
}

.tbox-extras-checklist--pill-grid .tbox-extras-checklist__content {
  padding-left: 1.1rem;
}


/* ── Managed services linked rows (flat, no card containers) ── */

/* ===================================================================
   Language page "What this is" cross-links
   Standardized to tbox-card/tbox-standard-features-grid contracts
   =================================================================== */

.tbox-standard-features-grid--lang-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: var(--space-md);
  margin: var(--space-lg-plus) 0;
}

.tbox-standard-features-grid--lang-links > :is(a, div, article):nth-child(n) {
  grid-column: span 1 !important;
  grid-row: auto !important;
}

a.tbox-card--lang-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm-mid);
  padding: var(--space-md) var(--space-md-plus);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--surface-card);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  box-shadow: none;
  transition: border-color var(--ease-base), background var(--ease-base), box-shadow var(--ease-base);
}

a.tbox-card--lang-link:hover {
  border-color: var(--focus-border);
  background: var(--brand-primary-bg);
  box-shadow: var(--shadow-sm);
}

.tbox-standard-features-grid--lang-links .tbox-card__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  color: var(--brand-primary);
  opacity: 0.5;
  transition: opacity var(--ease-base);
}

a.tbox-card--lang-link:hover .tbox-card__arrow {
  opacity: 1;
}

@media (width <= 900px) {
  .tbox-standard-features-grid--lang-links {
    grid-template-columns: 1fr;
  }
}

@media (width <= 600px) {
  a.tbox-card--lang-link {
    padding: 0.6rem 0.75rem;
    font-size: var(--fs-base);
  }
}

a.tbox-card--lang-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  a.tbox-card--lang-link,
.tbox-standard-features-grid--lang-links .tbox-card__arrow {
    transition: none;
  }
}

/* ===================================================================
   Lang-links flat variant: --nav-links
   Flex pill links. Use in place of --lang-links for lighter nav rows.
   =================================================================== */
.tbox-standard-features-grid--nav-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-sm);
  margin: var(--space-lg-plus) 0;
}

.tbox-standard-features-grid--nav-links a.tbox-card--lang-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs-plus) var(--space-md);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: transparent;
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  transition: border-color var(--ease-base), background var(--ease-base), color var(--ease-base);
  transform: none;
  box-shadow: none;
}

/* stylelint-disable-next-line no-descending-specificity -- nav-links reuses lang-link markup with direct-svg icons */
.tbox-standard-features-grid--nav-links .tbox-card__icon {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
  color: var(--brand-primary);
  background: none;
  border: 0;
  padding: 0;
}

/* stylelint-disable-next-line no-descending-specificity -- nav-links flex row needs direct text flexing on existing markup */
.tbox-standard-features-grid--nav-links .tbox-card__text {
  flex: 1;
}

/* stylelint-disable-next-line no-descending-specificity -- nav-links arrow sizing differs from the card-grid and lang-link defaults */
.tbox-standard-features-grid--nav-links .tbox-card__arrow {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  margin-inline-start: auto;
  color: var(--brand-primary);
  opacity: 0.5;
  transition: opacity var(--ease-base);
}

.tbox-standard-features-grid--nav-links a.tbox-card--lang-link:hover {
  border-color: var(--focus-border);
  background: var(--brand-primary-bg);
  color: var(--brand-primary);
  box-shadow: none;
}

.tbox-standard-features-grid--nav-links a.tbox-card--lang-link:hover .tbox-card__arrow {
  opacity: 1;
}

.tbox-standard-features-grid--nav-links a.tbox-card--lang-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

@media (prefers-reduced-motion: reduce) {
  .tbox-standard-features-grid--nav-links a.tbox-card--lang-link {
    transition: none;
  }

  .tbox-standard-features-grid--nav-links .tbox-card__arrow {
    transition: none;
  }
}

/* ============================================================
   Migrated: hourly-vps-configurator.css (HVPS tokens + Cloud VPS bento + HA animation)
   ============================================================ */

/* Feature count badge */
.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn .feature-count {
  background: var(--tbox-hvps-bg-gray);
  color: var(--tbox-hvps-text-medium);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 0.125rem var(--space-sm);
  border-radius: var(--radius-md);
  margin-left: var(--space-xs);
}

/* ============================================
   Cloud VPS — card visual overrides (layout via --bento-repack)
   ============================================ */

/* --- Card display overrides for cards that need flex layout --- */
.tbox-standard-features-grid.tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) {
  background: var(--brand-primary-dark);
  border: none;
  color: var(--text-inverse);
  padding: var(--space-xl);
  position: relative;
  overflow: hidden;
}

.tbox-standard-features-grid.tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]):hover {
  box-shadow: var(--shadow-brand-accent);
}

/* Cloud VPS CTA: solid background — layout (flex-direction: row, spacing) is handled by --bento-repack */
.tbox-standard-features-grid--bento-cloud [data-bento-slot="cta"] {
  background: var(--brand-highlight, var(--brand-cta));
}
.tbox-standard-features-grid--bento-cloud [data-bento-slot="cta"]:hover {
  background: var(--brand-highlight, var(--brand-cta));
  opacity: 0.92;
}

/* Only override layout for cards that need custom flex arrangement.
   Normal cards keep the base grid layout (icon beside text). */

/* --- HA hero card — dark gradient treatment --- */

/* HA card — grid overlay + glow */


.tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"])::after {
  display: none;
}

/* stylelint-disable no-descending-specificity */
.tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) > * {
  position: relative;
  z-index: 1;
}
/* stylelint-enable no-descending-specificity */

.tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) :is(.tbox-feature-card__icon, .tbox-card__icon) {
  background: var(--icon-bg-inverse);
  border: 0;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-lg);
}

/* stylelint-disable no-descending-specificity */
.tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) :is(.tbox-feature-card__icon, .tbox-card__icon) svg {
  color: var(--text-inverse);
}
/* stylelint-enable no-descending-specificity */

#content .tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) .tbox-card__heading {
  font-size: var(--fs-heading-sm);
  color: var(--text-inverse);
  margin-bottom: var(--space-xs);
  white-space: nowrap;
}

#content .tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) .tbox-card__text {
  color: var(--gray-200);
  font-size: var(--fs-lg);
}

/* HA animation — dark stage for V2 */

#content .tbox-standard-features-grid--bento-cloud [data-bento-slot="ha"] .tbox-ha-caption {
  color: var(--gray-300);
}

/* --- V2 icon color classes --- */

/* --- Performance Guard card --- */

.tbox-standard-features-grid--bento-cloud .tbox-perf-steps {
  display: flex;
  gap: var(--space-sm);
  margin-top: 14px;
}


/* 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);
}

/* --- Billing card stat --- */
.tbox-standard-features-grid--bento-cloud .billing-stat {
  display: flex;
  align-items: baseline;
  gap: var(--space-xs);
  margin-top: 14px;
}

.tbox-ahcalc-step .num {
  width: 1.55rem;
  height: 1.55rem;
  border-radius: var(--radius-cap);
  background: rgb(6 182 212 / 22%);
  border: 1px solid rgb(6 182 212 / 25%);
  display: grid;
  place-items: center;
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-base);
  color: var(--ahcalc-slate-900);
}

.tbox-standard-features-grid--bento-cloud .billing-stat .num {
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-bold);
  color: var(--tbox-hvps-blue-2, var(--brand-primary));
  line-height: 1;
}

.tbox-standard-features-grid--bento-cloud .billing-stat .unit {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--tbox-hvps-text-medium, var(--text-muted));
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

.tbox-standard-features-grid--bento-cloud .billing-note {
  font-size: var(--fs-2xs);
  color: var(--tbox-hvps-text-medium, var(--text-muted));
  margin-top: var(--space-xs);
}

.tbox-standard-features-grid--bento-cloud [data-bento-slot="billing"] .billing-stat,
.tbox-standard-features-grid--bento-cloud [data-bento-slot="billing"] .billing-note {
  grid-column: 1 / -1;
}

/* --- 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;
}

@keyframes cvps2Pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.8; }
}

/* --- Images card — horizontal layout with OS tags --- */

.tbox-standard-features-grid--bento-cloud [data-bento-slot="images"] .images-text {
  flex-shrink: 0;
  max-width: 280px;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: var(--space-md);
  align-content: start;
}

.tbox-standard-features-grid--bento-cloud .os-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs-plus);
  flex: 1;
}

.tbox-standard-features-grid--bento-cloud .os-tag {
  padding: var(--space-2xs) var(--space-md);
  background: var(--surface-muted, var(--surface-muted));
  border: 1px solid var(--tbox-hvps-border, var(--gray-200));
  border-radius: var(--radius-sm);
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--tbox-hvps-text-medium, var(--text-secondary));
  white-space: nowrap;
}

/* Card links: Cloud VPS now inherits shared .tbox-card__link rules (blue, underline hover) */

/* --- Infrastructure control card (consolidated) --- */

/* Base card grid (auto 1fr) handles icon + content layout.
   Offer-list spans full width below the icon+heading row. */
.tbox-standard-features-grid--bento-cloud [data-bento-slot="infra"] .tbox-offer-list {
  grid-column: 1 / -1;
}

.tbox-standard-features-grid--bento-cloud [data-bento-slot="infra"] .feature-list {
  margin: var(--space-sm) 0 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* --- CTA action card --- */

/* --- Responsive: tablet --- */
@media (width <= 1024px) {
  .tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) .tbox-card__heading {
    font-size: var(--fs-2xl);
  }
}

/* --- Responsive: mobile --- */
@media (width <= 600px) {
  .tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) {
    padding: var(--space-xl);
  }

  .tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) .tbox-card__heading {
    font-size: var(--fs-lg);
  }

  .tbox-standard-features-grid--bento-cloud .tbox-perf-steps {
    flex-direction: column;
  }

  .tbox-standard-features-grid--bento-cloud > :is(div, article) {
    padding: var(--space-xl);
  }
}

/* ============================================================
   HA Failover Animation — bento hero box
   11s cycle: healthy → failure (hold) → migrate → settled (hold) → reset
   ============================================================ */

/* --- Node containers --- */
.tbox-card--bento-hero .tbox-ha-node {
  width: var(--ha-node-w);
  height: var(--ha-node-h);
  border-radius: var(--radius-md);
  background: var(--gray-900);
  border: 1px solid var(--brand-primary-25);
  padding: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs-plus);
  position: relative;
  overflow: visible;
  box-shadow: 0 4px 12px var(--overlay-22);
}


.tbox-card--bento-hero .tbox-ha-node-a {
  z-index: 2;
  animation: ha-node-a-fail var(--ha-dur) infinite ease-in-out;
}

.tbox-card--bento-hero .tbox-ha-node-b {
  z-index: 1;
  animation: ha-node-b-accept var(--ha-dur) infinite ease-in-out;
}

/* --- Node labels with status dots --- */
.tbox-card--bento-hero .tbox-ha-node-label {
  position: relative;
  z-index: 1;
  font-size: var(--fs-2xs);
  line-height: 1;
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-on-dark-soft);
  display: flex;
  align-items: center;
}

.tbox-card--bento-hero .tbox-ha-node-a .tbox-ha-node-label::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ha-vm-green);
  margin-right: 5px;
  box-shadow: 0 0 5px var(--ha-vm-green);
  animation: ha-status-dot-a var(--ha-dur) infinite ease-in-out;
}

.tbox-card--bento-hero .tbox-ha-node-b .tbox-ha-node-label::before {
  content: "";
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--ha-vm-green);
  margin-right: 5px;
  opacity: 0.3;
  animation: ha-status-dot-b var(--ha-dur) infinite ease-in-out;
}

/* --- VM bars (on Node A) --- */
.tbox-card--bento-hero .tbox-ha-vm {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 14px;
  border-radius: var(--radius-sm);
  background: rgb(15 23 42 / 32%);
  border: 1px solid var(--ha-vm-green-border);
  box-shadow: inset 0 0 0 1px rgb(2 6 23 / 22%);
  overflow: hidden;
  will-change: transform;
  animation: ha-vm-migrate var(--ha-dur) infinite ease-in-out;
}

/* Load fill bar */
.tbox-card--bento-hero .tbox-ha-vm::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  transform-origin: left center;
  transform: scaleX(0.35);
  background: var(--ha-vm-green);
}

/* Individual load animations per VM */
.tbox-card--bento-hero .tbox-ha-vm-1::before {
  animation: ha-vm-load-1 var(--ha-dur) infinite ease-in-out;
}

.tbox-card--bento-hero .tbox-ha-vm-2::before {
  animation: ha-vm-load-2 var(--ha-dur) infinite ease-in-out;
  animation-delay: 0.08s;
}

.tbox-card--bento-hero .tbox-ha-vm-3::before {
  animation: ha-vm-load-3 var(--ha-dur) infinite ease-in-out;
  animation-delay: 0.16s;
}

/* Stagger VM migration */
.tbox-card--bento-hero .tbox-ha-vm-2 {
  animation-delay: 0.08s;
}

.tbox-card--bento-hero .tbox-ha-vm-3 {
  animation-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  .tbox-card--bento-hero .tbox-ha-node-a,
.tbox-card--bento-hero .tbox-ha-node-b,
.tbox-card--bento-hero .tbox-ha-vm,
.tbox-card--bento-hero .tbox-ha-vm-2,
.tbox-card--bento-hero .tbox-ha-vm-3,
.tbox-card--bento-hero .tbox-ha-vm-1::before,
.tbox-card--bento-hero .tbox-ha-vm-2::before,
.tbox-card--bento-hero .tbox-ha-vm-3::before,
.tbox-card--bento-hero .tbox-ha-node-a .tbox-ha-node-label::before,
.tbox-card--bento-hero .tbox-ha-node-b .tbox-ha-node-label::before {
    animation: none !important;
  }
}

/* --- Empty slots (Node B placeholders) --- */
.tbox-card--bento-hero .tbox-ha-slot {
  width: 100%;
  height: 14px;
  border-radius: var(--radius-sm);
  background: rgb(15 23 42 / 18%);
  border: 1px solid rgb(148 163 184 / 12%);
  opacity: 0.3;
}

/* ============================================================
   Keyframes
   ============================================================ */

/* VM position: stay → lift → travel right → land → fade out → teleport → fade in */
@keyframes ha-vm-migrate {
  0%, 18% {
    transform: translate3d(0, 0, 0);
    opacity: 1;
    border-color: var(--ha-vm-green-border);
  }

  22% {
    border-color: var(--ha-vm-red-border);
  }

  25% {
    transform: translate3d(0, -3px, 0);
    border-color: var(--ha-vm-red-border);
  }

  44% {
    transform: translate3d(0, -3px, 0);
    border-color: var(--ha-vm-red-border);
  }

  53% {
    transform: translate3d(var(--ha-travel-x), -3px, 0);
    opacity: 0.9;
    border-color: var(--ha-vm-red-border);
  }

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

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

  76% {
    transform: translate3d(var(--ha-travel-x), 0, 0);
    opacity: 0;
    border-color: var(--ha-vm-green-border);
  }

  77% {
    transform: translate3d(0, 0, 0);
    opacity: 0;
    border-color: var(--ha-vm-green-border);
  }

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

/* VM 1 load fill: green oscillate → red freeze → green oscillate */
@keyframes ha-vm-load-1 {
  0% {
    transform: scaleX(0.3);
    background: var(--ha-vm-green);
  }

  10% {
    transform: scaleX(0.55);
    background: var(--ha-vm-green);
  }

  18% {
    transform: scaleX(0.38);
    background: var(--ha-vm-green);
  }

  22%, 25%, 53% {
    transform: scaleX(0.38);
    background: var(--ha-vm-red);
  }

  57% {
    transform: scaleX(0.42);
    background: var(--ha-vm-green);
  }

  60%, 73% {
    transform: scaleX(0.5);
    background: var(--ha-vm-green);
  }

  88% {
    transform: scaleX(0.4);
    background: var(--ha-vm-green);
  }

  100% {
    transform: scaleX(0.3);
    background: var(--ha-vm-green);
  }
}

/* VM 2 load fill (slightly different values for variety) */
@keyframes ha-vm-load-2 {
  0% {
    transform: scaleX(0.45);
    background: var(--ha-vm-green);
  }

  10% {
    transform: scaleX(0.35);
    background: var(--ha-vm-green);
  }

  18% {
    transform: scaleX(0.5);
    background: var(--ha-vm-green);
  }

  22%, 25%, 53% {
    transform: scaleX(0.5);
    background: var(--ha-vm-red);
  }

  57% {
    transform: scaleX(0.35);
    background: var(--ha-vm-green);
  }

  60%, 73% {
    transform: scaleX(0.45);
    background: var(--ha-vm-green);
  }

  88% {
    transform: scaleX(0.42);
    background: var(--ha-vm-green);
  }

  100% {
    transform: scaleX(0.45);
    background: var(--ha-vm-green);
  }
}

/* VM 3 load fill */
@keyframes ha-vm-load-3 {
  0% {
    transform: scaleX(0.2);
    background: var(--ha-vm-green);
  }

  10% {
    transform: scaleX(0.4);
    background: var(--ha-vm-green);
  }

  18% {
    transform: scaleX(0.28);
    background: var(--ha-vm-green);
  }

  22%, 25%, 53% {
    transform: scaleX(0.28);
    background: var(--ha-vm-red);
  }

  57% {
    transform: scaleX(0.32);
    background: var(--ha-vm-green);
  }

  60%, 73% {
    transform: scaleX(0.38);
    background: var(--ha-vm-green);
  }

  88% {
    transform: scaleX(0.3);
    background: var(--ha-vm-green);
  }

  100% {
    transform: scaleX(0.2);
    background: var(--ha-vm-green);
  }
}

/* Node A: border/glow during failure */
@keyframes ha-node-a-fail {
  0%, 18% {
    border-color: var(--brand-primary-25);
    box-shadow:
      0 4px 12px var(--overlay-22);
    opacity: 1;
  }

  22% {
    border-color: var(--ha-node-border-fail);
    box-shadow:
      0 0 0 2px var(--ha-vm-red-glow-soft),
      0 4px 12px var(--overlay-22);
    opacity: 1;
  }

  25%, 44% {
    border-color: var(--ha-node-border-fail);
    box-shadow:
      0 0 0 1px var(--ha-vm-red-glow-soft),
      0 4px 12px var(--overlay-22);
    opacity: 0.7;
  }

  55%, 73% {
    border-color: rgb(148 163 184 / 15%);
    box-shadow: 0 4px 10px var(--overlay-12);
    opacity: 0.4;
  }

  82%, 100% {
    border-color: var(--brand-primary-25);
    box-shadow:
      0 4px 12px var(--overlay-22);
    opacity: 1;
  }
}

/* Node B: accept glow when VMs arrive */
@keyframes ha-node-b-accept {
  0%, 50% {
    border-color: var(--brand-primary-25);
    box-shadow:
      0 4px 12px var(--overlay-22);
  }

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

  57%, 73% {
    border-color: var(--ha-vm-green-border);
    box-shadow:
      0 0 0 1px var(--ha-vm-green-outline-soft),
      0 4px 12px var(--overlay-22);
  }

  78%, 100% {
    border-color: var(--brand-primary-25);
    box-shadow:
      0 4px 12px var(--overlay-22);
  }
}

/* Node A status dot: green → red → dim → green */
@keyframes ha-status-dot-a {
  0%, 18% {
    background: var(--ha-vm-green);
    box-shadow: 0 0 5px var(--ha-vm-green);
    opacity: 1;
  }

  22%, 44% {
    background: var(--ha-vm-red);
    box-shadow: 0 0 5px var(--ha-vm-red);
    opacity: 1;
  }

  55%, 73% {
    background: rgb(148 163 184 / 40%);
    box-shadow: none;
    opacity: 0.4;
  }

  82%, 100% {
    background: var(--ha-vm-green);
    box-shadow: 0 0 5px var(--ha-vm-green);
    opacity: 1;
  }
}

/* Node B status dot: dim → bright green → dim */
@keyframes ha-status-dot-b {
  0%, 50% {
    background: var(--ha-vm-green);
    box-shadow: none;
    opacity: 0.3;
  }

  55%, 73% {
    background: var(--ha-vm-green);
    box-shadow: 0 0 5px var(--ha-vm-green);
    opacity: 1;
  }

  78%, 100% {
    background: var(--ha-vm-green);
    box-shadow: none;
    opacity: 0.3;
  }
}

/* --- HA caption (cycling text inside stage) --- */

.tbox-card--bento-hero .tbox-ha-caption-1 {
  animation: ha-caption-cycle-1 11s infinite ease-in-out;
}

.tbox-card--bento-hero .tbox-ha-caption-2 {
  animation: ha-caption-cycle-2 11s infinite ease-in-out;
}

@keyframes ha-caption-cycle-1 {
  0%, 19%   { opacity: 0; }
  25%, 44%  { opacity: 1; }
  50%, 100% { opacity: 0; }
}

@keyframes ha-caption-cycle-2 {
  0%, 49%   { opacity: 0; }
  55%, 73%  { opacity: 1; }
  79%, 100% { opacity: 0; }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (width <= 600px) {
  .tbox-card--bento-hero .tbox-ha-animation {
    position: relative;
    top: auto;
    right: auto;
    display: flex;
    justify-content: center;
  }

  .tbox-card--bento-hero .tbox-ha-stage {
    --ha-node-w: 100px;
    --ha-node-h: 90px;
  }

  .tbox-card--bento-hero .tbox-ha-caption {
    font-size: 0.65rem; /* micro-UI: intentional literal */
  }
}

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .tbox-card--bento-hero .tbox-ha-vm {
    animation: none;
    border-color: var(--ha-vm-green-border);
  }

  .tbox-card--bento-hero .tbox-ha-vm::before {
    animation: none;
    transform: scaleX(0.4);
    background: var(--ha-vm-green);
  }

  .tbox-card--bento-hero .tbox-ha-node-a,
  .tbox-card--bento-hero .tbox-ha-node-b {
    animation: none;
  }

  .tbox-card--bento-hero .tbox-ha-node-a .tbox-ha-node-label::before,
  .tbox-card--bento-hero .tbox-ha-node-b .tbox-ha-node-label::before {
    animation: none;
  }

  .tbox-card--bento-hero .tbox-ha-caption span {
    animation: none;
  }

  .tbox-card--bento-hero .tbox-ha-caption-1 {
    opacity: 1;
  }
}

/* HVPS calculator UI */

/**
 * Hourly VPS Configurator
 * Clean, professional configurator with proper contrast
 */

/* hvps-calculator.css — Calculator/configurator UI only.
   Shared marketing/page components live in site-palette.css. */

.tbox-ahcalc-section .tbox-pricing-trust-signals .tbox-trust-badge {
  font-size: var(--fs-xs);
  color: var(--text-on-dark-soft);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  padding: var(--space-xs-plus) var(--space-sm-plus);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-glass-08);
  border: 1px solid var(--surface-glass-12);
}

.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);

  /* 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);
}

#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);
}

.tbox-ahcalc-stepper input[type="number"] {
  appearance: textfield;
}

#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;
}

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

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

.tbox-ahcalc-slider-wrapper input[type="range"]:focus:not(:focus-visible) {
  outline: 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;
}

/* Webkit Thumb */
.tbox-ahcalc-slider-wrapper input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  width: 20px;
  height: 20px;
  background: var(--ahcalc-accent-400);
  border: 3px solid var(--surface-glass-85);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 4px var(--overlay-12);
  transition: box-shadow var(--ease-fast);
}

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

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

.tbox-ahcalc-slider-wrapper input[type="range"]:focus-visible::-webkit-slider-thumb {
  outline: var(--focus-outline-width) solid var(--ahcalc-accent-400);
  outline-offset: var(--focus-outline-offset);
}

#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;
}

/* Firefox Thumb */
.tbox-ahcalc-slider-wrapper input[type="range"]::-moz-range-thumb {
  width: 20px;
  height: 20px;
  background: var(--ahcalc-accent-400);
  border: 3px solid var(--surface-glass-85);
  border-radius: 50%;
  cursor: grab;
  box-shadow: 0 2px 4px var(--overlay-12);
}

.tbox-ahcalc-slider-wrapper input[type="range"]:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 var(--focus-outline-width) var(--ahcalc-accent-400);
}

#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;
}

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

#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-ahcalc-stack-limit label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  color: var(--ahcalc-slate-700);
  margin-bottom: var(--space-xs);
}

.tbox-ahcalc-util label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-md);
  color: var(--ahcalc-slate-800);
  margin: 0;
}

.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;
}

.tbox-ahcalc-title {
  font-size: var(--fs-2xl);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin: 0;
}

.tbox-ahcalc-stack-name {
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--ahcalc-slate-900);
}

.tbox-ahcalc-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tbox-ahcalc-switch .label {
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-tight);
  color: var(--ahcalc-slate-900);
}

.tbox-ahcalc-stepper input {
  border: none;
  border-radius: 0;
  width: 4.2rem;
  padding: 0.55rem var(--space-sm-mid);
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-md);
  color: var(--ahcalc-slate-900);
  text-align: center;
}

.tbox-ahcalc-stepper input:focus-visible {
  outline: var(--focus-outline-width) solid var(--ahcalc-accent-400);
  outline-offset: -2px;
}

.tbox-ahcalc-stepper input:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.tbox-ahcalc-stepper input:focus:not(:focus-visible) {
  outline: none;
}

.tbox-ahcalc-stepper-btn {
  width: 2.25rem;
  min-width: var(--min-touch-target);
  min-height: var(--min-touch-target);
  display: grid;
  place-items: center;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--ahcalc-slate-50);
  color: var(--ahcalc-slate-700);
  font-size: var(--fs-base);
  font-weight: 900;
  cursor: pointer;
  transition: background var(--ease-fast), color var(--ease-fast);
}

.tbox-ahcalc-stepper-btn:first-child {
  border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.tbox-ahcalc-stepper-btn:last-child {
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.tbox-ahcalc-stepper-btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--ahcalc-accent-400);
  outline-offset: -2px;
}

.tbox-ahcalc-stepper-btn:focus:not(:focus-visible) {
  outline: none;
}

.tbox-ahcalc-stepper-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
}

.tbox-ahcalc-input {
  /* Only used for standalone inputs now if any */
  width: 100%;
  padding: 0.6rem var(--space-md-minus);
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-md);
  color: var(--ahcalc-slate-900);
  background: var(--surface-glass-95);
}

.tbox-ahcalc-input-group .tbox-ahcalc-input {
  border: none;
  border-radius: 0;
  flex: 1;
  padding: 0.6rem 0.8rem;
}

.tbox-ahcalc-input:focus-visible {
  outline: var(--focus-outline-width) solid var(--ahcalc-accent-400);
  outline-offset: -2px;
}

.tbox-ahcalc-input-group .tbox-ahcalc-input:focus {
  outline: none;
}

.tbox-ahcalc-est .v {
  font-family: var(--ahcalc-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-xl);
  color: var(--ahcalc-slate-700);
}

.tbox-ahcalc-est--typical .v { color: var(--ahcalc-slate-900); font-weight: var(--fw-bold); font-size: var(--fs-2xl); }

.tbox-ahcalc-stat .label {
  display: block;
  font-size: var(--fs-base);
  color: var(--surface-glass-60);
  margin-top: var(--space-sm);
}

#tbox-app-hosting-configurator .tbox-ahcalc-stack-name {
  color: var(--ahcalc-slate-900);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-title {
  color: var(--text-primary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-switch input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-stepper input {
  color: var(--text-primary);
  background: transparent;
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-title,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-stack-name,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-card h3,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-switch .label,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-stepper input,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-step .num,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-est .v,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-util label,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-input {
  color: var(--text-primary);
}

:root[data-theme="dark"] #content input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
:root[data-theme="dark"] #content textarea,
:root[data-theme="dark"] #content select {
  background: var(--surface-glass-06);
  border: 1px solid var(--border-mid);
  color: var(--text-primary);
}

: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;
}

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

  #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) {
  #hero-section.tbox-hourly-cloud-vps {
    padding: 2rem 1rem 3rem;
  }

  #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%;
  }
}

/* ============================================
   Accessibility
   ============================================ */
@media (prefers-reduced-motion: reduce) {
  :where(#hero-section.tbox-hourly-cloud-vps *),
  :where(#hero-section.tbox-hourly-cloud-vps *::before),
  :where(#hero-section.tbox-hourly-cloud-vps *::after),
  :where(#hourly-vps-configurator *),
  :where(#hourly-vps-configurator *::before),
  :where(#hourly-vps-configurator *::after),
  :where(.tbox-pricing-section.tbox-hourly-cloud-vps *),
  :where(.tbox-pricing-section.tbox-hourly-cloud-vps *::before),
  :where(.tbox-pricing-section.tbox-hourly-cloud-vps *::after),
  :where(.tbox-hvps-comparison-section *),
  :where(.tbox-hvps-comparison-section *::before),
  :where(.tbox-hvps-comparison-section *::after),
  .tbox-hourly-cloud-vps ~ .tbox-standard-features-section *,
  .tbox-hourly-cloud-vps ~ .tbox-standard-features-section *::before,
  .tbox-hourly-cloud-vps ~ .tbox-standard-features-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);
}

/* CTA Microcopy */
.tbox-ahcalc-pricing-card .cta-microcopy {
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  text-align: center;
  color: var(--text-muted);
}
:root[data-theme="dark"] .tbox-ahcalc-pricing-card .cta-microcopy { color: rgb(255 255 255 / 70%); }

#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);
}

/* Responsive Competitor Table */
@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-ahcalc-comparison-table-wrapper,
.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-ahcalc-comparison-table,
.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); }

/* Togglebox column emphasis (desktop comparison table only) */

.tbox-ahcalc-comparison-footnote,
.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);
}

/* Responsive Comparison Table */
@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;
  }
}

.tbox-ahcalc-faq-item summary {
  padding: var(--space-lg-plus);
  font-weight: var(--fw-semibold);
  color: var(--ahcalc-slate-900);
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tbox-ahcalc-faq-item summary::-webkit-details-marker {
  display: none;
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn .expand-icon {
  width: 16px;
  height: 16px;
  margin-left: 0;
  vertical-align: middle;
  transition: transform var(--ease-slow);
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn[aria-expanded="true"] .expand-icon {
  transform: rotate(180deg);
}

@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);
}

/* ============================================
   Reduce section spacing for this page
   ============================================ */
.tbox-hourly-cloud-vps ~ .tbox-standard-features-section {
  background: var(--tbox-hvps-bg-gray);
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-lg);
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-standard-features {
  padding-top: 0;
  padding-bottom: var(--space-lg);
}

/* 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);
}

body.tbox-hvps-bottom-sheet-open {
  overflow: hidden;
}

/* ============================================
   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);
}

/* ============================================
   Features Progressive Disclosure
   ============================================ */
.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-card--extra {
  opacity: 0;
  overflow: hidden;
  transform: translateY(-10px);
  transition: opacity var(--ease-slow), transform var(--ease-slow);
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-standard-features-grid .tbox-card--extra {
  display: none;
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-standard-features-grid.is-expanded .tbox-card--extra {
  display: grid;
  opacity: 1;
  transform: translateY(0);
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 1rem auto 0;
  padding: var(--space-md) var(--space-xl);
  background: transparent;
  border: 1px solid var(--tbox-hvps-border);
  border-radius: var(--radius-sm-plus);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--tbox-hvps-text-medium);
  cursor: pointer;
  transition: all var(--ease-base);
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn:hover {
  background: var(--tbox-hvps-bg-light);
  border-color: var(--tbox-hvps-blue-1);
  color: var(--tbox-hvps-blue-2);
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--tbox-hvps-blue-1);
  outline-offset: var(--focus-outline-offset);
}

/* ============================================
   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;
  }
}

/* ============================================
   Standalone Pricing Section
   ============================================ */
#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
  background: var(--tbox-hvps-bg-white);
  padding: calc(var(--space-xl) + var(--space-xs)) var(--space-xl) 4.5rem;
}

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

.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-section__desc {
  max-width: var(--prose-measure-default);
  margin: 0 0 var(--space-xl); /* left-align under --start heading */
  color: var(--text-secondary);
}

/* 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);
}

/* ============================================
   Trust signals near CTA (scoped to pricing card)
   ============================================ */
.tbox-ahcalc-section .tbox-pricing-trust-signals {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-md);
  justify-content: center;
}

.tbox-ahcalc-section .tbox-pricing-trust-signals .tbox-trust-badge::before {
  content: '✓';
  color: var(--brand-cta);
  font-weight: var(--fw-bold);
}

.tbox-pricing-trust-signals .tbox-trial-signal-accent {
  color: var(--warm-2);
}

/* ============================================
   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;
}

.tbox-ahcalc-faq-item[open] summary::after {
  transform: rotate(45deg);
}

/* 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);
}

/* ============================================
   Mobile Quick Start Stack
   ============================================ */
@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);
}

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

/* 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);
}

/* High contrast mode support */
@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;
  }
}

/* ============================================
   Features Expand Animation Enhancement
   ============================================ */

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-standard-features-grid.is-expanded .tbox-card--extra:nth-child(7) { transition-delay: 0s; }
.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-standard-features-grid.is-expanded .tbox-card--extra:nth-child(8) { transition-delay: 0.05s; }
.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-standard-features-grid.is-expanded .tbox-card--extra:nth-child(9) { transition-delay: 0.1s; }
.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-standard-features-grid.is-expanded .tbox-card--extra:nth-child(10) { transition-delay: 0.15s; }
.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-standard-features-grid.is-expanded .tbox-card--extra:nth-child(11) { transition-delay: 0.2s; }

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn .expand-text {
  display: inline;
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn .collapse-text {
  display: none;
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn[aria-expanded="true"] .expand-text {
  display: none;
}

.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .features-expand-btn[aria-expanded="true"] .collapse-text {
  display: inline;
}

/* ============================================
   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;
}

/* Labels + inputs: slightly tighter like the mockup */

/* Controls: reduce visual weight to match surrounding UI */

/* Resources layout: RAM/CPU row + Disk/VolumeCare row */
@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);
}

/* Responsive: stack on small mobile */
@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;
}

#tbox-app-hosting-configurator .tbox-ahcalc-preset .name span {
  color: var(--ahcalc-slate-400);
  transition: all var(--ease-base);
  font-weight: var(--fw-extrabold);
}


/* 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);
}

/* ============================================
   Laptop/Desktop Sidebar Compaction
   (removes sticky sidebar scrollbar)
   ============================================ */
@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);
  }
}

/* Short laptop viewports (e.g. 1280x720): tighten a bit more to avoid
   reintroducing an inner scrollbar while keeping everything readable. */
@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);
}

/* ============================================
   Cloud VPS Pricing Section Improvements (2026-02)
   Scope: /cloud-vps/#pricing-section (HVPS configurator)
   ============================================ */

/* Light mode: white pricing section background */
:root:not([data-theme]) #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps,
:root[data-theme="light"] #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
  background: var(--surface-base);
}

/* 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;
  }
}

/* Sliders: always stack (RAM / CPU / NVMe each on their own line) */
@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);
}

.tbox-ahcalc-pricing-card .pricing-total__hourly,
#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);
}

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

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

.tbox-ahcalc-pricing-card .pricing-total__hourly-val b,
#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);
}

/* Bento-style featured grid for managed services */
.tbox-pillar-grid--ms-featured {
  grid-template-columns: 1fr 1fr;
}

.tbox-pillar-grid--ms-featured .tbox-pillar-card:first-child {
  grid-row: span 2;
}

/* Featured card sizes to its content instead of stretching to fill the spanned
   rows; overrides the ID-scoped min-height:100% on managed-services pillars. */
#content #managed-services-section .tbox-pillar-grid--ms-featured .tbox-pillar-card:first-child {
  align-self: start;
  min-height: 0;
}

:root[data-theme="dark"] .tbox-pillar-grid--ms-featured .tbox-pillar-card:first-child {
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-card-elevated));
  border-color: var(--brand-primary-border-tint-16);
}

.tbox-pillar-grid--ms-featured .tbox-pillar-card:first-child::before {
  height: 6px;
}

.tbox-pillar-grid--ms-featured .tbox-pillar-card:first-child .tbox-pillar-card__icon {
  width: 40px;
  height: 40px;
}

.tbox-pillar-grid--ms-featured .tbox-pillar-card:first-child .tbox-pillar-card__icon .material-symbols-outlined {
  font-size: 32px;
}

.tbox-pillar-grid--ms-featured .tbox-pillar-card:first-child :is(.tbox-pillar-card__heading, .tbox-card__heading) {
  font-size: var(--fs-heading-lg);
}

@media (width <= 900px) {
  .tbox-pillar-grid--ms-featured {
    grid-template-columns: 1fr 1fr;
    max-width: none;
    margin: 0;
  }
}

@media (width <= 640px) {
  .tbox-pillar-grid--ms-featured {
    grid-template-columns: 1fr;
  }

  .tbox-pillar-grid--ms-featured .tbox-pillar-card:first-child {
    grid-row: auto;
  }
}

/* ============================================
   Managed Services — Layered stack (Cloud VPS)
   Optional managed-service layers shown stacked
   onto the base Cloud VPS foundation slab. A spine
   connects each layer down into the foundation,
   reinforcing "add a layer when a workload needs it."
   ============================================ */
/* Managed Services — flat divided list (icon · trigger · CTA per row) */
/* Cloud VPS product tour: keep the lede to a readable measure. */
#product-tour-section .tbox-section__desc {
  max-width: var(--prose-measure-default);
}

/* Cloud VPS page: heading/desc share the list's 1060px left-aligned axis so
   the band reads as one composition instead of a centered head over a list. */
#managed-services-section .tbox-section__heading,
#managed-services-section .tbox-section__desc {
  max-width: 1060px;
  margin-inline: auto;
  text-align: left;
}

#managed-services-section .tbox-section__desc {
  max-width: var(--prose-measure-default);
  margin-inline: 0;
  margin-bottom: var(--space-xl);
}

#managed-services-section .tbox-ms-list {
  width: 100%;
  margin-inline: 0;
  justify-self: start;
}

.tbox-ms-list {
  max-width: 1060px;
  margin: 0 auto;
  text-align: left;
}

.tbox-ms-list__item {
  --_ic: var(--row-accent, var(--brand-primary-dark));
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-xl);
  padding: 1.15rem var(--space-sm);
  border-top: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  color: inherit;
  text-decoration: none;
  transition: background var(--ease-base);
}

.tbox-ms-list__item:last-child {
  border-bottom: 1px solid var(--border-light);
}

a.tbox-ms-list__item:hover {
  background: var(--surface-subtle);
}

/* Per-service accent (carried on the icon glyph and CTA only) */
.tbox-ms-list__item--db { --row-accent: var(--brand-primary); }
.tbox-ms-list__item--net { --row-accent: var(--color-teal); }
.tbox-ms-list__item--dr { --row-accent: var(--brand-cta); }

:root[data-theme="dark"] .tbox-ms-list__item--net {
  --row-accent: oklch(72% 0.06 175);
}

.tbox-ms-list__icon {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--_ic);
}

.tbox-ms-list__icon .material-symbols-outlined {
  font-size: 24px;
}

.tbox-ms-list__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
  margin: 0 0 0.15rem;
}

:root[data-theme="dark"] .tbox-ms-list__name {
  color: var(--text-inverse);
}

.tbox-ms-list__trigger {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}

:root[data-theme="dark"] .tbox-ms-list__trigger {
  color: var(--text-inverse);
}

.tbox-ms-list__body {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
  max-width: var(--prose-measure-default);
}

.tbox-ms-list__go {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--space-xs);
  white-space: nowrap;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--_ic);
}

.tbox-ms-list__arrow {
  transition: transform var(--ease-fast);
}

a.tbox-ms-list__item:hover .tbox-ms-list__arrow {
  transform: translateX(3px);
}

@media (width <= 720px) {
  .tbox-ms-list__item {
    grid-template-columns: auto 1fr;
  }

  .tbox-ms-list__go {
    grid-column: 2;
    justify-self: start;
    margin-top: 0.35rem;
  }
}

/* ============================================
   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;
  }
}

@keyframes tbox-pc-inner-enter {
  from { opacity: 0; translate: 0 -6px; }
  to   { opacity: 1; translate: 0 0; }
}

/* 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);
  }
}

#features button.tbox-card__link {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  font: inherit;
}

#features button.tbox-card__link:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

#trust-section .tbox-stats-row {
  margin-bottom: 3.5rem;
}

#trust-section .tbox-section__heading em {
  color: var(--brand-primary-text);
}


#faq-section .tbox-faq-section__tabs {
  margin-bottom: var(--space-md);
}

#faq-section .tbox-faq-search-wrapper {
  max-width: 34rem;
  margin-inline: auto;
}

@media (width <= 600px) {
  #faq-section .tbox-faq-section__tabs {
    justify-content: flex-start !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    margin-inline: 0;
    padding-inline: var(--space-md);
    padding-bottom: var(--space-2xs);
    scroll-padding-inline: var(--space-md);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }

  #faq-section .tbox-faq-section__tabs::-webkit-scrollbar {
    display: none;
  }

  #faq-section .tbox-faq-section__tab {
    flex: 0 0 auto;
  }

  #faq-section .tbox-faq-search-wrapper {
    max-width: none;
  }
}

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

:where(#managed-services-section .tbox-standard-features-grid--feature-cards) {
  gap: 1rem;
}

:where(#managed-services-section a.tbox-card--interactive) {
  background:
    color-mix(in srgb, var(--icon-color, var(--brand-primary)) 3%, var(--surface-base));
  border: 1px solid color-mix(in srgb, var(--icon-color, var(--border-light)) 16%, var(--border-light));
  box-shadow: var(--shadow-sm);
}

:where(#managed-services-section a.tbox-card--interactive .tbox-card__icon) {
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--icon-color, var(--brand-primary)) 16%, transparent);
}

:where(#managed-services-section a.tbox-card--interactive :is(h3, h4)) {
  color: var(--text-primary);
}

:where(#managed-services-section a.tbox-card--interactive p:not(.tbox-card__link)) {
  color: var(--text-secondary);
}

:where(#managed-services-section a.tbox-card--interactive .tbox-card__link) {
  color: var(--brand-primary-text);
  font-weight: var(--fw-semibold);
}

/* ============================================
   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);
}

#tbox-app-hosting-configurator .tbox-ahcalc-pricing-card .cta-microcopy {
  font-size: var(--fs-xs);
  color: var(--surface-glass-70);
}

:root:not([data-theme="dark"]) #tbox-app-hosting-configurator .tbox-ahcalc-pricing-card .cta-microcopy {
  color: var(--text-secondary);
}

: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);
}

/* Trust badges: use dark tokens in light mode (dark-surface tokens render as grey on white card). */
:root:not([data-theme="dark"]) .tbox-ahcalc-section .tbox-pricing-trust-signals .tbox-trust-badge {
  color: var(--text-secondary);
  background: var(--overlay-06);
  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);
}

/* App Hosting calculator UI */

/**
 * App Hosting Calculator UX Wrapper
 * Cohesive with HVPS configurator (cards, sticky summary, clear estimates)
 */

/* Prevent a flash of unenhanced markup while JS swaps in the upgraded hero + UI.
   The inline head script adds/removes `tbox-ahcalc-loading` on <html>. */

html.tbox-ahcalc-loading .tbox-ahcalc-section .j-calculator {
  visibility: hidden;
}

#tbox-app-hosting-configurator {
  font-family: var(--ahcalc-font);
  color: var(--ahcalc-slate-900);
  margin: 0 auto 1.5rem;
  max-width: 1440px;
}

/* Static loading/failure message inside the mount; buildUiV3() replaces it,
   so it only stays visible if the calculator JS never initializes. */
.tbox-ahcalc-fallback {
  margin: 0;
  padding: var(--space-lg) var(--space-md);
  border: 1px dashed var(--border-mid);
  border-radius: var(--radius-md);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  text-align: center;
}
.tbox-ahcalc-fallback a {
  color: var(--brand-primary-text);
  font-weight: 600;
}

.tbox-ahcalc-shell {
  background: var(--ahcalc-slate-50);
  border: 1px solid var(--ahcalc-slate-200);
  border-radius: var(--radius-md);
  box-shadow: var(--ahcalc-shadow);
  padding: 1.1rem 1.1rem 1.25rem;
}

.tbox-ahcalc-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-md) 1.25rem;
  margin-bottom: var(--space-lg);
}

.tbox-ahcalc-head-text {
  flex: 1 1 520px;
  min-width: 260px;
}

.tbox-ahcalc-head-controls {
  display: flex;
  align-items: center;
  gap: var(--space-sm-plus);
  margin-left: auto;
}

.tbox-ahcalc-select {
  appearance: none;
  background: var(--surface-glass-90);
  border: 1px solid var(--ahcalc-slate-200);
  border-radius: var(--radius-12);
  padding: 0.55rem 2.1rem 0.55rem 0.75rem;
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-base);
  color: var(--ahcalc-slate-900);
  box-shadow: 0 1px 0 rgb(2 6 23 / 3%);
  background-image: linear-gradient(45deg, transparent 50%, var(--ahcalc-slate-500) 50%),
    linear-gradient(135deg, var(--ahcalc-slate-500) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

.tbox-ahcalc-select:focus-visible {
  outline: none;
  border-color: var(--ahcalc-accent-400);
  box-shadow: 0 0 0 3px rgb(34 211 238 / 15%);
}

.tbox-ahcalc-rail {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm-mid);
  margin: var(--space-md) 0 1.05rem;
}

/* ============================================
   Grid Layout - matches HVPS configurator
   ============================================ */
.tbox-ahcalc-grid {
  display: grid;
  grid-template-columns: 1fr 440px;
  gap: var(--space-lg-plus);
  align-items: start;
}

.tbox-ahcalc-main-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.tbox-ahcalc-card {
  background: var(--surface-glass-92);
  border: 1px solid var(--ahcalc-slate-200);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 0 rgb(2 6 23 / 4%);
  padding: 0.95rem;
}

/* ============================================
   Workload controls
   ============================================ */
.tbox-ahcalc-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm-mid);
}

.tbox-ahcalc-stack-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-lg);
  padding: 0.75rem 0.85rem;
  border-radius: var(--radius-lg);
  border: 1px solid var(--ahcalc-slate-200);
  background: var(--surface-glass-82);
  box-shadow: 0 1px 0 rgb(2 6 23 / 3%);
}

.tbox-ahcalc-stack-left {
  display: grid;
  gap: 0.2rem;
}

.tbox-ahcalc-stack-right {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm-mid);
}

.tbox-ahcalc-stepper {
  display: flex;
  align-items: stretch;
  width: fit-content;
  border: 1px solid var(--ahcalc-slate-200);
  border-radius: var(--radius-12);
  overflow: hidden;
  background: var(--surface-glass-92);
  box-shadow: inset 0 1px 0 rgb(2 6 23 / 2%);
}

.tbox-ahcalc-stack .tbox-ahcalc-stepper {
  width: fit-content;
  max-width: 100%;
}

.tbox-ahcalc-stack-controls {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tbox-ahcalc-stack-software {
  display: grid;
  gap: var(--space-xs);
}

.tbox-ahcalc-stack-software-label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  color: var(--ahcalc-slate-700);
  margin-bottom: 0.1rem;
}

.tbox-ahcalc-select--stack {
  width: 100%;
  max-width: 18rem;
}

.tbox-ahcalc-storage-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.tbox-ahcalc-stack-limits {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-sm-mid);
}

.tbox-ahcalc-stack-nodes-label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-extrabold);
  color: var(--ahcalc-slate-700);
  margin-bottom: var(--space-xs);
}

.tbox-ahcalc-stack-note {
  margin-top: var(--space-md);
  font-size: var(--fs-base);
  color: var(--ahcalc-slate-600);
  line-height: var(--lh-snug);
}

.tbox-ahcalc-dblb {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm-minus);
  margin: 0;
  padding: 0.35rem 0.55rem;
  border-radius: var(--radius-sm-plus);
  border: 1px solid var(--ahcalc-slate-200);
  background: var(--surface-glass-85);
  font-size: var(--fs-xs);
  color: var(--ahcalc-slate-700);
  white-space: nowrap;
}

.tbox-ahcalc-stack-left .tbox-ahcalc-dblb {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
  margin-top: var(--space-2xs);
}

.tbox-ahcalc-dblb input[type='checkbox'] {
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--brand-primary);
}

.tbox-ahcalc-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.25rem 0.55rem;
  border-radius: var(--radius-sm-plus);
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-wide);
  border: 1px solid rgb(34 211 238 / 25%);
  background: rgb(34 211 238 / 18%);
  color: var(--ahcalc-slate-800);
  white-space: nowrap;
}

.tbox-ahcalc-pill--required {
  border-color: rgb(34 197 94 / 25%);
  background: rgb(34 197 94 / 20%);
  color: var(--state-success-text);
}

.tbox-ahcalc-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
}

.tbox-ahcalc-switch .track {
  width: 2.35rem;
  height: 1.35rem;
  border-radius: var(--radius-cap);
  background: var(--switch-track-bg);
  border: 1px solid var(--switch-track-border);
  position: relative;
  transition: background var(--ease-fast), border-color var(--ease-fast);
  flex: 0 0 auto;
}

.tbox-ahcalc-switch .track::after {
  content: '';
  position: absolute;
  width: 1.03rem;
  height: 1.03rem;
  border-radius: var(--radius-cap);
  background: var(--switch-knob-bg);
  top: 50%;
  left: 0.14rem;
  transform: translateY(-50%);
  box-shadow: var(--switch-knob-shadow);
  transition: transform var(--ease-fast);
}

.tbox-ahcalc-switch input:checked + .track {
  background: var(--switch-track-active-bg);
  border-color: var(--switch-track-active-border);
}

.tbox-ahcalc-switch input:checked + .track::after {
  transform: translate(1.0rem, -50%);
}

.tbox-ahcalc-switch input:focus-visible + .track {
  outline: none;
  box-shadow: 0 0 0 3px var(--switch-focus-ring);
}

.tbox-ahcalc-stepper:focus-within {
  border-color: var(--ahcalc-accent-400);
  box-shadow: 0 0 0 3px rgb(34 211 238 / 15%);
}

.tbox-ahcalc-stepper-btn:hover {
  background: rgb(2 6 23 / 14%);
}

.tbox-ahcalc-stepper-btn:active {
  background: rgb(2 6 23 / 18%);
}

.tbox-ahcalc-stepper input::-webkit-outer-spin-button,
.tbox-ahcalc-stepper input::-webkit-inner-spin-button {
  appearance: none;
  margin: 0;
}

/* ============================================
   Topology preview (live)
   ============================================ */
.tbox-ahcalc-topology-preview {
  position: relative;
  margin-top: var(--space-md-plus);
  padding: var(--space-md-plus);
  border-radius: var(--radius-lg);
  border: 1px solid var(--ahcalc-slate-200);
  background: var(--surface-glass-82);

  --ahcalc-topo-node-bg: var(--surface-glass-90);
  --ahcalc-topo-text: var(--ahcalc-slate-900);
  --ahcalc-topo-muted: var(--ahcalc-slate-600);
  --ahcalc-topo-line: rgb(2 6 23 / 35%);
  --ahcalc-topo-traffic: var(--ahcalc-accent-400);
  --ahcalc-topo-lb: #a78bfa;
  --ahcalc-topo-app: var(--ahcalc-accent-400);
  --ahcalc-topo-db: var(--ahcalc-warn-500);
}

.tbox-ahcalc-topology-preview__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin: 0 0 var(--space-sm-mid);
}

.tbox-ahcalc-topology-preview__title {
  font-weight: 850;
  letter-spacing: var(--ls-tight);
  color: var(--ahcalc-topo-text);
  font-size: var(--fs-base);
}

.tbox-ahcalc-topology-preview__hint {
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-xs);
  color: var(--ahcalc-topo-muted);
  white-space: nowrap;
}

.tbox-ahcalc-topology-preview--sidebar {
  margin: 1.15rem 0 1.25rem;
  padding: 0.95rem;
  border: 1px solid var(--surface-glass-12);
  background: var(--surface-glass-06);

  --ahcalc-topo-node-bg: var(--surface-glass-06);
  --ahcalc-topo-text: var(--surface-glass-92);
  --ahcalc-topo-muted: var(--surface-glass-60);
  --ahcalc-topo-line: var(--surface-glass-72);
  --ahcalc-topo-traffic: rgb(34 211 238 / 95%);
  --ahcalc-topo-lb: rgb(167 139 250 / 95%);
  --ahcalc-topo-app: rgb(34 211 238 / 95%);
  --ahcalc-topo-db: rgb(245 158 11 / 95%);
}

.tbox-ahcalc-topology-preview--sidebar .tbox-ahcalc-topology-preview__hint {
  display: none;
}

/* ============================================
   Presets - with active state
   ============================================ */
.tbox-ahcalc-presets {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md-minus);
}

.tbox-ahcalc-preset {
  text-align: left;
  border: 1px solid var(--ahcalc-slate-200);
  background: var(--surface-base);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  min-height: var(--min-touch-target);
  cursor: pointer;
  transition: border-color var(--ease-base), background var(--ease-base), color var(--ease-base);
  position: relative;
  overflow: hidden;
}

.tbox-ahcalc-preset:hover {
  border-color: var(--ahcalc-accent-300);
}

/* Active preset state */
.tbox-ahcalc-preset--active {
  border: 2px solid var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  padding: calc(var(--space-sm) - 1px) calc(var(--space-md) - 1px);
}

#tbox-app-hosting-configurator .tbox-ahcalc-preset .name {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-xl);
  font-weight: var(--fw-bold);
  color: var(--ahcalc-slate-800);
  margin-bottom: var(--space-sm);
  transition: color var(--ease-fast);
}

#tbox-app-hosting-configurator .tbox-ahcalc-preset--active .name {
  color: var(--ahcalc-slate-900);
}

:where(#tbox-app-hosting-configurator .tbox-ahcalc-preset--active .name span),
:where(#tbox-app-hosting-configurator .tbox-ahcalc-preset:hover .name span) {
  color: var(--ahcalc-action-500);
}

/* Specs Badge - Color Injection */
#tbox-app-hosting-configurator .tbox-ahcalc-preset .specs {
  display: inline-block;
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
  background: var(--brand-primary-20);
  padding: var(--space-xs) var(--space-sm-plus);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-sm-mid);
  border: 1px solid var(--brand-primary-25);
}

#tbox-app-hosting-configurator .tbox-ahcalc-preset--active .specs {
  background: var(--ahcalc-accent-500);
  color: var(--text-inverse);
  border-color: var(--ahcalc-accent-600);
}

#tbox-app-hosting-configurator .tbox-ahcalc-preset .micro {
  color: var(--ahcalc-slate-500);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

/* ============================================
   Form Fields
   ============================================ */
.tbox-ahcalc-field {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-sm-minus);
}

.tbox-ahcalc-fields-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
  margin-top: var(--space-xs);
}

.tbox-ahcalc-fields-grid .tbox-ahcalc-field {
  margin-top: 0;
}

/* Prevent grid-stretching on “pill” steppers (Usage helpers: Storage + Public IP). */
.tbox-ahcalc-fields-grid .tbox-ahcalc-stepper {
  justify-self: start;
  width: fit-content;
  max-width: 100%;
}

/* Unified Input Group */
.tbox-ahcalc-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--ahcalc-slate-200);
  border-radius: var(--radius-12);
  overflow: hidden;
  background: var(--surface-base);
  transition: border-color var(--ease-fast);
}

.tbox-ahcalc-input-group:focus-within {
  border-color: var(--ahcalc-accent-400);
  box-shadow: 0 0 0 3px rgb(34 211 238 / 15%);
}

.tbox-ahcalc-toggle {
  display: flex;
  background: var(--ahcalc-slate-50);
  border-left: 1px solid var(--ahcalc-slate-200);
  padding: var(--space-xs);
  gap: var(--space-xs);
}

.tbox-ahcalc-toggle button[aria-pressed="true"] {
  background: var(--brand-primary-dark);
  color: var(--text-inverse);
}

.tbox-ahcalc-hint--included {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--state-success-text);
  font-weight: var(--fw-semibold);
  background: var(--state-success-bg-soft);
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-sm-plus);
  border: 1px solid var(--state-success-border-soft);
}

/* ============================================
   Estimates (3-tier cards)
   ============================================ */
.tbox-ahcalc-estimates {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-sm);
}

.tbox-ahcalc-estimates--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbox-ahcalc-est {
  padding: var(--space-lg);
  background: transparent;
  border-radius: var(--radius-12);
  text-align: center;
}

.tbox-ahcalc-est .k {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-sm);
  color: var(--ahcalc-slate-500);
}

.tbox-ahcalc-est .subv {
  margin-top: var(--space-xs);
  font-family: var(--ahcalc-mono);
  font-variant-numeric: tabular-nums;
  color: var(--ahcalc-slate-400);
  font-size: var(--fs-base);
}

/* Typical Estimate Highlight */
.tbox-ahcalc-est--typical {
  background: var(--surface-base);
  border: 1px solid var(--ahcalc-slate-200);
  border-top: 4px solid var(--ahcalc-accent-500);
  box-shadow: 0 2px 4px var(--overlay-06);
}

.tbox-ahcalc-est--typical .k { color: var(--ahcalc-accent-600); }
.tbox-ahcalc-est--typical .subv { color: var(--ahcalc-slate-600); }

/* ============================================
   Utilization Slider
   ============================================ */
.tbox-ahcalc-util {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px dashed rgb(100 116 139 / 20%);
}

.tbox-ahcalc-util .row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  margin-bottom: var(--space-sm-minus);
}

.tbox-ahcalc-util .pill {
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-sm);
  padding: 0.3rem 0.55rem;
  border-radius: var(--radius-sm-plus);
  border: 1px solid var(--ahcalc-slate-200);
  background: rgb(6 182 212 / 20%);
  color: var(--ahcalc-slate-900);
}

/* Slider wrapper */
.tbox-ahcalc-slider-wrapper {
  position: relative;
  height: 8px;
  background: rgb(15 23 42 / 10%);
  border-radius: var(--radius-xs);
  overflow: visible;
  margin: var(--space-md) 0;
}

.tbox-ahcalc-slider-fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: var(--ahcalc-accent-400, var(--ahcalc-accent-500));
  border-radius: var(--radius-xs);
  pointer-events: none;
  /* State-bound: width is the canonical state. Drag must track instantly. */
}

/* Webkit Thumb */

/* Firefox Thumb */

/* ============================================
   Pricing Sidebar - matches HVPS configurator
   ============================================ */
.tbox-ahcalc-pricing-sidebar {
  position: sticky;
  /* Clear the fixed header + sticky jump bar so the summary top is not clipped. */
  top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 64px) + 70px + var(--space-md, 1rem));
}

.tbox-ahcalc-pricing-card {
  border-radius: var(--radius-md);
  padding: 1.25rem;

  --ahcalc-pricing-card-pad: 1.25rem;

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

.tbox-ahcalc-pricing-card .pricing-card-header {
  display: none;
}

.tbox-ahcalc-pricing-card .pricing-total {
  margin: calc(-1 * var(--ahcalc-pricing-card-pad) - 1px) calc(-1 * var(--ahcalc-pricing-card-pad) - 1px) 14px;
  padding: 20px var(--ahcalc-pricing-card-pad) 16px;
  background: var(--brand-primary-dark);
  border-bottom: 0;
}

.tbox-ahcalc-pricing-card .pricing-total__label {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wider);
  color: var(--surface-glass-88);
}

.tbox-ahcalc-pricing-card .pricing-total__range {
  display: flex;
  align-items: baseline;
  gap: var(--space-2xs);
  flex-wrap: nowrap;
}

.tbox-ahcalc-pricing-card .pricing-total__range .price-value {
  font-size: var(--fs-heading-md);
  font-weight: var(--fw-bold);
  font-family: var(--ahcalc-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--ls-tight);
  line-height: 1.05;
  color: var(--text-inverse);
}

.tbox-ahcalc-pricing-card .pricing-total__dash {
  font-size: var(--fs-heading-sm);
  color: var(--surface-glass-55);
}

.tbox-ahcalc-pricing-card .pricing-total__unit {
  font-family: var(--ahcalc-font);
  font-size: var(--fs-sm);
  color: var(--surface-glass-88);
}

.tbox-ahcalc-pricing-card .pricing-total__ends {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-sm);
  font-size: var(--fs-2xs);
  color: var(--surface-glass-88);
}

.tbox-ahcalc-pricing-card .pricing-total__anchor {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-2xs);
  line-height: var(--lh-snug);
  color: var(--surface-glass-88);
}


/* CTA Button */
.tbox-ahcalc-cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 52px;
  background: var(--tbox-btn-accent-bg);
  color: var(--tbox-btn-accent-text);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border: 1px solid var(--tbox-btn-accent-border);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--ease-fast);
}

.tbox-ahcalc-cta-btn:hover {
  background: var(--tbox-btn-accent-bg-hover);
}

.tbox-ahcalc-cta-btn:active {
  transform: translateY(0);
}

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

.tbox-ahcalc-pricing-card .pricing-breakdown-title {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-sm);
  color: var(--text-secondary);
}

.tbox-ahcalc-pricing-card__toggle {
  display: none;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: var(--space-md);
  padding: 0.8rem 0.95rem;
  border: 1px solid var(--surface-glass-12);
  border-radius: var(--radius-md);
  background: var(--surface-glass-06);
  color: var(--surface-glass-90);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  cursor: pointer;
  transition: background var(--ease-fast), border-color var(--ease-fast), color var(--ease-fast);
}

.tbox-ahcalc-pricing-card__toggle::after {
  content: '\2304';
  font-size: var(--fs-sm);
  line-height: 1;
  transition: transform var(--ease-fast);
}

.tbox-ahcalc-pricing-card__toggle:hover,
.tbox-ahcalc-pricing-card__toggle:focus-visible {
  background: var(--surface-glass-10);
  border-color: var(--surface-glass-20);
  color: var(--text-inverse);
}

:root:not([data-theme="dark"]) .tbox-ahcalc-pricing-card__toggle {
  color: var(--text-secondary);
  background: var(--overlay-06);
  border-color: var(--border-light);
}

:root:not([data-theme="dark"]) .tbox-ahcalc-pricing-card__toggle:hover,
:root:not([data-theme="dark"]) .tbox-ahcalc-pricing-card__toggle:focus-visible {
  color: var(--text-primary);
  background: var(--overlay-12);
  border-color: var(--border-muted);
}

/* stylelint-disable-next-line no-descending-specificity */
.tbox-ahcalc-pricing-card__toggle:focus-visible {
  outline: var(--focus-outline-width) solid var(--surface-glass-80);
  outline-offset: var(--focus-outline-offset);
}

:root:not([data-theme="dark"]) .tbox-ahcalc-pricing-card__toggle:focus-visible {
  outline-color: var(--brand-primary);
}

.tbox-ahcalc-pricing-card.is-breakdown-open .tbox-ahcalc-pricing-card__toggle::after {
  transform: rotate(180deg);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row {
  display: none;
  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);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row.tbox-ahcalc-row--has-meta {
  align-items: flex-start;
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row:last-child {
  border-bottom: none;
}

/* Last visible line item before the total: drop its border so it does not
   double up with the total row's top border. */
.tbox-ahcalc-pricing-card .tbox-ahcalc-row--last-line {
  border-bottom: none;
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row .tbox-ahcalc-row__label {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
  line-height: 1.1;
  color: var(--text-secondary);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row .tbox-ahcalc-row__label-meta {
  font-size: var(--fs-xs);
  font-family: var(--ahcalc-mono);
  font-variant-numeric: tabular-nums;
  display: flex;
  flex-wrap: wrap;
  gap: 0.15rem 0.5rem;
  color: var(--text-muted);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row .tbox-ahcalc-row__label-meta:empty {
  display: none;
}

.tbox-ahcalc-row__label-hint {
  font-weight: var(--fw-normal);
  color: var(--text-muted);
  font-size: 0.85em; /* relative: intentional em */
}

/* Resource color highlights — pricing sidebar (dark bg) */
.tbox-ahcalc-pricing-card .tbox-ahcalc-row__label-meta .tbox-ahcalc-res__label {
  font-weight: var(--fw-bold);
  font-size: 0.625rem; /* micro-UI: intentional literal */
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row__label-meta .tbox-ahcalc-res__ram { color: var(--ahcalc-info-700);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row__label-meta .tbox-ahcalc-res__cpu { color: var(--ahcalc-action-600);
}

/* Resource color highlights — config inspector (light bg) */
#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-resources .tbox-ahcalc-res__label {
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  letter-spacing: 0;
}
:root[data-theme="dark"] .tbox-ahcalc-pricing-card .tbox-ahcalc-row__label-meta .tbox-ahcalc-res__ram { color: var(--ahcalc-accent-400); }

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-resources .tbox-ahcalc-res__ram {
  color: var(--ahcalc-info-700);
}
:root[data-theme="dark"] .tbox-ahcalc-pricing-card .tbox-ahcalc-row__label-meta .tbox-ahcalc-res__cpu { color: var(--ahcalc-warn-300); }

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-resources .tbox-ahcalc-res__cpu {
  color: var(--brand-cta-ink-strong);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-resources .tbox-ahcalc-res__cpu .tbox-ahcalc-res__label {
  color: var(--brand-cta-ink-strong);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row .tbox-ahcalc-row__value {
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  font-family: var(--ahcalc-mono);
  color: var(--text-primary);
}

/* Colored dots per layer */
.tbox-ahcalc-pricing-card .tbox-ahcalc-row__dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: var(--space-2xs);
  flex-shrink: 0;
  vertical-align: middle;
}
.tbox-ahcalc-pricing-card .tbox-ahcalc-row__dot--balancer { background: var(--ahcalc-accent-400); }
.tbox-ahcalc-pricing-card .tbox-ahcalc-row__dot--app { background: var(--ahcalc-success-500); }
.tbox-ahcalc-pricing-card .tbox-ahcalc-row__dot--db { background: var(--ahcalc-warn-500); }
.tbox-ahcalc-pricing-card .tbox-ahcalc-row__dot--dblb { background: var(--ahcalc-svc-dblb-500); }
.tbox-ahcalc-pricing-card .tbox-ahcalc-row__dot--cache { background: var(--ahcalc-svc-cache-500); }
.tbox-ahcalc-pricing-card .tbox-ahcalc-row__dot--filestorage { background: var(--ahcalc-slate-500); }
.tbox-ahcalc-pricing-card .tbox-ahcalc-row__dot--storage { background: var(--text-disabled); }

/* Estimated total row + billing note */
.tbox-ahcalc-pricing-card .tbox-ahcalc-row--total {
  display: flex;
  border-bottom: none;
  border-top: 1px solid var(--border-light);
  margin-top: var(--space-2xs);
  padding-top: var(--space-sm-mid);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row--total .tbox-ahcalc-row__label {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-row--total .tbox-ahcalc-row__value {
  font-size: var(--fs-sm);
  color: var(--text-primary);
}

.tbox-ahcalc-pricing-card .pricing-breakdown__note {
  margin-top: var(--space-md);
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  line-height: var(--lh-normal);
}

/* Cloudlet info card */
.tbox-ahcalc-cloudlet-info {
  margin-top: var(--space-md);
  padding: var(--space-md-plus) var(--space-lg);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.tbox-ahcalc-cloudlet-info__title {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-secondary);
  margin-bottom: 0.3rem;
}

.tbox-ahcalc-cloudlet-info__body {
  font-size: 0.625rem; /* micro-UI: intentional literal */
  color: var(--text-muted);
  line-height: var(--lh-relaxed);
}


/* Share Configuration Button */
.tbox-ahcalc-share-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  width: 100%;
  margin-top: var(--space-lg);
  padding: var(--space-sm-mid) 1rem;
  background: var(--surface-glass-08);
  border: 1px solid var(--surface-glass-15);
  border-radius: var(--radius-sm-plus);
  color: var(--surface-glass-85);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: all var(--ease-fast);
}

.tbox-ahcalc-share-btn:hover {
  background: var(--surface-glass-12);
  border-color: var(--surface-glass-25);
  color: var(--text-inverse);
}

.tbox-ahcalc-share-btn:focus-visible {
  outline: var(--focus-outline-width) solid var(--ahcalc-accent-400);
  outline-offset: var(--focus-outline-offset);
}

/* ============================================
   Utility Row + Share Popover (sidebar)
   ============================================ */
.tbox-ahcalc-utility-row {
  position: relative;
  display: flex;
  gap: var(--space-sm-mid);
  margin-top: var(--space-lg);
}

.tbox-ahcalc-utility-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-sm-mid) 1rem;
  background: var(--surface-glass-08);
  border: 1px solid var(--surface-glass-15);
  border-radius: var(--radius-md);
  color: var(--surface-glass-85);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}

.tbox-ahcalc-utility-btn:hover,
.tbox-ahcalc-utility-btn:focus-visible {
  background: var(--surface-glass-12);
  border-color: var(--surface-glass-25);
  color: var(--text-inverse);
}

.tbox-ahcalc-share-popover-wrap {
  position: static;
  flex: 1;
}

.tbox-ahcalc-share-popover-wrap--toolbar {
  position: relative;
  flex: 0 0 auto;
}

.tbox-ahcalc-share-popover-panel {
  display: none;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg);
  background: var(--ahcalc-slate-800);
  border: 1px solid var(--surface-glass-10);
  border-radius: var(--radius-12);
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  z-index: 30;
  box-shadow: 0 4px 12px var(--overlay-30);
}

.tbox-ahcalc-share-popover-panel--toolbar {
  left: auto;
  right: 0;
  min-width: 320px;
}

/* On narrow viewports the right-anchored toolbar panel is wider than the
   space left of the trigger; anchor it to the actions row instead. */
@media (width <= 600px) {
  .tbox-ahcalc-v3-preset-bar {
    position: relative;
  }

  .tbox-ahcalc-v3-panel-actions,
  .tbox-ahcalc-share-popover-wrap--toolbar {
    position: static;
  }

  .tbox-ahcalc-share-popover-panel--toolbar {
    left: 0;
    right: 0;
    min-width: 0;
  }
}

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

.tbox-ahcalc-share-action {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--surface-glass-85);
  background: var(--surface-glass-06);
  border: 1px solid var(--surface-glass-12);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: color var(--ease-fast), background var(--ease-fast), border-color var(--ease-fast);
}

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

/* Toast Notification */
.tbox-ahcalc-toast {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: var(--ahcalc-slate-900);
  color: var(--text-inverse);
  padding: 0.75rem 1.25rem;
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  box-shadow: 0 2px 8px var(--overlay-22);
  opacity: 0;
  visibility: hidden;
  transition: all var(--ease-base);
  z-index: 10000;
}

.tbox-ahcalc-toast.is-visible {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

.tbox-ahcalc-toast.is-success {
  background: var(--ahcalc-toast-success-end);
}

.tbox-ahcalc-toast.is-error {
  background: var(--ahcalc-toast-error-end);
}

/* ============================================
   Accessibility: Focus Indicators
   ============================================ */
.tbox-ahcalc-preset:focus-visible {
  outline: 3px solid var(--ahcalc-accent-400);
  outline-offset: var(--focus-outline-offset);
}

.tbox-ahcalc-cta-btn:focus-visible {
  outline: 3px solid var(--surface-glass-80);
  outline-offset: var(--focus-outline-offset);
}

/* ============================================
   Accessibility: Touch Target Sizes (44x44px min)
   ============================================ */
@media (pointer: coarse) {
  .tbox-ahcalc-preset {
    min-height: 80px;
    padding: var(--space-lg-plus);
  }

  .tbox-ahcalc-toggle button {
    min-width: 56px;
    min-height: var(--min-touch-target);
    padding: var(--space-sm) var(--space-lg);
  }

  .tbox-ahcalc-cta-btn {
    min-height: 52px;
  }

  .tbox-ahcalc-share-btn {
    min-height: 48px;
    padding: 0.85rem 1.25rem;
  }

  .tbox-ahcalc-slider-wrapper {
    height: 12px;
    margin: 1rem 0;
  }

  .tbox-ahcalc-slider-wrapper input[type="range"]::-webkit-slider-thumb {
    width: 28px;
    height: 28px;
  }

  .tbox-ahcalc-slider-wrapper input[type="range"]::-moz-range-thumb {
    width: 28px;
    height: 28px;
  }

  .tbox-ahcalc-btn {
    min-height: 48px;
    padding: var(--space-md) var(--space-lg);
  }

  .tbox-ahcalc-step {
    min-height: var(--min-touch-target);
    padding: var(--space-sm-mid) 0.85rem;
  }
}

/* Row-level flash on value change */
@media (prefers-reduced-motion: no-preference) {
  .tbox-ahcalc-row.ahcalc-row-flash {
    animation: ahcalc-row-flash 0.45s ease;
  }
}

@keyframes ahcalc-row-flash {
  0%   { background: rgb(34 211 238 / 0%); }
  30%  { background: rgb(34 211 238 / 12%); }
  100% { background: rgb(34 211 238 / 0%); }
}

/* ============================================
   Sticky summary bar
   ============================================ */
.tbox-ahcalc-sticky {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4999;
  padding: 0.85rem 5rem calc(0.85rem + env(safe-area-inset-bottom)) 0.85rem;
  display: none;
}

.tbox-ahcalc-sticky.is-visible {
  display: block;
}

@media (min-width: 769px) {
  .tbox-ahcalc-sticky,
  .tbox-ahcalc-sticky.is-visible {
    display: none !important;
  }
}

.tbox-ahcalc-sticky__inner {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--surface-dark-frosted, rgb(2 6 23 / 92%));
  color: var(--text-inverse);
  border: 1px solid rgb(148 163 184 / 25%);
  box-shadow: var(--ahcalc-shadow-lg);
  border-radius: var(--radius-lg);
  padding: 0.75rem 0.85rem;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-md);
  align-items: center;
}

.tbox-ahcalc-sticky__title {
  font-weight: 750;
  letter-spacing: var(--ls-tight);
  margin: 0;
  font-size: var(--fs-md);
  color: color-mix(in srgb, white 86%, transparent);
}

.tbox-ahcalc-sticky__value {
  margin: var(--space-xs) 0 0;
  font-family: var(--ahcalc-mono);
  font-variant-numeric: tabular-nums;
  font-size: var(--fs-md);
  color: var(--text-inverse);
}

.tbox-ahcalc-sticky__sub {
  margin: var(--space-xs) 0 0;
  font-size: var(--fs-base);
  color: rgb(226 232 240 / 80%);
}

.tbox-ahcalc-sticky__actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
  justify-content: flex-end;
}

.tbox-ahcalc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm-minus);
  border-radius: var(--radius-sm);
  padding: 0.55rem 0.85rem;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  text-decoration: none;
  border: 1px solid var(--surface-glass-20);
  transition: opacity var(--ease-fast);
  cursor: pointer;
}

.tbox-ahcalc-btn:hover { opacity: 0.92; }

.tbox-ahcalc-btn--primary {
  background: var(--tbox-btn-accent-bg);
  color: var(--tbox-btn-accent-text);
  border-color: var(--tbox-btn-accent-border);
}

.tbox-ahcalc-btn--ghost {
  background: var(--surface-glass-08);
  color: var(--text-inverse);
}

/* ============================================
   J-Calculator integration
   ============================================ */

/* Hide the j-calculator's internal period toggle and min/max display (we replace it) */
.tbox-ahcalc-section .j-calculator .currency-period .radio-block,
.tbox-ahcalc-section .j-calculator .period {
  display: none !important;
}

/* Keep j-calculator usable but more aligned with design */
.tbox-ahcalc-section .j-calculator .calc-block {
  border-radius: var(--radius-lg);
  border: 1px solid var(--ahcalc-slate-200);
  background: var(--surface-glass-70);
}

.tbox-ahcalc-section .j-calculator .calculator-right .currency-period {
  margin-top: var(--space-sm);
}

/* Style the language icons row */
.tbox-ahcalc-section .j-calculator .language-icons,
.tbox-ahcalc-section .j-calculator .lang-icons {
  background: rgb(2 6 23 / 3%);
  border-radius: var(--radius-md);
  padding: var(--space-sm);
  margin-top: var(--space-sm);
}

/* ============================================
   Responsive
   ============================================ */
@media (width <= 960px) {
  #tbox-app-hosting-configurator {
    padding: 0 0.5rem;
  }

  .tbox-ahcalc-grid {
    grid-template-columns: 1fr;
  }

  .tbox-ahcalc-pricing-sidebar {
    position: relative;
    top: 0;
  }

  .tbox-ahcalc-pricing-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
    padding: var(--space-lg-plus);
    --ahcalc-pricing-card-pad: var(--space-lg-plus);
  }

  .tbox-ahcalc-pricing-card .pricing-total {
    grid-column: 1 / -1;
    margin-bottom: 0;
    margin-inline: calc(-1 * var(--ahcalc-pricing-card-pad) - 1px);
  }

  .tbox-ahcalc-pricing-card .tbox-ahcalc-cta-btn {
    grid-column: 1 / -1;
  }

  .tbox-ahcalc-pricing-card .cta-microcopy {
    grid-column: 1 / -1;
    margin-top: var(--space-sm);
  }

  .tbox-ahcalc-pricing-card .pricing-breakdown {
    grid-column: 1 / -1;
    margin-top: 0;
  }

  .tbox-ahcalc-presets {
    grid-template-columns: 1fr;
  }

  .tbox-ahcalc-estimates {
    grid-template-columns: 1fr;
  }

  .tbox-ahcalc-sticky__inner {
    grid-template-columns: 1fr;
  }

  .tbox-ahcalc-sticky__actions {
    justify-content: flex-start;
  }

  .tbox-ahcalc-rail {
    grid-template-columns: repeat(2, 1fr);
  }

  .tbox-ahcalc-head-controls {
    width: 100%;
    justify-content: flex-start;
  }
}

@media (width <= 600px) {
  .tbox-ahcalc-fields-grid {
    grid-template-columns: 1fr;
  }

  .tbox-ahcalc-stack-row {
    flex-direction: column;
    align-items: stretch;
  }

  .tbox-ahcalc-stack-right {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-md-minus);
  }

  .tbox-ahcalc-stack-controls {
    width: 100%;
  }

  .tbox-ahcalc-stack-limits {
    grid-template-columns: 1fr;
  }

  .tbox-ahcalc-dblb {
    white-space: normal;
  }

  .tbox-ahcalc-pricing-card {
    display: block;
    padding: var(--space-lg-plus);
    --ahcalc-pricing-card-pad: var(--space-lg-plus);
  }

  .tbox-ahcalc-pricing-card .pricing-total {
    margin-bottom: var(--space-md);
  }

  .tbox-ahcalc-pricing-card__toggle {
    display: flex;
  }

  .tbox-ahcalc-pricing-card .pricing-breakdown {
    margin-top: var(--space-lg);
    display: none;
  }

  .tbox-ahcalc-pricing-card.is-breakdown-open .pricing-breakdown {
    display: block;
  }

  .tbox-ahcalc-rail {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  .tbox-ahcalc-step {
    padding: 0.4rem 0.5rem;
    font-size: var(--fs-sm);
  }

  .tbox-ahcalc-step .num {
    width: 1.35rem;
    height: 1.35rem;
    font-size: var(--fs-xs);
  }

  /* Hide topology diagram — too cramped at mobile widths */
  .tbox-ahcalc-topology-preview {
    display: none;
  }

  /* Preset tabs: horizontal scroll instead of wrapping grid/flex */
  .tbox-ahcalc-presets {
    display: flex;
    overflow-x: auto;
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: var(--space-sm);
  }

  .tbox-ahcalc-presets::-webkit-scrollbar {
    display: none;
  }

  .tbox-ahcalc-preset {
    flex-shrink: 0;
    min-height: 48px;
  }
}

/* ============================================
   Hide legacy j-calculator UI
   ============================================ */
.tbox-ahcalc-jcalc-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ============================================
   Compact Page Header (tbox-hero-v3 variant for calc)
   ============================================ */

/* ============================================
   Preset Enhancements
   ============================================ */
.tbox-ahcalc-preset--recommended {
  position: relative;
  border: 2px solid var(--ahcalc-accent-400);
  background: rgb(34 211 238 / 4%);
}

.tbox-ahcalc-preset--recommended .recommended-badge {
  position: absolute;
  top: -10px;
  right: 12px;
  background: var(--ahcalc-accent-500);
  color: var(--text-inverse);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-xs);
}

.tbox-ahcalc-preset .est-price {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--ahcalc-slate-200);
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--ahcalc-accent-600);
}

/* ============================================
   Help Prompt in Sidebar
   ============================================ */
.tbox-ahcalc-help-prompt {
  margin-top: var(--space-lg);
  padding: var(--space-lg);
  background: var(--surface-glass-08);
  border: 1px solid var(--surface-glass-12);
  border-radius: var(--radius-md);
  text-align: center;
}

.tbox-ahcalc-chat-link {
  display: inline-block;
  padding: var(--space-sm) var(--space-lg);
  background: rgb(34 211 238 / 20%);
  border: 1px solid rgb(34 211 238 / 30%);
  border-radius: var(--radius-sm);
  color: var(--ahcalc-accent-300);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  text-decoration: none;
  transition: all var(--ease-fast);
}

.tbox-ahcalc-chat-link:hover {
  background: rgb(34 211 238 / 30%);
  border-color: rgb(34 211 238 / 50%);
  color: var(--text-inverse);
}

/* ============================================
   Comparison Section
   ============================================ */
.tbox-ahcalc-comparison-section,
.tbox-comparison-section {
  background: var(--ahcalc-slate-50);
  padding: 4rem var(--space-xl);
}

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

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

:where(.tbox-ahcalc-comparison-table th),
: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-ahcalc-comparison-table td),
:where(.tbox-comparison-table td) {
  font-size: var(--fs-md);
  color: var(--ahcalc-slate-700);
}

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

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

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

/* ============================================
   How it Works / FAQ Section
   ============================================ */
.tbox-ahcalc-howitworks-section {
  background: var(--ahcalc-slate-50);
  padding: 4rem var(--space-xl);
}

.tbox-ahcalc-tabs {
  max-width: 900px;
  margin: 0 auto;
}

.tbox-ahcalc-tab-buttons {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--ahcalc-slate-200);
  margin-bottom: var(--space-2xl);
}

.tbox-ahcalc-tab-buttons button[aria-selected="true"] {
  color: var(--ahcalc-accent-600);
  border-bottom-color: var(--ahcalc-accent-500);
}

.tbox-ahcalc-howitworks-content {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-2xl);
}

.tbox-ahcalc-howitworks-item {
  padding: var(--space-xl);
  background: var(--surface-base);
  border: 1px solid var(--ahcalc-slate-200);
  border-radius: var(--radius-12);
}

.tbox-ahcalc-link {
  display: inline-block;
  margin-top: var(--space-md);
  color: var(--ahcalc-accent-600);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  text-decoration: none;
}

.tbox-ahcalc-link:hover {
  text-decoration: underline;
}

.tbox-ahcalc-faq-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tbox-ahcalc-faq-item {
  background: var(--surface-base);
  border: 1px solid var(--ahcalc-slate-200);
  border-radius: var(--radius-md);
  overflow: hidden;
}

/* ============================================
   Final CTA Section
   ============================================ */
.tbox-ahcalc-final-cta-section {
  background: var(--ahcalc-hero-grad-start);
  padding: 4rem var(--space-xl);
  text-align: center;
}

.tbox-ahcalc-final-cta-inner {
  max-width: 700px;
  margin: 0 auto;
}

.tbox-ahcalc-final-cta-buttons {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.tbox-ahcalc-btn--final-primary {
  background: var(--tbox-btn-accent-bg);
  color: var(--tbox-btn-accent-text);
  border: 1px solid var(--tbox-btn-accent-border);
  padding: 1rem 2rem;
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--ease-fast);
  box-shadow: none;
}

.tbox-ahcalc-btn--final-primary:hover {
  background: var(--tbox-btn-accent-bg-hover);
  box-shadow: none;
}

.tbox-ahcalc-btn--final-secondary {
  background: transparent;
  color: var(--text-inverse);
  padding: 1rem 1.75rem;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  border: 1px solid var(--surface-glass-30);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: all var(--ease-fast);
}

.tbox-ahcalc-btn--final-secondary:hover {
  background: var(--surface-glass-10);
  border-color: var(--surface-glass-50);
}

.tbox-ahcalc-final-cta-microcopy {
  font-size: var(--fs-base);
  color: var(--surface-glass-50);
  line-height: var(--lh-normal);
  margin: 0;
}

/* ============================================
   Theme specificity overrides
   The base theme applies #content div/p rules that override component typography.
   Scope fixes to calculator + injected sections only.
   ============================================ */

:root[data-theme="dark"] .tbox-ahcalc-pricing-card {
  background: var(--ahcalc-slate-900);
  border-color: rgb(34 211 238 / 18%);
}

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

/* Help prompt "Need help sizing?" — glass token above overrides light-mode; restore readable text here */
:root:not([data-theme="dark"]) #tbox-app-hosting-configurator .tbox-ahcalc-help-prompt p {
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-ahcalc-pricing-card .tbox-ahcalc-row { border-bottom-color: rgb(255 255 255 / 5%); }

#tbox-app-hosting-configurator .tbox-ahcalc-pricing-card .tbox-ahcalc-row {
  font-size: var(--fs-sm);
}

.tbox-ahcalc-comparison-section .tbox-ahcalc-comparison-footnote {
  color: var(--ahcalc-slate-500);
  line-height: var(--lh-relaxed);
}

.tbox-ahcalc-final-cta-section .tbox-ahcalc-final-cta-microcopy {
  font-size: var(--fs-base);
  color: var(--surface-glass-50);
  line-height: var(--lh-normal);
}

@media (width <= 600px) {
  #tbox-app-hosting-configurator .tbox-ahcalc-step {
    font-size: var(--fs-sm);
  }
}

/* ============================================
   Responsive - New Sections
   ============================================ */
@media (width <= 960px) {
  .tbox-ahcalc-howitworks-content {
    grid-template-columns: 1fr;
  }
}

@media (width <= 600px) {
  .tbox-ahcalc-comparison-section,
.tbox-ahcalc-howitworks-section,
.tbox-ahcalc-final-cta-section {
    padding: 3rem 1rem;
  }

  .tbox-ahcalc-final-cta-section h2 {
    font-size: var(--fs-heading-md);
  }

  .tbox-ahcalc-final-cta-buttons {
    flex-direction: column;
  }

  .tbox-ahcalc-btn--final-primary,
.tbox-ahcalc-btn--final-secondary {
    width: 100%;
    text-align: center;
  }
}

/* ============================================
   Legacy calculator layout (class-based)
   ============================================ */

/* ============================================
   App Hosting Calc V3 — Topology-first layout
   ============================================ */

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 {
  color: var(--text-primary);
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
}

:root[data-theme="dark"] .tbox-ahcalc-select {
  background-color: var(--surface-glass-08);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
  background-position: calc(100% - 14px) calc(50% - 1px), calc(100% - 9px) calc(50% - 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  border-color: var(--border-mid);
  color: var(--text-primary);
  color-scheme: dark;
}

:root[data-theme="dark"] .tbox-ahcalc-select:focus,
:root[data-theme="dark"] .tbox-ahcalc-select:focus-visible {
  background-color: var(--surface-glass-12);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-select {
  background-color: var(--surface-base);
  border-color: var(--border-light);
  color: var(--text-primary);
  background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%),
    linear-gradient(135deg, var(--text-muted) 50%, transparent 50%);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-v3-preset-select {
  flex: 0 1 300px;
  min-width: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 336px;
  gap: var(--space-lg-plus);
  align-items: start;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-topo-panel {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

#tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell {
  position: relative;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-preset-bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-subtle);
  flex-wrap: nowrap;
}

@media (width <= 600px) {
  #tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell {
    overflow: hidden;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell::before,
#tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell::after {
    position: absolute;
    top: 0;
    bottom: 0;
    width: clamp(2.25rem, 12vw, 3.1rem);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-2xl);
    font-weight: 900;
    color: color-mix(in srgb, var(--brand-primary-text) 72%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--ease-fast);
    z-index: 2;
  }

  /* Scroll-fade gradients removed (designcheck) — keep arrow characters */
  #tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell::before {
    content: '\2039';
    left: 0;
    padding-left: 0.15rem;
    background: transparent;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell::after {
    content: '\203A';
    right: 0;
    padding-right: 0.15rem;
    background: transparent;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell.tbox-ahcalc-swipe-shell--active.can-scroll-left::before,
#tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell.tbox-ahcalc-swipe-shell--active.can-scroll-right::after {
    opacity: 1;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell.tbox-ahcalc-swipe-shell--active.is-swiped::before,
#tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell.tbox-ahcalc-swipe-shell--active.is-swiped::after {
    opacity: 0 !important;
  }

  /* Narrow viewports: let the Reset/Share action group wrap below the
     label + select instead of horizontally scrolling. */
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-preset-bar {
    flex-wrap: wrap;
  }
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-preset-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-right: 0;
  flex: 0 0 auto;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-panel-actions {
  display: flex;
  gap: var(--space-2xs);
  flex: 0 0 auto;
  margin-left: auto;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-preset-spacer {
  flex: 1 1 auto;
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-preset {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2xs);
  padding: 0.35rem var(--space-sm-plus);
  border-radius: var(--radius-sm);
  border: 1px solid var(--border-light);
  background: var(--surface-base);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: border-color var(--ease-fast), color var(--ease-fast), background var(--ease-fast);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-preset:hover {
  border-color: var(--focus-ring-strong);
  color: var(--brand-primary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-preset--active,
#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-preset--recommended.tbox-ahcalc-preset--active {
  background: var(--brand-primary);
  border-color: var(--brand-primary);
  color: var(--text-inverse);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-preset--active:hover {
  color: var(--text-inverse);
}

/* Preset pop animation removed (decorative scale transform) */

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-preset--custom {
  background: transparent;
  border-style: dashed;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-body {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-diagram {
  position: relative;
  padding: var(--space-md);
  border-right: 1px solid var(--border-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--surface-subtle);
  min-width: 0;
}

/* Mobile overview + layer rail */
.tbox-ahcalc-v3-mobile-overview,
.tbox-ahcalc-v3-layer-rail,
.tbox-ahcalc-swipe-shell--layers {
  display: none;
}

.tbox-ahcalc-v3-mobile-overview {
  padding: var(--space-md-plus) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  background: var(--surface-subtle);
}

.tbox-ahcalc-v3-mobile-overview__label {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  color: var(--text-muted);
}

.tbox-ahcalc-v3-mobile-overview__preset {
  margin-top: var(--space-xs);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
  letter-spacing: var(--ls-tight);
}

.tbox-ahcalc-v3-mobile-overview__stats {
  margin-top: var(--space-md);
}

.tbox-ahcalc-v3-mobile-stat {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-xs) 0;
}

.tbox-ahcalc-v3-mobile-stat + .tbox-ahcalc-v3-mobile-stat {
  border-top: 1px solid var(--border-light);
}

.tbox-ahcalc-v3-mobile-stat__label {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.tbox-ahcalc-v3-mobile-stat__value {
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
  color: var(--text-primary);
}

.tbox-ahcalc-v3-layer-rail {
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-lg);
  flex-wrap: wrap;
  background: var(--surface-base);
  border-bottom: 1px solid var(--border-light);
}

.tbox-ahcalc-v3-layer-rail::-webkit-scrollbar {
  display: none;
}

.tbox-ahcalc-v3-layer-chip {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  min-width: 96px;
  padding: 0.7rem 0.85rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--surface-subtle);
  color: var(--text-primary);
  text-align: left;
  box-shadow: var(--shadow-sm);
  cursor: pointer;
}

.tbox-ahcalc-v3-layer-chip:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

.tbox-ahcalc-v3-layer-chip__name {
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  line-height: 1.1;
}

.tbox-ahcalc-v3-layer-chip__meta {
  margin-top: 0.18rem;
  font-size: var(--fs-2xs);
  color: var(--text-muted);
  line-height: var(--lh-tight);
}

.tbox-ahcalc-v3-layer-chip.is-selected {
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

.tbox-ahcalc-v3-layer-chip.is-enabled .tbox-ahcalc-v3-layer-chip__meta {
  color: var(--brand-primary-text);
}

.tbox-ahcalc-v3-layer-chip.is-disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

.tbox-ahcalc-v3-layer-chip--required {
  background: color-mix(in srgb, var(--brand-primary-bg) 75%, white);
}

@media (width <= 600px) {
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-diagram {
    display: none;
  }

  .tbox-ahcalc-v3-mobile-overview,
.tbox-ahcalc-v3-layer-rail {
    display: flex;
    grid-column: 1 / -1;
  }

  .tbox-ahcalc-v3-mobile-overview {
    display: block;
  }

  .tbox-ahcalc-swipe-shell--layers {
    display: block;
  }
}

/* Cloudlet note at bottom center of diagram */
.tbox-ahcalc-v3-cloudlet-note {
  margin-top: 0;
  padding-top: var(--space-md-plus);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  text-align: center;
  letter-spacing: var(--ls-wide);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-entry {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2xs);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-arrow {
  display: flex;
  justify-content: center;
  padding: 0.15rem 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-branch {
  padding: 0.35rem 0 0.1rem;
  width: 100%;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-row {
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  justify-content: center;
  width: 100%;
  padding-top: 0.2rem;
  flex-wrap: wrap;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-xs);
  flex: 0 1 auto;
  min-width: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-sub-arrow {
  padding: 0.15rem 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-conn {
  color: var(--border-muted);
  opacity: 0.9;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node {
  width: 100%;
  max-width: 208px;
  border: 2px solid var(--border-light);
  border-radius: var(--radius-12);
  background: var(--surface-base);
  padding: 0.5rem 0.9rem 0.75rem var(--space-sm-mid);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast), opacity var(--ease-fast);
  position: relative;
  text-align: left;
  color: var(--text-primary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node[hidden] {
  display: none;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-row .tbox-ahcalc-v3-node {
  max-width: 150px;
  padding: 0.45rem 0.5rem 0.55rem;
  gap: var(--space-2xs);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-row .tbox-ahcalc-v3-node-icon {
  width: 26px;
  height: 26px;
  font-size: var(--fs-lg);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node:hover {
  border-color: var(--focus-ring-strong);
  box-shadow: 0 2px 10px rgb(15 23 42 / 8%);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node.is-selected {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node:is(.is-off, .is-disabled) {
  opacity: 1;
  background: var(--surface-subtle);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node.is-off {
  border-style: dashed;
  border-color: var(--border-mid);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node.is-disabled {
  cursor: not-allowed;
  border-color: var(--border-light);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node:focus-visible {
  outline: none;
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-md);
  display: grid;
  place-items: center;
  font-size: var(--fs-xl);
  background: var(--brand-primary-bg);
  color: var(--brand-primary);
  flex-shrink: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node-text {
  min-width: 0;
  line-height: var(--lh-tight);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node-name {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-extrabold);
  color: var(--text-primary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node-sub {
  display: block;
  font-size: var(--fs-base);
  color: var(--text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node:is(.is-off, .is-disabled) .tbox-ahcalc-v3-node-icon {
  opacity: 0.7;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node:is(.is-off, .is-disabled) .tbox-ahcalc-v3-node-name {
  color: var(--text-secondary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node:is(.is-off, .is-disabled) .tbox-ahcalc-v3-node-sub {
  color: var(--text-secondary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node-badge {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 20px;
  height: 20px;
  min-height: 0;
  padding: 0;
  border-radius: 50%;
  background: var(--brand-primary-dark);
  color: var(--text-inverse);
  font-size: var(--fs-2xs);
  line-height: 1;
  font-weight: 900;
  display: grid;
  place-items: center;
  border: 2px solid var(--surface-subtle);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node-dismiss {
  position: absolute;
  right: 6px;
  bottom: 6px;
  width: 18px;
  height: 18px;
  border-radius: var(--radius-cap);
  border: 1px solid var(--border-light);
  background: var(--surface-subtle);
  color: var(--text-muted);
  font-size: var(--fs-base);
  font-weight: var(--fw-extrabold);
  line-height: 1;
  display: grid;
  place-items: center;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.88);
  transition: opacity var(--ease-fast), transform var(--ease-fast), color var(--ease-fast), border-color var(--ease-fast), background var(--ease-fast);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node.has-dismiss:hover .tbox-ahcalc-v3-node-dismiss,
#tbox-app-hosting-configurator .tbox-ahcalc-v3-node.has-dismiss:focus-visible .tbox-ahcalc-v3-node-dismiss {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node.has-dismiss .tbox-ahcalc-v3-node-dismiss:hover {
  border-color: var(--ahcalc-toast-error-start);
  color: var(--ahcalc-toast-error-end);
  background: rgb(220 38 38 / 16%);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node--sub {
  width: 100%;
  max-width: 184px;
  padding: 0.4rem 0.8rem var(--space-sm-mid) 0.55rem;
  border-width: 1.5px;
  margin-left: 0;
  align-self: center;
}

/* stylelint-disable-next-line no-descending-specificity */
#tbox-app-hosting-configurator .tbox-ahcalc-v3-node--sub .tbox-ahcalc-v3-node-icon {
  width: 26px;
  height: 26px;
  border-radius: var(--radius-sm-plus);
  font-size: var(--fs-lg);
}

/* stylelint-disable-next-line no-descending-specificity */
#tbox-app-hosting-configurator .tbox-ahcalc-v3-node--sub .tbox-ahcalc-v3-node-name {
  font-size: var(--fs-base);
}

/* stylelint-disable-next-line no-descending-specificity */
#tbox-app-hosting-configurator .tbox-ahcalc-v3-node--sub .tbox-ahcalc-v3-node-sub {
  font-size: var(--fs-base);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-col--db .tbox-ahcalc-v3-sub-arrow {
  align-self: center;
}

/* Ghost container for disabled ProxySQL — centered below the row */
#tbox-app-hosting-configurator .tbox-ahcalc-v3-proxy-ghost {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: var(--space-sm);
  opacity: 0.3;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-proxy-ghost[hidden] {
  display: none;
}

/* Override sub-node right-alignment when in ghost position */
#tbox-app-hosting-configurator .tbox-ahcalc-v3-proxy-ghost .tbox-ahcalc-v3-node--sub {
  align-self: center;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-proxy-ghost .tbox-ahcalc-v3-sub-arrow {
  align-self: center;
}

@media (hover: none) {
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-node.has-dismiss .tbox-ahcalc-v3-node-dismiss {
    opacity: 1;
    pointer-events: auto;
    transform: scale(1);
  }
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-conn--branch {
  width: 100%;
  height: 48px;
  display: block;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector {
  display: flex;
  flex-direction: column;
  background: var(--surface-base);
  min-width: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-head {
  padding: 0.9rem 1rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  gap: var(--space-sm-mid);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-12);
  display: grid;
  place-items: center;
  /* Opaque blend mirrors alpha tint over surface-base for alpha-naive auditors. */
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary));
  color: var(--text-primary);
  font-size: var(--fs-2xl);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-titles {
  min-width: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-title {
  font-size: var(--fs-md);
  font-weight: 900;
  letter-spacing: var(--ls-tight);
  color: var(--text-primary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-subtitle {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  margin-top: 0.05rem;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-toggle {
  margin-left: auto;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  cursor: pointer;
  user-select: none;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-switch .track {
  width: 40px;
  height: 22px;
  border-radius: var(--radius-cap);
  background: var(--switch-track-bg);
  border: 1px solid var(--switch-track-border);
  position: relative;
  transition: background var(--ease-fast), border-color var(--ease-fast);
  flex-shrink: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-switch .track::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--switch-knob-bg);
  top: 50%;
  left: 3px;
  transform: translateY(-50%);
  box-shadow: var(--switch-knob-shadow);
  transition: transform var(--ease-fast);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-switch input:checked + .track {
  background: var(--switch-track-active-bg);
  border-color: var(--switch-track-active-border);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-switch input:checked + .track::after {
  transform: translate(18px, -50%);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-switch input:focus-visible + .track {
  outline: none;
  box-shadow: 0 0 0 3px var(--switch-focus-ring);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-meta {
  padding: var(--space-sm-mid) 1rem 0.2rem;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-resources {
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-xs);
  color: var(--text-primary);
  font-variant-numeric: tabular-nums;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-cloudlets {
  display: none;
}

/* Cloudlet definition lives in the diagram footnote on desktop; the diagram is
   hidden ≤760px, so the inspector carries the definition there instead. */
#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-cloudlet-note {
  display: none;
  margin-top: var(--space-2xs);
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  letter-spacing: var(--ls-wide);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-body {
  padding: var(--space-md-plus) var(--space-lg) 1rem;
  overflow: auto;
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-resources .tbox-ahcalc-res__ram,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-resources .tbox-ahcalc-res__ram .tbox-ahcalc-res__label {
  color: var(--brand-primary);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-resources .tbox-ahcalc-res__cpu,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-resources .tbox-ahcalc-res__cpu .tbox-ahcalc-res__label {
  color: var(--brand-highlight);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-pane-section + .tbox-ahcalc-v3-pane-section {
  margin-top: var(--space-md-plus);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-pane-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md-plus);
  margin-top: var(--space-md-plus);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-extrabold);
  color: var(--text-secondary);
  margin-bottom: var(--space-2xs);
}

:root[data-theme="dark"] .tbox-ahcalc-card,
:root[data-theme="dark"] .tbox-ahcalc-stack-row,
:root[data-theme="dark"] .tbox-ahcalc-stepper {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-stepper {
  background: var(--surface-base);
  border-color: var(--border-light);
  box-shadow: inset 0 1px 0 var(--overlay-03);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-stepper-btn {
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-stepper-btn:hover {
  background: var(--surface-muted);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-stepper-btn:active {
  background: var(--surface-muted);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-stepper:focus-within {
  border-color: var(--brand-primary);
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-pane-section .tbox-ahcalc-stepper,
#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .tbox-ahcalc-stepper {
  border: 1px solid var(--border-light);
  background: transparent;
  box-shadow: none;
  border-radius: var(--radius-sm);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .tbox-ahcalc-stepper input,
#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .tbox-ahcalc-input-group .tbox-ahcalc-input {
  font-family: var(--ahcalc-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  background: var(--surface-white);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-hint {
  margin-top: var(--space-sm-minus);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  line-height: var(--lh-snug);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-strip {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2xl);
  padding: var(--space-lg) var(--space-xl);
  border-top: 1px solid var(--border-light);
  background: var(--surface-white);
  flex-wrap: wrap;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs-plus) var(--space-sm);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .k {
  flex: 0 0 100%;
  font-size: 0.65rem; /* intentional literal */
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .unit {
  color: var(--text-secondary);
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.04em;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item--traffic {
  flex: 0 0 auto;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item--traffic .tbox-ahcalc-input {
  width: 4.2rem;
  flex: none;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item--traffic .tbox-ahcalc-toggle > button {
  padding-inline: var(--space-sm);
  font-size: var(--fs-xs);
}

/* Compact typography so disk / IP / traffic fit on one row */
#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-strip .tbox-ahcalc-stepper input {
  font-size: var(--fs-xs);
  width: 3rem;
  padding-inline: 0.3rem;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-strip .tbox-ahcalc-stepper-btn {
  font-size: var(--fs-xs);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-strip .tbox-ahcalc-v3-global-item .unit {
  display: none;
}

/* Traffic stepper nested inside the unit-toggle group: the input group is
   the single outer frame, so the inner stepper drops its own chrome. */
#tbox-app-hosting-configurator .tbox-ahcalc-input-group .tbox-ahcalc-stepper {
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: transparent;
}

/* Desktop: disk / IP / traffic usage strip. The three items sit inside a
   display:contents <details> wrapper, so layout is applied to the wrapper
   body that actually parents them. Traffic carries a stepper plus a unit
   toggle, so the row is content-sized (flex) rather than forced into equal
   thirds, which would clip the traffic stepper's + button. */
@media (width >= 761px) {
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-strip {
    display: block;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-strip .tbox-ahcalc-mobile-advanced__body {
    display: flex;
    flex-wrap: nowrap;
    gap: var(--space-md) var(--space-xl);
    align-items: start;
  }

  /* Allow disk / IP items to shrink below their intrinsic width so all three fit on one row */
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-strip .tbox-ahcalc-v3-global-item:not(.tbox-ahcalc-v3-global-item--traffic) {
    min-width: 0;
  }
}

@media (width <= 1080px) {
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-grid {
    grid-template-columns: 1fr;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-pricing-sidebar {
    position: static;
    top: auto;
  }
}

@media (width <= 760px) {
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-row {
    flex-direction: column;
    align-items: center;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-col {
    flex: none;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-row .tbox-ahcalc-v3-node {
    max-width: 192px;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-body {
    grid-template-columns: 1fr;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-diagram {
    border-right: none;
    border-bottom: 1px solid var(--border-light);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item,
#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item--traffic {
    display: grid;
    gap: var(--space-xs);
    padding: var(--space-sm-mid);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-subtle);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .tbox-ahcalc-stepper,
#tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .tbox-ahcalc-input-group {
    width: 100%;
    grid-column: 1 / -1;
  }

  /* Traffic: stack the unit toggle below a full-width stepper so the
     numeric field gets the same room as the disk / IP steppers. */
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item--traffic .tbox-ahcalc-input-group {
    flex-wrap: wrap;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-input-group .tbox-ahcalc-stepper {
    flex: 1 1 100%;
    width: auto;
    min-width: 0;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item--traffic .tbox-ahcalc-toggle {
    flex: 1 0 100%;
    border-left: 0;
    border-top: 1px solid var(--ahcalc-slate-200);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .tbox-ahcalc-stepper input {
    flex: 1;
    width: auto;
    min-width: 0;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .tbox-ahcalc-toggle button {
    padding-inline: var(--space-sm);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item--traffic .tbox-ahcalc-toggle button {
    flex: 1;
  }

  /* GiB unit sits inline beside the stepper via a 2-column grid */
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item {
    grid-template-columns: 1fr auto;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .k {
    grid-column: 1 / -1;
  }

  /* Disk only: stepper in col 1 so GiB sits inline in col 2 */
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item:has(.unit) .tbox-ahcalc-stepper {
    grid-column: 1;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item .unit {
    align-self: center;
  }
}

/* ============================================
   Pricing Sidebar — Light-Mode Card Override
   Match cloud-vps style: blue header, white body, grey footer
   ============================================ */

/* Section 1: Card container — white bg,
dark text,
clean shadow */

/* Section 2: Dark blue header band — continuous via shared solid color */

/* Section 5: Help prompt — grey footer band */
.tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt {
  margin: 1rem calc(-1 * var(--ahcalc-pricing-card-pad))
          calc(-1 * var(--ahcalc-pricing-card-pad));
  padding: var(--space-sm-mid) var(--ahcalc-pricing-card-pad);
  background: var(--surface-muted);
  border: none;
  border-top: 1px solid var(--border-light);
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  text-align: left;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt__icon {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--brand-primary);
}

:where(.tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt__icon svg) {
  width: 18px;
  height: 18px;
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt__content {
  margin: 0;
  font-size: var(--fs-sm);
  font-weight: var(--fw-medium);
  color: var(--text-primary);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-chat-link {
  margin-left: auto;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-xs);
  color: var(--brand-primary-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: color var(--ease-fast);
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-chat-link:hover {
  text-decoration: underline;
}

.tbox-ahcalc-pricing-card .tbox-ahcalc-chat-link:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

:root[data-theme="dark"] .tbox-ahcalc-pricing-card .pricing-breakdown { border-top-color: rgb(255 255 255 / 10%); }
:root[data-theme="dark"] .tbox-ahcalc-pricing-card .tbox-ahcalc-row .tbox-ahcalc-row__label { color: rgb(255 255 255 / 85%); }
:root[data-theme="dark"] .tbox-ahcalc-pricing-card .tbox-ahcalc-row .tbox-ahcalc-row__label-meta { color: rgb(255 255 255 / 70%); }
:root[data-theme="dark"] .tbox-ahcalc-pricing-card .tbox-ahcalc-row .tbox-ahcalc-row__value { color: var(--text-inverse); }

:root[data-theme="dark"] .tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt {
  background: rgb(255 255 255 / 8%);
  border-top-color: rgb(255 255 255 / 12%);
}

/* Narrow phones: the nowrap chat link squeezes the label into a ragged
   multi-line column; stack the link under the label instead. */
@media (width <= 430px) {
  .tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt {
    flex-wrap: wrap;
  }
  .tbox-ahcalc-pricing-card .tbox-ahcalc-help-prompt__content {
    flex: 1 1 auto;
  }
  .tbox-ahcalc-pricing-card .tbox-ahcalc-chat-link {
    flex-basis: 100%;
    margin-left: calc(18px + var(--space-xs));
  }
}

/* ═══════════════════════════════════════════
   Pricing Reference — Tabbed Card
   ═══════════════════════════════════════════ */
.tbox-ahcalc-pricing-ref {
  padding: var(--space-section-y) 0;
  background: var(--surface-subtle, var(--ahcalc-slate-50));
  border-top: 1px solid var(--border-light, var(--ahcalc-slate-200));
}

.tbox-ahcalc-pricing-ref-header { text-align: center; margin-bottom: var(--space-2xl-plus); }

.tbox-ahcalc-pricing-ref-title {
  font-size: clamp(1.35rem, 2.5vw, 1.75rem);
  font-weight: var(--fw-bold);
}

.tbox-ahcalc-pricing-ref-subtitle {
  font-size: var(--fs-base);
  color: var(--text-secondary, var(--ahcalc-slate-600));
  margin-top: 0.3rem;
}

.tbox-ahcalc-pricing-card-wrap {
  max-width: 1000px;
  margin: 0 auto;
  background: var(--surface-base, #fff);
  border: 1px solid var(--border-light, var(--ahcalc-slate-200));
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tbox-ahcalc-cl-range-card.tbox-card:hover,
.tbox-ahcalc-resource-card.tbox-card:hover,
.tbox-ahcalc-license-card.tbox-card:hover {
  transform: none;
  box-shadow: none;
}

/* Tabs */
.tbox-ahcalc-pricing-card__tabs {
  display: flex;
  border-bottom: 1px solid var(--border-light, var(--ahcalc-slate-200));
  background: var(--surface-subtle, var(--ahcalc-slate-50));
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
}

.tbox-ahcalc-pricing-card__tab {
  padding: 0.85rem 1.35rem;
  font-family: var(--ahcalc-font);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-muted, var(--ahcalc-slate-500));
  background: none;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: color var(--ease-fast), border-color var(--ease-fast);
}
.tbox-ahcalc-pricing-card__tab:hover { color: var(--text-primary, var(--ahcalc-slate-900)); }

.tbox-ahcalc-pricing-card__tab:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: calc(var(--focus-outline-offset) * -1);
}

.tbox-ahcalc-pricing-card__tab--active {
  color: var(--brand-primary-text);
  border-bottom-color: var(--brand-primary);
  background: var(--surface-base, #fff);
}

.tbox-ahcalc-pricing-card__mobile-toggle {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-sm);
  padding: 1rem 1.25rem;
  background: var(--surface-base, #fff);
  border: none;
  border-top: 1px solid var(--border-light, var(--ahcalc-slate-200));
  color: var(--text-primary, var(--ahcalc-slate-900));
  font-size: var(--fs-sm);
  font-weight: var(--fw-extrabold);
  text-align: left;
  cursor: pointer;
}

.tbox-ahcalc-pricing-card__mobile-toggle::after {
  content: '\2304';
  font-size: var(--fs-base);
  line-height: 1;
  color: var(--text-muted, var(--ahcalc-slate-500));
  transition: transform var(--ease-fast), color var(--ease-fast);
}

.tbox-ahcalc-pricing-card__mobile-toggle:hover,
.tbox-ahcalc-pricing-card__mobile-toggle:focus-visible {
  background: var(--surface-subtle, var(--ahcalc-slate-50));
}

.tbox-ahcalc-pricing-card__mobile-toggle:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: calc(var(--focus-outline-offset) * -1);
}

.tbox-ahcalc-pricing-card__mobile-toggle--active {
  color: var(--brand-primary-text);
  background: var(--brand-primary-10);
}

.tbox-ahcalc-pricing-card__mobile-toggle--active::after {
  transform: rotate(180deg);
  color: var(--brand-primary-text);
}

/* Panels */
.tbox-ahcalc-pricing-card__panel { padding: 1.75rem 2rem; display: none; }
.tbox-ahcalc-pricing-card__panel--active { display: block; }

@media (width <= 600px) { .tbox-ahcalc-pricing-card__panel { padding: 1.25rem 1rem; } }

.tbox-ahcalc-pricing-card__panel-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: var(--space-lg-plus);
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.tbox-ahcalc-pricing-card__panel-title { font-size: var(--fs-xl); font-weight: var(--fw-bold); }

.tbox-ahcalc-pricing-card__panel-note {
  font-size: var(--fs-xs);
  color: var(--text-secondary, var(--ahcalc-slate-600));
  font-variant-numeric: tabular-nums;
}

/* Cloudlet range summary */
.tbox-ahcalc-cl-range-band { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-lg); margin-bottom: var(--space-2xl); }

@media (width <= 600px) { .tbox-ahcalc-cl-range-band { grid-template-columns: 1fr; } }

.tbox-ahcalc-cl-range-card {
  padding: var(--space-lg-plus);
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light, var(--ahcalc-slate-200));
}

.tbox-ahcalc-cl-range-card--reserved {
  background: var(--brand-primary-10);
  border-color: var(--brand-primary-bg);
}

.tbox-ahcalc-cl-range-card--scaling {
  background: color-mix(in srgb, var(--brand-highlight) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand-highlight) 20%, transparent);
}

.tbox-ahcalc-cl-range-card__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-sm-minus);
}
.tbox-ahcalc-cl-range-card--reserved .tbox-ahcalc-cl-range-card__label { color: var(--brand-primary-text); }
.tbox-ahcalc-cl-range-card--scaling .tbox-ahcalc-cl-range-card__label { color: var(--state-warning-text); }

.tbox-ahcalc-cl-range-card__desc {
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--ahcalc-slate-500));
  line-height: var(--lh-relaxed);
  margin-bottom: var(--space-sm-mid);
}

.tbox-ahcalc-cl-range-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2xs) 0;
}
.tbox-ahcalc-cl-range-row + .tbox-ahcalc-cl-range-row { border-top: 1px solid var(--border-light, var(--ahcalc-slate-200)); }
.tbox-ahcalc-cl-range-row__label { font-size: var(--fs-xs); color: var(--text-secondary, var(--ahcalc-slate-600)); }

.tbox-ahcalc-cl-range-row__value {
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--text-primary, var(--ahcalc-slate-900));
  font-variant-numeric: tabular-nums;
}

/* Volume table */
.tbox-ahcalc-vol-table-wrap { margin-top: var(--space-lg-plus);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch; }

.tbox-ahcalc-vol-table-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary, var(--ahcalc-slate-600));
  margin-bottom: var(--space-sm);
}
.tbox-ahcalc-vol-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.tbox-ahcalc-vol-table thead th.tbox-ahcalc-vol-table__th--reserved { color: var(--brand-primary-text); }
.tbox-ahcalc-vol-table thead th.tbox-ahcalc-vol-table__th--scaling { color: var(--state-warning-text); }

.tbox-ahcalc-vol-table__group-row th {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: var(--space-2xs);
  text-align: center;
}
.tbox-ahcalc-vol-table__group-row th:first-child { border: 0; }

.tbox-ahcalc-vol-table__avg-month { background: var(--brand-primary-14); }
.tbox-ahcalc-vol-table__avg-month-scaling { background: color-mix(in srgb, var(--brand-highlight) 14%, transparent); }

:root[data-theme="dark"] .tbox-ahcalc-vol-table__avg-month {
  background: var(--brand-primary-10);
}
:root[data-theme="dark"] .tbox-ahcalc-vol-table__avg-month-scaling {
  background: color-mix(in srgb, var(--brand-highlight) 10%, transparent);
}
:root[data-theme="dark"] .tbox-ahcalc-vol-table__th--reserved {
  color: var(--brand-primary);
}

/* Resource cards */
.tbox-standard-features-grid--ahcalc-resources { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-lg); }

@media (width <= 768px) { .tbox-standard-features-grid--ahcalc-resources { grid-template-columns: repeat(2, 1fr); } }
@media (width <= 480px) { .tbox-standard-features-grid--ahcalc-resources { grid-template-columns: 1fr; } }

.tbox-ahcalc-resource-card {
  padding: var(--space-lg-plus);
  border: 1px solid var(--border-light, var(--ahcalc-slate-200));
  border-radius: var(--radius-md);
  background: var(--surface-subtle, var(--ahcalc-slate-50));
}

.tbox-ahcalc-resource-card__title { font-size: var(--fs-md); font-weight: var(--fw-bold); margin-bottom: 0.15rem; }
.tbox-ahcalc-resource-card__title a,
.tbox-ahcalc-license-card__name a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.15s ease-out;
}
.tbox-ahcalc-resource-card__title a:hover,
.tbox-ahcalc-resource-card__title a:focus-visible,
.tbox-ahcalc-license-card__name a:hover,
.tbox-ahcalc-license-card__name a:focus-visible {
  border-bottom-color: currentColor;
}
.tbox-ahcalc-resource-card__included { font-size: var(--fs-xs); color: var(--text-muted, var(--ahcalc-slate-500)); margin-bottom: var(--space-md); }

.tbox-ahcalc-resource-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-2xs) 0;
}
.tbox-ahcalc-resource-card__row + .tbox-ahcalc-resource-card__row { border-top: 1px solid var(--border-light, var(--ahcalc-slate-200)); }
.tbox-ahcalc-resource-card__row-label { font-size: var(--fs-xs); color: var(--text-secondary, var(--ahcalc-slate-600)); }

.tbox-ahcalc-resource-card__row-value {
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary, var(--ahcalc-slate-900));
  font-variant-numeric: tabular-nums;
}

/* License cards */
.tbox-standard-features-grid--ahcalc-licenses { display: grid; grid-template-columns: 1fr; gap: var(--space-lg-plus); }

.tbox-ahcalc-license-card {
  padding: var(--space-lg-plus) var(--space-xl);
  border: 1px solid var(--border-light, var(--ahcalc-slate-200));
  border-radius: var(--radius-md);
  background: var(--surface-base, #fff);
}
.tbox-ahcalc-license-card__name { font-size: var(--fs-base); font-weight: var(--fw-bold); margin-bottom: var(--space-md); color: var(--brand-primary-text); }

.tbox-ahcalc-license-card__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--space-sm) 0;
  font-size: var(--fs-sm);
}
.tbox-ahcalc-license-card__row + .tbox-ahcalc-license-card__row { border-top: 1px solid var(--border-light, var(--ahcalc-slate-200)); }
.tbox-ahcalc-license-card__row-tier { color: var(--text-secondary, var(--ahcalc-slate-600)); }

.tbox-ahcalc-license-card__row-price {
  font-family: var(--ahcalc-mono);
  font-weight: var(--fw-semibold);
  color: var(--text-primary, var(--ahcalc-slate-900));
  font-variant-numeric: tabular-nums;
}
.tbox-ahcalc-license-card__row-price--free { color: var(--ahcalc-toast-success-end); font-family: var(--ahcalc-font); }

.tbox-ahcalc-license-card__row-price-sub {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-normal);
  color: var(--text-secondary);
  text-align: right;
}

.tbox-ahcalc-license-card__note {
  margin: var(--space-md) 0 0;
  padding-left: 1.2em;
  font-size: var(--fs-2xs);
  line-height: var(--lh-normal);
  color: var(--text-secondary, var(--ahcalc-slate-600));
  list-style: disc outside;
}
.tbox-ahcalc-license-card__note li + li {
  margin-top: 0.25rem;
}

/* Reset bento-grid base rules for pricing-ref resource & license cards */
.tbox-standard-features-grid--ahcalc-resources > .tbox-ahcalc-resource-card,
.tbox-standard-features-grid--ahcalc-licenses > .tbox-ahcalc-license-card {
  display: block;
  grid-column: span 1 !important;
  grid-row: auto !important;
  overflow: visible;
}

/* Pricing footer */
.tbox-ahcalc-pricing-card-wrap__footer {
  padding: var(--space-lg) var(--space-2xl);
  border-top: 1px solid var(--border-light, var(--ahcalc-slate-200));
  background: var(--surface-subtle, var(--ahcalc-slate-50));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

@media (width <= 600px) { .tbox-ahcalc-pricing-card-wrap__footer { padding: var(--space-md-plus) var(--space-lg); } }
.tbox-ahcalc-pricing-card-wrap__footer-link { font-size: var(--fs-base); font-weight: var(--fw-semibold); }

@media (width <= 760px) {
  .tbox-ahcalc-pricing-card__tabs {
    display: none;
  }

  .tbox-ahcalc-pricing-card__mobile-toggle {
    display: flex;
  }

  .tbox-ahcalc-pricing-card__mobile-toggle:first-of-type {
    border-top: none;
  }

  .tbox-ahcalc-pricing-card__panel {
    padding: 1.2rem 1rem 1.35rem;
  }

  .tbox-ahcalc-pricing-card__panel-header {
    margin-bottom: var(--space-md-plus);
  }

  .tbox-ahcalc-vol-table-wrap {
    overflow: visible;
  }

  .tbox-ahcalc-vol-table {
    width: 100%;
    min-width: 0;
    display: block;
  }

  .tbox-ahcalc-vol-table thead {
    display: none;
  }

  .tbox-ahcalc-vol-table tbody {
    display: grid;
    gap: var(--space-sm);
  }

  .tbox-ahcalc-vol-table tr {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-sm);
    padding: var(--space-md-plus);
    border: 1px solid var(--border-light, var(--ahcalc-slate-200));
    border-radius: var(--radius-md);
    background: var(--surface-subtle, var(--ahcalc-slate-50));
    box-shadow: var(--shadow-xs);
  }

  .tbox-ahcalc-vol-table td {
    display: grid;
    gap: 0.2rem;
    padding: 0;
    border: none;
    background: transparent;
    font-variant-numeric: tabular-nums;
  }

  .tbox-ahcalc-vol-table td::before {
    content: attr(data-label);
    font-size: 0.65rem; /* micro-UI: intentional literal */
    font-weight: var(--fw-extrabold);
    letter-spacing: var(--ls-wider);
    text-transform: uppercase;
    color: var(--text-muted, var(--ahcalc-slate-500));
  }

  .tbox-ahcalc-vol-table td:first-child {
    grid-column: 1 / -1;
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--border-light, var(--ahcalc-slate-200));
    font-size: var(--fs-base);
    font-weight: var(--fw-extrabold);
  }
}

/* ═══════════════════════════════════════════
   FAQ Section
   ═══════════════════════════════════════════ */
.tbox-ahcalc-faq {
  padding: 3rem 0;
  background: var(--surface-base, #fff);
  border-top: 1px solid var(--border-light, var(--ahcalc-slate-200));
}

.tbox-ahcalc-faq__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-lg-plus);
  flex-wrap: wrap;
  gap: var(--space-md);
}
.tbox-ahcalc-faq__title { font-size: var(--fs-2xl); font-weight: var(--fw-bold); }

.tbox-ahcalc-faq__tabs { display: flex; gap: var(--space-2xs); }

.tbox-ahcalc-faq__tab {
  padding: var(--space-2xs) var(--space-md-plus);
  border-radius: var(--radius-sm);
  font-family: var(--ahcalc-font);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  border: 1px solid var(--border-light, var(--ahcalc-slate-200));
  background: var(--surface-base, #fff);
  color: var(--text-secondary, var(--ahcalc-slate-600));
  transition: all var(--ease-fast);
}

.tbox-ahcalc-faq__tab[data-category="all"] {
  min-width: var(--min-touch-target);
}

.tbox-ahcalc-faq__tab:hover { border-color: var(--border-mid, var(--gray-300)); }

.tbox-ahcalc-faq__tab:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
}

.tbox-ahcalc-faq__tab--active {
  background: var(--brand-primary-dark);
  color: var(--text-inverse);
  border-color: var(--brand-primary-text);
}

.tbox-ahcalc-faq__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-sm);
}

@media (width <= 768px) { .tbox-ahcalc-faq__grid { grid-template-columns: 1fr; } }

.tbox-ahcalc-faq__item {
  display: flex;
  flex-direction: column;
  background: var(--surface-subtle, var(--ahcalc-slate-50));
  border: 1px solid var(--border-light, var(--ahcalc-slate-200));
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--ease-fast), box-shadow var(--ease-fast);
  overflow: hidden;
}
.tbox-ahcalc-faq__item:hover { border-color: var(--border-mid, var(--gray-300)); box-shadow: 0 1px 3px var(--overlay-06); }

.tbox-ahcalc-faq__item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-md-plus) 1.15rem;
}
.tbox-ahcalc-faq__item-q { font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--text-primary, var(--ahcalc-slate-900)); line-height: var(--lh-snug); }

.tbox-ahcalc-faq__item-chevron {
  font-size: var(--fs-xs);
  color: var(--text-disabled, var(--gray-400));
  flex-shrink: 0;
  margin-left: var(--space-sm);
  transition: transform var(--ease-base);
}
.tbox-ahcalc-faq__item--open .tbox-ahcalc-faq__item-chevron { transform: rotate(180deg); }

.tbox-ahcalc-faq__item-answer {
  display: none;
  padding: 0 1.15rem 1rem;
  font-size: var(--fs-sm);
  color: var(--text-secondary, var(--ahcalc-slate-600));
  line-height: var(--lh-relaxed);
}
.tbox-ahcalc-faq__item--open .tbox-ahcalc-faq__item-answer { display: block; }

/* ═══════════════════════════════════════════
   Closing CTA Related Links
   ═══════════════════════════════════════════ */
.tbox-cta-related {
  margin-top: var(--space-xl);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--surface-glass-10);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.tbox-cta-related__label {
  font-size: var(--fs-2xs);
  color: var(--surface-glass-40);
  font-weight: var(--fw-medium);
}

.tbox-cta-related__link {
  padding: 0.25rem var(--space-sm-mid);
  border-radius: var(--radius-sm-plus);
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: var(--surface-glass-75);
  background: var(--surface-glass-07);
  border: 1px solid var(--surface-glass-10);
  text-decoration: none;
  transition: background var(--ease-fast);
}

.tbox-cta-related__link:hover {
  background: var(--surface-glass-14);
  text-decoration: none;
  color: var(--surface-glass-90);
}

/* Managed Firewalls shared modules */

/**
 * Shared Managed Firewalls marketing modules.
 * Dark-mode overrides live in the dark-mode section below.
 */

/* stylelint-disable-next-line no-descending-specificity -- scoped override in managed-section */
a.tbox-card--interactive {
  display: grid;
  align-content: start;
  padding: var(--space-2xl);
  background-color: var(--surface-card);
  border: 1px solid var(--border-card);
  border-radius: var(--radius-xl);
  text-decoration: none;
  color: inherit;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 160ms ease, transform 160ms ease, border-color 160ms ease;
}

a.tbox-card--interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary-25);
  transform: translateY(-1px);
}

@media (prefers-reduced-motion: reduce) {
  a.tbox-card--interactive { transition: box-shadow 160ms ease, border-color 160ms ease; }
  a.tbox-card--interactive:hover { transform: none; }
}

a.tbox-card--interactive:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-callout {
  background: var(--surface-info-bg-strong);
  border: 1px solid var(--brand-primary-22);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
}

.tbox-spoke-overview :is(.tbox-callout, .tbox-callout--icon) {
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  max-width: 56rem;
}

@media (width <= 900px) {
  .tbox-standard-features-grid--feature-cards:not(.tbox-standard-features-grid--two-col) > a.tbox-card--interactive {
    grid-column: 1 / -1 !important;
  }
}

/* ── Storage spoke: hero + fan-out diagram ── */
.tbox-storage-hero .tbox-hero-v3__inner {
  display: grid;
  justify-items: center;
  text-align: center;
}

.tbox-storage-hero__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: center;
  max-width: var(--prose-measure-wide);
}

.tbox-storage-hero .tbox-hero-v3__title,
.tbox-storage-hero .tbox-hero-v3__subtitle {
  margin-inline: auto;
}

.tbox-storage-hero .tbox-hero-v3__cta-row {
  justify-content: center;
  margin: 0;
}

.tbox-ah-storage-fanout {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: clamp(var(--space-xl), 4vw, var(--space-3xl));
  background: var(--surface-base);
  border: 1px solid color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.tbox-ah-storage-fanout::before {
  content: "";
  position: absolute;
  inset: clamp(0.8rem, 2vw, 1.1rem);
  z-index: -1;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 11%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base));
}
.tbox-ah-storage-fanout__center {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.5rem;
  background: color-mix(in srgb, var(--brand-primary) 9%, var(--surface-base));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 52%, var(--border-light));
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-base) 70%, transparent) inset;
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  font-size: var(--fs-sm);
}
.tbox-ah-storage-fanout__center .material-symbols-outlined { font-size: 22px; }
.tbox-ah-storage-fanout__protocols {
  display: flex;
  gap: 0.75rem;
}
.tbox-ah-storage-fanout__protocol {
  padding: 0.35rem 0.7rem;
  border: 1px solid color-mix(in srgb, var(--border-light) 82%, var(--brand-primary) 18%);
  border-radius: var(--radius-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  background: var(--surface-base);
}
.tbox-ah-storage-fanout__arrow {
  display: flex;
  color: var(--brand-primary);
}
.tbox-ah-storage-fanout__targets {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.625rem;
  width: 100%;
}
.tbox-ah-storage-fanout__target {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--surface-base);
  border: 1px solid color-mix(in srgb, var(--border-light) 86%, var(--brand-primary) 14%);
  border-radius: var(--radius-sm);
  font-size: var(--fs-xs);
  color: var(--text-secondary);
}
.tbox-ah-storage-fanout__target .material-symbols-outlined { font-size: 18px; color: var(--brand-primary); }
:root[data-theme="dark"] .tbox-ah-storage-fanout {
  background: var(--surface-base);
  border-color: color-mix(in srgb, var(--border-mid) 76%, var(--brand-primary) 24%);
}
:root[data-theme="dark"] .tbox-ah-storage-fanout__protocol,
:root[data-theme="dark"] .tbox-ah-storage-fanout__target {
  background: var(--surface-base);
  border-color: var(--border-mid);
}
@media (width <= 600px) {
  .tbox-ah-storage-fanout__targets { grid-template-columns: 1fr; }
}

/* ── Storage spoke: sub-heading inside a section ── */
.tbox-ah-subheading { font-size: 1.25rem; }

/* ── Shared protocol comparison matrix ──
   Use `.tbox-protocol-matrix` + `.tbox-matrix-label` / `.tbox-matrix-value`
   for new cross-family matrices. The `tbox-ah-*` selectors remain as aliases
   for existing App Hosting markup during the compatibility window. */
:is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) .tbox-feature-matrix__header {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  background: color-mix(in srgb, var(--surface-subtle) 82%, var(--brand-primary-06) 18%);
  border-bottom: 1px solid color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
}
:is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) .tbox-feature-matrix__row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1rem;
  padding: 0.875rem 1rem;
  font-size: var(--fs-sm);
  align-items: center;
}
:is(.tbox-protocol-matrix--2col, .tbox-ah-protocol-matrix--2col) .tbox-feature-matrix__header,
:is(.tbox-protocol-matrix--2col, .tbox-ah-protocol-matrix--2col) .tbox-feature-matrix__row { grid-template-columns: 1fr 1.5fr; }
:is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) .tbox-feature-matrix__row:hover {
  background: var(--brand-primary-04);
}
:is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) :is(.tbox-matrix-label, .tbox-ah-matrix-label) {
  font-weight: 600;
  color: var(--text-primary);
}
:is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) :is(.tbox-matrix-value, .tbox-ah-matrix-value) {
  min-height: 2.25rem;
  display: flex;
  align-items: center;
  padding: 0.35rem 0.65rem;
  background: color-mix(in srgb, var(--surface-subtle) 58%, var(--surface-base) 42%);
  border: 1px solid color-mix(in srgb, var(--border-light) 72%, transparent);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}
:root[data-theme="dark"] :is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--surface-base) 84%, var(--brand-primary) 8%);
}
:root[data-theme="dark"] :is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) :is(.tbox-matrix-value, .tbox-ah-matrix-value) {
  background: var(--surface-base);
  border-color: var(--border-mid);
}
@media (width <= 600px) {
  :is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) .tbox-feature-matrix__header,
:is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) .tbox-feature-matrix__row { grid-template-columns: 1fr; gap: 0.25rem; }
  :is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) .tbox-feature-matrix__header > span:nth-child(2),
:is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) .tbox-feature-matrix__header > span:nth-child(3) { display: none; }
  :is(.tbox-protocol-matrix, .tbox-ah-protocol-matrix) :is(.tbox-matrix-value, .tbox-ah-matrix-value) { min-height: auto; }
}

/* ── Storage spoke: workload pattern cards ── */
#storage-types .tbox-card--feature {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  background: var(--surface-base);
  border-color: color-mix(in srgb, var(--border-light) 80%, var(--brand-primary) 20%);
}
.tbox-ah-storage-pattern__header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.tbox-ah-storage-pattern__header .material-symbols-outlined {
  flex: 0 0 auto;
  font-size: 20px;
  color: var(--brand-primary);
}
#content .tbox-ah-storage-pattern__header h3 {
  margin: 0;
}
#storage-types .tbox-card--feature p {
  margin-top: 0;
}
:root[data-theme="dark"] #storage-types .tbox-card--feature {
  background: var(--surface-base);
  border-color: var(--border-mid);
}

/* stylelint-disable no-duplicate-selectors -- storage route polish intentionally layers over shared spoke primitives. */
/* ── Storage spoke: route-scoped overrides ── */
#storage-overview.tbox-spoke-overview {
  padding-bottom: clamp(var(--space-4xl), 8vw, calc(var(--space-4xl) + var(--space-2xl)));
}

#storage-overview .tbox-split-layout {
  grid-template-columns: minmax(0, 0.94fr) minmax(22rem, 0.7fr);
  align-items: center;
  gap: clamp(var(--space-2xl), 5vw, calc(var(--space-4xl) + var(--space-xl)));
}

#storage-overview .tbox-extras-strip {
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-ah-storage-fanout {
  min-height: 20rem;
  box-shadow:
    0 1px 0 color-mix(in srgb, var(--surface-base) 70%, transparent) inset,
    0 14px 34px color-mix(in srgb, var(--surface-dark) 10%, transparent);
}

.tbox-ah-storage-fanout__center {
  min-width: min(100%, 14rem);
  justify-content: center;
}

.tbox-storage-node-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-xl);
  padding: clamp(var(--space-lg), 2.6vw, var(--space-2xl));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 34%, var(--surface-dark) 66%);
  border-radius: var(--radius-md);
  background: var(--surface-dark);
  color: var(--text-inverse);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--surface-dark) 12%, transparent);
}

.tbox-storage-node-cta .tbox-bento-cta-card__text {
  max-width: var(--prose-measure-wide);
}

.tbox-storage-node-cta :where(h4, p) {
  color: var(--text-inverse);
}

.tbox-storage-node-cta p {
  color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
}

.tbox-storage-node-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--space-sm);
}

.tbox-storage-node-cta__actions .tbox-chat-btn {
  border-color: color-mix(in srgb, var(--text-inverse) 36%, transparent);
  background: transparent;
  color: var(--text-inverse);
}

#protocol-comparison .tbox-protocol-matrix {
  box-shadow: var(--shadow-card-hairline);
}

#protocol-comparison .tbox-protocol-matrix .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--surface-muted) 74%, var(--surface-base) 26%);
}

#protocol-comparison .tbox-protocol-matrix .tbox-matrix-value {
  min-height: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-primary);
}

#protocol-comparison .tbox-protocol-matrix .tbox-feature-matrix__row {
  min-height: 4rem;
}

#storage-types .tbox-card--feature {
  box-shadow: var(--shadow-card-hairline);
}

:root[data-theme="dark"] #storage-overview .tbox-extras-strip,
:root[data-theme="dark"] #protocol-comparison .tbox-protocol-matrix,
:root[data-theme="dark"] #storage-types .tbox-card--feature {
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-storage-node-cta {
  border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--border-mid) 68%);
  background: var(--surface-base);
}

:root[data-theme="dark"] #protocol-comparison .tbox-protocol-matrix .tbox-matrix-value {
  background: transparent;
  border-color: transparent;
  color: var(--text-primary);
}

@media (width <= 900px) {
  #storage-overview .tbox-split-layout {
    grid-template-columns: 1fr;
  }

  .tbox-storage-node-cta {
    grid-template-columns: 1fr;
  }

  .tbox-storage-node-cta__actions {
    justify-content: flex-start;
  }
}

@media (width <= 600px) {
  .tbox-ah-storage-fanout {
    min-height: 0;
  }

  .tbox-storage-node-cta__actions,
.tbox-storage-node-cta__actions .tbox-btn {
    width: 100%;
  }

  .tbox-storage-node-cta__actions .tbox-btn {
    justify-content: center;
  }
}

/* stylelint-enable no-duplicate-selectors */

/* Marketplace search/typeahead UI */

/**
 * Marketplace search/typeahead UI.
 */

.tbox-marketplace-hero .tbox-hero-v3__inner {
  max-width: 920px;
}

.tbox-marketplace-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
}

.tbox-marketplace-intro {
  padding-block: clamp(var(--space-2xl), 4vw, var(--space-4xl)) clamp(var(--space-xl), 3vw, var(--space-2xl));
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--brand-primary-bg) 12%);
}

.tbox-marketplace-intro__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(320px, 0.78fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-4xl));
  align-items: end;
  padding-block-end: var(--space-xl);
  border-bottom: 1px solid color-mix(in srgb, var(--border-light) 82%, var(--brand-primary) 18%);
}

#content .tbox-marketplace-intro .tbox-section__heading {
  max-width: 18ch;
  margin-inline: 0;
  margin-bottom: 0;
  text-align: left;
}

.tbox-marketplace-intro .tbox-section__heading::after,
.tbox-marketplace-embed h2::after,
.tbox-marketplace-editable-section .tbox-section__heading::after {
  display: none;
}

.tbox-marketplace-intro__copy {
  max-width: var(--prose-measure-default);
  margin: 0;
  color: var(--text-secondary);
  font-size: clamp(var(--fs-md), 1.2vw, var(--fs-lg));
  line-height: var(--lh-relaxed);
}

.tbox-marketplace-embed {
  position: relative;
  max-width: 1140px;
}

.tbox-marketplace-embed::before {
  content: none;
}

.tbox-marketplace-embed__head {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(280px, 0.56fr);
  gap: clamp(var(--space-lg), 3vw, var(--space-3xl));
  align-items: end;
  margin-bottom: var(--space-xl);
}

.tbox-marketplace-embed__head h2 {
  max-width: 16ch;
  margin: 0;
  color: var(--text-primary);
  font-family: var(--ff-display);
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  line-height: var(--lh-tight);
  text-align: left;
}

.tbox-marketplace-embed__head p {
  max-width: var(--prose-measure-default);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.tbox-marketplace-embed .tbox-marketplace-search-row {
  display: flex;
  align-items: center;
  gap: var(--space-md-plus);
  flex-wrap: wrap;
  position: relative;
}

.tbox-marketplace-embed .tbox-marketplace-search-card {
  position: relative;
  z-index: 1000;
  padding: clamp(var(--space-md-plus), 2vw, var(--space-xl));
  border: 1px solid var(--border-light);
  background: var(--surface-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-marketplace-embed .tbox-marketplace-search-label {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin-bottom: var(--space-md);
}

.tbox-marketplace-embed .tbox-marketplace-search-input {
  flex: 1 1 320px;
  min-width: 220px;
  min-height: 3.35rem;
  padding: var(--space-md-plus) var(--space-lg);
  border-radius: var(--radius-sm-plus);
  border: 1px solid var(--border-mid);
  background: var(--surface-base);
  color: var(--text-primary);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--surface-dark) 4%, transparent);
}

.tbox-marketplace-embed > .tbox-card:not(.tbox-marketplace-search-card) {
  padding: clamp(var(--space-lg), 2.5vw, var(--space-2xl));
  border: 1px solid var(--border-light);
  background: var(--surface-base);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-marketplace-embed .tbox-marketplace-search-input:focus {
  outline: none;
  border-color: var(--focus-border);
  box-shadow: 0 0 0 4px var(--focus-ring-soft);
}

:root[data-theme="dark"] #content .tbox-marketplace-embed .tbox-marketplace-search-input:focus {
  border-color: var(--focus-border);
}

.tbox-marketplace-embed .tbox-marketplace-search-meta {
  margin: var(--space-md-plus) 0 0;
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.tbox-marketplace-embed .tbox-marketplace-search-empty {
  margin: 1rem 0 0;
  padding: 0.9rem 1rem;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.tbox-marketplace-embed .tbox-marketplace-search-clear[hidden],
.tbox-marketplace-embed .tbox-marketplace-search-empty[hidden] {
  display: none;
}

.tbox-mp-hidden {
  display: none;
}

.tbox-marketplace-typeahead[hidden] {
  display: none;
}

.tbox-marketplace-typeahead {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  right: 0;
  z-index: 50;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--surface-base);
  box-shadow: var(--shadow-md);
  overflow: hidden;
}

.tbox-marketplace-typeahead-item {
  width: 100%;
  display: block;
  text-align: left;
  padding: var(--space-md) var(--space-md-plus);
  border: 0;
  background: transparent;
  color: var(--text-primary);
  cursor: pointer;
}

.tbox-marketplace-typeahead-item:hover,
.tbox-marketplace-typeahead-item.is-active {
  background: var(--surface-subtle);
}

.tbox-marketplace-typeahead-title {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
}

.tbox-marketplace-typeahead-name {
  font-weight: var(--fw-semibold);
}

.tbox-marketplace-typeahead-id {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: var(--fs-base);
  color: var(--text-muted);
}

.tbox-marketplace-typeahead-loading,
.tbox-marketplace-typeahead-empty {
  padding: var(--space-md) var(--space-md-plus);
  color: var(--text-muted);
  font-size: var(--fs-md);
}

.tbox-marketplace-video-section {
  background: var(--surface-base);
}

.tbox-marketplace-video-proof {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-marketplace-video-proof .tbox-ui-proof__video {
  box-shadow: var(--shadow-sm);
}

.tbox-marketplace-editable-section {
  background: color-mix(in srgb, var(--surface-muted) 92%, var(--brand-primary-bg) 8%);
}

.tbox-marketplace-section-head {
  display: grid;
  gap: var(--space-md);
  max-width: 760px;
}

#content .tbox-marketplace-section-head .tbox-section__heading {
  margin-inline: 0;
  text-align: left;
}

.tbox-marketplace-editable-section .tbox-feature-matrix {
  border-color: var(--border-light);
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-marketplace-editable-section .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--surface-subtle) 88%, var(--brand-primary-bg) 12%);
}

.tbox-marketplace-editable-section .tbox-feature-matrix__row {
  padding-block: var(--space-lg);
}

.tbox-marketplace-editable-section .tbox-feature-matrix__icon {
  width: 2.15rem;
  height: 2.15rem;
  margin-top: 0;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-light) 78%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 78%, var(--brand-primary-bg) 22%);
  color: var(--brand-primary);
}

@media (width <= 760px) {
  .tbox-marketplace-intro__inner {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
    align-items: start;
  }

  .tbox-marketplace-embed__head {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .tbox-marketplace-embed__head h2 {
    max-width: none;
  }
}

/* Dark/Light mode system + overrides */

/**
 * Attribute-driven theme system + dark overrides
 *
 * Behavior:
 * - The early head script always sets html[data-theme] to "dark" or "light".
 * - tbox-theme.js manages persisted System / Dark / Light preferences.
 *
 * Dark-mode overrides are kept in this file so token changes remain single-owner.
 */

:root[data-theme="light"] {
  color-scheme: light;
}

/* =========================================================
   Dark surface context — light-mode scoped
   Sections with permanently dark backgrounds need dark-mode
   token values so h1/h2/h3 and brand text resolve correctly
   in light mode. In dark mode :root overrides cover these
   globally and this block is skipped.
   ========================================================= */

:root:not([data-theme="dark"]) :is(
  .tbox-hero-v3,
  .tbox-cta-section.tbox-cta-section--blueprint,
  .tbox-trust-section--slim,
  #header ul.sub-menu,
  .tbox-ahcalc-pricing-card .pricing-total
) {
  --text-primary:       var(--neutral-0);
  --text-secondary:     var(--neutral-1);
  --text-muted:         var(--neutral-2);
  --brand-primary-text: var(--blue-3);
  --tbox-btn-primary-text: var(--text-inverse);
  --tbox-btn-ink:          var(--text-inverse);
  --border-light:       rgb(137 166 199 / 18%);
}

:root:not([data-theme="dark"]) #hero-section:not(.tbox-hero-v3):not(.ah-calc-header) {
  --text-primary:       var(--neutral-0);
  --text-secondary:     var(--neutral-1);
  --text-muted:         var(--neutral-2);
  --brand-primary-text: var(--blue-3);
  --tbox-btn-primary-text: var(--text-inverse);
  --tbox-btn-ink:          var(--text-inverse);
  --border-light:       rgb(137 166 199 / 18%);
}

/* =========================================================
   Dark tokens
   ========================================================= */

:root[data-theme="dark"] {
  color-scheme: dark;

  --tbox-hvps-skeleton-base: #1d2c44;
  --tbox-hvps-skeleton-highlight: #2b3d5c;

  --brand-primary-text: var(--blue-3); /* contrast-safe brand text on dark surfaces */
  /* WCAG-safe success text on dark surfaces (≥ 5:1) */
  --success-text: #34d399;

  --surface-base: #07111f;
  --surface-subtle: #0b1726;
  --surface-muted: #132337;
  --surface-dark: #081321;
  --surface-card: #0d1b2b;
  --surface-card-elevated: #14253a;
  --surface-band: rgb(13 24 40);          /* one step lighter than --surface-base for blueprint/proof-strip-compact band */
  --border-card: var(--border-light);
  --shadow-card: var(--shadow-sm);
  --surface-dark-frosted: rgb(7 17 31 / 94%);
  --surface-media: #24384d;   /* lighter blue-slate for image-bearing cards */

  /* Shared component tokens */
  --surface-jump-bar: #081321;
  --border-jump-bar: var(--brand-primary);
  --shadow-jump-bar: var(--shadow-md);
  --surface-accent-bg-strong: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --surface-cta-band: var(--surface-dark-frosted);
  --border-cta-band: var(--border-light);
  --shadow-cta-band: var(--shadow-md);
  --text-primary: var(--neutral-0);
  --text-secondary: var(--neutral-1);
  --text-muted: var(--neutral-2);
  --text-disabled: rgb(168 183 199 / 62%);
  --border-light: rgb(137 166 199 / 18%);
  --border-mid: rgb(137 166 199 / 26%);
  --border-muted: rgb(137 166 199 / 40%);

  /* Common dark-surface overlays (avoid repeating raw rgba values) */
  --surface-glass-03: rgb(137 166 199 / 5%);
  --surface-glass-04: rgb(137 166 199 / 7%);
  --surface-glass-06: rgb(137 166 199 / 9%);
  --surface-glass-08: rgb(137 166 199 / 12%);
  --surface-glass-12: rgb(137 166 199 / 18%);
  --surface-glass-18: rgb(137 166 199 / 24%);

  /* Card surface tints — dark-mode overrides */
  --card-tint-blue:    color-mix(in srgb, var(--brand-primary) 7%, transparent);
  --card-tint-green:   rgb(16 185 129 / 7%);
  --card-tint-orange:  color-mix(in srgb, var(--brand-cta) 7%, transparent);
  --card-tint-teal:    rgb(13 148 136 / 7%);
  --card-tint-red:     rgb(239 68 68 / 7%);
  --card-tint-cyan:    rgb(6 182 212 / 7%);
  --card-tint-slate:   rgb(100 116 139 / 7%);

  --card-border-blue:    color-mix(in srgb, var(--brand-primary) 18%, transparent);
  --card-border-green:   rgb(16 185 129 / 18%);
  --card-border-orange:  color-mix(in srgb, var(--brand-cta) 18%, transparent);
  --card-border-teal:    rgb(13 148 136 / 18%);
  --card-border-red:     rgb(239 68 68 / 18%);
  --card-border-cyan:    rgb(6 182 212 / 18%);
  --card-border-slate:   rgb(100 116 139 / 18%);

  --card-tint-blue-hover:    color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --card-tint-green-hover:   rgb(16 185 129 / 12%);
  --card-tint-orange-hover:  color-mix(in srgb, var(--brand-cta) 12%, transparent);
  --card-tint-teal-hover:    rgb(13 148 136 / 12%);
  --card-tint-red-hover:     rgb(239 68 68 / 12%);
  --card-tint-cyan-hover:    rgb(6 182 212 / 12%);
  --card-tint-slate-hover:   rgb(100 116 139 / 12%);

  /* Status/tint surfaces (override light-mode pastel tokens) */
  --surface-success-bg: rgb(16 185 129 / 18%);
  --surface-success-bg-strong: rgb(16 185 129 / 28%);
  --surface-info-bg: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --surface-info-bg-strong: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --surface-pricegrid-reserved: var(--surface-success-bg-strong);
  --surface-pricegrid-band-a: var(--surface-pricing-table-prepaid);
  --surface-pricegrid-band-b: var(--surface-pricing-table-zebra);
  --border-pricegrid: var(--border-mid);
  --state-warning-text: #fbbf24;
  --state-warning-bg-soft: rgb(245 158 11 / 22%);
  --state-warning-bg: rgb(245 158 11 / 30%);
  --state-success-text: #86efac;
  --state-success-bg-soft: rgb(16 185 129 / 22%);
  --state-success-border-soft: rgb(16 185 129 / 38%);
  --state-danger-text: #fca5a5;
  --switch-track-bg: rgb(137 166 199 / 24%);
  --switch-track-border: rgb(137 166 199 / 34%);
  --switch-track-active-bg: var(--brand-primary);
  --switch-track-active-border: rgb(56 189 248 / 55%);
  --switch-knob-bg: rgb(248 250 252 / 96%);
  --switch-knob-shadow: 0 8px 16px rgb(0 0 0 / 40%);
  --switch-focus-ring: rgb(34 211 238 / 28%);

  /* Tokenized legacy components (ensure they adapt without page-specific patches) */
  --surface-success-bg-soft: rgb(16 185 129 / 18%);
  --surface-info-bg-soft: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  --surface-volume-table-popular-bg: rgb(16 185 129 / 14%);
  --surface-decision-panel: var(--surface-glass-06);
  --shadow-decision-panel: var(--shadow-md);
  --surface-pricing-table-zebra: var(--surface-glass-03);
  --surface-pricing-table-label: transparent;
  --surface-pricing-table-unit: var(--surface-glass-06);
  --surface-pricing-table-postpaid: var(--surface-success-bg);
  --surface-pricing-table-prepaid: var(--surface-info-bg);
  --surface-pricing-table-prepaid-strong: var(--surface-info-bg-strong);
  --brand-logo-gray: rgb(226 232 240 / 92%);
  --brand-primary-bg: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  --brand-highlight-bg: color-mix(in srgb, var(--brand-highlight) 22%, transparent);
  --tbox-btn-primary-text: var(--text-inverse);
  --tbox-btn-ink: var(--text-inverse);
  /* Focus rings: light-mode brand-blue at low opacity disappears on dark slate. Swap to
     sky-300 (#7DD3FC) at higher opacity so the halo remains visible on dark surfaces. */
  --focus-border: rgb(125 211 252 / 70%);
  --focus-ring: rgb(125 211 252 / 55%);
  --focus-ring-strong: rgb(125 211 252 / 70%);
  --focus-ring-soft: color-mix(in srgb, var(--brand-primary) 22%, transparent);
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 22%);
  --shadow-md: 0 4px 16px rgb(0 0 0 / 24%);
  --shadow-lg: 0 8px 24px rgb(0 0 0 / 28%);
  --shadow-xl: 0 4px 12px rgb(0 0 0 / 24%);
  --shadow-sticky-cta: 0 -6px 16px rgb(0 0 0 / 32%);
  --gray-2: #e6edf5;
  --gray-3: rgb(137 166 199 / 18%);
  --gray-4: rgb(137 166 199 / 9%);
  --gray-5: rgb(137 166 199 / 5%);
  --gray-6: rgb(198 211 225 / 66%);
  --gray-7: rgb(137 166 199 / 26%);

  /* Horizontal scaling container track (dark mode) */
  --ah-hscale-track-rail: rgb(137 166 199 / 18%);
  --ah-hscale-container-bg: rgb(137 166 199 / 9%);
  --ah-hscale-container-border: rgb(137 166 199 / 22%);
  --ah-hscale-container-icon-bg: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  --ah-hscale-util-track: rgb(137 166 199 / 12%);

  /* Code/command syntax tokens — promote dark-surface palette in dark theme.
     Source values live on :root as --code-syntax-*-dark. */
  --code-syntax-key: var(--code-syntax-key-dark);
  --code-syntax-string: var(--code-syntax-string-dark);
  --code-syntax-number: var(--code-syntax-number-dark);
  --code-syntax-comment: var(--code-syntax-comment-dark);
  /* terminal-dot-* unchanged in dark mode */
}

/* =========================================================
   Structural overrides (dark)
   ========================================================= */

:root[data-theme="dark"] body {
  background: var(--surface-base);
}

:root[data-theme="dark"] #content {
  background: var(--surface-base);
}

:root[data-theme="dark"] #header {
  background: var(--surface-dark-frosted);
  border-bottom: 1px solid var(--border-light);
}

:root[data-theme="dark"] #header.scrolled {
  background: var(--surface-base);
  box-shadow: 0 1px 6px rgb(0 0 0 / 30%);
}

:root[data-theme="dark"] .skip-link {
  background: var(--surface-muted);
  color: var(--text-primary);
  border-color: var(--brand-primary);
}

/* Make most page-builder sections dark without clobbering the hero/proof bands. */

:where(:root[data-theme="dark"] #content > section:not(#hero-section):not(.tbox-proof-strip):not(.tbox-proof-strip-compact):not(.tbox-section--dark):not(.tbox-section--tint)) {
  background: var(--surface-base);
}

/* Proof strip — avoid using --text-primary as a background in dark mode. */

:root[data-theme="dark"] .tbox-proof-strip {
  background: var(--surface-subtle);
  border-top: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

/* stylelint-disable-next-line no-descending-specificity -- dark-mode section intentionally follows component rules */
:root[data-theme="dark"] .tbox-ui-proof__image,
:root[data-theme="dark"] .tbox-ui-proof-dialog__media {
  background: color-mix(in srgb, var(--surface-muted) 92%, white 8%);
  border-color: color-mix(in srgb, var(--border-light) 82%, white 18%);
}

:root[data-theme="dark"] .tbox-ui-proof__expand,
:root[data-theme="dark"] .tbox-ui-proof-dialog__close {
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--brand-primary-12) 12%);
  border-color: color-mix(in srgb, var(--border-mid) 72%, var(--brand-primary-25) 28%);
}

:root[data-theme="dark"] .tbox-ui-proof-dialog__panel {
  background:
      color-mix(in srgb, var(--surface-muted) 90%, var(--brand-primary-12) 10%);
  border-color: color-mix(in srgb, var(--border-mid) 74%, var(--brand-primary-25) 26%);
}

/* Generic "card" surfaces from legacy sections */

:root[data-theme="dark"] #content .tbox-card--feature:not(.tbox-bento-cta-card) {
  background: var(--_card-tint, var(--surface-subtle));
  border-color: var(--_card-border-tint, var(--border-light));
  color: var(--text-primary);
}

:root[data-theme="dark"] #content .tbox-standard-features-grid--accent-top > :is(div, article).tbox-card--feature {
  border-color: var(--border-light);
}

:root[data-theme="dark"] #content .tbox-standard-features-grid--step-columns > :is(div, article).tbox-card--feature {
  background: none;
  border-inline-start-color: var(--icon-color, var(--brand-primary-50));
  box-shadow: none;
}

:root[data-theme="dark"] #content .tbox-standard-features-grid--detail-columns > :is(div, article).tbox-card--feature {
  background: none;
  border-top-color: var(--border-light);
  box-shadow: none;
}

:root[data-theme="dark"] #content .tbox-standard-features-grid--nav-links a.tbox-card--lang-link {
  background: transparent;
  border-color: var(--border-light);
  box-shadow: none;
}

/* Media cards (topology diagrams): lighter dark surface for image text readability */
:root[data-theme="dark"] #content .tbox-card--feature.tbox-card--media {
  background: var(--surface-media);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] #content .tbox-standard-features-grid > :is(div, article) > p {
  color: var(--text-secondary);
}

/* Shared card components that hard-code light surfaces */

:root[data-theme="dark"] .tbox-topology-card {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] .tbox-topology-media { /* stylelint-disable-line no-descending-specificity */
  background: var(--surface-glass-04);
  border-color: var(--border-light);
}

/* Strip dark-mode card surface from topology-media when used as layout wrapper in feature-cards */
:root[data-theme="dark"] .tbox-standard-features-grid--feature-cards > .tbox-topology-media {
  background: transparent;
  border-color: transparent;
}

/* Strip dark-mode card surface from topology wrappers in --topology grids */
:root[data-theme="dark"] .tbox-standard-features-grid--topology > :is(div, article):is(.tbox-topology-title, .tbox-topology-body, .tbox-topology-media) {
  background: transparent;
  border-color: transparent;
}

/* Managed Firewalls cards/callouts */

:root[data-theme="dark"] #content a.tbox-card--interactive {
  background: var(--surface-glass-06);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] #content a.tbox-card--interactive:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--brand-primary);
}

:root[data-theme="dark"] #content a.tbox-card--interactive .tbox-card__link {
  color: var(--brand-primary);
}

:root[data-theme="dark"] #content .tbox-callout {
  background: var(--surface-info-bg);
  border-color: var(--brand-primary-25);
}

/* Trust carousel/module: remove hard-coded white surfaces in dark mode */

:root[data-theme="dark"] .tbox-trust-module {
  background: var(--surface-glass-06);
  box-shadow: var(--shadow-md);
}

:root[data-theme="dark"] .tbox-quote {
  background: var(--surface-glass-04);
  border-color: var(--border-light);
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-trust-carousel__btn {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

/* Visited links should remain readable */

/* Form controls (basic WP + CF7) */

:root[data-theme="dark"] #content input::placeholder,
:root[data-theme="dark"] #content textarea::placeholder {
  color: var(--text-muted);
}

/* Theme logo fallback: invert the “dark-on-light” asset in dark mode when no light logo is present. */

:root[data-theme="dark"] #header .tbox-logo--fallback-invert {
  filter: invert(1) hue-rotate(180deg) brightness(1.1) contrast(1.05);
}

/* If a dedicated light logo is present,
prefer it in forced dark mode. */
:root[data-theme="dark"] #header .site-logo.tbox-logo--has-on-dark .tbox-logo__img--on-light {
  display: none;
}

:root[data-theme="dark"] #header .site-logo.tbox-logo--has-on-dark .tbox-logo__img--on-dark {
  display: block;
}

/* 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"] #content .tbox-pricing-trust-signals {
  background: none;
  border-color: transparent;
}

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

/* =========================================================
   HVPS / Hero v2 component fixes (dark)
   ========================================================= */

:root[data-theme="dark"] .tbox-jump-bar {
  background: var(--surface-jump-bar);
  border-bottom-color: var(--border-jump-bar);
}

:root[data-theme="dark"] .tbox-jump-bar.is-sticky {
  box-shadow: var(--shadow-md);
}

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

:root[data-theme="dark"] .tbox-jump-link:hover {
  color: var(--text-primary);
  background: var(--surface-glass-06);
}

:root[data-theme="dark"] .tbox-jump-link.is-active {
  color: var(--text-primary);
  background: var(--brand-primary-bg);
}

: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);
}

/* =========================================================
   Additional component fixes (dark)
   - Native <select> dropdown menus (Chrome/Edge best effort)
   - HVPS: PPG provider pills + controls
   - HVPS: Performance Guard cards
   - Standard Features cards
   - FAQ + How It Works cards
   ========================================================= */

:root[data-theme="dark"] #content select,
:root[data-theme="dark"] #hourly-vps-configurator .tbox-form-select {
  color-scheme: dark;
}

:root[data-theme="dark"] #content select option,
:root[data-theme="dark"] #content select optgroup {
  background-color: var(--surface-muted);
  color: var(--text-primary);
}

/* 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);
}

/* Cloud VPS hero visual tokens in dark mode */
:root[data-theme="dark"] #hero-section.tbox-hourly-cloud-vps {
  --cloud-vps-hero-outline-border: rgb(255 255 255 / 44%);
  --cloud-vps-hero-outline-bg: rgb(255 255 255 / 10%);
  --cloud-vps-hero-outline-inset: rgb(255 255 255 / 14%);
  --cloud-vps-hero-outline-border-hover: rgb(255 255 255 / 66%);
  --cloud-vps-hero-outline-bg-hover: rgb(255 255 255 / 16%);
  /* Source token is scoped here, not :root — dark override must match specificity */
  --cloud-vps-fleet-monitor-shell: var(--blue-8);
}

/* Bento hero: preserve gradient in dark mode */
:root[data-theme="dark"] .tbox-ah-bento-hero-card {
  background: var(--brand-primary-deep);
  border: none;
}

/* stylelint-disable-next-line no-descending-specificity */
:root[data-theme="dark"] .tbox-ah-bento-hero-card .tbox-card__icon svg {
  color: rgb(255 255 255 / 85%);
  stroke: rgb(255 255 255 / 85%);
}
/* stylelint-disable-next-line no-descending-specificity */
:root[data-theme="dark"] .tbox-ah-bento-hero-card .tbox-card__icon {
  background: rgb(255 255 255 / 12%);
  border: 0;
}

/* Bento databases card */
:root[data-theme="dark"] .tbox-ah-bento-databases-card {
  background: var(--surface-glass-06);
}

:root[data-theme="dark"] .tbox-ah-bento-databases-card:hover {
  background: var(--surface-glass-08);
}

/* Suppress infrastructure container tint in dark mode — individual cards own their backgrounds */
:root[data-theme="dark"] .tbox-standard-features-grid > :has(.tbox-card__icon[data-feature-cat="infrastructure"]) {
  background: transparent;
  border-color: transparent;
}

/* Cloud VPS bento hero: preserve gradient in dark mode (mirrors App Hosting pattern) */
:root[data-theme="dark"] .tbox-standard-features-grid--bento-cloud > :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) {
  background: var(--brand-primary-deep);
  border: none;
}
:root[data-theme="dark"] .tbox-standard-features-grid--bento-cloud > :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"])::after {
  opacity: 0.6;
}
/* stylelint-disable no-descending-specificity */
:root[data-theme="dark"] .tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) :is(.tbox-feature-card__icon, .tbox-card__icon) svg {
  color: var(--brand-primary);
}
:root[data-theme="dark"] .tbox-standard-features-grid--bento-cloud :is([data-bento-slot="ha"], [data-bento-slot="perf"], [data-bento-slot="nvme"]) :is(.tbox-feature-card__icon, .tbox-card__icon) {
  background: var(--icon-bg-blue);
  border: 1px solid var(--icon-border-blue);
}
/* stylelint-enable no-descending-specificity */

/* Grid modifier: --decision panel (manual dark) */
:root[data-theme="dark"] .tbox-standard-features-grid--decision {
  background: var(--surface-glass-04);
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-standard-features-grid--decision > :is(div, article) {
  background: var(--surface-muted);
}

/* Decision grid: breathing room below section heading in fit-section */
#fit-section .tbox-standard-features-grid--decision {
  margin-top: var(--space-xl);
}

/* icon-dark: swap to light in dark mode (manual) */
:root[data-theme="dark"] .tbox-icon--dark {
  --icon-color: rgb(226 232 240 / 92%);
  --icon-bg: rgb(226 232 240 / 12%);
  --icon-border: rgb(226 232 240 / 22%);
}

/* Bento sub-components */
:root[data-theme="dark"] .tbox-ah-stack-pills__pill {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

/* FAQ cards + search input */

:root[data-theme="dark"] .tbox-faq-search {
  background: var(--surface-glass-06);
  border-color: var(--border-mid);
  color: var(--text-primary);
  color-scheme: dark;
}

/* FAQ Show More button */
:root[data-theme="dark"] .tbox-faq-show-more {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-faq-show-more:hover {
  border-color: var(--border-mid);
  background: var(--surface-glass-10);
}

/* 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);
}

/* =========================================================
   App Hosting: dark mode fixes
   ========================================================= */

:root[data-theme="dark"] .container-wrap.marketplace {
  background: transparent;
}

:root[data-theme="dark"] .container-wrap.marketplace .marketplace-offer,
:root[data-theme="dark"] .container-wrap.marketplace .default-state {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
}

/* Marketplace install card — high-specificity local tokens to beat vendor j-marketplace.min.css */
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer {
  --_mp-surface: var(--surface-glass-06);
  --_mp-border: var(--border-light);
  --_mp-text: var(--text-primary);
  --_mp-text-sec: var(--text-secondary);
}

:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state,
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer.details .details-state {
  background: var(--_mp-surface);
  border-color: var(--_mp-border);
}

:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state .top {
  color: var(--_mp-text);
}

:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state .description {
  color: var(--_mp-text-sec);
}

/* stylelint-disable-next-line no-descending-specificity -- different component than ahcalc switch */
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .install-panel input {
  background: var(--_mp-surface);
  color: var(--_mp-text);
  border-color: var(--_mp-border);
}

:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .install-panel .arrow-go {
  background-color: var(--_mp-border);
}

:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .msg-block {
  background: var(--_mp-surface);
  border-color: var(--_mp-border);
}

:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer :is(.msg-block, .show-form) .close-details::before,
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer :is(.msg-block, .show-form) .close-details::after {
  background: var(--_mp-text);
}

/* Marketplace arrow-go: local SVG fallback (external jelastic.com asset unreachable) */
/* stylelint-disable-next-line no-descending-specificity -- must follow dark-mode block that sets background-color */
.container-wrap.marketplace .marketplace-offers .freewall-cell .marketplace-offer .install-panel .arrow-go {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M3 8.5h11M10 4l4 4.5-4 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Valid submit state: brand blue, with the local arrow kept above vendor background shorthands. */
.container-wrap.marketplace .marketplace-offers .freewall-cell .marketplace-offer .install-panel.valid .arrow-go {
  background-color: var(--brand-primary);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 17 17'%3E%3Cpath d='M3 8.5h11M10 4l4 4.5-4 4.5' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 17px;
}

/* Marketplace install CTA: match the submit arrow's brand-blue state. */
.container-wrap.marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state .btn-install {
  background: var(--brand-primary);
}

.container-wrap.marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state .btn-install:hover,
.container-wrap.marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state .btn-install:focus-visible {
  background: var(--brand-primary-dark);
}

/* ----- Marketplace dark-mode: specificity fixes & missing overrides ----- */

/* Default card: full-chain specificity to beat vendor (0,5,0) */
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state {
  background: var(--_mp-surface);
  border-color: var(--_mp-border);
}

/* stylelint-disable-next-line no-descending-specificity -- marketplace .name ≠ ahcalc .name */
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state .name {
  color: var(--_mp-text);
}

/* Expanded card: opaque background prevents bleed-through on overlap */
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer.details .details-state {
  background: var(--surface-subtle);
}

/* Close-details X on details-state (not just msg-block/show-form) */
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state .close-details::before,
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state .close-details::after {
  background: var(--_mp-text);
}

/* Form overlay: dark instead of white */
:root[data-theme="dark"] .marketplace .marketplace-offers.form-is-shown::before {
  background: var(--surface-base);
}

/* Msg-block: opaque background (overflows cell like details-state) */
/* stylelint-disable-next-line no-duplicate-selectors -- overrides glass token with opaque surface for overflow cards */
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .msg-block {
  background: var(--surface-subtle);
}

/* Install panel: valid + loading arrow-go states need brand blue, not muted border token. */
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .install-panel.valid .arrow-go {
  background-color: var(--brand-primary);
}

:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer .install-panel.loading .arrow-go {
  background: var(--brand-primary-dark);
}

/* Card box-shadows: dark-appropriate (no bright blue glow) */
/* stylelint-disable-next-line no-duplicate-selectors -- adds box-shadow to token-definition block */
:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer {
  box-shadow: 0 2px 8px rgb(0 0 0 / 18%);
}

:root[data-theme="dark"] .marketplace .marketplace-offers .freewall-cell .marketplace-offer.details {
  box-shadow: 0 2px 8px rgb(0 0 0 / 24%);
}

/* Override layout-property transitions from j-marketplace.min.css */
.freewall-cell .marketplace-offer .details-state .btn-install,
.freewall-cell .marketplace-offer .install-panel {
  transition-property: opacity, visibility;
}

/* ----- Marketplace card details: gradual open/close (click-to-expand) ----- */

/* Vendor CSS swaps the two card faces with instant display:none/block.
   allow-discrete keeps display in place until the fade finishes; browsers
   without it fall back to the previous instant swap. */
.marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state {
  transform: translateY(8px);
  transition: opacity 0.28s ease, transform 0.28s ease, display 0.28s;
  transition-behavior: allow-discrete;
}

.marketplace .marketplace-offers .freewall-cell .marketplace-offer.details .details-state {
  transform: translateY(0);
}

/* Front face cross-fades out/in instead of snapping */
/* stylelint-disable-next-line no-descending-specificity -- follows dark-mode blocks for the same component */
.marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state {
  transition: opacity 0.2s ease, display 0.2s;
  transition-behavior: allow-discrete;
}

/* .container-wrap prefix outranks the vendor's opacity:1 rules, which load
   after site-palette and would otherwise win the starting-style cascade. */
@starting-style {
  .container-wrap.marketplace .marketplace-offers .freewall-cell .marketplace-offer.details .details-state {
    opacity: 0;
    transform: translateY(8px);
  }

  .container-wrap.marketplace .marketplace-offers .freewall-cell .marketplace-offer:not(.details) .default-state {
    opacity: 0;
  }
}

/* Card shadow eases with the expansion */
/* stylelint-disable-next-line no-descending-specificity -- follows dark-mode blocks for the same component */
.marketplace .marketplace-offers .freewall-cell .marketplace-offer {
  transition: box-shadow 0.25s ease;
}

@media (prefers-reduced-motion: reduce) {
  .marketplace .marketplace-offers .freewall-cell .marketplace-offer,
  .marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state,
  .marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state {
    transition: none;
  }
}

/* Override layout-property transition from j-calculator.min.css */
.j-calculator .addui-slider .addui-slider-track .addui-slider-handle .addui-slider-value {
  transition-property: opacity;
}

/* Hoster selection modal title bar */
:root[data-theme="dark"] #publicModal .modal-content {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
}

:root[data-theme="dark"] #publicModal .jlc-modal--title {
  background: var(--surface-glass-06);
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-ahcalc-shell {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator {
  color: var(--text-secondary);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-est .k,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-est .subv {
  color: var(--text-muted);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-input-group {
  background: var(--surface-glass-06);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-input {
  background: transparent;
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-toggle {
  background: var(--surface-glass-06);
  border-left-color: var(--border-light);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-stepper-btn {
  background: var(--surface-glass-06);
  color: var(--text-primary);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-stepper-btn:hover {
  background: var(--surface-glass-08);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-hint--included {
  background: var(--surface-success-bg);
  border-color: var(--border-light);
  color: var(--text-primary);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-est--typical {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-est--typical .k {
  color: var(--brand-primary);
}

:root[data-theme="dark"] [data-mode="balancer"] .addui-slider-distance,
:root[data-theme="dark"] [data-mode="balancer"] .addui-slider-range,
:root[data-theme="dark"] [data-mode="balancer"] .addui-slider-range::after {
  background: var(--surface-success-bg);
}

:root[data-theme="dark"] [data-mode="appserver"] .addui-slider-distance,
:root[data-theme="dark"] [data-mode="appserver"] .addui-slider-range,
:root[data-theme="dark"] [data-mode="appserver"] .addui-slider-range::after {
  background: var(--surface-info-bg);
}

:root[data-theme="dark"] [data-mode="database"] .addui-slider-distance,
:root[data-theme="dark"] [data-mode="database"] .addui-slider-range,
:root[data-theme="dark"] [data-mode="database"] .addui-slider-range::after {
  background: var(--brand-highlight-bg);
}

:root[data-theme="dark"] .tbox-ahcalc-comparison-section,
:root[data-theme="dark"] .tbox-comparison-section,
:root[data-theme="dark"] .tbox-ahcalc-howitworks-section {
  background: var(--surface-base);
}

:root[data-theme="dark"] .tbox-ahcalc-comparison-footnote,
:root[data-theme="dark"] .tbox-comparison-footnote {
  color: var(--text-muted);
}

:root[data-theme="dark"] .tbox-ahcalc-comparison-table,
:root[data-theme="dark"] .tbox-comparison-table {
  background: var(--surface-glass-04);
  box-shadow: var(--shadow-sm);
}

:root[data-theme="dark"] .tbox-ahcalc-comparison-table tr.highlight,
:root[data-theme="dark"] .tbox-comparison-table tr.highlight {
  background: var(--brand-primary-bg);
}

:root[data-theme="dark"] .tbox-ahcalc-howitworks-item,
:root[data-theme="dark"] .tbox-ahcalc-faq__item {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
}

/* App Hosting calc FAQ tab dark overrides */
:root[data-theme="dark"] .tbox-ahcalc-faq__tab {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

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

:root[data-theme="dark"] .tbox-ahcalc-faq__tab--active {
  background: var(--brand-primary-dark);
  color: var(--text-inverse);
  border-color: var(--brand-primary-text);
}

:root[data-theme="dark"] .tbox-ahcalc-tab-buttons {
  border-bottom-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-ahcalc-tab-buttons button[aria-selected="true"] {
  color: var(--brand-primary);
  border-bottom-color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-ahcalc-link {
  color: var(--brand-primary);
}

/* ── Decision panel dark overrides (system) ── */

/* Decision panel dark overrides (manual toggle) */

/* ── .tbox-card--decision dark overrides (system) ── */

/* .tbox-card--decision dark overrides (manual toggle) */
:root[data-theme="dark"] .tbox-card--decision {
  background: var(--surface-muted);
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-card--decision:hover {
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-card--best-fit .tbox-card__header {
  background: rgb(16 185 129 / 10%);
}

/* stylelint-disable-next-line no-descending-specificity */
:root[data-theme="dark"] .tbox-card--best-fit .tbox-card__icon {
  background: rgb(16 185 129 / 18%);
}

:root[data-theme="dark"] .tbox-card--consider .tbox-card__header {
  background: color-mix(in srgb, var(--brand-cta) 10%, transparent);
}

/* stylelint-disable-next-line no-descending-specificity */
:root[data-theme="dark"] .tbox-card--consider .tbox-card__icon {
  background: color-mix(in srgb, var(--brand-cta) 18%, transparent);
}

/* ── Hero V3 dark-mode overrides ── */

/* Dark mode overrides */

/* Manual dark (data-theme="dark") */

:root[data-theme="dark"] .tbox-value-strip__wrap {
  background: var(--gray-800);
}

:root[data-theme="dark"] .tbox-value-card__title {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-pricing-chip {
  background: var(--surface-dark);
  border-color: var(--border-light);
  color: rgb(226 232 240 / 80%);
}

:root[data-theme="dark"] .tbox-pricing-chip__price {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial) {
  background: var(--surface-card-elevated);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-product-card:not(.tbox-card--industrial):hover {
  border-color: var(--border-muted);
}

/* 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);
}

/* autoscale-comparison dark overrides removed — component replaced */

/* stylelint-disable no-descending-specificity */
:root[data-theme="dark"] .tbox-card--auto-cicd h4 {
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-card--auto-cicd p {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-card--auto-cicd .tbox-card-link {
  color: var(--brand-primary);
}
/* stylelint-enable no-descending-specificity */

:root[data-theme="dark"] .stacks-icon-grid__item {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .stacks-icon-grid__item:hover {
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.3);
}

:root[data-theme="dark"] .stacks-icon-grid__item:focus-visible {
  color: var(--text-primary);
  box-shadow: 0 4px 12px rgb(2 6 23 / 0.30);
}


/* App Hosting redesign: new sections dark overrides (manual toggle) */

:root[data-theme="dark"] .tbox-callout--icon {
  background: var(--brand-primary-08);
  border-color: var(--brand-primary-22);
}

:root[data-theme="dark"] .tbox-callout--brand {
  background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary-dark) 10%);
  border-color: var(--border-mid);
}

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

:root[data-theme="dark"] .tbox-trust-section .tbox-trust-module--compact {
  background: transparent;
  border-color: transparent;
  padding-inline: var(--space-xl);
}

/* Slim trust section is permanently dark — re-apply via custom property at dark-mode specificity */
:root[data-theme="dark"] .tbox-trust-section--slim {
  background: var(--trust-bg);
  border-color: transparent;
}

:root[data-theme="dark"] .tbox-trust-section--slim .tbox-trust-module--compact {
  background: color-mix(in srgb, var(--brand-primary-deep) 74%, var(--gray-950) 26%);
  border-color: var(--text-inverse-16);
  padding: clamp(1.35rem, 2.4vw, 2rem);
}

:root[data-theme="dark"] .tbox-trust-section--slim .tbox-trust-module--compact .tbox-quote:not(.tbox-quote--featured) {
  background: transparent;
  border: 0;
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-sa-rating-badge--trust {
  background: var(--surface-muted);
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-quote--featured {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-trust-section .tbox-quote--featured blockquote,
:root[data-theme="dark"] .tbox-trust-featured--inline .tbox-quote--featured blockquote,
:root[data-theme="dark"] .tbox-trust-section .tbox-quote:not(.tbox-quote--featured) blockquote {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-trust-section--slim .tbox-trust-module--compact .tbox-quote:not(.tbox-quote--featured) blockquote {
  color: color-mix(in srgb, var(--text-inverse) 90%, transparent);
}

/* stylelint-disable-next-line no-descending-specificity */
:root[data-theme="dark"] #content .tbox-trust-strip__number {
  color: var(--brand-primary);
}

/* stylelint-disable-next-line no-descending-specificity */
:root[data-theme="dark"] #content .tbox-trust-strip__stat--ctx .tbox-trust-strip__number {
  color: var(--brand-cta);
}

/* --- Inline trust dark mode --- */
:root[data-theme="dark"] .tbox-trust-inline {
  background: var(--surface-dark);
  border-color: var(--brand-primary-25);
}

/* stylelint-disable-next-line no-descending-specificity */
:root[data-theme="dark"] #content .tbox-trust-inline__quote {
  color: var(--text-primary);
}

:root[data-theme="dark"] #content .tbox-trust-inline__number {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-trust-inline__source--verified {
  background: var(--brand-primary-12);
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-ah-cicd-platform {
  background: rgb(255 255 255 / 4%);
  border-color: rgb(255 255 255 / 12%);
}

:root[data-theme="dark"] .tbox-ah-cicd-platform:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
  background: rgb(255 255 255 / 6%);
}

/* Pagination links (dark) */
:where(:root[data-theme="dark"] #content .pagination a) {
  background: var(--surface-glass-06);
  border-color: var(--border-light);
  color: var(--text-secondary);
}

:where(:root[data-theme="dark"] span.page-numbers.current) {
  background: var(--blue-6);
  color: var(--text-inverse);
  border-color: var(--blue-6);
}

/* Table alternate rows (dark) */
:root[data-theme="dark"] .tbox-comparison-table tbody tr:nth-child(even) {
  background: var(--surface-glass-03);
}

/* Range slider tracks (dark) */
:root[data-theme="dark"] .tbox-ahcalc-slider-wrapper .tbox-ahcalc-slider-track {
  background: var(--surface-glass-12);
}

:root[data-theme="dark"] #hourly-vps-configurator .tbox-slider-track {
  background: var(--surface-glass-12);
}

:where(#content > section),
.tbox-page-content > section {
  padding: 4rem max(1.5rem, calc(50% - 585px));
}

.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;
}

#header .tbox-utility-menu li.tbox-nav__item--submenu-open > .sub-menu,
:where(.no-js #header .tbox-utility-menu li:hover > .sub-menu),
#header .tbox-utility-menu li:hover > .sub-menu,
.tbox-env--hover #header .tbox-utility-menu li:hover > .sub-menu {
  display: block;
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

:where(#content > section.tbox-section),
.tbox-page-content > section.tbox-section {
  padding-top: var(--space-section-y);
  padding-bottom: var(--space-section-y);
}

.tbox-stat-proof-section,
:where(#content > section.tbox-stat-proof-section),
.tbox-page-content > section.tbox-stat-proof-section {
  padding: 2rem 0;
}

:where(#content .tbox-bonus-badge),
.tbox-bonus-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: var(--radius-sm-plus);
  background: var(--brand-cta);
  color: var(--text-inverse);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  box-shadow: 0 2px 10px color-mix(in srgb, var(--brand-cta) 30%, transparent);
  position: relative;
  z-index: 1;
}

/* Pricing anchor scroll-reveal — Cloud VPS (reveal-section system) */
@media (prefers-reduced-motion: no-preference) {
  .tbox-pricing-anchor .tbox-pricing-chip.reveal-section,
  .tbox-pricing-anchor .tbox-bonus-badge.reveal-section {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--ease-animate), transform var(--ease-animate);
  }
  .tbox-pricing-anchor .tbox-bonus-badge.reveal-section {
    transition-delay: 0.1s;
  }
  .tbox-pricing-anchor .reveal-section.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Bonus badge shimmer removed (decorative) */

/* Homepage Refactor: Industrial + Diagram Product Variants (v2 overrides) */

/* Legacy #content overrides replaced by v2 product card rules in SECTION 1.
   Only diagram-card header rule retained. */

#content .tbox-card--industrial em,
#content .tbox-cta-section--blueprint em {
  color: var(--brand-cta); /* brighter orange for dark backgrounds */
}

.tbox-card--diagram {
  /* Home product card HTML does not carry .tbox-card__accent--paas,
     so set --product-accent directly here instead of relying on :has(). */
  --product-accent: var(--brand-cta);
  display: flex;
  flex-direction: column;
}

/* Diagram card — explicitly white background (no category tinting) */
#content .tbox-product-card.tbox-card--diagram {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
}

/* Dark mode: restore standard product-card surface (ID specificity beats generic dark-mode rule) */
:root[data-theme="dark"] #content .tbox-product-card.tbox-card--diagram {
  background: var(--surface-card-elevated);
  border-color: var(--border-mid);
}

/* stylelint-disable-next-line no-descending-specificity */
#content .tbox-card--diagram .tbox-card__heading {
  font-family: var(--ff-display);
  font-size: var(--fs-display);
  letter-spacing: var(--ls-tight);
  line-height: 1.1;
  margin-top: 0;
}

/* Content padding for diagram card (no .tbox-card__body wrapper) */
#content .tbox-card--diagram .tbox-card__header {
  padding: var(--space-2xl) var(--space-2xl) 0;
}
/* stylelint-disable-next-line no-descending-specificity */
.tbox-card--diagram .tbox-card__header .tbox-chip {
  background: var(--surface-info-bg);
  color: var(--brand-primary-deep);
}

#content .tbox-product-card.tbox-card--diagram .tbox-card__footer {
  background: var(--surface-base);
  border-top: 1px solid var(--border-light);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--space-md);
  margin-top: auto;
  padding-top: var(--space-lg);
}

:root[data-theme="dark"] #content .tbox-product-card.tbox-card--diagram .tbox-card__footer {
  background: color-mix(in srgb, var(--surface-card-elevated) 80%, black);
  border-top-color: var(--border-mid);
}

/* stylelint-disable-next-line no-descending-specificity */
#content .tbox-product-card.tbox-card--diagram .tbox-card__price {
  font-size: var(--fs-heading-lg);
  font-weight: var(--fw-bold);
}

/* Hero & Section Spacing Fixes */
body.home #content .tbox-home-hero .tbox-hero-v3__inner.tbox-home-hero__layout {
  max-width: 78rem;
  display: grid;
  column-gap: clamp(2rem, 4vw, 4.25rem);
  row-gap: clamp(1.25rem, 2.5vw, 2rem);
  align-items: stretch;
  grid-template-areas:
    "content"
    "rail"
    "actions";
}

@media (width > 900px) {
  #content .tbox-home-hero .tbox-hero-v3__inner.tbox-home-hero__layout {
    grid-template-columns: minmax(0, 1.12fr) minmax(19rem, 0.88fr);
  }
}

#content .tbox-home-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  grid-area: content;
}

/* stylelint-disable-next-line no-descending-specificity */
body.home #content .tbox-home-hero .tbox-hero-v3__title {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  max-width: 13ch;
  letter-spacing: var(--ls-normal);
}

/* stylelint-disable-next-line no-descending-specificity */
body.home #content .tbox-home-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  margin-inline: 0;
  margin-bottom: clamp(1.25rem, 2vw, 1.8rem);
  color: color-mix(in srgb, var(--text-inverse) 86%, transparent);
  font-size: clamp(var(--fs-lg), 2vw, var(--fs-xl));
}

body.home #content .tbox-home-hero__actions {
  gap: var(--space-sm-plus);
  margin-bottom: 0;
  grid-area: actions;
  justify-content: center;
}

#content .tbox-home-hero__rating {
  display: flex;
  justify-content: flex-start;
}

/* ── Hero Rail: transparent flex wrapper ── */
html body.home #content .tbox-home-hero__rail {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 520px;
  align-self: center;
  grid-area: rail;
  --hero-app-accent: var(--brand-primary);
  --hero-app-label: color-mix(in srgb, var(--brand-primary) 40%, var(--text-inverse));
  padding: clamp(var(--space-md), 1.6vw, var(--space-lg-plus));
  background: color-mix(in srgb, var(--surface-dark) 58%, var(--brand-primary-dark) 42%);
  border: 1px solid var(--surface-glass-18);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 var(--surface-glass-12) inset;
}

/* ── Row 1: Product Selector Cards ── */
body.home #content .tbox-home-hero__product-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-md);
}

body.home #content .tbox-home-hero__product-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: color-mix(in srgb, var(--surface-dark) 55%, transparent);
  border: 1px solid var(--surface-glass-18);
  border-radius: var(--radius-sm-plus);
  text-decoration: none;
  color: inherit;
  min-height: 12.25rem;
  box-shadow: none;
  transition: border-color var(--ease-base),
              box-shadow var(--ease-base),
              background-color var(--ease-base);
}

#content .tbox-home-hero__product-card--vps:hover {
  border-color: var(--brand-highlight);
  background: color-mix(in srgb, var(--surface-dark) 70%, transparent);
  box-shadow: 0 4px 12px var(--brand-cta-16);
}

#content .tbox-home-hero__product-card--app:hover {
  border-color: var(--hero-app-accent);
  background: color-mix(in srgb, var(--surface-dark) 70%, transparent);
  box-shadow: 0 4px 12px var(--brand-primary-15);
}

/* Hero product card header (inline icon + label) */
#content .tbox-home-hero__product-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  margin-bottom: var(--space-xs);
}

#content .tbox-home-hero__product-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
}

/* stylelint-disable-next-line no-descending-specificity */
#content .tbox-home-hero__product-icon svg,
#content .tbox-home-hero__product-icon svg * {
  color: inherit;
}

#content .tbox-home-hero__product-icon--vps {
  background: var(--brand-cta-16);
  color: var(--brand-highlight);
}

#content .tbox-home-hero__product-icon--app {
  background: var(--brand-primary-15);
  color: var(--hero-app-accent);
}

#content .tbox-home-hero__product-label {
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  color: var(--brand-highlight);
}

#content .tbox-home-hero__product-card--app .tbox-home-hero__product-label {
  color: var(--hero-app-accent);
}

#content .tbox-home-hero__product-title {
  margin: 0;
  font-size: clamp(1rem, 1.8vw, 1.2rem);
  line-height: var(--lh-tight);
  color: var(--text-inverse);
}

#content .tbox-home-hero__product-desc {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-on-dark-muted);
}

#content .tbox-home-hero__product-cta {
  margin-top: auto;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-highlight);
}

#content .tbox-home-hero__product-card--app .tbox-home-hero__product-cta {
  color: var(--hero-app-accent);
}

/* stylelint-disable no-descending-specificity -- override broad Hero V3 paragraph color for product selector text */
body.home #content #hero-section.tbox-hero-v3 .tbox-home-hero__product-label,
body.home #content #hero-section.tbox-hero-v3 .tbox-home-hero__product-card--vps .tbox-home-hero__product-label {
  color: var(--brand-highlight);
}

body.home #content #hero-section.tbox-hero-v3 .tbox-home-hero__product-card--app .tbox-home-hero__product-label {
  color: var(--hero-app-label);
}

body.home #content #hero-section.tbox-hero-v3 .tbox-home-hero__product-title {
  color: var(--text-inverse);
}
/* stylelint-enable no-descending-specificity */

/* ── Row 2: Operational proof list ── */
#content .tbox-home-hero__proof-list {
  display: grid;
  gap: 0;
  border: 1px solid var(--surface-glass-15);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-glass-06);
  overflow: hidden;
}

#content .tbox-home-hero__proof-item {
  display: grid;
  grid-template-columns: minmax(7rem, 0.4fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
  padding: var(--space-sm-plus) var(--space-md);
}

#content .tbox-home-hero__proof-item + .tbox-home-hero__proof-item {
  border-top: 1px solid var(--surface-glass-10);
}

#content .tbox-home-hero__proof-term {
  color: var(--brand-highlight);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

#content .tbox-home-hero__proof-desc {
  color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

#content .tbox-home-hero__proof-desc strong {
  color: var(--text-inverse);
  font-weight: var(--fw-bold);
}

/* ── Hero Rail: responsive overrides (must follow base rules) ── */
@media (width <= 600px) {
  #content .tbox-home-hero__rail {
    gap: var(--space-md);
    padding: var(--space-lg);
  }

  #content .tbox-home-hero__product-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  #content .tbox-home-hero__product-card {
    min-height: auto;
    padding: var(--space-lg);
  }

}

@media (width <= 480px) {
  #content .tbox-home-hero__proof-item {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md);
  }
}

/* ── Mobile pricing strip: hidden above 900px when the hero rail is in view ── */
.tbox-home-hero__mobile-pricing {
  display: none;
}

@media (width <= 900px) {
  body.home .tbox-home-hero__mobile-pricing {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs) var(--space-sm);
    margin-top: var(--space-sm);
    font-size: var(--fs-sm);
    color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  }

  body.home .tbox-home-hero__mobile-pricing strong {
    color: var(--text-inverse);
    font-weight: var(--fw-semibold);
  }

  /* Prices stack vertically here, so the inline middle separator is dropped. */
  body.home .tbox-home-hero__mobile-pricing-sep {
    display: none;
  }
}

#content .tbox-home-products-grid > .tbox-product-card {
  min-height: 100%;
}

#content .tbox-home-products-grid > .tbox-product-card:not(.tbox-card--industrial) {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--gray-900) 7%, transparent);
}

#content .tbox-home-products-grid > .tbox-product-card:not(.tbox-card--industrial):hover {
  box-shadow: 0 8px 24px color-mix(in srgb, var(--gray-900) 10%, transparent);
}

/* Ensure trust carousel arrows are visible in compact mode by reducing dot width */
.tbox-trust-module--compact .tbox-trust-carousel__dot {
  min-width: 24px;
  width: 24px;
}
.tbox-trust-module--compact .tbox-trust-carousel__nav {
  gap: var(--space-sm);
}

@media (width <= 600px) {
  .tbox-trust-module--compact .tbox-trust-carousel__dot {
    height: 44px;
    min-width: 44px;
    width: 44px;
  }
}

.tbox-cta-section__desc--blueprint {
  max-width: 600px;
  margin-inline: auto;
  color: var(--text-on-dark);
}

/* --- Product Card Personality --- */


/* C. Flow diagram animations (Build pulse + arrow shimmer) */
@keyframes tbox-diagram-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.7; }
}

@keyframes tbox-diagram-arrow-flow {
  0%   { opacity: 0.4; }
  50%  { opacity: 1; }
  100% { opacity: 0.4; }
}

/* Diagram pulse/arrow animations removed (designcheck) */

:root[data-theme="dark"] .tbox-card--diagram .tbox-card__header .tbox-chip {
  background: var(--brand-primary-deep);
  border-color: var(--brand-primary);
  color: var(--text-inverse);
}

/* --- /bolder:colorize + /bolder:delight — "Choose the platform" section --- */

/* 5. Card entrance animation */
@keyframes tbox-card-reveal {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Product card entrance animation removed (designcheck) */

/* 8. Diagram node colorize */
.tbox-card--diagram .tbox-node--source {
  background: var(--brand-primary-08);
}

.tbox-card--diagram .tbox-node--accent {
  background: var(--brand-cta-10);
}

.tbox-card--diagram .tbox-node--target {
  background: var(--brand-cta-16);
}

/* Industrial node colorize (Cloud VPS deploy cue — blue IaaS tones on dark surface) */
.tbox-card--industrial .tbox-node--source,
.tbox-card--industrial .tbox-node--mid {
  background: var(--brand-primary-12);
}

.tbox-card--industrial .tbox-node--target {
  background: var(--brand-primary-bg);
}

/* stylelint-disable no-descending-specificity */
:root[data-theme="dark"] .tbox-trust-section .tbox-btn-ghost,
:root[data-theme="dark"] .tbox-trust-section .tbox-btn.tbox-btn-ghost {
  color: var(--text-inverse);
  border-color: var(--surface-glass-30);
  background: var(--surface-glass-06);
}

:root[data-theme="dark"] .tbox-trust-section .tbox-btn-ghost:hover,
:root[data-theme="dark"] .tbox-trust-section .tbox-btn.tbox-btn-ghost:hover {
  color: var(--text-inverse);
  border-color: var(--surface-glass-55);
  background: var(--surface-glass-12);
}
/* stylelint-enable no-descending-specificity */

/* stylelint-disable no-descending-specificity */
.marketplace .marketplace-menu-wrap .current-item,
.marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a,
.marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.active,
.marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.marked,
.marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a:hover {
  color: var(--brand-primary-deep);
}

.marketplace .marketplace-menu-wrap .current-item,
.marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a {
  border-color: var(--brand-primary-25);
}

.tbox-marketplace-embed .container-wrap.marketplace {
  background: transparent;
}

.tbox-marketplace-embed .marketplace .marketplace-menu-wrap {
  margin-bottom: var(--space-lg);
  padding: clamp(var(--space-xl), 4vw, var(--space-3xl)) var(--space-sm) clamp(var(--space-lg), 3vw, var(--space-2xl));
}

.tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items {
  justify-content: flex-start;
  gap: var(--space-sm);
}

.tbox-marketplace-embed .marketplace .marketplace-menu-wrap .current-item,
.tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a {
  align-items: center;
  justify-content: center;
  min-height: 2.65rem;
  margin: 0;
  padding: var(--space-sm) var(--space-md-plus);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  box-shadow: none;
  color: var(--brand-primary-deep);
  font-size: var(--fs-md);
  line-height: 1.2;
}

.tbox-marketplace-embed .marketplace .marketplace-menu-wrap .current-item {
  display: none;
}

.tbox-marketplace-embed .marketplace.mobile .marketplace-menu-wrap .current-item {
  display: flex;
}

.tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a {
  display: inline-flex;
}

.tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.active,
.tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.marked,
.tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a:hover {
  border-color: var(--brand-primary-30);
  background: var(--brand-primary-bg);
}

.tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--border-mid) 64%);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--surface-dark) 8%, transparent);
}

.tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state,
.tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state {
  border-radius: var(--radius-md);
}

.tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-md-plus);
  padding: var(--space-lg);
  overflow: hidden; /* tagline clamp guard: never spill past the fixed cell */
}

.tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-subtle);
  flex: 0 0 auto;
}

.tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state .icon img {
  max-width: 2.35rem;
  max-height: 2.35rem;
  object-fit: contain;
}

.tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state .name {
  color: var(--text-primary);
  font-size: clamp(var(--fs-md), 1.05vw, 1.12rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  max-width: 13rem;
  text-align: center;
  overflow-wrap: anywhere;
}

.tbox-marketplace-embed .marketplace .pagination-wrap {
  position: static;
  inset: auto;
  flex: 0 0 100%;
  width: 100%;
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
}

#content .tbox-marketplace-embed .marketplace .marketplace-offers.has-pagging,
#content .tbox-marketplace-embed .marketplace .marketplace-offers.has-hosterselect {
  padding-bottom: var(--space-md);
}

/* Rest-state tagline: first line of the app description so cards are
   comparable without opening them. Clamped so it never breaks the fixed
   freewall cell height. */
.tbox-marketplace-embed .tbox-offer-tagline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  margin-top: calc(-1 * var(--space-sm));
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-align: center;
  max-width: 15rem;
}

/* Install note: clarifies what submitting the email actually does. Only
   meaningful once the email field is revealed. */
.tbox-marketplace-embed .tbox-install-note {
  display: none;
  margin-top: var(--space-sm);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-align: center;
}

.tbox-marketplace-embed .marketplace-offer.show-form .tbox-install-note {
  display: block;
}

/* The vendor locks .install-panel at 50px, so the note overflowed past the
   card edge. Let the panel grow with the note and keep the absolutely
   positioned submit arrow pinned to the 50px input row. */
.marketplace .marketplace-offers .freewall-cell .marketplace-offer.show-form .install-panel {
  height: auto;
  min-height: 50px;
}

.marketplace .marketplace-offers .freewall-cell .marketplace-offer.show-form .install-panel .arrow-go {
  height: 50px;
}

/* Empty-state recovery actions ("Clear search", catalog deep links). */
.tbox-marketplace-search-empty .tbox-marketplace-empty-action {
  display: inline-block;
  margin: 0 var(--space-xs) 0 0;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--brand-primary-30);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  color: var(--brand-primary-deep);
  font-size: var(--fs-sm);
  line-height: 1.3;
  cursor: pointer;
}

.tbox-marketplace-search-empty .tbox-marketplace-empty-action:hover,
.tbox-marketplace-search-empty .tbox-marketplace-empty-action:focus-visible {
  border-color: var(--brand-primary);
  background: var(--brand-primary-bg);
}

/* Dark mode: vendor logos are drawn for light tiles; keep a light backplate
   behind them so dark-seal logos (MariaDB, Magento) stay legible. */
:root[data-theme="dark"] .tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state .top img {
  padding: var(--space-2xs);
  border-radius: var(--radius-sm);
  background: var(--gray-100);
}

:root[data-theme="dark"] .tbox-marketplace-embed .tbox-offer-tagline,
:root[data-theme="dark"] .tbox-marketplace-embed .tbox-install-note {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-marketplace-search-empty .tbox-marketplace-empty-action {
  border-color: var(--border-mid);
  background: var(--surface-subtle);
  color: var(--text-primary);
}

.tbox-clustering-lb-layout,
.tbox-clustering-db-layout,
.tbox-clustering-storage-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  align-items: center;
}

/* Database section flips: diagram on the LEFT, copy on the RIGHT. */
.tbox-clustering-db-layout {
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1.1fr);
}

@media (max-width: 768px) {
  .tbox-clustering-lb-layout,
  .tbox-clustering-db-layout,
  .tbox-clustering-storage-layout {
    grid-template-columns: 1fr;
  }
  /* On mobile, copy explains first and the diagram follows, matching the
     load-balancer section's rhythm regardless of desktop column order. */
  .tbox-clustering-db-layout > .tbox-ui-proof {
    order: 1;
  }
}

:root:not([data-theme="dark"]) .marketplace.mobile .marketplace-menu-wrap .current-item {
  color: var(--brand-primary-deep) !important;
  border-color: var(--brand-primary-30) !important;
}

:root:not([data-theme="dark"]) .marketplace.mobile .marketplace-menu-wrap .current-item::before {
  border-color: var(--brand-primary-deep) !important;
}

:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .current-item,
:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a,
:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.active,
:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.marked,
:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a:hover {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .current-item,
:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a {
  border-color: var(--border-light);
  background-color: transparent;
}

:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.active,
:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.marked,
:root[data-theme="dark"] .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a:hover {
  border-color: var(--brand-primary-30);
  background-color: var(--brand-primary-08);
}

:root[data-theme="dark"] .tbox-marketplace-embed .marketplace .marketplace-menu-wrap .current-item,
:root[data-theme="dark"] .tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a {
  background: var(--surface-glass-06);
}

:root[data-theme="dark"] .tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.active,
:root[data-theme="dark"] .tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a.marked,
:root[data-theme="dark"] .tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a:hover {
  background: var(--brand-primary-08);
}

/* Dark mode logo tile: light backplate so dark-seal vendor logos
   (MariaDB, Magento) stay legible on dark cards. */
:root[data-theme="dark"] .tbox-marketplace-embed .marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state .icon {
  border-color: var(--border-mid);
  background: var(--gray-100);
}

@media (width <= 768px) {
  .tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items {
    gap: var(--space-xs-plus);
  }

  .tbox-marketplace-embed .marketplace .marketplace-menu-wrap .marketplace-menu .cat-items a {
    width: auto;
    flex: 1 1 calc(50% - var(--space-xs-plus));
    min-width: 9.5rem;
    padding-inline: var(--space-sm);
  }
}
/* stylelint-enable no-descending-specificity */
.tbox-cta-section__actions--center {
  justify-content: center;
}
.tbox-chat-btn--blueprint {
  color: var(--surface-base);
  text-decoration: underline;
  text-underline-offset: 4px;
  align-self: center;
}
@media (width >= 768px) {
  .tbox-cta-section__actions--center {
    gap: var(--space-md);
  }
}

/* ============================================
   Cloud VPS page rhythm pass
   ============================================ */
/* stylelint-disable no-descending-specificity */

#hero-section.tbox-hourly-cloud-vps {
  --cloud-vps-fleet-monitor-max-width: 536px;
  --cloud-vps-fleet-monitor-max-width-tablet: 500px;
  padding-top: clamp(3rem, 5vw, 4rem);
  padding-bottom: clamp(2.35rem, 3.4vw, 3rem);
}

#hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__inner {
  max-width: min(1180px, 92vw);
}

#hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__split {
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 0.88fr);
  gap: clamp(1.75rem, 3vw, 3rem);
  align-items: start;
}

#hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__text {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(0.85rem, 1.25vw, 1.1rem);
}

#hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title {
  max-width: 11ch;
  margin-bottom: 0;
}

#hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  line-height: 1.6;
}

#hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block {
  display: grid;
  justify-items: flex-start;
  gap: var(--space-sm);
  margin-top: var(--space-sm-plus);
  text-align: left;
}
#hero-section.tbox-hourly-cloud-vps :is(.tbox-hero-v3__cta-row, .tbox-sa-rating-badge--hero) {
  justify-content: flex-start;
}

#hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__visual {
  justify-self: end;
  width: min(100%, 33.5rem);
  margin-top: 0;
}

@media (width <= 640px) {
  #content #hero-section.tbox-hourly-cloud-vps {
    padding: clamp(2rem, 8vw, 2.75rem) 1rem;
  }

  #content #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__split {
    gap: var(--space-lg);
  }

  #content #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__text {
    align-items: flex-start;
    gap: var(--space-md);
    text-align: left;
  }

  #content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title {
    max-width: 13.5ch;
    font-size: clamp(2.1rem, 8vw, 2.85rem);
    line-height: 1.1;
    text-wrap: balance;
  }

  #content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
    margin-bottom: 0;
    font-size: 1.2rem;
    line-height: 1.5;
  }

  #content #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block,
  #content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
    width: 100%;
  }

  #content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
    gap: var(--space-sm);
  }

  #content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row .tbox-btn {
    min-height: 3.35rem;
  }

  #content #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__props {
    gap: var(--space-sm);
    margin-top: var(--space-sm);
    padding-block: var(--space-sm);
  }

  #content #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip {
    margin-top: -1.25rem;
  }

  #content #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar {
    justify-content: flex-start;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-padding-inline: 1rem;
    scroll-snap-type: x proximity;
    gap: var(--space-xs);
    padding: var(--space-xs) 1rem;
    scrollbar-width: none;
    mask-image: linear-gradient(90deg, transparent 0, var(--text-primary) 1rem, var(--text-primary) calc(100% - 1rem), transparent 100%);
  }

  #content #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar::-webkit-scrollbar {
    display: none;
  }

  #content #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar .tbox-jump-link {
    flex: 0 0 auto;
    min-height: 2.75rem;
    padding: var(--space-xs) var(--space-md);
    scroll-snap-align: start;
    white-space: nowrap;
  }

  #content #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
    padding: clamp(2.25rem, 8vw, 3rem) 1rem clamp(3rem, 10vw, 4rem);
  }

  #content #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-section__heading,
  #hero-section.tbox-hourly-cloud-vps ~ #product-tour-section .tbox-section__heading,
  #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-section__heading,
  #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-section__heading,
  #hero-section.tbox-hourly-cloud-vps ~ #faq-section .tbox-section__heading {
    font-size: 2.25rem;
    line-height: 1.12;
    padding-bottom: var(--space-sm);
  }

  #content #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-section__desc {
    font-size: 1.15rem;
    line-height: 1.52;
    margin-bottom: var(--space-md);
  }
}

#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip .tbox-value-strip__wrap {
  box-shadow:
    0 18px 36px rgb(15 23 42 / 10%),
    var(--shadow-value-strip-connector);
}

#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip .tbox-value-card {
  padding: clamp(0.9rem, 1.35vw, 1.15rem);
}

#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip .tbox-value-card__header {
  gap: var(--space-sm);
  margin-bottom: var(--space-2xs);
}

#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar {
  gap: var(--space-xs);
  padding-block: 0.5rem;
}

#hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar .tbox-jump-link {
  min-height: 2.5rem;
  padding: var(--space-xs-plus) var(--space-md-plus);
  font-size: var(--fs-sm);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-container,
#hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-container,
#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-container,
#hero-section.tbox-hourly-cloud-vps ~ #faq-section .tbox-container,
#hero-section.tbox-hourly-cloud-vps ~ #features #features-grid {
  max-width: 1100px;
}

section#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
  padding: clamp(2.4rem, 3.2vw, 3rem) clamp(1rem, 2vw, 1.5rem) clamp(3.1rem, 4.2vw, 3.75rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--brand-primary-bg) 46%, transparent), transparent 18rem),
    var(--surface-base);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-container {
  display: grid;
  gap: clamp(0.8rem, 1.4vw, 1.1rem);
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-section__heading,
#hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-section__heading,
#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-section__heading,
#hero-section.tbox-hourly-cloud-vps ~ #faq-section .tbox-section__heading {
  margin-bottom: 0;
}

#pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps .tbox-section__desc {
  max-width: var(--prose-measure-default);
  margin: 0 0 clamp(0.35rem, 1vw, 0.6rem); /* left-align under --start heading */
}

#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 ~ #features {
  padding-block: clamp(2.6rem, 3.7vw, 3.35rem);
}


#hero-section.tbox-hourly-cloud-vps ~ #features #features-grid {
  margin-top: clamp(1rem, 1.5vw, 1.25rem);
}

#hero-section.tbox-hourly-cloud-vps ~ #features .tbox-pillar,
#hero-section.tbox-hourly-cloud-vps ~ #features .tbox-detail-card,
#hero-section.tbox-hourly-cloud-vps ~ #features .tbox-extras-strip {
  border-color: color-mix(in srgb, var(--brand-primary) 14%, var(--border-light));
  box-shadow: var(--shadow-sm);
}

#hero-section.tbox-hourly-cloud-vps ~ #features .tbox-pillar--lead {
  background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary-bg));
  border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--border-light));
}

/* ── Cloud VPS: Pillar trio ── */
.tbox-pillar-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.75rem, 1.2vw, 1rem);
  margin-bottom: clamp(1.5rem, 2.2vw, 2rem);
}
.tbox-pillar {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, 12px);
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transition: border-color var(--ease-base), box-shadow var(--ease-base);
}
.tbox-pillar:hover {
  border-color: var(--brand-primary);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--brand-primary) 8%, transparent);
}
.tbox-pillar__accent {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
}
.tbox-pillar__accent--blue,
.tbox-pillar__accent--cyan,
.tbox-pillar__accent--green,
.tbox-pillar__accent--slate,
.tbox-pillar__accent--teal { background: var(--brand-primary); }
.tbox-pillar__header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.875rem;
}
.tbox-pillar__icon {
  width: 28px; height: 28px;
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.tbox-pillar__icon svg { width: 22px; height: 22px; }
.tbox-pillar__icon--blue,
.tbox-pillar__icon--cyan,
.tbox-pillar__icon--green,
.tbox-pillar__icon--slate,
.tbox-pillar__icon--teal { color: var(--brand-primary); }
.tbox-pillar__title {
  font-size: 1.0625rem; font-weight: 700;
  color: var(--text-primary);
  margin: 0; line-height: 1.3;
}
.tbox-pillar__desc {
  font-size: var(--fs-sm); line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 1.25rem; flex: 1;
}
.tbox-pillar__stat {
  display: flex; align-items: baseline; gap: 0.5rem;
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-light);
}
.tbox-pillar__stat-value {
  font-size: 1.375rem; font-weight: 700;
  color: var(--brand-primary);
}
.tbox-pillar__stat-value--green { color: var(--success); }
.tbox-pillar__stat-label {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
}
.tbox-pillar__link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: var(--fs-base); font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  margin-top: 0.75rem;
}
.tbox-pillar__link svg { width: 14px; height: 14px; }
.tbox-pillar__link:focus-visible,
.tbox-detail-card__link:focus-visible,
.tbox-extras-strip__item a:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-2xs);
}

/* ── Cloud VPS: Detail grid ── */
.tbox-detail-label {
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--text-tertiary);
  margin: 0 0 0.75rem;
  display: flex; align-items: center; gap: 0.5rem;
}

.tbox-detail-label--spaced {
  margin-top: var(--space-3xl);
}

.tbox-detail-label::after {
  content: '';
  flex: 1; height: 1px;
  background: var(--border-light);
}
.tbox-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(0.6rem, 1vw, 0.75rem);
  margin-bottom: clamp(1.25rem, 1.8vw, 1.5rem);
}
.tbox-detail-card {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md, 8px);
  padding: 1.125rem 1.25rem;
  display: flex; align-items: flex-start; gap: 0.75rem;
  transition: border-color var(--ease-base);
}
.tbox-detail-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 40%, transparent);
}
.tbox-detail-card__icon {
  flex-shrink: 0;
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
}
.tbox-detail-card__icon svg { width: 18px; height: 18px; }
.tbox-detail-card__icon--blue,
.tbox-detail-card__icon--cyan,
.tbox-detail-card__icon--green,
.tbox-detail-card__icon--orange,
.tbox-detail-card__icon--slate,
.tbox-detail-card__icon--teal { color: var(--brand-primary); }
.tbox-detail-card__text :is(h3, h4) {
  font-size: var(--fs-heading-sm); font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}
.tbox-detail-card__text p {
  font-size: var(--fs-base); line-height: 1.5;
  color: var(--text-secondary);
  margin: 0;
}
.tbox-detail-card__link {
  display: inline-flex; align-items: center; gap: 0.25rem;
  font-size: var(--fs-base); font-weight: 600;
  color: var(--brand-primary); text-decoration: none;
  margin-top: 0.375rem;
}
.tbox-detail-card__link:hover { text-decoration: underline; }

/* ── Cloud VPS: Extras strip (pill chips) ── */
.tbox-extras-strip {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem 1.75rem;
}
.tbox-extras-strip__label {
  font-size: var(--fs-base); font-weight: 700;
  color: var(--text-tertiary);
  margin: 0 0 0.75rem;
}
.tbox-extras-strip__items {
  display: flex; flex-wrap: wrap; gap: 0.5rem;
  list-style: none; margin: 0; padding: 0;
}
.tbox-extras-strip__item {
  display: inline-flex; align-items: center; gap: 0.375rem;
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 15%, transparent);
  border-radius: var(--radius-sm-plus);
  padding: 0.375rem 0.875rem;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  white-space: nowrap;
}
.tbox-extras-strip__item strong {
  color: var(--text-primary); font-weight: 600;
}
.tbox-extras-strip__item .material-symbols-outlined {
  font-size: 16px; color: var(--success);
}
.tbox-extras-strip__item a {
  color: var(--brand-primary); text-decoration: none; font-weight: 600;
}
.tbox-extras-strip__item a:hover { text-decoration: underline; }

/*
 * Stacked variant — full-width item rows with separator borders instead of
 * pill chips. Used for vertical checklists inside split layouts.
 */
.tbox-extras-strip--stacked {
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
  border-color: color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: none;
}

.tbox-extras-strip--stacked .tbox-extras-strip__items {
  gap: 0;
}

.tbox-extras-strip--stacked .tbox-extras-strip__item {
  width: 100%;
  min-height: 2.65rem;
  padding-block: var(--space-sm);
  border-radius: 0;
  background: transparent;
  white-space: normal;
}

.tbox-extras-strip--stacked .tbox-extras-strip__item + .tbox-extras-strip__item {
  border-top: 1px solid color-mix(in srgb, var(--border-light) 78%, transparent);
}

/*
 * Private Clouds overview block — stacked intro over a two-column, dot-led
 * capability checklist. Captured from impeccable live (layout variant, accepted
 * at structure=stacked, density≈0.65). Scoped via .tbox-pc-overview so the
 * shared .tbox-extras-strip component is untouched elsewhere.
 */
.tbox-pc-overview {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2.1rem;
  align-items: start;
  text-align: left;
}
.tbox-pc-overview .tbox-section__heading {
  text-align: left;
  margin: 0 0 0.55rem;
}
.tbox-pc-overview .tbox-section__desc {
  text-align: left;
  margin: 0;
  max-width: var(--prose-measure-default);
}
.tbox-pc-overview .tbox-extras-strip {
  border-top: 2px solid var(--brand-primary-bg-18);
  padding-top: 0.72rem;
}
.tbox-pc-overview .tbox-extras-strip__label {
  margin: 0 0 0.59rem;
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-deep);
}
.tbox-pc-overview .tbox-extras-strip__items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.46rem 0.81rem;
}
.tbox-pc-overview .tbox-extras-strip__item {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
}
.tbox-pc-overview .tbox-extras-strip__item::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand-primary);
  transform: translateY(-1px);
  flex: none;
}
@media (max-width: 760px) {
  .tbox-pc-overview { gap: 1.14rem; }
  .tbox-pc-overview .tbox-extras-strip__items { grid-template-columns: 1fr; }
}
:root[data-theme="dark"] .tbox-pc-overview .tbox-extras-strip__label {
  color: var(--brand-primary);
}

/*
 * KernelCare "How Live Patching Works" block — centered intro over a horizontal
 * process flow with the install command beneath. Captured from impeccable live
 * (layout variant, accepted at flow=plain, density=1). Scoped via .tbox-kc-howto.
 */
.tbox-kc-howto {
  text-align: center;
}
.tbox-kc-howto .tbox-section__heading {
  margin: 0 auto 0.7rem;
}
.tbox-kc-howto .tbox-section__desc {
  margin: 0 auto;
  max-width: var(--prose-measure-default);
}
.tbox-kc-howto .tbox-diagram {
  margin: 1.9rem auto 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: fit-content;
  max-width: 100%;
}
.tbox-kc-howto .tbox-code-block {
  margin: 1.4rem auto 0;
  max-width: 680px;
  text-align: left;
}
.tbox-kc-howto .tbox-mini-note {
  text-align: center;
  margin: var(--space-lg) auto 0;
  max-width: var(--prose-measure-wide);
}
@media (max-width: 640px) {
  .tbox-kc-howto .tbox-diagram { flex-direction: column; align-items: stretch; }
  .tbox-kc-howto .tbox-diagram .tbox-arrow { transform: rotate(90deg); align-self: center; }
}

/*
 * Managed Firewalls overview — committed blue keyline treatment over a 2-up
 * capability grid. Captured from impeccable live (bolder variant, accepted at
 * accent=0.15, density=0.9). Scoped via .tbox-fw-overview. The detail-columns
 * base intentionally flattens cards to hairline-topped columns at #content/
 * :nth-child(n) specificity, so these overrides mirror that selector shape and
 * restore box padding for the tinted keyline cards.
 */
#content .tbox-fw-overview .tbox-section__heading {
  font-size: clamp(1.9rem, 5vw, 2.5rem);
  letter-spacing: -0.02em;
}
#content .tbox-fw-overview .tbox-section__desc {
  max-width: var(--prose-measure-default);
  color: var(--text-primary);
}
#content .tbox-fw-overview .tbox-card__heading {
  font-size: var(--fs-heading-sm);
}

/*
 * One Network Edge — diagram-split layout. A schematic SVG (where the pfSense
 * appliance sits) pairs with the three capability points, replacing the prior
 * repeated card grid so the section reads as a distinct module. Theme-aware via
 * scoped --fw-* custom props; the SVG carries no fixed colors.
 */
.tbox-fw-edge {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  margin-top: var(--space-xl);
  --fw-node-bg: #fff;
  --fw-node-border: var(--gray-200);
  --fw-node-ink: var(--text-primary);
  --fw-node-sub: var(--text-secondary);
  --fw-link: color-mix(in srgb, var(--brand-primary) 55%, transparent);
}
:root[data-theme="dark"] .tbox-fw-edge {
  --fw-node-bg: color-mix(in srgb, var(--surface-dark) 72%, #fff 5%);
  --fw-node-border: var(--surface-glass-10);
  --fw-link: color-mix(in srgb, var(--brand-primary) 45%, #fff);
}
.tbox-fw-edge__media {
  margin: 0;
}
.tbox-fw-dia {
  display: block;
  width: 100%;
  height: auto;
}
.tbox-fw-dia__node {
  fill: var(--fw-node-bg);
  stroke: var(--fw-node-border);
  stroke-width: 1.5;
}
.tbox-fw-dia__node--wan {
  fill: var(--brand-primary-04);
  stroke: color-mix(in srgb, var(--brand-primary) 40%, transparent);
}
.tbox-fw-dia__node--edge {
  fill: var(--brand-primary);
  stroke: var(--brand-primary);
}
.tbox-fw-dia__link {
  fill: none;
  stroke: var(--fw-link);
  stroke-width: 2;
}
.tbox-fw-dia__link--tunnel {
  stroke-dasharray: 5 4;
}
.tbox-fw-dia__arrow {
  fill: var(--fw-link);
}
.tbox-fw-dia__label {
  fill: var(--fw-node-ink);
  font-size: 15px; /* intentional literal — SVG coordinate-space label, not body text */
  font-weight: var(--fw-semibold, 600);
}
.tbox-fw-dia__label--edge {
  fill: #fff;
  font-size: 16px;
  font-weight: var(--fw-bold, 700);
}
.tbox-fw-dia__sub {
  fill: var(--fw-node-sub);
  font-size: 11.5px; /* intentional literal — SVG coordinate-space sublabel, not body text */
  font-weight: 500;
}
.tbox-fw-dia__sub--edge {
  fill: rgb(255 255 255 / 86%);
}
.tbox-fw-edge__caption {
  margin-top: var(--space-md);
  text-align: center;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.tbox-fw-edge__points {
  display: grid;
  gap: var(--space-lg);
}
.tbox-fw-edge__point + .tbox-fw-edge__point {
  padding-top: var(--space-lg);
  border-top: 1px solid var(--fw-node-border, var(--gray-200));
}
.tbox-fw-edge__point h3 {
  font-size: var(--fs-heading-sm);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.tbox-fw-edge__point p {
  margin: 0;
  color: var(--text-secondary);
}
@media (max-width: 820px) {
  .tbox-fw-edge { grid-template-columns: 1fr; }
  .tbox-fw-dia { max-width: 460px; margin-inline: auto; }
}

/*
 * Managed Firewalls pricing/ordering block — centered, price-forward layout:
 * the monthly rate leads as a large display line, then the pitch and the
 * Order/Chat actions, with cross-links as a quiet footer. From impeccable live
 * (layout variant, price-forward direction). Scoped via .tbox-fw-pricing.
 */
#content .tbox-fw-pricing {
  text-align: center;
  max-width: 720px;
  margin-inline: auto;
}
#content .tbox-fw-pricing .tbox-section__heading {
  margin: 0 auto;
}
#content .tbox-fw-pricing .tbox-section__desc {
  margin: var(--space-lg) auto 0;
  max-width: var(--prose-measure-default);
}
#content .tbox-fw-pricing .tbox-section__desc strong {
  display: block;
  font-size: 1.9rem;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin-bottom: 0.4rem;
}
#content .tbox-fw-pricing .tbox-cta-row {
  margin-top: var(--space-xl);
}
#content .tbox-fw-pricing .tbox-fw-pricing-note {
  margin: var(--space-lg-plus) auto 0;
  max-width: var(--prose-measure-wide);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

/*
 * Managed Firewalls hero — page-scoped title bump. The shared compact hero
 * floors its title at clamp(1.5rem, 3vw, 2rem) = 32px, which the 40px overview
 * H2 outranks. Scoped via .tbox-fw-hero so the page H1 reads as the authority
 * line without altering the sitewide compact-hero contract. A stronger focus
 * ring keeps CTA focus visible on the blue hero band.
 */
#hero-section.tbox-fw-hero .tbox-hero-v3__title {
  font-size: clamp(2rem, 3.4vw, 2.75rem);
  line-height: 1.18;
}
#hero-section.tbox-fw-hero .tbox-btn:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 2px;
}

/*
 * VPN and Routing Design — decision cards. Tag + heading + explanation, with no
 * icons, so the section is visually distinct from the icon-led "Controls"
 * feature grid above it and reads as a set of choices rather than features.
 */
.tbox-fw-decision {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.tbox-fw-decision__card {
  padding: var(--space-lg);
  border: 1px solid var(--card-border, var(--gray-200));
  border-radius: var(--radius-12);
  background: var(--card-bg, transparent);
}
:root[data-theme="dark"] .tbox-fw-decision__card {
  border-color: var(--surface-glass-10);
}
.tbox-fw-decision__tag {
  display: inline-block;
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold, 600);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--brand-primary);
  background: var(--brand-primary-04);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, transparent);
  border-radius: var(--radius-sm-plus, 8px);
  padding: 0.2rem 0.55rem;
  margin-bottom: var(--space-sm);
}
:root[data-theme="dark"] .tbox-fw-decision__tag {
  color: color-mix(in srgb, var(--brand-primary) 45%, #fff);
}
.tbox-fw-decision__heading {
  font-size: var(--fs-heading-sm);
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.tbox-fw-decision__text {
  margin: 0;
  color: var(--text-secondary);
}
@media (max-width: 820px) {
  .tbox-fw-decision { grid-template-columns: 1fr; }
}

/*
 * Compact route strip variant.
 * Inline one-line list of related-page links with middle-dot separators.
 * Replaces the 4-card "See also" row (.tbox-standard-features-grid--nav-links)
 * on app-hosting spoke pages. Max 4 links. No icons. No card chrome.
 * Placed immediately above the FAQ section. Wraps gracefully on narrow
 * viewports. See DESIGN.md § "App Hosting Page Family Rhythm Contract".
 */
.tbox-extras-strip--routes {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  text-align: center;
}
.tbox-extras-strip--routes .tbox-extras-strip__label {
  display: inline;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0;
  text-transform: none;
  margin: 0 0.5rem 0 0;
}
.tbox-extras-strip--routes .tbox-extras-strip__items {
  display: inline-flex;
  gap: 0.5rem 1.25rem;
  flex-wrap: wrap;
  justify-content: center;
}
.tbox-extras-strip--routes .tbox-extras-strip__item {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  white-space: normal;
}
.tbox-extras-strip--routes .tbox-extras-strip__item:not(:last-child)::after {
  content: "·";
  margin-left: 1.25rem;
  color: var(--text-tertiary);
}
.tbox-extras-strip--routes .tbox-extras-strip__item a {
  color: var(--brand-primary);
  font-weight: 500;
}

/*
 * App Hosting Band Taxonomy — pilot-neutral governance namespace (Phase 2).
 *
 * Every body <section> inside content/post_content/pages/app-hosting/ carries
 * an additive `tbox-band tbox-band--<type>` classification. The modifier names
 * the reader's job, not the visual decoration. See DESIGN.md § "App Hosting
 * Page Family Rhythm Contract" for the 11-type taxonomy and the classification-
 * wrapper vs visual-primitive split.
 *
 * PILOT-NEUTRAL: This is the Phase 2 pilot namespace. All 11 variants are
 * intentionally visually neutral — each variant records its type in a CSS
 * custom property so contractors, devtools, and the Phase 3 rhythm linter can
 * introspect classification without affecting rendering. Visual treatment
 * comes from the child component (.tbox-hero-terminal, .tbox-stats-row,
 * .tbox-split-layout, .tbox-ui-proof, .tbox-feature-matrix), not from the band
 * wrapper. Full visual-primitive formalization (code/stat/split/media) is NOT
 * in this pilot — defer any decorative rules to a future phase if a page
 * genuinely needs one. Do not grow these rules with decorative CSS here.
 */
.tbox-band { --tbox-band-type: unknown; }
.tbox-band--code { --tbox-band-type: code; }
.tbox-band--media { --tbox-band-type: media; }
.tbox-band--diagram { --tbox-band-type: diagram; }
.tbox-band--stat { --tbox-band-type: stat; }
.tbox-band--split { --tbox-band-type: split; }
.tbox-band--matrix { --tbox-band-type: matrix; }
.tbox-band--quote { --tbox-band-type: quote; }
.tbox-band--route { --tbox-band-type: route; }
.tbox-band--cta { --tbox-band-type: cta; }
.tbox-band--faq { --tbox-band-type: faq; }
.tbox-band--trust { --tbox-band-type: trust; }

/* ── Pillar / detail responsive ── */
@media (width <= 768px) {
  .tbox-pillar-row { grid-template-columns: 1fr; }
  .tbox-detail-grid { grid-template-columns: 1fr; }
  .tbox-extras-strip__items { gap: 0.375rem; }
  .tbox-extras-strip__item {
    white-space: normal;
    align-items: flex-start;
  }
  .tbox-extras-strip__item .material-symbols-outlined {
    margin-top: 0.125rem;
    flex-shrink: 0;
  }
}

/* ── WordPress: 3-pillar + diagram card row ── */
/* ── Shared pillar diagram card base ── */
.tbox-pillar-diagram-card {
  border-radius: var(--radius-lg, 12px);
  overflow: hidden;
  border: 1px solid var(--border-light);
  background: var(--surface-base);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.tbox-pillar-diagram-card img {
  display: block;
  height: 330px;
  width: auto;
  object-fit: contain;
}
@media (width <= 900px) { .tbox-pillar-diagram-card img { height: 260px; } }
@media (width <= 600px) { .tbox-pillar-diagram-card img { height: 240px; max-width: 100%; } }

.tbox-pillar-row--3-diagram {
  grid-template-columns: repeat(3, 1fr) auto;
}
@media (width <= 900px) {
  .tbox-pillar-row--3-diagram { grid-template-columns: repeat(2, 1fr); }
  .tbox-pillar-row--3-diagram .tbox-pillar-diagram-card { grid-column: span 2; }
}
@media (width <= 600px) {
  .tbox-pillar-row--3-diagram { grid-template-columns: 1fr; }
  .tbox-pillar-row--3-diagram .tbox-pillar-diagram-card { grid-column: 1 / -1; }
}

/* WordPress hosting: hero media */
.tbox-wp-hero .tbox-hero-v3__inner {
  display: grid;
  /* Title column gets the wider track: at 0.92fr the H1 wraps to 6 lines
     against a short right column; 1.08fr settles it at 4. */
  grid-template-columns: minmax(0, 1.08fr) minmax(22rem, 0.92fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl)) clamp(var(--space-2xl), 5vw, var(--space-4xl));
  align-items: center;
  max-width: min(82rem, calc(100vw - 3rem));
  text-align: left;
}

.tbox-wp-hero__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  gap: clamp(var(--space-md), 1.4vw, var(--space-lg));
}

.tbox-wp-hero .tbox-hero-v3__title,
.tbox-wp-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

.tbox-wp-hero .tbox-hero-v3__title {
  max-width: 26ch;
}

.tbox-wp-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
}

.tbox-wp-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin: clamp(var(--space-xs), 1vw, var(--space-sm)) 0 0;
}


.tbox-wp-choice-section {
  position: relative;
  overflow: hidden;
  background: color-mix(in srgb, var(--brand-primary-bg) 34%, var(--surface-base));
}

.tbox-wp-choice-section > .tbox-container {
  position: relative;
}

.tbox-wp-choice-section .tbox-section__desc {
  max-width: 780px;
  margin-inline: auto;
}

.tbox-wp-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(0.85rem, 1.4vw, 1.15rem);
  margin-top: clamp(1.6rem, 3vw, 2.2rem);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border-light));
  border-radius: var(--radius-md);
  background: var(--surface-base);
  overflow: hidden;
  box-shadow: var(--shadow-card-hairline);
}

.tbox-wp-choice-card {
  display: grid;
  gap: var(--space-sm);
  min-height: 100%;
  padding: clamp(1.2rem, 2vw, 1.5rem);
  border-right: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border-light));
  background: var(--surface-base);
  color: var(--text-primary);
  text-decoration: none;
  transition:
    background-color var(--ease-base),
    border-color var(--ease-base),
    box-shadow var(--ease-base);
}

.tbox-wp-choice-card:last-child {
  border-right: 0;
}

.tbox-wp-choice-card:hover {
  background: color-mix(in srgb, var(--surface-base) 82%, var(--brand-primary-bg));
  border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--border-light));
  box-shadow: inset 0 -3px 0 var(--brand-primary);
}

.tbox-wp-choice-card:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: 3px;
}

.tbox-wp-choice-card__eyebrow,
.tbox-wp-choice-card__meta {
  color: var(--brand-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
}

.tbox-wp-choice-card strong {
  max-width: 13ch;
  font-family: var(--ff-display);
  font-size: clamp(1.12rem, 1.55vw, 1.35rem);
  line-height: var(--lh-tight);
}

.tbox-wp-choice-card span:not(.tbox-wp-choice-card__eyebrow):not(.tbox-wp-choice-card__meta) {
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-wp-choice-card__meta {
  align-self: end;
  margin-top: var(--space-xs);
  color: var(--text-primary);
  text-transform: none;
}

.tbox-wp-platform-note {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-top: clamp(1rem, 2vw, 1.4rem);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--border-light));
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-secondary);
  overflow: hidden;
}

.tbox-wp-platform-note span {
  display: block;
  padding: clamp(0.95rem, 1.7vw, 1.2rem);
  line-height: var(--lh-relaxed);
}

.tbox-wp-platform-note span + span {
  border-left: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border-light));
}

.tbox-wp-platform-note strong {
  color: var(--text-primary);
}

.tbox-wp-platform-note a {
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
}

#wp-standalone .tbox-standard-features,
#cluster .tbox-ui-proof + .tbox-pillar-row,
#multi-region .tbox-ui-proof + .tbox-wp-region-heading,
#wp-devops .tbox-topology-grid,
#wp-vertical-scale .tbox-standard-features-grid {
  margin-top: clamp(1.7rem, 3vw, 2.4rem);
}

:is(#wp-standalone, #cluster, #multi-region, #wp-devops, #wp-vertical-scale) .tbox-pillar,
:is(#wp-standalone, #cluster, #multi-region, #wp-devops, #wp-vertical-scale) .tbox-detail-card,
:is(#wp-standalone, #cluster, #multi-region, #wp-devops, #wp-vertical-scale) .tbox-pillar-diagram-card,
:is(#wp-standalone, #cluster, #multi-region, #wp-devops, #wp-vertical-scale) .tbox-extras-strip {
  border-color: color-mix(in srgb, var(--brand-primary) 14%, var(--border-light));
  box-shadow: var(--shadow-sm);
}

:is(#wp-standalone, #cluster, #multi-region) .tbox-pillar-diagram-card {
  background: color-mix(in srgb, var(--brand-primary-bg) 18%, var(--surface-base));
}

:root[data-theme="dark"] #wp-standalone .tbox-pillar-diagram-card {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, oklch(0.82 0.02 230));
  background: oklch(0.955 0.018 230);
}

:is(#cluster, #multi-region) .tbox-ui-proof {
  padding: clamp(1rem, 2.2vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border-light));
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
}

:is(#cluster, #multi-region) .tbox-ui-proof::before {
  inset: auto auto 1.15rem 1.45rem;
  width: clamp(3.4rem, 6vw, 5rem);
}

:is(#cluster, #multi-region) .tbox-ui-proof__media {
  padding: 0;
}

:is(#cluster, #multi-region) .tbox-ui-proof__text {
  display: block;
  margin: 0;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-wp-region-heading {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin-top: clamp(2rem, 3.4vw, 2.8rem);
}

.tbox-wp-region-heading::after {
  content: "";
  flex: 1;
  height: 1px;
  background: color-mix(in srgb, var(--brand-primary) 24%, var(--border-light));
}

.tbox-wp-region-heading--split {
  padding-top: clamp(1rem, 2vw, 1.4rem);
  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--border-light));
}

#wp-balancer .tbox-container {
  max-width: 940px;
}

#wp-balancer .tbox-mini-note {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 0.72rem 1rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border-light));
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

/* General sibling: a proof strip renders between the value strip and the
   jump bar, so the old `+ .tbox-value-strip +` chain no longer matches. */
.tbox-wp-hero ~ .tbox-jump-bar {
  box-sizing: border-box;
  max-width: 100vw;
}

/* At phone widths the five jump links overflow the bar by ~18px, parking the
   last pill ("FAQ") permanently inside the edge fade. Tighten spacing so the
   full set fits without scrolling. */
@media (width <= 480px) {
  .tbox-wp-hero ~ .tbox-jump-bar {
    padding-inline: var(--space-xs);
    gap: 2px;
  }
}

:root[data-theme="dark"] .tbox-wp-choice-section {
  background: color-mix(in srgb, var(--brand-primary-dark) 16%, var(--surface-base));
}

:root[data-theme="dark"] .tbox-wp-choice-grid,
:root[data-theme="dark"] .tbox-wp-choice-card,
:root[data-theme="dark"] .tbox-wp-platform-note,
:root[data-theme="dark"] :is(#cluster, #multi-region) .tbox-ui-proof,
:root[data-theme="dark"] #wp-balancer .tbox-mini-note {
  border-color: color-mix(in srgb, var(--brand-primary-light, var(--brand-primary)) 24%, var(--border-light));
  background: var(--surface-raised, var(--surface-base));
}

:root[data-theme="dark"] .tbox-wp-platform-note span + span,
:root[data-theme="dark"] .tbox-wp-choice-card,
:root[data-theme="dark"] .tbox-wp-choice-card:last-child {
  border-color: color-mix(in srgb, var(--brand-primary-light, var(--brand-primary)) 18%, var(--border-light));
}

@media (width <= 900px) {
  .tbox-wp-hero .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
    justify-items: center;
    max-width: min(42rem, calc(100vw - 2rem));
    text-align: center;
    row-gap: var(--space-lg);
  }

  .tbox-wp-hero__copy {
    align-items: center;
  }

  .tbox-wp-hero .tbox-hero-v3__title {
    max-width: 18ch;
  }

  .tbox-wp-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-wp-choice-grid,
.tbox-wp-platform-note {
    grid-template-columns: 1fr;
  }

  .tbox-wp-platform-note span + span {
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border-light));
    border-left: 0;
  }

  .tbox-wp-choice-card,
.tbox-wp-choice-card:last-child {
    border-right: 0;
    border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border-light));
  }

  .tbox-wp-choice-card:last-child {
    border-bottom: 0;
  }

  .tbox-wp-choice-card strong {
    max-width: none;
  }
}

@media (width <= 760px) {
  .tbox-wp-hero {
    padding: clamp(2.5rem, 9vw, 3.25rem) var(--space-lg) clamp(2.5rem, 9vw, 3.25rem);
  }

  .tbox-wp-hero .tbox-hero-v3__inner,
  .tbox-wp-hero__copy {
    text-align: center;
  }

  :is(#cluster, #multi-region) .tbox-ui-proof {
    padding: 0.9rem;
    border-radius: var(--radius-lg);
  }

  .tbox-wp-region-heading {
    align-items: flex-start;
    flex-direction: column;
  }

  .tbox-wp-region-heading::after {
    width: 100%;
    flex: none;
  }

  #wp-devops .tbox-topology-grid {
    width: 100%;
    max-width: calc(100vw - 2rem);
    grid-template-columns: minmax(0, 1fr);
    margin-inline: auto;
  }

  #wp-devops .tbox-topology-grid :where(.tbox-card, .tbox-topology-grid__cards, .tbox-extras-checklist, .tbox-bento-cta-card) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  #wp-devops .tbox-card--media img {
    max-width: 100%;
    height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-wp-choice-card {
    transition: none;
  }
}

/* ── WordPress hosting: audience grid + topology tabs ───────────── */
.tbox-wp-audience {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md);
}

.tbox-wp-audience-card {
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.tbox-wp-audience-card h3 {
  font-size: 1.0625rem;
  margin: 0;
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--text-primary);
}

.tbox-wp-audience-card h3 .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--brand-primary);
}

.tbox-wp-audience-card p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.55;
}

.tbox-wp-audience-card__pick {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-top: auto;
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border-light);
  font-size: var(--fs-base);
  color: var(--brand-primary-text);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: color 0.18s ease, border-color 0.18s ease;
}

.tbox-wp-audience-card__pick:hover,
.tbox-wp-audience-card__pick:focus-visible {
  color: var(--brand-primary);
  border-top-color: var(--brand-primary);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.tbox-wp-audience-card__pick:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

.tbox-wp-audience-card__pick .tbox-wp-audience-card__baseline {
  color: var(--warm-3);
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

@media (max-width: 760px) {
  .tbox-wp-audience {
    grid-template-columns: 1fr;
  }
}

.tbox-wp-tabs__shell {
  position: relative;
}

.tbox-wp-tabs__shell input[type="radio"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.tbox-wp-tabs__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--space-lg);
}

.tbox-wp-tabs__buttons label {
  display: inline-flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  /* Resting hairline track signals "this row is a control"; the active tab
     fills it with the brand underline. */
  border-bottom: 3px solid var(--border-light);
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  margin-bottom: -1px;
  transition: color 0.15s, border-color 0.15s, background-color 0.15s;
}

.tbox-wp-tabs__buttons label small {
  font-size: var(--fs-2xs);
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

.tbox-wp-tabs__buttons label:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--brand-primary) 5%, transparent);
}

.tbox-wp-tabs__shell:has(#wt-standalone:checked) label[for="wt-standalone"],
.tbox-wp-tabs__shell:has(#wt-cluster:checked) label[for="wt-cluster"],
.tbox-wp-tabs__shell:has(#wt-msa:checked) label[for="wt-msa"],
.tbox-wp-tabs__shell:has(#wt-mcl:checked) label[for="wt-mcl"] {
  color: var(--brand-primary-deep);
  border-bottom-color: var(--brand-cta);
  background: color-mix(in srgb, var(--brand-cta) 8%, transparent);
}

/* Dark mode — brand-primary-deep is a fixed dark blue and goes illegible on
   the dark section surface; use the contrast-safe brand text token instead. */
:root[data-theme="dark"] .tbox-wp-tabs__shell:has(#wt-standalone:checked) label[for="wt-standalone"],
:root[data-theme="dark"] .tbox-wp-tabs__shell:has(#wt-cluster:checked) label[for="wt-cluster"],
:root[data-theme="dark"] .tbox-wp-tabs__shell:has(#wt-msa:checked) label[for="wt-msa"],
:root[data-theme="dark"] .tbox-wp-tabs__shell:has(#wt-mcl:checked) label[for="wt-mcl"] {
  color: var(--brand-primary-text);
}

/* Selected-state descriptor: the title color + underline + tint already carry
   state; orange (--warm-3) small text on the light tint fails AA (~2.2:1). */
.tbox-wp-tabs__shell:has(#wt-standalone:checked) label[for="wt-standalone"] small,
.tbox-wp-tabs__shell:has(#wt-cluster:checked) label[for="wt-cluster"] small,
.tbox-wp-tabs__shell:has(#wt-msa:checked) label[for="wt-msa"] small,
.tbox-wp-tabs__shell:has(#wt-mcl:checked) label[for="wt-mcl"] small {
  color: var(--text-secondary);
}

.tbox-wp-tabs__buttons label small.tbox-wp-tabs__price {
  margin-top: 0.1rem;
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.tbox-wp-tabs__shell:has(#wt-standalone:checked) label[for="wt-standalone"] small.tbox-wp-tabs__price,
.tbox-wp-tabs__shell:has(#wt-cluster:checked) label[for="wt-cluster"] small.tbox-wp-tabs__price,
.tbox-wp-tabs__shell:has(#wt-msa:checked) label[for="wt-msa"] small.tbox-wp-tabs__price,
.tbox-wp-tabs__shell:has(#wt-mcl:checked) label[for="wt-mcl"] small.tbox-wp-tabs__price {
  color: var(--brand-primary-deep);
}

:root[data-theme="dark"] .tbox-wp-tabs__shell:has(#wt-standalone:checked) label[for="wt-standalone"] small.tbox-wp-tabs__price,
:root[data-theme="dark"] .tbox-wp-tabs__shell:has(#wt-cluster:checked) label[for="wt-cluster"] small.tbox-wp-tabs__price,
:root[data-theme="dark"] .tbox-wp-tabs__shell:has(#wt-msa:checked) label[for="wt-msa"] small.tbox-wp-tabs__price,
:root[data-theme="dark"] .tbox-wp-tabs__shell:has(#wt-mcl:checked) label[for="wt-mcl"] small.tbox-wp-tabs__price {
  color: var(--brand-primary-text);
}

.tbox-wp-tabs__shell:has(#wt-standalone:focus-visible) label[for="wt-standalone"],
.tbox-wp-tabs__shell:has(#wt-cluster:focus-visible) label[for="wt-cluster"],
.tbox-wp-tabs__shell:has(#wt-msa:focus-visible) label[for="wt-msa"],
.tbox-wp-tabs__shell:has(#wt-mcl:focus-visible) label[for="wt-mcl"] {
  outline: 2px solid var(--focus-ring, var(--brand-primary));
  outline-offset: 2px;
}

.tbox-wp-tabs__panel {
  display: none;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: clamp(var(--space-lg), 4vw, var(--space-2xl));
  align-items: start;
}

.tbox-wp-tabs__shell:has(#wt-standalone:checked) .tbox-wp-tabs__panel[data-panel="standalone"],
.tbox-wp-tabs__shell:has(#wt-cluster:checked) .tbox-wp-tabs__panel[data-panel="cluster"],
.tbox-wp-tabs__shell:has(#wt-msa:checked) .tbox-wp-tabs__panel[data-panel="msa"],
.tbox-wp-tabs__shell:has(#wt-mcl:checked) .tbox-wp-tabs__panel[data-panel="mcl"] {
  display: grid;
}

.tbox-wp-tabs__copy h3 {
  margin: 0 0 var(--space-xs);
  font-size: 1.25rem;
  color: var(--text-primary);
}

.tbox-wp-tabs__copy p {
  margin: 0 0 var(--space-sm);
  color: var(--text-secondary);
}

.tbox-wp-tabs__list {
  margin: 0;
  padding-left: 0;
  list-style: none;
  color: var(--text-secondary);
}

.tbox-wp-tabs__list li {
  position: relative;
  margin: 0.35rem 0;
  padding-left: 1rem;
}

.tbox-wp-tabs__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.5em;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: color-mix(in srgb, var(--brand-primary) 72%, white);
}

@media (max-width: 860px) {
  .tbox-wp-tabs__panel {
    grid-template-columns: 1fr;
  }

  .tbox-wp-tabs__buttons label {
    flex: 1 1 auto;
  }
}

.tbox-wp-tabs__panel[data-panel="standalone"] .tbox-ui-proof__image {
  max-height: 520px;
  width: auto;
  margin-inline: auto;
}

/* Dark mode: the proof-card media area is pinned white for diagram legibility,
   which makes these figures the brightest objects on the page and shows a
   white sliver at the rounded card edges. Soften to the same off-white used by
   the dark-mode pillar diagram cards and inset the diagram from the edges. */
:root[data-theme="dark"] .tbox-wp-tabs__panel .tbox-ui-proof--card .tbox-ui-proof__media {
  padding: var(--space-sm);
  background: oklch(0.955 0.018 230);
}

/* POLISH fix H: keep the proof image inside the tab panel figure at ≤768px on
   /wordpress/. The standalone panel override above sets width:auto, which lets
   the image render at its intrinsic 402px+ width inside a clipped 291px figure
   on a 375px viewport. Constrain to the container while preserving aspect. */
.tbox-wp-tabs__panel .tbox-ui-proof__image {
  max-width: 100%;
  height: auto;
}

/* POLISH fix I: match feature-card row heights on /cloud-linux/. The grid is two
   rows of three; row 2 cards run ~29px shorter than row 1. Stretch siblings so
   adjacent rows align. */
#cloudlinux-features-list .tbox-standard-features-grid {
  align-items: stretch;
}

#cloudlinux-features-list .tbox-standard-features-grid > .tbox-card--feature {
  height: 100%;
}

/* ── Load Balancer page: use-case navigator ─────────────────────── */
.tbox-lb-hero.tbox-hero-v3--compact .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(17rem, 0.4fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-4xl));
  align-items: center;
  max-width: min(72rem, 92vw);
  text-align: left;
}

.tbox-lb-hero__copy {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: var(--space-lg);
}

.tbox-lb-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
}

.tbox-lb-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-top: 0;
}

.tbox-lb-hero__ledger {
  display: grid;
  gap: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surface-base) 24%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-base) 13%, transparent);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-base) 14%, transparent) inset;
}

.tbox-lb-hero__ledger div {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
}

.tbox-lb-hero__ledger div + div {
  border-top: 1px solid color-mix(in srgb, var(--surface-base) 16%, transparent);
}

.tbox-lb-hero__ledger dt {
  margin: 0;
  color: color-mix(in srgb, var(--text-inverse) 70%, transparent);
  font-size: var(--fs-xs);
  line-height: var(--lh-snug);
}

.tbox-lb-hero__ledger dd {
  margin: 0;
  color: var(--text-inverse);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.lb-routing-strip {
  padding-block: clamp(var(--space-3xl), 7vw, var(--space-5xl));
  background: var(--surface-base);
}

.lb-stacks-section .tbox-container,
.lb-tcp-section .tbox-container,
.lb-architecture-section .tbox-container,
.lb-routing-strip .tbox-container {
  max-width: 72rem;
}

.lb-routing-strip .tbox-container {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(28rem, 1.28fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: center;
}

.lb-routing-strip__copy {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.lb-routing-strip__title {
  max-width: 15ch;
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.75rem, 1.38rem + 1.16vw, 2.45rem);
  line-height: var(--lh-tight);
}

.lb-routing-strip__text {
  max-width: var(--prose-measure-wide);
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.lb-routing-flow {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-sm-mid);
  margin: 0;
  padding: var(--space-xl);
  list-style: none;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
}

.lb-routing-flow::before {
  content: "";
  position: absolute;
  top: calc(var(--space-lg) + 1.25rem);
  left: calc(var(--space-lg) + 2.5rem);
  right: calc(var(--space-lg) + 2.5rem);
  height: 1px;
  background: color-mix(in srgb, var(--brand-primary) 48%, var(--border-light));
}

.lb-routing-flow__step {
  position: relative;
  z-index: 1;
  display: flex;
  min-height: 7.75rem;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border-light));
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  color: var(--text-primary);
  text-align: center;
}

.lb-routing-flow__step--active {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, var(--border-light));
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-base));
}

.lb-routing-flow__icon {
  display: inline-flex;
  width: 2.5rem;
  height: 2.5rem;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-base));
  color: var(--brand-primary);
  font-size: 1.25rem;
}

.lb-routing-flow__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.lb-section-lede {
  max-width: var(--prose-measure-default);
  margin: calc(var(--space-sm) * -1) 0 var(--space-xl);
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.lb-usecase-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}
@media (width <= 860px) {
  .lb-usecase-intro { grid-template-columns: 1fr; }
}

.lb-usecase-card {
  padding: var(--space-lg);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.lb-usecase-card--blue { --lb-accent: var(--brand-primary); }
.lb-usecase-card--recommended {
  grid-row: span 2;
  padding: clamp(var(--space-xl), 3vw, var(--space-2xl));
  border-color: color-mix(in srgb, var(--brand-primary) 36%, var(--border-light));
  background: color-mix(in srgb, var(--brand-primary-bg) 36%, var(--surface-base));
  box-shadow: var(--shadow-card-hairline);
}

@media (width <= 860px) {
  .lb-usecase-card--recommended { grid-row: auto; }
}

.lb-usecase-card__meta {
  margin: 0 0 var(--space-2xs);
  color: var(--brand-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.lb-usecase-card__heading {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
}

.lb-usecase-card--recommended .lb-usecase-card__heading {
  max-width: 22ch;
  font-size: clamp(1.2rem, 1.03rem + 0.42vw, 1.45rem);
  line-height: var(--lh-tight);
}

.lb-usecase-card__body {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

.lb-usecase-card--recommended .lb-usecase-card__body {
  font-size: var(--fs-base);
}

.lb-usecase-card__pick {
  margin-top: auto;
  margin-bottom: 0;
  padding-top: var(--space-sm);
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-primary);
}

/* ── LB: all-stacks heading ─────────────────────────────────────── */
.lb-compare-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--space-md);
  margin: var(--space-lg) 0 var(--space-sm);
}

.lb-compare-heading {
  font-size: 1rem; font-weight: 700; color: var(--text-primary);
  margin: 0;
}

.lb-compare-note {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
}

/* ── LB: comparison table ───────────────────────────────────────── */
.lb-table-wrap {
  overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  background: var(--surface-base);
  margin-bottom: var(--space-2xl);
}
.lb-compare-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }
.lb-compare-table thead tr { background: var(--surface-subtle); }
.lb-compare-table th {
  padding: 12px 14px;
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-tertiary);
  white-space: nowrap; border-bottom: 1px solid var(--border-light);
}
.lb-compare-table th.lb-col-feature { min-width: 160px; }
.lb-compare-table th.lb-col-rec {
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-base));
}
.lb-col-rec__badge {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--brand-primary);
}
.lb-compare-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-secondary);
  vertical-align: middle;
}
.lb-compare-table tbody th.row-label {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
  text-align: left;
  vertical-align: middle;
  background: var(--surface-base);
  white-space: normal;
}
.lb-compare-table tbody :is(th, td):not(.row-label) { white-space: nowrap; }
.lb-compare-table td.lb-col-rec {
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base));
}
.lb-compare-table tr:last-child :is(th.row-label, td) { border-bottom: none; }
.lb-compare-table tbody tr:hover :is(th.row-label, td) {
  background: color-mix(in srgb, var(--surface-subtle) 76%, var(--brand-primary-06) 24%);
}
.lb-compare-table .row-label { font-weight: 600; color: var(--text-primary); }
.lb-compare-table .lb-check { color: var(--brand-primary); vertical-align: middle; font-size: var(--fs-sm); }
.lb-dash { color: var(--text-tertiary); }

/* ── LB: TCP unified grid ───────────────────────────────────────── */
.lb-tcp-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-md);
  margin-bottom: var(--space-2xl);
}
@media (width <= 768px) {
  .lb-tcp-grid { grid-template-columns: 1fr; }
}

.lb-tcp-tile {
  grid-column: span 2;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  border: 1px solid var(--border-light);
  background: var(--surface-base);
  border-radius: var(--radius-md);
}
.lb-tcp-tile--blue { --lb-tile-accent: var(--brand-primary); }

.lb-tcp-tile__header { display: flex; align-items: center; gap: 8px; margin-bottom: 2px; }
.lb-tcp-tile__icon {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  color: var(--lb-tile-accent, var(--brand-primary));
  line-height: 1;
}
.lb-tcp-tile__icon .material-symbols-outlined { font-size: 18px; }
.lb-tcp-tile__name { font-size: var(--fs-sm); font-weight: 700; color: var(--text-primary); margin: 0; }
.lb-tcp-tile p { font-size: var(--fs-xs); color: var(--text-secondary); line-height: 1.6; margin: 0; }

@media (width <= 768px) {
  .lb-tcp-tile { grid-column: auto; }
}

@media (width > 768px) {
  .lb-tcp-detail:nth-child(4) { grid-column: 1 / span 3; }
  .lb-tcp-detail:nth-child(5) { grid-column: 4 / span 3; }
}

/* ── LB: architecture 2×2 grid ─────────────────────────────────── */
.lb-arch-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
  margin-bottom: var(--space-2xl);
}
@media (width <= 768px) { .lb-arch-grid { grid-template-columns: 1fr; } }

.lb-architecture-section .tbox-detail-card {
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
}

:root[data-theme="dark"] .lb-routing-strip {
  background: var(--surface-base);
}

:root[data-theme="dark"] .lb-routing-flow,
:root[data-theme="dark"] .lb-routing-flow__step,
:root[data-theme="dark"] .lb-usecase-card,
:root[data-theme="dark"] .lb-tcp-tile,
:root[data-theme="dark"] .lb-table-wrap {
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .lb-routing-flow,
:root[data-theme="dark"] .lb-routing-flow__step,
:root[data-theme="dark"] .lb-usecase-card,
:root[data-theme="dark"] .lb-tcp-tile {
  background: var(--surface-subtle);
}

:root[data-theme="dark"] .lb-routing-flow__step--active,
:root[data-theme="dark"] .lb-usecase-card--recommended {
  background: color-mix(in srgb, var(--brand-primary) 14%, var(--surface-subtle));
}

@media (width <= 980px) {
  .lb-routing-strip .tbox-container {
    grid-template-columns: 1fr;
  }

  .tbox-lb-hero.tbox-hero-v3--compact .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
  }

  .tbox-lb-hero .tbox-hero-v3__cta-row {
    justify-content: flex-start;
  }

  .lb-routing-strip__title {
    max-width: 22ch;
  }
}

@media (width <= 600px) {
  .lb-routing-strip {
    padding-block: var(--space-2xl);
  }

  .lb-routing-flow {
    grid-template-columns: 1fr;
    padding: var(--space-md);
  }

  .lb-routing-flow::before {
    top: calc(var(--space-md) + 2.5rem);
    bottom: calc(var(--space-md) + 2.5rem);
    left: calc(var(--space-md) + 1.25rem);
    right: auto;
    width: 2px;
    height: auto;
    background: color-mix(in srgb, var(--brand-primary) 44%, var(--border-light));
  }

  .lb-routing-flow__step {
    min-height: 5rem;
    flex-direction: row;
    justify-content: flex-start;
    padding-left: var(--space-md);
    text-align: left;
  }

  .lb-section-lede {
    font-size: var(--fs-body);
  }

  .lb-compare-header {
    align-items: start;
    flex-direction: column;
  }

  .lb-table-wrap {
    margin-inline: calc(var(--space-md) * -1);
    border-radius: 0;
    border-inline: none;
    overflow-x: visible;
  }

  .lb-compare-table th,
.lb-compare-table td {
    padding: 11px 12px;
  }

  .lb-compare-table,
  .lb-compare-table thead,
  .lb-compare-table tbody,
  .lb-compare-table tr,
  .lb-compare-table th,
  .lb-compare-table td {
    display: block;
    width: 100%;
  }

  .lb-compare-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .lb-compare-table tbody tr {
    padding-block: var(--space-sm);
    border-bottom: 1px solid var(--border-light);
  }

  .lb-compare-table tbody tr:last-child {
    border-bottom: none;
  }

  .lb-compare-table tbody th.row-label {
    padding: var(--space-sm) var(--space-md);
    background: var(--surface-subtle);
  }

  .lb-compare-table tbody :is(th, td):not(.row-label) {
    white-space: normal;
  }

  .lb-compare-table tbody td {
    display: grid;
    grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: start;
  }

  .lb-compare-table tbody td::before {
    content: attr(data-label);
    color: var(--text-tertiary);
    font-weight: 600;
  }
}

/* ── WordPress Cluster: 2-pillar + diagram + wide pillar layout ── */
.tbox-pillar-row--2-diagram-wide {
  grid-template-columns: 1fr 1fr auto;
}
.tbox-pillar-row--2-diagram-wide .tbox-pillar-diagram-card {
  grid-row: 1 / 3;
  grid-column: 3;
}
.tbox-pillar-row--2-diagram-wide .tbox-pillar--wide {
  grid-column: 1 / 3;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}
.tbox-pillar-row--2-diagram-wide .tbox-pillar--wide .tbox-pillar__header { margin-bottom: 0; }
.tbox-pillar-row--2-diagram-wide .tbox-pillar--wide .tbox-pillar__desc { margin: 0; }
.tbox-pillar-row--2-diagram-wide .tbox-pillar--wide .tbox-pillar__stat { margin: 0; text-align: right; }
@media (width <= 900px) {
  .tbox-pillar-row--2-diagram-wide { grid-template-columns: 1fr 1fr; }
  .tbox-pillar-row--2-diagram-wide .tbox-pillar-diagram-card { grid-row: auto; grid-column: 1 / -1; }
  .tbox-pillar-row--2-diagram-wide .tbox-pillar--wide { grid-column: 1 / -1; }
}
@media (width <= 600px) {
  .tbox-pillar-row--2-diagram-wide { grid-template-columns: 1fr; }
  .tbox-pillar-row--2-diagram-wide .tbox-pillar--wide { grid-template-columns: 1fr; gap: 0.5rem; }
  .tbox-pillar-row--2-diagram-wide .tbox-pillar--wide .tbox-pillar__stat { text-align: left; }
}

/* ── App Hosting: 4-pillar row ── */
.tbox-pillar-row--4 {
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(0.6rem, 1vw, 0.875rem);
  margin-bottom: clamp(1.25rem, 1.8vw, 1.5rem);
}
@media (width <= 900px) { .tbox-pillar-row--4 { grid-template-columns: repeat(2, 1fr); } }
@media (width <= 600px) { .tbox-pillar-row--4 { grid-template-columns: 1fr; } }

/* ── Pillar accent: orange ── */
/* --orange folds into brand-primary; CTA orange is reserved for --lead. */
.tbox-pillar__accent--orange { background: var(--brand-primary); }
.tbox-pillar__icon--orange { color: var(--brand-primary); }

/* ── Pillar: compact stack tags ── */
.tbox-pillar-stacks {
  display: flex; flex-wrap: wrap; gap: 0.25rem;
  margin-top: 0.375rem;
}
.tbox-pillar-stacks__tag {
  font-size: var(--fs-2xs); font-weight: 600;
  color: var(--text-tertiary);
  background: color-mix(in srgb, var(--text-tertiary) 8%, transparent);
  border-radius: 3px;
  padding: 0.125rem 0.375rem;
}

/* ── App Hosting: autoscale breakout ── */
.tbox-ah-scaling-breakout {
  max-width: 780px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  align-items: start;
}
.tbox-ah-scaling-breakout__text h3 {
  font-size: 1.25rem; font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 0.5rem; line-height: 1.3;
}
.tbox-ah-scaling-breakout__text p {
  font-size: var(--fs-base); line-height: 1.6;
  color: var(--text-secondary);
  margin: 0 0 0.75rem;
}
.tbox-ah-scaling-breakout__visual {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, 12px);
  padding: 1.25rem;
}
.tbox-ah-bar-row {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.tbox-ah-bar-row:last-child { margin-bottom: 0; }
.tbox-ah-bar-label {
  font-size: var(--fs-2xs); color: var(--text-tertiary);
  width: 3.5rem; flex-shrink: 0; text-align: right;
}
.tbox-ah-bar-track {
  flex: 1; height: 18px;
  background: color-mix(in srgb, var(--text-tertiary) 10%, transparent);
  border-radius: var(--radius-xs, 4px); overflow: hidden;
}
.tbox-ah-bar-fill { height: 100%; border-radius: var(--radius-xs, 4px); }
.tbox-ah-bar-fill--fixed { background: color-mix(in srgb, var(--color-red) 60%, transparent); }
.tbox-ah-bar-fill--auto { background: color-mix(in srgb, var(--success) 70%, transparent); }
.tbox-ah-bar-verdict { font-size: var(--fs-2xs); font-weight: 600; width: 4rem; flex-shrink: 0; }
.tbox-ah-bar-verdict--bad { color: var(--color-red); }
.tbox-ah-bar-verdict--good { color: var(--success); }
.tbox-ah-scaling-label {
  font-size: var(--fs-2xs); font-weight: 600;
  color: var(--text-tertiary); margin: 0 0 0.5rem;
}
@media (width <= 600px) { .tbox-ah-scaling-breakout { grid-template-columns: 1fr; } }

.tbox-ah-autoscale-section .tbox-ah-autoscale-action-card.tbox-bento-cta-card {
  background: var(--surface-base);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border-light));
  box-shadow: none;
  color: var(--text-primary);
}

.tbox-ah-autoscale-section .tbox-ah-autoscale-action-card .tbox-bento-cta-card__text {
  max-width: var(--prose-measure-wide);
}

.tbox-ah-autoscale-section .tbox-ah-autoscale-action-card.tbox-bento-cta-card :is(h3, h4) {
  color: var(--text-primary);
}

#content .tbox-ah-autoscale-section .tbox-ah-autoscale-action-card.tbox-bento-cta-card p {
  color: var(--text-secondary);
}

.tbox-ah-autoscale-section .tbox-ah-autoscale-action-card.tbox-bento-cta-card > .tbox-btn + .tbox-btn {
  background: transparent;
  border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--border-mid));
  color: var(--brand-primary-text);
}

.tbox-ah-autoscale-section .tbox-ah-autoscale-action-card.tbox-bento-cta-card > .tbox-btn + .tbox-btn:hover {
  background: var(--brand-primary-bg);
  border-color: var(--brand-primary);
  color: var(--brand-primary-text);
}

:root[data-theme="dark"] .tbox-ah-autoscale-section .tbox-ah-autoscale-action-card.tbox-bento-cta-card {
  background: var(--surface-base);
  border-color: var(--border-mid);
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-ah-autoscale-section .tbox-ah-autoscale-action-card.tbox-bento-cta-card > .tbox-btn + .tbox-btn {
  border-color: color-mix(in srgb, var(--brand-primary-light) 44%, var(--border-mid));
  color: var(--brand-primary-light);
}

#hero-section.tbox-hourly-cloud-vps ~ #fit-section.tbox-decision-section {
  padding-block: clamp(2.5rem, 3.4vw, 3.1rem);
}

#hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-container {
  display: grid;
  gap: clamp(0.9rem, 1.4vw, 1.15rem);
}

#hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-section__heading {
  max-width: 24rem;
  margin-inline: auto;
}

#hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-standard-features-grid--decision {
  margin-bottom: 0;
}

#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section {
  padding-block: clamp(2.5rem, 3.4vw, 3.1rem);
}

#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-container {
  display: grid;
  gap: clamp(0.9rem, 1.4vw, 1.1rem);
}

#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-section__desc {
  max-width: var(--prose-measure-default);
  margin: 0 auto 0 0;
}

#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-standard-features-grid--feature-cards {
  gap: clamp(0.85rem, 1.4vw, 1rem);
  margin-top: 0;
}

#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-card--interactive {
  padding: clamp(0.95rem, 1.25vw, 1.1rem);
}

#hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-hvps-managed-infra {
  margin-top: 0.75rem;
  padding-top: 0.9rem;
}

#hero-section.tbox-hourly-cloud-vps ~ #faq-section.tbox-faq-section {
  padding-top: clamp(2.5rem, 3.4vw, 3.1rem);
  padding-bottom: clamp(2.5rem, 3.4vw, 3.1rem);
}

#hero-section.tbox-hourly-cloud-vps ~ #faq-section .tbox-faq-section__tabs {
  justify-content: flex-start;
  margin-top: var(--space-sm-plus);
}

@media (width <= 1024px) {
  #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__split {
    grid-template-columns: 1fr;
    gap: var(--space-lg-plus);
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__text {
    align-items: center;
    gap: var(--space-sm-plus);
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title,
#hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
    margin-inline: auto;
    text-align: center;
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block,
#hero-section.tbox-hourly-cloud-vps :is(.tbox-hero-v3__cta-row, .tbox-sa-rating-badge--hero) {
    justify-items: center;
    justify-content: center;
    text-align: center;
  }
  #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__visual {
    justify-self: center;
    width: min(100%, 31.5rem);
  }

}

@media (width <= 900px) {
  #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip {
    margin-top: -2rem;
  }
}

@media (width <= 600px) {
  section#hero-section.tbox-hourly-cloud-vps {
    padding-top: clamp(2rem, 7vw, 2.4rem);
    padding-bottom: clamp(1.9rem, 6vw, 2.25rem);
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title {
    max-width: 12ch;
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__title-line2 {
    max-width: 13ch;
    font-size: clamp(1.8rem, 8vw, 2.3rem);
    line-height: 1.12;
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__cta-block {
    width: 100%;
    gap: var(--space-xs-plus);
    margin-top: var(--space-xs-plus);
  }
  #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
    gap: var(--space-xs);
    max-width: 22rem;
    margin-inline: auto;
    margin-bottom: var(--space-xs-plus);
  }

  #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row :is(.tbox-btn, .tbox-btn-outline) {
    width: 100%;
    min-width: 0;
    min-height: 3.35rem;
    justify-content: center;
    padding-inline: 1rem;
    font-size: var(--fs-sm);
  }
  #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip {
    margin-top: -1.5rem;
    padding-inline: 0.75rem;
  }

  #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar {
    padding-block: 0.4rem;
    padding-inline: 0.5rem;
  }

  #hero-section.tbox-hourly-cloud-vps + .tbox-value-strip + .tbox-jump-bar .tbox-jump-link {
    min-height: 2.35rem;
    padding-inline: 0.65rem;
  }
}
/* stylelint-enable no-descending-specificity */

/* IP Justification form page: prevent long underscore pseudo-fields and URLs from overflowing */
.tbox-section.ip-just {
  overflow-wrap: break-word;
}

/* =============================================================
   Homepage: section visual differentiation
   Competitor-inspired background textures and layout weight.
   All rules scoped to homepage IDs — no side-effects on other pages.
   ============================================================= */

/* ── Home hero: Variant A enhancements ───────────────────────────── */

/* Home hero CTA — no ambient glow,
standard elevation on hover */
#content .tbox-home-hero__actions .tbox-btn[data-cta-tier="primary"] {
  animation: none;
}

body.home #content .tbox-home-hero__product-card:hover,
body.home #content .tbox-home-hero__product-card:focus-visible {
  background: color-mix(in srgb, var(--text-inverse) 10%, transparent);
  box-shadow: 0 1px 0 var(--text-inverse-14) inset;
}

body.home #content .tbox-home-hero__product-card--vps:hover {
  border-color: color-mix(in srgb, var(--brand-highlight) 72%, var(--text-inverse) 28%);
}

body.home #content .tbox-home-hero__product-card--app:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 72%, var(--text-inverse) 28%);
}

body.home #content .tbox-home-hero__product-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-xs);
}

body.home #content .tbox-home-hero__product-title {
  max-width: 13rem;
  font-size: clamp(1.05rem, 1.55vw, 1.25rem);
}

body.home #content .tbox-home-hero__product-desc {
  max-width: 15rem;
  color: color-mix(in srgb, var(--text-inverse) 70%, transparent);
}

body.home #content .tbox-home-hero__product-arrow {
  display: inline-block;
  transition: transform var(--ease-fast);
}

body.home #content .tbox-home-hero__product-card:hover .tbox-home-hero__product-arrow,
body.home #content .tbox-home-hero__product-card:focus-visible .tbox-home-hero__product-arrow {
  transform: translateX(2px);
}

body.home #content .tbox-home-hero__proof-list {
  background: transparent;
  border-color: var(--text-inverse-16);
  border-radius: var(--radius-sm-plus);
}

body.home #content .tbox-home-hero__proof-item {
  padding: var(--space-md) var(--space-md-plus);
  text-align: left;
}

body.home #content .tbox-home-hero__proof-term {
  color: color-mix(in srgb, var(--brand-highlight) 84%, var(--text-inverse) 16%);
}

body.home #content .tbox-home-hero__proof-desc {
  color: color-mix(in srgb, var(--text-inverse) 74%, transparent);
}

body.home .tbox-product-card.tbox-card,
body.home #content .tbox-home-products-grid > .tbox-product-card:not(.tbox-card--industrial) {
  border-color: var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}

body.home .tbox-product-card.tbox-card:hover {
  box-shadow: 0 8px 20px color-mix(in srgb, var(--surface-dark) 10%, transparent);
}

body.home .tbox-product-card.tbox-card--industrial {
  background: color-mix(in srgb, var(--surface-dark) 76%, var(--brand-primary-dark) 24%);
}

body.home .tbox-home-product-card__descriptor {
  letter-spacing: var(--ls-normal);
}

body.home #content .tbox-product-card .tbox-card__footer .tbox-btn {
  border-radius: var(--radius-sm-plus);
  transition: opacity var(--ease-fast), background-color var(--ease-fast), border-color var(--ease-fast);
}

body.home #content .tbox-product-card .tbox-card__footer .tbox-btn:hover {
  opacity: 1;
}

body.home #content > .tbox-home-hero.tbox-hero-v3 {
  padding-block: clamp(4rem, 7vw, 5.75rem) clamp(2rem, 4vw, 3rem);
}

body.home #content .tbox-home-hero__content {
  gap: clamp(var(--space-md), 1.6vw, var(--space-lg));
}

body.home #content .tbox-home-hero__content > :where(.tbox-hero-v3__title, .tbox-hero-v3__subtitle, .tbox-home-hero__actions) {
  margin-bottom: 0;
}

body.home #content .tbox-home-hero__rail {
  width: min(100%, 36rem);
}

@media (width > 900px) {
  body.home #content .tbox-home-hero .tbox-hero-v3__inner.tbox-home-hero__layout {
    grid-template-columns: minmax(0, 1fr) minmax(24rem, 0.82fr);
    grid-template-areas:
      "content rail"
      "actions actions";
  }
}

@media (width <= 700px) {
  body.home #content > .tbox-home-hero.tbox-hero-v3 {
    padding: clamp(2rem, 8vw, 3rem) var(--space-lg) clamp(1.75rem, 7vw, 2.5rem);
  }

  body.home #content .tbox-home-hero__content {
    align-items: stretch;
    justify-content: flex-start;
    gap: var(--space-lg);
  }

  body.home #content .tbox-home-hero .tbox-hero-v3__title {
    max-width: none;
    margin-inline: auto;
    text-align: center;
    font-size: clamp(2rem, 8.5vw, 2.55rem);
  }

  body.home #content .tbox-home-hero .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
    margin-inline: auto;
    text-align: center;
    font-size: clamp(1.04rem, 4.6vw, 1.2rem);
    line-height: var(--lh-on-dark-relaxed);
  }

  body.home #content .tbox-home-hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-sm-plus);
  }

  body.home #content .tbox-home-hero__actions .tbox-btn {
    width: 100%;
    min-height: 3.25rem;
  }

  #content .tbox-home-hero__rating {
    justify-content: center;
  }

  body.home #content .tbox-home-hero__rail {
    width: 100%;
    padding: var(--space-md);
    gap: var(--space-md);
    align-self: stretch;
  }

  body.home #content .tbox-home-hero__product-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-sm);
  }

  body.home #content .tbox-home-hero__product-card {
    min-width: 0;
    padding: var(--space-md);
    gap: var(--space-xs);
    min-height: 0;
  }

  body.home #content .tbox-home-hero__product-header {
    align-items: flex-start;
    gap: var(--space-xs);
    margin-bottom: 0;
  }

  body.home #content .tbox-home-hero__product-icon {
    width: 1.75rem;
    height: 1.75rem;
  }

  body.home #content .tbox-home-hero__product-label {
    overflow-wrap: anywhere;
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
  }

  body.home #content .tbox-home-hero__product-title {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  body.home #content .tbox-home-hero__product-desc {
    display: none;
  }

  body.home #content .tbox-home-hero__proof-item {
    grid-template-columns: minmax(5.75rem, 0.32fr) minmax(0, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }
}

@media (width <= 340px) {
  body.home #content .tbox-home-hero__product-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Hero terminal: typewriter deployment preview ────────────────── */

.tbox-hero-terminal {
  max-width: 100%;
  margin: 0;
  background: rgb(7 25 43 / 0.85);
  border: 1px solid var(--surface-glass-18);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.tbox-hero-terminal__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: var(--surface-glass-08);
  border-bottom: 1px solid var(--surface-glass-10);
}

.tbox-hero-terminal__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--surface-glass-25);
}

.tbox-hero-terminal__dot--red { background: var(--terminal-dot-red); }
.tbox-hero-terminal__dot--yellow { background: var(--terminal-dot-yellow); }
.tbox-hero-terminal__dot--green { background: var(--terminal-dot-green); }

#content .tbox-hero-terminal__tab {
  margin-left: 12px;
  font-family: var(--tbox-font-mono);
  font-size: 11px; /* intentional literal — terminal chrome tab, sub-micro by design */
  color: var(--text-terminal-muted);
}

#content .tbox-hero-terminal__body {
  padding: 16px 20px;
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  line-height: 1.8;
  color: var(--surface-glass-80);
}

.tbox-hero-terminal__line {
  display: block;
  white-space: nowrap;
  overflow: hidden;
}

.tbox-hero-terminal__prompt {
  color: var(--brand-primary);
}

.tbox-hero-terminal__success {
  color: var(--terminal-dot-green);
}

.tbox-hero-terminal__muted {
  color: var(--text-terminal-muted);
}

.tbox-hero-terminal__cursor {
  display: none;
}

/* Typewriter animation removed (designcheck) — text displays immediately */

/* ── End hero terminal ───────────────────────────────────────────── */

:is(#trial, #trial-cta).tbox-cta-section.tbox-cta-section--blueprint {
  padding-block: clamp(3.5rem, 5vw, 5rem);
}

/* ══ App Hosting Security: page-specific components ══════════════════════════ */

/* Responsibility split grid */
.tbox-resp-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
  align-items: stretch;
}
.tbox-resp-card {
  border-radius: var(--radius-lg, 10px);
  padding: clamp(1.35rem, 2.2vw, 1.9rem);
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.tbox-resp-card--platform {
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-06) 8%);
  border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--border-light));
}
.tbox-resp-card--dev {
  background: color-mix(in srgb, var(--surface-base) 93%, var(--brand-cta-bg-soft) 7%);
  border-color: color-mix(in srgb, var(--brand-cta) 24%, var(--border-light));
}
.tbox-resp-card :where(h3) {
  font-size: var(--fs-heading-sm, 1.0625rem);
  font-weight: 600;
  color: var(--text-primary);
  margin: 0 0 1rem;
}
@media (width <= 768px) { .tbox-resp-split { grid-template-columns: 1fr; } }

/* ── App Hosting Node.js: page polish ─────────────────────────────── */
.tbox-nodejs-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(20rem, 0.52fr);
  gap: clamp(var(--space-2xl), 4.5vw, var(--space-5xl));
  align-items: center;
  max-width: min(1180px, 92vw);
  text-align: left;
}

.tbox-nodejs-hero__copy {
  max-width: 780px;
}

.tbox-nodejs-hero .tbox-hero-v3__title,
.tbox-nodejs-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

.tbox-nodejs-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

.tbox-nodejs-hero__panel {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  overflow: hidden;
  padding: clamp(1.15rem, 2.2vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--text-inverse) 20%, transparent);
  border-radius: var(--radius-md);
  background: var(--brand-primary-deep);
  box-shadow: 0 1px 0 var(--text-inverse-14) inset;
  color: var(--text-inverse);
}

.tbox-nodejs-hero__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--surface-glass-88);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.tbox-nodejs-hero__panel-head .material-symbols-outlined {
  color: var(--brand-cta);
  font-size: 22px;
}

.tbox-nodejs-hero__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-xs);
  margin: 0;
}

.tbox-nodejs-hero__specs div {
  display: grid;
  gap: var(--space-xs);
  min-height: 5.1rem;
  align-content: start;
  padding: var(--space-md);
  border: 1px solid var(--text-inverse-12);
  border-radius: var(--radius-sm);
  background: var(--text-inverse-08);
}

.tbox-nodejs-hero__specs dt {
  margin: 0;
  color: var(--surface-glass-58);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tbox-nodejs-hero__specs dd {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.tbox-nodejs-hero__flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
}

.tbox-nodejs-hero__flow span {
  position: relative;
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-xs);
  border: 1px solid color-mix(in srgb, var(--surface-base) 14%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-base) 6%, transparent);
  color: var(--surface-glass-75);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
}

.tbox-nodejs-hero__flow span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(var(--space-xs) * -0.65);
  width: 0.45rem;
  height: 1px;
  background: var(--brand-cta);
}

.tbox-nodejs-deploy-shell {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  gap: clamp(var(--space-2xl), 4.5vw, var(--space-5xl));
  align-items: start;
  max-width: 760px;
}

.tbox-nodejs-deploy-shell__copy {
  max-width: none;
}

.tbox-nodejs-deploy-shell__copy .tbox-prose {
  margin-bottom: var(--space-md);
}

.tbox-nodejs-release-ledger {
  display: grid;
  gap: 0;
  margin: var(--space-lg) 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  overflow: hidden;
}

.tbox-nodejs-release-ledger div {
  display: grid;
  grid-template-columns: minmax(5.25rem, 0.34fr) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  min-width: 0;
  padding: var(--space-sm-mid) var(--space-md);
}

.tbox-nodejs-release-ledger div + div {
  border-top: 1px solid var(--border-light);
}

.tbox-nodejs-release-ledger dt {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.tbox-nodejs-release-ledger dd {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.tbox-nodejs-deploy-shell__terminal .tbox-hero-terminal {
  border: 1px solid color-mix(in srgb, var(--surface-dark) 18%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--surface-dark) 18%, transparent);
}

#deploy-run-and-monitor .tbox-ui-proof {
  margin-block: clamp(2rem, 5vw, 3.4rem);
}

.tbox-nodejs-ops-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0 0 clamp(2.25rem, 4vw, 3.5rem);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
  overflow: hidden;
}

.tbox-nodejs-ops-list li {
  margin: 0;
  min-width: 0;
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
  padding-left: clamp(2.1rem, 2.5vw, 2.45rem);
  background: transparent;
}

.tbox-nodejs-ops-list li + li {
  border-left: 1px solid var(--border-light);
}

.tbox-nodejs-ops-list li::before {
  top: clamp(var(--space-lg), 2vw, var(--space-xl));
  left: clamp(var(--space-md), 1.4vw, var(--space-lg));
}

.tbox-nodejs-proof-section .tbox-ui-proof {
  gap: clamp(var(--space-xl), 4vw, var(--space-4xl));
}

.tbox-nodejs-proof-section .tbox-ui-proof::before {
  display: none;
}

.tbox-nodejs-proof-section .tbox-ui-proof__media {
  padding: clamp(var(--space-sm), 1.4vw, var(--space-md));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--border-light));
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-nodejs-proof-section .tbox-ui-proof__image,
.tbox-nodejs-proof-section .tbox-ui-proof__video {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.tbox-nodejs-proof-section .tbox-ui-proof__title {
  max-width: 22ch;
}

/* App Hosting PHP: page polish */
.tbox-php-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.56fr);
  gap: clamp(var(--space-2xl), 4.5vw, var(--space-5xl));
  align-items: center;
  max-width: min(1180px, 92vw);
  text-align: left;
}

.tbox-php-hero__copy {
  display: grid;
  gap: var(--space-lg);
  max-width: 720px;
  justify-items: start;
}

.tbox-php-hero .tbox-hero-v3__title,
.tbox-php-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

.tbox-php-hero .tbox-hero-v3__title {
  max-width: 13.5ch;
}

.tbox-php-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
}

.tbox-php-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

.tbox-php-hero__panel {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  overflow: hidden;
  padding: clamp(var(--space-lg), 2.2vw, var(--space-2xl));
  border: 1px solid color-mix(in srgb, var(--text-inverse) 20%, transparent);
  border-radius: var(--radius-md);
  background: var(--brand-primary-deep);
  box-shadow: 0 1px 0 var(--text-inverse-14) inset;
  color: var(--text-inverse);
}

.tbox-php-hero__panel > * {
  position: relative;
  z-index: 1;
}

.tbox-php-hero__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--surface-glass-88);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.tbox-php-hero__panel-head .material-symbols-outlined {
  color: var(--brand-cta);
  font-size: 22px;
}

.tbox-php-hero__specs {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
}

.tbox-php-hero__specs div {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--text-inverse-12);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-inverse) 7%, transparent);
}

.tbox-php-hero__specs dt {
  margin: 0;
  color: var(--surface-glass-58);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tbox-php-hero__specs dd {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.tbox-php-hero__flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
}

.tbox-php-hero__flow span {
  position: relative;
  display: inline-flex;
  min-height: 2.5rem;
  align-items: center;
  justify-content: center;
  padding-inline: var(--space-xs);
  border: 1px solid var(--text-inverse-16);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--text-inverse) 6%, transparent);
  color: var(--surface-glass-75);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
}

.tbox-php-hero__flow span:not(:last-child)::after {
  content: "";
  position: absolute;
  right: calc(var(--space-xs) * -0.65);
  width: 0.45rem;
  height: 1px;
  background: var(--brand-cta);
}

.tbox-php-deploy-flow__shell {
  display: grid;
  grid-template-columns: minmax(0, 800px);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
  max-width: 800px;
}

.tbox-php-deploy-flow__copy {
  max-width: none;
}

.tbox-php-deploy-flow__copy .tbox-prose {
  margin-bottom: var(--space-lg);
}

.tbox-php-release-ledger,
.tbox-php-ops-list {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-php-release-ledger {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin: 0 0 var(--space-lg);
}

.tbox-php-release-ledger div {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
}

.tbox-php-release-ledger div + div {
  border-left: 1px solid var(--border-light);
}

.tbox-php-release-ledger dt {
  color: var(--brand-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tbox-php-release-ledger dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.tbox-php-deploy-flow .tbox-hero-terminal {
  border: 1px solid color-mix(in srgb, var(--surface-dark) 18%, transparent);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--surface-dark) 18%, transparent);
}

.tbox-php-ops-list {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin-block: var(--space-lg) var(--space-xl);
}

.tbox-php-ops-list li {
  margin: 0;
  border-radius: 0;
  border: 0;
  box-shadow: none;
}

.tbox-php-ops-list li + li {
  border-left: 1px solid var(--border-light);
}

.tbox-php-proof-section .tbox-ui-proof {
  margin: clamp(1rem, 2vw, 1.5rem) 0;
  padding-block: 0;
  grid-template-columns: minmax(0, 1.16fr) minmax(16rem, 0.72fr);
}

.tbox-php-proof-section .tbox-ui-proof--media-last {
  grid-template-columns: minmax(16rem, 0.72fr) minmax(0, 1.16fr);
}

.tbox-php-proof-section .tbox-ui-proof__media {
  background: var(--surface-base);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border-light));
  box-shadow: var(--shadow-sm);
}

.tbox-php-proof-section .tbox-ui-proof__image,
.tbox-php-proof-section .tbox-ui-proof__video {
  max-height: min(52vh, 460px);
  object-fit: contain;
  object-position: top center;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.tbox-php-proof-section .tbox-ui-proof__video {
  background: var(--surface-dark);
}

#php .tbox-pillar-row--3-diagram {
  align-items: stretch;
}

#php .tbox-pillar-diagram-card {
  background: var(--surface-base);
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
  box-shadow: var(--shadow-sm);
}

#php .tbox-bento-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-md);
  align-items: center;
}

#php-patterns .tbox-feature-matrix {
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}

#php-patterns .tbox-feature-matrix__header {
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-subtle));
}

#php-patterns .tbox-feature-matrix__row {
  padding: var(--space-lg);
}

#php-patterns .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base));
}

#php-patterns .tbox-feature-matrix__icon {
  width: 2rem;
  height: 2rem;
  margin-top: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-primary-08);
  color: var(--brand-primary);
}

#php-patterns .tbox-feature-matrix__icon .material-symbols-outlined {
  font-size: 18px;
}

#php-patterns .tbox-feature-matrix__text :where(h3, h4) {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-lg);
}

#php-patterns .tbox-feature-matrix__text :where(p) {
  max-width: var(--prose-measure-default);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

#node-patterns .tbox-feature-matrix {
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}

#node-patterns .tbox-feature-matrix__header {
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-subtle));
}

#node-patterns .tbox-feature-matrix__row {
  padding: var(--space-lg);
}

#node-patterns .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--brand-primary) 5%, var(--surface-base));
}

#node-patterns .tbox-feature-matrix__icon {
  width: 2rem;
  height: 2rem;
  margin-top: 0;
  border-radius: var(--radius-sm);
  background: var(--brand-primary-08);
  color: var(--brand-primary);
}

#node-patterns .tbox-feature-matrix__icon .material-symbols-outlined {
  font-size: 18px;
}

#node-patterns .tbox-feature-matrix__text :where(h3, h4) {
  margin-bottom: var(--space-xs);
  font-size: var(--fs-lg);
}

#node-patterns .tbox-feature-matrix__text :where(p) {
  max-width: var(--prose-measure-default);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

:root[data-theme="dark"] .tbox-nodejs-release-ledger,
:root[data-theme="dark"] .tbox-nodejs-ops-list,
:root[data-theme="dark"] .tbox-nodejs-proof-section .tbox-ui-proof__media,
:root[data-theme="dark"] .tbox-php-release-ledger,
:root[data-theme="dark"] .tbox-php-ops-list,
:root[data-theme="dark"] .tbox-php-proof-section .tbox-ui-proof__media,
:root[data-theme="dark"] #php .tbox-pillar-diagram-card,
:root[data-theme="dark"] #php-patterns .tbox-feature-matrix,
:root[data-theme="dark"] #node-patterns .tbox-feature-matrix {
  border-color: color-mix(in srgb, var(--text-inverse) 12%, var(--border-dark));
  background: color-mix(in srgb, var(--surface-dark) 88%, var(--brand-primary-dark) 12%);
}

:root[data-theme="dark"] .tbox-nodejs-release-ledger div + div,
:root[data-theme="dark"] .tbox-nodejs-ops-list li + li,
:root[data-theme="dark"] .tbox-php-release-ledger div + div,
:root[data-theme="dark"] .tbox-php-ops-list li + li {
  border-color: color-mix(in srgb, var(--text-inverse) 10%, var(--border-dark));
}

@media (width <= 900px) {
  .tbox-php-hero .tbox-hero-v3__inner,
.tbox-php-deploy-flow__shell,
.tbox-php-proof-section .tbox-ui-proof,
.tbox-php-proof-section .tbox-ui-proof--media-last,
.tbox-nodejs-hero .tbox-hero-v3__inner,
.tbox-nodejs-deploy-shell {
    grid-template-columns: 1fr;
  }

  .tbox-php-proof-section .tbox-ui-proof--media-last .tbox-ui-proof__media,
.tbox-php-proof-section .tbox-ui-proof--media-last .tbox-ui-proof__caption {
    order: initial;
  }

  .tbox-php-hero .tbox-hero-v3__inner,
.tbox-nodejs-hero .tbox-hero-v3__inner {
    text-align: center;
  }

  .tbox-php-hero__copy,
.tbox-php-deploy-flow__copy,
.tbox-nodejs-hero__copy,
.tbox-nodejs-deploy-shell__copy {
    max-width: none;
  }

  .tbox-php-hero .tbox-hero-v3__cta-row,
.tbox-nodejs-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-nodejs-release-ledger {
    grid-template-columns: 1fr;
  }

  .tbox-php-release-ledger,
.tbox-php-ops-list {
    grid-template-columns: 1fr;
  }

  .tbox-nodejs-release-ledger div + div,
.tbox-php-release-ledger div + div,
.tbox-php-ops-list li + li {
    border-top: 1px solid var(--border-light);
    border-left: 0;
  }

  .tbox-nodejs-ops-list {
    grid-template-columns: 1fr;
  }

  .tbox-nodejs-ops-list li + li {
    border-top: 1px solid var(--border-light);
    border-left: 0;
  }

  .tbox-php-proof-section .tbox-ui-proof__image,
.tbox-php-proof-section .tbox-ui-proof__video {
    max-height: none;
  }
}

@media (width <= 640px) {
  .tbox-php-hero__flow,
.tbox-nodejs-hero__flow,
#php .tbox-bento-cta-card,
#php .tbox-pillar-row--3-diagram .tbox-pillar-diagram-card,
.tbox-nodejs-hero__specs {
    grid-template-columns: 1fr;
    grid-column: auto;
  }

  .tbox-php-hero__flow span:not(:last-child)::after,
.tbox-nodejs-hero__flow span:not(:last-child)::after {
    display: none;
  }
}

.tbox-dotnet-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(21rem, 0.52fr);
  gap: clamp(2rem, 4.5vw, 3.5rem);
  align-items: center;
  max-width: min(1180px, 92vw);
  text-align: left;
}

.tbox-dotnet-hero__content {
  max-width: 720px;
}

.tbox-dotnet-hero .tbox-hero-v3__title,
.tbox-dotnet-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

.tbox-dotnet-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

.tbox-dotnet-hero__panel {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  overflow: hidden;
  background: var(--brand-primary-deep);
  border: 1px solid color-mix(in srgb, var(--text-inverse) 22%, transparent);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 var(--text-inverse-14) inset;
  color: var(--text-inverse);
  padding: clamp(1.25rem, 3vw, 1.75rem);
}

.tbox-dotnet-hero__panel > * {
  position: relative;
}

.tbox-dotnet-hero__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.tbox-dotnet-hero__panel-head .material-symbols-outlined {
  color: var(--brand-cta);
  font-size: 22px;
}

.tbox-dotnet-hero__release {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
  overflow: hidden;
}

.tbox-dotnet-hero__release span {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  min-height: 40px;
  padding: 0 var(--space-md);
  border: 1px solid var(--text-inverse-12);
  border-radius: var(--radius-sm);
  background: var(--text-inverse-08);
  color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
}

.tbox-dotnet-hero__release span::before {
  content: "";
  flex: 0 0 0.48rem;
  width: 0.48rem;
  height: 0.48rem;
  border-radius: var(--radius-cap);
  background: var(--brand-cta);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-cta) 16%, transparent);
}

.tbox-dotnet-hero__specs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xs);
  margin: 0;
}

.tbox-dotnet-hero__specs div {
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid var(--text-inverse-12);
  border-radius: var(--radius-sm);
  background: var(--text-inverse-08);
}

.tbox-dotnet-hero__specs dt {
  color: var(--surface-glass-60);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  margin-bottom: var(--space-xs);
}

.tbox-dotnet-hero__specs dd {
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  margin: 0;
  overflow-wrap: anywhere;
}

.tbox-dotnet-deploy-grid {
  display: grid;
  grid-template-columns: minmax(0, 780px);
  gap: clamp(2rem, 5vw, 3.75rem);
  align-items: start;
  max-width: 780px;
}

.tbox-dotnet-deploy-grid > * {
  min-width: 0;
}

.tbox-dotnet-deploy-grid__copy {
  max-width: none;
}

.tbox-dotnet-checks {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-xl) 0;
  padding: 0;
  list-style: none;
}

.tbox-dotnet-checks li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-card);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-dotnet-checks .material-symbols-outlined {
  color: var(--brand-primary);
  font-size: 20px;
  margin-top: 0.15em;
}

.tbox-dotnet-deploy-grid__terminal .tbox-hero-terminal {
  border-radius: var(--radius-md);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--surface-dark) 18%, transparent);
}

#dotnet .tbox-resp-card {
  background: var(--surface-base);
  border-color: var(--border-light);
  box-shadow: none;
}

#dotnet .tbox-resp-card--platform {
  border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--border-light));
}

#dotnet .tbox-resp-card--dev {
  border-color: color-mix(in srgb, var(--brand-cta) 24%, var(--border-light));
}

#dotnet-patterns .tbox-usecase-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-md-plus);
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
}

#dotnet-patterns .tbox-usecase-card {
  grid-column: span 3;
  min-height: 100%;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: none;
}

#dotnet-patterns .tbox-usecase-card:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border-light));
  box-shadow: 0 2px 8px color-mix(in srgb, var(--surface-dark) 8%, transparent);
}

#dotnet-patterns .tbox-usecase-card:first-child {
  grid-column: span 4;
  grid-row: span 2;
  padding: clamp(1.45rem, 2.8vw, 2.25rem);
  background: var(--surface-base);
  border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--border-light));
}

#dotnet-patterns .tbox-usecase-card:first-child .tbox-usecase-card__header {
  align-items: flex-start;
}

#dotnet-patterns .tbox-usecase-card:first-child .tbox-usecase-card__header h3 {
  font-size: clamp(1.35rem, 2vw, 1.8rem);
  line-height: var(--lh-tight);
}

#dotnet-patterns .tbox-usecase-card:first-child .tbox-usecase-card__body {
  max-width: var(--prose-measure-wide);
  font-size: var(--fs-lg);
}

.tbox-dotnet-topology-list {
  display: grid;
  gap: var(--space-sm);
  margin: auto 0 0;
  padding: var(--space-lg) 0 0;
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  list-style: none;
}

.tbox-dotnet-topology-list li {
  display: flex;
  gap: var(--space-sm);
  line-height: var(--lh-relaxed);
}

.tbox-dotnet-topology-list li::before {
  content: "";
  flex: 0 0 0.42rem;
  width: 0.42rem;
  height: 0.42rem;
  margin-top: 0.55em;
  border-radius: var(--radius-cap);
  background: var(--brand-primary);
}

#dotnet-patterns .tbox-usecase-card:nth-child(n + 2) {
  grid-column: span 2;
}

#dotnet-patterns .tbox-usecase-card__header {
  align-items: center;
}

#dotnet-patterns .tbox-usecase-card__header .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  background: var(--surface-muted);
  border-radius: var(--radius-xs);
  font-size: 18px;
}

#dotnet-operations .tbox-info-block {
  gap: var(--space-lg);
}

#dotnet-operations .tbox-ah-iac-split > * {
  min-width: 0;
}

#dotnet-operations .tbox-code-block-wrap--manifest {
  max-width: 100%;
}

#dotnet-operations .tbox-pillar {
  border-color: var(--border-light);
  box-shadow: none;
}

#dotnet-operations .tbox-pillar:hover {
  box-shadow: 0 2px 8px color-mix(in srgb, var(--surface-dark) 8%, transparent);
}

#dotnet-operations .tbox-pillar__accent {
  display: none;
}

#dotnet-operations .tbox-pillar__header {
  align-items: center;
}

:root[data-theme="dark"] #dotnet-patterns .tbox-usecase-card:first-child {
  background: var(--surface-card);
  border-color: color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
}

:root[data-theme="dark"] #dotnet .tbox-resp-card {
  background: var(--surface-card);
  border-color: color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
}

:root[data-theme="dark"] .tbox-dotnet-topology-list {
  border-color: var(--border-mid);
  color: var(--text-secondary);
}

@media (width <= 900px) {
  .tbox-dotnet-hero .tbox-hero-v3__inner,
.tbox-dotnet-deploy-grid {
    grid-template-columns: 1fr;
  }

  .tbox-dotnet-hero .tbox-hero-v3__inner {
    text-align: center;
  }

  .tbox-dotnet-hero__content,
.tbox-dotnet-deploy-grid__copy {
    max-width: none;
  }

  .tbox-dotnet-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  #dotnet-patterns .tbox-usecase-card:first-child {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  #dotnet-patterns .tbox-usecase-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #dotnet-patterns .tbox-usecase-card,
#dotnet-patterns .tbox-usecase-card:nth-child(2) {
    grid-column: auto;
  }

  #dotnet-patterns .tbox-usecase-card:nth-child(n + 2) {
    grid-column: auto;
  }

}

@media (width <= 560px) {
  #dotnet-patterns .tbox-usecase-grid {
    grid-template-columns: 1fr;
  }

  .tbox-dotnet-hero__specs {
    grid-template-columns: 1fr;
  }

  .tbox-dotnet-hero__release span {
    min-height: 38px;
  }

  .tbox-dotnet-deploy-grid__terminal .tbox-hero-terminal__body {
    padding: var(--space-md);
  }

  #deploy-flow .tbox-dotnet-deploy-grid__terminal .tbox-hero-terminal__line {
    white-space: normal;
    overflow-wrap: break-word;
  }
}

/* Security stack diagram */
.tbox-hero-v3--security.tbox-hero-v3--compact {
  padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(2.35rem, 4vw, 3.4rem);
}

.tbox-hero-v3--security .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(20rem, 0.46fr);
  gap: clamp(2.25rem, 5vw, 4.75rem);
  align-items: center;
  max-width: 1200px;
  text-align: left;
}

.tbox-hero-v3__copy {
  display: grid;
  gap: var(--space-xl);
}

.tbox-hero-v3--security .tbox-hero-v3__title,
.tbox-hero-v3--security .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

.tbox-hero-v3--security .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 82%, transparent);
}

.tbox-hero-v3--security .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

.tbox-hero-v3--security .tbox-hero-v3__panel {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  overflow: hidden;
  padding: clamp(1.1rem, 2vw, 1.45rem);
  border: 1px solid color-mix(in srgb, var(--text-inverse) 20%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-dark) 76%, var(--brand-primary-dark) 24%);
  color: var(--text-inverse);
  box-shadow:
    0 1px 0 var(--text-inverse-12) inset,
    0 18px 40px color-mix(in srgb, var(--gray-950) 18%, transparent);
}

.tbox-hero-v3--security .tbox-hero-v3__panel::before {
  display: none;
}

.tbox-hero-v3--security .tbox-hero-v3__panel > * {
  position: relative;
  z-index: 1;
}

.tbox-hero-v3--security .tbox-hero-v3__panel-head,
.tbox-hero-v3--security .tbox-hero-v3__ledger {
  border: 1px solid color-mix(in srgb, var(--surface-base) 15%, transparent);
  background: color-mix(in srgb, var(--surface-base) 7%, transparent);
}

.tbox-hero-v3--security .tbox-hero-v3__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md);
  border-radius: var(--radius-sm-plus);
  font-size: var(--fs-sm);
  color: color-mix(in srgb, var(--text-inverse) 76%, transparent);
}

.tbox-hero-v3--security .tbox-hero-v3__panel-head strong {
  color: var(--brand-cta);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  overflow-wrap: anywhere;
}

.tbox-hero-v3--security .tbox-hero-v3__ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  overflow: hidden;
  border-radius: var(--radius-sm-plus);
}

.tbox-hero-v3--security .tbox-hero-v3__ledger div {
  min-width: 0;
  padding: var(--space-md);
}

.tbox-hero-v3--security .tbox-hero-v3__ledger div + div {
  border-left: 1px solid color-mix(in srgb, var(--surface-base) 15%, transparent);
}

.tbox-hero-v3--security .tbox-hero-v3__ledger dt {
  margin: 0 0 var(--space-2xs);
  color: color-mix(in srgb, var(--text-inverse) 62%, transparent);
  font-size: var(--fs-xs);
}

.tbox-hero-v3--security .tbox-hero-v3__ledger dd {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
}

.tbox-ah-security-section .tbox-container {
  max-width: 1120px;
}

@media (width <= 900px) {
  .tbox-hero-v3--security .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
  }

  .tbox-hero-v3__panel {
    max-width: 36rem;
  }

}

@media (width <= 560px) {
  .tbox-hero-v3--security .tbox-hero-v3__inner {
    text-align: center;
  }

  .tbox-hero-v3--security .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-hero-v3__panel {
    gap: var(--space-md);
    padding: var(--space-md);
    text-align: left;
  }

  .tbox-hero-v3--security .tbox-hero-v3__ledger {
    display: none;
  }
}

/* Feature matrix */
.tbox-feature-matrix {
  border: 1px solid var(--border-light); border-radius: var(--radius-md, 8px);
  overflow: hidden; margin-top: 1.5rem;
}
.tbox-ah-security-matrix {
  border-color: color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
}
.tbox-feature-matrix-summary {
  margin: 1.25rem 0 0; font-size: var(--fs-sm);
  color: var(--text-secondary);
}
.tbox-feature-matrix-summary strong {
  color: var(--success-ink);
  font-weight: var(--fw-semibold);
}

/* Two-column feature list (dl) — replaces feature-card grids on low-density
   reference sections (cPanel/WHM feature catalogs). */
.tbox-feature-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-md) var(--space-xl);
  margin: var(--space-lg) 0 0;
  padding: 0;
}
.tbox-feature-list__item {
  border-top: 1px solid var(--border-light);
  padding-top: var(--space-md);
}
.tbox-feature-list dt {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0 0 0.25rem;
}
.tbox-feature-list dd {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--lh-loose);
}
@media (width <= 600px) {
  .tbox-feature-list {
    grid-template-columns: 1fr;
  }
}
.tbox-feature-matrix__header {
  display: grid; grid-template-columns: 1fr auto; gap: 1rem;
  padding: 0.625rem 1.25rem; background: var(--surface-subtle);
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}
.tbox-feature-matrix__category {
  padding: 0.5rem 1.25rem; background: var(--surface-muted);
  border-top: 1px solid var(--border-light);
  font-size: var(--fs-2xs); font-weight: 700;
  color: var(--text-muted);
}
.tbox-ah-security-matrix .tbox-feature-matrix__category {
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--brand-primary-06) 28%);
  color: var(--text-primary);
}
.tbox-feature-matrix__row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 1rem; align-items: center;
  padding: 0.875rem 1.25rem; background: var(--surface-base);
  transition: background 0.15s;
}
.tbox-feature-matrix__row + .tbox-feature-matrix__row { border-top: 1px solid var(--border-light); }
.tbox-feature-matrix__row:hover { background: var(--brand-primary-04); }
.tbox-feature-matrix__feature { display: flex; align-items: flex-start; gap: 0.75rem; }
.tbox-feature-matrix__icon {
  flex-shrink: 0; color: var(--icon-color, var(--text-muted));
  display: flex; align-items: center; justify-content: center;
  margin-top: 2px;
}
.tbox-feature-matrix__icon :where(svg) { width: 16px; height: 16px; }
.tbox-feature-matrix__text :where(h3, h4) {
  font-size: var(--fs-sm); font-weight: 600; color: var(--text-primary); margin: 0 0 0.125rem;
}
.tbox-feature-matrix__text :where(p) {
  font-size: var(--fs-xs); color: var(--text-secondary); margin: 0; line-height: 1.5;
}
.tbox-status-badge--included,
.tbox-status-badge--addon {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: var(--fs-xs); font-weight: 600; white-space: nowrap;
}
.tbox-status-badge--included {
  color: var(--success-ink);
}
.tbox-status-badge--addon {
  color: var(--brand-cta-text-deep, #B06A0A);
}
.tbox-status-badge--included :where(svg),
.tbox-status-badge--addon :where(svg) { width: 14px; height: 14px; }
.tbox-feature-matrix__spec,
#content .tbox-feature-matrix__spec {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: 0;
  white-space: nowrap;
  text-align: right;
}
@media (width <= 600px) {
  .tbox-feature-matrix__row { grid-template-columns: 1fr; gap: 0.5rem; }
  .tbox-feature-matrix__header > span:last-child { display: none; }
.tbox-feature-matrix__spec,
#content .tbox-feature-matrix__spec { text-align: left; }
}

/* Cloud VPS Operations Act (#operations-section on /cloud-vps/) */
.tbox-cvps-operations .tbox-container {
  max-width: 1180px;
}

.tbox-cvps-ops-pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-block: var(--space-md-plus) clamp(var(--space-lg), 2vw, var(--space-xl));
}

.tbox-cvps-ops-pill {
  display: inline-flex;
  align-items: center;
  padding: 0.4rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--surface-base) 18%, var(--brand-primary-light) 8%);
  border-radius: 999px;
  background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.tbox-cvps-ops-pill:hover,
.tbox-cvps-ops-pill:focus-visible {
  border-color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary-04) 70%, var(--surface-muted) 30%);
  color: var(--brand-primary-dark);
  outline: none;
}

.tbox-cvps-ops-pill:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}

.tbox-cvps-ops-sub {
  margin-block-start: clamp(var(--space-xl), 4vw, var(--space-3xl));
  scroll-margin-top: var(--scroll-margin-top, 6rem);
}

.tbox-cvps-ops-sub + .tbox-cvps-ops-sub {
  margin-block-start: clamp(var(--space-2xl), 5vw, var(--space-4xl));
}

.tbox-cvps-ops-sub__heading {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  line-height: 1.25;
}

.tbox-cvps-ops-sub__lede {
  margin: 0 0 var(--space-md-plus);
  max-width: var(--prose-measure-default);
  color: var(--text-secondary);
}

.tbox-cvps-ops-sub__note {
  margin: var(--space-md) 0 0;
  padding: var(--space-sm-plus) var(--space-md);
  border-left: none;
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--brand-primary-04) 70%, var(--surface-muted) 30%);
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.tbox-cvps-ops-sub__cta {
  margin-block-start: var(--space-md-plus);
}

/* Centerpiece: MCP demo + audit ledger side-by-side at desktop, stacked on mobile. */
.tbox-cvps-ops-api__centerpiece {
  display: grid;
  gap: var(--space-md-plus);
  margin-block: var(--space-md-plus);
}

@media (min-width: 960px) {
  .tbox-cvps-ops-api__centerpiece {
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    align-items: start;
  }
}

/* Audit ledger panel for the operations act. */
.tbox-cvps-ops-audit {
  display: grid;
  gap: var(--space-sm-plus);
  padding: clamp(0.95rem, 1.8vw, 1.25rem);
  border: 1px solid color-mix(in srgb, var(--surface-base) 18%, var(--brand-primary-light) 8%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--gray-950) 70%, var(--brand-primary-dark) 30%);
  color: var(--text-inverse);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--gray-950) 24%, transparent);
}

.tbox-cvps-ops-audit__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  align-items: baseline;
}

.tbox-cvps-ops-audit__head strong {
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
}

.tbox-cvps-ops-audit__head span {
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-size: var(--fs-xs);
}

.tbox-cvps-ops-audit__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 1px;
  border: 1px solid color-mix(in srgb, var(--surface-base) 14%, transparent);
  border-radius: var(--radius-sm-plus);
  overflow: hidden;
  background: color-mix(in srgb, var(--surface-base) 14%, transparent);
}

.tbox-cvps-ops-audit__rows li {
  display: grid;
  grid-template-columns: 5.5rem minmax(8rem, 1fr) minmax(6rem, auto);
  gap: var(--space-sm);
  align-items: center;
  padding: 0.55rem var(--space-md);
  background: color-mix(in srgb, var(--gray-950) 70%, var(--brand-primary-dark) 30%);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
}

.tbox-cvps-ops-audit__rows li:nth-child(2n) {
  background: color-mix(in srgb, var(--surface-base) 8%, color-mix(in srgb, var(--gray-950) 70%, var(--brand-primary-dark) 30%));
}

.tbox-cvps-ops-audit__rows span {
  color: color-mix(in srgb, var(--text-inverse) 64%, transparent);
}

.tbox-cvps-ops-audit__rows strong {
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.tbox-cvps-ops-audit__rows em {
  color: var(--brand-cta);
  font-style: normal;
  overflow-wrap: anywhere;
}

.tbox-cvps-ops-audit__footnote {
  margin: 0;
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-size: var(--fs-xs);
  line-height: 1.5;
}

.tbox-cvps-ops-audit__footnote a {
  color: var(--brand-cta);
}

.tbox-cvps-security-panel {
  position: relative;
  display: grid;
  gap: var(--space-md-plus);
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
  margin-block: var(--space-md-plus);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surface-base) 18%, var(--brand-primary-light) 8%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--gray-950) 70%, var(--brand-primary-dark) 30%);
  color: var(--text-inverse);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--gray-950) 24%, transparent);
}

.tbox-cvps-security-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-cta);
}

.tbox-cvps-security-panel > * {
  position: relative;
  z-index: 1;
}

.tbox-cvps-security-panel__head,
.tbox-cvps-security-panel__rules li,
.tbox-cvps-security-panel__ledger {
  border: 1px solid color-mix(in srgb, var(--surface-base) 14%, transparent);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 8%, transparent);
}

.tbox-cvps-security-panel__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm-plus) var(--space-md);
}

.tbox-cvps-security-panel__head strong {
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
}

.tbox-cvps-security-panel__head span {
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-size: var(--fs-xs);
}

.tbox-cvps-security-panel__rules {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbox-cvps-security-panel__rules li {
  display: grid;
  grid-template-columns: 4.6rem minmax(4.5rem, 0.65fr) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm-plus) var(--space-md);
  min-width: 0;
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
}

.tbox-cvps-security-panel__rules li:nth-child(2n) {
  background: color-mix(in srgb, var(--surface-base) 11%, transparent);
}

.tbox-cvps-security-panel__rules span {
  color: var(--brand-cta);
  font-weight: var(--fw-semibold);
}

.tbox-cvps-security-panel__rules strong,
.tbox-cvps-security-panel__rules em {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-inverse);
  font-style: normal;
}

.tbox-cvps-security-panel__ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
}

.tbox-cvps-security-panel__ledger div {
  min-width: 0;
  padding: var(--space-md);
}

.tbox-cvps-security-panel__ledger div + div {
  border-left: 1px solid color-mix(in srgb, var(--surface-base) 14%, transparent);
}

.tbox-cvps-security-panel__ledger dt {
  margin: 0 0 var(--space-2xs);
  color: color-mix(in srgb, var(--text-inverse) 64%, transparent);
  font-size: var(--fs-xs);
}

.tbox-cvps-security-panel__ledger dd {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.tbox-cvps-ops-security__cards {
  margin-block: var(--space-md-plus);
}

.tbox-cvps-ops-volumes__ledger {
  margin-block: var(--space-md);
  scroll-margin-top: var(--scroll-margin-top, 6rem);
}

/* Boundary closer table: included / add-on / customer-owned. */
.tbox-cvps-ops-boundary {
  margin-block-start: clamp(var(--space-2xl), 5vw, var(--space-4xl));
  padding-block-start: clamp(var(--space-lg), 2.5vw, var(--space-xl));
  border-top: 1px solid color-mix(in srgb, var(--surface-base) 14%, var(--brand-primary-04) 6%);
}

.tbox-cvps-ops-boundary__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
}

.tbox-cvps-ops-boundary__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.tbox-cvps-ops-boundary__table th,
.tbox-cvps-ops-boundary__table td {
  padding: var(--space-sm-plus) var(--space-md);
  border: 1px solid color-mix(in srgb, var(--surface-base) 14%, var(--brand-primary-04) 6%);
  text-align: left;
  vertical-align: top;
}

.tbox-cvps-ops-boundary__table thead th {
  background: color-mix(in srgb, var(--brand-primary-04) 70%, var(--surface-muted) 30%);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.tbox-cvps-ops-boundary__table tbody th {
  background: color-mix(in srgb, var(--surface-muted) 80%, transparent);
  font-weight: var(--fw-semibold);
}

.tbox-cvps-ops-cta-rail {
  display: flex;
  gap: var(--space-md-plus);
  align-items: center;
  justify-content: space-between;
  margin-block-start: var(--space-lg);
  padding: clamp(var(--space-md), 2vw, var(--space-lg));
  border: 1px solid color-mix(in srgb, var(--surface-base) 16%, var(--brand-primary-light) 10%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--gray-950) 66%, var(--brand-primary-dark) 34%);
  color: var(--text-inverse);
}

.tbox-cvps-ops-cta-rail p {
  max-width: var(--prose-measure-wide);
  margin: 0;
  color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.tbox-cvps-ops-cta-rail .tbox-cta-row {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 720px) {
  .tbox-cvps-ops-boundary__table,
  .tbox-cvps-ops-boundary__table thead,
  .tbox-cvps-ops-boundary__table tbody,
  .tbox-cvps-ops-boundary__table tr,
  .tbox-cvps-ops-boundary__table th,
  .tbox-cvps-ops-boundary__table td {
    display: block;
    width: 100%;
  }

  .tbox-cvps-ops-boundary__table thead {
    position: absolute;
    inset-inline-start: -9999px;
  }

  .tbox-cvps-ops-boundary__table tr {
    margin-block-end: var(--space-md);
    border: 1px solid color-mix(in srgb, var(--surface-base) 14%, var(--brand-primary-04) 6%);
    border-radius: var(--radius-sm-plus);
    overflow: hidden;
  }

  .tbox-cvps-ops-boundary__table tbody th {
    border-bottom: 1px solid color-mix(in srgb, var(--surface-base) 14%, var(--brand-primary-04) 6%);
  }

  .tbox-cvps-ops-boundary__table td {
    border: none;
    border-bottom: 1px solid color-mix(in srgb, var(--surface-base) 8%, var(--brand-primary-04) 4%);
  }

  .tbox-cvps-ops-boundary__table td::before {
    content: attr(data-label);
    display: block;
    margin-block-end: 0.25rem;
    color: var(--text-secondary);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
  }

  .tbox-cvps-ops-sub,
  .tbox-cvps-ops-sub + .tbox-cvps-ops-sub {
    margin-block-start: var(--space-2xl);
  }

  .tbox-cvps-ops-boundary {
    margin-block-start: var(--space-2xl);
  }

  .tbox-cvps-ops-audit__head,
  .tbox-cvps-security-panel__head {
    display: grid;
    gap: var(--space-2xs);
  }

  .tbox-cvps-ops-audit__rows li {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2xs);
  }

  .tbox-cvps-ops-audit__rows em {
    overflow-wrap: anywhere;
  }

  .tbox-cvps-ops-cta-rail {
    display: grid;
    gap: var(--space-md);
  }

  .tbox-cvps-ops-cta-rail .tbox-cta-row {
    width: 100%;
  }

  .tbox-cvps-ops-cta-rail .tbox-cta-row :is(.tbox-btn, .tbox-btn-outline) {
    width: 100%;
    justify-content: center;
  }
}

:root[data-theme="dark"] .tbox-cvps-ops-pill {
  background: color-mix(in srgb, var(--surface-muted) 75%, transparent);
}

:root[data-theme="dark"] .tbox-cvps-ops-pill:hover,
:root[data-theme="dark"] .tbox-cvps-ops-pill:focus-visible {
  background: color-mix(in srgb, var(--brand-primary-dark) 50%, var(--surface-muted) 50%);
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-cvps-ops-boundary__table thead th {
  background: color-mix(in srgb, var(--brand-primary-dark) 30%, var(--surface-muted) 70%);
}

/* Cloud VPS Features & Operations (Variant A: #features + compute/storage/network on /cloud-vps/) */
.tbox-cvps-fops {
  padding-block: clamp(3rem, 6vw, 5rem);
}

:root[data-theme="dark"] .tbox-cvps-fops:not(.fops-v2-shell) {
  background: var(--neutral-9);
}

.tbox-cvps-fops__headline {
  max-width: 920px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  text-align: left;
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.tbox-cvps-fops__eyebrow {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  color: var(--brand-primary-dark);
  margin-bottom: 0.9rem;
}

:root[data-theme="dark"] .tbox-cvps-fops__eyebrow {
  color: var(--brand-primary);
}

.tbox-cvps-fops__title {
  font-size: clamp(var(--fs-heading-lg), 3.4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-primary);
  margin: 0 0 1rem;
  font-weight: var(--fw-semibold);
}

.tbox-cvps-fops__lede {
  font-size: var(--fs-lg);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
  max-width: var(--prose-measure-default);
}

.tbox-cvps-fops__major-grid {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.9rem;
}

.tbox-cvps-fops-major {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md, 10px);
  padding: 1.4rem 1.5rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 1rem;
  align-items: start;
  transition: border-color var(--ease-base);
}

.tbox-cvps-fops-major:hover {
  border-color: color-mix(in srgb, var(--brand-primary) 45%, transparent);
}

.tbox-cvps-fops-major__icon {
  width: 38px;
  height: 38px;
  border-radius: 9px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  color: var(--brand-primary);
}

.tbox-cvps-fops-major__icon .material-symbols-outlined {
  font-size: 22px;
}

.tbox-cvps-fops-major__title {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0 0 0.3rem;
  line-height: 1.3;
}

.tbox-cvps-fops-major__desc {
  font-size: var(--fs-base);
  line-height: 1.6;
  color: var(--text-secondary);
  margin: 0;
}

.tbox-cvps-fops-split {
  padding-block: clamp(3.25rem, 6vw, 5rem);
  border-top: 1px solid var(--border-light);
  --tbox-cvps-fops-accent: var(--brand-primary-dark);
  --tbox-cvps-fops-accent-tint: color-mix(in srgb, var(--tbox-cvps-fops-accent) 10%, transparent);
}

:root[data-theme="dark"] .tbox-cvps-fops-split {
  --tbox-cvps-fops-accent: var(--brand-primary);
}

.tbox-cvps-fops-split--warm {
  --tbox-cvps-fops-accent: var(--brand-cta);
  --tbox-cvps-fops-accent-tint: color-mix(in srgb, var(--brand-cta) 9%, transparent);
}

.tbox-cvps-fops-split__inner {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: 1.5rem;
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

.tbox-cvps-fops-split--reverse .tbox-cvps-fops-split__inner {
  grid-template-columns: 7fr 5fr;
}

.tbox-cvps-fops-split--reverse .tbox-cvps-fops-split__copy {
  order: 2;
}

.tbox-cvps-fops-split--reverse .tbox-cvps-fops-split__cards {
  order: 1;
}

.tbox-cvps-fops-split__copy {
  position: sticky;
  top: 88px;
}

.tbox-cvps-fops-split__chapter {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-normal);
  text-transform: none;
  color: var(--tbox-cvps-fops-accent);
  margin: 0 0 1rem;
}

.tbox-cvps-fops-split__chapter b {
  color: var(--text-tertiary);
  font-weight: var(--fw-bold);
  padding-left: 0.5rem;
}

.tbox-cvps-fops-split__title {
  font-size: clamp(var(--fs-heading-md), 2.2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-primary);
  margin: 0 0 1.1rem;
  font-weight: var(--fw-semibold);
  max-width: 18ch;
}

.tbox-cvps-fops-split__desc {
  font-size: var(--fs-lg);
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0 0 1.5rem;
  max-width: 40ch;
}

.tbox-cvps-fops-split__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  font-size: var(--fs-base);
  color: var(--text-tertiary);
}

.tbox-cvps-fops-split__meta li {
  display: inline-flex;
  gap: 0.35rem;
}

.tbox-cvps-fops-split__meta strong {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.tbox-cvps-fops-split__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--tbox-cvps-fops-accent);
  text-decoration: none;
  padding-bottom: 0.15rem;
  border-bottom: 1px solid color-mix(in srgb, var(--tbox-cvps-fops-accent) 50%, transparent);
}

.tbox-cvps-fops-split__link:hover {
  border-bottom-color: var(--tbox-cvps-fops-accent);
}

.tbox-cvps-fops-split__cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.75rem;
}

.tbox-cvps-fops-card {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md, 10px);
  padding: 1rem 1.15rem;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.8rem;
  align-items: start;
  transition: border-color var(--ease-base), background var(--ease-base);
}

.tbox-cvps-fops-card:hover {
  border-color: color-mix(in srgb, var(--tbox-cvps-fops-accent) 45%, transparent);
}

.tbox-cvps-fops-card__icon {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tbox-cvps-fops-accent);
  flex-shrink: 0;
}

.tbox-cvps-fops-card__icon .material-symbols-outlined {
  font-size: 20px;
}

.tbox-cvps-fops-card__title {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-sm);
  line-height: 1.3;
}

.tbox-cvps-fops-card__desc {
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

.tbox-cvps-fops-card--lead {
  grid-column: 1 / -1;
  padding: 1.4rem 1.5rem 1.5rem;
  background: var(--tbox-cvps-fops-accent-tint);
  border-color: color-mix(in srgb, var(--tbox-cvps-fops-accent) 42%, var(--border-light));
}

.tbox-cvps-fops-card--lead .tbox-cvps-fops-card__icon {
  width: 40px;
  height: 40px;
  background: color-mix(in srgb, var(--tbox-cvps-fops-accent) 18%, transparent);
  border-radius: 9px;
}

.tbox-cvps-fops-card--lead .tbox-cvps-fops-card__icon .material-symbols-outlined {
  font-size: 26px;
}

.tbox-cvps-fops-card--lead .tbox-cvps-fops-card__title {
  font-size: var(--fs-heading-lg);
  margin-bottom: 0.35rem;
}

.tbox-cvps-fops-card--lead .tbox-cvps-fops-card__desc {
  font-size: var(--fs-lg);
  line-height: 1.65;
  max-width: var(--prose-measure-default);
}

.tbox-cvps-fops-card--anchor {
  grid-column: 1 / -1;
  padding: 1.2rem 1.35rem 1.35rem;
  background: color-mix(in srgb, var(--tbox-cvps-fops-accent) 5%, var(--surface-base));
  border-color: color-mix(in srgb, var(--tbox-cvps-fops-accent) 20%, var(--border-light));
}

.tbox-cvps-fops-card--anchor .tbox-cvps-fops-card__desc {
  font-size: var(--fs-lg);
  line-height: 1.65;
}

.tbox-fops-more {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  list-style: none;
  margin: 0;
  padding: 0;
}

.tbox-fops-more li {
  display: flex;
  align-items: center;
  gap: .35rem;
  background: color-mix(in srgb, var(--brand-primary) 8%, transparent);
  border: 1px solid var(--brand-primary-16);
  border-radius: var(--radius-cap);
  padding: .3rem .75rem .3rem .55rem;
  font-size: .8125rem; /* intentional literal */
  font-weight: 500;
  color: var(--brand-primary-text);
  line-height: 1.4;
}

.tbox-fops-more li .material-symbols-outlined {
  font-size: .875rem; /* intentional literal */
  line-height: 1;
  color: var(--brand-primary);
  flex-shrink: 0;
}

:root[data-theme="dark"] .tbox-fops-more li {
  background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
  color: var(--blue-1);
}

:root[data-theme="dark"] .tbox-fops-more li .material-symbols-outlined {
  color: var(--blue-2);
}

@media (max-width: 900px) {
  .tbox-cvps-fops__major-grid {
    grid-template-columns: 1fr;
  }

  .tbox-cvps-fops-split__inner,
  .tbox-cvps-fops-split--reverse .tbox-cvps-fops-split__inner {
    grid-template-columns: 1fr;
  }

  .tbox-cvps-fops-split--reverse .tbox-cvps-fops-split__copy {
    order: 1;
  }

  .tbox-cvps-fops-split--reverse .tbox-cvps-fops-split__cards {
    order: 2;
  }

  .tbox-cvps-fops-split__copy {
    position: static;
  }

  .tbox-cvps-fops-split__cards {
    grid-template-columns: 1fr;
  }

  .tbox-cvps-fops-card--lead,
  .tbox-cvps-fops-card--anchor {
    grid-column: 1;
  }
}

/* ── Cloud VPS features: in-panel rail (gradient header + icon rows) ─────── */
.tbox-cvps-fops-rail {
  --rail-accent: var(--brand-cta);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

:root[data-theme="dark"] .tbox-cvps-fops-rail {
  border-color: color-mix(in srgb, var(--brand-primary) 22%, transparent);
}

.tbox-cvps-fops-rail__head {
  padding: 1.4rem 1.75rem 1.45rem;
  background: var(--rail-grad);
  color: var(--text-inverse);
}

.tbox-cvps-fops-rail__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.82rem; /* intentional literal */
  font-weight: 550;
  color: rgb(255 255 255 / 78%);
  margin-bottom: 0.55rem;
}

.tbox-cvps-fops-rail__eyebrow .material-symbols-outlined {
  font-size: 16px;
}

/* Eyebrow-only rail head (Overview panel: the section H2 already carries the
   message, so the rail band reduces to its label) */
.tbox-cvps-fops-rail__head > .tbox-cvps-fops-rail__eyebrow:only-child {
  margin-bottom: 0;
  font-size: 0.92rem; /* intentional literal: slight bump when it stands alone */
  color: rgb(255 255 255 / 88%);
}

.tbox-cvps-fops-rail__title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text-inverse);
  line-height: 1.32;
  letter-spacing: -0.005em;
  margin: 0 0 0.5rem;
}

.tbox-cvps-fops-rail__desc {
  font-size: var(--fs-base);
  color: rgb(255 255 255 / 90%);
  line-height: 1.55;
  max-width: var(--prose-measure-default);
  margin: 0;
}

.tbox-cvps-fops-rail__body {
  padding: 1.1rem 1.75rem 1.4rem;
}

.tbox-cvps-fops-rail__rows {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Mini-subheads chunking the longer tab panels into scannable groups */
.tbox-cvps-fops-rail__subhead {
  margin: 0 0 var(--space-2xs);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.tbox-cvps-fops-rail__rows + .tbox-cvps-fops-rail__subhead {
  margin-top: var(--space-xl);
}

.tbox-cvps-fops-rail__row {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 0.85rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border-light);
}

.tbox-cvps-fops-rail__row:last-child {
  border-bottom: none;
}

/* Two-column row layout for short rail lists (Cloud VPS Top Features panel).
   Mobile collapses back to the default single column. */
.tbox-cvps-fops-rail__rows--2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 2.2rem;
}

.tbox-cvps-fops-rail__rows--2col > .tbox-cvps-fops-rail__row:nth-last-child(-n+2) {
  border-bottom-style: none;
}

@media (max-width: 760px) {
  .tbox-cvps-fops-rail__rows--2col {
    grid-template-columns: 1fr;
  }
  .tbox-cvps-fops-rail__rows--2col > .tbox-cvps-fops-rail__row:nth-last-child(-n+2) {
    border-bottom-style: solid;
    border-bottom-width: 1px;
  }
  .tbox-cvps-fops-rail__rows--2col > .tbox-cvps-fops-rail__row:last-child {
    border-bottom-style: none;
  }
}

:root[data-theme="dark"] .tbox-cvps-fops-rail__row {
  border-bottom-color: color-mix(in srgb, var(--brand-primary) 20%, transparent);
}

.tbox-cvps-fops-rail__row-icon {
  color: var(--rail-accent);
  display: inline-flex;
  align-items: flex-start;
  padding-top: 2px;
}

.tbox-cvps-fops-rail__row-icon .material-symbols-outlined {
  font-size: 22px;
}

.tbox-cvps-fops-rail__row-title {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 0.15rem;
}

.tbox-cvps-fops-rail__row-desc {
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  line-height: 1.5;
}

@media (max-width: 720px) {
  .tbox-cvps-fops-rail__head {
    padding: 1.15rem 1.25rem 1.2rem;
  }
  .tbox-cvps-fops-rail__body {
    padding: 0.85rem 1.25rem 1.15rem;
  }
}

/* Tabbar groups the tablist (role=tablist, tabs only) with the expand button,
   which lives outside role=tablist to comply with the WAI-ARIA tablist
   children rule. The pill background moves up to the tabbar when present. */
.tbox-fops-tabbar {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: var(--space-2xs);
  margin: 0 auto var(--space-2xl);
  width: fit-content;
  max-width: 100%;
  background: var(--brand-hero-dark);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
  border-radius: var(--radius-lg);
}

.tbox-fops-tabbar > .tbox-fops-tablist {
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  border-radius: 0;
  width: auto;
  max-width: none;
  flex: 1 1 auto;
  min-width: 0;
}

/* Expand-all toggle + expanded state, scoped to the section's tabs. */
.tbox-fops-tabs .tbox-fops-expand {
  appearance: none;
  background: transparent;
  border: 0;
  font: inherit;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--text-on-dark-strong);
  padding: 0.55rem 0.9rem;
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: var(--min-touch-target);
  flex: 0 0 auto;
  transition: background var(--ease-base), color var(--ease-base);
}

.tbox-fops-tabs .tbox-fops-expand:hover {
  background: var(--surface-glass-08);
  color: var(--neutral-white);
}

.tbox-fops-tabs .tbox-fops-expand__icon {
  font-size: 18px;
  transition: transform var(--ease-base);
}

.tbox-fops-tabs .tbox-fops-expand[aria-pressed="true"] .tbox-fops-expand__icon {
  transform: rotate(180deg);
}

.tbox-fops-tabs .tbox-fops-expand__label--collapse {
  display: none;
}

.tbox-fops-tabs .tbox-fops-expand[aria-pressed="true"] .tbox-fops-expand__label--expand {
  display: none;
}

.tbox-fops-tabs .tbox-fops-expand[aria-pressed="true"] .tbox-fops-expand__label--collapse {
  display: inline;
}

.tbox-fops-tabs[data-expanded="true"] .tbox-fops-panel[hidden] {
  display: block;
}

.tbox-fops-tabs[data-expanded="true"] .tbox-fops-panel {
  scroll-margin-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 80px) + 24px);
}

.tbox-fops-tabs[data-expanded="true"] .tbox-fops-panel + .tbox-fops-panel {
  margin-top: 1.25rem;
}

.tbox-fops-tabs[data-expanded="true"] .tbox-fops-tab[aria-selected="true"] {
  background: var(--surface-glass-08);
  box-shadow: none;
  font-weight: 550;
}

@media print {
  #features-detail-section .tbox-fops-panel[hidden] {
    display: block;
  }
  #features-detail-section .tbox-fops-tablist {
    display: none;
  }
}

/* ── Product features: tabbed chapter strip (App Hosting, Cloud VPS) ──────── */
.tbox-fops-intro,
.tbox-fops-tabs {
  max-width: 1240px;
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.tbox-fops-intro {
  margin-bottom: 1.25rem;
  color: var(--text-tertiary);
  font-size: var(--fs-base);
}

.tbox-fops-tablist {
  display: flex;
  gap: var(--space-xs-plus);
  padding: var(--space-2xs);
  margin: 0 auto var(--space-2xl);
  width: fit-content;
  max-width: 100%;
  justify-content: center;
  flex-wrap: wrap;
  background: var(--brand-hero-dark);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, transparent);
  border-radius: var(--radius-lg);
}

.tbox-fops-tab {
  appearance: none;
  background: transparent;
  border: 0;
  padding: .65rem 1.25rem;
  min-height: var(--min-touch-target);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  color: var(--text-on-dark-strong);
  border-radius: var(--radius-md);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  transition: background var(--ease-base), color var(--ease-base), box-shadow var(--ease-base);
}

.tbox-fops-tab:hover {
  background: var(--surface-glass-08);
  color: var(--neutral-white);
}

.tbox-fops-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--brand-primary) 22%, var(--brand-hero-mid));
  color: var(--neutral-white);
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

:root[data-theme="dark"] .tbox-fops-tablist {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, transparent);
}

.tbox-fops-tab .tbox-runtime-icon {
  --tbox-runtime-icon-size: 20px;
}

.tbox-fops-panel[hidden] { display: none; }

.tbox-fops-panel {
  animation: tbox-fops-panel-fade .25s ease-out;
}

@keyframes tbox-fops-panel-fade {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.tbox-fops-panel .tbox-cvps-fops-split {
  padding-block: 0;
  border-top: none;
  background: transparent;
}

.tbox-fops-panel .tbox-cvps-fops-split__inner {
  padding-inline: 0;
  max-width: none;
}

#features-detail-section,
#api-automation,
#mcp,
#backups-recovery,
#volume-storage,
#recovery-ledger,
#security-networking {
  scroll-margin-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 80px) + 220px);
}

@media (prefers-reduced-motion: reduce) {
  .tbox-fops-panel { animation: none; }
}

@media (max-width: 900px) {
  .tbox-fops-tablist {
    flex-wrap: wrap;
    border-radius: 12px;
  }

}

.tbox-runtime-defaults {
  margin-bottom: clamp(var(--space-xl), 3vw, var(--space-3xl));
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
}

.tbox-runtime-defaults__heading {
  margin: 0 0 var(--space-md);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.tbox-runtime-defaults__ledger {
  display: grid;
  grid-template-columns: 10ch minmax(0, 1fr);
  gap: 0;
  margin: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.tbox-runtime-defaults__ledger > div {
  display: contents;
}

.tbox-runtime-defaults__ledger dt,
.tbox-runtime-defaults__ledger dd {
  padding: var(--space-sm-plus) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.tbox-runtime-defaults__ledger > div:last-child dt,
.tbox-runtime-defaults__ledger > div:last-child dd {
  border-bottom: none;
}

.tbox-runtime-defaults__ledger dt {
  background: var(--surface-subtle);
  font-weight: var(--fw-semibold);
}

:root[data-theme="dark"] .tbox-runtime-defaults {
  background: var(--surface-glass-03);
  border-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-runtime-defaults__ledger {
  border-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-runtime-defaults__ledger dt,
:root[data-theme="dark"] .tbox-runtime-defaults__ledger dd {
  border-bottom-color: var(--surface-glass-08);
}

:root[data-theme="dark"] .tbox-runtime-defaults__ledger dt {
  background: var(--surface-glass-04);
}

/* ── Runtime logo strip (static, 7-column) ──────────────────────────────── */

.tbox-runtime-strip {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0;
  list-style: none;
  margin: 0 0 clamp(var(--space-xl), 3vw, var(--space-3xl));
  padding: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-12);
  overflow: hidden;
}

.tbox-runtime-strip__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs-plus);
  padding: var(--space-md) var(--space-sm);
  border-right: 1px solid var(--border-light);
  color: var(--text-secondary);
  text-align: center;
}

.tbox-runtime-strip__item:last-child {
  border-right: none;
}

.tbox-runtime-strip__item .tbox-runtime-icon {
  --tbox-runtime-icon-size: 26px;
}

.tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="php"] { color: #777BB4; }
.tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="nodejs"] { color: #5FA04E; }
.tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="python"] { color: #3776AB; }
.tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="ruby"] { color: #CC342D; }
.tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="java"] { color: #E76F00; }
.tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="go"] { color: #00ADD8; }
.tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="dotnet"] { color: #512BD4; }
.tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="docker"] { color: #1D63ED; }
.tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="kubernetes"] { color: #326CE5; }

.tbox-runtime-strip__name {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

:root[data-theme="dark"] .tbox-runtime-strip {
  background: var(--surface-raised);
  border-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-runtime-strip__item {
  border-right-color: var(--surface-glass-12);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="php"] { color: #A0A4D6; }
:root[data-theme="dark"] .tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="nodejs"] { color: #8DD673; }
:root[data-theme="dark"] .tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="python"] { color: #6BA9DB; }
:root[data-theme="dark"] .tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="ruby"] { color: #E66B65; }
:root[data-theme="dark"] .tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="java"] { color: #F89A3A; }
:root[data-theme="dark"] .tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="go"] { color: #6FBED6; }
:root[data-theme="dark"] .tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="dotnet"] { color: #8A6DEB; }
:root[data-theme="dark"] .tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="docker"] { color: #5A92F2; }
:root[data-theme="dark"] .tbox-runtime-strip__item .tbox-runtime-icon[data-runtime="kubernetes"] { color: #6B96EE; }

@media (max-width: 640px) {
  .tbox-runtime-strip {
    grid-template-columns: repeat(4, 1fr);
    border-radius: var(--radius-md);
  }
  .tbox-runtime-strip__item:nth-child(4n) {
    border-right: none;
  }
  .tbox-runtime-strip__item:nth-child(n+5) {
    border-top: 1px solid var(--border-light);
  }
  :root[data-theme="dark"] .tbox-runtime-strip__item:nth-child(n+5) {
    border-top-color: var(--surface-glass-12);
  }
}

/* Cloud VPS security route polish */
.tbox-cvps-security-hero.tbox-hero-v3--compact {
  position: relative;
  padding-block: clamp(3.25rem, 6vw, 5.25rem);
  overflow: hidden;
}

.tbox-cvps-security-hero .tbox-hero-v3__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.52fr);
  align-items: center;
  gap: clamp(2.25rem, 4.5vw, 4.75rem);
  width: min(1120px, calc(100% - 2rem));
  max-width: 1120px;
}

.tbox-cvps-security-hero__copy {
  display: grid;
  gap: var(--space-lg);
  max-width: var(--prose-measure-wide);
  text-align: left;
  justify-items: start;
}

.tbox-cvps-security-hero .tbox-hero-v3__title {
  max-width: 16ch;
  margin-inline: 0;
  text-align: left;
}

.tbox-cvps-security-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  margin-inline: 0;
  color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
  text-align: left;
}

.tbox-cvps-security-hero .tbox-hero-v3__cta-row {
  width: min(100%, 42rem);
  margin-top: var(--space-sm);
  justify-content: flex-start;
}

.tbox-cvps-security-hero__panel {
  position: relative;
  display: grid;
  gap: var(--space-md-plus);
  padding: clamp(0.9rem, 1.8vw, 1.25rem);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surface-base) 18%, var(--brand-primary-light) 8%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--gray-950) 70%, var(--brand-primary-dark) 30%);
  color: var(--text-inverse);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--gray-950) 24%, transparent);
}

.tbox-cvps-security-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--brand-cta);
}

.tbox-cvps-security-hero__panel > * {
  position: relative;
  z-index: 1;
}

.tbox-cvps-security-hero__panel-head,
.tbox-cvps-security-hero__rules li,
.tbox-cvps-security-hero__ledger {
  border: 1px solid color-mix(in srgb, var(--surface-base) 14%, transparent);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 8%, transparent);
}

.tbox-cvps-security-hero__panel-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-sm-plus) var(--space-md);
}

.tbox-cvps-security-hero__panel-head strong {
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
}

.tbox-cvps-security-hero__panel-head span {
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-size: var(--fs-xs);
}

.tbox-cvps-security-hero__rules {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbox-cvps-security-hero__rules li {
  display: grid;
  grid-template-columns: 4.6rem minmax(4.5rem, 0.65fr) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: center;
  padding: var(--space-sm-plus) var(--space-md);
  min-width: 0;
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
}

.tbox-cvps-security-hero__rules li:nth-child(2n) {
  background: color-mix(in srgb, var(--surface-base) 11%, transparent);
}

.tbox-cvps-security-hero__rules span {
  color: var(--brand-cta);
  font-weight: var(--fw-semibold);
}

.tbox-cvps-security-hero__rules strong,
.tbox-cvps-security-hero__rules em {
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--text-inverse);
  font-style: normal;
}

.tbox-cvps-security-hero__ledger {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0;
  overflow: hidden;
}

.tbox-cvps-security-hero__ledger div {
  min-width: 0;
  padding: var(--space-md);
}

.tbox-cvps-security-hero__ledger div + div {
  border-left: 1px solid color-mix(in srgb, var(--surface-base) 14%, transparent);
}

.tbox-cvps-security-hero__ledger dt {
  margin: 0 0 var(--space-2xs);
  color: color-mix(in srgb, var(--text-inverse) 64%, transparent);
  font-size: var(--fs-xs);
}

.tbox-cvps-security-hero__ledger dd {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

.tbox-cvps-security-overview .tbox-container,
.tbox-cvps-security-policy .tbox-container,
.tbox-cvps-security-operations .tbox-container {
  max-width: 1120px;
}

.tbox-cvps-security-overview {
  background: color-mix(in srgb, var(--surface-muted) 88%, var(--brand-primary-04) 12%);
}

.tbox-cvps-security-overview .tbox-section__desc,
.tbox-cvps-security-operations .tbox-section__desc {
  max-width: var(--prose-measure-default);
}

#content .tbox-cvps-security-overview .tbox-section__heading,
#content .tbox-cvps-security-policy .tbox-section__heading,
#content .tbox-cvps-security-operations .tbox-section__heading {
  max-width: 18ch;
  margin-left: 0;
  margin-right: auto;
  text-align: left;
}

.tbox-cvps-security-overview .tbox-section__heading::after,
.tbox-cvps-security-policy .tbox-section__heading::after,
.tbox-cvps-security-operations .tbox-section__heading::after {
  left: 0;
  transform: none;
}

.tbox-cvps-security-path {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  overflow: hidden;
}

.tbox-cvps-security-path__item {
  position: relative;
  min-height: 100%;
  padding: clamp(1.1rem, 2.2vw, 1.5rem);
  background: var(--surface-base);
}

.tbox-cvps-security-path__item + .tbox-cvps-security-path__item {
  border-left: 1px solid var(--border-light);
}

.tbox-cvps-security-path__item strong {
  display: block;
  color: var(--text-primary);
  font-size: clamp(1rem, 1.7vw, 1.125rem);
  line-height: 1.25;
}

.tbox-cvps-security-path__item p {
  margin: 0.4rem 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-loose);
}

.tbox-cvps-security-overview .tbox-feature-matrix {
  border-color: color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
  background: var(--surface-base);
  box-shadow: none;
}

.tbox-cvps-security-overview .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--brand-primary-dark) 92%, var(--gray-950) 8%);
  color: var(--text-on-dark);
}

.tbox-cvps-security-overview .tbox-feature-matrix__category {
  letter-spacing: 0;
  text-transform: none;
  background: color-mix(in srgb, var(--surface-muted) 66%, var(--brand-primary-06) 34%);
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.tbox-cvps-security-overview .tbox-feature-matrix__icon {
  width: 1.7rem;
  height: 1.7rem;
  border-radius: var(--radius-sm-plus);
  color: var(--brand-primary-text);
  background: color-mix(in srgb, var(--brand-primary-bg) 72%, var(--surface-base) 28%);
}

.tbox-cvps-security-overview .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--brand-primary-bg) 44%, var(--surface-base) 56%);
}

.tbox-cvps-security-overview .tbox-feature-matrix__row {
  padding-block: 1rem;
}

.tbox-code-block--security {
  background: color-mix(in srgb, var(--gray-950) 76%, var(--brand-primary-dark) 24%);
  border-color: color-mix(in srgb, var(--brand-primary) 44%, var(--border-mid));
  color: var(--text-inverse);
  box-shadow: none;
}

.tbox-cvps-security-policy .tbox-extras-strip {
  border-color: color-mix(in srgb, var(--border-light) 74%, var(--brand-primary) 26%);
  background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary-04) 10%);
  box-shadow: none;
}

.tbox-cvps-security-policy .tbox-extras-strip__items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbox-cvps-security-policy .tbox-extras-strip__item {
  align-items: flex-start;
  box-sizing: border-box;
  min-width: 0;
  width: 100%;
  overflow-wrap: anywhere;
  white-space: normal;
}

.tbox-cvps-security-policy .tbox-bento-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  padding: clamp(1.25rem, 2.4vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--brand-primary-light) 28%, transparent);
  background: color-mix(in srgb, var(--brand-primary-dark) 88%, var(--gray-950) 12%);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--gray-950) 18%, transparent);
}

.tbox-cvps-security-policy .tbox-bento-cta-card > .tbox-btn {
  background: var(--brand-cta);
  border-color: var(--brand-cta);
  color: var(--brand-cta-ink);
}

.tbox-cvps-security-policy .tbox-bento-cta-card > .tbox-btn:hover {
  background: var(--brand-cta-hover);
  border-color: var(--brand-cta-hover);
  color: var(--text-inverse);
}

.tbox-cvps-security-policy .tbox-bento-cta-card > .tbox-btn + .tbox-btn {
  background: transparent;
  border-color: color-mix(in srgb, var(--text-inverse) 62%, transparent);
  color: var(--text-inverse);
}

.tbox-cvps-security-policy .tbox-bento-cta-card > .tbox-btn + .tbox-btn:hover {
  background: color-mix(in srgb, var(--text-inverse) 10%, transparent);
  border-color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
  color: var(--text-inverse);
}

.tbox-cvps-security-operations .tbox-detail-grid {
  gap: clamp(0.85rem, 1.6vw, 1rem);
}

.tbox-cvps-security-operations .tbox-detail-card {
  background: var(--surface-base);
  border-color: color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
  padding: clamp(1.05rem, 1.8vw, 1.35rem);
}

.tbox-cvps-security-operations .tbox-detail-card:nth-child(2) .tbox-detail-card__icon {
  color: var(--color-teal, var(--brand-primary));
}

.tbox-cvps-security-operations .tbox-detail-card:nth-child(3) .tbox-detail-card__icon {
  color: var(--brand-cta);
}

.tbox-cvps-security-operations .tbox-mini-note {
  max-width: var(--prose-measure-wide);
  margin-right: auto;
  margin-left: 0;
}

@media (width <= 820px) {
  .tbox-cvps-security-hero .tbox-hero-v3__inner,
.tbox-cvps-security-path,
.tbox-cvps-security-policy .tbox-bento-cta-card,
.tbox-cvps-security-policy .tbox-extras-strip__items,
.tbox-cvps-security-operations .tbox-detail-grid {
    grid-template-columns: 1fr;
  }

  .tbox-cvps-security-path__item + .tbox-cvps-security-path__item {
    border-top: 1px solid var(--border-light);
    border-left: 0;
  }

}

@media (width <= 520px) {
  .tbox-cvps-security-hero.tbox-hero-v3--compact {
    padding-block: var(--space-xl);
  }

  .tbox-cvps-security-hero__panel-head,
.tbox-cvps-security-hero__ledger {
    grid-template-columns: 1fr;
  }

  .tbox-cvps-security-hero__panel {
    gap: var(--space-md);
    padding: var(--space-md);
  }

  .tbox-cvps-security-hero .tbox-hero-v3__title {
    max-width: 13ch;
  }

  .tbox-cvps-security-hero .tbox-hero-v3__cta-row {
    width: 100%;
  }

  .tbox-cvps-security-policy .tbox-extras-strip__item {
    display: block;
    line-height: var(--lh-relaxed);
  }

  .tbox-cvps-security-policy .tbox-extras-strip__item .material-symbols-outlined {
    margin-right: var(--space-xs);
    vertical-align: -0.18em;
  }

  .tbox-cvps-security-hero__panel-head {
    display: grid;
  }

  .tbox-cvps-security-hero__rules li {
    grid-template-columns: 3.8rem 4rem minmax(0, 1fr);
    gap: var(--space-xs-plus);
    padding-inline: var(--space-sm-plus);
    font-size: var(--fs-2xs);
  }

  .tbox-cvps-security-hero__ledger {
    display: none;
  }

  .tbox-cvps-security-hero__ledger div + div {
    border-top: 1px solid color-mix(in srgb, var(--surface-base) 14%, transparent);
    border-left: 0;
  }
}

:root[data-theme="dark"] .tbox-cvps-security-path,
:root[data-theme="dark"] .tbox-cvps-security-path__item,
:root[data-theme="dark"] .tbox-cvps-security-overview .tbox-feature-matrix,
:root[data-theme="dark"] .tbox-cvps-security-policy .tbox-extras-strip,
:root[data-theme="dark"] .tbox-cvps-security-operations .tbox-detail-card {
  border-color: color-mix(in srgb, var(--border-mid) 70%, var(--brand-primary) 30%);
}

:root[data-theme="dark"] .tbox-cvps-security-path,
:root[data-theme="dark"] .tbox-cvps-security-path__item {
  background: var(--surface-raised);
}

:root[data-theme="dark"] .tbox-cvps-security-overview {
  background: color-mix(in srgb, var(--surface-dark) 92%, var(--brand-primary) 8%);
}

:root[data-theme="dark"] .tbox-cvps-security-overview .tbox-feature-matrix__icon {
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
}

:root[data-theme="dark"] .tbox-code-block--security {
  background: color-mix(in srgb, var(--surface-dark) 88%, var(--brand-primary) 12%);
  box-shadow: 0 18px 44px color-mix(in srgb, var(--gray-950) 34%, transparent);
}


:root[data-theme="dark"] .tbox-resp-card,
:root[data-theme="dark"] .tbox-ah-security-matrix {
  border-color: color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
}

/* ══════════════════════════════════════════════════════════════════════════════ */

/* Shared process list */
.tbox-process-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: var(--space-xl) 0 0;
  padding: 0;
  list-style: none;
  border-block: 1px solid var(--brand-primary-border-tint-16);
}

.tbox-process-list__item {
  position: relative;
  min-height: 100%;
  padding: var(--space-lg-plus) var(--space-xl) var(--space-lg-plus) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
  box-shadow: none;
}

.tbox-process-list__item + .tbox-process-list__item {
  padding-left: var(--space-xl);
  border-left: 1px solid var(--brand-primary-border-tint-16);
}

.tbox-process-list__label {
  display: inline-flex;
  margin-bottom: var(--space-md);
  color: var(--brand-primary-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.tbox-process-list__item strong {
  display: block;
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-process-list__label {
  color: var(--brand-primary-light);
}

@media (width <= 900px) {
  .tbox-process-list {
    grid-template-columns: 1fr;
    border-block: 0;
  }

  .tbox-process-list__item {
    padding: var(--space-lg) 0;
    border-top: 1px solid var(--brand-primary-border-tint-16);
  }

  .tbox-process-list__item + .tbox-process-list__item {
    padding-left: 0;
    border-left: 0;
  }

  .tbox-process-list__item:last-child {
    border-bottom: 1px solid var(--brand-primary-border-tint-16);
  }
}

/* App Hosting Go polish */
.tbox-go-hero.tbox-hero-v3--compact {
  padding-block: clamp(3rem, 5vw, 4.75rem) clamp(2.25rem, 4vw, 3.5rem);
  text-align: left;
}

.tbox-go-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.46fr);
  gap: clamp(1.75rem, 4vw, 3.25rem);
  align-items: center;
  max-width: min(1140px, 92vw);
}

.tbox-go-hero__copy {
  max-width: var(--prose-measure-wide);
}

.tbox-go-hero .tbox-hero-v3__title,
.tbox-go-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

#content .tbox-go-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
}

.tbox-go-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
}

.tbox-go-hero__panel {
  display: grid;
  gap: var(--space-lg);
  padding: clamp(1.15rem, 2.5vw, 1.65rem);
  border: 1px solid var(--surface-glass-25);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-primary-dark) 78%, var(--surface-dark) 22%);
  box-shadow: 0 1px 0 var(--surface-glass-18);
  color: var(--text-inverse);
}

.tbox-go-hero__panel-head {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  color: var(--text-on-dark);
  font-weight: var(--fw-semibold);
}

.tbox-go-hero__panel-head .material-symbols-outlined {
  color: var(--brand-cta);
  font-size: 20px;
}

.tbox-go-hero__specs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--surface-glass-18);
  border-radius: var(--radius-sm);
  background: var(--surface-glass-18);
}

.tbox-go-hero__specs div {
  display: grid;
  gap: var(--space-2xs);
  align-content: start;
  min-height: 4.6rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-glass-08);
}

.tbox-go-hero__specs dt {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
}

.tbox-go-hero__specs dd {
  margin: 0;
  color: var(--text-on-dark);
  font-weight: var(--fw-semibold);
}

.tbox-go-hero__flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--surface-glass-18);
  border-radius: var(--radius-sm);
  background: var(--surface-glass-18);
}

.tbox-go-hero__flow span {
  display: grid;
  place-items: center;
  min-height: 2.45rem;
  padding: 0 var(--space-xs);
  background: var(--surface-glass-08);
  color: var(--text-on-dark);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.tbox-go-deploy-section {
  background: var(--surface-tint);
}

.tbox-go-deploy-section .tbox-hero-terminal {
  margin: 0;
  border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--surface-glass-18) 74%);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-dark) 16%, transparent);
}

.tbox-go-deploy-shell {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  gap: var(--space-lg);
  align-items: start;
  max-width: 760px;
  margin-top: var(--space-xl);
}

.tbox-go-release-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg);
  border: 1px solid var(--brand-primary-border-tint-18);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--text-primary) 5%, transparent);
}

.tbox-go-release-panel__title {
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.tbox-go-release-panel__list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbox-go-release-panel__list li {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
}

.tbox-go-release-panel__list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.tbox-go-release-panel__list strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.tbox-go-release-panel__list span {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.tbox-go-deploy-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-base) 82%, var(--brand-primary-06) 18%);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.tbox-go-deploy-note a {
  font-weight: var(--fw-semibold);
}

.tbox-go-steps-intro {
  margin-top: var(--space-sm);
}

.tbox-go-steps {
  max-width: 100%;
}

.tbox-go-runtime-section .tbox-pillar-diagram-card {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary-06) 12%);
}

.tbox-go-sizing-note {
  max-width: var(--prose-measure-wide);
  margin-inline: auto;
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
}

.tbox-go-patterns-section .tbox-feature-matrix__icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-md);
  background: var(--brand-primary-08);
  color: var(--brand-primary-text);
  margin-top: 0;
}

.tbox-go-patterns-section .tbox-feature-matrix {
  border-color: var(--brand-primary-border-tint-16);
  box-shadow: var(--shadow-md);
}

.tbox-go-patterns-section .tbox-feature-matrix__row {
  padding-block: var(--space-lg);
}

:root[data-theme="dark"] .tbox-go-release-panel {
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-12) 14%);
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-go-deploy-note,
:root[data-theme="dark"] .tbox-go-sizing-note {
  border-color: var(--border-light);
  background: var(--surface-subtle);
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-go-runtime-section .tbox-pillar-diagram-card {
  background: color-mix(in srgb, var(--surface-subtle) 88%, var(--brand-primary-12) 12%);
}

:root[data-theme="dark"] .tbox-go-step,
:root[data-theme="dark"] .tbox-go-patterns-section .tbox-feature-matrix {
  box-shadow: none;
}

@media (width <= 900px) {
  .tbox-go-hero .tbox-hero-v3__inner,
.tbox-go-deploy-shell {
    grid-template-columns: 1fr;
  }

  .tbox-go-hero .tbox-hero-v3__inner {
    text-align: center;
  }

  .tbox-go-hero__copy {
    max-width: none;
  }

  .tbox-go-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

}

@media (width <= 600px) {
  .tbox-go-hero__panel {
    gap: var(--space-md);
  }

  .tbox-go-deploy-section .tbox-hero-terminal__body {
    overflow-x: auto;
    padding-inline: var(--space-lg);
    font-size: var(--fs-2xs);
  }

  .tbox-go-step,
.tbox-go-release-panel,
.tbox-go-deploy-note,
.tbox-go-sizing-note {
    padding: var(--space-lg);
  }

  .tbox-go-step {
    padding-inline: 0;
  }

  .tbox-go-hero__flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

}

/* App Hosting Ruby polish */
.tbox-ruby-hero.tbox-hero-v3--compact {
  text-align: left;
}

.tbox-ruby-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(21rem, 0.44fr);
  gap: clamp(2.25rem, 4.5vw, 4.25rem);
  align-items: center;
  max-width: min(1160px, 92vw);
}

.tbox-ruby-hero__copy {
  min-width: 0;
}

.tbox-ruby-hero .tbox-hero-v3__title,
.tbox-ruby-hero .tbox-hero-v3__subtitle {
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
}

.tbox-ruby-hero.tbox-hero-v3--compact .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

.tbox-ruby-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

.tbox-ruby-hero__panel {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  overflow: hidden;
  padding: clamp(1.25rem, 2.2vw, 1.75rem);
  border: 1px solid color-mix(in srgb, var(--surface-base) 22%, transparent);
  border-radius: var(--radius-12);
  background: var(--brand-primary-deep);
  color: var(--text-on-dark);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-base) 13%, transparent) inset;
}

.tbox-ruby-hero__panel-head {
  display: grid;
  gap: var(--space-2xs);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid color-mix(in srgb, var(--surface-base) 18%, transparent);
}

.tbox-ruby-hero__panel-head strong {
  font-size: var(--fs-lg);
  line-height: var(--lh-tight);
}

.tbox-ruby-hero__panel-head span,
.tbox-ruby-runtime-list dt,
.tbox-ruby-hero__route span:last-child {
  color: color-mix(in srgb, var(--text-on-dark) 72%, transparent);
}

.tbox-ruby-runtime-list {
  display: grid;
  gap: var(--space-md);
  margin: 0;
}

.tbox-ruby-runtime-list div {
  display: grid;
  grid-template-columns: minmax(5rem, 0.34fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: baseline;
}

.tbox-ruby-runtime-list dt,
.tbox-ruby-runtime-list dd {
  margin: 0;
}

.tbox-ruby-runtime-list dt {
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.tbox-ruby-runtime-list dd {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-on-dark);
}

.tbox-ruby-hero__route {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md);
  border: 1px solid color-mix(in srgb, var(--surface-base) 16%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--gray-950) 48%, transparent);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.tbox-ruby-deploy-section {
  background: var(--surface-muted);
}

.tbox-ruby-deploy-shell {
  display: grid;
  grid-template-columns: minmax(0, 760px);
  gap: var(--space-lg);
  align-items: stretch;
  max-width: 760px;
  margin-top: var(--space-xl);
}

.tbox-ruby-deploy-shell .tbox-hero-terminal {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--surface-glass-18) 72%);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--surface-dark) 18%, transparent);
}

.tbox-ruby-release-panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--space-lg);
  border: 1px solid var(--brand-primary-border-tint-18);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary-06) 10%);
  box-shadow: var(--shadow-sm);
}

.tbox-ruby-release-panel__label {
  margin: 0 0 var(--space-sm);
  color: var(--brand-primary-text);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.tbox-ruby-release-panel__list {
  display: grid;
  gap: var(--space-sm);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbox-ruby-release-panel__list li {
  display: grid;
  gap: var(--space-2xs);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--border-light);
}

.tbox-ruby-release-panel__list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.tbox-ruby-release-panel__list strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.tbox-ruby-release-panel__list span {
  color: var(--text-secondary);
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

.tbox-ruby-deploy-note {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-base) 82%, var(--brand-primary-06) 18%);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
}

.tbox-ruby-deploy-note a {
  font-weight: var(--fw-semibold);
}

.tbox-ruby-flow-steps {
  display: grid;
  gap: 0;
  margin: var(--space-xl) 0 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--border-light) 86%);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  list-style: none;
  overflow: hidden;
}

.tbox-ruby-flow-steps li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(13rem, 0.36fr) minmax(0, 1fr);
  gap: var(--space-lg);
  align-items: start;
  min-height: 100%;
  padding: clamp(1rem, 1.8vw, 1.35rem) clamp(1.1rem, 2.2vw, 1.75rem);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-ruby-flow-steps li + li {
  border-top: 1px solid var(--border-light);
}

.tbox-ruby-flow-steps strong {
  display: block;
  color: var(--text-primary);
  line-height: var(--lh-snug);
}

.tbox-ruby-flow-steps li > span {
  min-width: 0;
}

#ruby .tbox-pillar-row--3-diagram {
  align-items: stretch;
}

#ruby .tbox-pillar-diagram-card {
  background: var(--surface-base);
  border-color: color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
  box-shadow: var(--shadow-sm);
}

#ruby .tbox-bento-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  margin-block: clamp(1.25rem, 2.4vw, 2rem);
}

.tbox-ruby-stack-section .tbox-mini-note {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.tbox-ruby-ops-section .tbox-ui-proof {
  margin-block: clamp(2rem, 4.4vw, 3.6rem);
}

.tbox-ruby-ops-section .tbox-ui-proof--media-last .tbox-ui-proof__image {
  aspect-ratio: 16 / 9;
  height: clamp(9rem, 25vw, 18rem);
  object-fit: cover;
  object-position: left top;
}

.tbox-ruby-scaling-section .tbox-container {
  display: grid;
  gap: var(--space-lg);
}

.tbox-ruby-scaling-section .tbox-section__heading,
.tbox-ruby-scaling-section .tbox-container > p {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.tbox-ruby-scaling-section .tbox-stats-row {
  margin-top: var(--space-md);
}

.tbox-ruby-patterns-section .tbox-prose {
  max-width: 720px;
}

.tbox-ruby-topology {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) 2.5rem minmax(0, 1fr) 2.5rem minmax(0, 0.95fr);
  gap: var(--space-md);
  align-items: stretch;
  margin-top: clamp(1.2rem, 2.4vw, 1.8rem);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--brand-primary-border-tint-16);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-ruby-topology__lane {
  display: grid;
  align-content: start;
  gap: var(--space-sm);
  min-width: 0;
  padding: clamp(0.85rem, 1.6vw, 1.15rem);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 12%, var(--border-light) 88%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-bg) 8%);
}

.tbox-ruby-topology__label {
  color: var(--brand-primary-text);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tbox-ruby-topology__lane strong {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
}

.tbox-ruby-topology__lane > span:not(.tbox-ruby-topology__label) {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.tbox-ruby-topology__nodes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.tbox-ruby-topology__nodes span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: var(--space-2xs) var(--space-sm);
  border: 1px solid var(--brand-primary-border-tint-18);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  color: var(--brand-primary-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.tbox-ruby-topology__rail {
  align-self: center;
  height: 1px;
  background: var(--border-mid);
}

.tbox-ruby-patterns-matrix {
  margin-top: var(--space-xl);
}

:root[data-theme="dark"] .tbox-ruby-release-panel,
:root[data-theme="dark"] .tbox-ruby-flow-steps,
:root[data-theme="dark"] .tbox-ruby-topology,
:root[data-theme="dark"] .tbox-ruby-topology__lane {
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-ruby-flow-steps,
:root[data-theme="dark"] .tbox-ruby-topology,
:root[data-theme="dark"] .tbox-ruby-topology__lane {
  background: var(--surface-base);
  border-color: var(--border-mid);
}

@media (width <= 900px) {
  .tbox-ruby-hero .tbox-hero-v3__inner,
.tbox-ruby-deploy-shell,
.tbox-ruby-topology {
    grid-template-columns: 1fr;
  }

  .tbox-ruby-topology__rail {
    width: 1px;
    height: 1.5rem;
    justify-self: center;
  }

  .tbox-ruby-hero .tbox-hero-v3__title,
.tbox-ruby-hero .tbox-hero-v3__subtitle {
    max-width: none;
  }
}

@media (width <= 640px) {
  .tbox-ruby-deploy-section .tbox-hero-terminal__body {
    overflow-x: auto;
    padding-inline: var(--space-lg);
    font-size: var(--fs-2xs);
  }

  .tbox-ruby-release-panel,
.tbox-ruby-deploy-note,
.tbox-ruby-hero__panel,
.tbox-ruby-flow-steps li,
#ruby .tbox-bento-cta-card {
    grid-template-columns: 1fr;
    padding: var(--space-lg);
  }

  .tbox-ruby-runtime-list div {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .tbox-ruby-hero .tbox-hero-v3__title,
.tbox-ruby-hero .tbox-hero-v3__subtitle {
    text-align: center;
  }

  .tbox-ruby-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-ruby-flow-steps li {
    gap: var(--space-xs);
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   App Hosting › Kubernetes — page-specific components
   ═══════════════════════════════════════════════════════════════════════ */

.tbox-k8s-hero.tbox-hero-v3--compact {
  padding-block: var(--space-3xl);
  text-align: left;
}

.tbox-k8s-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(21rem, 0.42fr);
  align-items: center;
  gap: clamp(var(--space-2xl), 5vw, var(--space-5xl));
  max-width: 1180px;
}

#content .tbox-k8s-hero.tbox-hero-v3 .tbox-hero-v3__title,
#content .tbox-k8s-hero.tbox-hero-v3 .tbox-hero-v3__subtitle {
  margin-inline: 0;
  text-align: left;
}

.tbox-k8s-hero .tbox-hero-v3__title {
  max-width: 16ch;
}

.tbox-k8s-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 82%, transparent);
}

.tbox-k8s-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-inline: 0;
}
.tbox-k8s-hero__panel {
  position: relative;
  display: grid;
  gap: var(--space-lg);
  overflow: hidden;
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
  color: var(--text-on-dark);
  background: color-mix(in srgb, var(--surface-dark) 66%, var(--brand-primary-dark) 34%);
  border: 1px solid var(--text-inverse-18);
  border-radius: var(--radius-md);
  box-shadow: 0 1px 0 var(--text-inverse-14) inset;
}

.tbox-k8s-hero__panel::before {
  display: none;
}

.tbox-k8s-hero__panel > * {
  position: relative;
  z-index: 1;
}

.tbox-k8s-hero__panel-head {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  font-weight: var(--fw-semibold);
}

.tbox-k8s-hero__panel-head .material-symbols-outlined {
  font-size: 20px;
  color: var(--brand-cta);
}

.tbox-k8s-hero__specs {
  display: grid;
  gap: 1px;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--text-inverse-14);
  border-radius: var(--radius-sm);
  background: var(--text-inverse-14);
}

.tbox-k8s-hero__specs div {
  display: grid;
  grid-template-columns: minmax(80px, 0.35fr) 1fr;
  gap: var(--space-md);
  padding: var(--space-md);
  background: color-mix(in srgb, var(--surface-dark) 80%, var(--brand-primary-dark) 20%);
}

.tbox-k8s-hero__specs dt,
.tbox-k8s-hero__specs dd {
  margin: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}

.tbox-k8s-hero__specs dt {
  color: color-mix(in srgb, var(--text-inverse) 62%, transparent);
}

.tbox-k8s-hero__specs dd {
  color: var(--text-on-dark);
  font-weight: var(--fw-semibold);
}

.tbox-k8s-hero__flow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
}

.tbox-k8s-hero__flow span {
  position: relative;
  padding-block: var(--space-xs);
  color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
  font-family: var(--ff-mono, "JetBrains Mono", monospace);
  font-size: var(--fs-body-xs, 0.75rem);
  text-align: center;
  background: color-mix(in srgb, var(--text-inverse) 9%, transparent);
  border: 1px solid color-mix(in srgb, var(--text-inverse) 10%, transparent);
  border-radius: var(--radius-xs);
}

/* Cluster topology diagram */
.k8s-architecture-proof {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(18rem, 0.6fr);
  align-items: center;
  gap: var(--space-2xl);
  max-width: 1120px;
  margin-inline: auto;
  padding: var(--space-xl);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}
.k8s-architecture-proof .tbox-ui-proof__media {
  margin: 0;
  border-radius: var(--radius-sm);
  overflow: hidden;
  border: 1px solid var(--border-mid);
  background: var(--surface-inset);
}
.k8s-architecture-proof .tbox-ui-proof__caption {
  padding: 0;
}
.k8s-architecture-proof .tbox-ui-proof__title {
  max-width: 18ch;
}
.k8s-architecture-proof .tbox-ui-proof__text {
  color: var(--text-secondary);
}
.k8s-proof-list {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}
.k8s-proof-list li {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: var(--space-sm);
  padding-block: var(--space-sm);
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}
.k8s-proof-list .material-symbols-outlined {
  font-size: 18px;
  color: var(--brand-primary);
}

#content .tbox-k8s-hero ~ .tbox-section {
  padding-block: clamp(var(--space-3xl), 6vw, calc(var(--space-section-y) * 1.08));
}

#content .tbox-k8s-hero ~ .tbox-section--alt,
#content .tbox-k8s-hero ~ .tbox-section--tint {
  padding-block: clamp(var(--space-3xl), 6.5vw, calc(var(--space-section-y) * 1.16));
}

#content .tbox-k8s-hero ~ .tbox-quick-path .tbox-quick-path__intro,
#content .tbox-k8s-hero ~ .tbox-section > .tbox-container > :where(.tbox-section__heading, .tbox-section__desc) {
  max-width: min(100%, 760px);
}

.tbox-quick-path__grid--featured-row {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas:
    "featured featured"
    "alt-a    alt-b";
}

.tbox-quick-path__grid--featured-row .tbox-quick-path__card--featured {
  grid-area: featured;
}

.tbox-quick-path__card--featured .k8s-proof-list {
  margin-top: var(--space-md);
}

@media (min-width: 641px) {
  .tbox-quick-path__card--featured .k8s-proof-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-md);
  }
}

@media (max-width: 640px) {
  .tbox-quick-path__grid--featured-row {
    grid-template-columns: 1fr;
    grid-template-areas:
      "featured"
      "alt-a"
      "alt-b";
  }
}

#cluster-architecture-pre-configured .tbox-container {
  display: grid;
  gap: var(--space-xl);
}
#cluster-architecture-pre-configured .k8s-arch-split {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-2xl-plus);
  align-items: start;
}
#cluster-architecture-pre-configured .k8s-arch-desc {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}
#cluster-architecture-pre-configured .k8s-arch-desc .k8s-proof-list {
  margin: 0;
}
#cluster-architecture-pre-configured .k8s-arch-desc .tbox-extras-checklist__list {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
#cluster-architecture-pre-configured .k8s-cluster-diagram {
  margin-top: 0;
}

/* k8s section spacing (relocated from page inline <style>) */
#content #kubernetes-fit-path                 { padding-block-end:   var(--space-3xl); }
#content #cluster-architecture-pre-configured {
  padding-block-start: var(--space-3xl);
  padding-block-end:   clamp(var(--space-3xl), 4.5vw, var(--space-3xl-plus));
}
#content #choose-your-topology                { padding-block-start: clamp(var(--space-3xl), 4.5vw, var(--space-3xl-plus)); }
#content #pay-for-what-your-pods-consume      { padding-block-end:   clamp(var(--space-3xl), 4.5vw, var(--space-3xl-plus)); }
#content #scale-at-two-layers                 { padding-block-start: clamp(var(--space-3xl), 4.5vw, var(--space-3xl-plus)); }

#scale-at-two-layers .tbox-ah-deploy-pipeline {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: stretch;
}

#scale-at-two-layers .tbox-ah-deploy-pipeline__arrow {
  display: none;
}

#protect-and-upgrade-your-cluster .tbox-section__heading {
  max-width: 18ch;
  margin-inline: auto;
}

@media (width <= 900px) {
  #cluster-architecture-pre-configured .k8s-arch-split {
    grid-template-columns: 1fr;
  }
}

@media (width <= 700px) {
  #content .tbox-k8s-hero ~ .tbox-section,
  #content .tbox-k8s-hero ~ .tbox-section--alt,
  #content .tbox-k8s-hero ~ .tbox-section--tint {
    padding-block: var(--space-2xl);
  }
}

.k8s-cluster-diagram {
  display: grid;
  max-width: 960px;
  margin: var(--space-2xl) auto 0;
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  overflow: hidden;
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
}
.k8s-cluster-tier {
  position: relative;
  display: grid;
  grid-template-columns: minmax(9rem, 0.24fr) 1fr;
  align-items: start;
  gap: var(--space-xl);
  padding: var(--space-xl) var(--space-2xl);
  background: var(--surface-base);
  border: 0;
}
.k8s-cluster-tier::after {
  content: "";
  position: absolute;
  inset: auto var(--space-2xl) -1px;
  height: 1px;
  background: var(--border-light);
}
.k8s-cluster-tier:last-child::after { display: none; }
.k8s-cluster-tier + .k8s-cluster-tier { border-top: none; }
.k8s-cluster-tier__label {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-family: var(--ff-mono, "JetBrains Mono", monospace);
  font-size: var(--fs-body-sm);
  color: var(--text-secondary);
  margin-bottom: 0;
}
.k8s-cluster-tier__index {
  font-size: var(--fs-body-xs, 0.75rem);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  padding: 2px 6px;
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-2xs);
}
.k8s-cluster-tier--control { background: var(--brand-primary-04); }
.k8s-cluster-tier__content { display: flex; flex-wrap: wrap; gap: var(--space-sm); }
.k8s-cluster-component {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body-sm);
  color: var(--text-primary);
  min-height: 34px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-dark) 3%, transparent);
}
.k8s-cluster-component .material-symbols-outlined { font-size: 16px; color: var(--brand-primary); }
@media (width <= 900px) {
  .k8s-architecture-proof {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .k8s-architecture-proof .tbox-ui-proof__title {
    max-width: 32ch;
  }
}
@media (width <= 600px) {
  .k8s-architecture-proof {
    padding: var(--space-lg);
  }
  .k8s-cluster-tier {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg);
  }
  .k8s-cluster-tier::after { inset-inline: var(--space-lg); }
}

/* Dev vs Prod topology comparison */
.k8s-topology-board {
  display: grid;
  grid-template-columns: minmax(16rem, 0.42fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: stretch;
  margin-top: var(--space-2xl);
}
.k8s-topology-board__intro {
  display: grid;
  align-content: start;
  gap: var(--space-md);
  padding: var(--space-xl);
  background: var(--brand-primary-04);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}
.k8s-topology-board__intro h3 {
  font-size: var(--fs-heading-sm); font-weight: var(--fw-semibold);
  color: var(--text-primary); margin: 0 0 var(--space-md);
}
.k8s-topology-board__intro p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-loose);
}
.k8s-topology-board__intro .tbox-btn {
  align-self: end;
  justify-self: start;
  margin-top: var(--space-md);
}
.k8s-topology-board__table {
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
}
.k8s-topology-board__row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.55fr) repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-normal);
}
.k8s-topology-board__row + .k8s-topology-board__row {
  border-top: 1px solid var(--border-light);
}
.k8s-topology-board__row--head {
  background: var(--surface-muted);
  color: var(--text-primary);
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-bold);
}
.k8s-topology-board__row :where([role="rowheader"], [role="columnheader"]) {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}
@media (width <= 900px) {
  .k8s-topology-board {
    grid-template-columns: 1fr;
  }
}
@media (width <= 640px) {
  .k8s-topology-board__row,
  .k8s-topology-board__row--head {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  .k8s-topology-board__row--head {
    display: none;
  }

  .k8s-topology-board__row [role="cell"]::before {
    content: attr(data-label);
    display: block;
    margin-bottom: var(--space-2xs);
    color: var(--text-primary);
    font-size: var(--fs-body-xs);
    font-weight: var(--fw-bold);
  }
}

.k8s-billing-split {
  align-items: center;
  grid-template-columns: minmax(0, 0.82fr) minmax(22rem, 0.68fr);
}
.k8s-billing-split .tbox-split-layout__content {
  padding: var(--space-xl);
  background: var(--surface-raised);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}
.k8s-billing-split .tbox-split-layout__content h3 {
  margin: 0 0 var(--space-lg);
  color: var(--text-primary);
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-tight);
}
.k8s-billing-split .tbox-split-layout__content p {
  margin: 0;
  color: var(--text-secondary);
}
.k8s-billing-split .tbox-split-layout__content p + p {
  margin-top: var(--space-lg);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border-light);
}
.k8s-billing-split .tbox-split-layout__content strong {
  color: var(--text-primary);
}
.k8s-billing-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
}
.k8s-billing-split .tbox-ui-proof__media {
  border-radius: var(--radius-md);
  border: 1px solid var(--border-light);
  overflow: hidden;
  padding: var(--space-md);
  background: var(--surface-base);
}
.k8s-billing-split .tbox-ui-proof__image {
  border-radius: var(--radius-sm);
}

/* Kubernetes billing typographic layout */
.k8s-billing-split .tbox-split-layout__content.k8s-billing-split__content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.k8s-billing-split .k8s-billing-split__content .k8s-billing-split__heading {
  font-family: var(--ff-display);
  font-size: 2.4rem;
  line-height: 1.15;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0;
  letter-spacing: -0.01em;
}
.k8s-billing-split .k8s-billing-split__content .k8s-billing-split__body p {
  margin: 0 0 10px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.k8s-billing-split .k8s-billing-split__content .k8s-billing-split__body p:last-child { margin-bottom: 0; }
.k8s-billing-split .k8s-billing-split__content .k8s-billing-split__body p + p {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.k8s-billing-split .k8s-billing-split__content .k8s-billing-split__lead {
  color: var(--brand-primary-text);
  font-weight: 600;
}
.k8s-billing-split__content .k8s-billing-actions { margin-top: 4px; }

/* Two-tier scaling visual */
.k8s-scaling-visual {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: 920px;
  margin: var(--space-2xl) auto 0;
}
.k8s-scaling-tier {
  position: relative;
  display: grid;
  grid-template-columns: minmax(6.5rem, 0.32fr) 1fr;
  align-items: flex-start;
  gap: var(--space-xl);
  min-height: 100%;
  padding: var(--space-xl);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card-hairline);
}
.k8s-scaling-tier__index {
  position: absolute; top: var(--space-sm); right: var(--space-md);
  font-family: var(--ff-mono, "JetBrains Mono", monospace);
  font-size: var(--fs-body-xs, 0.75rem); font-weight: var(--fw-semibold);
  color: var(--text-tertiary); letter-spacing: 0;
}
.k8s-scaling-tier__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.25rem;
  padding-inline: var(--space-md);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  background: var(--surface-base);
  color: var(--brand-primary);
  font-size: var(--fs-body-xs);
  font-weight: var(--fw-bold);
}
.k8s-scaling-tier h4 { font-size: var(--fs-body); font-weight: var(--fw-semibold); color: var(--text-primary); margin: 0 0 2px; }
.k8s-scaling-tier p { font-size: var(--fs-body-sm); color: var(--text-secondary); margin: 0; }
.k8s-scaling-tier--platform { background: var(--brand-primary-04); }
.k8s-scaling-sequence {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: 920px;
  margin: var(--space-lg) auto 0;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--border-light);
}
.k8s-scaling-sequence span {
  display: flex;
  align-items: center;
  min-height: 3.25rem;
  padding: var(--space-sm) var(--space-md);
  background: var(--surface-base);
  color: var(--text-secondary);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
}
@media (width <= 1024px) {
  .tbox-k8s-hero .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
  }

  .tbox-k8s-hero__panel {
    max-width: 620px;
  }
}
@media (width <= 768px) {
  .k8s-scaling-visual { grid-template-columns: 1fr; }

  .k8s-billing-split {
    grid-template-columns: 1fr;
  }

  .k8s-scaling-sequence {
    grid-template-columns: 1fr;
  }
}
@media (width <= 520px) {
  .tbox-k8s-hero.tbox-hero-v3--compact {
    text-align: center;
    padding-block: var(--space-2xl);
  }

  .tbox-k8s-hero .tbox-hero-v3__title,
.tbox-k8s-hero .tbox-hero-v3__subtitle {
    max-width: none;
  }

  .tbox-k8s-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }
  .tbox-k8s-hero__panel,
.k8s-scaling-tier {
    padding: var(--space-lg);
  }

  .k8s-scaling-tier {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .tbox-k8s-hero__specs div {
    grid-template-columns: minmax(4.5rem, 0.4fr) 1fr;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    text-align: left;
  }

  .tbox-k8s-hero__flow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

:root[data-theme="dark"] .k8s-architecture-proof,
:root[data-theme="dark"] .k8s-cluster-diagram,
:root[data-theme="dark"] .k8s-topology-board__intro,
:root[data-theme="dark"] .k8s-topology-board__table,
:root[data-theme="dark"] .k8s-billing-split .tbox-split-layout__content,
:root[data-theme="dark"] .k8s-billing-split .tbox-ui-proof__media,
:root[data-theme="dark"] .k8s-scaling-sequence,
:root[data-theme="dark"] .k8s-scaling-tier {
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .k8s-cluster-component {
  background: var(--surface-raised);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .k8s-scaling-sequence {
  background: var(--border-mid);
}

/* Feature-matrix icon sizing for Material Symbols */
.tbox-feature-matrix__icon .material-symbols-outlined { font-size: 16px; }

/* ── Docker spoke: compact hero proof + workload comparison ── */
.tbox-docker-hero.tbox-hero-v3--compact {
  padding-block: clamp(3rem, 5vw, 4.75rem) clamp(2.25rem, 4vw, 3.5rem);
  text-align: left;
}

.tbox-docker-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.48fr);
  align-items: center;
  gap: clamp(1.5rem, 4vw, 3rem);
  max-width: min(1140px, 92vw);
}

.tbox-docker-hero__copy {
  max-width: var(--prose-measure-wide);
}

#content .tbox-docker-hero .tbox-hero-v3__subtitle,
.tbox-docker-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-left: 0;
  margin-right: 0;
}

#content .tbox-docker-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
}

.tbox-docker-hero__proof {
  align-self: stretch;
  display: grid;
  grid-template-rows: auto repeat(3, 1fr);
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 24%, transparent);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--surface-dark) 42%, var(--brand-primary) 58%);
  box-shadow: 0 1px 0 var(--surface-glass-14) inset;
}

.tbox-docker-hero__terminal {
  display: grid;
  gap: 0.45rem;
  padding: var(--space-lg);
  border-bottom: 1px solid var(--surface-glass-14);
  background: color-mix(in srgb, var(--gray-950) 28%, transparent);
  color: color-mix(in srgb, var(--text-inverse) 82%, transparent);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  line-height: 1.45;
}

.tbox-docker-hero__terminal span {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.tbox-docker-hero__terminal span:not(.tbox-docker-hero__prompt)::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background: var(--success);
}

.tbox-docker-hero__prompt {
  color: var(--text-inverse);
  overflow-wrap: anywhere;
}

.tbox-docker-hero__proof-row {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--surface-glass-10);
  background: var(--surface-glass-06);
}

.tbox-docker-hero__proof-row span {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.tbox-docker-hero__proof-row strong {
  color: var(--text-inverse);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.tbox-docker-usecase-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.tbox-docker-usecase-grid .tbox-usecase-card {
  gap: var(--space-md);
}

#content .tbox-docker-usecase-path {
  margin-top: auto;
  max-width: 100%;
  color: var(--brand-primary-text);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-label);
  line-height: 1.35;
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-subtle);
}

#content .tbox-docker-usecase-path strong {
  color: var(--text-primary);
  font-family: var(--ff-body);
  font-weight: var(--fw-semibold);
}

.tbox-docker-action-card.tbox-bento-cta-card {
  background: var(--surface-base);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-light));
  box-shadow: none;
  color: var(--text-primary);
}

.tbox-docker-action-card .tbox-bento-cta-card__text {
  max-width: var(--prose-measure-wide);
}

.tbox-container .tbox-docker-action-card.tbox-bento-cta-card :is(h3, h4) {
  color: var(--text-primary);
}

#content .tbox-container .tbox-docker-action-card.tbox-bento-cta-card p {
  color: var(--text-secondary);
}

.tbox-docker-action-card.tbox-bento-cta-card > .tbox-btn {
  background: var(--brand-cta);
  border-color: var(--brand-cta);
  color: var(--text-inverse);
}

.tbox-docker-action-card.tbox-bento-cta-card > .tbox-btn:hover {
  background: var(--brand-cta-hover);
}

.tbox-docker-action-card.tbox-bento-cta-card > .tbox-btn + .tbox-btn {
  background: transparent;
  border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--border-mid));
  color: var(--brand-primary-text);
}

.tbox-docker-action-card.tbox-bento-cta-card > .tbox-btn + .tbox-btn:hover {
  background: var(--brand-primary-bg);
  border-color: var(--brand-primary);
  color: var(--brand-primary-text);
}

:root[data-theme="dark"] #content .tbox-docker-usecase-path {
  color: color-mix(in srgb, var(--brand-primary-light) 82%, var(--text-inverse));
}

:root[data-theme="dark"] .tbox-docker-action-card.tbox-bento-cta-card {
  background: var(--surface-base);
  border-color: var(--border-mid);
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-docker-action-card.tbox-bento-cta-card > .tbox-btn + .tbox-btn {
  border-color: color-mix(in srgb, var(--brand-primary-light) 44%, var(--border-mid));
  color: var(--brand-primary-light);
}
@media (width <= 600px) {
  .tbox-docker-hero.tbox-hero-v3--compact {
    padding-block: var(--space-xl-plus) var(--space-lg);
    text-align: center;
  }

  .tbox-docker-hero .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
    max-width: 100%;
  }

  #content .tbox-docker-hero .tbox-hero-v3__subtitle,
.tbox-docker-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-docker-hero__proof {
    text-align: left;
  }

  .tbox-docker-hero__terminal {
    padding: var(--space-md);
  }

  .tbox-docker-hero__proof-row {
    grid-template-columns: minmax(6.5rem, 0.42fr) 1fr;
    align-items: center;
    padding: var(--space-sm-plus) var(--space-md);
  }

  .tbox-docker-hero__proof-row strong {
    font-size: var(--fs-sm);
  }

  .tbox-docker-usecase-grid { grid-template-columns: 1fr; }
}

/* ── Docker spoke: orchestration comparison table ── */
.docker-orch-wrap {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-mid) 86%, var(--brand-primary));
  border-radius: var(--radius-12);
  background: var(--surface-card);
  box-shadow: 0 1px 0 color-mix(in srgb, var(--surface-base) 74%, transparent) inset;
}
.docker-orch-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
  font-size: var(--fs-body-sm);
}
.docker-orch-table .col-capability { width: 18%; }
.docker-orch-table .col-engine,
.docker-orch-table .col-swarm,
.docker-orch-table .col-k8s { width: 27.333%; }
.docker-orch-table :is(th, td):not(:last-child) {
  border-right: 1px solid var(--border-subtle);
}
.docker-orch-table th {
  text-align: left;
  padding: 1.1rem 1rem;
  background: color-mix(in srgb, var(--surface-muted) 82%, var(--brand-primary-04));
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-label);
  border-bottom: 1px solid var(--border-mid);
}
.docker-orch-table th.col-engine,
.docker-orch-table th.col-swarm,
.docker-orch-table th.col-k8s { color: var(--text-primary); }
.docker-orch-table td {
  padding: 1.05rem 1rem; border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary); vertical-align: top; background: var(--surface-card);
}
.docker-orch-table tbody th.row-label {
  padding: 1.05rem 1rem;
  border-bottom: 1px solid var(--border-subtle);
  color: var(--text-primary);
  text-align: left;
  vertical-align: top;
  background: var(--surface-card);
}
.docker-orch-table tbody tr:nth-child(even) :is(th.row-label, td) {
  background: color-mix(in srgb, var(--surface-muted) 55%, var(--surface-card));
}
.docker-orch-table tbody tr:hover :is(th.row-label, td) {
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface-card));
}
.docker-orch-table tr:last-child :is(th.row-label, td) { border-bottom: none; }
.docker-orch-table .row-label {
  color: var(--text-primary);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  white-space: normal;
}
.docker-orch-table .orch-check { color: var(--success); font-weight: var(--fw-semibold); }
.docker-orch-table .orch-dash { color: var(--text-tertiary); }
:root[data-theme="dark"] .docker-orch-wrap {
  border-color: color-mix(in srgb, var(--border-mid) 84%, var(--brand-primary));
  box-shadow: none;
}
:root[data-theme="dark"] .docker-orch-table th {
  background: color-mix(in srgb, var(--surface-muted) 80%, var(--brand-primary) 20%);
}
:root[data-theme="dark"] .docker-orch-table tbody tr:nth-child(even) :is(th.row-label, td) {
  background: color-mix(in srgb, var(--surface-muted) 48%, var(--surface-card));
}
:root[data-theme="dark"] .docker-orch-table tbody tr:hover :is(th.row-label, td) {
  background: color-mix(in srgb, var(--brand-primary) 12%, var(--surface-card));
}
@media (width <= 640px) {
  .docker-orch-wrap { overflow-x: auto; }
  .docker-orch-table { min-width: 620px; }
}

/* ── Shared spoke fixes ── */
/* Material Symbols in pillar icons match existing SVG sizing rule (.tbox-pillar__icon svg) */
.tbox-pillar__icon .material-symbols-outlined { font-size: 22px; }
/* Stack the ui-proof figure when placed inside a split-layout visual column; the default
   2-col grid collapses the image to ~70px wide when the visual slot is half-width.
   Using grid-template-columns: 1fr keeps it a grid (row-gap still applies) but makes the
   media and caption stack naturally. */
.tbox-split-layout__visual .tbox-ui-proof {
  margin: 0;
  grid-template-columns: 1fr;
  gap: var(--space-md, 1rem);
}
.tbox-cvps-vol-section .tbox-section__desc--start {
  margin-right: auto;
  margin-left: 0;
  max-width: 760px;
  text-align: left;
}
.tbox-cvps-vol-section .tbox-split-layout {
  align-items: stretch;
}
.tbox-cvps-vol-section .tbox-split-layout__content,
.tbox-cvps-vol-section .tbox-split-layout__visual {
  display: grid;
  align-content: center;
}
.tbox-cvps-vol-section .tbox-extras-strip {
  border-color: var(--brand-primary-border-tint-18);
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-04) 14%);
  box-shadow: 0 14px 40px color-mix(in srgb, var(--text-primary) 9%, transparent);
}
.tbox-cvps-vol-section .tbox-callout--icon {
  border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--border-light) 74%);
  background: color-mix(in srgb, var(--brand-primary-12) 72%, var(--surface-base) 28%);
}
.tbox-cvps-vol-diagram {
  min-height: 100%;
  background: var(--surface-base);
  border: 1px solid var(--brand-primary-border-tint-18);
  border-radius: var(--radius-12);
  padding: clamp(1.25rem, 3vw, 2rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.tbox-cvps-vol-diagram__center {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  background: var(--surface-raised);
  border: 1.5px solid var(--brand-primary);
  border-radius: var(--radius-sm-plus);
  padding: 0.75rem 1.25rem;
  box-shadow: 0 10px 24px color-mix(in srgb, var(--brand-primary) 12%, transparent);
}
.tbox-cvps-vol-diagram__center-icon {
  width: 20px;
  height: 20px;
  color: var(--brand-primary);
  flex-shrink: 0;
}
.tbox-cvps-vol-diagram__center-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-primary);
}
.tbox-cvps-vol-diagram__center-sub {
  font-size: var(--fs-2xs);
  color: var(--text-secondary);
  margin-top: 2px;
}
.tbox-cvps-vol-diagram__connectors {
  display: flex;
  width: 80%;
  justify-content: space-between;
  align-items: center;
  position: relative;
}
.tbox-cvps-vol-diagram__connectors::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border-mid);
  transform: translateY(-50%);
}
.tbox-cvps-vol-diagram__conn-lbl {
  background: var(--surface-raised);
  border: 1px solid var(--border-low);
  border-radius: var(--radius-xs);
  padding: 2px 8px;
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
  font-family: var(--tbox-font-mono);
  position: relative;
  z-index: 1;
}
.tbox-cvps-vol-diagram__vms {
  display: flex;
  width: 100%;
  gap: 0.75rem;
}
.tbox-cvps-vol-diagram__vm {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  padding: 0.625rem 0.5rem;
  border: 1px solid var(--border-low);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 82%, var(--surface-subtle) 18%);
  text-align: center;
}
.tbox-cvps-vol-diagram__vm-icon {
  width: 18px;
  height: 18px;
  color: var(--text-tertiary);
}
.tbox-cvps-vol-diagram__vm-name {
  font-size: var(--fs-xs);
  font-weight: 600;
  color: var(--text-secondary);
}
.tbox-cvps-vol-diagram__vm-state {
  font-size: var(--fs-2xs);
  color: var(--text-tertiary);
}
.tbox-cvps-vol-diagram__vm--active {
  border-color: color-mix(in srgb, var(--brand-primary) 72%, var(--border-light) 28%);
  background: color-mix(in srgb, var(--brand-primary-12) 62%, var(--surface-base) 38%);
}
.tbox-cvps-vol-diagram__vm--active .tbox-cvps-vol-diagram__vm-icon,
.tbox-cvps-vol-diagram__vm--active .tbox-cvps-vol-diagram__vm-state {
  color: var(--brand-primary);
}
.tbox-cvps-vol-diagram__vm--active .tbox-cvps-vol-diagram__vm-name {
  color: var(--text-primary);
}
.tbox-cvps-vol-diagram__vm--inactive {
  opacity: 0.45;
}
.tbox-cvps-vol-ops-matrix {
  overflow: hidden;
  border-radius: var(--radius-12);
  border: 1px solid var(--brand-primary-border-tint-18);
  background: var(--surface-base);
  box-shadow: 0 18px 48px color-mix(in srgb, var(--text-primary) 10%, transparent);
}
.tbox-cvps-vol-ops-matrix .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--surface-subtle) 74%, var(--brand-primary-12) 26%);
}
.tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row {
  transition:
    background-color var(--duration-base) var(--ease-base),
    transform var(--duration-base) var(--ease-base);
}
.tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row:hover {
  transform: translateX(2px);
}
.tbox-cvps-vol-ops-matrix :is(.tbox-matrix-value, .tbox-ah-matrix-value) {
  justify-content: space-between;
  gap: var(--space-md);
}
.tbox-cvps-vol-ops-matrix :is(.tbox-matrix-value, .tbox-ah-matrix-value) strong {
  color: var(--text-primary);
}
.tbox-cvps-vol-ops .tbox-ui-proof {
  padding: var(--space-lg);
  border: 1px solid var(--brand-primary-border-tint-16);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--surface-base) 78%, var(--brand-primary-04) 22%);
}
.tbox-cvps-vol-ops .tbox-ui-proof::before {
  inset: var(--space-md) auto auto var(--space-lg);
}
.tbox-cvps-vol-ops .tbox-ui-proof__media {
  padding: 0;
}
.tbox-cvps-vol-ops .tbox-ui-proof__video {
  box-shadow: 0 16px 36px color-mix(in srgb, var(--text-primary) 12%, transparent);
}
.tbox-cvps-vol-cta-card {
  border-color: color-mix(in srgb, var(--brand-cta) 34%, transparent);
}:root[data-theme="dark"] .tbox-cvps-vol-section .tbox-extras-strip,
:root[data-theme="dark"] .tbox-cvps-vol-diagram,
:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix,
:root[data-theme="dark"] .tbox-cvps-vol-ops .tbox-ui-proof {
  border-color: color-mix(in srgb, var(--brand-primary) 24%, var(--border-mid) 76%);
  box-shadow: none;
}
:root[data-theme="dark"] .tbox-cvps-vol-diagram {
  background: color-mix(in srgb, var(--surface-dark) 92%, var(--brand-primary) 8%);
}
:root[data-theme="dark"] .tbox-cvps-vol-diagram__vm,
:root[data-theme="dark"] .tbox-cvps-vol-diagram__center,
:root[data-theme="dark"] .tbox-cvps-vol-diagram__conn-lbl {
  background: var(--surface-base);
}
:root[data-theme="dark"] .tbox-cvps-vol-ops .tbox-ui-proof,
:root[data-theme="dark"] .tbox-cvps-vol-section .tbox-extras-strip {
  background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary) 6%);
}
:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__header,
:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row {
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary) 5%);
}
:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--surface-base) 84%, var(--brand-primary) 10%);
}
:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix :is(.tbox-matrix-value, .tbox-ah-matrix-value) {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--surface-subtle) 12%);
}
@media (width <= 760px) {  .tbox-cvps-vol-section .tbox-section__heading--start,
.tbox-cvps-vol-section .tbox-section__desc--start {
    text-align: center;
  }
  .tbox-cvps-vol-section .tbox-section__desc--start {
    margin-left: auto;
  }
  .tbox-cvps-vol-ops .tbox-ui-proof {
    padding: var(--space-md);
  }
  .tbox-cvps-vol-ops-matrix :is(.tbox-matrix-value, .tbox-ah-matrix-value) {
    display: block;
  }
  .tbox-cvps-vol-ops-matrix :is(.tbox-matrix-value, .tbox-ah-matrix-value) strong {
    display: block;
    margin-top: var(--space-xs);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row {
    transition: none;
  }
  .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row:hover {
    transform: none;
  }
}

/* ── Cloud VPS Backups page polish ───────────────────────────────────────── */
.bkp-hero.tbox-hero-v3--compact {
  padding-block: clamp(3rem, 5vw, 5.1rem);
  text-align: left;
}

.bkp-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.56fr);
  align-items: center;
  gap: clamp(2.5rem, 4.8vw, 5rem);
  max-width: min(1160px, 92vw);
}

.bkp-hero__copy {
  display: grid;
  justify-items: start;
  gap: var(--space-lg);
}

#content .bkp-hero .tbox-hero-v3__title,
#content .bkp-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
  text-align: left;
}

#content .bkp-hero .tbox-hero-v3__title {
  max-width: 19ch;
}

#content .bkp-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
}

.bkp-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-top: 0;
}

.bkp-hero__panel {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--text-inverse-18);
  border-radius: var(--radius-md);
  background: var(--brand-primary-deep);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--gray-950) 18%, transparent);
  color: var(--text-on-dark);
}

.bkp-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--brand-cta);
}

.bkp-hero__panel-head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-md-plus);
  border-bottom: 1px solid color-mix(in srgb, var(--surface-base) 16%, transparent);
  color: color-mix(in srgb, var(--text-on-dark) 78%, transparent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
}

.bkp-hero__panel-head strong {
  color: color-mix(in srgb, var(--text-on-dark) 88%, var(--brand-primary-light) 12%);
  font-weight: var(--fw-semibold);
}

#content .bkp-section .tbox-section__heading {
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
  text-wrap: balance;
}

#content .bkp-section .tbox-section__heading::after {
  left: 0;
  margin-inline: 0;
  transform: none;
}

.bkp-section .tbox-section__desc {
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
}

.bkp-recovery-layout {
  align-items: stretch;
}

.bkp-path-panel {
  display: grid;
  min-height: 100%;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-light) 64%, var(--brand-primary) 36%);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: none;
}

.bkp-path-panel__row {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.28fr) minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: clamp(var(--space-md-plus), 2vw, var(--space-lg));
}

.bkp-path-panel__row + .bkp-path-panel__row {
  border-top: 1px solid color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 18%);
}

.bkp-path-panel__row > span {
  color: var(--brand-primary-deep);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.bkp-path-panel__row strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
}

.bkp-path-panel__row p {
  margin: var(--space-xs) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* ── Backup inclusion spec panel (Cloud VPS Backups page) ────────────────── */
.bkp-included {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  max-width: none;
  margin-inline: 0;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 24%, var(--border-light) 76%);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-primary) 24%, var(--border-light) 76%);
  box-shadow: none;
  overflow: hidden;
}
:root[data-theme="dark"] .bkp-included {
  border-color: var(--border-mid);
  background: var(--border-mid);
}

.bkp-included__item {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  min-height: 10rem;
  padding: clamp(var(--space-md-plus), 2vw, var(--space-lg));
  background: var(--surface-base);
}

.bkp-included__item span {
  color: var(--brand-primary-deep);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.bkp-included__item strong {
  color: var(--text-primary);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.bkp-included__item em {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  font-style: normal;
  line-height: var(--lh-relaxed);
}

.bkp-section--workflows .tbox-feature-matrix {
  border: 1px solid color-mix(in srgb, var(--brand-primary) 26%, var(--border-light) 74%);
  border-radius: var(--radius-sm-plus);
  box-shadow: none;
  overflow: hidden;
}

.bkp-workflow-matrix .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--brand-primary-dark) 92%, var(--gray-950) 8%);
  color: var(--text-on-dark);
}

.bkp-workflow-matrix .tbox-feature-matrix__header,
.bkp-workflow-matrix .tbox-feature-matrix__row {
  grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.32fr);
}

.bkp-workflow-matrix .tbox-feature-matrix__row {
  min-height: 4.25rem;
}

.bkp-workflow-matrix .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--brand-primary-bg) 54%, var(--surface-base) 46%);
}

.bkp-workflow-matrix :is(.tbox-matrix-label, .tbox-ah-matrix-label) {
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
}

.bkp-workflow-matrix :is(.tbox-matrix-value, .tbox-ah-matrix-value) {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.bkp-section--workflows .tbox-bento-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: var(--space-md);
  align-items: center;
  border: 1px solid color-mix(in srgb, var(--brand-cta) 38%, var(--border-light) 62%);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  color: var(--text-primary);
}

#content .bkp-section--workflows .tbox-bento-cta-card :is(h3, h4) {
  color: var(--text-primary);
  font-size: clamp(1.125rem, 2vw, 1.35rem);
  line-height: var(--lh-tight);
}

#content .bkp-section--workflows .tbox-bento-cta-card p {
  color: var(--text-secondary);
}

.bkp-section--workflows .tbox-bento-cta-card > .tbox-btn + .tbox-btn {
  border-color: color-mix(in srgb, var(--brand-primary) 42%, var(--border-light) 58%);
  color: var(--brand-primary-deep);
}

.bkp-section--workflows .tbox-bento-cta-card > .tbox-btn + .tbox-btn:hover {
  background: color-mix(in srgb, var(--brand-primary-bg) 70%, var(--surface-base) 30%);
  border-color: var(--brand-primary);
  color: var(--brand-primary-deep);
}

:root[data-theme="dark"] .bkp-hero__panel {
  background: color-mix(in srgb, var(--gray-950) 74%, var(--brand-primary-dark) 26%);
}

:root[data-theme="dark"] .bkp-workflow-matrix .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--gray-950) 84%, var(--brand-primary) 16%);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .bkp-workflow-matrix .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--surface-raised) 88%, var(--brand-primary) 8%);
}

:root[data-theme="dark"] .tbox-extras-strip--stacked,
:root[data-theme="dark"] .bkp-path-panel,
:root[data-theme="dark"] .bkp-included__item {
  border-color: color-mix(in srgb, var(--border-mid) 70%, var(--brand-primary) 30%);
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-dark) 8%);
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-extras-strip--stacked .tbox-extras-strip__item + .tbox-extras-strip__item,
:root[data-theme="dark"] .bkp-path-panel__row + .bkp-path-panel__row {
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .bkp-path-panel__row > span,
:root[data-theme="dark"] .bkp-included__item span {
  color: var(--brand-primary-light);
}

:root[data-theme="dark"] #content .bkp-section--workflows .tbox-bento-cta-card :is(h3, h4) {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] #content .bkp-section--workflows .tbox-bento-cta-card p {
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .bkp-section--workflows .tbox-bento-cta-card > .tbox-btn + .tbox-btn {
  border-color: color-mix(in srgb, var(--text-inverse) 68%, transparent);
  color: var(--text-on-dark);
}

@media (width <= 900px) {
  .bkp-hero.tbox-hero-v3--compact {
    text-align: center;
  }

  .bkp-hero .tbox-hero-v3__inner {
    grid-template-columns: minmax(0, 1fr);
    max-width: var(--width-hero-compact);
  }

  .bkp-hero__copy {
    justify-items: center;
  }

  #content .bkp-hero .tbox-hero-v3__title,
#content .bkp-hero .tbox-hero-v3__subtitle {
    margin-inline: auto;
    text-align: center;
  }

  .bkp-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .bkp-workflow-matrix .tbox-feature-matrix__header,
  .bkp-workflow-matrix .tbox-feature-matrix__row {
    grid-template-columns: minmax(0, 1fr);
  }

  .bkp-section--workflows .tbox-bento-cta-card {
    grid-template-columns: minmax(0, 1fr);
    justify-items: start;
  }

  .bkp-recovery-layout,
  .bkp-included {
    grid-template-columns: 1fr;
  }

  .bkp-path-panel__row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }
}

@media (width <= 600px) {
  .bkp-hero.tbox-hero-v3--compact {
    padding-block: var(--space-xl-plus) var(--space-xl);
  }

  #content .bkp-hero .tbox-hero-v3__title {
    max-width: 14ch;
  }

  #content .bkp-hero .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
  }

  .bkp-hero__panel {
    display: none;
  }
}

/* ============================================================
   App Hosting — Variant C enhancements
   Social proof bar, asymmetric pillar row, alternating
   autoscaling section, 5-tab video carousel.
   ============================================================ */
/* stylelint-disable no-descending-specificity -- scoped block ordered for readability over cross-file specificity ranking */

/* Social proof trust bar (replaces hero rating badge) */
.tbox-social-proof-bar {
  background: var(--gray-950);
  padding: 1.125rem 1.5rem;
  text-align: center;
  border-top: 1px solid var(--text-inverse-08);
  border-bottom: 1px solid var(--text-inverse-08);
}
#content > .tbox-social-proof-bar,
.tbox-page-content > .tbox-social-proof-bar {
  padding-block: 1.125rem;
}
.tbox-social-proof-bar__content {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px 18px;
  flex-wrap: wrap;
  color: color-mix(in srgb, var(--text-inverse) 92%, transparent);
  font-size: var(--fs-sm);
}
.tbox-social-proof-bar__content strong { color: var(--text-inverse); font-weight: 600; }
.tbox-social-proof-bar__content a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px dashed var(--surface-glass-25);
}
.tbox-social-proof-bar__content a:hover { border-bottom-color: var(--surface-glass-60); }
.tbox-stars {
  position: relative;
  display: inline-block;
  width: 92px; height: 16px;
  vertical-align: -2px;
}
.tbox-stars__bg,
.tbox-stars__fg { position: absolute; inset: 0; display: flex; }
.tbox-stars__bg svg { fill: color-mix(in srgb, var(--brand-highlight) 25%, transparent); }
.tbox-stars__fg { overflow: hidden; width: calc(4.8 / 5 * 100%); }
.tbox-stars__fg svg { fill: var(--brand-highlight); }

/* Alternating feature band (autoscaling section) */
.tbox-ah-feature-section {
  padding: clamp(3rem, 6vw, 5rem) 0;
  max-width: 1200px;
  margin: 0 auto;
}
.tbox-ah-feature-section--media-only {
  padding-inline: 1.5rem;
}
.tbox-ah-feature-section__inner {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: clamp(2rem, 4vw, 4rem);
  align-items: center;
  padding: 0 1.5rem;
}
.tbox-ah-feature-section__title {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 800;
  color: var(--text-primary);
  line-height: 1.25;
  margin: 0 0 0.875rem;
  letter-spacing: 0;
}
.tbox-ah-feature-section__description {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 1.25rem;
  max-width: 500px;
}
.tbox-ah-feature-section__link {
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}
.tbox-ah-feature-section__link:hover { text-decoration: underline; text-underline-offset: 4px; }
.tbox-ah-feature-section__visual {
  border-radius: var(--radius-lg, 14px);
  overflow: hidden;
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  padding: 1.5rem 1.75rem;
  box-shadow: 0 18px 42px color-mix(in srgb, var(--gray-950) 10%, transparent);
}
.tbox-ah-feature-section__visual--image {
  padding: 0;
}
.tbox-ah-feature-section__image {
  display: block;
  width: 100%;
  height: auto;
}
@media (width < 768px) {
  .tbox-ah-feature-section__inner { grid-template-columns: 1fr; }
}

/* Asymmetric pillar row (1.4fr + 3 x 1fr) with lead-pillar orange accent */
.tbox-pillar-row--asym {
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  align-items: stretch;
}
@media (width < 961px) {
  .tbox-pillar-row--asym { grid-template-columns: 1fr 1fr; }
}
@media (width < 521px) {
  .tbox-pillar-row--asym { grid-template-columns: 1fr; }
}
.tbox-pillar-row--asym-3 {
  grid-template-columns: 1.4fr 1fr 1fr;
}
@media (width < 961px) {
  .tbox-pillar-row--asym-3 { grid-template-columns: 1fr 1fr; }
}
@media (width < 521px) {
  .tbox-pillar-row--asym-3 { grid-template-columns: 1fr; }
}
.tbox-pillar-row--asym .tbox-pillar,
.tbox-pillar-row--asym-3 .tbox-pillar {
  box-shadow: var(--shadow-technical-panel);
}
.tbox-pillar-row--asym .tbox-pillar:hover,
.tbox-pillar-row--asym-3 .tbox-pillar:hover {
  box-shadow: 0 18px 34px color-mix(in srgb, var(--brand-primary) 10%, transparent);
}
.tbox-pillar-row--asym .tbox-pillar--lead,
.tbox-pillar-row--asym-3 .tbox-pillar--lead,
.tbox-pillar--lead { box-shadow: inset 0 3px 0 var(--brand-cta), 0 14px 34px color-mix(in srgb, var(--brand-cta) 9%, transparent); }
.tbox-pillar-row--asym .tbox-pillar--lead:hover,
.tbox-pillar-row--asym-3 .tbox-pillar--lead:hover,
.tbox-pillar--lead:hover {
  box-shadow: inset 0 3px 0 var(--brand-cta),
              0 2px 8px color-mix(in srgb, var(--brand-cta) 10%, transparent);
  border-color: var(--brand-cta);
}
.tbox-pillar__icon--lead { color: var(--brand-cta); }
/* Lead stat: warm-5 on light surfaces so the 3:1 large-text floor holds
   (brand-cta/warm-3 on white is ~2.25:1); dark mode keeps the brighter
   brand orange (8.4:1 on dark surfaces). Sized up so the lead pillar's
   proof point reads as a stat, not a footnote. */
.tbox-pillar__stat-value--lead { color: var(--warm-5); font-size: 2rem; line-height: 1; }
:root[data-theme="dark"] .tbox-pillar__stat-value--lead { color: var(--brand-cta); }

/* Detail card accent variant: subtle tinted surface + border (no side stripe) */
.tbox-detail-card--accent {
  background: color-mix(in srgb, var(--brand-primary) 3%, var(--surface-base));
  border-color: color-mix(in srgb, var(--brand-primary) 25%, var(--border-light));
}
:root[data-theme="dark"] .tbox-detail-card--accent {
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface-base));
  border-color: color-mix(in srgb, var(--brand-primary) 35%, var(--border-mid));
}

/* Tabbed video carousel */
.tbox-video-carousel {
  padding-top: clamp(1.5rem, 3vw, 2.25rem);
  padding-bottom: clamp(1.5rem, 3vw, 2.25rem);
  max-width: 1200px;
  margin: 0 auto;
}
.tbox-video-carousel__lede {
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
  padding: 0 1.5rem;
}
.tbox-video-carousel__lede h2 {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  font-weight: 800;
  color: var(--text-primary);
  margin: 0 0 0.75rem;
  letter-spacing: 0;
}
.tbox-video-carousel__lede p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.55;
  /* The 760px lede box runs ~86ch at this size; cap the paragraph to the
     standard prose measure (the centered heading keeps the full width). */
  max-width: var(--prose-measure-default);
  margin: 0 auto;
}
.tbox-video-carousel__tabs {
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-xs);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-base) 28%);
  margin: 0 0 1rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.tbox-video-carousel__tabs::-webkit-scrollbar { display: none; }
.tbox-video-carousel__tab {
  flex: 1 1 0;
  min-width: 160px;
  min-height: 48px;
  padding: 1rem 1.25rem;
  background: none;
  border: 1px solid transparent;
  border-radius: var(--radius-sm-plus);
  color: var(--text-tertiary);
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease;
}
.tbox-video-carousel__tab:hover { color: var(--text-primary); background: color-mix(in srgb, var(--brand-primary) 5%, transparent); }
.tbox-video-carousel__tab.is-active {
  color: var(--brand-primary-text);
  border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--border-light));
  background: var(--surface-base);
  box-shadow: var(--shadow-sm);
}
.tbox-video-carousel__tab:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Playback progress on the active tab; --vc-progress (0-1) is set by
   app-hosting.js from the active video's timeupdate events. */
.tbox-video-carousel__tab::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  border-radius: 999px;
  background: var(--brand-primary);
  transform: scaleX(var(--vc-progress, 0));
  transform-origin: left center;
  opacity: 0;
}
.tbox-video-carousel__tab.is-active::after { opacity: 0.65; }
.tbox-video-carousel__body {
  display: block;
  padding: 0;
}
.tbox-video-carousel__stage {
  position: relative;
  /* Cap the frame by viewport height so the 16:9 demo never outgrows a laptop
     screen; width derives from the height ceiling and stays centered. On large
     desktops 100% wins, so nothing shrinks there. */
  width: min(100%, calc(62svh * (864 / 486)));
  max-width: none;
  margin-inline: auto;
  aspect-ratio: 864 / 486;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-dark);
  border: 1px solid var(--border-light);
  cursor: zoom-in;
  box-shadow: 0 18px 40px color-mix(in srgb, var(--gray-950) 16%, transparent);
}
.tbox-video-carousel__panel {
  position: absolute; inset: 0;
}
.tbox-video-carousel__panel[hidden] { display: none; }
/* Injected by app-hosting.js when a demo video's sources fail to load. */
.tbox-video-carousel__media-error {
  position: absolute;
  inset: auto 0 0;
  margin: 0;
  padding: var(--space-xs) var(--space-md);
  background: color-mix(in srgb, #07111f 82%, transparent);
  color: var(--text-on-dark-strong);
  font-size: var(--fs-sm);
  text-align: center;
}
.tbox-video-carousel__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: center;
  background: var(--video-carousel-fullscreen-bg);
  opacity: 0;
  transition: opacity 300ms ease;
}
.tbox-video-carousel__video.is-active { opacity: 1; }

/* Buffering state: preload="none" videos drop their poster once play() is
   called, so the stage paints a spinner until the first frame arrives. */
.tbox-video-carousel__stage.is-loading::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 2.5rem;
  height: 2.5rem;
  margin: -1.25rem 0 0 -1.25rem;
  border-radius: 50%;
  border: 3px solid color-mix(in srgb, var(--neutral-white) 25%, transparent);
  border-top-color: var(--neutral-white);
  animation: tbox-video-carousel-spin 0.9s linear infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes tbox-video-carousel-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-video-carousel__stage.is-loading::after {
    animation: none;
    border-color: var(--neutral-white);
  }
}
.tbox-video-carousel__playpause {
  position: absolute;
  right: 60px; bottom: 12px;
  z-index: 2;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--video-carousel-control-bg);
  border: 1px solid var(--video-carousel-control-border);
  border-radius: var(--radius-md, 8px);
  color: var(--video-carousel-control-text);
  cursor: pointer;
  transition: background 150ms ease;
}
.tbox-video-carousel__playpause:hover { background: var(--video-carousel-control-bg-hover); }
.tbox-video-carousel__playpause:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.tbox-video-carousel__playpause .material-symbols-outlined {
  font-size: 22px;
  line-height: 1;
}
.tbox-video-carousel__stage:fullscreen .tbox-video-carousel__playpause,
.tbox-video-carousel__stage:-webkit-full-screen .tbox-video-carousel__playpause { display: none; }
.tbox-video-carousel__fs-btn {
  position: absolute;
  right: 12px; bottom: 12px;
  z-index: 2;
  width: 40px; height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--video-carousel-control-bg);
  border: 1px solid var(--video-carousel-control-border);
  border-radius: var(--radius-md, 8px);
  color: var(--video-carousel-control-text);
  cursor: pointer;
  transition: background 150ms ease;
}
.tbox-video-carousel__fs-btn:hover { background: var(--video-carousel-control-bg-hover); }
.tbox-video-carousel__fs-btn:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
}
.tbox-video-carousel__stage:fullscreen,
.tbox-video-carousel__stage:-webkit-full-screen { cursor: default; background: var(--video-carousel-fullscreen-bg); aspect-ratio: auto; }
.tbox-video-carousel__stage:fullscreen .tbox-video-carousel__fs-btn,
.tbox-video-carousel__stage:-webkit-full-screen .tbox-video-carousel__fs-btn { display: none; }
.tbox-video-carousel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: var(--video-carousel-control-bg);
  border: 1px solid var(--video-carousel-control-border);
  border-radius: 50%;
  color: var(--video-carousel-control-text);
  cursor: pointer;
  opacity: 0.85;
  transition: background 150ms ease, opacity 150ms ease;
}
.tbox-video-carousel__nav:hover {
  background: var(--video-carousel-control-bg-hover);
  opacity: 1;
}
.tbox-video-carousel__nav:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: -3px;
  opacity: 1;
}
.tbox-video-carousel__nav--prev { left: 12px; }
.tbox-video-carousel__nav--next { right: 12px; }
.tbox-video-carousel__nav .material-symbols-outlined {
  font-size: 28px;
  line-height: 1;
}
.tbox-video-carousel__stage:fullscreen .tbox-video-carousel__nav,
.tbox-video-carousel__stage:-webkit-full-screen .tbox-video-carousel__nav { display: none; }
/* Captions render as the carousel's dynamic subtitle: a plain-text block above
   the tab row (the old below-stage caption card is retired). All captions stack
   in one grid cell so the block reserves the tallest caption's height and the
   tabs/stage never shift when the active caption changes. */
.tbox-video-carousel__captions {
  display: grid;
  margin: 0 0 1.25rem;
}
.tbox-video-carousel__caption {
  grid-area: 1 / 1;
  display: block;
  visibility: hidden;
  max-width: var(--prose-measure-default);
}
.tbox-video-carousel__caption.is-active { visibility: visible; }
.tbox-video-carousel__caption p {
  font-size: 1rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
  max-width: var(--prose-measure-default);
}
.tbox-video-carousel__caption a {
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--brand-primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin-left: 0.375rem;
}
.tbox-video-carousel__caption a:hover { text-decoration: underline; text-underline-offset: 4px; }

:root[data-theme="dark"] .tbox-video-carousel__tabs {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 8%);
}
:root[data-theme="dark"] .tbox-video-carousel__tab.is-active {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 10%);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-mid));
}

.tbox-video-carousel__steps { margin-top: 0.375rem; font-size: var(--fs-sm); }
.tbox-video-carousel__steps::-webkit-details-marker { display: none; }
.tbox-video-carousel__steps > summary { list-style: none; cursor: pointer; }
.tbox-video-carousel__steps > summary::after {
  content: "▾";
  margin-left: var(--space-xs);
  font-size: 0.85em;
  color: var(--accent-quiet);
  display: inline-block;
  transition: transform var(--duration-base) var(--ease-base);
}
.tbox-video-carousel__steps[open] > summary::after { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) {
  .tbox-video-carousel__steps > summary::after { transition: none; }
}

@media (width < 1201px) {
  .tbox-video-carousel__stage { margin: 0 auto; }
}
@media (width < 901px) {
  .tbox-video-carousel__tab { min-width: 130px; font-size: var(--fs-base); padding: 0.875rem 0.875rem 0.75rem; }
}
@media (width <= 540px) {
  .tbox-video-carousel__tabs {
    flex-wrap: wrap;
  }

  .tbox-video-carousel__tab {
    flex: 1 1 calc(50% - var(--space-xs));
    min-width: 0;
    text-align: center;
    padding-inline: var(--space-sm);
  }
}

/* Mobile demo legibility: the demo videos record ~900px of desktop UI, which is
   unreadable scaled into a phone-width 16:9 frame. At small widths the stage goes
   square so object-fit: cover crops into the recording (~1.8x zoom), steered per
   video by --video-focus (set from data-focus in JS). Fullscreen restores the
   full frame. */
.tbox-video-carousel__zoom-hint {
  display: none;
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 2;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-cap);
  background: color-mix(in srgb, var(--gray-950) 62%, transparent);
  color: var(--text-inverse);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  pointer-events: none;
}

@media (width <= 600px) {
  .tbox-video-carousel__stage { aspect-ratio: 1 / 1; }

  .tbox-video-carousel__video {
    object-fit: cover;
    object-position: var(--video-focus, center);
  }

  .tbox-video-carousel__zoom-hint { display: inline-flex; }
}

.tbox-video-carousel__stage:fullscreen .tbox-video-carousel__video,
.tbox-video-carousel__stage:-webkit-full-screen .tbox-video-carousel__video {
  object-fit: contain;
  object-position: center;
}

.tbox-video-carousel__stage:fullscreen .tbox-video-carousel__zoom-hint,
.tbox-video-carousel__stage:-webkit-full-screen .tbox-video-carousel__zoom-hint { display: none; }

/* App Hosting landing overrides */
#hero-section.tbox-app-hosting-hero + .tbox-social-proof-bar {
  background: var(--gray-950);
}

.tbox-ah-pricing-section .tbox-ahcalc-section,
.tbox-ah-proof-section > .tbox-container,
.tbox-ah-fit-section > .tbox-container {
  max-width: min(1200px, 92vw);
}

/* App Hosting calculator polish */
.tbox-ahcalc-hero.tbox-hero-v3--compact {
  padding-block: clamp(2.75rem, 5vw, 4.5rem) clamp(2.25rem, 4vw, 3.5rem);
  text-align: left;
}

.tbox-ahcalc-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(24rem, 0.9fr);
  gap: clamp(1.75rem, 4vw, 4rem);
  align-items: center;
  max-width: min(1120px, calc(100vw - 3rem));
}

.tbox-ahcalc-hero__copy {
  min-width: 0;
}

.tbox-ahcalc-hero .tbox-hero-v3__title {
  max-width: 15ch;
}

.tbox-ahcalc-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  margin-inline: 0;
}

.tbox-ahcalc-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-bottom: 0;
  margin-top: var(--space-lg);
}

.tbox-ahcalc-hero .tbox-hero-v3__cta-row .tbox-btn {
  min-height: 3.35rem;
}

.tbox-ahcalc-hero .tbox-hero-v3__prop {
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--text-inverse) 10%, transparent);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--text-inverse) 10%, transparent);
}

.tbox-ahcalc-calculator-band {
  background: var(--surface-muted);
  padding-block: clamp(3rem, 5vw, 5rem);
}

.tbox-ahcalc-section {
  max-width: min(1240px, 92vw);
}

.tbox-ahcalc-section__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  gap: clamp(1rem, 3vw, 2.5rem);
  align-items: end;
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}

.tbox-ahcalc-section__desc {
  max-width: 760px;
  margin: var(--space-sm) 0 0;
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

/* Intro paragraphs share the heading-adjacent measure so a multi-paragraph
   intro wraps at a consistent width. */
.tbox-ahcalc-section__intro .tbox-ahcalc-section__desc {
  max-width: var(--width-desc);
}

.tbox-ahcalc-cost-model {
  display: grid;
  gap: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border-light) 80%);
  border-radius: var(--radius-md);
  background: var(--brand-primary-border-tint-18);
}

.tbox-ahcalc-cost-model span {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-md);
  min-height: 3rem;
  padding: var(--space-sm) var(--space-md);
  background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary-bg) 10%);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.tbox-ahcalc-cost-model strong {
  color: var(--brand-primary-text);
  font-family: var(--ahcalc-mono);
  font-size: var(--fs-base);
  font-variant-numeric: tabular-nums;
}

/* stylelint-disable no-duplicate-selectors -- calculator polish intentionally layers over the generated configurator base. */
#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 {
  border-radius: var(--radius-md);
  border-color: var(--brand-primary-border-tint-18);
  background: var(--surface-base);
  box-shadow: var(--shadow-technical-panel);
  overflow: clip;
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 .tbox-ahcalc-v3-body {
  gap: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 > h3 {
  padding: clamp(var(--space-md), 2vw, var(--space-lg)) clamp(var(--space-md), 2vw, var(--space-lg)) var(--space-sm);
  color: var(--text-primary);
  font-size: var(--fs-lg);
}

#tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 > p {
  max-width: var(--prose-measure-default);
  padding-inline: var(--space-lg);
  color: var(--text-secondary);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-grid {
  gap: clamp(var(--space-md), 2vw, var(--space-lg));
  padding: 0 clamp(var(--space-md), 2vw, var(--space-lg)) clamp(var(--space-md), 2vw, var(--space-lg));
  min-width: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-topo-panel,
#tbox-app-hosting-configurator .tbox-ahcalc-pricing-card {
  border-color: var(--brand-primary-border-tint-16);
  border-radius: var(--radius-md);
  box-shadow: none;
  min-width: 0;
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-preset-bar {
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-base) 28%);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-diagram {
  background: var(--surface-muted);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node,
#tbox-app-hosting-configurator .tbox-ahcalc-v3-node--sub {
  border-width: 1px;
  border-radius: var(--radius-sm-plus);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-node.is-selected {
  box-shadow: 0 0 0 3px var(--focus-ring-soft);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-head {
  background: var(--surface-base);
  border-bottom: 2px solid var(--brand-primary-border-tint-18);
}

#tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-body {
  padding-bottom: var(--space-lg);
}

.tbox-ahcalc-pricing-ref {
  background: var(--surface-base);
  padding-block: clamp(3.5rem, 6vw, 5.5rem);
}

.tbox-ahcalc-pricing-ref-header {
  max-width: 760px;
  margin-inline: auto;
}

.tbox-ahcalc-pricing-ref-details > .tbox-ahcalc-pricing-ref-header:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-border);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-sm);
}

.tbox-ahcalc-pricing-ref-details > .tbox-ahcalc-pricing-ref-header:focus:not(:focus-visible) {
  outline: none;
}

.tbox-ahcalc-pricing-card-wrap {
  max-width: 1080px;
  margin-inline: auto;
  border-color: var(--brand-primary-border-tint-18);
  box-shadow: var(--shadow-technical-panel);
  overflow: clip;
}

.tbox-ahcalc-pricing-card__tabs {
  background: color-mix(in srgb, var(--surface-muted) 84%, var(--surface-base) 16%);
}

.tbox-ahcalc-pricing-card__tab {
  border-bottom-width: 3px;
  min-height: 3.25rem;
}

.tbox-ahcalc-cl-range-card,
.tbox-ahcalc-resource-card,
.tbox-ahcalc-license-card {
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  box-shadow: none;
}

.tbox-ahcalc-cl-range-card--reserved {
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-bg) 14%);
}

.tbox-ahcalc-cl-range-card--scaling {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-cta) 12%);
}

.tbox-ahcalc-cl-range-row,
.tbox-ahcalc-resource-card__row,
.tbox-ahcalc-license-card__row {
  min-height: 2.2rem;
}

.tbox-ahcalc-vol-table-wrap {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
}

.tbox-ahcalc-vol-table-label {
  margin: 0;
  padding: var(--space-md) var(--space-lg) 0;
}

.tbox-ahcalc-vol-table-note {
  margin: 0;
  max-width: var(--prose-measure-wide);
  padding: var(--space-sm) var(--space-lg) var(--space-md);
  font-size: var(--fs-xs);
  line-height: 1.45;
  color: var(--text-secondary, var(--ahcalc-slate-600));
}

.tbox-ahcalc-vol-table {
  margin-top: var(--space-sm);
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
}

.tbox-ahcalc-vol-table :is(th, td) {
  padding: 0.72rem 1rem;
  border-top: 1px solid var(--border-light);
  line-height: var(--lh-snug);
  vertical-align: middle;
}

.tbox-ahcalc-vol-table thead th {
  color: var(--text-secondary);
  font-weight: var(--fw-semibold);
}

.tbox-ahcalc-vol-table tbody td {
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.tbox-ahcalc-vol-table thead tr:nth-child(2) th,
.tbox-ahcalc-vol-table tbody td {
  text-align: right;
}

.tbox-ahcalc-vol-table thead tr:nth-child(2) th:first-child,
.tbox-ahcalc-vol-table tbody td:first-child {
  width: 18%;
  text-align: left;
}

.tbox-ahcalc-vol-table thead tr:nth-child(2) th:nth-child(3),
.tbox-ahcalc-vol-table tbody td:nth-child(3) {
  border-right: 1px solid var(--border-light);
}

.tbox-ahcalc-vol-table tbody tr:hover td {
  background-color: color-mix(in srgb, var(--brand-primary) 4%, var(--surface-base));
}
/* stylelint-enable no-duplicate-selectors */

:root[data-theme="dark"] .tbox-ahcalc-calculator-band,
:root[data-theme="dark"] .tbox-ahcalc-pricing-ref {
  background: var(--surface-subtle);
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-shell--v3,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-v3-topo-panel,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-pricing-card {
  border-color: var(--border-mid);
  box-shadow: none;
}

:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-v3-preset-bar,
:root[data-theme="dark"] #tbox-app-hosting-configurator .tbox-ahcalc-v3-diagram {
  background: var(--surface-subtle);
}

:root[data-theme="dark"] .tbox-ahcalc-cl-range-card,
:root[data-theme="dark"] .tbox-ahcalc-resource-card,
:root[data-theme="dark"] .tbox-ahcalc-license-card {
  background: var(--surface-base);
}

:root[data-theme="dark"] .tbox-ahcalc-cost-model,
:root[data-theme="dark"] .tbox-ahcalc-pricing-card-wrap,
:root[data-theme="dark"] .tbox-ahcalc-vol-table-wrap {
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-ahcalc-vol-table :is(th, td),
:root[data-theme="dark"] .tbox-ahcalc-vol-table thead tr:nth-child(2) th:nth-child(3),
:root[data-theme="dark"] .tbox-ahcalc-vol-table tbody td:nth-child(3) {
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .tbox-ahcalc-vol-table tbody tr:hover td {
  background-color: var(--surface-subtle);
}

:root[data-theme="dark"] .tbox-ahcalc-cost-model {
  background: var(--border-mid);
}

:root[data-theme="dark"] .tbox-ahcalc-cost-model span {
  background: var(--surface-base);
}

:root[data-theme="dark"] .tbox-ahcalc-cost-model strong {
  color: var(--brand-primary-light);
}

@media (width <= 980px) {
  .tbox-ahcalc-hero.tbox-hero-v3--compact {
    text-align: center;
  }

  .tbox-ahcalc-hero .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: min(760px, calc(100vw - 2rem));
  }

  .tbox-ahcalc-hero .tbox-hero-v3__subtitle {
    margin-inline: auto;
  }

  .tbox-ahcalc-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-ahcalc-section__intro {
    grid-template-columns: 1fr;
  }

  .tbox-ahcalc-cost-model {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (width <= 640px) {
  .tbox-ahcalc-calculator-band,
.tbox-ahcalc-pricing-ref {
    padding-block: var(--space-2xl);
  }

  #content .tbox-ahcalc-calculator-band {
    padding-inline: 0;
  }

  .tbox-ahcalc-section {
    width: min(100%, calc(100vw - var(--space-lg)));
    max-width: none;
  }

  .tbox-ahcalc-hero.tbox-hero-v3--compact {
    padding: var(--space-lg-plus) var(--space-md) var(--space-md);
  }

  .tbox-ahcalc-hero .tbox-hero-v3__inner {
    max-width: 100%;
    gap: var(--space-md);
  }

  .tbox-ahcalc-hero .tbox-hero-v3__title {
    max-width: 14ch;
    margin-inline: auto;
  }

  .tbox-ahcalc-hero .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
  }

  .tbox-ahcalc-hero .tbox-hero-v3__cta-row {
    gap: var(--space-sm);
    margin-top: var(--space-md);
  }

  .tbox-ahcalc-hero .tbox-hero-v3__cta-row .tbox-btn,
  .tbox-ahcalc-hero .tbox-hero-v3__cta-row .tbox-btn-outline {
    width: 100%;
    max-width: 22.5rem;
    min-height: 3.25rem;
    padding-inline: var(--space-lg);
    text-align: center;
  }

  .tbox-ahcalc-hero .tbox-hero-v3__cta-row .tbox-btn svg {
    flex: 0 0 auto;
  }

  .tbox-ahcalc-section__intro {
    text-align: center;
    margin-bottom: var(--space-lg);
  }

  .tbox-ahcalc-hero .tbox-hero-v3__title,
.tbox-ahcalc-hero .tbox-hero-v3__subtitle,
.tbox-ahcalc-section__desc {
    margin-inline: auto;
  }

  .tbox-ahcalc-cost-model {
    grid-template-columns: 1fr;
  }

  .tbox-ahcalc-cost-model span {
    justify-content: center;
    min-height: 2.75rem;
  }

  #faq-section .tbox-faq-section__tabs {
    justify-content: flex-start;
    overflow-x: auto;
    padding-inline: var(--space-sm);
    scroll-padding-inline: var(--space-sm);
    scrollbar-width: none;
  }

  #faq-section .tbox-faq-section__tabs::-webkit-scrollbar {
    display: none;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 > h3 {
    padding-inline: var(--space-md);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 > p,
#tbox-app-hosting-configurator .tbox-ahcalc-v3-grid {
    padding-inline: var(--space-md);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-shell--v3 {
    border-radius: var(--radius-sm-plus);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-grid {
    gap: var(--space-md);
  }

  .tbox-ah-pricing-section {
    overflow-x: clip;
  }
}

/* Calc polish (Track 5) — mobile horizontal-overflow fix.
   The abbr.tbox-glossary::after tooltip uses left:50% + translate(-50%) which can push
   beyond the viewport on narrow screens when the abbr sits near the right edge.
   Within the calculator intro section, right-align the tooltip to its containing abbr
   so it never extends past the viewport boundary (Calc P1 #2). */
.tbox-ahcalc-section__intro abbr.tbox-glossary::after {
  left: auto;
  right: 0;
  transform: translate(0, 4px);
}

/* No-JS fallback only */
:root:not(.tbox-glossary-js) .tbox-ahcalc-section__intro abbr.tbox-glossary:hover::after,
:root:not(.tbox-glossary-js) .tbox-ahcalc-section__intro abbr.tbox-glossary:focus-visible::after,
:root:not(.tbox-glossary-js) .tbox-ahcalc-section__intro abbr.tbox-glossary.is-open::after {
  transform: translate(0, 0);
}

.tbox-ahcalc-section__intro abbr.tbox-glossary::before {
  left: auto;
  right: 4px;
}

.tbox-ah-pricing-section .tbox-section__desc,
.tbox-ah-features-section .tbox-section__desc,
.tbox-ah-proof-section .tbox-section__desc,
.tbox-cvps-proof-section .tbox-section__desc,
.tbox-ah-fit-section .tbox-section__desc {
  max-width: 680px;
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

:is(
  .tbox-ah-features-section .tbox-standard-features,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-standard-features
) {
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-groups,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-groups
) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.35rem);
  padding-top: clamp(1.5rem, 2.5vw, 2rem);
  padding-bottom: 0;
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-group,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group
) {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  padding: clamp(1.25rem, 2vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--border-light));
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: var(--shadow-sm);
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-group--wide,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group--wide
) {
  grid-column: 1 / -1;
  background: color-mix(in srgb, var(--surface-base) 91%, var(--brand-primary-bg));
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border-light));
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-group--wide .tbox-ah-cvps-feature-list,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group--wide .tbox-cvps-feature-list
) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  column-gap: 1.25rem;
}

.tbox-ah-features-section .tbox-ah-cvps-feature-stacks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.15rem;
}

.tbox-ah-features-section .tbox-ah-cvps-feature-stacks span {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  padding: 0.35rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-group__header,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group__header
) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.9rem;
  align-items: start;
}

.tbox-feature-group-toggle {
  display: none;
}

.tbox-feature-disclosure__body {
  min-width: 0;
}

.tbox-feature-disclosure__body-inner {
  min-width: 0;
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-group__icon,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group__icon
) {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-sm-plus);
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-group__header,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group__header
) h3 {
  margin: 0 0 0.2rem;
  color: var(--text-primary);
  font-size: clamp(1.15rem, 1.5vw, 1.35rem);
  line-height: 1.2;
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-group__header,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group__header
) p {
  margin: 0;
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.55;
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-list,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-list
) {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-item,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-item
) {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: start;
  gap: 0.7rem;
  padding-top: 0.75rem;
  border-top: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
  color: var(--text-secondary);
  font-size: 1rem;
  line-height: 1.5;
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-item,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-item
) > .material-symbols-outlined {
  margin-top: 0.05rem;
  color: var(--brand-primary);
  font-size: 1.15rem;
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-item,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-item
) strong {
  display: block;
  margin-bottom: 0.12rem;
  color: var(--text-primary);
  font-size: 1.0313rem;
  font-weight: var(--fw-semibold);
  line-height: 1.35;
}

:is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-item,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-item
) span span {
  display: block;
}

.tbox-ah-features-section .tbox-pillar-row--asym,
.tbox-ah-fit-section .tbox-usecase-grid {
  box-shadow: var(--shadow-segmented-panel);
}

.tbox-ah-features-section .tbox-pillar-row--asym .tbox-pillar,
.tbox-ah-fit-section .tbox-usecase-card {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tbox-ah-features-section .tbox-pillar-row--asym .tbox-pillar:hover,
.tbox-ah-fit-section .tbox-usecase-card:hover {
  border-color: transparent;
  box-shadow: none;
}

.tbox-ah-features-section .tbox-pillar-row--asym .tbox-pillar--lead,
.tbox-ah-features-section .tbox-pillar-row--asym .tbox-pillar--lead:hover {
  box-shadow: inset 0 3px 0 var(--brand-cta);
}

.tbox-ah-features-section .tbox-pillar__meta {
  margin: auto 0 0;
  padding-top: var(--space-sm-plus);
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.tbox-ah-features-section .tbox-pillar__meta strong {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

.tbox-ah-features-section .tbox-pillar--lead .tbox-pillar__meta strong {
  color: var(--brand-cta-text-deep);
}

.tbox-ah-features-section .tbox-extras-strip {
  margin-top: clamp(1.5rem, 2.5vw, 2rem);
}

.tbox-ah-fit-section .tbox-usecase-grid {
  margin-top: clamp(1.5rem, 2.6vw, 2rem);
}

.tbox-ah-fit-section .tbox-usecase-card {
  padding: clamp(1.125rem, 2vw, 1.5rem);
}

.tbox-ah-fit-section .tbox-usecase-card__header .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: var(--radius-xs);
  background: var(--surface-muted);
  font-size: 18px;
}

.tbox-ah-fit-section .tbox-usecase-card__header {
  align-items: center;
}

.tbox-ah-fit-section .tbox-callout--icon {
  width: 100%;
  max-width: 100%;
  border-color: color-mix(in srgb, var(--brand-primary) 20%, var(--border-light));
  background: color-mix(in srgb, var(--surface-base) 72%, var(--brand-primary-bg) 28%);
}

.tbox-ah-fit-section .tbox-decision-help {
  margin-top: clamp(1rem, 2vw, 1.5rem);
}

:root[data-theme="dark"] .tbox-ah-features-section .tbox-pillar-row--asym,
:root[data-theme="dark"] .tbox-ah-fit-section .tbox-usecase-grid {
  border-color: var(--border-mid);
  background: var(--border-mid);
  box-shadow: none;
}

:root[data-theme="dark"] :is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-group,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group
) {
  background: var(--surface-card-elevated);
  border-color: var(--border-mid);
}

:root[data-theme="dark"] :is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-group--wide,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group--wide
) {
  background: color-mix(in srgb, var(--surface-card-elevated) 84%, var(--brand-primary-deep));
  border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border-mid));
}

:root[data-theme="dark"] .tbox-ah-features-section .tbox-ah-cvps-feature-stacks span {
  background: var(--surface-base);
  border-color: color-mix(in srgb, var(--brand-primary) 26%, var(--border-mid));
}

:root[data-theme="dark"] :is(
  .tbox-ah-features-section .tbox-ah-cvps-feature-item,
  body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-item
) {
  border-top-color: color-mix(in srgb, var(--border-mid) 70%, transparent);
}

:root[data-theme="dark"] .tbox-ah-features-section .tbox-pillar__meta {
  border-color: var(--border-mid);
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-ah-features-section .tbox-pillar__meta strong {
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-ah-features-section .tbox-pillar--lead .tbox-pillar__meta strong {
  color: var(--brand-cta);
}

:root[data-theme="dark"] .tbox-ah-fit-section .tbox-callout--icon {
  border-color: var(--border-mid);
  background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary) 6%);
}

/* stylelint-disable no-duplicate-selectors -- overview polish intentionally layers over existing App Hosting component contracts. */
/* App Hosting overview polish */
.tbox-ah-idle-section {
  padding-block: clamp(3rem, 5vw, 4.5rem);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-bg) 8%), var(--surface-base));
}

.tbox-ah-idle-comparison {
  width: min(var(--width-container), calc(100% - 2rem));
  margin-inline: auto;
}

.tbox-ah-idle-comparison__header {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.tbox-ah-idle-comparison__header h2 {
  margin: 0;
  color: var(--text-primary);
  font-size: clamp(1.85rem, 3.2vw, 2.65rem);
  line-height: 1.12;
  text-wrap: balance;
}

.tbox-ah-idle-comparison__header p {
  margin: var(--space-md) auto 0;
  color: var(--text-secondary);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  max-width: var(--prose-measure-default);
}

.tbox-ah-idle-comparison__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(1rem, 2vw, 1.5rem);
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}

.tbox-ah-idle-card--autoscale {
  border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-card));
  background: linear-gradient(180deg, var(--brand-primary-04), var(--surface-card) 60%);
}

.tbox-ah-idle-card--fixed {
  background: var(--surface-subtle);
}

.tbox-ah-idle-card--step > h3 {
  margin: 0;
  font-size: var(--fs-heading-sm);
}

.tbox-ah-idle-card--step > p {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.tbox-ah-autoscale-step {
  font-family: var(--ff-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brand-cta-text-deep);
}

.tbox-ah-idle-card {
  display: grid;
  gap: var(--space-lg);
  padding: clamp(1rem, 2vw, 1.5rem);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 16%, var(--border-light));
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--gray-950) 8%, transparent);
}

.tbox-ah-idle-card__heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm-plus);
}

.tbox-ah-idle-card__heading .material-symbols-outlined {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  color: var(--brand-primary);
}

.tbox-ah-idle-card__heading h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--fs-heading-md);
  line-height: var(--lh-snug);
}

.tbox-ah-idle-outcomes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  margin: 0;
}

.tbox-ah-idle-outcomes div {
  display: grid;
  gap: var(--space-2xs);
  min-width: 0;
  padding: var(--space-md);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-muted) 74%, var(--surface-base) 26%);
}

.tbox-ah-idle-outcomes dt {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

/* Autoscaling "phosphor scope": lab-instrument bezel with a canvas trace
   sweeping one simulated workday. Driven by initAhScope() in app-hosting.js;
   the static SVG fallback frame shows for no-JS / reduced-motion users.
   The bench is a dark instrument in both themes by design — its tokens
   (--gray-900/950, --ah-scope-accent, --text-terminal-muted) are theme-invariant. */
.tbox-ah-scope {
  /* Phosphor accent: brand blue; initAhScope() reads this for the canvas. */
  --ah-scope-accent: var(--brand-primary);
}

/* Hero / home-showcase placements: the bench arrives via [tbox_ah_scope]
   inside a ~560px split column with no section heading above it, so drop
   the section offset, shorten the trace to column proportions, and use the
   compact bezel (model + HOLD on the top row, readouts on their own row)
   that full-width benches only need under 480px. */
:is(.tbox-app-hosting-hero__visual, .tbox-home-showcase__animation) .tbox-ah-scope__bench {
  margin-top: 0;
}

.tbox-app-hosting-hero__visual .tbox-ah-scope {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

:is(.tbox-app-hosting-hero__visual, .tbox-home-showcase__animation) .tbox-ah-scope__screen canvas {
  height: 260px;
}

:is(.tbox-app-hosting-hero__visual, .tbox-home-showcase__animation) .tbox-ah-scope__bezel-top {
  padding: var(--space-sm) var(--space-md);
}

:is(.tbox-app-hosting-hero__visual, .tbox-home-showcase__animation) .tbox-ah-scope__readouts {
  order: 3;
  flex-basis: 100%;
  gap: var(--space-2xs) var(--space-lg);
}

:is(.tbox-app-hosting-hero__visual, .tbox-home-showcase__animation) .tbox-ah-scope__hold {
  margin-left: auto;
}

:is(.tbox-app-hosting-hero__visual, .tbox-home-showcase__animation) .tbox-ah-scope__model {
  flex: 1 1 0;
  min-width: 0;
}

:is(.tbox-app-hosting-hero__visual, .tbox-home-showcase__animation) .tbox-ah-scope__screen-wrap {
  padding: var(--space-md) var(--space-md) var(--space-xs);
}

.tbox-ah-scope__bench {
  margin-top: var(--space-xl);
  border-radius: var(--radius-lg);
  border: 1px solid var(--gray-800);
  background: linear-gradient(180deg, var(--gray-900) 0%, var(--gray-950) 100%);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.tbox-ah-scope__bezel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  flex-wrap: wrap;
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--gray-800);
}

.tbox-ah-scope__model {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0;
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-terminal-muted);
}

.tbox-ah-scope__model .material-symbols-outlined {
  font-size: 18px;
  color: var(--ah-scope-accent);
}

.tbox-ah-scope__readouts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs-plus) var(--space-xl);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbox-ah-scope__readout {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
  font-variant-numeric: tabular-nums;
  color: var(--text-terminal-muted);
}

.tbox-ah-scope__readout strong {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--ah-scope-accent);
}

.tbox-ah-scope__readout--clock strong {
  color: var(--text-inverse);
}

.tbox-ah-scope__readout--bill strong {
  color: var(--brand-highlight);
}

/* Pause toggle: user-facing pause/play for the sweep (WCAG 2.2.2). Hidden in
   markup; the JS engine reveals it only when the live canvas is running and
   swaps the icon between pause and play_arrow. */
.tbox-ah-scope__hold {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  padding: var(--space-2xs);
  color: var(--ah-scope-accent);
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--ah-scope-accent) 45%, transparent);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

.tbox-ah-scope__hold .material-symbols-outlined {
  font-size: 20px;
}

.tbox-ah-scope__hold:hover {
  border-color: var(--ah-scope-accent);
}

.tbox-ah-scope__hold[aria-pressed="true"] {
  color: var(--gray-950);
  background: var(--ah-scope-accent);
  border-color: var(--ah-scope-accent);
}

.tbox-ah-scope__hold:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring-on-dark);
  outline-offset: var(--focus-outline-offset);
}

@media (pointer: coarse), (width <= 600px) {
  .tbox-ah-scope__hold {
    min-width: var(--min-touch-target);
    min-height: var(--min-touch-target);
  }
}

.tbox-ah-scope__screen-wrap {
  position: relative;
  padding: var(--space-lg) var(--space-lg) var(--space-sm);
}

.tbox-ah-scope__screen {
  position: relative;
  border-radius: var(--radius-md);
  border: 1px solid var(--gray-800);
  overflow: hidden;
  /* Phosphor screen base; canvas paints over this */
  background: var(--gray-950);
}

/* Tap-to-hold affordance only applies once the live engine is running */
.tbox-ah-scope--live .tbox-ah-scope__screen {
  cursor: pointer;
}

.tbox-ah-scope__screen canvas {
  display: block;
  width: 100%;
  height: 340px;
}

/* Scanline overlay: subtle CRT texture using the existing ink token */
.tbox-ah-scope__screen::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(
    180deg,
    transparent 0 3px,
    color-mix(in srgb, var(--brand-cta-ink) 14%, transparent) 3px 4px
  );
  opacity: 0.35;
}

/* Static SVG fallback shown when JS is unavailable; JS hides it and uses canvas */
.tbox-ah-scope__fallback {
  display: block;
  width: 100%;
}

.tbox-ah-scope__fallback-line {
  fill: none;
  stroke: var(--ah-scope-accent);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tbox-ah-scope__fallback-bound {
  fill: none;
  stroke: color-mix(in srgb, var(--ah-scope-accent) 45%, transparent);
  stroke-width: 2;
  stroke-dasharray: 7 7;
}

.tbox-ah-scope__fallback-tag {
  font-family: var(--tbox-font-mono);
  font-size: 13px; /* intentional literal: SVG viewBox units, scales with the chart */
  font-weight: 600;
  fill: var(--ah-scope-accent);
}

.tbox-ah-scope__fallback-note {
  font-family: var(--tbox-font-mono);
  font-size: 12px; /* intentional literal: SVG viewBox units, scales with the chart */
  fill: var(--text-terminal-muted);
}

/* Story caption: changes as the sweep passes each chapter of the day.
   This is the narrator line, so it gets real type size and room. */
.tbox-ah-scope__story {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  margin: 0;
  padding: var(--space-md) var(--space-sm) var(--space-lg);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: var(--text-terminal-muted);
  min-height: 3.2em;
}

.tbox-ah-scope__story .material-symbols-outlined {
  font-size: 26px;
  color: var(--ah-scope-accent);
  flex: none;
}

.tbox-ah-scope__story-msg {
  margin: 0;
}

.tbox-ah-scope__story-msg strong {
  color: var(--text-inverse);
  font-weight: var(--fw-semibold);
}

.tbox-ah-scope__story-msg.is-new {
  animation: tbox-ah-scope-story 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

@keyframes tbox-ah-scope-story {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (max-width: 768px) {
  .tbox-ah-scope__screen canvas {
    height: 240px;
  }
}

/* Slim the bezel on narrow phones so the screen lands in the section's
   first viewport instead of below a tall wrapped readout block. HOLD
   shares the model row; the readouts drop to a full-width row below. */
@media (max-width: 480px) {
  .tbox-ah-scope__bezel-top {
    padding: var(--space-sm) var(--space-md);
  }

  .tbox-ah-scope__readouts {
    order: 3;
    flex-basis: 100%;
    gap: var(--space-2xs) var(--space-lg);
  }

  .tbox-ah-scope__readout strong {
    font-size: var(--fs-md);
  }

  .tbox-ah-scope__hold {
    margin-left: auto;
  }

  .tbox-ah-scope__model {
    flex: 1 1 0;
    min-width: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-ah-scope *,
  .tbox-ah-scope *::before,
  .tbox-ah-scope *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

.tbox-ah-rtmsup__intro {
  max-width: var(--width-prose-narrow);
  margin: 0 0 var(--space-2xl-plus);
}

.tbox-ah-rtmsup__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--brand-primary-text);
}

.tbox-ah-rtmsup__eyebrow::before {
  content: "";
  width: 28px;
  height: 2px;
  background: var(--brand-primary);
  border-radius: 1px;
}

.tbox-ah-rtmsup__heading {
  margin: 0 0 var(--space-md);
  font-family: var(--ff-display);
  /* POLISH fix D: match the page-standard section H2 treatment on /app-hosting/. */
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--text-primary);
}

/* POLISH fix D: also normalize the "Services Your Runtime Depends On" H2 on
   /app-hosting/ so all section H2s on that page share one treatment. */
#stack-primitives-heading.tbox-section__heading {
  font-size: 32px;
  font-weight: 700;
  line-height: 1.2;
}

/* Section H2s under `.tbox-section__heading` carry their own dark-mode color
   rule that resolves to `rgba(226,232,240,0.96)`; pin this one to `--neutral-0`
   so it matches the sibling `.tbox-ah-rtmsup__heading` on the same page. */
:root[data-theme="dark"] #stack-primitives-heading.tbox-section__heading {
  color: var(--neutral-0);
}

.tbox-ah-rtmsup__desc {
  margin: 0;
  max-width: var(--prose-measure-default);
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-secondary);
}

.tbox-ah-rtmsup__strip {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--space-md);
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-2xl);
}

.tbox-ah-rtmsup__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
}

.tbox-ah-rtmsup__chip .tbox-runtime-icon {
  width: 40px;
  height: 40px;
}

.tbox-ah-rtmsup__chip-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  color: var(--text-secondary);
}

.tbox-ah-rtmsup__ledger {
  padding: var(--space-xl);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.tbox-ah-rtmsup__ledger-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--border-light);
  font-family: var(--ff-display);
  font-size: var(--fs-heading-sm);
  color: var(--text-primary);
}

.tbox-ah-rtmsup__ledger-heading .material-symbols-outlined {
  font-size: 1.25rem;
  color: var(--brand-primary-text);
}

.tbox-ah-rtmsup__ledger-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
  margin: 0;
}

.tbox-ah-rtmsup__ledger-list > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs-plus);
  padding-left: var(--space-md);
  border-left: 2px solid color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

.tbox-ah-rtmsup__ledger-list dt {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs-plus);
  margin: 0;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--brand-primary-text);
}

.tbox-ah-rtmsup__ledger-list dt .material-symbols-outlined {
  font-size: 1rem;
}

.tbox-ah-rtmsup__ledger-list dd {
  margin: 0;
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

@media (max-width: 880px) {
  .tbox-ah-rtmsup__strip {
    grid-template-columns: repeat(4, 1fr);
  }
}

@media (max-width: 520px) {
  .tbox-ah-rtmsup__strip {
    grid-template-columns: repeat(3, 1fr);
  }
}

.tbox-ah-idle-outcomes dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.tbox-ah-proof-section {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--brand-primary) 12%, transparent), transparent 34rem),
    var(--surface-base);
}

/* Tighten the proof -> pricing handoff: full section padding on both sides
   left a ~250px dead slab right before the conversion moment. */
#content .tbox-ah-proof-section {
  padding-bottom: calc(var(--space-section-y) * 0.5);
}

#content .tbox-ah-pricing-section {
  padding-top: calc(var(--space-section-y) * 0.75);
}

.tbox-ah-fit-section .tbox-usecase-grid {
  border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-base);
}

.tbox-ah-fit-section .tbox-usecase-card {
  display: grid;
  align-content: start;
  min-height: 0;
  border-right: 1px solid var(--border-light);
  border-bottom: 1px solid var(--border-light);
  background: transparent;
}

.tbox-ah-fit-section .tbox-usecase-card:nth-child(3n) {
  border-right: 0;
}

.tbox-ah-fit-section .tbox-usecase-card:nth-last-child(-n + 3) {
  border-bottom: 0;
}

.tbox-ah-fit-section .tbox-usecase-card__body {
  margin-bottom: 0;
}

@media (width > 760px) and (width <= 900px) {
  .tbox-ah-fit-section .tbox-usecase-card:nth-child(3n) {
    border-right: 1px solid var(--border-light);
  }

  .tbox-ah-fit-section .tbox-usecase-card:nth-last-child(-n + 3) {
    border-bottom: 1px solid var(--border-light);
  }

  .tbox-ah-fit-section .tbox-usecase-card:nth-child(2n) {
    border-right: 0;
  }

  .tbox-ah-fit-section .tbox-usecase-card:nth-last-child(-n + 2) {
    border-bottom: 0;
  }
}

.tbox-faq-section {
  overflow: clip;
}

.tbox-faq-section__tabs {
  position: relative;
}

:root[data-theme="dark"] .tbox-ah-idle-section,
:root[data-theme="dark"] .tbox-ah-proof-section {
  background:
    radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--brand-primary) 15%, transparent), transparent 34rem),
    var(--surface-subtle);
}

:root[data-theme="dark"] .tbox-ah-idle-card,
:root[data-theme="dark"] .tbox-ah-idle-outcomes div,
:root[data-theme="dark"] .tbox-ah-fit-section .tbox-usecase-grid {
  border-color: var(--border-mid);
  background: var(--surface-card-elevated);
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-ah-fit-section .tbox-usecase-card {
  border-color: var(--border-mid);
  background: transparent;
}

@media (width <= 760px) {
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-diagram {
    display: none;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector-cloudlet-note {
    display: block;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-preset-select,
  #tbox-app-hosting-configurator .tbox-ahcalc-select--stack {
    min-height: 44px;
  }

  .tbox-ahcalc-help-prompt .tbox-ahcalc-chat-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-layer-rail {
    display: flex;
    grid-column: 1 / -1;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-swipe-shell--layers {
    display: block;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-body {
    gap: var(--space-md);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-layer-rail {
    padding-block: var(--space-sm);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced {
    display: block;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    background: var(--surface-base);
    overflow: hidden;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced + .tbox-ahcalc-mobile-advanced {
    margin-top: var(--space-sm);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-height: 48px;
    padding: var(--space-sm-plus) var(--space-md);
    color: var(--text-primary);
    font-weight: var(--fw-bold);
    cursor: pointer;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced summary::after {
    content: "\2304";
    font-size: var(--fs-sm);
    transition: transform var(--ease-fast);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced[open] summary::after {
    transform: rotate(180deg);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced summary:focus-visible {
    outline: 3px solid var(--brand-primary);
    outline-offset: -3px;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced__body {
    border-top: 1px solid var(--border-light);
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-v3-inspector,
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item,
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-global-item--traffic {
    border: 0;
    border-radius: 0;
  }

  .tbox-ah-idle-comparison__grid,
  .tbox-ah-idle-outcomes {
    grid-template-columns: 1fr;
  }

  .tbox-ah-idle-card {
    gap: var(--space-md);
  }

  .tbox-ah-fit-section .tbox-usecase-grid {
    grid-template-columns: 1fr;
  }

  .tbox-ah-fit-section .tbox-usecase-card,
  .tbox-ah-fit-section .tbox-usecase-card:nth-child(3n),
  .tbox-ah-fit-section .tbox-usecase-card:nth-last-child(-n + 3) {
    border-right: 0;
    border-bottom: 1px solid var(--border-light);
  }

  .tbox-ah-fit-section .tbox-usecase-card:last-child {
    border-bottom: 0;
  }

  #faq-section .tbox-faq-section__tabs {
    mask-image: linear-gradient(90deg, transparent 0, var(--text-primary) 1.25rem, var(--text-primary) calc(100% - 1.25rem), transparent 100%);
  }
}

@media (width > 760px) {
  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced {
    display: contents;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced summary {
    display: none;
  }

  #tbox-app-hosting-configurator .tbox-ahcalc-mobile-advanced__body {
    display: contents;
  }
}
/* stylelint-enable no-duplicate-selectors */

@media (width <= 900px) {
  :is(
    .tbox-ah-features-section .tbox-ah-cvps-feature-groups,
    body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-groups,
    .tbox-ah-features-section .tbox-ah-cvps-feature-group--wide .tbox-ah-cvps-feature-list,
    body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group--wide .tbox-cvps-feature-list
  ) {
    grid-template-columns: 1fr;
  }

  :is(
    .tbox-ah-features-section .tbox-ah-cvps-feature-group--wide,
    body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group--wide
  ) {
    grid-column: auto;
  }
}

@media (width < 768px) {
  :is(
    .tbox-ah-features-section .tbox-ah-cvps-feature-group,
    body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group
  ).tbox-feature-group-disclosure {
    gap: 0;
  }

  :is(
    .tbox-ah-features-section .tbox-ah-cvps-feature-group__header,
    body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-cvps-feature-group__header
  ) {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
  }

  .tbox-feature-group-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    min-width: 2.5rem;
    border: 1px solid color-mix(in srgb, var(--brand-primary) 20%, var(--border-light));
    border-radius: var(--radius-sm-plus);
    background: var(--surface-base);
    color: var(--brand-primary);
    cursor: pointer;
  }

  .tbox-feature-group-toggle:hover {
    border-color: color-mix(in srgb, var(--brand-primary) 38%, var(--border-light));
    background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-base));
  }

  .tbox-feature-group-toggle:focus-visible {
    outline: 2px solid var(--brand-primary-light);
    outline-offset: 3px;
  }

  .tbox-feature-group-toggle .material-symbols-outlined {
    font-size: 1.4rem;
    transition: transform 180ms ease-out;
  }

  .tbox-feature-group-disclosure.is-open > :is(
    .tbox-ah-cvps-feature-group__header,
    .tbox-cvps-feature-group__header
  ) .tbox-feature-group-toggle .material-symbols-outlined {
    transform: rotate(180deg);
  }

  .tbox-feature-disclosure__body {
    display: grid;
    grid-template-rows: 0fr;
    margin-top: 0;
    overflow: hidden;
    transition:
      grid-template-rows 220ms cubic-bezier(0.22, 1, 0.36, 1),
      margin-top 220ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .tbox-feature-disclosure__body-inner {
    min-height: 0;
    overflow: hidden;
  }

  .tbox-feature-group-disclosure.is-open > .tbox-feature-disclosure__body {
    grid-template-rows: 1fr;
    margin-top: 1rem;
  }
}

@media (width < 768px) and (prefers-reduced-motion: reduce) {
  .tbox-feature-disclosure__body,
  .tbox-feature-group-toggle .material-symbols-outlined {
    transition: none;
  }
}

@media (width <= 640px) {
  .tbox-social-proof-bar__content {
    align-items: center;
    gap: 0.35rem 0.75rem;
    font-size: var(--fs-xs);
    line-height: 1.45;
  }

  .tbox-ah-fit-section .tbox-callout--icon {
    align-items: flex-start;
    gap: 0.75rem;
    padding: 1rem;
  }
}

/* App Hosting Observability polish */
.tbox-hero-v3--observability.tbox-hero-v3--compact {
  padding-block: clamp(3.25rem, 5.6vw, 5.25rem) clamp(3rem, 4.8vw, 4.55rem);
  text-align: left;
}

.tbox-hero-v3--observability.tbox-hero-v3--compact .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(20rem, 0.82fr);
  gap: clamp(2.25rem, 5.4vw, 5rem);
  align-items: center;
  max-width: var(--width-wide);
}

#content .tbox-hero-v3--observability .tbox-hero-v3__title,
#content .tbox-hero-v3--observability .tbox-hero-v3__subtitle {
  margin-inline: 0;
  text-align: left;
}

#content .tbox-hero-v3--observability .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  margin-bottom: var(--space-xl);
}

.tbox-hero-v3--observability .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-bottom: 0;
}

.tbox-hero-v3--observability .tbox-hero-v3__panel {
  display: grid;
  gap: var(--space-md);
  padding: clamp(1.1rem, 2.5vw, 1.55rem);
  border: 1px solid color-mix(in srgb, var(--surface-base) 18%, transparent);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--brand-primary-deep) 74%, var(--gray-950) 26%);
  box-shadow: 0 10px 22px color-mix(in srgb, var(--gray-950) 20%, transparent);
  overflow: hidden;
}

.tbox-hero-v3--observability .tbox-hero-v3__panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--surface-glass-12);
  color: var(--text-on-dark-soft);
  font-size: var(--fs-sm);
}

.tbox-hero-v3--observability .tbox-hero-v3__panel-head strong {
  color: var(--text-inverse);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-base);
}

.tbox-hero-v3--observability .tbox-hero-v3__panel-image {
  display: block;
  width: 100%;
  aspect-ratio: 797 / 256;
  border: 1px solid color-mix(in srgb, var(--surface-base) 12%, transparent);
  border-radius: var(--radius-sm);
  object-fit: cover;
  object-position: top left;
  background: var(--gray-950);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--gray-950) 24%, transparent);
}

.tbox-hero-v3--observability .tbox-hero-v3__panel-caption {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-sm);
  margin: 0;
}

.tbox-hero-v3--observability .tbox-hero-v3__panel-caption span {
  min-height: 2.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid color-mix(in srgb, var(--surface-base) 13%, transparent);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-base) 7%, transparent);
  color: var(--text-on-dark-soft);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.tbox-ah-observability-section .tbox-container {
  max-width: 1040px;
}

#content .tbox-ah-observability-section .tbox-section__heading,
.tbox-ah-observability-section .tbox-section__desc {
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
}

#content .tbox-ah-observability-section--checklist .tbox-section__heading {
  margin-inline: auto;
  text-align: center;
}

.tbox-ah-observability-section--metrics .tbox-feature-matrix {
  max-width: 920px;
  margin-inline: auto;
  border-color: var(--brand-primary-border-tint-18);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  box-shadow: none;
}

.tbox-ah-observability-section--metrics .tbox-feature-matrix__header,
.tbox-ah-observability-section--metrics .tbox-feature-matrix__category {
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface-subtle));
}

.tbox-ah-observability-section--metrics .tbox-feature-matrix__row {
  padding-block: var(--space-lg);
}

.tbox-ah-observability-section--metrics .tbox-feature-matrix__icon {
  width: 1.85rem;
  height: 1.85rem;
  margin-top: 0;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-base));
  color: var(--brand-primary);
}

.tbox-ah-observability-section--metrics .tbox-feature-matrix__spec {
  padding: 0.34rem 0.58rem;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--surface-subtle);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
}

.tbox-split-layout--observability {
  grid-template-columns: minmax(0, 0.95fr) minmax(22rem, 1.05fr);
}

.tbox-ah-observability-section--alerts .tbox-split-layout__content {
  gap: var(--space-lg-plus);
}

.tbox-ah-observability-runbook {
  display: grid;
  border: 1px solid var(--brand-primary-border-tint-18);
  border-radius: var(--radius-md);
  background: var(--surface-card);
  overflow: hidden;
}

.tbox-ah-observability-runbook__item {
  display: grid;
  gap: var(--space-md);
  padding: clamp(1.15rem, 2.4vw, 1.45rem);
}

.tbox-ah-observability-runbook__item + .tbox-ah-observability-runbook__item {
  border-top: 1px solid var(--border-subtle);
}

.tbox-ah-observability-runbook__item h3,
.tbox-ah-observability-log-grid__item h3 {
  margin: 0;
  font-size: clamp(1.02rem, 1.35vw, 1.18rem);
  line-height: var(--lh-tight);
}

.tbox-ah-observability-section--alerts .tbox-card--feature,
.tbox-ah-observability-log-grid__item {
  border-color: var(--brand-primary-border-tint-18);
  box-shadow: none;
}

.tbox-ah-observability-log-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--space-lg);
  max-width: 920px;
  margin-inline: auto;
}

.tbox-ah-observability-log-grid__item {
  display: grid;
  gap: var(--space-sm-plus);
  padding: clamp(1.05rem, 2vw, 1.35rem);
  border: 1px solid var(--brand-primary-border-tint-16);
  border-radius: var(--radius-md);
  background: var(--surface-card);
}

.tbox-ah-observability-log-grid__item p {
  margin: 0;
}

.tbox-ah-observability-section--alerts .tbox-ui-proof,
.tbox-ui-proof--observability {
  padding: clamp(1rem, 2.5vw, 1.35rem);
  border: 1px solid var(--brand-primary-border-tint-16);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--surface-card) 92%, var(--brand-primary) 8%);
  box-shadow: none;
}

.tbox-ah-observability-section--alerts .tbox-ui-proof__media,
.tbox-ui-proof--observability .tbox-ui-proof__media {
  padding: 0;
}

.tbox-ah-observability-section--alerts .tbox-ui-proof__image,
.tbox-ui-proof--observability .tbox-ui-proof__image,
.tbox-ui-proof--observability .tbox-ui-proof__video {
  box-shadow: 0 12px 24px color-mix(in srgb, var(--gray-950) 12%, transparent);
}

.tbox-ui-proof--observability .tbox-ui-proof__item {
  grid-column: auto;
}

.tbox-ui-proof--observability .tbox-ui-proof__image {
  min-height: clamp(10rem, 18vw, 15rem);
  object-fit: cover;
  object-position: top left;
}

.tbox-ui-proof--observability .tbox-ui-proof__item--video .tbox-ui-proof__video {
  aspect-ratio: 16 / 10;
  max-height: 22rem;
  object-fit: cover;
}

.tbox-ah-observability-section--checklist .tbox-extras-checklist--pill-grid {
  background: color-mix(in srgb, var(--brand-primary) 4%, var(--surface-subtle)) !important;
  border-color: color-mix(in srgb, var(--brand-primary) 14%, var(--border-card) 86%) !important;
  border-radius: var(--radius-md);
  box-shadow: none;
}

.tbox-ah-observability-section--checklist .tbox-extras-checklist--pill-grid .tbox-extras-checklist__item {
  background: var(--surface-card);
  border-radius: var(--radius-sm-plus);
}

:root[data-theme="dark"] .tbox-ah-observability-section--metrics .tbox-feature-matrix,
:root[data-theme="dark"] .tbox-ah-observability-section--alerts .tbox-ui-proof,
:root[data-theme="dark"] .tbox-ui-proof--observability,
:root[data-theme="dark"] .tbox-ah-observability-runbook,
:root[data-theme="dark"] .tbox-ah-observability-log-grid__item {
  background: color-mix(in srgb, var(--surface-card) 88%, var(--brand-primary) 12%);
  border-color: color-mix(in srgb, var(--brand-primary) 32%, var(--border-mid) 68%);
}

:root[data-theme="dark"] .tbox-ah-observability-section--metrics .tbox-feature-matrix__icon,
:root[data-theme="dark"] .tbox-ah-observability-section--metrics .tbox-feature-matrix__spec {
  background: color-mix(in srgb, var(--surface-subtle) 84%, var(--brand-primary) 16%);
}

@media (width <= 900px) {
  .tbox-hero-v3--observability.tbox-hero-v3--compact {
    text-align: center;
  }

  .tbox-hero-v3--observability.tbox-hero-v3--compact .tbox-hero-v3__inner,
.tbox-split-layout--observability {
    grid-template-columns: 1fr;
  }

  #content .tbox-hero-v3--observability .tbox-hero-v3__title,
#content .tbox-hero-v3--observability .tbox-hero-v3__subtitle {
    margin-inline: auto;
    text-align: center;
  }

  .tbox-hero-v3--observability .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-ah-observability-log-grid,
.tbox-ui-proof--observability {
    grid-template-columns: 1fr;
  }

  .tbox-ui-proof--observability .tbox-ui-proof__item,
.tbox-ui-proof--observability .tbox-ui-proof__item--video {
    grid-column: 1;
  }
}

@media (width <= 560px) {
  .tbox-hero-v3--observability .tbox-hero-v3__panel-caption {
    grid-template-columns: 1fr;
  }

  .tbox-hero-v3--observability .tbox-hero-v3__panel-caption span {
    min-height: 2.65rem;
  }
}

/* === Motion: brand-register reveals, lifts, parallax ===
   Gated on body.tbox-route--brand. Calc/configurator routes never receive
   the class so product-register UI stays flat. prefers-reduced-motion
   resets every behavior below. */

body.tbox-route--brand {
  --tbox-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --tbox-duration-reveal: 520ms;
  --tbox-lift-translate: -3px;
}

:where(html.tbox-reveal-armed) body.tbox-route--brand .tbox-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity var(--tbox-duration-reveal) var(--tbox-ease-out-quart),
    transform var(--tbox-duration-reveal) var(--tbox-ease-out-quart);
  /* Shorthand above resets transition-delay; re-declare so the
     per-element --i stagger set by tbox-motion.js still applies. */
  transition-delay: calc(var(--i, 0) * 78ms);
}

/* Promote a layer only while the reveal is pending; release once revealed. */
:where(html.tbox-reveal-armed) body.tbox-route--brand .tbox-reveal:not(.is-revealed) {
  will-change: opacity, transform;
}

body.tbox-route--brand .tbox-reveal.is-revealed {
  opacity: 1;
  transform: translateY(0);
}

/* Bento CTA cards are gradient-backgrounded and intentionally pin transform:none
   on hover (see :is(.tbox-bento-cta-card, ...):hover above). Exclude here. */
body.tbox-route--brand :is(
  .tbox-card:not(.tbox-bento-cta-card),
  .tbox-card--content,
  .tbox-card--highlight,
  .tbox-card--decision,
  .tbox-feature-card,
  .tbox-detail-card,
  .tbox-comparison-card,
  .tbox-bento-stat-card,
  .tbox-pillar-card,
  .tbox-pillar-diagram-card,
  .tbox-usecase-card,
  .tbox-product-card,
  .tbox-value-card,
  .tbox-standard-features-grid > :not(.tbox-bento-cta-card)
) {
  transition:
    box-shadow var(--duration-base) var(--tbox-ease-out-quart),
    transform  var(--duration-base) var(--tbox-ease-out-quart);
}

body.tbox-route--brand :is(
  .tbox-card:not(.tbox-bento-cta-card),
  .tbox-card--content,
  .tbox-card--highlight,
  .tbox-card--decision,
  .tbox-feature-card,
  .tbox-detail-card,
  .tbox-comparison-card,
  .tbox-bento-stat-card,
  .tbox-pillar-card,
  .tbox-pillar-diagram-card,
  .tbox-usecase-card,
  .tbox-product-card,
  .tbox-value-card,
  .tbox-standard-features-grid > :not(.tbox-bento-cta-card)
):hover {
  transform: translateY(var(--tbox-lift-translate));
}

body.tbox-route--brand .tbox-hero-v3 .tbox-proof-strip,
body.tbox-route--brand .tbox-hero-v3 .tbox-proof-strip-compact,
body.tbox-route--brand .tbox-hero-v3 .tbox-trust-strip {
  transform: translate3d(0, var(--tbox-parallax-y, 0), 0);
  will-change: transform;
}

body.tbox-route--brand [data-tbox-count] {
  font-variant-numeric: tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
  body.tbox-route--brand .tbox-reveal,
body.tbox-route--brand .tbox-reveal.is-revealed {
    opacity: 1;
    transform: none;
    transition: none;
  }

  body.tbox-route--brand :is(
    .tbox-card:not(.tbox-bento-cta-card), .tbox-card--content, .tbox-card--highlight, .tbox-card--decision,
    .tbox-feature-card, .tbox-detail-card, .tbox-comparison-card,
    .tbox-bento-stat-card,
    .tbox-pillar-card, .tbox-pillar-diagram-card,
    .tbox-usecase-card, .tbox-product-card, .tbox-value-card,
    .tbox-standard-features-grid > :not(.tbox-bento-cta-card)
  ):hover {
    transform: none;
  }

  body.tbox-route--brand .tbox-hero-v3 :is(.tbox-proof-strip, .tbox-proof-strip-compact, .tbox-trust-strip) {
    transform: none;
  }
}

/* ---------- Scroll-fx (progress bar + reveal extensions + carousel build-in) ----------
   Opt-in via body.tbox-scroll-fx, set by tb_should_apply_scroll_transitions()
   on an explicit route allowlist. All states reduce gracefully under
   prefers-reduced-motion. Coexists with .tbox-route--brand: brand pages
   receive both class names. */

.tbox-scroll-progress {
  display: none;
}
body.tbox-scroll-fx .tbox-scroll-progress {
  display: block;
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--brand-primary), var(--blue-1));
  z-index: 10000;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    body.tbox-scroll-fx .tbox-scroll-progress {
      animation: tbox-scroll-grow linear both;
      animation-timeline: scroll(root block);
    }
  }
}
@keyframes tbox-scroll-grow { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) {
  body.tbox-scroll-fx .tbox-scroll-progress {
    transform: scaleX(1);
    animation: none;
  }
}

/* Reveal stagger delay is declared inside each route-scoped block
   (brand-route block above, scroll-fx-non-brand block below). Both
   blocks set `transition:` shorthand which would otherwise reset
   `transition-delay` to 0. */

/* Auto-applied reveal state on opt-in routes that lack the brand
   register. Mirrors the brand-route appearance. */
:where(html.tbox-reveal-armed) body.tbox-scroll-fx:not(.tbox-route--brand) .tbox-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity .68s ease,
    transform .82s cubic-bezier(.18, .92, .27, 1);
  transition-delay: calc(var(--i, 0) * 78ms);
}
:where(html.tbox-reveal-armed) body.tbox-scroll-fx:not(.tbox-route--brand) .tbox-reveal:not(.is-revealed) {
  will-change: opacity, transform;
}
body.tbox-scroll-fx:not(.tbox-route--brand) .tbox-reveal.is-revealed {
  opacity: 1;
  transform: none;
}

/* Directional variants (opt-in, hand-tagged). Scoped to the opt-in
   body classes so a stray `.tbox-reveal--left` on a non-allowlist
   page is never translated off-screen without JS to revert it. */
:where(html.tbox-reveal-armed) body.tbox-scroll-fx .tbox-reveal--left:not(.is-revealed),
:where(html.tbox-reveal-armed) body.tbox-route--brand .tbox-reveal--left:not(.is-revealed) {
  transform: translateX(-46px);
}
:where(html.tbox-reveal-armed) body.tbox-scroll-fx .tbox-reveal--right:not(.is-revealed),
:where(html.tbox-reveal-armed) body.tbox-route--brand .tbox-reveal--right:not(.is-revealed) {
  transform: translateX(46px);
}
body.tbox-scroll-fx .tbox-reveal--left.is-revealed,
body.tbox-scroll-fx .tbox-reveal--right.is-revealed,
body.tbox-route--brand .tbox-reveal--left.is-revealed,
body.tbox-route--brand .tbox-reveal--right.is-revealed {
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  body.tbox-scroll-fx .tbox-reveal,
  body.tbox-scroll-fx .tbox-reveal.is-revealed,
  body.tbox-scroll-fx .tbox-reveal--left,
  body.tbox-scroll-fx .tbox-reveal--right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Print: reveals are gated on html.tbox-reveal-armed (JS-only), and
   prefers-reduced-motion does not reliably match for print. Below-the-fold
   reveal elements that were never scrolled into view would otherwise print
   at opacity:0. Force final state for print on any route. */
@media print {
  .tbox-reveal,
  .tbox-reveal.is-revealed,
  .tbox-reveal--left,
  .tbox-reveal--right {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* === End Motion === */

.tbox-prose { max-width: var(--width-desc); }

/* Phase 1.4 — Cap loose body paragraphs that escape the reading measure.
   Targets paragraphs that are direct children of a .tbox-section container
   or a .tbox-section__intro wrapper — i.e. unwrapped marketing prose, NOT
   card bodies, grid contents, table cells, or any element already inside a
   deliberate component layout.
   NOTE: --width-prose (75ch) resolves to ~857px in Rubik (1ch ≈ 11.4px),
   producing ~95 chars/line. --width-desc (680px) matches the intended
   ~75-char measure for this font. */
.tbox-section > .tbox-container > p,
.tbox-section > .tbox-container > .tbox-section__intro p {
  max-width: var(--width-desc);
}

/* Phase 1.6 — Inline-glossary abbr style. Wraps the first occurrence of
   a defined term (e.g. cloudlet) on a page with a dotted brand-highlight
   underline. Hover, keyboard focus, and tap (`.is-open` toggled by
   `tbox-glossary.js`) all reveal a CSS-rendered tooltip rather than relying
   on the slow native `title` tooltip (which is also unreachable on touch).
   Pages opt in per-occurrence: <abbr class="tbox-glossary" title="…">term</abbr>. */
abbr.tbox-glossary {
  position: relative;
  color: inherit;
  text-decoration: underline dotted var(--brand-highlight);
  text-underline-offset: 0.18em;
  cursor: help;
}

abbr.tbox-glossary:focus-visible {
  outline: 2px solid var(--brand-primary);
  outline-offset: 2px;
  border-radius: 2px;
}

abbr.tbox-glossary::after {
  content: attr(data-glossary-title);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translate(-50%, 4px);
  width: max-content;
  max-width: min(20rem, 80vw);
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--tbox-font-body, inherit);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: 1.35;
  text-decoration: none;
  text-align: left;
  letter-spacing: 0;
  white-space: normal;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  /* Take the resting tooltip out of layout entirely. It is only the no-JS
     fallback (the JS path uses #tbox-glossary-floating-tip), and as an
     absolutely-positioned box it inflated the term's scrollWidth, tripping
     overflow audits. display:none removes that footprint; allow-discrete +
     @starting-style keep the fade-in for the no-JS path. */
  display: none;
  transition:
    opacity var(--duration-base, 180ms) var(--tbox-ease-out-quart, ease-out),
    transform var(--duration-base, 180ms) var(--tbox-ease-out-quart, ease-out),
    display var(--duration-base, 180ms) allow-discrete;
  z-index: 5;
}

/* Arrow that ties the tooltip to the underlined term. */
abbr.tbox-glossary::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: calc(100% + 2px);
  width: 10px;
  height: 10px;
  background: var(--surface-base);
  border-left: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
  transform: translate(-50%, 50%) rotate(225deg);
  opacity: 0;
  pointer-events: none;
  display: none;
  transition:
    opacity var(--duration-base, 180ms) var(--tbox-ease-out-quart, ease-out),
    display var(--duration-base, 180ms) allow-discrete;
  z-index: 5;
}

/* No-JS fallback — suppressed when tbox-glossary.js is ready */
:root:not(.tbox-glossary-js) abbr.tbox-glossary:hover::after,
:root:not(.tbox-glossary-js) abbr.tbox-glossary:focus-visible::after,
:root:not(.tbox-glossary-js) abbr.tbox-glossary.is-open::after,
:root:not(.tbox-glossary-js) abbr.tbox-glossary:hover::before,
:root:not(.tbox-glossary-js) abbr.tbox-glossary:focus-visible::before,
:root:not(.tbox-glossary-js) abbr.tbox-glossary.is-open::before {
  opacity: 1;
  display: block;
  transition-delay: 0s;

  @starting-style {
    opacity: 0;
  }
}
:root:not(.tbox-glossary-js) abbr.tbox-glossary:hover::after,
:root:not(.tbox-glossary-js) abbr.tbox-glossary:focus-visible::after,
:root:not(.tbox-glossary-js) abbr.tbox-glossary.is-open::after {
  transform: translate(-50%, 0);
}

@media (prefers-reduced-motion: reduce) {
  abbr.tbox-glossary::after,
  abbr.tbox-glossary::before {
    transition: none;
  }
}

#tbox-glossary-floating-tip {
  position: fixed;
  width: max-content;
  max-width: min(20rem, calc(100vw - 32px));
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  color: var(--text-primary);
  font-family: var(--tbox-font-body, inherit);
  font-size: var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: 1.35;
  text-align: left;
  box-shadow: var(--shadow-lg);
  z-index: 300;
  pointer-events: none;
  transform: translateX(-50%);
  display: none;
}
#tbox-glossary-floating-tip.is-visible { display: block; }
#tbox-glossary-floating-tip::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 100%;
  width: 10px;
  height: 10px;
  background: var(--surface-base);
  border-left: 1px solid var(--border-light);
  border-top: 1px solid var(--border-light);
  transform: translate(-50%, -50%) rotate(225deg);
}
#tbox-glossary-floating-tip.tbox-glossary-floating-tip--below::after {
  top: auto;
  bottom: 100%;
  transform: translate(-50%, 50%) rotate(45deg);
}
:root[data-theme="dark"] #tbox-glossary-floating-tip {
  background: var(--gray-800);
  color: var(--gray-200);
  border-color: var(--surface-glass-10);
}
:root[data-theme="dark"] #tbox-glossary-floating-tip::after {
  background: var(--gray-800);
  border-color: var(--surface-glass-10);
}

/* Phase 1.6.5 — Cyan accent-zone utilities.
   Use sparingly. The intent is to keep --brand-primary cyan vivid for the
   one or two signals that earn attention per fold (selected/active states,
   mechanism callouts, recommended-path indicators), and to demote the rest
   of "default cyan" to neutral or quiet treatments. */

/* Use for ONE deliberate accent moment per section — not as a default text
   color. Same hue as --brand-primary; the class name is the budget signal. */
.tbox-accent-cyan {
  color: var(--brand-primary);
}

/* Eyebrow modifier that keeps the eyebrow legible without claiming brand
   emphasis. Use this on every card eyebrow in a grid except the one or two
   that mark the recommended path / featured option. */
.tbox-eyebrow--muted {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-eyebrow--muted {
  color: var(--text-on-dark-strong);
}

/* Lifts the container max-width so a band can stretch edge-to-edge.
   Side padding is preserved; nest a padding-inline:0 child to escape it. */
.tbox-section--bleed > .tbox-container {
  max-width: none;
  width: 100%;
}

/* stylelint-disable no-duplicate-selectors -- late route polish intentionally layers over earlier App Hosting and Cloud VPS spoke rules. */
.tbox-hero-v3--portability .tbox-hero-v3__subtitle {
  color: var(--text-inverse);
}

/* ── Python App Hosting: route-scoped overrides ── */
.tbox-python-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.42fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-4xl));
  align-items: center;
  max-width: min(1080px, 92vw);
}

.tbox-python-hero__copy {
  min-width: 0;
}

.tbox-python-hero .tbox-hero-v3__title,
.tbox-python-hero .tbox-hero-v3__subtitle {
  margin-inline: 0;
  max-width: 680px;
  text-align: left;
}

.tbox-python-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

.tbox-python-hero__panel {
  display: grid;
  gap: 0;
  border: 1px solid color-mix(in srgb, var(--surface-base) 22%, transparent);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--surface-dark) 62%, transparent);
  color: var(--text-inverse);
  overflow: hidden;
  box-shadow: 0 12px 30px color-mix(in srgb, var(--gray-950) 18%, transparent);
}

.tbox-python-hero__panel-title {
  margin: 0;
  padding: var(--space-md-plus) var(--space-lg);
  border-bottom: 1px solid color-mix(in srgb, var(--surface-base) 16%, transparent);
  color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.tbox-python-hero__panel-row {
  display: grid;
  gap: var(--space-2xs);
  padding: var(--space-md-plus) var(--space-lg);
}

.tbox-python-hero__panel-row + .tbox-python-hero__panel-row {
  border-top: 1px solid color-mix(in srgb, var(--surface-base) 16%, transparent);
}

.tbox-python-hero__panel-row span {
  color: color-mix(in srgb, var(--text-inverse) 70%, transparent);
  font-size: var(--fs-xs);
}

.tbox-python-hero__panel-row strong {
  color: var(--text-inverse);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.tbox-python-deploy-section .tbox-container,
.tbox-python-flow-section .tbox-container,
.tbox-python-stack-section .tbox-container,
.tbox-python-runtime-section .tbox-container,
.tbox-python-patterns-section .tbox-container {
  max-width: 1120px;
}

.tbox-python-deploy-section .tbox-section__heading,
.tbox-python-flow-section .tbox-section__heading,
.tbox-python-stack-section .tbox-section__heading,
.tbox-python-patterns-section .tbox-section__heading {
  max-width: 760px;
}

.tbox-python-deploy-panel {
  display: grid;
  grid-template-columns: minmax(0, 780px);
  gap: clamp(1.25rem, 3vw, 2.5rem);
  align-items: start;
  max-width: 780px;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
}

.tbox-python-deploy-panel__copy {
  display: grid;
  gap: var(--space-lg);
}

.tbox-python-deploy-panel__copy .tbox-prose {
  margin: 0;
  max-width: var(--prose-measure-default);
}

.tbox-python-deploy-panel__steps,
.tbox-python-flow-steps {
  list-style: none;
  margin: 0;
  padding: 0;
}

.tbox-python-deploy-panel__steps {
  display: grid;
  gap: var(--space-sm);
}

.tbox-python-deploy-panel__steps li {
  display: grid;
  grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-top: 1px solid var(--border-light);
  color: var(--text-secondary);
}

.tbox-python-deploy-panel__steps li:last-child {
  border-bottom: 1px solid var(--border-light);
}

.tbox-python-deploy-panel__steps strong {
  color: var(--text-primary);
  font-weight: var(--fw-bold);
}

.tbox-python-deploy-panel__link {
  margin: 0;
  font-weight: var(--fw-semibold);
}

.tbox-python-deploy-panel .tbox-hero-terminal {
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--surface-glass-18));
  box-shadow: 0 10px 28px color-mix(in srgb, var(--gray-950) 14%, transparent);
}

.tbox-python-deploy-panel .tbox-hero-terminal__body {
  overflow-x: auto;
}

.tbox-python-flow-steps {
  display: grid;
  gap: 0;
  margin-top: clamp(1rem, 2vw, 1.4rem);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-12);
  background: var(--surface-base);
  overflow: hidden;
}

.tbox-python-flow-steps li {
  position: relative;
  display: grid;
  grid-template-columns: minmax(12rem, 0.32fr) minmax(0, 1fr);
  align-content: start;
  gap: clamp(var(--space-md), 2vw, var(--space-xl));
  padding: clamp(1rem, 1.7vw, 1.35rem) clamp(1.05rem, 2vw, 1.65rem);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-python-flow-steps li + li {
  border-top: 1px solid var(--border-light);
}

.tbox-python-flow-steps strong {
  display: block;
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-tight);
}

.tbox-python-stack-section .tbox-bento-cta-card {
  margin-block: clamp(1.25rem, 2.4vw, 2rem);
}

.tbox-python-stack-section .tbox-mini-note {
  max-width: 860px;
  margin-inline: auto;
  text-align: center;
}

.tbox-python-stack-section .tbox-ui-proof {
  margin-block: clamp(2rem, 4.4vw, 3.6rem);
}

.tbox-python-runtime-section .tbox-container {
  display: grid;
  gap: var(--space-lg);
}

.tbox-python-runtime-section .tbox-section__heading,
.tbox-python-runtime-section .tbox-container > p {
  max-width: 760px;
  margin-inline: auto;
  text-align: center;
}

.tbox-python-runtime-section .tbox-stats-row {
  margin-top: var(--space-md);
}

.tbox-python-patterns-section .tbox-standard-features-grid {
  margin-top: clamp(1.15rem, 2vw, 1.6rem);
}

.tbox-python-topology {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) 2.5rem minmax(0, 1.14fr) 2.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: stretch;
  margin-top: clamp(1.1rem, 2vw, 1.6rem);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-12);
  background: var(--surface-base);
}

.tbox-python-topology__lane {
  display: grid;
  align-content: center;
  gap: var(--space-xs);
  min-width: 0;
}

.tbox-python-topology__label {
  color: var(--text-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tbox-python-topology__lane strong {
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
}

.tbox-python-topology__lane > span:not(.tbox-python-topology__label) {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.tbox-python-topology__nodes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-xs);
}

.tbox-python-topology__nodes span {
  display: grid;
  place-items: center;
  min-height: 3rem;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-light));
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 12%);
  color: var(--brand-primary-text);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  text-align: center;
}

.tbox-python-topology__rail {
  align-self: center;
  height: 1px;
  background: var(--border-mid);
}

.tbox-python-patterns-matrix {
  margin-top: clamp(1.15rem, 2vw, 1.6rem);
}

@media (width <= 900px) {
  .tbox-python-hero .tbox-hero-v3__inner,
.tbox-python-deploy-panel,
.tbox-python-topology {
    grid-template-columns: 1fr;
  }

  .tbox-python-hero__panel {
    max-width: 34rem;
  }

  .tbox-python-deploy-panel {
    align-items: stretch;
  }

  .tbox-python-topology__rail {
    width: 1px;
    height: 1.5rem;
    justify-self: center;
  }
}

@media (width <= 640px) {
  .tbox-python-hero .tbox-hero-v3__title,
.tbox-python-hero .tbox-hero-v3__subtitle {
    text-align: center;
  }

  .tbox-python-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-python-deploy-section .tbox-section__heading,
.tbox-python-flow-section .tbox-section__heading,
.tbox-python-stack-section .tbox-section__heading,
.tbox-python-runtime-section .tbox-section__heading,
.tbox-python-patterns-section .tbox-section__heading {
    text-align: left;
  }

  .tbox-python-deploy-panel__steps li {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  .tbox-python-stack-section .tbox-pillar-row--3-diagram {
    grid-template-columns: minmax(0, 1fr);
  }

  .tbox-python-stack-section .tbox-pillar-row--3-diagram .tbox-pillar-diagram-card {
    grid-column: auto;
  }

  .tbox-python-stack-section :is(.tbox-pillar, .tbox-pillar-diagram-card) {
    min-width: 0;
  }

  .tbox-python-flow-steps li {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding: var(--space-lg);
  }

  .tbox-python-topology__nodes {
    grid-template-columns: 1fr;
  }

  .tbox-python-hero__panel-row {
    padding-inline: var(--space-md-plus);
  }

  .tbox-python-stack-section .tbox-mini-note,
.tbox-python-runtime-section .tbox-section__heading,
.tbox-python-runtime-section .tbox-container > p {
    text-align: left;
  }
}

/* ── App Hosting portability: route-scoped overrides ── */
.tbox-ah-portability-toolkit .tbox-container,
.tbox-ah-portability-plan .tbox-container,
.tbox-ah-portability-timeline-section .tbox-container {
  max-width: 1120px;
}

:is(.tbox-ah-portability-toolkit) {
  background: var(--surface-muted);
}

:is(.tbox-ah-portability-toolkit) .tbox-section__heading,
:is(.tbox-ah-portability-timeline-section) .tbox-section__heading,
:is(.tbox-ah-portability-plan) .tbox-section__heading {
  max-width: 780px;
  margin-inline: 0;
  text-align: left;
  text-wrap: balance;
}

:is(.tbox-ah-portability-toolkit, .tbox-ah-portability-timeline-section) .tbox-section__desc {
  max-width: 760px;
  margin-inline: 0;
  color: var(--text-secondary);
  text-align: left;
}

:is(.tbox-ah-portability-matrix) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  overflow: hidden;
  margin-top: clamp(1.4rem, 2.4vw, 2rem);
  border: 1px solid color-mix(in srgb, var(--border-light) 84%, var(--brand-primary) 16%);
  border-color: color-mix(in srgb, var(--border-light) 84%, var(--brand-primary) 16%);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--gray-950) 6%, transparent);
}

:is(.tbox-ah-portability-matrix) .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--surface-muted) 84%, var(--brand-primary-bg) 16%);
  color: var(--text-primary);
}

:is(.tbox-ah-portability-matrix) .tbox-feature-matrix__row {
  align-content: start;
  min-height: 100%;
  padding: clamp(1.1rem, 2vw, 1.45rem);
  border: 0;
  border-radius: 0;
  background: var(--surface-base);
  box-shadow: none;
}

:is(.tbox-ah-portability-matrix) .tbox-feature-matrix__row + .tbox-feature-matrix__row {
  border-top: 0;
  border-left: 1px solid var(--border-light);
}

:is(.tbox-ah-portability-matrix) .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary-bg) 12%);
}

:is(.tbox-ah-portability-matrix) .tbox-feature-matrix__feature {
  gap: var(--space-sm);
}

:is(.tbox-ah-portability-matrix) .tbox-feature-matrix__icon {
  width: 2.1rem;
  height: 2.1rem;
  margin-top: 0;
  border-color: color-mix(in srgb, var(--brand-primary) 20%, var(--border-light) 80%);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--brand-primary) 10%, var(--surface-base));
  color: var(--brand-primary);
}

:is(.tbox-ah-portability-matrix) .tbox-feature-matrix__text :where(p) {
  max-width: 34ch;
}

:is(.tbox-ah-portability-matrix) .tbox-chip {
  margin-top: var(--space-xs);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-bg) 14%);
  font-size: var(--fs-xs);
}

:is(.tbox-ah-portability-toolkit) .tbox-bento-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-md);
  margin-top: clamp(1rem, 2vw, 1.35rem);
  padding: clamp(1rem, 2.2vw, 1.5rem);
  border: 1px solid var(--brand-primary-border-tint-18);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  color: var(--text-primary);
  box-shadow: none;
}

.tbox-ah-portability-toolkit .tbox-bento-cta-card__text {
  max-width: var(--prose-measure-wide);
}

#content .tbox-ah-portability-toolkit .tbox-bento-cta-card p {
  color: var(--text-secondary);
}

:is(.tbox-ah-portability-toolkit) .tbox-bento-cta-card > .tbox-btn:not(.tbox-chat-btn) {
  border-color: var(--brand-cta);
  background: var(--brand-cta);
  color: var(--text-inverse);
}

:is(.tbox-ah-portability-toolkit) .tbox-bento-cta-card > .tbox-btn + .tbox-btn {
  border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border-light) 66%);
  background: var(--surface-base);
  color: var(--brand-primary-text);
}

:is(.tbox-ah-portability-plan) {
  background: color-mix(in srgb, var(--surface-muted) 72%, var(--surface-base) 28%);
}

:is(.tbox-ah-portability-plan) .tbox-container {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(24rem, 1.1fr);
  gap: clamp(1.25rem, 3vw, 2rem);
  align-items: start;
}

:is(.tbox-ah-portability-plan__copy) .tbox-section__desc {
  max-width: var(--prose-measure-default);
}

:is(.tbox-ah-portability-ledger) {
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

:is(.tbox-ah-portability-ledger) li {
  background: var(--surface-base);
}

:is(.tbox-ah-portability-ledger) li + li {
  border-top: 1px solid var(--border-light);
}

:is(.tbox-ah-portability-plan) .tbox-ui-proof {
  grid-template-columns: 1fr;
  gap: 0;
  overflow: hidden;
  width: min(100%, 34rem);
  margin-block: 0;
  margin-left: auto;
  border: 1px solid color-mix(in srgb, var(--border-light) 82%, var(--brand-primary) 18%);
  border-radius: var(--radius-md);
  background: var(--surface-base);
}

:is(.tbox-ah-portability-plan) .tbox-ui-proof::before {
  display: none;
}

:is(.tbox-ah-portability-plan) .tbox-ui-proof__media {
  padding: clamp(1rem, 2vw, 1.35rem);
  border-radius: 0;
  background: var(--surface-dark);
}

:is(.tbox-ah-portability-plan) .tbox-ui-proof__image {
  width: 100%;
  height: auto;
  max-height: none;
  border-radius: var(--radius-sm);
  box-shadow: 0 12px 24px color-mix(in srgb, var(--gray-950) 28%, transparent);
}

:is(.tbox-ah-portability-plan) .tbox-ui-proof__caption {
  padding: clamp(1rem, 2vw, 1.35rem);
  border-top: 1px solid var(--border-light);
}

:is(.tbox-ah-portability-plan) .tbox-ui-proof__title {
  max-width: 20ch;
}

:is(.tbox-ah-portability-plan) .tbox-ui-proof__expand {
  width: fit-content;
  min-height: 2.6rem;
}

:is(.tbox-ah-portability-plan) .tbox-cta-row {
  margin-top: var(--space-sm);
}

:is(.tbox-ah-portability-timeline-section) {
  background: var(--surface-base);
}

:is(.tbox-ah-portability-timeline-section) .tbox-ah-migration-timeline {
  display: grid;
  max-width: none;
  margin-top: clamp(1.25rem, 2.4vw, 1.8rem);
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--border-light) 86%, var(--brand-primary) 14%);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  border-color: color-mix(in srgb, var(--border-light) 86%, var(--brand-primary) 14%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--gray-950) 5%, transparent);
}

:is(.tbox-ah-portability-timeline-section) .tbox-ah-migration-timeline::before {
  display: none;
}

:is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-item {
  display: grid;
  grid-template-columns: minmax(9rem, 0.26fr) minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 2rem);
  align-items: start;
  margin: 0;
  padding: clamp(1rem, 2vw, 1.35rem);
  border-color: var(--border-light);
  border-bottom: 1px solid var(--border-light);
}

:is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-item:last-child {
  border-bottom: 0;
}

:is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-item::before {
  display: none;
}

:is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-badge {
  width: fit-content;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--brand-primary-text);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-sm);
}

:is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-content {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent !important;
  box-shadow: none;
}

:is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-content:hover {
  transform: none;
}

:is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-content__title {
  margin-bottom: var(--space-xs);
  color: var(--text-primary);
}

.tbox-ah-portability-timeline-section .tbox-mini-note {
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
}

.tbox-ah-portability-plan a:not(.tbox-btn),
.tbox-ah-portability-timeline-section .tbox-mini-note a {
  color: var(--text-primary) !important;
  font-weight: var(--fw-semibold);
}

.tbox-hero-v3--portability ~ .tbox-cta-section .tbox-btn-outline,
.tbox-hero-v3--portability ~ .tbox-cta-section .tbox-cta-section__related-label {
  color: var(--text-inverse);
}

.tbox-ah-portability-plan .tbox-btn[data-cta-tier="primary"],
.tbox-hero-v3--portability ~ .tbox-cta-section .tbox-cta-section__card-actions .tbox-btn:first-child,
.tbox-hero-v3--portability ~ .tbox-mobile-sticky-cta .tbox-mobile-sticky-cta-actions .tbox-btn:first-child {
  color: var(--tbox-btn-primary-text);
}

:root[data-theme="dark"] .tbox-ah-portability-plan a:not(.tbox-btn),
:root[data-theme="dark"] .tbox-ah-portability-timeline-section .tbox-mini-note a {
  color: var(--text-primary) !important;
}

:root[data-theme="dark"] :is(.tbox-ah-portability-matrix),
:root[data-theme="dark"] :is(.tbox-ah-portability-ledger),
:root[data-theme="dark"] :is(.tbox-ah-portability-timeline-section) .tbox-ah-migration-timeline {
  border-color: var(--border-mid);
  box-shadow: none;
}

:root[data-theme="dark"] :is(.tbox-ah-portability-matrix) .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 12%);
}

:root[data-theme="dark"] :is(.tbox-ah-portability-matrix) .tbox-feature-matrix__icon {
  background: color-mix(in srgb, var(--brand-primary) 18%, var(--surface-base));
}

:root[data-theme="dark"] :is(.tbox-ah-portability-toolkit),
:root[data-theme="dark"] :is(.tbox-ah-portability-plan),
:root[data-theme="dark"] :is(.tbox-ah-portability-timeline-section) {
  background: var(--surface-subtle);
}

:root[data-theme="dark"] :is(.tbox-ah-portability-matrix) .tbox-feature-matrix__row,
:root[data-theme="dark"] :is(.tbox-ah-portability-ledger) li,
:root[data-theme="dark"] :is(.tbox-ah-portability-plan) .tbox-ui-proof,
:root[data-theme="dark"] :is(.tbox-ah-portability-timeline-section) .tbox-ah-migration-timeline {
  background: var(--surface-base);
}

:root[data-theme="dark"] :is(.tbox-ah-portability-matrix) .tbox-feature-matrix__row + .tbox-feature-matrix__row,
:root[data-theme="dark"] :is(.tbox-ah-portability-ledger) li + li,
:root[data-theme="dark"] :is(.tbox-ah-portability-plan) .tbox-ui-proof__caption,
:root[data-theme="dark"] :is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-item {
  border-color: var(--border-mid);
}

:root[data-theme="dark"] :is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-badge {
  color: var(--brand-primary);
}

@media (width <= 980px) {
  :is(.tbox-ah-portability-matrix) {
    grid-template-columns: 1fr;
  }

  :is(.tbox-ah-portability-matrix) .tbox-feature-matrix__row + .tbox-feature-matrix__row {
    border-top: 1px solid var(--border-light);
    border-left: 0;
  }

  :is(.tbox-ah-portability-plan) .tbox-ui-proof {
    width: 100%;
    margin-left: 0;
  }

  :is(.tbox-ah-portability-toolkit) .tbox-bento-cta-card,
  :is(.tbox-ah-portability-plan) .tbox-container {
    grid-template-columns: 1fr;
  }

  :is(.tbox-ah-portability-toolkit) .tbox-bento-cta-card > .tbox-btn {
    justify-self: start;
  }
}

@media (width <= 720px) {
  :is(.tbox-ah-portability-timeline-section) .tbox-ah-timeline-item {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

@media (width <= 600px) {
  :is(.tbox-ah-portability-matrix, .tbox-ah-portability-ledger, .tbox-ah-portability-timeline-section .tbox-ah-migration-timeline) {
    border-radius: var(--radius-sm-plus);
  }

  :is(.tbox-ah-portability-ledger) li {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
  }

  :is(.tbox-ah-portability-ledger) span {
    grid-column: auto;
  }
}

/* Cloud VPS Volumes dark-mode matrix overrides — must follow shared .tbox-feature-matrix rules to win the cascade. */
:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__header,
:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row {
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary) 5%) !important;
}

:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--surface-base) 84%, var(--brand-primary) 10%) !important;
}

:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix :is(.tbox-matrix-value, .tbox-ah-matrix-value) {
  background: transparent !important;
}

/* Cloud VPS hero and configurator overrides */
body #hero-section.tbox-hourly-cloud-vps {
  position: relative;
  overflow: clip;
}

body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__inner {
  padding-block: 0;
}

body #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__split {
  gap: clamp(2.25rem, 5vw, 5.5rem);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__text {
  align-self: start;
}

body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title {
  max-width: 14.25ch;
  text-wrap: balance;
}

body #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__title-line2 {
  display: block;
  max-width: 18ch;
  margin-top: 0.26em;
  color: color-mix(in srgb, var(--text-inverse) 80%, var(--brand-cta) 20%);
  font-size: clamp(2rem, 3.15vw, 3rem);
  line-height: 1.12;
  font-weight: var(--fw-bold);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  text-wrap: pretty;
}

body #hero-section.tbox-hourly-cloud-vps .tbox-mini-note {
  color: color-mix(in srgb, var(--text-inverse) 93%, var(--brand-highlight) 7%);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row {
  gap: var(--space-sm-plus);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row .tbox-btn {
  min-height: 3.5rem;
  border-radius: var(--radius-sm-plus);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-monitor,
.tbox-home-fleet .tbox-fleet-monitor {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 18%, var(--brand-primary-light) 10%);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--gray-950) 70%, var(--brand-primary-deep) 30%);
  box-shadow: 0 12px 28px color-mix(in srgb, var(--gray-950) 18%, transparent);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-monitor::before,
.tbox-home-fleet .tbox-fleet-monitor::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--brand-cta);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-service-status,
.tbox-home-fleet .tbox-fleet-service-status {
  border-color: color-mix(in srgb, var(--text-inverse) 18%, transparent);
  background: color-mix(in srgb, var(--text-inverse) 6%, transparent);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-service-status__text,
.tbox-home-fleet .tbox-fleet-service-status__text {
  color: color-mix(in srgb, var(--text-inverse) 86%, var(--surface-muted) 14%);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-stages,
.tbox-home-fleet .tbox-fleet-stages {
  border-bottom-color: var(--cloud-vps-fleet-monitor-divider);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-stage-btn,
.tbox-home-fleet .tbox-fleet-stage-btn {
  background: var(--cloud-vps-fleet-monitor-stage-bg);
  color: var(--cloud-vps-fleet-monitor-muted-text);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
  scroll-margin-top: 7rem;
  background: color-mix(in srgb, var(--surface-muted) 90%, var(--brand-primary-bg) 10%);
}

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);
}

body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-usecase-card,
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card {
  border-color: color-mix(in srgb, var(--border-light) 80%, var(--brand-primary) 20%);
  border-radius: var(--radius-sm-plus);
  box-shadow: none;
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-cvps-proof-section {
  padding-block: clamp(2.5rem, 4vw, 3.75rem);
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-cvps-proof-section .tbox-container {
  max-width: 1100px;
}

body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-usecase-card:hover,
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card:hover {
  background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary-bg) 10%);
  transform: none;
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-social-proof-bar {
  border-block: 1px solid var(--border-light);
  background: color-mix(in srgb, var(--surface-base) 86%, var(--surface-subtle) 14%);
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-pillar,
body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-detail-card,
body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-extras-strip,
body #hero-section.tbox-hourly-cloud-vps ~ .tbox-section .tbox-ui-proof {
  border-color: color-mix(in srgb, var(--border-light) 78%, var(--brand-primary) 22%);
  border-radius: var(--radius-sm-plus);
  box-shadow: none;
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section {
  background: color-mix(in srgb, var(--surface-subtle) 86%, var(--brand-primary-bg) 14%);
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-pillar-row {
  align-items: stretch;
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-pillar--lead {
  background: color-mix(in srgb, var(--surface-base) 84%, var(--brand-primary-bg) 16%);
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-pillar__header,
body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-detail-card {
  align-items: center;
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-extras-strip__items {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-light) 78%, transparent);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--border-light) 78%, transparent);
}

body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-extras-strip__item {
  justify-content: center;
  min-height: 2.7rem;
  padding: var(--space-sm) var(--space-md);
  border: 0;
  border-radius: 0;
  background: var(--surface-base);
  text-align: center;
  white-space: normal;
}

body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card::before {
  height: 2px;
  background: var(--brand-primary);
}

body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card__heading {
  margin-bottom: 0;
}

body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card__list li {
  color: var(--text-secondary);
}

body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card__link {
  color: var(--brand-primary);
}

: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 {
  background: color-mix(in srgb, var(--surface-subtle) 90%, var(--brand-primary) 5%);
}

: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,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-pillar,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-detail-card,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-extras-strip,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-usecase-card,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-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),
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-usecase-card:hover,
:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card:hover {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 8%);
}

:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-social-proof-bar {
  border-color: var(--border-mid);
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 5%);
}

:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section {
  background: var(--surface-subtle);
}

#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);
}

/* On touch devices, raise the quick-value chips to a comfortable 44px tap
   target. Pointer-fine devices keep the compact desktop height. */
@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) {
  :root {
    --hvps-mobile-bar-height: 56px;
  }

  /* 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;
  }

  /* While the live price bar is up, the global offer sticky CTA yields so the
     running total is what the user sees while adjusting specs (the two fixed
     bars otherwise stack at the viewport bottom and the offer bar wins on
     z-index). Body class toggled by hourly-vps-configurator.js setVisible(). */
  body.tbox-hvps-price-bar-active .tbox-mobile-sticky-cta {
    transform: translateY(110%);
    visibility: hidden;
    pointer-events: none;
    transition:
      transform var(--ease-base),
      visibility 0s linear 180ms;
  }

  /* 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 #hero-section.tbox-hourly-cloud-vps ~ .tbox-cvps-proof-section {
  background: var(--surface-base);
}

:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-extras-strip__item {
  background: var(--surface-raised);
}

: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);
}

body #hero-section.tbox-hourly-cloud-vps ~ #features .tbox-section__desc {
  max-width: var(--prose-measure-default);
  margin: var(--space-sm) auto 0;
  color: var(--text-secondary);
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.65;
}

@media (width <= 1024px) {
  body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title,
body #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__title-line2 {
    max-width: 16ch;
  }
}

@media (width <= 600px) {
  body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__inner {
    padding-block: 0;
  }

  body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__title {
    max-width: 15ch;
    margin-inline: 0;
    text-align: left;
  }

  body #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__subtitle {
    margin-inline: 0;
    max-width: 100%;
    text-align: left;
  }

  body #hero-section.tbox-hourly-cloud-vps .tbox-cloud-vps-hero__title-line2 {
    max-width: 18ch;
    font-size: clamp(1.45rem, 7vw, 2rem);
  }

  body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps {
    scroll-margin-top: 5.5rem;
    padding-top: clamp(2.75rem, 10vw, 4rem);
  }

  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 #hero-section.tbox-hourly-cloud-vps .tbox-hero-v3__cta-row .tbox-btn {
    width: 100%;
    justify-content: center;
  }

  body #hero-section.tbox-hourly-cloud-vps ~ .tbox-standard-features-section .tbox-section__heading,
body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-section__heading,
  body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-section__heading {
    text-align: left;
    text-wrap: balance;
  }

}

/* Cloud VPS full polish pass */

/* Mobile keeps the live fleet animation (per owner preference); the static
   mobile-proof fallback stays suppressed at every width. */
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof {
  display: none;
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__head {
  display: grid;
  gap: var(--space-2xs);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--text-inverse-12);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__eyebrow {
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__sla {
  justify-self: start;
  color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 2px;
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__sla:hover,
body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__sla:focus-visible {
  color: var(--text-inverse);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__nodes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-xs);
  padding-block: var(--space-md);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__node {
  display: inline-grid;
  min-height: 2.4rem;
  place-items: center;
  border: 1px solid var(--text-inverse-16);
  border-radius: var(--radius-sm-plus);
  color: var(--text-inverse);
  font-family: var(--ff-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__node--healthy {
  background: color-mix(in srgb, var(--success) 20%, transparent);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__node--balancing {
  background: color-mix(in srgb, var(--brand-primary-light) 24%, transparent);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__node--failover {
  background: color-mix(in srgb, var(--brand-cta) 24%, transparent);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__states {
  display: grid;
  gap: var(--space-sm);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__state {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
  color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__state strong {
  display: block;
  color: var(--text-inverse);
  font-size: var(--fs-sm);
}

body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-mobile-proof__dot {
  width: 0.6rem;
  height: 0.6rem;
  margin-top: 0.28rem;
  border-radius: 50%;
  background: var(--brand-cta);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand-cta) 16%, transparent);
}

body #hero-section.tbox-hourly-cloud-vps ~ #fit-section .tbox-section__heading {
  max-width: 34rem;
}

.tbox-vps-paas-matrix {
  display: grid;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-light) 76%, var(--brand-primary) 24%);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
  box-shadow: var(--shadow-card-hairline);
}

.tbox-vps-paas-matrix__row {
  display: grid;
  grid-template-columns: minmax(12rem, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
}

.tbox-vps-paas-matrix__row + .tbox-vps-paas-matrix__row {
  border-top: 1px solid var(--border-light);
}

.tbox-vps-paas-matrix__row > div {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  min-width: 0;
  padding: clamp(var(--space-md), 1.4vw, var(--space-lg));
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}

.tbox-vps-paas-matrix__row > div + div {
  border-left: 1px solid var(--border-light);
}

.tbox-vps-paas-matrix__row--head > div {
  background: color-mix(in srgb, var(--surface-subtle) 86%, var(--brand-primary-bg) 14%);
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
}

.tbox-vps-paas-matrix__row :where(.material-symbols-outlined) {
  flex: 0 0 auto;
  color: var(--brand-primary);
  font-size: 1.25rem;
  line-height: 1.25;
}

.tbox-vps-paas-matrix__row strong {
  color: var(--text-primary);
}

body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section {
  background: color-mix(in srgb, var(--surface-muted) 78%, var(--surface-base) 22%);
}

body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-grid {
  gap: var(--space-md-plus);
}

body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card {
  padding: clamp(1rem, 1.4vw, 1.25rem);
  background: color-mix(in srgb, var(--surface-base) 92%, var(--surface-muted) 8%);
}

body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card__text,
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card__list {
  font-size: var(--fs-sm);
}

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
),
.tbox-video-carousel__fs-btn,
.tbox-trust-carousel__btn,
.tbox-trust-carousel__pause-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"] .tbox-vps-paas-matrix {
  border-color: var(--border-mid);
  background: var(--surface-subtle);
}

:root[data-theme="dark"] .tbox-vps-paas-matrix__row + .tbox-vps-paas-matrix__row,
:root[data-theme="dark"] .tbox-vps-paas-matrix__row > div + div {
  border-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-vps-paas-matrix__row--head > div {
  background: color-mix(in srgb, var(--surface-muted) 82%, var(--brand-primary) 8%);
}

:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section {
  background: var(--surface-subtle);
}

:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card {
  background: color-mix(in srgb, var(--surface-base) 86%, var(--surface-muted) 14%);
}

#content :where(
  .tbox-cta-section.tbox-cta-section--blueprint .tbox-cta-section__trust-item,
  .tbox-cta-section.tbox-cta-section--blueprint .tbox-cta-section__related-link,
  .tbox-cta-section.tbox-cta-section--blueprint .tbox-btn-outline
) {
  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 {
  border-color: var(--tbox-btn-outline-blue-border);
  color: var(--tbox-btn-outline-text-dark);
}

#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-cta-section__related-link:hover,
#content .tbox-cta-section.tbox-cta-section--blueprint .tbox-btn-outline:hover,
: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 <= 720px) {
  .tbox-vps-paas-matrix__row,
  .tbox-vps-paas-matrix__row--head {
    grid-template-columns: 1fr;
  }

  .tbox-vps-paas-matrix__row--head {
    display: none;
  }

  .tbox-vps-paas-matrix__row > div + div {
    border-left: 0;
    border-top: 1px solid var(--border-light);
  }

  .tbox-vps-paas-matrix__row > div:nth-child(1)::before,
  .tbox-vps-paas-matrix__row > div:nth-child(2)::before,
  .tbox-vps-paas-matrix__row > div:nth-child(3)::before {
    display: block;
    flex: 0 0 7.5rem;
    color: var(--text-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
  }

  .tbox-vps-paas-matrix__row > div:nth-child(1)::before {
    content: "Need";
  }

  .tbox-vps-paas-matrix__row > div:nth-child(2)::before {
    content: "Cloud VPS";
  }

  .tbox-vps-paas-matrix__row > div:nth-child(3)::before {
    content: "App Hosting";
  }
}

/* === tbox-qualifier — two-panel fit/routing split === */

.tbox-qualifier-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  margin-top: var(--space-2xl);
  margin-bottom: var(--space-2xl);
}
@media (width <= 768px) {
  .tbox-qualifier-grid { grid-template-columns: 1fr; }
}

.tbox-qualifier-panel {
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 2.5vw, 2.25rem);
  min-width: 0;
}

.tbox-qualifier-panel--fit {
  background: color-mix(in srgb, var(--brand-primary) 7%, var(--surface-base));
  border: 1px solid color-mix(in srgb, var(--brand-primary) 22%, var(--border-light));
}
:root[data-theme="dark"] .tbox-qualifier-panel--fit {
  background: color-mix(in srgb, var(--brand-primary) 8%, var(--surface-subtle));
  border-color: color-mix(in srgb, var(--brand-primary) 28%, var(--border-mid));
}

.tbox-qualifier-panel--alt {
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
}
:root[data-theme="dark"] .tbox-qualifier-panel--alt {
  background: color-mix(in srgb, var(--surface-subtle) 60%, var(--surface-base));
  border-color: var(--border-mid);
}

.tbox-qualifier-panel__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}
.tbox-qualifier-panel__eyebrow-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.tbox-qualifier-panel--fit .tbox-qualifier-panel__eyebrow-dot { background: var(--brand-primary); }
.tbox-qualifier-panel--alt .tbox-qualifier-panel__eyebrow-dot { background: var(--text-muted); }

.tbox-qualifier-panel__eyebrow-label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.tbox-qualifier-panel--fit .tbox-qualifier-panel__eyebrow-label { color: var(--brand-primary-text); }
:root[data-theme="dark"] .tbox-qualifier-panel--fit .tbox-qualifier-panel__eyebrow-label { color: var(--brand-primary); }
.tbox-qualifier-panel--alt .tbox-qualifier-panel__eyebrow-label { color: var(--text-muted); }
:root[data-theme="dark"] .tbox-qualifier-panel--alt .tbox-qualifier-panel__eyebrow-label { color: var(--text-on-dark-muted); }

.tbox-qualifier-panel__heading {
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0 0 var(--space-md);
}
:root[data-theme="dark"] .tbox-qualifier-panel__heading { color: var(--text-inverse); }

.tbox-qualifier-panel .tbox-offer-list {
  margin-top: var(--space-sm);
}
.tbox-qualifier-panel .tbox-offer-list li {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  white-space: normal;
  overflow: visible;
}
:root[data-theme="dark"] .tbox-qualifier-panel .tbox-offer-list li { color: var(--text-on-dark); }

.tbox-qualifier-alt-list {
  list-style: none;
  margin: var(--space-sm) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.tbox-qualifier-alt-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  font-size: var(--fs-base);
  color: var(--text-secondary);
  line-height: var(--lh-relaxed);
}
:root[data-theme="dark"] .tbox-qualifier-alt-list li { color: var(--text-on-dark); }
.tbox-qualifier-alt-list .material-symbols-outlined {
  font-size: 16px;
  flex-shrink: 0;
  margin-top: 0.2em;
  color: var(--text-muted);
}
:root[data-theme="dark"] .tbox-qualifier-alt-list .material-symbols-outlined { color: var(--text-on-dark-muted); }

.tbox-qualifier-panel--alt .tbox-qualifier-alt-link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  margin-top: var(--space-lg);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
:root[data-theme="dark"] .tbox-qualifier-panel--alt .tbox-qualifier-alt-link { color: var(--brand-primary); }
.tbox-qualifier-alt-link:hover { color: var(--brand-primary-deep); }
:root[data-theme="dark"] .tbox-qualifier-alt-link:hover { opacity: 0.85; }
.tbox-qualifier-panel--alt .tbox-qualifier-alt-link .material-symbols-outlined {
  font-size: 1em;
  vertical-align: middle;
}

.tbox-workload-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  align-items: center;
  margin-bottom: var(--space-xl);
}
.tbox-workload-strip__label {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  margin-right: var(--space-xs);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
:root[data-theme="dark"] .tbox-workload-strip__label { color: var(--text-on-dark-muted); }
.tbox-workload-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4em;
  padding: 0.3em 0.75em;
  background: var(--surface-muted);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-cap);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}
:root[data-theme="dark"] .tbox-workload-chip {
  background: var(--surface-subtle);
  border-color: var(--border-mid);
  color: var(--text-on-dark);
}
.tbox-workload-chip .material-symbols-outlined {
  font-size: var(--fs-sm);
  color: var(--brand-primary);
}

@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;
  }

  body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-grid {
    grid-template-columns: 1fr;
  }
}

/* Cloud VPS Volumes route overrides */
.tbox-cvps-vol-hero.tbox-hero-v3--compact {
  padding-block: clamp(3.1rem, 5.5vw, 5.6rem);
  text-align: left;
}

.tbox-cvps-vol-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.96fr) minmax(19rem, 0.46fr);
  gap: var(--space-lg) clamp(var(--space-2xl), 5vw, var(--space-4xl));
  align-items: center;
  max-width: 1160px;
}

.tbox-cvps-vol-hero__copy {
  min-width: 0;
}

.tbox-cvps-vol-hero .tbox-hero-v3__title,
.tbox-cvps-vol-hero .tbox-hero-v3__subtitle {
  margin-right: 0 !important;
  margin-left: 0 !important;
  text-align: left;
  text-wrap: balance;
}

#content .tbox-cvps-vol-hero .tbox-hero-v3__title,
#content .tbox-cvps-vol-hero .tbox-hero-v3__subtitle,
#content #hero-section.tbox-cvps-vol-hero .tbox-hero-v3__title,
#content #hero-section.tbox-cvps-vol-hero .tbox-hero-v3__subtitle {
  margin-right: 0 !important;
  margin-left: 0 !important;
  text-align: left !important;
}

.tbox-cvps-vol-hero .tbox-hero-v3__title {
  max-width: 15ch;
}

.tbox-cvps-vol-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
}

.tbox-cvps-vol-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-inline: 0;
}

.tbox-cvps-vol-hero__panel {
  position: relative;
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surface-base) 18%, var(--brand-primary-light) 8%);
  border-radius: var(--radius-sm-plus);
  background-color: color-mix(in srgb, var(--gray-950) 70%, var(--brand-primary-deep) 30%) !important;
  background-image: none !important;
  color: var(--text-inverse);
  box-shadow: 0 18px 38px color-mix(in srgb, var(--gray-950) 24%, transparent);
}

.tbox-cvps-vol-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--brand-cta);
}

.tbox-cvps-vol-hero__panel-row {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.32fr) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-2xs);
  padding: var(--space-md) var(--space-lg);
}

.tbox-cvps-vol-hero__panel-row + .tbox-cvps-vol-hero__panel-row {
  border-top: 1px solid color-mix(in srgb, var(--surface-base) 15%, transparent);
}

.tbox-cvps-vol-hero__panel-row span {
  color: color-mix(in srgb, var(--brand-cta) 78%, var(--text-inverse) 22%);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

.tbox-cvps-vol-hero__panel-row strong {
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.tbox-cvps-vol-section .tbox-container {
  max-width: 1120px;
}

#content .tbox-cvps-vol-section .tbox-section__heading,
#content .tbox-cvps-vol-section .tbox-section__desc {
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
}

#content .tbox-cvps-vol-section .tbox-section__heading::after {
  left: 0;
  transform: none;
}

.tbox-cvps-vol-section .tbox-extras-strip,
.tbox-cvps-vol-section .tbox-callout--icon,
.tbox-cvps-vol-diagram,
.tbox-cvps-vol-ops .tbox-ui-proof,
.tbox-cvps-vol-cta-card {
  border-radius: var(--radius-md);
}

.tbox-cvps-vol-section .tbox-extras-strip {
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
  border-color: color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-bg) 14%);
  box-shadow: none;
}

.tbox-cvps-vol-section .tbox-extras-strip__items {
  gap: 0;
}

.tbox-cvps-vol-section .tbox-extras-strip__item {
  width: 100%;
  min-height: 2.65rem;
  padding-block: var(--space-sm);
  border-radius: 0;
  background: transparent;
}

.tbox-cvps-vol-section .tbox-extras-strip__item + .tbox-extras-strip__item {
  border-top: 1px solid color-mix(in srgb, var(--border-light) 78%, transparent);
}

.tbox-cvps-vol-section .tbox-callout--icon {
  align-items: flex-start;
  border-color: color-mix(in srgb, var(--brand-primary) 34%, var(--border-light) 66%);
  background: color-mix(in srgb, var(--surface-base) 72%, var(--brand-primary-bg) 28%);
}

.tbox-cvps-vol-diagram {
  border-color: color-mix(in srgb, var(--border-light) 64%, var(--brand-primary) 36%);
  background: color-mix(in srgb, var(--surface-base) 84%, var(--brand-primary-bg) 16%);
  box-shadow: 0 16px 34px color-mix(in srgb, var(--gray-950) 10%, transparent);
}

.tbox-cvps-vol-diagram__vm,
.tbox-cvps-vol-diagram__center,
.tbox-cvps-vol-diagram__conn-lbl {
  border-radius: var(--radius-sm-plus);
}

.tbox-cvps-vol-ops-ledger {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: clamp(1.15rem, 2vw, 1.6rem);
  border: 1px solid color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
  border-radius: var(--radius-sm-plus);
  overflow: hidden;
}

.tbox-cvps-vol-ops-ledger div {
  display: grid;
  align-content: start;
  gap: var(--space-xs);
  padding: clamp(var(--space-md-plus), 1.8vw, var(--space-lg));
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary-bg) 12%);
}

.tbox-cvps-vol-ops-ledger div + div {
  border-left: 1px solid color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
}

.tbox-cvps-vol-ops-ledger span {
  color: color-mix(in srgb, var(--brand-primary-text) 86%, var(--text-primary) 14%);
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
}

.tbox-cvps-vol-ops-ledger strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-snug);
}

.tbox-cvps-vol-ops-matrix {
  margin-top: clamp(1.15rem, 2vw, 1.6rem);
  border-color: color-mix(in srgb, var(--border-light) 68%, var(--brand-primary) 32%);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  box-shadow: none;
}

.tbox-cvps-vol-ops-matrix .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--brand-primary-dark) 92%, var(--gray-950) 8%);
  color: var(--text-on-dark);
}

.tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row {
  grid-template-columns: minmax(10rem, 0.34fr) minmax(0, 1fr);
  min-height: 4.7rem;
  background: var(--surface-base);
  transition: background-color var(--duration-base) var(--ease-base);
}

.tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row:hover {
  background: color-mix(in srgb, var(--brand-primary-bg) 44%, var(--surface-base) 56%);
  transform: none;
}

.tbox-cvps-vol-ops-matrix :is(.tbox-matrix-label, .tbox-ah-matrix-label) {
  color: var(--text-primary);
  font-size: var(--fs-sm);
}

.tbox-cvps-vol-ops-matrix :is(.tbox-matrix-value, .tbox-ah-matrix-value) {
  display: block;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--text-secondary);
}

.tbox-cvps-vol-ops-matrix :is(.tbox-matrix-value, .tbox-ah-matrix-value) strong {
  display: inline;
  color: var(--text-primary);
}

.tbox-cvps-vol-ops .tbox-mini-note {
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
}

.tbox-cvps-vol-section .tbox-ui-proof {
  grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.72fr);
  align-items: center;
  border-color: color-mix(in srgb, var(--border-light) 72%, var(--brand-primary) 28%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-bg) 14%);
  box-shadow: none;
}

.tbox-cvps-vol-section .tbox-ui-proof__media {
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-light) 70%, var(--brand-primary) 30%);
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
}

.tbox-cvps-vol-section .tbox-ui-proof__video {
  display: block;
  box-shadow: none;
}

.tbox-cvps-vol-section .tbox-ui-proof__caption {
  align-self: center;
}

.tbox-cvps-vol-section .tbox-ui-proof__title {
  max-width: 20ch;
  font-size: clamp(1.45rem, 2vw, 1.85rem);
  line-height: var(--lh-tight);
}

.tbox-cvps-vol-section .tbox-ui-proof__text {
  max-width: 32rem;
}

.tbox-cvps-vol-ops .tbox-ui-proof {
  box-shadow: none;
}

.tbox-cvps-vol-ops .tbox-ui-proof__media {
  border-radius: var(--radius-sm-plus);
}

.tbox-cvps-vol-cta-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--space-md);
  border-radius: var(--radius-sm-plus);
}

@media (width <= 768px) {
  .tbox-cvps-vol-hero ~ .tbox-mobile-sticky-cta .tbox-mobile-sticky-cta-actions {
    grid-template-columns: minmax(0, 1fr) minmax(4.2rem, auto);
  }

  .tbox-cvps-vol-hero ~ .tbox-mobile-sticky-cta .tbox-btn-outline {
    padding-inline: var(--space-sm);
  }
}

:root[data-theme="dark"] .tbox-cvps-vol-diagram,
:root[data-theme="dark"] .tbox-cvps-vol-ops-ledger,
:root[data-theme="dark"] .tbox-cvps-vol-section .tbox-extras-strip,
:root[data-theme="dark"] .tbox-cvps-vol-ops .tbox-ui-proof {
  border-color: color-mix(in srgb, var(--border-mid) 70%, var(--brand-primary) 30%);
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-dark) 8%);
  box-shadow: none;
}

:root[data-theme="dark"] .tbox-cvps-vol-ops-ledger div {
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-dark) 8%);
}

:root[data-theme="dark"] .tbox-cvps-vol-ops-ledger span {
  color: var(--brand-primary-light);
}

:root[data-theme="dark"] .tbox-cvps-vol-section .tbox-extras-strip__item,
:root[data-theme="dark"] .tbox-cvps-vol-section .tbox-callout--icon,
:root[data-theme="dark"] .tbox-cvps-vol-section .tbox-ui-proof,
:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix,
:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row {
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-dark) 8%);
}

:root[data-theme="dark"] .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__header {
  background: color-mix(in srgb, var(--gray-950) 84%, var(--brand-primary) 16%);
  color: var(--text-on-dark);
}

@media (width <= 900px) {
  .tbox-cvps-vol-hero .tbox-hero-v3__inner,
.tbox-cvps-vol-ops-ledger,
.tbox-cvps-vol-cta-card,
.tbox-cvps-vol-section .tbox-ui-proof {
    grid-template-columns: 1fr;
  }

  .tbox-cvps-vol-hero__panel {
    max-width: 34rem;
  }

  .tbox-cvps-vol-cta-card > .tbox-btn {
    justify-self: start;
  }

  .tbox-cvps-vol-section .tbox-ui-proof__title {
    max-width: 24ch;
  }
}

@media (width <= 640px) {
  .tbox-cvps-vol-hero.tbox-hero-v3--compact {
    text-align: center;
  }

  .tbox-cvps-vol-hero .tbox-hero-v3__title,
.tbox-cvps-vol-hero .tbox-hero-v3__subtitle {
    margin-inline: auto;
    text-align: center;
  }

  .tbox-cvps-vol-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-cvps-vol-hero__panel,
.tbox-cvps-vol-ops-ledger,
.tbox-cvps-vol-diagram,
.tbox-cvps-vol-ops-matrix,
.tbox-cvps-vol-section .tbox-ui-proof,
.tbox-cvps-vol-cta-card {
    border-radius: var(--radius-sm-plus);
  }

  .tbox-cvps-vol-ops-matrix .tbox-feature-matrix__row {
    grid-template-columns: 1fr;
  }
}

/* App Hosting database route polish */
.tbox-hero-v3--database .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.98fr) minmax(21rem, 0.52fr);
  align-items: center;
  gap: clamp(2.25rem, 5vw, 4.75rem);
  max-width: min(1160px, 92vw);
  text-align: left;
}

.tbox-hero-v3--database .tbox-hero-v3__copy {
  display: grid;
  gap: var(--space-lg);
  justify-items: start;
  min-width: 0;
}

.tbox-hero-v3--database .tbox-hero-v3__title,
.tbox-hero-v3--database .tbox-hero-v3__subtitle {
  margin-inline: 0;
}

.tbox-hero-v3--database .tbox-hero-v3__title {
  max-width: 18ch;
}

.tbox-hero-v3--database .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
}

.tbox-hero-v3--database .tbox-hero-v3__panel {
  display: grid;
  border: 1px solid var(--text-inverse-18);
  border-radius: var(--radius-md);
  background: var(--brand-primary-deep);
  box-shadow: 0 1px 0 var(--text-inverse-12) inset;
  color: var(--text-inverse);
}

.tbox-hero-v3--database .tbox-hero-v3__panel-row {
  display: grid;
  grid-template-columns: minmax(6rem, 0.34fr) minmax(0, 1fr);
  align-items: baseline;
  gap: var(--space-xs);
  padding: var(--space-md) var(--space-lg);
}

.tbox-hero-v3--database .tbox-hero-v3__panel-row + .tbox-hero-v3__panel-row {
  border-top: 1px solid var(--text-inverse-12);
}

.tbox-hero-v3--database .tbox-hero-v3__panel-row span {
  color: color-mix(in srgb, var(--text-inverse) 62%, transparent);
  font-size: var(--fs-sm);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.tbox-hero-v3--database .tbox-hero-v3__panel-row strong {
  color: var(--text-inverse);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.tbox-ah-database-engines .tbox-section__heading,
.tbox-ah-database-management .tbox-section__heading,
.tbox-ah-database-growth .tbox-section__heading,
.tbox-ah-database-decision .tbox-section__heading {
  max-width: 820px;
}

.tbox-ah-database-engines .tbox-section__desc {
  max-width: 760px;
  margin-inline: auto;
}

.tbox-ah-database-management .tbox-section__desc,
.tbox-ah-database-growth .tbox-section__desc,
.tbox-ah-database-decision .tbox-section__desc {
  max-width: 760px;
}

.tbox-ah-database-management .tbox-section__desc,
.tbox-ah-database-decision .tbox-section__desc {
  margin-inline: auto;
}

.tbox-ah-database-engines .tbox-detail-label {
  color: var(--brand-primary-text);
  letter-spacing: 0;
}

.tbox-ah-database-engines .tbox-pillar-row {
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--border-light);
}

.tbox-ah-database-engines .tbox-pillar {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tbox-ah-database-engines .tbox-pillar:hover {
  border-color: transparent;
  box-shadow: none;
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-bg) 8%);
}

.tbox-ah-database-engines .tbox-pillar__accent {
  height: 2px;
  background: color-mix(in srgb, var(--brand-primary) 76%, var(--brand-cta) 24%);
  border-radius: 0;
}

.tbox-ah-database-engines .tbox-pillar__icon {
  color: var(--brand-primary-text);
}

.tbox-ah-database-engines .tbox-engine-facts {
  display: grid;
  gap: 1px;
  overflow: hidden;
  margin: var(--space-md) 0 0;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm-plus);
  background: var(--border-light);
  list-style: none;
}

.tbox-ah-database-engines .tbox-engine-facts li {
  display: grid;
  grid-template-columns: minmax(4.75rem, 0.42fr) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  padding: 0.55rem 0.7rem;
  background: color-mix(in srgb, var(--surface-base) 94%, var(--brand-primary-bg) 6%);
}

.tbox-ah-database-engines .tbox-engine-facts span {
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.tbox-ah-database-engines .tbox-engine-facts strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.tbox-ah-engine-matrix {
  margin-top: clamp(1.25rem, 2.4vw, 2rem);
  border-radius: var(--radius-md);
  box-shadow: none;
}

.tbox-ah-engine-matrix .tbox-feature-matrix__header {
  color: var(--text-secondary);
  letter-spacing: 0;
}

.tbox-ah-engine-matrix .tbox-feature-matrix__category {
  color: var(--brand-primary-text);
  background: color-mix(in srgb, var(--surface-muted) 80%, var(--brand-primary-bg) 20%);
}

.tbox-ah-engine-facts {
  display: grid;
  gap: var(--space-xs);
  justify-self: end;
  width: min(100%, 24rem);
}

.tbox-ah-engine-facts span {
  display: grid;
  grid-template-columns: minmax(4.5rem, 0.36fr) minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: baseline;
  padding: 0.45rem 0.65rem;
  border: 1px solid color-mix(in srgb, var(--brand-primary) 14%, var(--border-light) 86%);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-bg) 14%);
  color: var(--text-tertiary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.tbox-ah-engine-facts strong {
  min-width: 0;
  color: var(--text-primary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.tbox-ah-database-management .tbox-feature-matrix,
.tbox-ah-database-growth .tbox-ah-protocol-matrix {
  border-radius: var(--radius-md);
  box-shadow: none;
}

.tbox-ah-database-management .tbox-feature-matrix__header,
.tbox-ah-database-growth .tbox-feature-matrix__header {
  color: var(--text-secondary);
  letter-spacing: 0;
}

.tbox-ah-database-management .tbox-feature-matrix__category {
  color: var(--brand-primary-text);
  background: color-mix(in srgb, var(--surface-muted) 80%, var(--brand-primary-bg) 20%);
}

.tbox-ah-database-growth .tbox-ah-matrix-label {
  color: var(--brand-primary-text);
}

.tbox-ah-database-growth .tbox-ah-matrix-value {
  border-radius: var(--radius-sm-plus);
  background: var(--surface-base);
}

.tbox-ah-database-decision .tbox-standard-features-grid--decision {
  align-items: stretch;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--border-light);
}

.tbox-ah-database-decision .tbox-standard-features-grid--decision > :is(div, article) {
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.tbox-ah-database-decision .tbox-card--best-fit {
  background: color-mix(in srgb, var(--surface-base) 86%, var(--brand-primary-bg) 14%);
}

:root[data-theme="dark"] .tbox-ah-database-engines .tbox-pillar-row,
:root[data-theme="dark"] .tbox-ah-database-decision .tbox-standard-features-grid--decision {
  border-color: var(--border-mid);
  background: var(--border-mid);
}

.tbox-ah-database-cluster .tbox-detail-grid {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 700px) {
  .tbox-ah-database-cluster .tbox-detail-grid {
    grid-template-columns: 1fr;
  }
}

:root[data-theme="dark"] .tbox-ah-database-engines .tbox-detail-label,
:root[data-theme="dark"] .tbox-ah-database-engines .tbox-pillar__icon,
:root[data-theme="dark"] .tbox-ah-database-management .tbox-feature-matrix__category,
:root[data-theme="dark"] .tbox-ah-database-growth .tbox-ah-matrix-label {
  color: var(--brand-primary-light);
}

:root[data-theme="dark"] .tbox-ah-database-engines .tbox-engine-facts {
  border-color: var(--border-mid);
  background: var(--border-mid);
}

:root[data-theme="dark"] .tbox-ah-database-engines .tbox-engine-facts li {
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary) 8%);
}

:root[data-theme="dark"] .tbox-ah-database-engines .tbox-engine-facts span {
  color: var(--text-tertiary);
}

:root[data-theme="dark"] .tbox-ah-database-engines .tbox-engine-facts strong {
  color: var(--text-primary);
}

:root[data-theme="dark"] .tbox-ah-database-engines .tbox-pillar:hover,
:root[data-theme="dark"] .tbox-ah-database-decision .tbox-card--best-fit {
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary) 8%);
}

:root[data-theme="dark"] .tbox-ah-engine-matrix .tbox-feature-matrix__category {
  background: color-mix(in srgb, var(--surface-base) 82%, var(--brand-primary) 18%);
}

:root[data-theme="dark"] .tbox-ah-engine-facts span {
  border-color: var(--border-mid);
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 12%);
}

:root[data-theme="dark"] .tbox-ah-database-management .tbox-feature-matrix__category {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 12%);
}

@media (width <= 900px) {
  .tbox-hero-v3--database .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tbox-hero-v3--database .tbox-hero-v3__copy {
    justify-items: center;
  }

  .tbox-hero-v3--database .tbox-hero-v3__panel {
    width: min(100%, 34rem);
    margin-inline: auto;
  }

  .tbox-ah-database-engines .tbox-pillar-row--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (width <= 640px) {
  .tbox-hero-v3--database .tbox-hero-v3__title,
.tbox-hero-v3--database .tbox-hero-v3__subtitle {
    margin-inline: auto;
  }

  .tbox-hero-v3--database .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-hero-v3--database .tbox-hero-v3__panel-row {
    grid-template-columns: 1fr;
    gap: 0.2rem;
    padding: var(--space-sm) var(--space-md);
    text-align: center;
  }

  .tbox-hero-v3--database .tbox-hero-v3__panel-row span,
.tbox-hero-v3--database .tbox-hero-v3__panel-row strong {
    font-size: var(--fs-xs);
  }

  .tbox-ah-database-engines .tbox-pillar-row,
.tbox-ah-database-engines .tbox-pillar-row--4,
.tbox-ah-database-decision .tbox-standard-features-grid--decision {
    grid-template-columns: 1fr;
  }

  .tbox-ah-database-engines .tbox-engine-facts li {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }

  .tbox-ah-engine-facts {
    justify-self: start;
    width: 100%;
  }

  .tbox-ah-engine-facts span {
    grid-template-columns: 1fr;
    gap: 0.15rem;
  }
}
/* stylelint-enable no-duplicate-selectors */

/* App Hosting · /database/ · editorial dark engine spec band */
.tbox-db-spec-band {
  --db-divider: color-mix(in srgb, #fff 8%, transparent);
  position: relative;
  overflow: hidden;
  padding: var(--space-4xl) 0 calc(var(--space-4xl) + var(--space-lg));
  color: var(--text-on-dark);
  background: var(--brand-hero-dark);
}

.tbox-db-spec-band::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--brand-hero-end) 50%, transparent) 100%);
}

.tbox-db-spec-band__inner {
  position: relative;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 var(--space-xl);
}

.tbox-db-spec-band__kicker {
  margin: 0 0 var(--space-2xs);
  font-family: var(--tbox-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--warm-1);
}

.tbox-db-spec-band__title {
  margin: 0 0 var(--space-xs);
  color: var(--neutral-white);
  font-size: clamp(1.5rem, 3vw, 2rem);
  /* POLISH fix E: match the other section H2s on /app-hosting/database/. */
  font-weight: 700;
  letter-spacing: -0.01em;
}

.tbox-db-spec-band__lead {
  margin: 0 0 var(--space-2xl);
  max-width: var(--prose-measure-default);
  color: var(--text-on-dark-muted);
  font-size: 1rem;
  line-height: 1.6;
}

.tbox-db-spec-band__lead a {
  color: var(--warm-1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.tbox-db-spec-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--db-divider);
}

.tbox-db-spec-cat {
  padding: var(--space-xl) 0 var(--space-xs);
  border-bottom: 1px solid var(--db-divider);
  font-family: var(--tbox-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: color-mix(in srgb, #fff 50%, transparent);
}

.tbox-db-spec-cat:first-child {
  padding-top: 0;
}

.tbox-db-spec-row {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(120px, 1fr) minmax(160px, 2fr);
  gap: var(--space-md) var(--space-2xl);
  align-items: baseline;
  padding: var(--space-lg) 0;
  border-bottom: 1px solid var(--db-divider);
}

.tbox-db-spec-row__name {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--neutral-white);
}

.tbox-db-spec-row__name small {
  display: block;
  margin-top: 2px;
  font-family: var(--tbox-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: 0.6875rem; /* micro-UI: intentional literal */
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--warm-1);
}

.tbox-db-spec-row__mode {
  font-family: var(--tbox-font-mono, ui-monospace, "JetBrains Mono", monospace);
  font-size: var(--fs-xs);
  letter-spacing: 0.02em;
  color: var(--text-on-dark-muted);
}

.tbox-db-spec-row__fit {
  font-size: 0.9375rem; /* 15px copy step: intentional literal */
  line-height: 1.5;
  color: var(--text-on-dark-soft);
}

.tbox-db-spec-band__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-lg);
  margin-top: var(--space-2xl);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--db-divider);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);
}

.tbox-db-spec-band__footer a {
  color: var(--warm-1);
  text-decoration: none;
  font-weight: 500;
}

.tbox-db-spec-band__footer a:hover {
  text-decoration: underline;
}

@media (max-width: 799px) {
  .tbox-db-spec-row {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }
}

#request-quote {
  scroll-margin-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 64px) + var(--space-sm));
}

#request-quote .tbox-pc-quote-form {
  max-width: 56rem;
  margin-inline: auto;
  margin-top: var(--space-lg);
}

/* Button ink: shared filled button roles use white ink on darker fills. */
#content :where(
  .tbox-btn:not(:is(.tbox-btn-outline, .tbox-btn-ghost, .tbox-btn-ghost-dark, .tbox-btn-outline-dark, .tbox-btn-on-dark, .tbox-btn-secondary, .tbox-btn-accent, .tbox-btn-accent-outline, [data-cta-tier="secondary"])),
  .tbox-btn-primary,
  .tbox-btn[data-cta-tier="primary"]
) {
  color: var(--tbox-btn-primary-text);
}

#content :where(
  .tbox-btn-accent,
  .tbox-btn.tbox-btn-accent,
  #hourly-vps-configurator #tbox-hvps-configure-btn,
  #hourly-vps-configurator .tbox-hvps-chat-assist__btn
) {
  color: var(--tbox-btn-accent-text);
}

#content :where(
  .tbox-feature-matrix__header,
  .tbox-feature-matrix__header > span,
  .tbox-feature-matrix__category,
  .tbox-mini-note,
  .tbox-pillar-stacks__tag
) {
  color: var(--text-secondary);
}

#content :where(
  .tbox-ahcalc-v3-mobile-overview__label,
  .tbox-ahcalc-v3-layer-chip__meta,
  .tbox-code-block__muted,
  .lb-compare-note,
  .lb-compare-table th,
  .tbox-ahcalc-pricing-card__tab,
  .tbox-ahcalc-cl-range-card__desc,
  .tbox-standard-features-grid .tbox-card:not(.tbox-card--industrial) .tbox-card__body p,
  .tbox-ah-cicd-platforms .tbox-ah-cicd-platform__name,
  .tbox-java-jdk-row,
  .tbox-social-proof-bar,
  .tbox-social-proof-bar__content,
  .tbox-social-proof-bar__content span,
  .tbox-social-proof-bar__content strong,
  .tbox-social-proof-bar__content a,
  .tbox-idle-badge,
  .tbox-security-tier__badge,
  .tbox-pillar__meta strong
) {
  color: var(--text-primary);
}

#content .tbox-social-proof-bar .tbox-social-proof-bar__content,
#content .tbox-social-proof-bar .tbox-social-proof-bar__content span {
  color: color-mix(in srgb, var(--text-inverse) 94%, transparent);
}

#content .tbox-social-proof-bar .tbox-social-proof-bar__content strong,
#content .tbox-social-proof-bar .tbox-social-proof-bar__content a {
  color: var(--text-inverse);
}

#content .tbox-social-proof-bar .tbox-social-proof-bar__content a {
  border-bottom-color: color-mix(in srgb, var(--text-inverse) 42%, transparent);
}

#content .tbox-social-proof-bar .tbox-social-proof-bar__content a:hover {
  border-bottom-color: color-mix(in srgb, var(--text-inverse) 72%, transparent);
}

#content .tbox-sa-rating-badge__text,
#content .tbox-sa-rating-badge__text strong {
  /* Theme-aware: light mode renders on light hero/trust surfaces, dark mode
     renders on dark hero badge (~rgba(137,166,199,0.18)). The previous
     hard-coded slate-900 failed ~2.72:1 in dark; --text-primary clears AA. */
  color: var(--text-primary);
}

#content .tbox-home-hero__rating .tbox-sa-rating-badge__text {
  color: var(--text-inverse);
}

#content .tbox-status-badge--included {
  color: var(--success-text);
}

#content .tbox-status-badge--addon {
  color: var(--state-warning-text);
}

#content :where(
  .tbox-pillar__link,
  .tbox-video-carousel__tab,
  .tbox-video-carousel__caption a,
  .tbox-scenario-table__link,
  .lb-usecase-card__meta,
  .lb-col-rec__badge,
  .k8s-scaling-tier__label,
  .tbox-php-release-ledger dt,
  .tbox-extras-strip__item .tbox-bento-included-badge,
  .tbox-pillar-card__link,
  .tbox-detail-card__link,
  .dbcl-tab,
  #tbox-hvps-backup-total-cost,
  .tbox-cvps-api-audit__log span,
  .tbox-hvps-disk-unit-btn
) {
  color: var(--brand-primary-text);
}

#content :where(
  .tbox-hero-v3__subtitle em,
  .tbox-hero-v3__panel-row span,
  .tbox-hero-v3__flow span,
  .tbox-dotnet-hero__release span,
  .tbox-go-hero__flow span,
  .tbox-php-hero__flow span,
  .tbox-nodejs-hero__flow span,
  .tbox-docker-hero__proof-row span,
  .tbox-hero-v3__ledger dt,
  .tbox-dotnet-hero__specs dt,
  .tbox-java-hero__specs dt,
  .tbox-ruby-runtime-list dt,
  .tbox-go-hero__specs dt,
  .tbox-go-hero__specs dd,
  .tbox-ruby-hero__panel-head span,
  .tbox-security-hero .tbox-hero-v3__panel-head strong,
  .dbcl-hero__diagram-row strong,
  .bkp-hero__panel .tbox-hero-step-list em,
  .tbox-hero-terminal__bar,
  .tbox-hero-terminal__tab
) {
  color: var(--text-inverse);
}

#content .tbox-code-block-wrap .tbox-code-block__bar,
#content :is(
  .tbox-cvps-api-matrix,
  .tbox-protocol-matrix,
  .tbox-cvps-security-overview,
  .tbox-cvps-vol-ops-matrix
) .tbox-feature-matrix__header,
#content .dbcl-hero__diagram-row strong,
#content .tbox-security-hero .tbox-hero-v3__panel-head strong,
#content .tbox-pricing-table thead th {
  background: var(--brand-primary-deep);
  color: var(--text-inverse);
}

#content :is(
  .tbox-cvps-api-matrix,
  .tbox-protocol-matrix,
  .tbox-cvps-security-overview,
  .tbox-cvps-vol-ops-matrix
) .tbox-feature-matrix__header span {
  color: var(--text-inverse);
}

/* Phase 1.1 — Bento CTA contrast contract.
   The orange `--brand-cta` surface fails WCAG AA against white text (~2.3:1).
   Switch the orange-bg variant (default `.tbox-bento-cta-card` without
   `--surface`) to `--brand-cta-ink-strong` (slate ink, ~7.5:1).
   Dark-surface variants (storage-node, cvps-security-policy) re-assert
   white text below or via their own higher-specificity rules. */
#content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) {
  color: var(--brand-cta-ink-strong);
}

#content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) :where(.tbox-bento-cta-card__text, h3, h4, p, a:not(.tbox-btn)),
#content .tbox-container .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) .tbox-bento-cta-card__text :where(h4, p) {
  color: var(--brand-cta-ink-strong);
}

#content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) > .tbox-btn {
  color: var(--brand-cta-ink-strong);
}

#content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) > :where(.tbox-btn + .tbox-btn, .tbox-chat-btn) {
  color: var(--brand-cta-ink-strong);
  border-color: color-mix(in srgb, var(--brand-cta-ink-strong) 55%, transparent);
}

#content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) > :where(.tbox-btn + .tbox-btn, .tbox-chat-btn):hover {
  background: color-mix(in srgb, var(--brand-cta-ink-strong) 10%, transparent);
  border-color: var(--brand-cta-ink-strong);
}

:root[data-theme="dark"] #content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) :where(.tbox-bento-cta-card__text, h3, h4, p),
:root[data-theme="dark"] #content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) > :where(.tbox-btn + .tbox-btn, .tbox-chat-btn) {
  color: var(--brand-cta-ink-strong);
}

:root[data-theme="dark"] #content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) > :where(.tbox-btn + .tbox-btn, .tbox-chat-btn) {
  border-color: color-mix(in srgb, var(--brand-cta-ink-strong) 55%, transparent);
}

#content #stacks .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text p a[href="/app-hosting/security/"] {
  color: var(--brand-cta-ink-strong);
  text-decoration-color: color-mix(in srgb, var(--brand-cta-ink-strong) 60%, transparent);
}

:root[data-theme="dark"] #content :is(#stacks, #disk-volume-ops) .tbox-card.tbox-bento-cta-card :where(.tbox-bento-cta-card__text, h4, p),
:root[data-theme="dark"] #content :is(#stacks, #disk-volume-ops) .tbox-card.tbox-bento-cta-card > .tbox-btn {
  color: var(--brand-cta-ink-strong);
}

#content #define-environments-as-code-automate-the-rest .tbox-card.tbox-bento-cta-card,
#content #define-environments-as-code-automate-the-rest .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text h4,
#content #define-environments-as-code-automate-the-rest .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text p,
#content #define-environments-as-code-automate-the-rest .tbox-card.tbox-bento-cta-card > .tbox-btn {
  color: var(--brand-cta-ink-strong);
}

/* Re-assert white text on dark-surface bento variants (Storage and CVPS Security
   set their own dark backgrounds; CVPS Security has its own higher-specificity
   block below — Storage needs an explicit re-assert at equal specificity to
   the orange-bg block, winning by source order, because its earlier class-
   only selectors lose to the orange-bg `#content`-prefixed block above). */
#content .tbox-card.tbox-bento-cta-card.tbox-storage-node-cta,
#content .tbox-card.tbox-bento-cta-card.tbox-storage-node-cta :where(.tbox-bento-cta-card__text, h3, h4, p, a:not(.tbox-btn)),
#content .tbox-card.tbox-bento-cta-card.tbox-storage-node-cta > :where(.tbox-btn + .tbox-btn, .tbox-chat-btn) {
  color: var(--text-inverse);
}

#content .tbox-card.tbox-bento-cta-card.tbox-storage-node-cta > :where(.tbox-btn + .tbox-btn, .tbox-chat-btn) {
  border-color: color-mix(in srgb, var(--text-inverse) 36%, transparent);
}

:root[data-theme="dark"] #content .tbox-storage-node-cta__actions .tbox-chat-btn {
  color: var(--text-inverse);
}

#content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card,
#content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card :where(.tbox-bento-cta-card__text, h4, p),
#content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text h4,
#content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text p,
#content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card > .tbox-btn[data-cta-tier="secondary"] {
  color: var(--text-inverse);
}

#content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card > .tbox-btn[data-cta-tier="primary"] {
  color: var(--text-inverse);
}


#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);
}

/* Trust modules appear on light cards and permanently dark slim sections. */
#content .tbox-trust-module :where(.tbox-quote-location, .tbox-quote-source, .tbox-trust-attrib) {
  color: var(--text-secondary);
}

:root[data-theme="dark"] #content .tbox-trust-module :where(.tbox-quote-location, .tbox-quote-source, .tbox-trust-attrib),
#content .tbox-band--trust .tbox-trust-module :where(.tbox-quote-location, .tbox-quote-source, .tbox-trust-attrib),
#content .tbox-trust-section--slim .tbox-trust-module--compact :where(.tbox-quote-location, .tbox-quote-source, .tbox-trust-attrib) {
  color: var(--text-inverse);
}

:root[data-theme="dark"] #content :where(.tbox-quote-author, .tbox-quote blockquote) {
  color: var(--text-inverse);
}

/* CTA buttons vary between role and surface; scope ink to the actual role. */
#content .tbox-cta-section__actions .tbox-btn[data-cta-tier="secondary"]:not(.tbox-btn-on-dark),
#content .tbox-mobile-sticky-cta-actions .tbox-btn:is(.tbox-btn-outline, .tbox-btn-ghost, .tbox-btn-ghost-dark, .tbox-btn-outline-dark) {
  color: var(--tbox-btn-secondary-text);
}

#content :is(
  #hero-section.tbox-hero-v3,
  .tbox-hero-v3,
  .tbox-section--dark,
  .tbox-cta-section.tbox-cta-section--blueprint,
  .tbox-trust-section--slim,
  .tbox-band--trust
) .tbox-cta-section__actions .tbox-btn[data-cta-tier="secondary"]:not(.tbox-btn-on-dark),
#content :is(
  #hero-section.tbox-hero-v3,
  .tbox-hero-v3,
  .tbox-section--dark,
  .tbox-cta-section.tbox-cta-section--blueprint,
  .tbox-trust-section--slim,
  .tbox-band--trust
) .tbox-btn:is(.tbox-btn-outline, .tbox-btn-outline-dark) {
  color: var(--tbox-btn-outline-text-dark);
}

/* Outline-dark IaaS modifier — filled orange-gradient CTA to match the Cloud
VPS product card. Selector matches the 2-ID/3-class surface-ink color
override above (line ~48600) so later source order wins; the 2-ID weight
also outranks the hero :hover reset, so no separate :hover rule is needed. */
#content #hero-section.tbox-hero-v3 .tbox-btn.tbox-btn-outline-dark--iaas {
  /* !important required to override the `.tbox-btn[data-cta-tier="secondary"]`
     transparent-fill rule (site-palette.css ~L4778), which the home hero
     markup also carries on this element. */
  background: var(--tbox-btn-accent-bg) !important;
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text);
}

#content #hero-section.tbox-hero-v3 .tbox-btn.tbox-btn-outline-dark--iaas:hover,
#content #hero-section.tbox-hero-v3 .tbox-btn.tbox-btn-outline-dark--iaas:focus-visible {
  background: var(--tbox-btn-accent-bg-hover) !important;
  border-color: var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text-hover, var(--brand-cta-ink));
}

:root[data-theme="dark"] #content .tbox-cta-section__actions .tbox-btn[data-cta-tier="secondary"]:not(.tbox-btn-on-dark),
:root[data-theme="dark"] #content .tbox-mobile-sticky-cta-actions .tbox-btn:is(.tbox-btn-outline, .tbox-btn-ghost, .tbox-btn-ghost-dark, .tbox-btn-outline-dark) {
  color: var(--tbox-btn-outline-text-dark);
}

#content .tbox-mobile-sticky-cta-actions .tbox-btn:not(:is(.tbox-btn-outline, .tbox-btn-ghost, .tbox-btn-ghost-dark, .tbox-btn-outline-dark, .tbox-btn-secondary, .tbox-btn-accent, .tbox-btn-accent-outline)) {
  color: var(--tbox-btn-primary-text);
}

#content .tbox-cta-section__actions .tbox-btn.tbox-btn-on-dark,
#content .tbox-mobile-sticky-cta-actions .tbox-btn:is(.tbox-btn-accent, .tbox-btn-on-dark),
#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);
}

/* App Hosting calculator sidebar: filled orange-gradient CTA + plain-text help link. */
#content .tbox-ahcalc-cta-btn {
  background: var(--tbox-btn-accent-bg);
  border: 1px solid var(--tbox-btn-accent-border);
  color: var(--tbox-btn-accent-text);
}

#content .tbox-ahcalc-cta-btn:hover,
#content .tbox-ahcalc-cta-btn:focus-visible {
  background: var(--tbox-btn-accent-bg-hover);
  border-color: var(--tbox-btn-accent-border);
}

#content .tbox-ahcalc-pricing-card .tbox-ahcalc-chat-link {
  color: var(--brand-primary-text);
}

/* Trust-section CTA: primary follows the shared blue contract; ghost stays
   light on dark cards. */
:root[data-theme="dark"] #content .tbox-trust-section__cta .tbox-btn {
  color: var(--text-inverse);
}

:root[data-theme="dark"] body #content #trust-section .tbox-trust-section__cta > a.tbox-btn-primary,
:root[data-theme="dark"] body #content #trust-section .tbox-trust-section__cta > a.tbox-btn[data-cta-tier="primary"] {
  color: var(--tbox-btn-primary-text);
}

:root[data-theme="dark"] body #content #trust-section .tbox-trust-section__cta > a.tbox-btn-ghost[href="/case-studies/"] {
  color: var(--text-inverse);
}

:root[data-theme="dark"] #content .tbox-trust-badge-row .tbox-sa-rating-badge__text,
:root[data-theme="dark"] #content .tbox-trust-badge-row .tbox-sa-rating-badge__text strong {
  color: var(--text-inverse);
}

/* 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 #hero-section.tbox-hourly-cloud-vps .tbox-fleet-stage-btn[data-active],
.tbox-home-fleet .tbox-fleet-stage-btn[data-active] {
  background: var(--cloud-vps-fleet-monitor-body-bg);
  color: var(--cloud-vps-fleet-monitor-strong-text);
  border-bottom-color: var(--brand-cta);
}

body #pricing-section.tbox-pricing-section.tbox-hourly-cloud-vps #hourly-vps-configurator .tbox-config-card--backups #tbox-hvps-backup-total-cost,
body #hero-section.tbox-hourly-cloud-vps ~ #managed-services-section .tbox-pillar-card__link,
#content #checklist-section .tbox-paas-compare__sticky-col,
#content #compatible-ci-cd-platforms.tbox-band--code .tbox-ah-cicd-platforms .tbox-ah-cicd-platform__name {
  color: var(--text-primary);
}

#content #compatible-ci-cd-platforms.tbox-band--code .tbox-ah-cicd-platforms .tbox-ah-cicd-platform[data-platform="bitbucket"] .tbox-ah-cicd-platform__name {
  color: var(--text-inverse);
}

:root[data-theme="dark"] body #hero-section.tbox-hourly-cloud-vps .tbox-fleet-stage-btn[data-active],
:root[data-theme="dark"] .tbox-home-fleet .tbox-fleet-stage-btn[data-active] {
  background: var(--cloud-vps-fleet-monitor-body-bg);
  color: var(--cloud-vps-fleet-monitor-strong-text);
  border-bottom-color: var(--brand-cta);
}

#content .tbox-cvps-vol-diagram :where(.tbox-cvps-vol-diagram__vm-name, .tbox-cvps-vol-diagram__vm-state),
#content .tbox-cvps-vol-section .tbox-cvps-vol-diagram .tbox-cvps-vol-diagram__vm :where(.tbox-cvps-vol-diagram__vm-name, .tbox-cvps-vol-diagram__vm-state) {
  color: var(--text-primary);
}

:root[data-theme="dark"] #content .tbox-cvps-vol-diagram :where(.tbox-cvps-vol-diagram__vm-name, .tbox-cvps-vol-diagram__vm-state) {
  color: var(--text-inverse);
}

#content .tbox-cvps-vol-section .tbox-cvps-vol-diagram .tbox-cvps-vol-diagram__vm--inactive {
  opacity: 1;
}

body #content section.tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text h4,
body #content section.tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text p,
body #content section.tbox-cvps-security-policy .tbox-container > .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) .tbox-bento-cta-card__text h4,
body #content section.tbox-cvps-security-policy .tbox-container > .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) .tbox-bento-cta-card__text p,
body #content .tbox-card.tbox-bento-cta-card:has(> a[href*="id=349"]) .tbox-bento-cta-card__text h4,
body #content .tbox-card.tbox-bento-cta-card:has(> a[href*="id=349"]) .tbox-bento-cta-card__text p {
  color: var(--text-inverse);
}

/* Lighthouse contrast hardening: keep computed colors aligned with painted surfaces. */
#content .tbox-hero-terminal__bar,
#content .tbox-hero-terminal__tab {
  color: var(--text-inverse);
}

#content .tbox-hero-v3--security .tbox-hero-v3__panel-head strong {
  color: var(--text-inverse);
}

/* Phase 1.1 — Dark-mode bento CTA contrast (companion to the light-mode
   flip earlier in this file). `:where()` wraps the variant exclusion so
   later variant overrides (.tbox-storage-node-cta, .tbox-docker-action-card,
   .tbox-ah-autoscale-action-card, .tbox-ah-portability-toolkit ..., and
   .tbox-cvps-security-policy ...) keep their tied-or-greater specificity
   and win for their dark-bg surfaces. */
:root[data-theme="dark"] #content .tbox-card.tbox-bento-cta-card:where(:not(.tbox-bento-cta-card--surface)),
:root[data-theme="dark"] #content .tbox-card.tbox-bento-cta-card:where(:not(.tbox-bento-cta-card--surface)) :where(.tbox-bento-cta-card__text, h3, h4, p) {
  color: var(--brand-cta-ink-strong);
}

#content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) > .tbox-btn,
#content .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) > .tbox-btn:hover {
  color: var(--brand-cta-ink);
}

#content .tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn + .tbox-btn,
#content .tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn + .tbox-btn:hover {
  color: var(--brand-primary-text);
}

:root[data-theme="dark"] #content .tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn + .tbox-btn,
:root[data-theme="dark"] #content .tbox-bento-cta-card.tbox-bento-cta-card--surface > .tbox-btn + .tbox-btn:hover {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] #content .tbox-docker-action-card.tbox-bento-cta-card,
:root[data-theme="dark"] #content .tbox-ah-portability-toolkit .tbox-card.tbox-bento-cta-card {
  color: var(--text-primary);
}

:root[data-theme="dark"] #content .tbox-docker-action-card.tbox-bento-cta-card .tbox-bento-cta-card__text :where(h3, h4),
:root[data-theme="dark"] #content .tbox-ah-portability-toolkit .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text :where(h3, h4) {
  color: var(--text-primary);
}

:root[data-theme="dark"] #content .tbox-docker-action-card.tbox-bento-cta-card .tbox-bento-cta-card__text p,
:root[data-theme="dark"] #content .tbox-ah-portability-toolkit .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text p {
  color: var(--text-secondary);
}

:root[data-theme="dark"] #content .tbox-docker-action-card.tbox-bento-cta-card > .tbox-btn,
:root[data-theme="dark"] #content .tbox-ah-portability-toolkit .tbox-card.tbox-bento-cta-card > .tbox-btn {
  color: var(--text-inverse);
}

:root[data-theme="dark"] #content .tbox-docker-action-card.tbox-bento-cta-card > .tbox-btn + .tbox-btn,
:root[data-theme="dark"] #content .tbox-ah-portability-toolkit .tbox-card.tbox-bento-cta-card > .tbox-btn + .tbox-btn {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] #content .tbox-ah-autoscale-action-card.tbox-bento-cta-card,
:root[data-theme="dark"] #content .tbox-storage-node-cta.tbox-bento-cta-card {
  color: var(--text-primary);
}

:root[data-theme="dark"] #content .tbox-ah-autoscale-action-card.tbox-bento-cta-card .tbox-bento-cta-card__text :where(h3, h4),
:root[data-theme="dark"] #content .tbox-storage-node-cta.tbox-bento-cta-card .tbox-bento-cta-card__text :where(h3, h4) {
  color: var(--text-primary);
}

:root[data-theme="dark"] #content .tbox-ah-autoscale-action-card.tbox-bento-cta-card .tbox-bento-cta-card__text p,
:root[data-theme="dark"] #content .tbox-storage-node-cta.tbox-bento-cta-card .tbox-bento-cta-card__text p {
  color: var(--text-secondary);
}

:root[data-theme="dark"] #content .tbox-ah-autoscale-action-card.tbox-bento-cta-card > .tbox-btn {
  color: var(--brand-cta-ink);
}

:root[data-theme="dark"] #content .tbox-storage-node-cta.tbox-bento-cta-card .tbox-btn {
  color: var(--text-inverse);
}

:root[data-theme="dark"] #content .tbox-ah-autoscale-action-card.tbox-bento-cta-card > .tbox-btn + .tbox-btn,
:root[data-theme="dark"] #content .tbox-storage-node-cta.tbox-bento-cta-card .tbox-btn + .tbox-btn {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] #content .bkp-section--workflows .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) :is(h3, h4),
:root[data-theme="dark"] #content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) :is(h3, h4) {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] #content .bkp-section--workflows .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) p,
:root[data-theme="dark"] #content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card:not(.tbox-bento-cta-card--surface) p {
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] #content .bkp-section--workflows .tbox-bento-cta-card > .tbox-btn[data-cta-tier="primary"] {
  color: var(--tbox-btn-primary-text);
}

:root[data-theme="dark"] #content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card > .tbox-btn[data-cta-tier="primary"] {
  color: var(--tbox-btn-primary-text);
}

:root[data-theme="dark"] #content .bkp-section--workflows .tbox-bento-cta-card > .tbox-btn[data-cta-tier="secondary"],
:root[data-theme="dark"] #content .tbox-cvps-security-policy .tbox-card.tbox-bento-cta-card > .tbox-btn[data-cta-tier="secondary"] {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] body #content section#recovery-workflows.bkp-section--workflows .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text h4 {
  color: var(--text-inverse);
}

:root[data-theme="dark"] body #content section#recovery-workflows.bkp-section--workflows .tbox-card.tbox-bento-cta-card .tbox-bento-cta-card__text p {
  color: var(--surface-glass-88);
}

/* Hero media cleanup: real product evidence or centered copy, no synthetic side panels. */
#content .tbox-hero-v3--media .tbox-hero-v3__inner,
#content .tbox-hero-v3--media .tbox-app-hosting-hero__split,
#content .tbox-hero-v3--media .tbox-cloud-vps-hero__split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.9fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  align-items: center;
  max-width: min(1180px, 92vw);
  margin-inline: auto;
  text-align: left;
}

#content .tbox-app-hosting-hero.tbox-hero-v3--media .tbox-hero-v3__inner,
#content #hero-section.tbox-hourly-cloud-vps.tbox-hero-v3--media .tbox-hero-v3__inner {
  display: block;
  max-width: min(1180px, 92vw);
}

/* k8s media hero: tighten the column gap (the shared --media rule above sets 64px,
   which reads too loose against the compact k8s copy). Gap only — columns and the
   <=1024px single-column override stay intact. */
#content .tbox-k8s-hero.tbox-hero-v3--media .tbox-hero-v3__inner {
  gap: clamp(var(--space-2xl), 4vw, var(--space-3xl));
}

#content .tbox-hero-v3--media :is(
  .tbox-hero-v3__copy,
  .tbox-app-hosting-hero__text,
  .tbox-cloud-vps-hero__text,
  .tbox-java-hero__content,
  .tbox-dotnet-hero__content,
  .tbox-nodejs-hero__copy,
  .tbox-python-hero__copy,
  .tbox-go-hero__copy,
  .tbox-ruby-hero__copy,
  .tbox-php-hero__copy,
  .tbox-wp-hero__copy,
  .tbox-cvps-vol-hero__copy
) {
  max-width: var(--prose-measure-wide);
}

#content .tbox-hero-media {
  display: grid;
  gap: var(--space-sm);
  width: min(100%, 34rem);
  margin: 0;
  justify-self: end;
}

#content .tbox-hero-media__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 18%, var(--brand-primary-light) 10%);
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--gray-950) 74%, var(--brand-primary-dark) 26%);
  box-shadow: 0 18px 34px color-mix(in srgb, var(--gray-950) 20%, transparent);
}

#content .tbox-hero-media__video,
#content .tbox-hero-media__image {
  display: block;
  width: 100%;
  height: auto;
  background: var(--gray-950);
}

#content .tbox-hero-media__video {
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

#content .tbox-hero-media__image {
  max-height: min(32rem, 56vh);
  object-fit: contain;
}

#content .tbox-hero-media__caption {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 76%, transparent);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: center;
}

#content .tbox-hero-v3--centered .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: 1fr;
  justify-items: center;
  max-width: min(900px, 92vw);
  margin-inline: auto;
  text-align: center;
}

#content .tbox-hero-v3--centered :is(
  .tbox-hero-v3__copy,
  .tbox-dotnet-hero__content,
  .tbox-paas-vps-hero__copy,
  .tbox-cvps-api-hero__copy,
  .tbox-cvps-security-hero__copy,
  .tbox-cvps-vol-hero__copy,
  .bkp-hero__copy
) {
  display: grid;
  justify-items: center;
  max-width: var(--prose-measure-wide);
  margin-inline: auto;
  text-align: center;
}

#content .tbox-hero-v3--centered .tbox-hero-v3__subtitle,
#content .tbox-hero-v3--media .tbox-hero-v3__subtitle {
  text-wrap: pretty;
}

#content .tbox-hero-v3--centered .tbox-hero-v3__cta-row {
  justify-content: center;
}

@media (width <= 900px) {
  #content .tbox-hero-v3--media .tbox-hero-v3__inner,
  #content .tbox-hero-v3--media .tbox-app-hosting-hero__split,
  #content .tbox-hero-v3--media .tbox-cloud-vps-hero__split {
    grid-template-columns: 1fr;
    justify-items: center;
    text-align: center;
  }

  #content .tbox-hero-v3--media :is(
    .tbox-hero-v3__copy,
    .tbox-app-hosting-hero__text,
    .tbox-cloud-vps-hero__text,
    .tbox-java-hero__content,
    .tbox-nodejs-hero__copy,
    .tbox-python-hero__copy,
    .tbox-go-hero__copy,
    .tbox-ruby-hero__copy,
    .tbox-php-hero__copy,
    .tbox-wp-hero__copy,
    .tbox-cvps-vol-hero__copy
  ) {
    display: grid;
    justify-items: center;
    text-align: center;
  }

  #content .tbox-hero-media {
    justify-self: center;
    width: min(100%, 32rem);
  }

  #content .tbox-hero-v3--media .tbox-hero-v3__cta-row {
    justify-content: center;
  }
}

@media (width <= 600px) {
  #content .tbox-hero-media {
    width: min(100%, 22rem);
  }

  #content .tbox-hero-media__caption {
    font-size: var(--fs-xs);
  }
}

/* Quick-path decision strip + cross-page typography baselines. */
#content .tbox-quick-path {
  --quick-path-border: color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
}

#content .tbox-quick-path__intro {
  max-width: 760px;
}

#content .tbox-quick-path__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(14px, 2vw, 20px);
  margin-top: var(--space-xl);
  padding: clamp(16px, 2.2vw, 24px);
  border: 1px solid var(--quick-path-border);
  border-radius: var(--radius-lg);
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 12%);
}

#content .tbox-quick-path__matrix {
  margin-top: clamp(var(--space-lg), 2.4vw, var(--space-xl));
  table-layout: fixed;
}

#content .tbox-quick-path__matrix caption {
  padding-block: var(--space-sm-plus);
}

#content .tbox-quick-path__matrix .tbox-decision-matrix__head:first-child,
#content .tbox-quick-path__matrix .tbox-decision-matrix__row > th[scope="row"] {
  width: 22%;
}

#content .tbox-quick-path__matrix .tbox-decision-matrix__head:nth-child(3),
#content .tbox-quick-path__matrix .tbox-decision-matrix__cell:nth-child(3) {
  width: 22%;
}

#content .tbox-quick-path__matrix .tbox-decision-matrix__head:nth-child(4),
#content .tbox-quick-path__matrix .tbox-decision-matrix__cell:nth-child(4) {
  width: 18%;
}

#content .tbox-quick-path__card.tbox-card--decision {
  min-height: 0;
  border-color: color-mix(in srgb, var(--brand-primary) 14%, var(--border-light));
}

#content .tbox-quick-path__card .tbox-card__body {
  gap: 10px;
}

#content .tbox-quick-path__card p {
  max-width: var(--prose-measure-default);
}

#content .tbox-quick-path__actions {
  margin-top: var(--space-lg);
}

#content .tbox-quick-path__card.is-selected.tbox-card--decision {
  border-color: var(--brand-primary);
  box-shadow: inset 0 0 0 1px var(--brand-primary), var(--shadow-md);
  background: color-mix(in srgb, var(--brand-primary) 6%, var(--surface-card));
}

#content .tbox-quick-path__card.tbox-card--featured .tbox-decision-eyebrow {
  color: var(--brand-cta-text-deep);
}

:root[data-theme="dark"] #content .tbox-quick-path__card.tbox-card--featured .tbox-decision-eyebrow {
  color: var(--brand-highlight);
}

#content .tbox-quick-path__rec-pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  background: color-mix(in srgb, var(--brand-highlight) 14%, transparent);
  color: var(--brand-highlight);
  border: 1px solid color-mix(in srgb, var(--brand-highlight) 30%, transparent);
  border-radius: var(--radius-full);
  vertical-align: middle;
  margin-left: var(--space-2xs);
  letter-spacing: 0.02em;
}

.tbox-quick-path__handoff {
  margin-top: var(--space-md);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.tbox-quick-path__handoff[hidden] {
  display: none;
}

#content :where(
  .tbox-feature-matrix__text,
  .tbox-mini-note,
  .tbox-section__desc,
  .tbox-bento-cta-card__text,
  .tbox-ui-proof__caption,
  .tbox-detail-card__text,
  .tbox-pillar-card,
  .tbox-card--decision
) :where(p, li) {
  max-width: 72ch;
}

#content :where(.tbox-feature-matrix__text) {
  max-width: var(--prose-measure-default);
}

#content :where(.tbox-mini-note) {
  max-width: var(--prose-measure-wide);
}

#content :where(
  .tbox-chip,
  [class*="__chip"]:not([class*="__chips"]),
  [class*="-chip"]:not([class*="-chips"]),
  [class*="__badge"],
  [class*="-badge"]:not(.tbox-branding-badges):not(.tbox-trust-badge-row):not(.grecaptcha-badge)
) {
  min-height: 30px;
  padding-block: max(6px, 0.42em);
}

#content :where(
  .tbox-feature-matrix__icon:not([data-feature-cat]),
  .tbox-detail-card__icon,
  .tbox-pillar__icon--cyan,
  .tbox-detail-card__icon--cyan,
  .tbox-ah-timeline-badge,
  .tbox-ahcalc-v3-node-badge
) {
  color: color-mix(in srgb, var(--brand-primary) 72%, var(--text-inverse));
}

#content :where(.tbox-pillar__accent--cyan) {
  background: color-mix(in srgb, var(--brand-primary) 42%, transparent);
}

@media (width <= 640px) {
  #content .tbox-quick-path {
    padding-block: var(--space-2xl);
  }

  #content .tbox-quick-path__grid {
    padding: var(--space-md);
  }

  #content .tbox-quick-path__matrix {
    margin-top: var(--space-md-plus);
  }

  #content .tbox-quick-path__matrix caption {
    position: absolute;
    inline-size: 1px;
    block-size: 1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  #content .tbox-quick-path__matrix .tbox-decision-matrix__head,
  #content .tbox-quick-path__matrix .tbox-decision-matrix__cell,
  #content .tbox-quick-path__matrix .tbox-decision-matrix__cell:nth-child(3),
  #content .tbox-quick-path__matrix .tbox-decision-matrix__cell:nth-child(4),
  #content .tbox-quick-path__matrix .tbox-decision-matrix__row > th[scope="row"] {
    width: 100%;
  }

  #content .tbox-quick-path__matrix .tbox-decision-matrix__row {
    padding-block: var(--space-sm);
  }

  #content .tbox-quick-path__matrix .tbox-decision-matrix__row > th[scope="row"] {
    padding: var(--space-sm-plus) var(--space-md) var(--space-2xs);
  }

  #content .tbox-quick-path__matrix .tbox-decision-matrix__cell {
    padding: var(--space-2xs) var(--space-md);
    line-height: var(--lh-normal);
  }

  #content .tbox-quick-path__matrix .tbox-decision-matrix__cell[data-label]::before {
    display: inline;
    margin-right: var(--space-xs);
    margin-bottom: 0;
  }
}

/* =========================================================================
   Phase 2 (Track 1) — Shared primitives
   Source contract: PLAN_CRITIQUE.md §6
   Authoring guide: wp-content/themes/tbox-2022/inc/page-contracts.md
   ----------------------------------------------------------------------
   These primitives replace freelance markup on Cloud VPS Add-on,
   Capability, and (selectively) Runtime archetypes. Every rule below uses
   existing tokens; dark mode is the public surface, with light fallback.
   ========================================================================= */

/* §6.11 — Tighter prose modifier. Default .tbox-prose stays at 75ch
   (upper bound of 65–75ch); pages where scanning matters more than reading
   density (matrix intros, mechanism leads) opt into --tight for 65ch via
   the existing --width-prose-narrow token. */
.tbox-prose--tight { max-width: var(--width-prose-narrow); }

/* -------------------------------------------------------------------------
   §6.5 — tbox-mobile-row-labels utility
   Visually-hidden row labels that surface only when a comparison/decision
   table collapses to stacked rows on narrow viewports. Hooks into the
   existing .sr-only convention so nothing new is invented for screen
   readers; a separate visible label appears only at <=640px.
   ------------------------------------------------------------------------- */
.tbox-mobile-row-labels { display: none; }

@media (width <= 640px) {
  .tbox-mobile-row-labels {
    display: inline;
    margin-right: var(--space-xs);
    font-weight: var(--fw-semibold);
    color: var(--text-secondary);
  }

  :root[data-theme="dark"] .tbox-mobile-row-labels {
    color: var(--text-on-dark-muted);
  }
}

/* -------------------------------------------------------------------------
   §6.1 — tbox-decision-matrix
   Replacement for "four equal cards" quick-path on Capability and Cloud
   VPS Add-on archetypes. Real <table> markup; locked column order is
   Use this when | Setup effort | Operational control | Next step.
   Optional --featured row marks one recommended path; optional risk-note
   cell carries an inline caveat without adding a sixth column.
   ------------------------------------------------------------------------- */
.tbox-decision-matrix {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-base);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.tbox-decision-matrix caption {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  caption-side: top;
}

.tbox-decision-matrix__head {
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: 0;
  text-transform: none;
  color: var(--text-secondary);
  background: var(--surface-subtle);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.tbox-decision-matrix__row > th[scope="row"],
.tbox-decision-matrix__cell {
  padding: var(--space-lg);
  vertical-align: top;
  border-top: 1px solid var(--border-light);
  font-weight: var(--fw-regular, 400);
  color: var(--text-primary);
  text-align: left;
}

.tbox-decision-matrix__row > th[scope="row"] {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-snug);
  width: 26%;
}

.tbox-decision-matrix__row:first-of-type > th[scope="row"],
.tbox-decision-matrix__row:first-of-type > .tbox-decision-matrix__cell {
  border-top: none;
}

.tbox-decision-matrix__row--featured > th[scope="row"],
.tbox-decision-matrix__row--featured > .tbox-decision-matrix__cell {
  background: color-mix(in srgb, var(--brand-cta) 6%, var(--surface-base));
  position: relative;
}

/* Markup contract: the recommended row carries
     <span class="tbox-decision-matrix__badge">Recommended</span>
   as the first child of its <th scope="row">. The label is real HTML so it
   ships through search, translation, structured-data scrapers, and screen
   readers (CSS generated content does not). */
.tbox-decision-matrix__badge {
  display: inline-block;
  margin-right: var(--space-sm);
  margin-bottom: var(--space-xs);
  padding: var(--space-2xs) var(--space-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  color: var(--brand-cta-ink);
  background: var(--brand-cta);
  border-radius: var(--radius-2xs);
  letter-spacing: 0;
}

/* Risk-note cell: in-cell caveat under a "Use this when" entry. Stays
   inside the locked column set; never spawns a sixth column. */
.tbox-decision-matrix__risk-note {
  display: block;
  margin-top: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
  background: var(--surface-subtle);
  border-radius: var(--radius-xs);
}

.tbox-decision-matrix__row a:not(.tbox-btn):not(.tbox-btn-outline):not(.tbox-btn-ghost) {
  color: var(--brand-primary-text);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.tbox-decision-matrix__row a:not(.tbox-btn):not(.tbox-btn-outline):not(.tbox-btn-ghost):hover {
  color: var(--brand-primary-deep);
}

.tbox-decision-matrix__row a:not(.tbox-btn):not(.tbox-btn-outline):not(.tbox-btn-ghost):focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-border);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-xs);
}

.tbox-decision-matrix__row a:not(.tbox-btn):not(.tbox-btn-outline):not(.tbox-btn-ghost):focus:not(:focus-visible) {
  outline: none;
}

:root[data-theme="dark"] .tbox-decision-matrix {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-12);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-decision-matrix__head {
  background: var(--surface-glass-06);
  color: var(--text-on-dark-strong);
  border-bottom-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-decision-matrix__row > th[scope="row"],
:root[data-theme="dark"] .tbox-decision-matrix__cell {
  border-top-color: var(--surface-glass-10);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-decision-matrix__row > th[scope="row"] {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-decision-matrix__row--featured > th[scope="row"],
:root[data-theme="dark"] .tbox-decision-matrix__row--featured > .tbox-decision-matrix__cell {
  background: color-mix(in srgb, var(--brand-cta) 14%, var(--surface-glass-06));
}

:root[data-theme="dark"] .tbox-decision-matrix__risk-note {
  background: var(--surface-glass-08);
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-decision-matrix__row a:not(.tbox-btn):not(.tbox-btn-outline):not(.tbox-btn-ghost) {
  color: var(--brand-primary);
}

@media (width <= 640px) {
  .tbox-decision-matrix,
  .tbox-decision-matrix thead,
  .tbox-decision-matrix tbody,
  .tbox-decision-matrix tr,
  .tbox-decision-matrix th,
  .tbox-decision-matrix td {
    display: block;
    width: 100%;
  }

  .tbox-decision-matrix thead {
    position: absolute;
    inset: -9999px auto auto -9999px;
  }

  .tbox-decision-matrix__row {
    border-top: 1px solid var(--border-light);
    padding: var(--space-md) 0;
  }

  .tbox-decision-matrix__row:first-of-type {
    border-top: none;
  }

  .tbox-decision-matrix__row > th[scope="row"] {
    width: 100%;
    padding-bottom: var(--space-xs);
    border-top: none;
  }

  .tbox-decision-matrix__cell {
    padding: var(--space-xs) var(--space-lg) var(--space-xs);
    border-top: none;
  }

  .tbox-decision-matrix__cell[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
  }

  :root[data-theme="dark"] .tbox-decision-matrix__cell[data-label]::before {
    color: var(--text-on-dark-muted);
  }

  :root[data-theme="dark"] .tbox-decision-matrix__row {
    border-top-color: var(--surface-glass-10);
  }
}

/* -------------------------------------------------------------------------
   §6.2 — tbox-reliability-blueprint
   Signature mechanism artifact. One shape, four contents (deploy, recovery,
   boundary, lifecycle, workflow). Numbered stages with a single cyan thread
   wiring them; per-stage label, outcome, and prerequisite/risk. The thread
   is the ONE cyan signal in the band, per cyan-budget rule.
   ------------------------------------------------------------------------- */
.tbox-reliability-blueprint {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: var(--space-lg-plus);
  margin: 0;
  padding: var(--space-lg) 0;
  list-style: none;
  counter-reset: tbox-blueprint;
}

/* The cyan thread — a single 2px line behind the row that visually wires
   the numbered stages into one mechanism. Decorative-but-functional:
   communicates "these stages run as one ordered process". */
.tbox-reliability-blueprint::before {
  content: "";
  position: absolute;
  left: var(--space-2xl);
  right: var(--space-2xl);
  top: calc(var(--space-lg) + 18px);
  height: 2px;
  background: linear-gradient(to right,
    transparent 0%,
    var(--brand-primary) 8%,
    var(--brand-primary) 92%,
    transparent 100%);
  z-index: 0;
  pointer-events: none;
}

.tbox-reliability-blueprint__stage {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  counter-increment: tbox-blueprint;
}

.tbox-reliability-blueprint__stage::before {
  content: counter(tbox-blueprint);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin-bottom: var(--space-xs);
  font-family: var(--tbox-font-mono, ui-monospace, monospace);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--text-inverse);
  background: var(--brand-primary-dark);
  border-radius: var(--radius-cap, 9999px);
  font-variant-numeric: tabular-nums;
}

.tbox-reliability-blueprint__stage-label {
  display: block;
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--text-primary);
}

.tbox-reliability-blueprint__stage-outcome {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
}

.tbox-reliability-blueprint__stage-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-md);
  margin-top: var(--space-xs);
  padding-top: var(--space-sm);
  border-top: 1px dashed var(--border-light);
  font-size: var(--fs-sm);
  color: var(--text-secondary);
}

.tbox-reliability-blueprint__stage-meta > * {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-variant-numeric: tabular-nums;
}

.tbox-reliability-blueprint__stage-meta strong {
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
}

/* Risk/prerequisite line — quiet, not alarming. */
.tbox-reliability-blueprint__stage-risk {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  color: var(--text-secondary);
}

/* Variant modifiers carry no separate styling by default — content type
   alone does not change the shape. Pages or routes may layer scoped
   overrides via .tbox-reliability-blueprint--{deploy,recovery,boundary,
   lifecycle,workflow} when the surrounding band needs a tonal shift. */

:root[data-theme="dark"] .tbox-reliability-blueprint__stage {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-reliability-blueprint__stage::before {
  background: var(--brand-primary-dark);
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-reliability-blueprint__stage-label,
:root[data-theme="dark"] .tbox-reliability-blueprint__stage-outcome {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-reliability-blueprint__stage-meta {
  border-top-color: var(--surface-glass-10);
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-reliability-blueprint__stage-meta strong {
  color: var(--text-on-dark-strong);
}

:root[data-theme="dark"] .tbox-reliability-blueprint__stage-risk {
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-reliability-blueprint::before {
  background: linear-gradient(to right,
    transparent 0%,
    var(--brand-primary) 8%,
    var(--brand-primary) 92%,
    transparent 100%);
}

@media (width <= 768px) {
  .tbox-reliability-blueprint {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  /* Mobile thread becomes a vertical rail. */
  .tbox-reliability-blueprint::before {
    left: calc(var(--space-lg) + 18px);
    right: auto;
    top: var(--space-lg);
    bottom: var(--space-lg);
    width: 2px;
    height: auto;
    background: linear-gradient(to bottom,
      transparent 0%,
      var(--brand-primary) 8%,
      var(--brand-primary) 92%,
      transparent 100%);
  }

  :root[data-theme="dark"] .tbox-reliability-blueprint::before {
    background: linear-gradient(to bottom,
      transparent 0%,
      var(--brand-primary) 8%,
      var(--brand-primary) 92%,
      transparent 100%);
  }
}

/* -------------------------------------------------------------------------
   §6.3 — tbox-wrong-fit-strip
   Quiet, contracted "Use App Hosting when… / Use Cloud VPS when…" rail.
   Two opposing recommendations + one contextual link. NEVER warning red
   or alarming orange — the buyer is being routed, not warned.
   ------------------------------------------------------------------------- */
.tbox-wrong-fit-strip {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: var(--space-lg);
  align-items: stretch;
  margin: 0;
  padding: var(--space-lg) var(--space-xl);
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.tbox-wrong-fit-strip__rec {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  color: var(--text-primary);
}

.tbox-wrong-fit-strip__rec strong {
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}

.tbox-wrong-fit-strip__rec + .tbox-wrong-fit-strip__rec {
  border-left: 1px solid var(--border-light);
  padding-left: var(--space-lg);
}

.tbox-wrong-fit-strip__action {
  display: inline-flex;
  align-items: center;
  align-self: center;
  gap: var(--space-xs);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
  white-space: nowrap;
}

.tbox-wrong-fit-strip__action:hover {
  color: var(--brand-primary-deep);
}

:root[data-theme="dark"] .tbox-wrong-fit-strip {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-12);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-wrong-fit-strip__rec,
:root[data-theme="dark"] .tbox-wrong-fit-strip__rec strong {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-wrong-fit-strip__rec + .tbox-wrong-fit-strip__rec {
  border-left-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-wrong-fit-strip__action {
  color: var(--brand-primary);
}

@media (width <= 768px) {
  .tbox-wrong-fit-strip {
    grid-template-columns: 1fr;
    gap: var(--space-md);
    padding: var(--space-lg);
  }

  .tbox-wrong-fit-strip__rec + .tbox-wrong-fit-strip__rec {
    border-left: none;
    border-top: 1px solid var(--border-light);
    padding-left: 0;
    padding-top: var(--space-md);
  }

  :root[data-theme="dark"] .tbox-wrong-fit-strip__rec + .tbox-wrong-fit-strip__rec {
    border-top-color: var(--surface-glass-12);
  }

  .tbox-wrong-fit-strip__action {
    align-self: flex-start;
    white-space: normal;
  }
}

/* -------------------------------------------------------------------------
   §6.4 — tbox-glossary-strip
   Compact horizontal strip near the first occurrence of dense technical
   vocabulary on a page. Each term carries a short plain-language outcome.
   Block-level companion to the existing <abbr class="tbox-glossary">
   tooltip pattern (sibling, not extension — they share intent and mono
   font convention but no CSS rules).
   ------------------------------------------------------------------------- */
.tbox-glossary-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md) var(--space-lg);
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}

.tbox-glossary-strip__term {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin: 0;
  color: var(--text-secondary);
}

.tbox-glossary-strip__term dt,
.tbox-glossary-strip__term-label {
  display: inline;
  margin: 0;
  padding: 0;
  font-weight: var(--fw-bold);
  font-family: var(--tbox-font-mono, ui-monospace, monospace);
  color: var(--text-primary);
}

.tbox-glossary-strip__term dd,
.tbox-glossary-strip__term-desc {
  display: inline;
  margin: 0;
  padding: 0;
  color: var(--text-secondary);
}

.tbox-glossary-strip__term dt::after,
.tbox-glossary-strip__term-label::after {
  content: " = ";
  color: var(--text-muted);
  font-family: inherit;
}

:root[data-theme="dark"] .tbox-glossary-strip {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-glossary-strip__term dt,
:root[data-theme="dark"] .tbox-glossary-strip__term-label {
  color: var(--text-on-dark-strong);
}

:root[data-theme="dark"] .tbox-glossary-strip__term dd,
:root[data-theme="dark"] .tbox-glossary-strip__term-desc,
:root[data-theme="dark"] .tbox-glossary-strip__term {
  color: var(--text-on-dark-muted);
}

@media (width <= 640px) {
  .tbox-glossary-strip {
    flex-direction: column;
    gap: var(--space-sm);
  }
}

/* -------------------------------------------------------------------------
   §6.5 — tbox-spec-table semantic primitive
   Real <table> markup replacement for the div/span pseudo-tables flagged
   by category X. Mobile collapses to row-stacked label-prefixed cells via
   the .tbox-mobile-row-labels utility above.

   Naming note: the canonical class name is `tbox-spec-table`; the older
   `tbox-comparison-table` name is reserved for the HVPS / calculator
   pricing comparison tables (see ~line 24295 onward) and must not be
   reused by Track 3+ content rollouts.
   ------------------------------------------------------------------------- */
.tbox-spec-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  background: var(--surface-base);
}

.tbox-spec-table caption {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  caption-side: top;
}

.tbox-spec-table thead th {
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: 0;
  color: var(--text-secondary);
  background: var(--surface-subtle);
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--border-light);
  vertical-align: bottom;
}

.tbox-spec-table tbody th[scope="row"] {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-light);
  background: var(--surface-row-header);
  vertical-align: top;
}

.tbox-spec-table tbody td {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-light);
  vertical-align: top;
  color: var(--text-primary);
}

.tbox-spec-table tbody tr:first-child th,
.tbox-spec-table tbody tr:first-child td {
  border-top: none;
}

:root[data-theme="dark"] .tbox-spec-table {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-12);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-spec-table thead th {
  background: var(--surface-glass-08);
  color: var(--text-on-dark-strong);
  border-bottom-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-spec-table tbody th[scope="row"] {
  background: var(--surface-glass-06);
  color: var(--text-inverse);
  border-top-color: var(--surface-glass-10);
}

:root[data-theme="dark"] .tbox-spec-table tbody td {
  border-top-color: var(--surface-glass-10);
  color: var(--text-on-dark);
}

@media (width <= 640px) {
  .tbox-spec-table,
  .tbox-spec-table caption,
  .tbox-spec-table thead,
  .tbox-spec-table tbody,
  .tbox-spec-table tr,
  .tbox-spec-table th,
  .tbox-spec-table td {
    display: block;
    width: 100%;
  }

  .tbox-spec-table thead {
    position: absolute;
    inset: -9999px auto auto -9999px;
  }

  .tbox-spec-table tbody tr {
    border-top: 1px solid var(--border-light);
    padding: var(--space-md) 0;
  }

  .tbox-spec-table tbody tr:first-child {
    border-top: none;
  }

  .tbox-spec-table tbody th[scope="row"] {
    background: transparent;
    padding: 0 var(--space-lg) var(--space-xs);
    border-top: none;
  }

  .tbox-spec-table tbody td {
    border-top: none;
    padding: var(--space-xs) var(--space-lg);
  }

  .tbox-spec-table tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
  }

  :root[data-theme="dark"] .tbox-spec-table tbody td[data-label]::before {
    color: var(--text-on-dark-muted);
  }

  :root[data-theme="dark"] .tbox-spec-table tbody tr {
    border-top-color: var(--surface-glass-10);
  }

  :root[data-theme="dark"] .tbox-spec-table tbody th[scope="row"] {
    background: transparent;
  }
}

/* -------------------------------------------------------------------------
   §6.6 — tbox-hero-v3--mobile-compact
   Mobile-only override that brings the first decision into the first
   viewport on 390px screens. Caps mobile hero height, surfaces one proof
   cue OR one path-choice link before scroll, tightens line-height.
   Layered on top of the existing Hero V3 token via the modifier class.
   ------------------------------------------------------------------------- */
@media (width <= 640px) {
  .tbox-hero-v3.tbox-hero-v3--mobile-compact {
    min-height: auto;
    padding-block: var(--space-2xl) var(--space-lg);
  }

  .tbox-hero-v3.tbox-hero-v3--mobile-compact .tbox-hero-v3__title {
    font-size: clamp(1.625rem, 6vw, 2rem);
    line-height: var(--lh-tight);
    margin-bottom: var(--space-sm);
  }

  .tbox-hero-v3.tbox-hero-v3--mobile-compact .tbox-hero-v3__subtitle {
    font-size: var(--fs-base);
    line-height: var(--lh-normal);
    margin-bottom: var(--space-md);
  }

  .tbox-hero-v3.tbox-hero-v3--mobile-compact .tbox-hero-v3__cta-row {
    gap: var(--space-sm);
  }

  /* Hide secondary decorative panels on the compact variant; the proof
     cue or path-choice link is the only thing competing for the first
     viewport with the hero CTA. */
  .tbox-hero-v3.tbox-hero-v3--mobile-compact .tbox-hero-v3__panel:not(.tbox-hero-v3__panel--proof):not(.tbox-hero-v3__panel--keep-mobile),
  .tbox-hero-v3.tbox-hero-v3--mobile-compact .tbox-hero-v3__decoration {
    display: none;
  }

  .tbox-hero-v3.tbox-hero-v3--mobile-compact .tbox-hero-v3__panel--proof {
    padding: var(--space-md);
    margin-top: var(--space-md);
  }
}

/* -------------------------------------------------------------------------
   §6.7 — Neutral cross-family aliases
   Canonical class names for shared technical patterns. During the Track 3+
   migration window, pages mount BOTH classes (canonical + legacy) so the
   existing legacy rules continue to do the visual work. Canonical-only
   adoption is intentionally NOT supported: the PHP and Node.js release
   ledgers carry incompatible row layouts, and the deploy-pipeline BEM
   sub-elements (__num, __step, __title, __desc, __arrow) still resolve
   only against the legacy ah-prefixed root class. Per-page rollouts in
   Tracks 3 and 4 collapse each route onto a single legacy class plus
   the canonical alias; the dual-class contract retires when each page
   converts at the source.

   See `inc/page-contracts.md` for the full alias table.
   `tbox-protocol-matrix` is the single exception — it shares
   .tbox-feature-matrix__* sub-elements, so the existing :is() alias
   (defined elsewhere in this file) lets pages mount the canonical
   class alone.
   ------------------------------------------------------------------------- */

/* Both canonical class names (tbox-deploy-pipeline,
   tbox-runtime-release-ledger) require dual-class HTML during migration:

     class="tbox-deploy-pipeline tbox-ah-deploy-pipeline"
     class="tbox-runtime-release-ledger tbox-php-release-ledger"
     class="tbox-runtime-release-ledger tbox-nodejs-release-ledger"

   The legacy classes carry incompatible layout rules (PHP ledger uses a
   3-column row layout that would clash with the Node.js row layout when
   both apply via :is()), so pages cannot adopt only the canonical class.
   Per-page rollout in Tracks 3 and 4 will collapse each route onto a
   single legacy class plus the canonical alias; the legacy rules are
   kept as the visual source of truth until that work lands. */

/* -------------------------------------------------------------------------
   §6.8 — Video accessibility scaffold

   Per video, choose exactly one of three options based on what the video
   actually communicates:

     1. <track kind="captions" srclang="en" src="..."> when the video has
        narration or meaningful audio. Ship real captions, not empty WebVTT.
     2. <track kind="descriptions" srclang="en" src="..."> when the visual
        sequence carries information but there is no audio.
     3. Sibling transcript/walkthrough <details class="tbox-ui-proof__steps">
        block — required when the video is the dominant proof for a section.

   Default, when uncertain, is option 3. A muted, controls-only product clip
   (the dominant Togglebox pattern) qualifies as visual-only and ships with
   the transcript pattern below. The pattern is reused by hero-media captions
   and proof-figure captions; the rules below cover both surfaces.
   ------------------------------------------------------------------------- */
.tbox-ui-proof__steps {
  margin-top: var(--space-md);
  padding: var(--space-sm) var(--space-md);
  border: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent 30%);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface-subtle) 60%, transparent 40%);
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
  text-align: start;
}

.tbox-ui-proof__steps > summary {
  list-style: none;
  cursor: pointer;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  padding-block: var(--space-2xs);
}

.tbox-ui-proof__steps > summary::-webkit-details-marker { display: none; }

.tbox-ui-proof__steps > summary::after {
  content: "▾";
  margin-left: var(--space-xs);
  font-size: 0.85em; /* relative: intentional em */
  color: var(--accent-quiet);
  transition: transform var(--duration-base) var(--ease-base);
  display: inline-block;
}

.tbox-ui-proof__steps[open] > summary::after { transform: rotate(180deg); }

.tbox-ui-proof__steps > summary:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-2xs);
}

.tbox-ui-proof__steps :is(ol, ul) {
  margin: var(--space-sm) 0 0;
  padding-inline-start: var(--space-lg-plus);
}

.tbox-ui-proof__steps :is(ol, ul) > li + li { margin-top: var(--space-2xs); }

/* Dark-surface variant for transcript blocks (hero-media captions and
   any other dark-context proof surface). Apply the modifier explicitly on
   the markup; the descendant-selector form has been retired. */
.tbox-ui-proof__steps--on-dark {
  border-color: var(--text-inverse-18);
  background: color-mix(in srgb, var(--surface-dark) 50%, transparent 50%);
  color: var(--text-on-dark);
}

.tbox-ui-proof__steps--on-dark > summary {
  color: color-mix(in srgb, var(--text-inverse) 86%, transparent 14%);
}

@media (prefers-reduced-motion: reduce) {
  .tbox-ui-proof__steps > summary::after { transition: none; }
}

/* -------------------------------------------------------------------------
   §6.9 — One-trigger-per-figure rule

   A proof figure surfaces the dialog through ONE control, not two. Pages
   that previously rendered both `.tbox-ui-proof__trigger` (image-button)
   and `.tbox-ui-proof__expand` ("Open full view" text button) opt into
   image-only mode by setting `data-trigger-mode="image-only"` on the
   `.tbox-ui-proof` figure root. The expand control is then removed from
   pointer, focus, and AT order via `display: none`.

   Pages that prefer the text-only mode swap the image `<button>` element
   for a non-interactive `<div>` wrapper at the markup level (Tracks 3-5
   migration); CSS cannot retract a `<button>` from focus order without
   side effects, so that variant is markup-led, not CSS-led.

   When both controls must coexist (rare, e.g. when the image preview
   itself communicates state), accessible names differ and the image
   trigger uses `aria-describedby` to point at the caption text. That
   variant is also markup-led and requires no rule below.
   ------------------------------------------------------------------------- */
.tbox-ui-proof[data-trigger-mode="image-only"] .tbox-ui-proof__expand {
  display: none;
}

/* When a figure has no expansion at all (the image is the proof; no full
   view exists), pages declare `data-trigger-mode="static"` and the
   image-button frame loses the zoom cursor and any hover lift. */
.tbox-ui-proof[data-trigger-mode="static"] .tbox-ui-proof__trigger {
  cursor: default;
}

/* =========================================================================
   End Phase 2 (Track 1) primitives
   ========================================================================= */

/* =========================================================================
   PLAN_CRITIQUE_2 Phase 1 — Foundation defects + readability tokens
   Source contract: PLAN_CRITIQUE_2.md Phase 1, Task 1
   ----------------------------------------------------------------------
   Shared, scoped primitives only. No per-page rules. Each block names the
   exact surfaces it owns and the reason it ships now (not later as polish).
   ========================================================================= */

/* §1.1 — Prose measure utility classes.
   Pair with --prose-measure-narrow|default|wide. Use these to cap shared
   prose surfaces (section description, intro, dense paragraph wrappers,
   table explanatory text, card body copy, shortcode CTA notes) without
   inventing a new max-width per page. */
.tbox-measure-narrow  { max-width: var(--prose-measure-narrow); }
.tbox-measure-default { max-width: var(--prose-measure-default); }
.tbox-measure-wide    { max-width: var(--prose-measure-wide); }

/* §1.2 — Shared description / intro prose contract.
   Caps the recurring section-lead surfaces at the default 68ch measure.
   Component rules can override locally with --tbox-prose-measure or by
   replacing max-width; the goal is a single floor, not a hard ceiling. */
.tbox-section__description,
.tbox-section__intro,
.tbox-section__intro p,
.tbox-section__lead,
.tbox-cta-note,
.tbox-shortcode__cta-note,
.tbox-table__explanation,
.tbox-table-explanation,
.tbox-card__body p,
.tbox-card--content p,
.tbox-fit-honesty__copy {
  max-width: var(--tbox-prose-measure, var(--prose-measure-default));
}

/* §1.3 — Tabular numerals utility.
   Apply to pricing strips, comparison cells, stat rows, calculator totals,
   and any numeric decision surface that needs aligned digits. Component
   rules already setting font-variant-numeric continue to win at higher
   specificity; this utility covers shortcode output and ad-hoc cells. */
.tbox-tabular-nums,
.tbox-num,
[data-numeric="tabular"] {
  font-variant-numeric: tabular-nums;
}

/* §1.4 — Dark-surface leading bump.
   The public site renders with :root[data-theme="dark"]. Light text on
   dark backgrounds reads more comfortably with ~0.05–0.10 more leading.
   Targets body prose surfaces only — not headings or compact cards.
   .tbox-on-dark-prose is included here as an opt-in for surfaces outside
   the named selector set; pair with --line-height-dark-add for tuning. */
:root[data-theme="dark"] :where(
  .tbox-section__description,
  .tbox-section__intro,
  .tbox-section__intro p,
  .tbox-section__lead,
  .tbox-prose,
  .tbox-prose p,
  .tbox-cta-note,
  .tbox-shortcode__cta-note,
  .tbox-table__explanation,
  .tbox-table-explanation,
  .tbox-fit-honesty__copy,
  .tbox-know-before-restore__list,
  .tbox-on-dark-prose
) {
  line-height: var(--lh-on-dark-relaxed);
}

/* =========================================================================
   End PLAN_CRITIQUE_2 Phase 1 primitives
   ========================================================================= */

/* =========================================================================
   PLAN_CRITIQUE_2 Phase 3 — Shared archetype contracts
   Source contract: PLAN_CRITIQUE_2.md Phase 3, Task 5
   ----------------------------------------------------------------------
   Five of the six archetypes reuse existing primitives:
     - Decision-Tree Chooser   → .tbox-decision-matrix
     - Responsibility Ledger   → .tbox-spec-table
     - Lifecycle Timeline      → .tbox-reliability-blueprint--lifecycle
     - Fleet/Host Monitor      → .tbox-fleet-monitor
     - Runtime Contract Panel  → .tbox-runtime-contract (shell, below)
                                 + .tbox-runtime-release-ledger (rows)
   New primitives below cover what was missing:
     §3.1 .tbox-fit-honesty           — wrong-fit signature band
     §3.2 .tbox-recovery-ledger       — Recovery Flow Ledger archetype
     §3.3 .tbox-know-before-restore   — risk panel above destructive ledgers
     §3.3b .tbox-runtime-detail       — eyebrow label for the runtime tab group
     §3.4 .tbox-runtime-contract      — Runtime Contract Panel shell
   ========================================================================= */

/* §3.1 — tbox-fit-honesty
   Full-bleed band that signs each page with one editorial wrong-fit moment.
   No card chrome; 1px hairline separators between rows. Three slots:
   Best fit / Not a fit / Better route. Mobile stacks; desktop renders three
   columns. Copy uses the wide editorial measure so the band scans like a
   single short essay, not a card stack. */
.tbox-fit-honesty {
  margin: 0;
  padding: var(--space-xl) 0;
}

.tbox-fit-honesty__inner {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  align-items: stretch;
}

.tbox-fit-honesty__row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  margin: 0;
  min-width: 0;
}

.tbox-fit-honesty__row + .tbox-fit-honesty__row {
  border-left: 1px solid var(--border-light);
}

.tbox-fit-honesty__label {
  margin: 0;
  font-size: var(--fs-heading-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--text-muted);
}

.tbox-fit-honesty__row[data-fit="best"] .tbox-fit-honesty__label {
  color: var(--brand-primary-text);
}

.tbox-fit-honesty__row[data-fit="not"] .tbox-fit-honesty__label {
  color: var(--text-secondary);
}

.tbox-fit-honesty__row[data-fit="route"] .tbox-fit-honesty__label {
  color: var(--brand-cta-text-deep);
}

.tbox-fit-honesty__copy {
  margin: 0;
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: var(--text-primary);
  max-width: var(--prose-measure-wide);
}

.tbox-fit-honesty__copy strong {
  font-weight: var(--fw-bold);
}

.tbox-fit-honesty__action {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: var(--space-2xs);
  margin-top: auto;
  padding-top: var(--space-2xs);
  min-height: var(--min-touch-target);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  color: var(--brand-primary-text);
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

.tbox-fit-honesty__action:hover {
  color: var(--brand-primary-deep);
}

.tbox-fit-honesty__action:focus-visible {
  outline: var(--focus-outline-width) solid var(--brand-primary);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-2xs);
}

:root[data-theme="dark"] .tbox-fit-honesty__row + .tbox-fit-honesty__row {
  border-left-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-fit-honesty__label {
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-fit-honesty__row[data-fit="best"] .tbox-fit-honesty__label {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-fit-honesty__row[data-fit="route"] .tbox-fit-honesty__label {
  color: var(--brand-highlight);
}

:root[data-theme="dark"] .tbox-fit-honesty__copy {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-fit-honesty__copy strong {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-fit-honesty__action {
  color: var(--brand-primary);
}

@media (width <= 768px) {
  .tbox-fit-honesty {
    padding: var(--space-lg) 0;
  }

  .tbox-fit-honesty__inner {
    grid-template-columns: 1fr;
  }

  .tbox-fit-honesty__row {
    padding: var(--space-md);
  }

  .tbox-fit-honesty__row + .tbox-fit-honesty__row {
    border-left: none;
    border-top: 1px solid var(--border-light);
  }

  :root[data-theme="dark"] .tbox-fit-honesty__row + .tbox-fit-honesty__row {
    border-top-color: var(--surface-glass-12);
  }
}

/* §3.2 — tbox-recovery-ledger
   Real <table> for Recovery Flow Ledger archetype. Required columns:
   Source state | Action | Destination state | Destructive | Billing |
   Operator prerequisite | Better route. Destructive flag and billing
   consequence are visible text on every viewport — never icon-only or
   tooltip-only. Mobile collapses to stacked rows via the shared
   td[data-label]::before pattern. */
.tbox-recovery-ledger {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  background: var(--surface-base);
}

.tbox-recovery-ledger caption {
  padding: var(--space-md) var(--space-lg);
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-secondary);
  caption-side: top;
}

.tbox-recovery-ledger thead th {
  text-align: left;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-base);
  letter-spacing: 0;
  color: var(--text-secondary);
  background: var(--surface-subtle);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 1px solid var(--border-light);
  vertical-align: bottom;
}

.tbox-recovery-ledger tbody th[scope="row"] {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  padding: var(--space-md);
  border-top: 1px solid var(--border-light);
  background: var(--surface-row-header);
  vertical-align: top;
}

.tbox-recovery-ledger tbody td {
  padding: var(--space-sm-mid) var(--space-md);
  border-top: 1px solid var(--border-light);
  vertical-align: top;
  color: var(--text-primary);
}

.tbox-recovery-ledger tbody tr:first-child th,
.tbox-recovery-ledger tbody tr:first-child td {
  border-top: none;
}

/* Visible Destructive flag — required by archetype contract. */
.tbox-recovery-ledger__cell--destructive[data-destructive="yes"] {
  font-weight: var(--fw-bold);
  color: var(--brand-cta-text-deep);
}

.tbox-recovery-ledger__cell--destructive[data-destructive="no"] {
  color: var(--text-secondary);
}

.tbox-recovery-ledger__cell--billing {
  color: var(--text-secondary);
}

:root[data-theme="dark"] .tbox-recovery-ledger {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-12);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-recovery-ledger thead th {
  background: var(--surface-glass-08);
  color: var(--text-on-dark-strong);
  border-bottom-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-recovery-ledger tbody th[scope="row"] {
  background: var(--surface-glass-06);
  color: var(--text-inverse);
  border-top-color: var(--surface-glass-10);
}

:root[data-theme="dark"] .tbox-recovery-ledger tbody td {
  border-top-color: var(--surface-glass-10);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-recovery-ledger__cell--destructive[data-destructive="yes"] {
  color: var(--brand-highlight);
}

:root[data-theme="dark"] .tbox-recovery-ledger__cell--destructive[data-destructive="no"],
:root[data-theme="dark"] .tbox-recovery-ledger__cell--billing {
  color: var(--text-on-dark-muted);
}

@media (width <= 720px) {
  .tbox-recovery-ledger,
  .tbox-recovery-ledger thead,
  .tbox-recovery-ledger tbody,
  .tbox-recovery-ledger tr,
  .tbox-recovery-ledger th,
  .tbox-recovery-ledger td {
    display: block;
    width: 100%;
  }

  .tbox-recovery-ledger thead {
    position: absolute;
    inset: -9999px auto auto -9999px;
  }

  .tbox-recovery-ledger tbody tr {
    border-top: 1px solid var(--border-light);
    padding: var(--space-md) 0;
  }

  .tbox-recovery-ledger tbody tr:first-child {
    border-top: none;
  }

  .tbox-recovery-ledger tbody th[scope="row"] {
    background: transparent;
    padding: 0 var(--space-md) var(--space-xs);
    border-top: none;
    font-size: var(--fs-base);
  }

  .tbox-recovery-ledger tbody td {
    border-top: none;
    padding: var(--space-2xs) var(--space-md);
  }

  .tbox-recovery-ledger tbody td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted);
    margin-bottom: 0.25rem;
  }

  :root[data-theme="dark"] .tbox-recovery-ledger tbody td[data-label]::before {
    color: var(--text-on-dark-muted);
  }

  :root[data-theme="dark"] .tbox-recovery-ledger tbody tr {
    border-top-color: var(--surface-glass-10);
  }
}

/* §3.3 — tbox-know-before-restore
   Required panel above any Recovery Flow Ledger that contains destructive
   rows. Carries the top three risks plus the operator prerequisite for each.
   Quiet alt-tone surface; no decorative chrome. */
.tbox-know-before-restore {
  margin: 0;
  padding: var(--space-md) var(--space-lg);
  background: var(--surface-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.tbox-know-before-restore__heading {
  margin: 0 0 var(--space-sm);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--text-secondary);
}

.tbox-know-before-restore__list {
  margin: 0;
  padding-inline-start: var(--space-lg-plus);
  color: var(--text-primary);
}

.tbox-know-before-restore__list li + li {
  margin-top: var(--space-2xs);
}

:root[data-theme="dark"] .tbox-know-before-restore {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-12);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-know-before-restore__heading {
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-know-before-restore__list {
  color: var(--text-on-dark);
}

/* §3.3b — tbox-runtime-detail
   Eyebrow label above the runtime tab group heading. */
.tbox-runtime-detail__eyebrow {
  color: var(--brand-primary-dark);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  margin: 0 0 var(--space-sm);
}

:root[data-theme="dark"] .tbox-runtime-detail__eyebrow {
  color: var(--brand-primary);
}

/* §3.4 — tbox-runtime-contract
   Shell for Runtime Contract Panel archetype. Two-column desktop layout:
   left column = mechanism contract rows (compose internally with
   .tbox-runtime-release-ledger or a flat <dl>); right column = single proof
   asset (one screenshot OR one code example OR one dashboard reference).
   Mobile collapses to single column with proof below. The leading
   Good fit / Needs review / Use Cloud VPS summary mounts above the panel
   inside .tbox-runtime-contract__summary.

   DEPRECATED ALIAS (PLAN_CRITIQUE_2 Issue 1): The shipped runtimes page uses
   .tbox-runtime-panel + .tbox-runtime-panel__ledger. This .tbox-runtime-contract
   shell and .tbox-runtime-release-ledger rules remain to avoid regressions on
   any in-flight migration; .tbox-runtime-contract__summary is still active
   (used by every runtime panel). Prefer the panel naming for new work. */
.tbox-runtime-contract {
  display: grid;
  gap: var(--space-lg);
}

.tbox-runtime-contract__summary {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--surface-subtle);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.tbox-runtime-contract__summary > div {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  min-width: 0;
}

.tbox-runtime-contract__summary-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
  letter-spacing: 0;
  color: var(--text-muted);
}

.tbox-runtime-contract__summary-value {
  color: var(--text-primary);
}

.tbox-runtime-contract__panel {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  gap: var(--space-xl);
  align-items: start;
}

.tbox-runtime-contract__rows,
.tbox-runtime-contract__proof {
  margin: 0;
  min-width: 0;
}

:root[data-theme="dark"] .tbox-runtime-contract__summary {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-runtime-contract__summary-label {
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-runtime-contract__summary-value {
  color: var(--text-on-dark);
}

@media (width <= 768px) {
  .tbox-runtime-contract__summary {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  .tbox-runtime-contract__panel {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
}

/* =========================================================================
   End PLAN_CRITIQUE_2 Phase 3 archetype contracts
   ========================================================================= */


/* =========================================================================
   PLAN_CRITIQUE_2 Phase 4 Task 8 — Decision-tree hero proof aside
   Shared layout for the 3-5 row mechanism artifact <dl> placed inside the
   hero of decision-tree chooser routes (calc, database, database-clusters,
   loadbalancer, marketplace, storage, wordpress). Mirrors the runtime
   contract __proof pattern (e.g. tbox-docker-hero__proof) but operates
   inside Hero V3 layout instead of legacy hero shells.
   ========================================================================= */

.tbox-ahcalc-hero__proof,
.tbox-database-hero__proof,
.dbcl-hero__proof,
.tbox-marketplace-hero__proof,
.tbox-storage-hero__proof,
.tbox-wp-hero__proof {
  grid-column: 1 / -1;
  align-self: stretch;
  margin-top: 0;
  padding: 0;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 20%, transparent);
  border-radius: var(--radius-12);
  background: color-mix(in srgb, var(--surface-dark) 36%, var(--brand-primary) 6%);
  box-shadow: 0 1px 0 var(--surface-glass-14) inset;
  overflow: hidden;
}

.tbox-wp-hero__proof {
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--brand-primary) 13%, transparent), transparent 48%),
    color-mix(in srgb, var(--surface-dark) 42%, var(--brand-primary) 4%);
}

.tbox-ahcalc-hero__proof {
  margin-top: 0;
}

.tbox-ahcalc-hero__proof dl,
.tbox-database-hero__proof dl,
.dbcl-hero__proof dl,
.tbox-lb-hero__proof dl,
.tbox-marketplace-hero__proof dl,
.tbox-storage-hero__proof dl,
.tbox-wp-hero__proof dl {
  display: grid;
  margin: 0;
  padding: 0;
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  color: var(--text-inverse);
}

.tbox-ahcalc-hero__proof dl > div,
.tbox-database-hero__proof dl > div,
.dbcl-hero__proof dl > div,
.tbox-lb-hero__proof dl > div,
.tbox-marketplace-hero__proof dl > div,
.tbox-storage-hero__proof dl > div,
.tbox-wp-hero__proof dl > div {
  display: grid;
  grid-template-columns: minmax(8rem, 12rem) 1fr;
  gap: var(--space-sm) var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--surface-glass-10);
  text-align: left;
}

.tbox-ahcalc-hero__proof dl > div:first-child,
.tbox-database-hero__proof dl > div:first-child,
.dbcl-hero__proof dl > div:first-child,
.tbox-lb-hero__proof dl > div:first-child,
.tbox-marketplace-hero__proof dl > div:first-child,
.tbox-storage-hero__proof dl > div:first-child,
.tbox-wp-hero__proof dl > div:first-child {
  border-top: 0;
}

.tbox-ahcalc-hero__proof dt,
.tbox-database-hero__proof dt,
.dbcl-hero__proof dt,
.tbox-lb-hero__proof dt,
.tbox-marketplace-hero__proof dt,
.tbox-storage-hero__proof dt,
.tbox-wp-hero__proof dt {
  margin: 0;
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-tight);
  text-transform: uppercase;
}

.tbox-ahcalc-hero__proof dd,
.tbox-database-hero__proof dd,
.dbcl-hero__proof dd,
.tbox-lb-hero__proof dd,
.tbox-marketplace-hero__proof dd,
.tbox-storage-hero__proof dd,
.tbox-wp-hero__proof dd {
  margin: 0;
  color: var(--text-inverse);
  font-weight: var(--fw-medium);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  overflow-wrap: anywhere;
}

.tbox-wp-hero__proof dd {
  color: color-mix(in srgb, var(--text-inverse) 88%, transparent);
}

.tbox-wp-hero__proof dl {
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.tbox-wp-hero__proof dl > div {
  grid-template-columns: 1fr;
  gap: var(--space-2xs);
  padding: clamp(var(--space-sm), 1.2vw, var(--space-md)) var(--space-lg);
  border-top: 0;
  border-left: 1px solid var(--surface-glass-10);
}

.tbox-wp-hero__proof dl > div:first-child {
  border-left: 0;
}

@media (width <= 1100px) {
  .tbox-wp-hero__proof dl {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .tbox-wp-hero__proof dl > div {
    border-top: 1px solid var(--surface-glass-10);
  }

  .tbox-wp-hero__proof dl > div:nth-child(-n+2) {
    border-top: 0;
  }

  .tbox-wp-hero__proof dl > div:nth-child(odd) {
    border-left: 0;
  }
}

@media (width <= 720px) {
  .tbox-ahcalc-hero__proof {
    width: min(100%, 32rem);
    margin-inline: auto;
  }

  .tbox-ahcalc-hero__proof dl > div,
  .tbox-database-hero__proof dl > div,
  .dbcl-hero__proof dl > div,
  .tbox-lb-hero__proof dl > div,
  .tbox-marketplace-hero__proof dl > div,
  .tbox-storage-hero__proof dl > div,
  .tbox-wp-hero__proof dl > div {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
    padding: var(--space-sm) var(--space-md);
    border-left: 0;
    border-top: 1px solid var(--surface-glass-10);
  }

  .tbox-wp-hero__proof dl > div:first-child {
    border-top: 0;
  }

  .tbox-ahcalc-hero__proof dl > div {
    grid-template-columns: minmax(5.25rem, 0.32fr) minmax(0, 1fr);
    gap: var(--space-sm);
    align-items: start;
    padding: var(--space-sm) var(--space-md);
  }

  .tbox-ahcalc-hero__proof dt {
    font-size: var(--fs-2xs);
  }

  .tbox-ahcalc-hero__proof dd {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }
}

/* =========================================================================
   End PLAN_CRITIQUE_2 Phase 4 Task 8
   ========================================================================= */

/* App Hosting database layout refinement */
#content .tbox-ah-database-path.tbox-section {
  padding-block: clamp(var(--space-3xl), 7vw, var(--space-5xl));
}

#content .tbox-hero-v3--database.tbox-hero-v3--centered .tbox-hero-v3__inner {
  grid-template-columns: minmax(0, 0.9fr) minmax(25rem, 0.72fr);
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
  place-items: center stretch;
  max-width: min(1120px, calc(100vw - 3rem));
  text-align: left;
}

#content .tbox-hero-v3--database.tbox-hero-v3--centered .tbox-hero-v3__copy {
  justify-items: start;
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}

#content .tbox-hero-v3--database .tbox-hero-v3__title {
  max-width: 16ch;
}

#content .tbox-hero-v3--database .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
}

#content .tbox-hero-v3--database .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-top: var(--space-sm);
}

#content .tbox-hero-v3--database .tbox-database-hero__proof {
  align-self: center;
  margin-top: 0;
}

#content .tbox-hero-v3--database .tbox-database-hero__proof dl > div {
  grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr);
  padding: clamp(0.85rem, 1.4vw, 1.1rem) clamp(var(--space-md), 1.8vw, var(--space-lg));
}

.tbox-ah-section-kicker {
  width: fit-content;
  margin-bottom: var(--space-sm);
  color: var(--brand-primary-light);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
}

.tbox-ah-database-engines .tbox-container,
.tbox-ah-database-management .tbox-container {
  max-width: min(1080px, calc(100vw - 3rem));
}

.tbox-ah-database-engines .tbox-ah-section-kicker,
.tbox-ah-database-engines .tbox-section__heading,
.tbox-ah-database-engines .tbox-section__desc,
.tbox-ah-database-management .tbox-ah-section-kicker,
.tbox-ah-database-management .tbox-section__heading,
.tbox-ah-database-management .tbox-section__desc {
  margin-inline: 0;
  text-align: left;
}

.tbox-ah-database-management .tbox-section__heading {
  max-width: 23ch;
}

.tbox-ah-database-engines .tbox-feature-matrix__row,
.tbox-ah-database-management .tbox-feature-matrix__row {
  grid-template-columns: minmax(0, 1.2fr) minmax(17rem, 0.72fr) auto;
  gap: clamp(var(--space-md), 2vw, var(--space-xl));
  align-items: center;
}

.tbox-ah-database-management .tbox-feature-matrix__row {
  grid-template-columns: minmax(0, 1fr) auto;
  min-height: 7rem;
}

.tbox-ah-database-engines .tbox-feature-matrix__feature,
.tbox-ah-database-management .tbox-feature-matrix__feature {
  min-width: 0;
}

.tbox-ah-database-engines .tbox-feature-matrix__text,
.tbox-ah-database-management .tbox-feature-matrix__text {
  max-width: var(--prose-measure-default);
}

.tbox-ah-database-engines .tbox-feature-matrix,
.tbox-ah-database-management .tbox-feature-matrix {
  margin-top: clamp(var(--space-lg), 2.5vw, var(--space-2xl));
}

.tbox-ah-database-engines .tbox-feature-matrix__row {
  padding-block: clamp(var(--space-md), 1.8vw, var(--space-lg));
}

.tbox-ah-database-growth__layout,
.tbox-ah-database-cluster__layout {
  display: grid;
  grid-template-columns: minmax(15rem, 0.42fr) minmax(0, 1fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-4xl));
  align-items: start;
}

.tbox-ah-database-growth__intro,
.tbox-ah-database-cluster__intro {
  position: sticky;
  top: calc(var(--header-height, 72px) + var(--space-xl));
}

.tbox-ah-database-growth .tbox-section__heading,
.tbox-ah-database-cluster .tbox-section__heading {
  max-width: 14ch;
}

.tbox-ah-database-growth .tbox-section__desc,
.tbox-ah-database-cluster .tbox-section__desc {
  max-width: 34ch;
}

.tbox-ah-database-growth .tbox-ah-protocol-matrix {
  max-width: none;
  margin-inline: 0;
  margin-top: 0;
}

.tbox-ah-database-growth .tbox-feature-matrix__row {
  grid-template-columns: minmax(10rem, 0.36fr) minmax(0, 1fr);
  align-items: stretch;
}

.tbox-ah-database-growth__link {
  margin-bottom: 0;
  text-align: left;
}

.tbox-ah-database-cluster .tbox-card--feature {
  max-width: none;
  margin-inline: 0;
  margin-top: 0;
}

@media (width <= 980px) {
  #content .tbox-hero-v3--database.tbox-hero-v3--centered .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: min(760px, calc(100vw - 2rem));
    text-align: center;
  }

  #content .tbox-hero-v3--database.tbox-hero-v3--centered .tbox-hero-v3__copy {
    justify-items: center;
    text-align: center;
  }

  #content .tbox-hero-v3--database .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  #content .tbox-hero-v3--database .tbox-database-hero__proof {
    width: min(100%, 36rem);
    margin-inline: auto;
  }

  .tbox-ah-database-engines .tbox-feature-matrix__row {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  .tbox-ah-database-engines .tbox-ah-engine-facts {
    justify-self: stretch;
    width: 100%;
  }

  .tbox-ah-database-growth__layout,
  .tbox-ah-database-cluster__layout {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .tbox-ah-database-growth__intro,
  .tbox-ah-database-cluster__intro {
    position: static;
  }

  .tbox-ah-database-growth .tbox-section__heading,
  .tbox-ah-database-cluster .tbox-section__heading,
  .tbox-ah-database-growth .tbox-section__desc,
  .tbox-ah-database-cluster .tbox-section__desc {
    max-width: var(--prose-measure-default);
  }
}

@media (width <= 640px) {
  #content .tbox-hero-v3--database.tbox-hero-v3--compact {
    padding-block: var(--space-xl-plus) var(--space-lg-plus);
  }

  #content .tbox-hero-v3--database.tbox-hero-v3--centered .tbox-hero-v3__inner {
    gap: var(--space-lg);
  }

  #content .tbox-hero-v3--database .tbox-hero-v3__copy {
    gap: var(--space-md);
  }

  #content .tbox-hero-v3--database .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
  }

  #content .tbox-hero-v3--database .tbox-hero-v3__cta-row {
    gap: var(--space-sm);
    width: 100%;
  }

  #content .tbox-hero-v3--database .tbox-hero-v3__cta-row .tbox-btn,
  #content .tbox-hero-v3--database .tbox-hero-v3__cta-row .tbox-btn-outline {
    width: 100%;
    min-height: 3.25rem;
  }

  #content .tbox-hero-v3--database .tbox-database-hero__proof dl > div {
    display: grid;
    grid-template-columns: minmax(5.5rem, 0.44fr) minmax(0, 1fr);
    gap: var(--space-sm);
    padding: var(--space-xs-plus) var(--space-sm-plus);
    text-align: left;
  }

  #content .tbox-hero-v3--database .tbox-database-hero__proof dt {
    font-size: var(--fs-2xs);
  }

  #content .tbox-hero-v3--database .tbox-database-hero__proof dd {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  .tbox-ah-database-engines .tbox-container,
  .tbox-ah-database-management .tbox-container {
    max-width: min(100%, calc(100vw - 2rem));
  }

  .tbox-ah-database-engines .tbox-section__heading,
  .tbox-ah-database-management .tbox-section__heading {
    max-width: 15ch;
  }

  .tbox-ah-database-engines .tbox-feature-matrix__row,
  .tbox-ah-database-management .tbox-feature-matrix__row {
    gap: var(--space-sm);
    padding: var(--space-md);
  }

  .tbox-ah-database-engines .tbox-feature-matrix__feature,
  .tbox-ah-database-management .tbox-feature-matrix__feature {
    gap: var(--space-sm);
  }

  .tbox-ah-database-engines .tbox-ah-engine-facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .tbox-ah-database-engines .tbox-ah-engine-facts span {
    flex: 1 1 8.5rem;
    grid-template-columns: 1fr;
    gap: 0.15rem;
    padding: var(--space-xs-plus) var(--space-sm);
  }

  .tbox-ah-database-engines .tbox-ah-engine-facts strong {
    font-size: var(--fs-xs);
  }

  .tbox-ah-database-management .tbox-feature-matrix__row,
  .tbox-ah-database-growth .tbox-feature-matrix__row {
    grid-template-columns: 1fr;
  }

  .tbox-ah-database-management .tbox-feature-matrix__row {
    min-height: 0;
  }

  .tbox-ah-database-growth__layout,
  .tbox-ah-database-cluster__layout {
    gap: var(--space-lg);
  }

  .tbox-ah-database-growth .tbox-section__heading,
  .tbox-ah-database-cluster .tbox-section__heading {
    max-width: 16ch;
  }

  .tbox-ah-database-growth .tbox-ah-protocol-matrix,
  .tbox-ah-database-cluster .tbox-card--feature,
  .tbox-ah-database-cluster .tbox-detail-grid,
  .tbox-ah-database-cluster .tbox-bento-cta-card {
    margin-top: 0;
  }
}

/* Hub #supported-runtimes segmented tabs (CSS-only) + .tbox-runtime-icon. */

/* App Hosting two-column hero layout (clustering, database) */
#content :is(.tbox-clustering-hero, .tbox-database-hero).tbox-hero-v3--compact {
  padding-block: clamp(var(--space-2xl), 4vw, var(--space-3xl)) clamp(var(--space-xl-plus), 4vw, var(--space-3xl-plus));
  text-align: center;
}

#content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 3rem);
  align-items: start;
  max-width: min(1080px, calc(100vw - 3rem));
  margin-inline: auto;
  padding-block: 1.6rem;
  text-align: left;
}

#content .tbox-clustering-hero .tbox-clustering-hero__title-col,
#content .tbox-database-hero .tbox-database-hero__title-col {
  min-width: 0;
}

#content .tbox-clustering-hero .tbox-clustering-hero__body-col,
#content .tbox-database-hero .tbox-database-hero__body-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  padding-top: var(--space-sm-plus);
  min-width: 0;
}

#content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__title {
  line-height: 1.05;
  margin: 0;
}

#content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__title em {
  color: var(--brand-cta);
}

#content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  margin: 0;
  color: var(--text-on-dark-muted);
}

#content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__cta-row {
  gap: var(--space-md-plus);
  justify-content: flex-start;
  margin: 0;
}

.tbox-clustering-hero__proof,
.tbox-operations-hero__proof {
  align-self: stretch;
  display: grid;
  align-content: center;
  border: 1px solid color-mix(in srgb, var(--text-inverse) 20%, transparent);
  border-radius: var(--radius-12);
  box-shadow: 0 1px 0 var(--surface-glass-14) inset;
  overflow: hidden;
}

.tbox-clustering-hero__proof {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 42%),
    color-mix(in srgb, var(--surface-dark) 40%, var(--brand-primary) 8%);
}

.tbox-operations-hero__proof {
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--brand-primary) 18%, transparent), transparent 44%),
    color-mix(in srgb, var(--surface-dark) 42%, var(--brand-primary) 9%);
}

.tbox-clustering-hero__proof dl,
.tbox-operations-hero__proof dl {
  display: grid;
  margin: 0;
  padding: 0;
  color: var(--text-inverse);
}

.tbox-clustering-hero__proof dl > div,
.tbox-operations-hero__proof dl > div {
  display: grid;
  grid-template-columns: minmax(5.5rem, 0.3fr) minmax(0, 1fr);
  gap: var(--space-sm) var(--space-lg);
  align-items: start;
  padding: clamp(0.9rem, 1.5vw, 1.2rem) clamp(var(--space-md), 2vw, var(--space-xl));
  border-top: 1px solid var(--surface-glass-10);
}

.tbox-clustering-hero__proof dl > div:first-child,
.tbox-operations-hero__proof dl > div:first-child {
  border-top: 0;
}

.tbox-clustering-hero__proof dt,
.tbox-operations-hero__proof dt {
  margin: 0;
  color: var(--brand-primary);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
}

.tbox-clustering-hero__proof dd,
.tbox-operations-hero__proof dd {
  margin: 0;
  color: var(--text-inverse);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}

#content #fit-honesty.tbox-fit-honesty {
  padding-block: clamp(var(--space-xl), 4vw, var(--space-3xl));
}

#content #fit-honesty .tbox-fit-honesty__inner {
  grid-template-columns: 1fr;
  border-block: 1px solid var(--surface-glass-12);
}

#content #fit-honesty .tbox-fit-honesty__row {
  display: grid;
  grid-template-columns: minmax(8rem, 0.22fr) minmax(0, 1fr);
  gap: var(--space-md) clamp(var(--space-xl), 4vw, var(--space-3xl));
  padding: clamp(var(--space-md), 2vw, var(--space-lg)) 0;
}

#content #fit-honesty .tbox-fit-honesty__row + .tbox-fit-honesty__row {
  border-top: 1px solid var(--surface-glass-12);
  border-left: 0;
}

#content #fit-honesty .tbox-fit-honesty__copy {
  max-width: var(--prose-measure-wide);
}

#content #fit-honesty .tbox-fit-honesty__action {
  grid-column: 2;
  margin-top: calc(var(--space-xs) * -1);
}

#content .lb-stacks-section .lb-usecase-intro {
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(var(--space-md), 2vw, var(--space-xl));
}

#content .lb-stacks-section .lb-usecase-card--recommended {
  justify-content: flex-end;
  min-height: 18rem;
}

#content .lb-stacks-section .lb-usecase-card:not(.lb-usecase-card--recommended) {
  min-height: 8.5rem;
}

#content .lb-stacks-section .lb-compare-header {
  margin-top: clamp(var(--space-xl), 4vw, var(--space-3xl));
}

@media (width <= 980px) {
  #content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: min(760px, calc(100vw - 2rem));
  }

  #content .tbox-clustering-hero .tbox-clustering-hero__body-col,
  #content .tbox-database-hero .tbox-database-hero__body-col {
    padding-top: 0;
  }

  #content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
  }

  .tbox-clustering-hero__proof {
    width: min(100%, 38rem);
    margin-inline: auto;
  }

  #content .lb-stacks-section .lb-usecase-intro {
    grid-template-columns: 1fr;
  }

  #content .lb-stacks-section .lb-usecase-card--recommended,
  #content .lb-stacks-section .lb-usecase-card:not(.lb-usecase-card--recommended) {
    min-height: 0;
  }
}

@media (width <= 640px) {
  #content :is(.tbox-clustering-hero, .tbox-database-hero).tbox-hero-v3--compact {
    padding: var(--space-lg-plus) var(--space-md) var(--space-md);
  }

  #content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__inner {
    gap: var(--space-md);
  }

  #content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__title {
    font-size: clamp(1.85rem, 8vw, 2.4rem);
  }

  #content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
  }

  #content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__cta-row {
    gap: var(--space-sm);
    width: 100%;
    margin-top: 0;
  }

  #content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__cta-row .tbox-btn,
  #content :is(.tbox-clustering-hero, .tbox-database-hero) .tbox-hero-v3__cta-row .tbox-btn-outline {
    width: 100%;
    min-height: 3.25rem;
  }

  .tbox-clustering-hero__proof dl > div,
  .tbox-operations-hero__proof dl > div {
    grid-template-columns: minmax(4.5rem, 0.27fr) minmax(0, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
  }

  .tbox-clustering-hero__proof dd,
  .tbox-operations-hero__proof dd {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  #content #fit-honesty .tbox-fit-honesty__row {
    grid-template-columns: 1fr;
    gap: var(--space-xs);
    padding-block: var(--space-md);
  }

  #content #fit-honesty .tbox-fit-honesty__action {
    grid-column: 1;
    margin-top: 0;
  }
}

/* App Hosting operations layout refinement */
#content .tbox-hero-v3--operations.tbox-hero-v3--compact {
  padding-block: clamp(var(--space-2xl), 6vw, var(--space-5xl)) clamp(var(--space-xl-plus), 5vw, var(--space-4xl));
  text-align: left;
}

#content .tbox-hero-v3--operations.tbox-hero-v3--centered .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(23rem, 0.68fr);
  gap: clamp(var(--space-xl), 5vw, var(--space-4xl));
  align-items: center;
  max-width: min(1120px, calc(100vw - 3rem));
  text-align: left;
}

#content .tbox-hero-v3--operations .tbox-hero-v3__copy {
  justify-items: start;
  min-width: 0;
  max-width: 100%;
  margin-inline: 0;
  text-align: left;
}

#content .tbox-hero-v3--operations .tbox-hero-v3__title {
  max-width: 17ch;
}

#content .tbox-hero-v3--operations .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  margin-inline: 0;
}

#content .tbox-hero-v3--operations .tbox-hero-v3__cta-row {
  justify-content: flex-start;
  margin-top: var(--space-sm);
}

#content #operations-decision.tbox-section {
  padding-block-start: clamp(var(--space-2xl), 5vw, var(--space-4xl));
}

#content #operations-decision .tbox-container,
#content #automation .tbox-container,
#content #autoscaling .tbox-container,
#content #observability .tbox-container {
  max-width: min(1120px, calc(100vw - 3rem));
}

#content #operations-decision .tbox-container {
  display: grid;
  grid-template-columns: minmax(15rem, 0.42fr) minmax(0, 1fr);
  gap: var(--space-md) clamp(var(--space-xl), 5vw, var(--space-4xl));
  align-items: end;
}

#content #operations-decision .tbox-section__heading {
  max-width: 18ch;
}

#content #operations-decision .tbox-section__desc {
  max-width: var(--prose-measure-default);
}

#content #operations-decision .tbox-section__heading,
#content #operations-decision .tbox-section__desc {
  margin: 0;
}

#content #operations-decision .tbox-decision-matrix,
#content #operations-decision .tbox-quick-path__actions {
  grid-column: 1 / -1;
}

#content #operations-decision .tbox-decision-matrix,
#content #automation .tbox-decision-matrix,
#content #autoscaling .tbox-feature-matrix,
#content #observability .tbox-feature-matrix {
  margin-top: clamp(var(--space-lg), 3vw, var(--space-2xl));
}

#content #deploy-blueprint .tbox-container {
  max-width: min(1060px, calc(100vw - 3rem));
}

#content #deploy-blueprint .tbox-section__heading,
#content #deploy-blueprint .tbox-section__desc,
#content #automation .tbox-section__heading,
#content #automation .tbox-section__desc,
#content #autoscaling .tbox-section__heading,
#content #autoscaling .tbox-section__desc,
#content #observability .tbox-section__heading,
#content #observability .tbox-section__desc {
  margin-inline: 0;
  text-align: left;
}

@media (width <= 980px) {
  #content .tbox-hero-v3--operations.tbox-hero-v3--centered .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
    max-width: min(760px, calc(100vw - 2rem));
    text-align: center;
  }

  #content .tbox-hero-v3--operations .tbox-hero-v3__copy {
    justify-items: center;
    text-align: center;
  }

  #content .tbox-hero-v3--operations .tbox-hero-v3__subtitle {
    margin-inline: auto;
  }

  #content .tbox-hero-v3--operations .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-operations-hero__proof {
    width: min(100%, 38rem);
    margin-inline: auto;
  }

  #content #operations-decision .tbox-container {
    grid-template-columns: 1fr;
    align-items: start;
  }
}

@media (width <= 640px) {
  #content .tbox-hero-v3--operations.tbox-hero-v3--compact {
    padding: var(--space-lg-plus) var(--space-md) var(--space-md);
  }

  #content .tbox-hero-v3--operations.tbox-hero-v3--centered .tbox-hero-v3__inner {
    gap: var(--space-md);
  }

  #content .tbox-hero-v3--operations .tbox-hero-v3__title {
    max-width: 13.5ch;
  }

  #content .tbox-hero-v3--operations .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
  }

  #content .tbox-hero-v3--operations .tbox-hero-v3__cta-row {
    gap: var(--space-sm);
    width: 100%;
    margin-top: 0;
  }

  #content .tbox-hero-v3--operations .tbox-hero-v3__cta-row .tbox-btn,
  #content .tbox-hero-v3--operations .tbox-hero-v3__cta-row .tbox-btn-outline {
    width: 100%;
    min-height: 3.25rem;
  }

  #content #operations-decision .tbox-container,
  #content #automation .tbox-container,
  #content #autoscaling .tbox-container,
  #content #observability .tbox-container,
  #content #deploy-blueprint .tbox-container {
    max-width: min(100%, calc(100vw - 2rem));
  }
}

.tbox-runtime-icon {
  display: inline-block;
  flex-shrink: 0;
  width: var(--tbox-runtime-icon-size, 28px);
  height: var(--tbox-runtime-icon-size, 28px);
  background-color: currentColor;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.tbox-runtime-icon[data-runtime="php"] {
  mask-image: url("/wp-content/themes/tbox-2022/assets/images/runtimes/php.svg");
}

.tbox-runtime-icon[data-runtime="nodejs"] {
  mask-image: url("/wp-content/themes/tbox-2022/assets/images/runtimes/nodejs.svg");
}

.tbox-runtime-icon[data-runtime="python"] {
  mask-image: url("/wp-content/themes/tbox-2022/assets/images/runtimes/python.svg");
}

.tbox-runtime-icon[data-runtime="ruby"] {
  mask-image: url("/wp-content/themes/tbox-2022/assets/images/runtimes/ruby.svg");
}

.tbox-runtime-icon[data-runtime="java"] {
  mask-image: url("/wp-content/themes/tbox-2022/assets/images/runtimes/java.svg");
}

.tbox-runtime-icon[data-runtime="go"] {
  mask-image: url("/wp-content/themes/tbox-2022/assets/images/runtimes/go.svg");
}

.tbox-runtime-icon[data-runtime="dotnet"] {
  mask-image: url("/wp-content/themes/tbox-2022/assets/images/runtimes/dotnet.svg");
}

.tbox-runtime-icon[data-runtime="docker"] {
  mask-image: url("/wp-content/themes/tbox-2022/assets/images/runtimes/docker.svg");
}

.tbox-runtime-icon[data-runtime="kubernetes"] {
  mask-image: url("/wp-content/themes/tbox-2022/assets/images/runtimes/kubernetes.svg");
}

.tbox-supported-runtimes {
  padding: clamp(2.5rem, 5vw, 4rem) 0;
}

.tbox-supported-runtimes__head {
  margin-bottom: var(--space-2xl);
}

.tbox-supported-runtimes__eyebrow {
  margin: 0 0 var(--space-sm);
  color: var(--brand-primary-text);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}

.tbox-supported-runtimes__desc {
  max-width: var(--prose-measure-default);
  margin: var(--space-sm) 0 0;
  color: var(--text-secondary);
}

.tbox-supported-runtimes__deep-link {
  margin: var(--space-sm) 0 0;
  font-size: var(--fs-base);
}

.tbox-supported-runtimes__deep-link a {
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, currentColor 50%, transparent);
}

.tbox-supported-runtimes__deep-link a:hover,
.tbox-supported-runtimes__deep-link a:focus-visible {
  border-bottom-color: currentColor;
}

:root[data-theme="dark"] .tbox-supported-runtimes__deep-link a {
  color: var(--brand-primary);
}

.tbox-supported-runtimes__segmented {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: 0;
  margin: 0;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-12) var(--radius-12) 0 0;
  overflow: hidden;
}

.tbox-supported-runtimes__label {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: var(--space-md) var(--space-sm);
  color: var(--text-secondary);
  text-align: center;
  border-right: 1px solid var(--border-light);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.tbox-supported-runtimes__label:last-of-type {
  border-right: 0;
}

.tbox-supported-runtimes__label .tbox-runtime-icon {
  --tbox-runtime-icon-size: 26px;
  color: var(--text-secondary);
  transition: color 160ms ease;
}

.tbox-supported-runtimes__label:hover {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--surface-base) 85%, var(--brand-primary) 6%);
}

.tbox-supported-runtimes__label:hover .tbox-runtime-icon {
  color: var(--brand-primary-text);
}

#tbox-runtime-tab-php:focus-visible ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-php"],
#tbox-runtime-tab-nodejs:focus-visible ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-nodejs"],
#tbox-runtime-tab-python:focus-visible ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-python"],
#tbox-runtime-tab-ruby:focus-visible ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-ruby"],
#tbox-runtime-tab-java:focus-visible ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-java"],
#tbox-runtime-tab-go:focus-visible ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-go"],
#tbox-runtime-tab-dotnet:focus-visible ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-dotnet"],
#tbox-runtime-tab-docker:focus-visible ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-docker"],
#tbox-runtime-tab-kubernetes:focus-visible ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-kubernetes"] {
  outline: 2px solid var(--brand-primary);
  outline-offset: -2px;
}

#tbox-runtime-tab-php:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-php"],
#tbox-runtime-tab-nodejs:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-nodejs"],
#tbox-runtime-tab-python:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-python"],
#tbox-runtime-tab-ruby:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-ruby"],
#tbox-runtime-tab-java:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-java"],
#tbox-runtime-tab-go:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-go"],
#tbox-runtime-tab-dotnet:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-dotnet"],
#tbox-runtime-tab-docker:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-docker"],
#tbox-runtime-tab-kubernetes:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-kubernetes"] {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  box-shadow: inset 0 -2px 0 var(--brand-primary);
}

#tbox-runtime-tab-php:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-php"] .tbox-runtime-icon,
#tbox-runtime-tab-nodejs:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-nodejs"] .tbox-runtime-icon,
#tbox-runtime-tab-python:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-python"] .tbox-runtime-icon,
#tbox-runtime-tab-ruby:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-ruby"] .tbox-runtime-icon,
#tbox-runtime-tab-java:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-java"] .tbox-runtime-icon,
#tbox-runtime-tab-go:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-go"] .tbox-runtime-icon,
#tbox-runtime-tab-dotnet:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-dotnet"] .tbox-runtime-icon,
#tbox-runtime-tab-docker:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-docker"] .tbox-runtime-icon,
#tbox-runtime-tab-kubernetes:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-kubernetes"] .tbox-runtime-icon {
  color: var(--brand-primary-text);
}

.tbox-supported-runtimes__name {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
}

.tbox-supported-runtimes__sub {
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}

.tbox-supported-runtimes__panels {
  position: relative;
  min-height: 22rem;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-top: 0;
  border-radius: 0 0 var(--radius-12) var(--radius-12);
  overflow: hidden;
}

.tbox-supported-runtimes__panel {
  display: none;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--space-2xl);
  align-items: start;
  padding: var(--space-2xl) var(--space-xl);
}

#tbox-runtime-tab-php:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--php,
#tbox-runtime-tab-nodejs:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--nodejs,
#tbox-runtime-tab-python:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--python,
#tbox-runtime-tab-ruby:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--ruby,
#tbox-runtime-tab-java:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--java,
#tbox-runtime-tab-go:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--go,
#tbox-runtime-tab-dotnet:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--dotnet,
#tbox-runtime-tab-docker:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--docker,
#tbox-runtime-tab-kubernetes:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--kubernetes {
  display: grid;
}

@media (width <= 760px) {
  #tbox-runtime-tab-php:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--php,
  #tbox-runtime-tab-nodejs:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--nodejs,
  #tbox-runtime-tab-python:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--python,
  #tbox-runtime-tab-ruby:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--ruby,
  #tbox-runtime-tab-java:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--java,
  #tbox-runtime-tab-go:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--go,
  #tbox-runtime-tab-dotnet:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--dotnet,
  #tbox-runtime-tab-docker:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--docker,
  #tbox-runtime-tab-kubernetes:checked ~ .tbox-supported-runtimes__panels .tbox-supported-runtimes__panel--kubernetes {
    display: block;
  }
}

.tbox-supported-runtimes__panel-heading {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  margin: 0 0 var(--space-md);
  font-family: "Varela Round", Hind, sans-serif;
  font-size: var(--fs-2xl);
}

.tbox-supported-runtimes__panel-heading .tbox-runtime-icon {
  --tbox-runtime-icon-size: 24px;
  color: var(--brand-primary-text);
}

.tbox-supported-runtimes__support {
  display: inline-block;
  margin-bottom: var(--space-md);
  padding: 3px 10px;
  color: var(--success-text);
  background: color-mix(in srgb, var(--success-text) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--success-text) 35%, transparent);
  border-radius: var(--radius-cap);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}

.tbox-supported-runtimes__panel--routing .tbox-supported-runtimes__support {
  color: var(--brand-cta-text-deep);
  background: var(--brand-cta-14);
  border-color: var(--brand-cta-35);
}

.tbox-supported-runtimes__panel--container .tbox-supported-runtimes__support,
.tbox-supported-runtimes__panel--cluster .tbox-supported-runtimes__support {
  color: var(--brand-primary-text);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

.tbox-supported-runtimes__body {
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.tbox-supported-runtimes__body p {
  margin: 0 0 var(--space-md);
}

.tbox-supported-runtimes__body p:last-child {
  margin-bottom: 0;
}

.tbox-supported-runtimes__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin: 0;
  padding: var(--space-lg);
  background: color-mix(in srgb, var(--surface-base) 60%, var(--brand-primary) 4%);
  border-radius: var(--radius-md);
}

.tbox-supported-runtimes__meta dt {
  margin-bottom: 2px;
  color: var(--text-muted);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}

.tbox-supported-runtimes__meta dd {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-base);
}

.tbox-supported-runtimes__route-callout {
  margin-top: var(--space-md);
  padding: var(--space-md);
  color: var(--text-primary);
  background: var(--brand-cta-10);
  border: 1px solid var(--brand-cta-25);
  border-radius: var(--radius-md);
  font-size: var(--fs-base);
}

.tbox-supported-runtimes__route-callout strong {
  display: block;
  margin-bottom: 4px;
  color: var(--brand-cta-text-deep);
}

.tbox-supported-runtimes__cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-lg);
}

:root[data-theme="dark"] .tbox-supported-runtimes__segmented,
:root[data-theme="dark"] .tbox-supported-runtimes__panels {
  background: var(--surface-raised);
  border-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-supported-runtimes__label {
  color: var(--text-on-dark);
  border-right-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-supported-runtimes__label:hover {
  background: color-mix(in srgb, var(--surface-raised) 85%, var(--brand-primary) 8%);
}

:root[data-theme="dark"] .tbox-supported-runtimes__label .tbox-runtime-icon {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-supported-runtimes__label:hover .tbox-runtime-icon,
:root[data-theme="dark"] #tbox-runtime-tab-php:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-php"] .tbox-runtime-icon,
:root[data-theme="dark"] #tbox-runtime-tab-nodejs:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-nodejs"] .tbox-runtime-icon,
:root[data-theme="dark"] #tbox-runtime-tab-python:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-python"] .tbox-runtime-icon,
:root[data-theme="dark"] #tbox-runtime-tab-ruby:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-ruby"] .tbox-runtime-icon,
:root[data-theme="dark"] #tbox-runtime-tab-java:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-java"] .tbox-runtime-icon,
:root[data-theme="dark"] #tbox-runtime-tab-go:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-go"] .tbox-runtime-icon,
:root[data-theme="dark"] #tbox-runtime-tab-dotnet:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-dotnet"] .tbox-runtime-icon,
:root[data-theme="dark"] #tbox-runtime-tab-docker:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-docker"] .tbox-runtime-icon,
:root[data-theme="dark"] #tbox-runtime-tab-kubernetes:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-kubernetes"] .tbox-runtime-icon {
  color: var(--brand-primary);
}

:root[data-theme="dark"] #tbox-runtime-tab-php:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-php"],
:root[data-theme="dark"] #tbox-runtime-tab-nodejs:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-nodejs"],
:root[data-theme="dark"] #tbox-runtime-tab-python:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-python"],
:root[data-theme="dark"] #tbox-runtime-tab-ruby:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-ruby"],
:root[data-theme="dark"] #tbox-runtime-tab-java:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-java"],
:root[data-theme="dark"] #tbox-runtime-tab-go:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-go"],
:root[data-theme="dark"] #tbox-runtime-tab-dotnet:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-dotnet"],
:root[data-theme="dark"] #tbox-runtime-tab-docker:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-docker"],
:root[data-theme="dark"] #tbox-runtime-tab-kubernetes:checked ~ .tbox-supported-runtimes__segmented .tbox-supported-runtimes__label[for="tbox-runtime-tab-kubernetes"] {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-supported-runtimes__panel-heading {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-supported-runtimes__panel-heading .tbox-runtime-icon {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-supported-runtimes__body {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-supported-runtimes__support {
  color: var(--success-text);
  background: color-mix(in srgb, var(--success-text) 14%, transparent);
  border-color: color-mix(in srgb, var(--success-text) 40%, transparent);
}

:root[data-theme="dark"] .tbox-supported-runtimes__panel--routing .tbox-supported-runtimes__support {
  color: var(--brand-cta);
  background: var(--brand-cta-16);
  border-color: var(--brand-cta-35);
}

:root[data-theme="dark"] .tbox-supported-runtimes__panel--container .tbox-supported-runtimes__support,
:root[data-theme="dark"] .tbox-supported-runtimes__panel--cluster .tbox-supported-runtimes__support {
  color: var(--brand-primary);
  background: color-mix(in srgb, var(--brand-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

:root[data-theme="dark"] .tbox-supported-runtimes__meta {
  background: color-mix(in srgb, var(--surface-raised) 60%, var(--brand-primary) 6%);
}

:root[data-theme="dark"] .tbox-supported-runtimes__meta dt {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-supported-runtimes__meta dd {
  color: var(--text-inverse);
}

:root[data-theme="dark"] .tbox-supported-runtimes__route-callout {
  color: var(--text-inverse);
  background: var(--brand-cta-14);
  border-color: var(--brand-cta-35);
}

:root[data-theme="dark"] .tbox-supported-runtimes__route-callout strong {
  color: var(--brand-cta);
}

:root[data-theme="dark"] .tbox-supported-runtimes__eyebrow {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-supported-runtimes__desc {
  color: var(--text-on-dark);
}

@media (width <= 760px) {
  .tbox-supported-runtimes__segmented {
    grid-template-columns: repeat(3, 1fr);
  }

  .tbox-supported-runtimes__label {
    border-right: 1px solid var(--border-light);
    border-bottom: 1px solid var(--border-light);
  }

  .tbox-supported-runtimes__label:nth-of-type(3n) {
    border-right: 0;
  }

  .tbox-supported-runtimes__panel {
    grid-template-columns: 1fr;
    padding: var(--space-xl) var(--space-md);
  }

  :root[data-theme="dark"] .tbox-supported-runtimes__label {
    border-right-color: var(--surface-glass-12);
    border-bottom-color: var(--surface-glass-12);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-supported-runtimes__label,
  .tbox-supported-runtimes__label .tbox-runtime-icon {
    transition: none;
  }
}

/* =========================================================================
   End PLAN_CONDENSE_APP_HOSTING_LANG hub #supported-runtimes
   ========================================================================= */

/* App Hosting hub layout refinement: rhythm, containment, and mobile density. */
#content .tbox-app-hosting-hero {
  padding-block: clamp(var(--space-3xl), 6vw, var(--space-4xl)) clamp(var(--space-2xl), 4vw, var(--space-4xl));
}

#content .tbox-app-hosting-hero__split {
  align-items: center;
  /* Row gap stays tight while the column gap breathes: the 5vw shorthand
     put 72px between the subtitle row and the CTA row at desktop widths. */
  gap: clamp(var(--space-lg), 2.2vw, var(--space-2xl)) clamp(var(--space-xl), 5vw, var(--space-5xl));
}

#content .tbox-app-hosting-hero .tbox-hero-v3__title {
  max-width: 16ch;
}

#content .tbox-app-hosting-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
}

#content .tbox-app-hosting-hero__visual {
  justify-self: end;
  width: min(100%, 37rem);
}

#content .tbox-mini-note--below-hero {
  display: none;
}

#content .tbox-quick-path__intro,
#content .tbox-ah-marketplace > .tbox-container > :is(.tbox-section__heading, .tbox-section__desc),
#content .tbox-ah-pricing-section .tbox-ahcalc-section > :is(.tbox-section__heading, .tbox-section__desc),
#content .tbox-ah-features-section > .tbox-container > :is(.tbox-section__heading, .tbox-section__desc) {
  max-width: 58rem;
}

/* Keep the wide 58rem heading, but hold the pricing intro prose to the
   standard section-description measure so it does not run past ~75ch. */
#content .tbox-ah-pricing-section .tbox-ahcalc-section > .tbox-section__desc {
  max-width: var(--width-desc);
}

#content .tbox-quick-path.tbox-section .tbox-quick-path__grid {
  grid-template-columns: minmax(0, 1.18fr) repeat(3, minmax(0, 0.94fr));
  align-items: stretch;
  gap: clamp(var(--space-md), 2vw, var(--space-xl));
}

#content .tbox-quick-path__card {
  min-width: 0;
}

#content .tbox-quick-path__card.tbox-card .tbox-card__body {
  display: grid;
  align-content: start;
  min-height: 100%;
  gap: var(--space-sm);
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
}

#content .tbox-quick-path__card .tbox-card__link {
  align-self: end;
  margin-top: var(--space-sm);
}

#content .tbox-supported-runtimes {
  padding-block: clamp(var(--space-2xl), 5vw, var(--space-4xl));
}

#content .tbox-supported-runtimes__head {
  display: grid;
  grid-template-columns: minmax(0, 0.72fr) minmax(16rem, 0.28fr);
  gap: var(--space-lg) clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: end;
  margin-bottom: clamp(var(--space-xl), 4vw, var(--space-3xl));
}

#content .tbox-supported-runtimes__head .tbox-section__heading {
  max-width: 18ch;
}

#content .tbox-supported-runtimes__desc {
  max-width: var(--prose-measure-default);
}

#content .tbox-supported-runtimes__deep-link {
  justify-self: end;
  margin: 0 0 var(--space-xs);
}

#content .tbox-supported-runtimes__segmented {
  grid-template-columns: repeat(9, minmax(0, 1fr));
  margin-inline: auto;
  max-width: 72rem;
}

#content .tbox-supported-runtimes__label {
  min-width: 0;
}

#content .tbox-supported-runtimes__panel {
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.72fr);
  gap: clamp(var(--space-lg), 3vw, var(--space-2xl));
}

#content .tbox-ah-marketplace .tbox-feature-matrix {
  margin-top: clamp(var(--space-lg), 3vw, var(--space-2xl));
}

#content .tbox-marketplace-embed {
  max-width: min(60rem, 100%);
  margin-block-start: clamp(var(--space-xl), 4vw, var(--space-3xl));
  margin-inline: auto;
}

#content .tbox-marketplace-embed__head {
  display: grid;
  grid-template-columns: minmax(0, 0.6fr) minmax(18rem, 0.4fr);
  gap: var(--space-lg) clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: end;
  margin-bottom: var(--space-lg);
}

#content .tbox-marketplace-embed__head h2 {
  max-width: 14ch;
  margin: 0;
}

#content .tbox-marketplace-embed__head p {
  margin: 0;
}

#content .tbox-marketplace-embed :is(.tbox-card, .j-app-mp, .container-wrap, .marketplace-apps-cont, .marketplace-offers-wrap, .marketplace-offers) {
  max-width: 100%;
}

#content .tbox-marketplace-embed .marketplace-offers {
  overflow: hidden;
  max-height: 54rem;
  overflow-y: auto;
  scrollbar-gutter: stable;
}

#content .tbox-ah-pricing-section .tbox-ahcalc-section {
  max-width: min(72rem, calc(100vw - 3rem));
}

#content .tbox-ah-pricing-section #tbox-app-hosting-configurator {
  overflow-x: clip;
}

#content .tbox-ah-features-section .tbox-ah-idle-comparison {
  margin-top: clamp(var(--space-lg), 3vw, var(--space-2xl));
}

#content .tbox-ah-features-section .tbox-ah-idle-comparison__grid {
  gap: clamp(var(--space-md), 2.5vw, var(--space-xl));
}

@media (width <= 900px) {
  #content .tbox-supported-runtimes__head,
  #content .tbox-marketplace-embed__head {
    grid-template-columns: 1fr;
    align-items: start;
  }

  #content .tbox-supported-runtimes__deep-link {
    justify-self: start;
    margin: 0;
  }

  #content .tbox-supported-runtimes__segmented {
    overflow-x: auto;
    scroll-snap-type: x proximity;
  }

  #content .tbox-supported-runtimes__label {
    min-width: 6.5rem;
    scroll-snap-align: start;
  }

  #content .tbox-supported-runtimes__panel {
    grid-template-columns: 1fr;
  }
}

@media (width <= 760px) {
  #content .tbox-app-hosting-hero {
    padding-block: var(--space-md) var(--space-md);
  }

  #content .tbox-app-hosting-hero .tbox-hero-v3__inner {
    gap: var(--space-sm);
  }

  #content .tbox-app-hosting-hero .tbox-hero-v3__title {
    max-width: 18ch;
  }

  #content .tbox-app-hosting-hero .tbox-hero-v3__subtitle {
    max-width: var(--prose-measure-wide);
  }

  #content .tbox-app-hosting-hero__visual {
    width: min(100%, 19rem);
    margin-inline: auto;
  }

  #content .tbox-app-hosting-hero__cta-block .tbox-hero-v3__cta-row {
    width: 100%;
  }

  #content .tbox-app-hosting-hero__cta-block .tbox-btn {
    flex: 1 1 10rem;
    min-height: 3rem;
    padding-inline: var(--space-md);
  }

  #content .tbox-app-hosting-hero__cta-block .tbox-mini-note {
    display: none;
  }

  #content .tbox-mini-note--below-hero {
    display: block;
    max-width: var(--prose-measure-wide);
    margin: var(--space-sm) auto var(--space-md);
    padding-inline: var(--space-md);
    font-size: var(--fs-xs);
    line-height: var(--lh-snug);
    text-align: center;
  }

  #content .tbox-quick-path__grid,
  #content .tbox-quick-path.tbox-section .tbox-quick-path__grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }

  #content .tbox-quick-path__card .tbox-card__body {
    gap: var(--space-xs);
  }

  #content .tbox-supported-runtimes {
    padding-block: var(--space-xl);
  }

  #content .tbox-supported-runtimes__segmented {
    grid-template-columns: repeat(9, minmax(6.5rem, 1fr));
    border-radius: var(--radius-12);
  }

  #content .tbox-supported-runtimes__label:nth-of-type(3n) {
    border-right: 1px solid var(--border-light);
  }

  #content .tbox-supported-runtimes__panels {
    margin-top: var(--space-sm);
    border-top: 1px solid var(--border-light);
    border-radius: var(--radius-12);
  }

  #content .tbox-supported-runtimes__panel {
    padding: var(--space-md);
  }

  #content .tbox-marketplace-embed {
    width: 100%;
  }

  #content .tbox-marketplace-embed .tbox-card {
    padding: var(--space-lg);
  }

  #content .tbox-marketplace-embed .j-app-mp,
  #content .tbox-marketplace-embed .container-wrap,
  #content .tbox-marketplace-embed .marketplace-apps-cont,
  #content .tbox-marketplace-embed .marketplace-offers-wrap,
  #content .tbox-marketplace-embed .marketplace-offers {
    width: 100% !important;
  }

  #content .tbox-marketplace-embed .marketplace-offers {
    max-height: 44rem;
  }

  #content .tbox-ah-pricing-section .tbox-ahcalc-section {
    max-width: min(100%, calc(100vw - 2rem));
  }

  #content .tbox-ah-stack-primitives .tbox-container {
    max-width: min(100%, calc(100vw - 2rem));
  }
}

@media (width <= 480px) {
  #content .tbox-app-hosting-hero .tbox-hero-v3__title {
    font-size: clamp(1.85rem, 9.25vw, 2.2rem);
  }

  #content .tbox-app-hosting-hero .tbox-hero-v3__subtitle {
    font-size: var(--fs-base) !important;
    line-height: var(--lh-relaxed) !important;
  }

  #content .tbox-app-hosting-hero__cta-block .tbox-hero-v3__cta-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    align-items: center;
    gap: var(--space-xs);
  }

  #content .tbox-app-hosting-hero__cta-block .tbox-btn {
    width: 100% !important;
    min-height: 2.875rem !important;
    height: auto !important;
    padding-inline: var(--space-sm) !important;
    font-size: var(--fs-xs) !important;
  }

  #content .tbox-app-hosting-hero__cta-block .tbox-mini-note {
    max-width: 28ch;
  }

  #content .tbox-supported-runtimes__panel {
    padding: var(--space-md);
  }

  #content .tbox-supported-runtimes__meta {
    padding: var(--space-md);
  }

  #content .tbox-marketplace-embed .freewall-cell {
    width: 100% !important;
  }

  #content .tbox-marketplace-embed .marketplace-offer,
  #content .tbox-marketplace-embed .default-state {
    width: 100% !important;
  }

}

@media (width <= 900px) {
  #content #kubernetes-fit-path.tbox-quick-path.tbox-section .tbox-quick-path__grid,
  #scale-at-two-layers .tbox-ah-deploy-pipeline {
    grid-template-columns: 1fr;
  }

  #scale-at-two-layers .tbox-ah-deploy-pipeline__step {
    min-width: 0;
  }
}

@media (width <= 480px) {
  #content #kubernetes-fit-path .tbox-quick-path__grid {
    padding: var(--space-sm);
  }

  #content #kubernetes-fit-path .tbox-quick-path__card.tbox-card .tbox-card__body,
  #scale-at-two-layers .tbox-ah-deploy-pipeline__step {
    padding: var(--space-md);
  }
}


/* =========================================================================
   PLAN_CONDENSE_APP_HOSTING_LANG /app-hosting/runtimes/ deep-dive page
   Variant C — editorial layout with sticky sidebar TOC.
   Sidebar collapses to a horizontal row at <= 900px; runtime panels keep
   their existing tbox-runtime-contract__summary 3-slot for cross-runtime
   consistency with retained per-language pages.
   ========================================================================= */

.tbox-runtimes-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(22rem, 0.54fr);
  gap: clamp(var(--space-2xl), 5vw, var(--space-5xl));
  align-items: center;
  max-width: min(1180px, calc(100% - var(--space-2xl)));
  text-align: left;
}

.tbox-runtimes-hero__content {
  display: grid;
  gap: var(--space-md);
  justify-items: start;
  max-width: 48rem;
}

.tbox-runtimes-hero .tbox-hero-v3__eyebrow {
  font-size: var(--fs-label);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--brand-primary);
  margin: 0;
}

:root[data-theme="dark"] .tbox-runtimes-hero .tbox-hero-v3__eyebrow {
  color: var(--brand-primary);
}

.tbox-runtimes-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  margin-inline: 0;
  text-align: left;
}

.tbox-runtimes-hero .tbox-hero-v3__title {
  max-width: 16ch;
  margin-inline: 0;
  text-align: left;
}

.tbox-runtimes-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

.tbox-runtimes-hero__artifact {
  display: grid;
  gap: var(--space-md);
  padding: clamp(var(--space-lg), 2.2vw, var(--space-2xl));
  border: 1px solid var(--text-inverse-18);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(135deg, var(--text-inverse-10), transparent 42%),
    color-mix(in srgb, var(--brand-primary-deep) 84%, var(--surface-dark) 16%);
  box-shadow: 0 1px 0 var(--text-inverse-14) inset;
}

.tbox-runtimes-hero__artifact-label {
  margin: 0;
  color: var(--brand-primary);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
}

.tbox-runtimes-hero__artifact-list {
  display: grid;
  gap: var(--space-xs);
  margin: 0;
}

.tbox-runtimes-hero__artifact-list div {
  display: grid;
  grid-template-columns: 7.5rem minmax(0, 1fr);
  gap: var(--space-md);
  align-items: start;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--text-inverse-14);
}

.tbox-runtimes-hero__artifact-list div:first-child {
  border-top: 0;
  padding-top: 0;
}

.tbox-runtimes-hero__artifact-list div:last-child {
  padding-bottom: 0;
}

.tbox-runtimes-hero__artifact-list dt {
  color: var(--text-inverse);
  font-size: var(--fs-base);
  font-weight: var(--fw-semibold);
}

.tbox-runtimes-hero__artifact-list dd {
  margin: 0;
  color: color-mix(in srgb, var(--text-inverse) 78%, transparent);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.tbox-runtime-token {
  white-space: nowrap;
}

/* PLAN_CRITIQUE_2 Issue 6: narrative-seam breathing room.
   Adds an extra 4rem of block-end space at the two seams where rhythm
   collapsed: between the at-a-glance summary and the first runtime panel,
   and between the runtime detail section and the page-level fit-honesty
   band. Scoped to runtimes page primitives so other pages are unaffected. */
.tbox-runtimes-summary {
  padding-block-end: var(--space-4xl);
}

.tbox-runtimes-page {
  margin-block-end: var(--space-4xl);
}

.tbox-runtimes-summary__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.42fr);
  gap: var(--space-lg) clamp(var(--space-xl), 4vw, var(--space-4xl));
  align-items: start;
  margin-bottom: var(--space-xl);
}

.tbox-runtimes-summary__head .tbox-section__heading,
.tbox-runtimes-summary__head .tbox-section__desc {
  grid-column: 1;
  max-width: var(--prose-measure-default);
}

.tbox-runtimes-summary__note {
  grid-column: 2;
  grid-row: 1 / span 2;
  margin: 0;
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
  border-left: 1px solid color-mix(in srgb, var(--brand-primary) 42%, var(--surface-glass-12) 58%);
  color: var(--text-on-dark-muted, var(--text-secondary));
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.tbox-runtimes-summary__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tbox-runtimes-summary__table {
  width: 100%;
  min-width: 720px;
  border-collapse: collapse;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tbox-runtimes-summary__table thead th {
  background: var(--surface-subtle);
  text-align: left;
  padding: var(--space-md) var(--space-lg);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}

.tbox-runtimes-summary__table tbody th,
.tbox-runtimes-summary__table tbody td {
  padding: var(--space-md) var(--space-lg);
  border-top: 1px solid var(--border-light);
  vertical-align: top;
  color: var(--text-secondary);
}

.tbox-runtimes-summary__table tbody th {
  text-align: left;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  white-space: nowrap;
}

.tbox-runtimes-summary__table tbody th .tbox-runtime-icon {
  --tbox-runtime-icon-size: 18px;
  color: var(--brand-primary);
  flex-shrink: 0;
}

.tbox-runtimes-summary__table tbody th a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

.tbox-runtimes-summary__table tbody th a:hover,
.tbox-runtimes-summary__table tbody th a:focus-visible {
  border-bottom-color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-runtimes-summary__table {
  border-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-runtimes-summary__table thead th {
  background: var(--surface-glass-04);
  border-bottom-color: var(--surface-glass-12);
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-runtimes-summary__table tbody th,
:root[data-theme="dark"] .tbox-runtimes-summary__table tbody td {
  border-top-color: var(--surface-glass-12);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-runtimes-summary__table tbody th .tbox-runtime-icon {
  color: var(--brand-primary);
}

.tbox-runtimes-shell {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: start;
}

.tbox-runtimes-toc {
  position: sticky;
  top: var(--space-2xl);
  align-self: start;
  font-size: var(--fs-base);
}

.tbox-runtimes-toc__label {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--border-light);
}

.tbox-runtimes-toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tbox-runtimes-toc__faq {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--border-light);
}

.tbox-runtimes-toc__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: 6px var(--space-sm);
  border-radius: 6px;
  border-left: 2px solid transparent;
  color: var(--text-secondary);
  text-decoration: none;
  transition: background 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.tbox-runtimes-toc__link .tbox-runtime-icon {
  --tbox-runtime-icon-size: 16px;
  color: var(--text-muted);
}

.tbox-runtimes-toc__link:hover,
.tbox-runtimes-toc__link:focus-visible {
  color: var(--text-primary);
  background: color-mix(in srgb, var(--brand-primary) 6%, transparent);
  border-left-color: var(--brand-primary);
  outline: none;
}

.tbox-runtimes-toc__link:hover .tbox-runtime-icon,
.tbox-runtimes-toc__link:focus-visible .tbox-runtime-icon {
  color: var(--brand-primary);
}

.tbox-runtimes-toc__sub {
  margin-left: auto;
  font-size: var(--fs-label);
  font-weight: 400;
  color: var(--text-muted);
}

:root[data-theme="dark"] .tbox-runtimes-toc__label {
  color: var(--text-on-dark-muted);
  border-bottom-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-runtimes-toc__link {
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-runtimes-toc__link:hover,
:root[data-theme="dark"] .tbox-runtimes-toc__link:focus-visible {
  color: var(--text-on-dark);
  background: color-mix(in srgb, var(--brand-primary) 12%, transparent);
  border-left-color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-runtimes-toc__faq {
  border-top-color: var(--surface-glass-12);
}

.tbox-runtimes-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl);
  min-width: 0;
}

.tbox-runtime-panel {
  scroll-margin-top: var(--space-3xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-bottom: var(--space-3xl);
  border-bottom: 1px solid var(--border-light);
  min-width: 0;
}

.tbox-runtime-panel:last-of-type {
  border-bottom: 0;
  padding-bottom: 0;
}

.tbox-runtime-panel__head {
  display: flex;
  align-items: center;
  gap: var(--space-md);
  flex-wrap: wrap;
}

.tbox-runtime-panel__head .tbox-runtime-icon {
  --tbox-runtime-icon-size: 28px;
  color: var(--brand-primary);
}

.tbox-runtime-panel__heading {
  font-family: "Varela Round", sans-serif;
  font-size: var(--fs-2xl);
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--text-primary);
}

.tbox-runtime-panel__ledger {
  display: grid;
  grid-template-columns: 18ch minmax(0, 1fr);
  gap: var(--space-md) var(--space-lg);
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.tbox-runtime-panel__ledger > div {
  display: contents;
}

.tbox-runtime-panel__ledger dt {
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--text-muted);
  padding-top: 2px;
}

.tbox-runtime-panel__ledger dd {
  margin: 0;
  color: var(--text-secondary);
}

.tbox-runtime-panel__detail {
  color: var(--text-secondary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
  max-width: var(--prose-measure-default);
}

.tbox-runtime-panel__detail p + p {
  margin-top: var(--space-md);
}

:root[data-theme="dark"] .tbox-runtime-panel {
  border-bottom-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-runtime-panel__heading {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-runtime-panel__head .tbox-runtime-icon {
  color: var(--brand-primary);
}

:root[data-theme="dark"] .tbox-runtime-panel__ledger dt {
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-runtime-panel__ledger dd,
:root[data-theme="dark"] .tbox-runtime-panel__detail {
  color: var(--text-on-dark);
}

.tbox-runtime-panel__route-callout {
  border: 1px solid var(--brand-cta);
  border-radius: var(--radius-md);
  padding: var(--space-md) var(--space-lg);
  background: color-mix(in srgb, var(--brand-cta) 8%, transparent);
}

.tbox-runtime-panel__route-headline {
  margin: 0 0 var(--space-sm);
  color: var(--text-primary);
  font-size: var(--fs-md);
  line-height: var(--lh-relaxed);
}

.tbox-runtime-panel__route-headline a {
  color: var(--brand-cta);
  text-decoration: underline;
}

.tbox-runtime-panel__route-list {
  margin: 0;
  padding-left: 1.2rem;
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
}

.tbox-runtime-panel__route-list li + li {
  margin-top: var(--space-2xs);
}

:root[data-theme="dark"] .tbox-runtime-panel__route-callout {
  background: color-mix(in srgb, var(--brand-cta) 14%, transparent);
}

:root[data-theme="dark"] .tbox-runtime-panel__route-headline {
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-runtime-panel__route-list {
  color: var(--text-on-dark-muted);
}

.tbox-runtime-panel__kubernetes-link {
  margin-top: var(--space-md);
}

.tbox-runtime-panel--stub .tbox-runtime-panel__stub {
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  color: var(--text-secondary);
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.tbox-runtime-panel__stub-link {
  margin: 0;
}

.tbox-runtime-panel__stub-link a {
  color: var(--brand-primary);
  text-decoration: none;
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid color-mix(in srgb, currentColor 50%, transparent);
}

.tbox-runtime-panel__stub-link a:hover,
.tbox-runtime-panel__stub-link a:focus-visible {
  border-bottom-color: currentColor;
}

:root[data-theme="dark"] .tbox-runtime-panel--stub .tbox-runtime-panel__stub {
  border-color: var(--surface-glass-12);
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-runtime-panel__stub-link a {
  color: var(--brand-primary);
}

.tbox-java-matrix {
  margin: 0;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.tbox-java-matrix__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-base);
}

.tbox-java-matrix__caption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.tbox-java-matrix__table thead th {
  background: var(--surface-subtle);
  text-align: left;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-light);
}

.tbox-java-matrix__table tbody th,
.tbox-java-matrix__table tbody td {
  padding: var(--space-sm) var(--space-md);
  border-top: 1px solid var(--border-light);
  vertical-align: top;
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

.tbox-java-matrix__table tbody th {
  text-align: left;
  color: var(--text-primary);
  font-weight: var(--fw-semibold);
  white-space: nowrap;
}

.tbox-java-matrix__row--featured th {
  color: var(--brand-cta);
}

.tbox-java-matrix__star {
  color: var(--brand-cta);
}

.tbox-java-matrix__more {
  border-top: 1px solid var(--border-light);
}

.tbox-java-matrix__more summary {
  cursor: pointer;
  padding: var(--space-sm) var(--space-md);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-normal);
  text-transform: uppercase;
  color: var(--text-secondary);
  background: var(--surface-subtle);
  list-style: none;
}

.tbox-java-matrix__more summary::-webkit-details-marker {
  display: none;
}

.tbox-java-matrix__more summary::before {
  content: "+ ";
  color: var(--text-muted);
}

.tbox-java-matrix__more[open] summary::before {
  content: "− ";
}

.tbox-java-matrix__table--collapsed thead {
  display: none;
}

.tbox-java-matrix__table--collapsed tbody th,
.tbox-java-matrix__table--collapsed tbody td {
  border-top-color: var(--border-light);
}

:root[data-theme="dark"] .tbox-java-matrix {
  border-color: var(--surface-glass-12);
}

:root[data-theme="dark"] .tbox-java-matrix__table thead th,
:root[data-theme="dark"] .tbox-java-matrix__more summary {
  background: var(--surface-glass-04);
  border-bottom-color: var(--surface-glass-12);
  color: var(--text-on-dark-muted);
}

:root[data-theme="dark"] .tbox-java-matrix__table tbody th,
:root[data-theme="dark"] .tbox-java-matrix__table tbody td {
  border-top-color: var(--surface-glass-12);
  color: var(--text-on-dark);
}

:root[data-theme="dark"] .tbox-java-matrix__more {
  border-top-color: var(--surface-glass-12);
}

@media (max-width: 900px) {
  .tbox-runtimes-hero .tbox-hero-v3__inner {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .tbox-runtimes-hero__content {
    justify-items: center;
    max-width: 100%;
  }

  .tbox-runtimes-hero .tbox-hero-v3__title,
  .tbox-runtimes-hero .tbox-hero-v3__subtitle {
    text-align: center;
    margin-inline: auto;
  }

  .tbox-runtimes-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  .tbox-runtimes-summary__head {
    grid-template-columns: 1fr;
  }

  .tbox-runtimes-summary__note {
    grid-column: 1;
    grid-row: auto;
    max-width: var(--prose-measure-wide);
    padding: var(--space-md) 0 0;
    border-top: 1px solid color-mix(in srgb, var(--brand-primary) 35%, var(--surface-glass-12) 65%);
    border-left: 0;
  }

  .tbox-runtimes-shell {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }

  .tbox-runtimes-toc {
    position: static;
    top: auto;
  }

  .tbox-runtimes-toc__list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--space-xs);
  }

  .tbox-runtimes-toc__link {
    border: 1px solid var(--border-light);
  }

  :root[data-theme="dark"] .tbox-runtimes-toc__link {
    border-color: var(--surface-glass-12);
  }

  .tbox-runtimes-toc__sub {
    display: none;
  }

  .tbox-runtimes-toc__faq {
    margin-top: 0;
    padding-top: 0;
    border-top: 0;
  }

  :root[data-theme="dark"] .tbox-runtimes-toc__faq {
    border-top-color: transparent;
  }

  .tbox-runtime-panel__head {
    align-items: flex-start;
  }

  .tbox-runtime-panel__ledger {
    grid-template-columns: 1fr;
    gap: var(--space-2xs) 0;
  }

  .tbox-runtime-panel__ledger > div {
    display: block;
    padding-top: var(--space-md);
    border-top: 1px solid var(--border-light);
  }

  .tbox-runtime-panel__ledger > div:first-child {
    padding-top: 0;
    border-top: 0;
  }

  :root[data-theme="dark"] .tbox-runtime-panel__ledger > div {
    border-top-color: var(--surface-glass-12);
  }

  .tbox-java-matrix {
    overflow-x: auto;
  }

  .tbox-java-matrix__table {
    min-width: 720px;
  }
}

@media (max-width: 560px) {
  .tbox-runtimes-hero .tbox-hero-v3__inner {
    max-width: min(100% - var(--space-lg), 36rem);
  }

  .tbox-runtimes-hero__artifact {
    padding: var(--space-lg);
  }

  .tbox-runtimes-hero__artifact-list div {
    grid-template-columns: 5.8rem minmax(0, 1fr);
    gap: var(--space-sm);
    padding-block: var(--space-xs);
  }
}

@media (prefers-reduced-motion: reduce) {
  .tbox-runtimes-toc__link {
    transition: none;
  }
}

/* =========================================================================
   End PLAN_CONDENSE_APP_HOSTING_LANG /app-hosting/runtimes/ deep-dive page
   ========================================================================= */

/* Cloud VPS impeccable layout pass: scoped rhythm and responsive density. */
#content #operations-section .tbox-container,
#content #fit-section .tbox-container,
#content #managed-services-section .tbox-container {
  max-width: min(1120px, calc(100% - 3rem));
}

#content #operations-section,
#content #fit-section,
#content #managed-services-section {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

#content #operations-section > .tbox-container > :where(.tbox-section__heading, .tbox-section__desc),
#content #fit-section > .tbox-container > :where(.tbox-section__heading, .tbox-section__desc),
#content #managed-services-section > .tbox-container > :where(.tbox-section__heading, .tbox-section__desc) {
  margin-inline: 0;
  text-align: left;
}

/* Re-enable the accent bar on the left-aligned managed-services heading; the
   parent .tbox-pillar-section suppresses it by default. */
#content #managed-services-section > .tbox-container > .tbox-section__heading {
  padding-bottom: var(--space-md);
}
#content #managed-services-section > .tbox-container > .tbox-section__heading::after {
  display: block;
  left: 0;
  transform: none;
}

#content #operations-section > .tbox-container > .tbox-section__heading {
  max-width: 17ch;
}

#content #operations-section > .tbox-container > .tbox-section__desc {
  max-width: var(--prose-measure-default);
}

#content #operations-section .tbox-cvps-ops-pills {
  justify-content: flex-start;
  margin-top: clamp(1rem, 2vw, 1.35rem);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

#content #operations-section .tbox-cvps-ops-sub {
  padding-block: clamp(2rem, 4vw, 3.25rem);
}

#content #operations-section .tbox-cvps-ops-sub + .tbox-cvps-ops-sub {
  margin-top: 0;
  border-top: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
}

#content #operations-section .tbox-cvps-ops-api__centerpiece {
  grid-template-columns: minmax(0, 1.22fr) minmax(18rem, 0.78fr);
  gap: clamp(1rem, 2.4vw, 2rem);
  align-items: stretch;
  margin-top: clamp(1.25rem, 2.8vw, 2rem);
}

#content #operations-section .tbox-cvps-mcp-demo {
  min-height: 26rem;
}

#content #operations-section .tbox-cvps-mcp-demo__msg,
#content #operations-section .tbox-cvps-mcp-demo__tools li,
#content #operations-section .tbox-cvps-mcp-demo__node,
#content #operations-section .tbox-cvps-mcp-demo__backup,
#content #operations-section .tbox-cvps-mcp-demo__check {
  opacity: 1;
  transform: none;
}

#content #operations-section .tbox-cvps-mcp-demo__net {
  clip-path: inset(0 0 0 0);
}

#content #operations-section .tbox-cvps-ops-audit {
  align-self: stretch;
}

#content #operations-section .tbox-cvps-ops-boundary {
  margin-top: clamp(2rem, 4vw, 3.25rem);
}

#content #operations-section .tbox-cvps-ops-cta-rail {
  margin-top: clamp(1.25rem, 3vw, 2rem);
}

#content #fit-section .tbox-vps-paas-matrix,
#content #managed-services-section .tbox-pillar-grid {
  margin-top: clamp(1.35rem, 3vw, 2.25rem);
}

#content #managed-services-section .tbox-pillar-grid {
  align-items: stretch;
}

#content #managed-services-section .tbox-pillar-card {
  min-height: 100%;
}

@media (width <= 900px) {
  #content #operations-section .tbox-cvps-ops-api__centerpiece {
    grid-template-columns: 1fr;
  }

  #content #operations-section .tbox-cvps-mcp-demo {
    min-height: 0;
  }
}

@media (width <= 720px) {
  #content #operations-section .tbox-container,
  #content #fit-section .tbox-container,
  #content #managed-services-section .tbox-container {
    max-width: min(100% - 1.5rem, 36rem);
  }

  #content #operations-section,
  #content #fit-section,
  #content #managed-services-section {
    padding-block: clamp(2.5rem, 12vw, 3.5rem);
  }

  #content #operations-section .tbox-cvps-ops-pills {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: var(--space-xs);
    scrollbar-width: thin;
  }

  #content #operations-section .tbox-cvps-ops-pill {
    flex: 0 0 auto;
  }

  #content #operations-section .tbox-cvps-ops-sub {
    padding-block: var(--space-2xl);
  }

  #content #operations-section .tbox-cvps-ops-sub__heading {
    max-width: 24ch;
    font-size: clamp(1.15rem, 5vw, 1.45rem);
  }

  #content #operations-section .tbox-cvps-ops-sub__lede,
  #content #operations-section .tbox-cvps-ops-sub__note {
    max-width: 100%;
  }

  #content #operations-section .tbox-cvps-mcp-demo {
    grid-template-columns: 1fr;
    gap: var(--space-sm);
  }

  #content #operations-section .tbox-cvps-mcp-demo__chat,
  #content #operations-section .tbox-cvps-mcp-demo__result,
  #content #operations-section .tbox-cvps-ops-audit,
  #content #operations-section .tbox-cvps-security-panel,
  #content #operations-section .tbox-cvps-ops-boundary,
  #content #operations-section .tbox-cvps-ops-cta-rail {
    border-radius: var(--radius-sm-plus);
  }

  #content #operations-section .tbox-cvps-mcp-demo__result-grid,
  #content #operations-section .tbox-cvps-ops-security__cards {
    grid-template-columns: 1fr;
  }

  #content #operations-section .tbox-cvps-ops-audit__rows li {
    grid-template-columns: minmax(4.2rem, auto) minmax(0, 1fr);
  }

  #content #operations-section .tbox-cvps-ops-audit__rows em {
    grid-column: 2;
  }

  #content #operations-section .tbox-recovery-ledger caption {
    padding: var(--space-md);
  }

  #content #operations-section .tbox-recovery-ledger tbody tr,
  #content #operations-section .tbox-cvps-ops-boundary__table tr {
    margin-top: var(--space-sm);
    border: 1px solid color-mix(in srgb, var(--brand-primary) 18%, var(--border-light));
    border-radius: var(--radius-sm-plus);
    background: color-mix(in srgb, var(--surface-base) 92%, var(--surface-muted) 8%);
    overflow: hidden;
  }

  #content #operations-section .tbox-recovery-ledger tbody tr:first-child,
  #content #operations-section .tbox-cvps-ops-boundary__table tr:first-child {
    margin-top: 0;
  }

  #content #operations-section .tbox-recovery-ledger tbody th[scope="row"],
  #content #operations-section .tbox-cvps-ops-boundary__table tbody th {
    padding: var(--space-md);
    background: color-mix(in srgb, var(--brand-primary) 10%, transparent);
  }

  #content #operations-section .tbox-recovery-ledger tbody td,
  #content #operations-section .tbox-cvps-ops-boundary__table td {
    display: grid;
    grid-template-columns: minmax(7rem, 0.42fr) minmax(0, 1fr);
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    border-top: 1px solid color-mix(in srgb, var(--border-light) 70%, transparent);
  }

  #content #operations-section .tbox-recovery-ledger tbody td[data-label]::before,
  #content #operations-section .tbox-cvps-ops-boundary__table td::before {
    margin: 0;
  }

  #content #operations-section .tbox-cvps-ops-cta-rail,
  #content #operations-section .tbox-cvps-ops-cta-rail .tbox-cta-row {
    grid-template-columns: 1fr;
  }

  #content #operations-section .tbox-cvps-ops-cta-rail .tbox-btn {
    width: 100%;
    justify-content: center;
  }

  :root[data-theme="dark"] #content #operations-section .tbox-cvps-ops-sub + .tbox-cvps-ops-sub,
  :root[data-theme="dark"] #content #operations-section .tbox-recovery-ledger tbody td,
  :root[data-theme="dark"] #content #operations-section .tbox-cvps-ops-boundary__table td {
    border-color: var(--surface-glass-10);
  }

  :root[data-theme="dark"] #content #operations-section .tbox-recovery-ledger tbody tr,
  :root[data-theme="dark"] #content #operations-section .tbox-cvps-ops-boundary__table tr {
    border-color: var(--surface-glass-12);
    background: color-mix(in srgb, var(--surface-base) 90%, var(--brand-primary) 6%);
  }
}

@media (width <= 430px) {
  #content #operations-section .tbox-recovery-ledger tbody td,
  #content #operations-section .tbox-cvps-ops-boundary__table td,
  #content .tbox-vps-paas-matrix__row > div {
    grid-template-columns: 1fr;
    gap: var(--space-2xs);
  }

  #content #operations-section .tbox-cvps-mcp-demo__bar {
    grid-template-columns: auto minmax(0, 1fr);
  }

  #content #operations-section .tbox-cvps-mcp-demo__bar-status {
    grid-column: 2;
  }
}

/* Object Storage route layout pass */
#content .tbox-object-storage-hero.tbox-hero-v3--compact {
  padding-block: clamp(2.75rem, 5vw, 5.4rem);
  text-align: left;
}

#content .tbox-object-storage-hero .tbox-hero-v3__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.95fr) minmax(18rem, 0.56fr);
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4.75rem);
  max-width: min(1120px, calc(100vw - 3rem));
}

#content .tbox-object-storage-hero__copy {
  min-width: 0;
}

#content .tbox-object-storage-hero .tbox-hero-v3__title,
#content .tbox-object-storage-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  margin-inline: 0 !important;
  text-align: left !important;
  text-wrap: balance;
}

#content .tbox-object-storage-hero .tbox-hero-v3__subtitle {
  max-width: var(--prose-measure-wide);
  color: color-mix(in srgb, var(--text-inverse) 84%, transparent);
}

#content .tbox-object-storage-hero .tbox-hero-v3__cta-row {
  justify-content: flex-start;
}

#content .tbox-object-storage-hero .tbox-hero-proof {
  max-width: var(--prose-measure-wide);
  margin-top: clamp(var(--space-lg), 2vw, var(--space-xl));
}

#content .tbox-object-storage-hero .tbox-hero-proof span {
  padding-left: 0;
}

.tbox-object-storage-hero__panel {
  position: relative;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--surface-base) 17%, var(--brand-primary) 15%);
  border-radius: var(--radius-sm-plus);
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--gray-950) 78%, var(--brand-primary-deep) 22%), color-mix(in srgb, var(--gray-950) 92%, var(--brand-primary) 8%));
  box-shadow: 0 18px 38px color-mix(in srgb, var(--gray-950) 28%, transparent);
}

.tbox-object-storage-hero__panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: var(--brand-cta);
}


/* Object Storage hero — distilled bucket flow (numeral chips stripped).
   Sub-token rem values are intentional: spacing baked from the accepted
   density (1.4) rather than snapped to the --space-* scale. */
.tbox-object-storage-hero__panel--flow {
  padding: 2.1rem 2.24rem;
}

.tbox-object-storage-hero__panel .tbox-os-flow__head {
  margin: 0 0 1.54rem;
  font-size: var(--fs-sm);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-on-dark-muted);
}

.tbox-object-storage-hero__panel .tbox-os-flow {
  position: relative;
  display: grid;
  gap: 1.19rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tbox-object-storage-hero__panel .tbox-os-flow::before {
  content: "";
  position: absolute;
  left: 3px;
  top: 0.7em;
  bottom: 0.7em;
  width: 2px;
  background: color-mix(in srgb, var(--brand-primary) 35%, transparent);
}

.tbox-object-storage-hero__panel .tbox-os-flow__step {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  color: var(--text-on-dark);
}

.tbox-object-storage-hero__panel .tbox-os-flow__step::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-top: 0.4em;
  border-radius: 50%;
  background: var(--brand-primary);
}

#content .tbox-object-storage .tbox-container {
  max-width: 1120px;
}

#content .tbox-object-storage__intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, 0.42fr);
  gap: clamp(var(--space-xl), 4vw, var(--space-3xl));
  align-items: end;
  margin-bottom: clamp(var(--space-lg), 2.5vw, var(--space-2xl));
}

#content .tbox-object-storage .tbox-section__heading,
#content .tbox-object-storage .tbox-section__desc {
  max-width: 760px;
  margin-inline: 0;
  text-align: left;
}

#content .tbox-object-storage .tbox-section__heading::after {
  left: 0;
  transform: none;
}

.tbox-object-storage__callout {
  display: grid;
  gap: var(--space-xs);
  padding: var(--space-lg);
}

.tbox-object-storage__callout strong {
  color: var(--text-primary);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
}

.tbox-object-storage__callout span {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

#content .tbox-object-storage #mechanism-grid {
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: var(--space-md);
}

#content .tbox-object-storage #mechanism-grid > :is(div, article, a):nth-child(n) {
  grid-column: span 3 !important;
  min-height: 100%;
  border-radius: var(--radius-sm-plus);
  box-shadow: none;
}

#content .tbox-object-storage#use-cases .tbox-standard-features-grid--detail-columns,
#content .tbox-object-storage#pricing .tbox-standard-features-grid--detail-columns {
  gap: 0;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent);
  border-radius: var(--radius-sm-plus);
  background: color-mix(in srgb, var(--surface-base) 92%, var(--brand-primary-dark) 8%);
}

#content .tbox-object-storage#use-cases .tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(n),
#content .tbox-object-storage#pricing .tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(n) {
  padding: clamp(var(--space-lg), 2vw, var(--space-xl));
  border-top: 0;
  background: transparent;
}

#content .tbox-object-storage#use-cases .tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(even),
#content .tbox-object-storage#pricing .tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(even) {
  border-left: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent);
}

#content .tbox-object-storage#use-cases .tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(n + 3) {
  border-top: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent);
}

#content .tbox-object-storage .tbox-card__heading {
  text-wrap: balance;
}

/* Pricing chips share the section's left axis (heading/desc are left-aligned);
   only the conversion CTA row stays centered, matching the add-on family. */
#content .tbox-object-storage#pricing .tbox-pricing-anchor {
  justify-content: flex-start;
  padding-inline: 0;
}

:root[data-theme="dark"] #content .tbox-object-storage#use-cases .tbox-standard-features-grid--detail-columns,
:root[data-theme="dark"] #content .tbox-object-storage#pricing .tbox-standard-features-grid--detail-columns {
  border-color: color-mix(in srgb, var(--border-mid) 62%, var(--brand-primary) 22%);
  background: color-mix(in srgb, var(--surface-base) 91%, var(--brand-primary-dark) 9%);
}

@media (width <= 900px) {
  #content .tbox-object-storage-hero .tbox-hero-v3__inner,
  #content .tbox-object-storage__intro {
    grid-template-columns: 1fr;
  }

  .tbox-object-storage-hero__panel {
    max-width: 34rem;
  }

  #content .tbox-object-storage #mechanism-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #content .tbox-object-storage #mechanism-grid > :is(div, article, a):nth-child(n) {
    grid-column: span 1 !important;
  }
}

@media (width <= 640px) {
  #content .tbox-object-storage-hero.tbox-hero-v3--compact {
    padding-block: var(--space-xl-plus);
    text-align: center;
  }

  #content .tbox-object-storage-hero .tbox-hero-v3__inner {
    max-width: min(100%, calc(100vw - 2rem));
    gap: var(--space-lg);
  }

  #content .tbox-object-storage-hero .tbox-hero-v3__title,
  #content .tbox-object-storage-hero .tbox-hero-v3__subtitle {
    margin-inline: auto !important;
    text-align: center !important;
  }

  #content .tbox-object-storage-hero .tbox-hero-v3__cta-row {
    justify-content: center;
  }

  #content .tbox-object-storage-hero .tbox-hero-proof {
    margin-top: var(--space-md);
  }

  #content .tbox-object-storage-hero .tbox-hero-proof span {
    justify-content: center;
    width: auto;
    flex: 1 1 10.5rem;
    min-height: 2.15rem;
    padding: var(--space-2xs) 0;
  }

  .tbox-object-storage-hero__panel {
    margin-inline: auto;
    max-width: 26rem;
    text-align: left;
  }

  .tbox-object-storage-hero__panel--flow {
    padding: 1.3rem 1.4rem;
  }

  .tbox-object-storage-hero__panel .tbox-os-flow__head {
    margin-bottom: 0.9rem;
  }

  .tbox-object-storage-hero__panel .tbox-os-flow {
    gap: 0.75rem;
  }

  #content .tbox-object-storage__intro {
    gap: var(--space-lg);
  }

  #content .tbox-object-storage #mechanism-grid,
  #content .tbox-object-storage#use-cases .tbox-standard-features-grid--detail-columns,
  #content .tbox-object-storage#pricing .tbox-standard-features-grid--detail-columns {
    grid-template-columns: 1fr;
  }

  #content .tbox-object-storage#use-cases .tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(n),
  #content .tbox-object-storage#pricing .tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(n) {
    border-left: 0;
  }

  #content .tbox-object-storage#use-cases .tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(n + 2),
  #content .tbox-object-storage#pricing .tbox-standard-features-grid--detail-columns > :is(div, article):nth-child(n + 2) {
    border-top: 1px solid color-mix(in srgb, var(--border-light) 76%, transparent);
  }
}

/* Typography verification remediation: keep linked-page UI on the DESIGN.md scale. */

#content :is(.tbox-section__desc, .tbox-section__description) {
  font-size: var(--fs-lg);
  letter-spacing: 0;
}

#content :where(#hero-section:not(.tbox-hero-v3):not(.ah-calc-header) h1),
#content section#hero-section > h1 {
  font-size: clamp(2rem, 4.5vw, 3.25rem);
  line-height: 1.2;
  letter-spacing: 0;
}

#content .tbox-case-study h2,
#content .tbox-search-result .entry-title,
#content .tbox-blog-listing .entry-title,
#contact-details > div > h3,
#dallas > h3,
#philadelphia > h3,
.tbox-cvps-ops-sub__heading,
.tbox-quick-path__card .tbox-card__heading,
.tbox-standard-features-grid > :is(div, article, a) :is(h3, h4, h5),
.tbox-ah-portability-matrix .tbox-feature-matrix__text :where(h3, h4),
.tbox-video-carousel__caption :is(h3, h4),
.tbox-ahcalc-pricing-ref-title,
.dbcl-panel__feature :is(h3, h4),
.dbcl-engine-rail__item :is(h3, h4),
.lb-usecase-card__heading,
.lb-compare-heading,
.lb-tcp-tile__name,
.tbox-ah-deploy-pipeline__title,
.tbox-ah-observability-runbook__item h3,
.tbox-ah-observability-log-grid__item h3,
#content :is(#php-heading, #nodejs-heading, #python-heading, #ruby-heading, #java-heading, #go-heading, #dotnet-heading, #docker-heading, #kubernetes-heading) {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

#content :where(
  .tbox-feature-matrix__header,
  .tbox-feature-matrix__header > span,
  .tbox-feature-matrix__category,
  .tbox-feature-matrix__row,
  .tbox-feature-matrix__text :where(p),
  .tbox-status-badge--included,
  .tbox-status-badge--addon,
  .tbox-feature-matrix__spec,
  .tbox-pillar__desc,
  .tbox-pillar__stat-label,
  .tbox-pillar__link,
  .tbox-detail-label,
  .lb-usecase-card__meta,
  .lb-usecase-card__body,
  .lb-usecase-card__pick,
  .lb-compare-note,
  .lb-compare-table,
  .lb-compare-table th,
  .lb-compare-table td,
  .lb-compare-table tbody th.row-label,
  .lb-col-rec__badge,
  .lb-tcp-tile p,
  .dbcl-panel__feature p,
  .dbcl-engine-rail__item p,
  .tbox-ah-deploy-pipeline__desc,
  .tbox-video-carousel__tab,
  .tbox-video-carousel__playpause,
  .tbox-ahcalc-pricing-card__tab,
  .tbox-ahcalc-pricing-card__mobile-toggle,
  .tbox-ahcalc-pricing-card__panel-note,
  .tbox-ahcalc-cl-range-card__label,
  .tbox-ahcalc-cl-range-card__desc,
  .tbox-ahcalc-cl-range-row__label,
  .tbox-ahcalc-vol-table,
  .tbox-ahcalc-vol-table__group-row th,
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-node,
  #tbox-app-hosting-configurator .tbox-ahcalc-v3-node-text,
  #hourly-vps-configurator .tbox-preset-btn,
  #hourly-vps-configurator .tbox-preset-specs,
  #hourly-vps-configurator .tbox-preset-price__suffix,
  #hourly-vps-configurator .tbox-preset-microcopy,
  #hourly-vps-configurator .tbox-preset-microcopy-reason,
  .tbox-hvps-pc-strip__provider-label,
  .tbox-hvps-pc-strip__tier-label,
  .tbox-hvps-pc-col-h,
  .tbox-hvps-pc-col-h__sub,
  .tbox-hvps-pc-strip__tb-ha,
  .tbox-hvps-pc-strip__tb-plan,
  .tbox-hvps-pc-price__unit,
  .tbox-hvps-pc-price__note,
  .tbox-hvps-pc-strip__comp-plan,
  .tbox-hvps-pc-2x-tag,
  .tbox-hvps-pc-2x-tag__badge,
  .tbox-hvps-pc-strip__insight-text,
  .tbox-hvps-pc-strip__insight-detail,
  .tbox-hvps-pc-strip__callout,
  .tbox-hvps-pc-strip__footnote
) {
  font-size: var(--fs-base);
  letter-spacing: 0;
}

#content :where(
  .tbox-feature-matrix__header,
  .tbox-feature-matrix__header > span,
  .tbox-feature-matrix__category
) {
  line-height: var(--lh-normal);
}

#content .tbox-feature-matrix__text :where(h3, h4),
#content .tbox-pillar__title,
#content .tbox-extras-checklist__heading,
#content .tbox-bento-cta-card__text .tbox-card__heading,
#content .tbox-ah-database-cluster .tbox-card--feature .tbox-card__heading,
#content .lb-tcp-detail .tbox-card__heading,
#content .tbox-cvps-ops-boundary__heading,
#content section#tbox-marketplace .tbox-marketplace-embed__head h2,
#content .page-title,
#content .tbox-blog-promo-card > h3 {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

#content .tbox-pillar__link,
#content .lb-compare-table th,
#content .lb-compare-table td,
#content .lb-compare-table tbody th.row-label,
#content .tbox-video-carousel__tab,
#content .tbox-ahcalc-v3-node,
#content #hourly-vps-configurator .tbox-preset-btn {
  line-height: var(--lh-normal);
}

#content .tbox-ahcalc-vol-table__group-row th {
  text-transform: none;
}

#content .tbox-video-carousel__caption a,
#content .tbox-ah-storage-fanout__protocol,
#content .pagination,
#content .pagination td,
#content .pagination a,
#content .tbox-feature-matrix__row > .tbox-feature-matrix__spec,
#content .tbox-ah-observability-section--metrics .tbox-feature-matrix__spec {
  font-size: var(--fs-base);
  letter-spacing: 0;
}

#content .lb-usecase-card--recommended .lb-usecase-card__heading,
#content .tbox-ah-subheading {
  font-size: var(--fs-heading-sm);
  line-height: var(--lh-snug);
  letter-spacing: 0;
}

#content section#tbox-marketplace .tbox-marketplace-embed__head h2 {
  font-size: var(--fs-heading-lg);
}

#content .page-title {
  font-size: var(--fs-heading-lg);
  line-height: var(--lh-tight);
}

/* =========================================================================
   features-detail-section (App Hosting + Cloud VPS) — inverted committed (navy + orange)
   ========================================================================= */
.fops-v2-shell {
  --v2-accent: 0.6;
  --v2-pad-y: 4rem;
  --v2-card-pad: 1.05rem;
  --v2-card-gap: 0.6rem;
  --v2-tab-radius: var(--radius-sm);
}
.fops-v2-shell.tbox-section {
  background:
    radial-gradient(ellipse at top left, color-mix(in srgb, var(--brand-primary-deep) 45%, var(--brand-hero-dark)) 0%, var(--brand-hero-dark) 60%),
    var(--brand-hero-dark);
  color: var(--text-on-dark);
  padding-block: var(--v2-pad-y);
  position: relative;
  overflow: hidden;
}
.fops-v2-shell.tbox-section::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 12% 18%, color-mix(in srgb, var(--brand-cta) calc(var(--v2-accent) * 18%), transparent) 0, transparent 35%),
    radial-gradient(circle at 88% 80%, color-mix(in srgb, var(--brand-primary) calc(var(--v2-accent) * 22%), transparent) 0, transparent 40%);
  pointer-events: none;
}
.fops-v2-shell > * { position: relative; z-index: 1; }

/* Headline colors when the Cloud VPS "Top Features" header lives inside the
   dark .fops-v2-shell band. The shell paints a hero-style gradient regardless
   of theme, so light-mode defaults from .tbox-cvps-fops__* would render dark-
   on-dark. Override to on-dark tokens here. */
.fops-v2-shell.tbox-cvps-fops .tbox-cvps-fops__eyebrow { color: var(--brand-primary); }
.fops-v2-shell.tbox-cvps-fops .tbox-cvps-fops__title { color: #fff; }
.fops-v2-shell.tbox-cvps-fops .tbox-cvps-fops__lede { color: var(--text-on-dark-soft); }

/* Major capability cards (Top Features panel) live inside the dark shell.
   Mirror the rail glass palette and orange icon accent used by the other
   tabs so the first panel reads consistently with Compute/Storage/etc. */
.fops-v2-shell .tbox-cvps-fops-major {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-10);
}
.fops-v2-shell .tbox-cvps-fops-major:hover {
  border-color: color-mix(in srgb, var(--brand-cta) 45%, transparent);
}
.fops-v2-shell .tbox-cvps-fops-major__icon {
  background: color-mix(in srgb, var(--brand-cta) 18%, transparent);
  color: var(--brand-cta);
}
.fops-v2-shell .tbox-cvps-fops-major__title { color: var(--text-on-dark-strong); }
.fops-v2-shell .tbox-cvps-fops-major__desc { color: var(--text-on-dark-soft); }

.fops-v2-shell .tbox-fops-tabbar {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0.4rem;
  margin: 0 auto 3rem;
  width: fit-content;
  max-width: 100%;
  background: var(--surface-glass-06);
  border: 1px solid var(--surface-glass-10);
  border-radius: var(--v2-tab-radius);
  backdrop-filter: blur(8px);
}
.fops-v2-shell .tbox-fops-tablist {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  border-radius: var(--v2-tab-radius);
}
.fops-v2-shell .tbox-fops-tab {
  background: transparent;
  border: 0;
  color: var(--text-on-dark-muted);
  font-family: var(--ff-display);
  font-weight: 500;
  font-size: var(--fs-sm);
  padding: 0.6rem 1rem;
  border-radius: var(--v2-tab-radius);
  transition: background 0.2s ease, color 0.2s ease;
  cursor: pointer;
}
.fops-v2-shell .tbox-fops-tab:hover { color: #fff; background: var(--surface-glass-06); }
/* Give "Expand all" the same visual weight as a tab so it reads as a peer
   control, not a footnote — three of four panels sit behind it. */
.fops-v2-shell .tbox-fops-expand {
  background: var(--surface-glass-06);
  border: 1px solid var(--surface-glass-12);
  color: var(--text-on-dark-strong);
  font-family: var(--ff-display);
  font-size: var(--fs-sm);
  border-radius: var(--v2-tab-radius);
}
.fops-v2-shell .tbox-fops-expand:hover {
  background: var(--surface-glass-10);
  color: #fff;
}
.fops-v2-shell .tbox-fops-tab[aria-selected="true"] {
  /* Shared segmented-control active grammar (same recipe as the dark-variant
     .tbox-fops-tab base and .tbox-video-carousel__tab.is-active): elevated
     card + brand ring, not an orange fill — orange stays reserved for CTAs. */
  background: color-mix(in srgb, var(--brand-primary) 22%, var(--brand-hero-mid));
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand-primary) 45%, transparent), var(--shadow-sm);
}
.fops-v2-shell .tbox-cvps-fops-split__inner {
  display: grid;
  grid-template-columns: minmax(320px, 1fr) minmax(0, 1.4fr);
  gap: 3.5rem;
  align-items: start;
}
.fops-v2-shell .tbox-cvps-fops-split__title {
  font-family: var(--ff-display);
  font-size: clamp(1.8rem, 3.2vw, 2.75rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
  margin: 0 0 1rem;
  font-weight: 700;
}
.fops-v2-shell .tbox-cvps-fops-split__title::after {
  content: "";
  display: block;
  width: 64px;
  height: 3px;
  margin-top: 1.1rem;
  background: var(--brand-cta);
}
.fops-v2-shell .tbox-cvps-fops-split__desc {
  color: var(--text-on-dark-soft);
  font-size: 1.0625rem;
  line-height: 1.65;
  max-width: 42ch;
}
.fops-v2-shell .tbox-cvps-fops-split__meta {
  list-style: none;
  padding: 1.25rem 0 0;
  margin: 1.5rem 0 0;
  display: grid;
  gap: 0.6rem;
  border-top: 1px solid var(--surface-glass-12);
}
.fops-v2-shell .tbox-cvps-fops-split__meta li {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);
  display: grid;
  grid-template-columns: 8rem 1fr;
  gap: 0.75rem;
}
.fops-v2-shell .tbox-cvps-fops-split__meta strong { color: #fff; font-weight: 600; }
.fops-v2-shell .tbox-cvps-fops-split__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1.5rem;
  color: var(--brand-cta);
  text-decoration: none;
  font-weight: 600;
}
.fops-v2-shell .tbox-cvps-fops-split__link:hover { color: var(--brand-highlight); }
.fops-v2-shell .tbox-cvps-fops-split__cards { display: grid; gap: var(--v2-card-gap); }
.fops-v2-shell .tbox-cvps-fops-card {
  background: var(--surface-glass-04);
  border: 1px solid var(--surface-glass-10);
  border-radius: var(--radius-12);
  padding: var(--v2-card-pad);
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.fops-v2-shell .tbox-cvps-fops-card:hover {
  background: var(--surface-glass-08);
  border-color: var(--surface-glass-18);
  transform: translateY(-2px);
}
.fops-v2-shell .tbox-cvps-fops-card--lead {
  background: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-cta) calc(var(--v2-accent) * 100%), transparent) 0%,
    color-mix(in srgb, var(--brand-cta-active) calc(var(--v2-accent) * 100%), transparent) 100%);
  border-color: transparent;
  box-shadow: 0 20px 50px color-mix(in srgb, var(--brand-cta) calc(var(--v2-accent) * 30%), transparent);
}
.fops-v2-shell .tbox-cvps-fops-card--lead .tbox-cvps-fops-card__title,
.fops-v2-shell .tbox-cvps-fops-card--lead .tbox-cvps-fops-card__desc { color: #fff; }
.fops-v2-shell .tbox-cvps-fops-card__icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-glass-08);
  color: var(--brand-cta);
  border: 1px solid var(--surface-glass-10);
}
.fops-v2-shell .tbox-cvps-fops-card--lead .tbox-cvps-fops-card__icon {
  background: var(--surface-glass-22);
  color: #fff;
  border-color: transparent;
}
.fops-v2-shell .tbox-cvps-fops-card__title {
  font-family: var(--ff-display);
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 0 0 0.3rem;
  color: #fff;
  line-height: 1.25;
}
.fops-v2-shell .tbox-cvps-fops-card__desc {
  margin: 0;
  color: var(--text-on-dark-soft);
  font-size: 0.9375rem; /* intentional literal */
  line-height: 1.55;
}
.fops-v2-shell .tbox-fops-more {
  list-style: none;
  padding: 1rem 0 0;
  margin: 0.5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  border-top: 1px solid var(--surface-glass-10);
}
.fops-v2-shell .tbox-fops-more li {
  color: var(--text-on-dark-muted);
  font-size: var(--fs-xs);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.fops-v2-shell .tbox-fops-more .material-symbols-outlined { color: var(--brand-cta); }
.fops-v2-shell .tbox-glossary { color: var(--brand-cta); border-bottom-color: color-mix(in srgb, var(--brand-cta) 50%, transparent); }
@media (max-width: 800px) {
  .fops-v2-shell .tbox-cvps-fops-split__inner { grid-template-columns: 1fr; gap: 2rem; }
}

/* Horizontal-scrolling tab rail on mobile for the features-detail shells
   (Cloud VPS + App Hosting). Tabs stay on one line, swipe to reveal more,
   scrollbar hidden, edges fade so users see there's content off-screen.
   Placed below the v2-shell tablist base rule so it wins on cascade order. */
@media (max-width: 900px) {
  .fops-v2-shell .tbox-fops-tablist {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    gap: 0.25rem;
    padding: 0.4rem;
    max-width: 100%;
    width: auto;
    justify-content: flex-start;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14px, #000 calc(100% - 14px), transparent 100%);
  }
  .fops-v2-shell .tbox-fops-tablist::-webkit-scrollbar { display: none; }
  .fops-v2-shell .tbox-fops-tab {
    flex: 0 0 auto;
    scroll-snap-align: start;
    white-space: nowrap;
    padding: 0.55rem 0.85rem;
    font-size: var(--fs-sm);
  }
  .fops-v2-shell .tbox-fops-expand {
    flex: 0 0 auto;
    margin-left: 0.25rem;
  }
  /* Tabbar holds tablist + expand button as flex siblings on mobile; tablist
     gets the horizontal-scroll behavior, the button stays pinned at the end. */
  .fops-v2-shell .tbox-fops-tabbar {
    display: flex;
    align-items: center;
    width: 100%;
    max-width: 100%;
  }
  .fops-v2-shell .tbox-fops-tabbar > .tbox-fops-tablist {
    flex: 1 1 auto;
    min-width: 0;
  }
}

/* Rail panels live inside the fops-v2-shell dark backdrop — override the
   default light-surface rail body/borders/text to match the shell's glass
   palette so the card reads as part of the dark section, not a foreign
   white slab. The gradient header stays as designed. */
.fops-v2-shell .tbox-cvps-fops-rail {
  background: var(--surface-glass-04);
  border-color: var(--surface-glass-10);
  /* Match the v2-shell lead-card gradient: orange at v2-accent alpha over
     the dark shell so white text on the header passes WCAG contrast. */
  --rail-grad: linear-gradient(135deg,
    color-mix(in srgb, var(--brand-cta) calc(var(--v2-accent) * 100%), transparent) 0%,
    color-mix(in srgb, var(--brand-cta-active) calc(var(--v2-accent) * 100%), transparent) 100%);
}
.fops-v2-shell .tbox-cvps-fops-rail__row {
  border-bottom-color: var(--surface-glass-10);
}
.fops-v2-shell .tbox-cvps-fops-rail__row-title {
  color: var(--text-on-dark-strong);
}
.fops-v2-shell .tbox-cvps-fops-rail__subhead {
  color: var(--text-on-dark-strong);
}
.fops-v2-shell .tbox-cvps-fops-rail__row-desc {
  color: var(--text-on-dark-soft);
}
.fops-v2-shell .tbox-cvps-fops-rail__row-icon {
  color: var(--brand-cta);
}
.fops-v2-shell .tbox-cvps-fops-rail .tbox-glossary {
  color: var(--brand-cta);
  border-bottom-color: color-mix(in srgb, var(--brand-cta) 50%, transparent);
}

/* =========================================================================
   Pricing trust signals — chip pill bar (density=comfortable)
   ========================================================================= */
.tbox-section > .tbox-container > p.tbox-pricing-trust-signals.tps-v1,
.tbox-pricing-trust-signals.tps-v1 {
  max-width: none;
  width: fit-content;
  margin: 0.75rem auto 0;
  justify-self: center;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 0.85rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  justify-content: center;
  list-style: none;
}
.tps-v1 .tps-v1-item {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--fs-sm);
  color: var(--text-secondary);
  white-space: nowrap;
}
.tps-v1 .tps-v1-item + .tps-v1-item::before {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--border-mid);
  margin-right: 0.3rem;
}
.tps-v1 .tps-v1-item .material-symbols-outlined {
  font-size: 18px;
  color: var(--brand-primary-deep);
}
.tps-v1 .tps-v1-item--lead {
  color: var(--brand-primary-ink);
  font-weight: 600;
}
.tps-v1 .tps-v1-item--lead .material-symbols-outlined {
  color: var(--brand-cta);
}
.tps-v1 .tps-v1-key {
  font-weight: 600;
  color: var(--brand-primary-ink);
}
:root[data-theme="dark"] .tps-v1 .tps-v1-item--lead,
:root[data-theme="dark"] .tps-v1 .tps-v1-key {
  color: var(--text-primary);
}
:root[data-theme="dark"] .tps-v1 .tps-v1-item .material-symbols-outlined {
  color: var(--brand-primary-text);
}

/* =========================================================================
   Stack primitives — categorized rows (Variant E)
   ========================================================================= */
.tbox-ah-stack-primitives { padding-block: 4rem; }
.tbox-ah-stack-primitives__head {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: 2.5rem;
  align-items: end;
  margin-bottom: 2rem;
}
.tbox-ah-stack-primitives__head .tbox-section__heading,
.tbox-ah-stack-primitives__head .tbox-section__desc { margin: 0; }
.tbox-ah-stack-primitives__head .tbox-section__heading {
  font-family: var(--ff-display);
  font-size: clamp(1.85rem, 3.2vw, 2.6rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--brand-primary-ink);
  font-weight: 700;
}
.tbox-ah-stack-primitives__head .tbox-section__desc {
  font-size: var(--fs-md);
  line-height: 1.55;
  color: var(--text-secondary);
}

.tbox-ah-stack-primitives__row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 1.75rem;
  padding: 1.5rem 0;
  border-top: 1px solid var(--border-light);
}
.tbox-ah-stack-primitives__row:last-child { border-bottom: 1px solid var(--border-light); }

.tbox-ah-stack-primitives__row-label { align-self: start; padding-top: 0.5rem; }
.tbox-ah-stack-primitives__row-label h3 {
  font-family: var(--ff-display);
  font-size: var(--fs-lg);
  font-weight: 700;
  color: var(--brand-primary-ink);
  margin: 0 0 0.375rem;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.tbox-ah-stack-primitives__row-label p {
  margin: 0;
  color: var(--text-tertiary);
  font-size: var(--fs-sm);
  line-height: 1.45;
}

.tbox-ah-stack-primitives__row-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.875rem;
}

.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive {
  background: var(--surface-base);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-12);
  padding: 1.125rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  min-width: 0;
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive:hover {
  border-color: var(--brand-primary-border-tint-18);
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive--lead {
  border-color: var(--brand-cta);
}

.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__head {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm-plus);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary-bg);
  color: var(--brand-primary-deep);
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive--lead .tbox-ah-stack-primitive__icon {
  background: var(--brand-cta-bg-soft);
  color: var(--brand-cta-text-deep);
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__icon .material-symbols-outlined { font-size: 20px; }
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__icon svg { width: 20px; height: 20px; }
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive h4 {
  font-family: var(--ff-display);
  font-size: var(--fs-md);
  font-weight: 700;
  color: var(--brand-primary-ink);
  margin: 0;
  letter-spacing: -0.005em;
  line-height: 1.2;
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__desc {
  margin: 0;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__list li {
  font-size: var(--fs-2xs);
  color: var(--brand-primary-text);
  padding: 0.18rem 0.5rem;
  border-radius: var(--radius-sm-plus);
  background: var(--brand-primary-bg-18);
  border: 1px solid var(--brand-primary-25);
  line-height: 1.3;
  white-space: nowrap;
  font-weight: 600;
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive--lead .tbox-ah-stack-primitive__list li {
  color: var(--brand-cta-text-deep);
  background: var(--brand-cta-bg-soft);
  border-color: var(--brand-cta-30);
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__link {
  margin-top: auto;
  padding-top: 0.125rem;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  color: var(--brand-primary-deep);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  width: fit-content;
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__link:hover {
  color: var(--brand-primary);
  text-decoration: underline;
  text-underline-offset: 0.2em;
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__link .material-symbols-outlined {
  font-size: 1rem;
  transition: transform 0.15s ease;
}
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__link:hover .material-symbols-outlined { transform: translateX(2px); }

:root[data-theme="dark"] .tbox-ah-stack-primitives__head .tbox-section__heading { color: var(--text-on-dark); }
:root[data-theme="dark"] .tbox-ah-stack-primitives__row { border-color: var(--surface-glass-12); }
:root[data-theme="dark"] .tbox-ah-stack-primitives__row:last-child { border-bottom-color: var(--surface-glass-12); }
:root[data-theme="dark"] .tbox-ah-stack-primitives__row-label h3 { color: var(--text-on-dark); }
:root[data-theme="dark"] .tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive {
  background: var(--surface-card-elevated);
  border-color: var(--surface-glass-12);
}
:root[data-theme="dark"] .tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive--lead {
  border-color: var(--brand-cta);
}
:root[data-theme="dark"] .tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive h4 { color: var(--text-on-dark); }
:root[data-theme="dark"] .tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__list li {
  background: color-mix(in srgb, var(--brand-primary) 18%, transparent);
  border-color: color-mix(in srgb, var(--brand-primary) 35%, transparent);
  color: var(--blue-0);
}
:root[data-theme="dark"] .tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive--lead .tbox-ah-stack-primitive__list li {
  background: color-mix(in srgb, var(--brand-cta) 22%, transparent);
  border-color: color-mix(in srgb, var(--brand-cta) 45%, transparent);
  color: var(--warm-0);
}

@media (max-width: 900px) {
  .tbox-ah-stack-primitives__head { grid-template-columns: 1fr; gap: 1rem; }
  .tbox-ah-stack-primitives__row { grid-template-columns: 1fr; gap: 1rem; padding: 1.25rem 0; }
  .tbox-ah-stack-primitives__row-tiles { grid-template-columns: 1fr; }
}

/* App Hosting clustering — shared copy column for Load Balancer, DB & Storage sections */
.tbox-clustering-db__copy,
.tbox-clustering-storage__copy,
.tbox-clustering-lb__copy { display: flex; flex-direction: column; gap: 1.25rem; }
.tbox-clustering-db__copy > .tbox-section__desc,
.tbox-clustering-storage__copy > .tbox-section__desc,
.tbox-clustering-lb__copy > .tbox-section__desc { margin: 0; max-width: none; }

/* App Hosting clustering — Database clusters section.
   Sequential restart card uses tbox-ui-proof--card chrome; only its
   margin in the copy column flow is set here. */
.tbox-clustering-db__restart { margin: 0; }
.tbox-clustering-db__checklist { margin-top: clamp(2rem, 4vw, 3rem); padding-top: clamp(1.5rem, 3vw, 2rem); border-top: 1px solid var(--border-light); }
.tbox-clustering-db__checklist .tbox-extras-checklist { margin: 0; }
.tbox-clustering-db__checklist .tbox-extras-checklist__list { columns: 2; column-gap: 1.75rem; }
.tbox-clustering-db__checklist .tbox-extras-checklist__item { break-inside: avoid; margin-bottom: 0.75rem; }
@media (max-width: 768px) {
  .tbox-clustering-db__checklist .tbox-extras-checklist__list { columns: 1; }
}

.tbox-clustering-db__diff-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

@media (max-width: 640px) {
  .tbox-clustering-db__diff-grid {
    grid-template-columns: 1fr;
  }
}

.tbox-clustering-db__diff-item {
  padding: var(--space-lg) var(--space-lg-plus);
  background: var(--brand-primary-08);
  border: 1px solid color-mix(in srgb, var(--brand-primary) 36%, var(--brand-primary-border-tint-16) 64%);
  border-radius: var(--radius-sm-plus);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tbox-clustering-db__diff-title {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 700;
  color: var(--text-primary);
}

.tbox-clustering-db__diff-desc {
  font-size: var(--fs-sm);
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}

/* App Hosting clustering — supporting card pairs (Load Balancer & Shared storage) */
.tbox-clustering-storage__modes,
.tbox-clustering-lb__modes { display: grid; gap: 0.85rem; grid-template-columns: 1fr 1fr; }
.tbox-clustering-storage__mode,
.tbox-clustering-lb__mode { padding: 0.95rem 1.05rem; background: var(--surface-subtle); border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.tbox-clustering-storage__mode h3,
.tbox-clustering-lb__mode h3 { margin: 0 0 0.25rem; font-size: var(--fs-base); color: var(--brand-primary-text); }
.tbox-clustering-storage__mode p,
.tbox-clustering-lb__mode p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: var(--text-secondary); }
@media (max-width: 640px) {
  .tbox-clustering-storage__modes,
  .tbox-clustering-lb__modes { grid-template-columns: 1fr; }
}

/* Inline nudge — low-profile text-link CTA between content sections */
.tbox-inline-nudge {
  padding: var(--space-md) 0;
  text-align: center;
  font-size: var(--fs-base);
  color: var(--text-secondary);
}

.tbox-inline-nudge__link {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  color: var(--brand-primary);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  border-bottom: 1px solid color-mix(in srgb, var(--brand-primary) 40%, transparent);
  padding-bottom: 0.1em;
  transition: color var(--ease-fast), border-bottom-color var(--ease-fast);
}

.tbox-inline-nudge__link:hover {
  color: var(--brand-primary-dark);
  border-bottom-color: var(--brand-primary-dark);
}

.tbox-inline-nudge__link .material-symbols-outlined {
  font-size: 1em;
  transition: transform var(--ease-fast);
}

.tbox-inline-nudge__link:hover .material-symbols-outlined {
  transform: translateX(3px);
}

/* --cta modifier: contained strip with button-styled action.
   Heavier than the default text-link nudge, lighter than tbox-cta-band. */
.tbox-inline-nudge--cta {
  padding: var(--space-lg) 0;
  text-align: left;
}

.tbox-inline-nudge--cta .tbox-inline-nudge__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md) var(--space-lg);
  padding: var(--space-md) var(--space-lg);
  border-radius: var(--radius-lg);
  background: var(--surface-cta-band);
  border: 1px solid var(--border-cta-band);
}

.tbox-inline-nudge--cta .tbox-inline-nudge__lede {
  margin: 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  line-height: 1.35;
  flex: 1 1 22ch;
  min-width: 0;
}

.tbox-inline-nudge--cta .tbox-inline-nudge__btn {
  flex: 0 0 auto;
}

.tbox-inline-nudge--cta .tbox-inline-nudge__btn .material-symbols-outlined {
  font-size: 1.1em;
  margin-left: 0.25em;
  transition: transform var(--ease-fast);
}

.tbox-inline-nudge--cta .tbox-inline-nudge__btn:hover .material-symbols-outlined {
  transform: translateX(3px);
}

@media (width <= 640px) {
  .tbox-inline-nudge--cta .tbox-inline-nudge__row {
    justify-content: stretch;
  }

  .tbox-inline-nudge--cta .tbox-inline-nudge__btn {
    width: 100%;
    justify-content: center;
  }
}

/* ── App Hosting persona-pass additions ───────────────────────────── */

/* Orientation strip above jump bar */
.tbox-ah-orient {
  max-width: var(--width-value-strip);
  margin: 1.25rem auto 0;
  padding: 0.65rem 1.5rem;
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  line-height: 1.5;
  text-align: center;
}
.tbox-ah-orient a {
  color: var(--brand-primary-deep);
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.tbox-ah-orient a:hover,
.tbox-ah-orient a:focus-visible {
  color: var(--brand-cta);
}
:root[data-theme="dark"] .tbox-ah-orient { color: var(--text-on-dark-muted); }
:root[data-theme="dark"] .tbox-ah-orient a { color: var(--brand-cta); }

/* Per-panel "In this chapter" ToC strip */
.tbox-fops-toc {
  margin: 0 0 1.5rem;
  padding: 0.75rem 1rem;
  background: var(--surface-glass-04);
  border: 1px solid var(--surface-glass-10);
  border-radius: var(--radius-sm-plus);
  color: var(--text-on-dark-muted);
  font-size: var(--fs-sm);
  line-height: 1.5;
}
.tbox-fops-toc::before {
  content: "In this chapter: ";
  color: #fff;
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Pricing-section single inline trial note (replaces chip strip) */
.tbox-section .tbox-container .tbox-pricing-trial-note {
  margin: 0.75rem auto 0;
  max-width: var(--prose-measure-wide);
  font-size: var(--fs-sm);
  /* text-secondary, not text-muted: this reassurance line sits at the
     conversion decision point and must clear 4.5:1 on the --alt band. */
  color: var(--text-secondary);
  text-align: center;
}
:root[data-theme="dark"] .tbox-pricing-trial-note { color: var(--text-on-dark-muted); }

/* Value strip 2x2 mobile: replace 1px-gap divider with gap + tinted cards */
@media (width <= 900px) {
  .tbox-value-strip__wrap {
    background: transparent;
    gap: 0.625rem;
    box-shadow: none;
    overflow: visible;
  }
  .tbox-value-card {
    background: var(--surface-base);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
  }
  .tbox-value-strip:has(+ :is(.tbox-jump-bar, .tbox-proof-strip-compact)) .tbox-value-strip__wrap {
    border-radius: 0;
    box-shadow: none;
  }
  :root[data-theme="dark"] .tbox-value-card {
    background: var(--surface-dark);
    border-color: var(--surface-glass-10);
  }
}

/* Value strip ≤600px: condensed 2x2 chip grid (canonical mobile treatment) */
@media (width <= 600px) {
  .tbox-value-strip { padding: 0 var(--space-lg); }

  .tbox-value-strip__wrap {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: var(--space-sm);
  }

  .tbox-value-card {
    min-height: 0;
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  /* Cards are gap-separated chips; every corner rounds fully.
     Specificity (0,4,0) to beat the connected-strip :has() per-corner radii. */
  .tbox-value-strip .tbox-value-strip__wrap .tbox-value-card:is(:first-child, :nth-child(2), :nth-child(3), :last-child) {
    border-radius: var(--radius-lg);
  }

  .tbox-value-card__header {
    align-items: center;
    gap: var(--space-xs);
    margin-bottom: 0;
  }

  .tbox-value-card__title {
    font-size: var(--fs-sm);
    line-height: var(--lh-snug);
  }

  .tbox-value-card__desc { display: none; }

  /* Statement of Support exception: the chip descriptions ARE the policy
     (the support boundary itself), not decoration — keep them visible on
     mobile, stacked single-column so they fit. */
  .tbox-value-strip[data-value-strip-set="statement-of-support"] .tbox-value-strip__wrap {
    grid-template-columns: 1fr;
  }

  .tbox-value-strip[data-value-strip-set="statement-of-support"] .tbox-value-card {
    justify-content: flex-start;
  }

  .tbox-value-strip[data-value-strip-set="statement-of-support"] .tbox-value-card__header {
    margin-bottom: var(--space-2xs);
  }

  .tbox-value-strip[data-value-strip-set="statement-of-support"] .tbox-value-card__desc {
    display: block;
    font-size: var(--fs-sm);
  }
}

/* Deep-linkable coverage rows and headings (#sld-*, #cp-*, #control-panel-detail)
   on the Statement of Support: clear the sticky header + jump bar when prose
   bullets link into the Service-Level Detail tables. */
.tbox-policy-section .tbox-spec-table tr[id],
.tbox-policy-section h3[id] {
  scroll-margin-top: calc(var(--wp-admin-bar-h, 0px) + var(--header-height-scrolled, 80px) + 78px);
}

/* Mobile fops tablist: tighter padding so all six labels wrap on small screens */
@media (max-width: 540px) {
  .fops-v2-shell .tbox-fops-tab {
    padding: 0.5rem 0.75rem;
    font-size: var(--fs-xs);
  }
  .tbox-video-carousel__tab {
    min-width: 0;
    padding: 0.75rem;
    font-size: var(--fs-sm);
  }
  .tbox-fops-toc { font-size: var(--fs-xs); }
}

/* ════════════════════════════════════════════════════════════════════════
   Home page body — editorial brochure (intro, product showcases, adjacent
   products, operating-model band). Section backgrounds come from
   .tbox-section / .tbox-section--alt / .tbox-section--dark; this block owns
   structure and components only.
   ════════════════════════════════════════════════════════════════════════ */

/* Intro band (heading + desc are reused by the adjacent-products head) */
.tbox-home-section-heading {
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  line-height: 1.15;
  margin: 0 0 1rem;
  color: var(--text-primary);
  max-width: 48ch;
}
.tbox-home-intro__desc {
  font-size: 1.0625rem;
  color: var(--text-secondary);
  max-width: var(--prose-measure-default);
  margin: 0;
}
/* Editorial brochure headings: left-aligned, no centered underline accent.
   Chained child selectors beat the global `section > .tbox-container > h2`
   centering + ::after underline rules. */
section > .tbox-container > .tbox-home-section-heading,
section > .tbox-container > .tbox-home-showcase__name {
  text-align: left;
  padding-bottom: 0;
}
section > .tbox-container > .tbox-home-section-heading::after,
section > .tbox-container > .tbox-home-showcase__name::after {
  content: none;
}

/* Unified home section-heading scale (40px ceiling).
   One auditable rule; `#content` (id) out-specifies the per-section
   font-size rules so non-home reuse of these classes is untouched. */
body.home #content :is(
  .tbox-home-section-heading,
  .tbox-home-showcase__name,
  .tbox-home-operating__heading,
  .tbox-faq-section .tbox-section__heading,
  .tbox-trust-section .tbox-section__heading,
  .tbox-cta-section--blueprint h2
) {
  font-size: clamp(1.875rem, 3vw, 2.5rem);
}

/* Consistent left-aligned accent under home section headings.
   `#content` out-specifies the `content: none` opt-out above; heading
   alignment is unchanged (these headings stay left-aligned). */
body.home #content :is(.tbox-home-section-heading, .tbox-home-showcase__name) {
  position: relative;
  padding-bottom: 0.85rem;
}
body.home #content :is(.tbox-home-section-heading, .tbox-home-showcase__name)::after {
  content: "";
  position: absolute;
  left: 0;
  transform: none; /* reset inherited translateX(-50%) from the global section > h2::after rule */
  bottom: 0;
  width: 48px;
  height: 3px;
  border-radius: var(--radius-xs);
  background: var(--brand-primary);
}
/* Dark bands (operating model, App Hosting showcase): highlight accent. */
body.home #content .tbox-section--dark :is(.tbox-home-section-heading, .tbox-home-showcase__name)::after {
  background: var(--brand-highlight);
}
/* Trust section heading: left-aligned underline to match the other home
   section headings, and suppress the slim `::before` so it carries a
   single accent. Scoped to `body.home` so the component is unchanged
   elsewhere. */
body.home .tbox-trust-section .tbox-section__heading::after {
  left: 0;
  transform: none;
  background: var(--brand-highlight);
}
body.home .tbox-trust-section--slim .tbox-section__heading::before {
  content: none;
}

/* Product showcase */
.tbox-home-showcase__name {
  font-size: clamp(2rem, 3.5vw, 2.75rem);
  line-height: 1.1;
  margin: 0 0 0.5rem;
  color: var(--text-primary);
}
.tbox-home-showcase__tagline {
  font-size: var(--fs-lg);
  color: var(--text-secondary);
  margin: 0 0 2rem;
  max-width: 42ch;
}
/* Off-ramp for non-server visitors before the technical VPS deep-dive. */
.tbox-home-showcase__offramp {
  font-size: var(--fs-sm);
  color: var(--text-tertiary);
  margin: -1.25rem 0 2rem;
}
.tbox-home-showcase__offramp a {
  color: var(--brand-primary-text);
  text-decoration: underline;
  text-underline-offset: 3px;
}
/* Sits after the demo carousel so each showcase ends on its CTA pair. */
.tbox-home-showcase__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem;
  margin-top: clamp(1.5rem, 3vw, 2.5rem);
}

/* Mechanism callout — hairline full-border tinted block (no side stripe) */
.tbox-home-mechanism {
  margin: 0 0 1.75rem;
  padding: 1.25rem 1.5rem;
  background: var(--brand-primary-bg);
  border: 1px solid var(--brand-primary-30);
  border-radius: var(--radius-md);
}
.tbox-home-mechanism__label {
  display: block;
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-primary);
  margin-bottom: 0.35rem;
}
/* The mechanism panel bg is a translucent brand tint: over white in light mode
   --brand-primary (#269ff6) is only 2.85:1, so darken to --brand-primary-dark
   (5.99:1). Dark mode keeps the brighter primary (6.65:1 on the dark tint). */
:root:not([data-theme="dark"]) .tbox-home-mechanism__label {
  color: var(--brand-primary-dark);
}
.tbox-home-mechanism__title {
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0 0 0.5rem;
}
.tbox-home-mechanism__body {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
  max-width: var(--prose-measure-default);
}

/* Spec list */
.tbox-home-specs {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.55rem 1rem;
  margin: 0 0 2rem;
  font-size: var(--fs-base);
}
.tbox-home-specs dt {
  font-family: var(--tbox-font-mono);
  font-size: var(--fs-xs);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 0.15rem;
}
.tbox-home-specs dd {
  margin: 0;
  color: var(--text-primary);
}
.tbox-home-specs dd strong {
  color: var(--brand-primary-deep);
}

/* Price tag */
.tbox-home-pricetag {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.5rem;
  max-width: 100%;
  padding: 0.5rem 0.85rem;
  background: var(--brand-primary-bg);
  border-radius: var(--radius-sm);
  margin-bottom: 1.5rem;
  font-size: var(--fs-base);
}
.tbox-home-pricetag__price {
  font-size: 1.25rem;
  font-weight: var(--fw-bold);
  color: var(--text-primary);
}
.tbox-home-pricetag__unit {
  color: var(--text-secondary);
}
/* --text-secondary, not --text-muted: the muted gray measures ~3.9:1 on the
   pale brand tint and these notes carry money/trial details. */
.tbox-home-pricetag__note {
  color: var(--text-secondary);
  font-size: var(--fs-sm);
  margin-left: 0.25rem;
}
/* Credit-mechanics note links to its FAQ answer; keep it quiet, not button-blue */
.tbox-home-pricetag__note a {
  color: inherit;
  text-decoration: underline dotted;
  text-underline-offset: 2px;
}
.tbox-home-pricetag__note a:hover,
.tbox-home-pricetag__note a:focus-visible {
  color: var(--brand-primary-deep);
}
/* Stacked notes read as one run-on line when inline; only the first note
   shares the price row, the rest each take a full line. */
.tbox-home-pricetag__note + .tbox-home-pricetag__note {
  flex-basis: 100%;
  margin-left: 0;
}
/* Below the price row the long trial/credit notes overflow a 390px viewport;
   drop each note to its own full-width line. */
@media (width <= 640px) {
  /* Block-level flex: keeps "from $X.XX /mo" on one line at the column's
     full width instead of shrink-wrapping to the wrapped note's width. */
  .tbox-home-pricetag {
    display: flex;
  }

  .tbox-home-pricetag__note {
    flex-basis: 100%;
    margin-left: 0;
  }
}

/* Adjacent products row */
.tbox-home-adjacent__head {
  margin-bottom: 2.5rem;
}
.tbox-home-adjacent__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1fr;
  gap: 1rem;
}
.tbox-home-adj-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.5rem;
  background: var(--surface-card);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.tbox-home-adj-card:hover {
  border-color: var(--brand-primary);
  transform: translateY(-2px);
}
/* The "Coming soon" card is a span, not a link — no hover lift, no link affordance. */
.tbox-home-adj-card--soon:hover {
  border-color: var(--border-mid);
  transform: none;
}
.tbox-home-adj-card__row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--fs-xs);
  color: var(--text-muted);
  font-family: var(--tbox-font-mono);
}
.tbox-home-adj-card__row .material-symbols-outlined {
  font-size: var(--fs-lg);
  color: var(--brand-primary);
}
.tbox-home-adj-card__name {
  font-size: var(--fs-lg);
  font-weight: var(--fw-semibold);
  color: var(--text-primary);
  margin: 0;
}
.tbox-home-adj-card__desc {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: var(--lh-relaxed);
}
.tbox-home-adj-card__link {
  margin-top: auto;
  padding-top: 0.5rem;
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  color: var(--brand-primary);
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.tbox-home-adj-card__link .material-symbols-outlined {
  font-size: 1rem;
}
.tbox-home-adj-card__link--muted {
  color: var(--text-muted);
}
.tbox-home-adj-card--soon {
  border: 1px dashed var(--border-mid);
  background: var(--surface-subtle);
}
/* Anchor card — one weighted card breaks the four-identical-cards monotony */
.tbox-home-adj-card--anchor {
  background: color-mix(in srgb, var(--surface-card) 92%, var(--brand-primary) 8%);
  border-color: color-mix(in srgb, var(--border-light) 45%, var(--brand-primary) 55%);
}
.tbox-home-adj-card--anchor .tbox-home-adj-card__name {
  font-size: var(--fs-xl);
}
.tbox-home-adj-card__badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.6rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-cap);
  background: var(--surface-muted);
  color: var(--text-muted);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
@media (width <= 900px) {
  .tbox-home-adjacent__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* Adjacent services ≤600px: condensed 2x2 chip grid, mirroring the canonical
   value-strip mobile treatment (hidden descriptions, compact chips) so the
   section doesn't stack into four full-height cards before the trust strip. */
@media (width <= 600px) {
  .tbox-home-adjacent__grid {
    grid-template-columns: 1fr 1fr;
    grid-auto-rows: 1fr;
    gap: var(--space-sm);
  }

  .tbox-home-adj-card {
    padding: var(--space-md);
    justify-content: center;
    border-radius: var(--radius-lg);
  }

  .tbox-home-adj-card__desc,
  .tbox-home-adj-card__link {
    display: none;
  }

  .tbox-home-adj-card__name,
  .tbox-home-adj-card--anchor .tbox-home-adj-card__name {
    font-size: var(--fs-base);
  }
}

/* Operating-model band — tint rhythm break between the dark App Hosting
   showcase and the dark-blue trust strip */
.tbox-home-operating__head {
  margin-bottom: 2.5rem;
}
.tbox-home-operating__heading {
  color: var(--text-primary);
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  max-width: 38ch;
}
.tbox-home-operating__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
}
.tbox-home-operating-card {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    "icon title"
    "icon body";
  column-gap: var(--space-lg);
  padding: 1.5rem;
  background: none;
  border: 0;
  border-radius: 0;
}
.tbox-home-operating-card + .tbox-home-operating-card {
  border-left: 1px solid var(--border-light);
}
.tbox-home-operating-card__icon {
  grid-area: icon;
  align-self: start;
  display: inline-flex;
  width: 2rem;
  height: 2rem;
  align-items: center;
  justify-content: center;
  background: var(--brand-primary-20);
  color: var(--brand-primary);
  border-radius: var(--radius-sm);
}
.tbox-home-operating-card__icon .material-symbols-outlined {
  font-size: 1.25rem;
}
.tbox-home-operating-card__title {
  grid-area: title;
  font-size: 1.0625rem;
  font-weight: var(--fw-semibold);
  margin: 0 0 0.35rem;
  color: var(--text-primary);
}
.tbox-home-operating-card__body {
  grid-area: body;
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.55;
}
@media (width <= 760px) {
  .tbox-home-operating__grid {
    grid-template-columns: 1fr;
  }
  .tbox-home-operating-card + .tbox-home-operating-card {
    border-left: 0;
    border-top: 1px solid var(--border-light);
  }
}

/* Fleet monitor wrapper inside the Cloud VPS showcase carousel.
   .tbox-home-fleet stands in for the /cloud-vps/ id="hero-section" context
   the fleet CSS is otherwise scoped to (see re-scoped fleet rules elsewhere
   in this file). */
.tbox-home-fleet {
  display: flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
:root[data-theme="dark"] .tbox-home-fleet {
  --cloud-vps-fleet-monitor-shell: var(--blue-8);
}

/* App Hosting showcase (section 02) — constant dark band in both themes,
   matching the operating-model band. The Cloud VPS showcase (section 01)
   intentionally stays on its light surface for product-to-product contrast. */
.tbox-section--dark.tbox-home-showcase--app {
  background: var(--brand-hero-dark);
}
:root[data-theme="dark"] .tbox-section--dark.tbox-home-showcase--app {
  background: var(--brand-hero-dark);
}

/* Light-mode dark-island: re-point the theme tokens the copy column, the CTAs
   and the video carousel consume so they render dark on the navy band. In dark
   mode :root already supplies dark values, so this block is skipped. Mirrors
   the App Hosting hero dark-island pattern (see the dark-surface context block
   in the dark/light theme section). The --tbox-btn-* text tokens keep the warm-
   outline "Start Free Trial" CTA legible on navy. */
:root:not([data-theme="dark"]) .tbox-home-showcase--app {
  --text-primary:          var(--neutral-0);
  --text-secondary:        var(--neutral-1);
  --text-muted:            var(--neutral-2);
  --surface-subtle:        #0b1726;
  --border-light:          rgb(137 166 199 / 18%);
  --brand-primary-text:    var(--blue-3);
  --tbox-btn-primary-text: var(--text-inverse);
  --tbox-btn-ink:          var(--text-inverse);
}

/* The App Hosting showcase is a constant dark band, so its video carousel must
   render with the dark-mode surface treatment in light mode too — otherwise the
   base (light) pill track and caption card collide with the light-mode dark-
   island text tokens above. In dark mode :root already supplies these values
   and this block is skipped. */
:root:not([data-theme="dark"]) .tbox-home-showcase--app .tbox-video-carousel {
  --surface-base: #07111f;
  --border-mid: rgb(137 166 199 / 26%);
}
:root:not([data-theme="dark"]) .tbox-home-showcase--app .tbox-video-carousel__tabs {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 8%);
}
:root:not([data-theme="dark"]) .tbox-home-showcase--app .tbox-video-carousel__tab.is-active {
  background: color-mix(in srgb, var(--surface-base) 88%, var(--brand-primary) 10%);
  border-color: color-mix(in srgb, var(--brand-primary) 30%, var(--border-mid));
}

/* The mechanism + price-tag blocks use a pale brand tint that reads as a
   bright panel on navy. Swap to the glass treatment the operating-model
   cards use. */
.tbox-home-showcase--app .tbox-home-mechanism,
.tbox-home-showcase--app .tbox-home-pricetag {
  background: var(--surface-glass-04);
  border: 1px solid var(--surface-glass-10);
}

/* Spec-list emphasis: dd strong defaults to --brand-primary-deep, a dark blue
   that is illegible on the navy band and is not re-pointed in either theme.
   Use the section's brand-text token (light blue in both themes) instead. */
.tbox-home-showcase--app .tbox-home-specs dd strong {
  color: var(--brand-primary-text);
}

/* App Hosting home showcase: feature rows below the autoscaling monitor */
.tbox-ah-right-feats {
  margin-top: 10px;
}
.tbox-ah-right-feat {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 13px 0;
  border-top: 1px solid var(--border-light);
  font-size: var(--fs-sm);
  line-height: 1.45;
}
.tbox-ah-right-feat .material-symbols-outlined {
  font-size: 19px;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--brand-primary);
}
.tbox-ah-right-feat__title {
  display: block;
  font-weight: 600;
  color: var(--text-on-dark);
  margin-bottom: 2px;
}
.tbox-ah-right-feat__sub {
  display: block;
  font-size: var(--fs-xs);
  color: var(--text-muted);
}
/* Light-mode dark-island overrides: section stays navy in light mode; these re-point
   component tokens that the dark-island block does not cover. */
:root:not([data-theme="dark"]) .tbox-home-showcase--app .tbox-ah-right-feat {
  border-top-color: var(--brand-primary-14);
}

/* Product showcase — animation beside copy in a top split, then a
   full-width video carousel (pill tabs, video, caption card) under it. */
.tbox-home-showcase__split {
  display: grid;
  /* animation cell slightly wider than the copy column */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.04fr);
  grid-template-areas: "copy animation";
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
  padding-bottom: var(--space-lg);
  margin-bottom: var(--space-2xl);
  border-bottom: 1px solid var(--border-light);
}
.tbox-home-showcase__split > * {
  min-width: 0;
}
.tbox-home-showcase__copy {
  grid-area: copy;
}

/* App Hosting mirrors the split (monitor leads on the left) so the two
   showcase sections don't read as the same template twice in a row.
   DOM order is unchanged; mobile stacking below stays copy-first. */
.tbox-home-showcase--app .tbox-home-showcase__split {
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr);
  grid-template-areas: "animation copy";
}

/* Layout cell only — no frame of its own; both monitors already self-frame. */
.tbox-home-showcase__animation {
  display: flex;
  grid-area: animation;
}
.tbox-home-showcase__animation > * {
  width: 100%;
}

/* Demos mini-heading */
.tbox-home-showcase__demos-head {
  margin-bottom: var(--space-lg);
}
.tbox-home-showcase__demos-title {
  font-size: var(--fs-heading-md);
  line-height: 1.15;
  margin: 0 0 0.4rem;
  color: var(--text-primary);
}
.tbox-home-showcase__demos-desc {
  font-size: var(--fs-base);
  color: var(--text-secondary);
  margin: 0;
  max-width: var(--prose-measure-default);
}

@media (width <= 900px) {
  /* The --app variant selector outranks the base rule, so it must be named
     here too or the App Hosting split stays two-column on mobile. */
  .tbox-home-showcase__split,
  .tbox-home-showcase--app .tbox-home-showcase__split {
    grid-template-columns: 1fr;
    grid-template-areas:
      "copy"
      "animation";
  }
}


/* ============================================================
   Cloud VPS Pricing Reference Grid (/cloud-vps/pricing)
   Live hourly + monthly rate table rendered from the
   configurator bootstrap (hourly-vps-configurator.js).
   ============================================================ */
.tbox-cvps-pricing-ref__header { margin-bottom: var(--space-xl); }

.tbox-cvps-pricing-grid {
  border: 1px solid var(--border-light, var(--ahcalc-slate-200));
  border-radius: var(--radius-lg, var(--radius-md));
  background: var(--surface-card, #fff);
  overflow: hidden;
}

.tbox-cvps-pricing-grid__loading {
  padding: var(--space-xl);
  text-align: center;
  color: var(--text-muted, var(--ahcalc-slate-500));
  font-size: var(--fs-sm);
}

.tbox-cvps-pricing-grid__table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
}

.tbox-cvps-pricing-grid__table thead th {
  text-align: left;
  padding: var(--space-sm-mid) var(--space-lg);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  /* Use the body-row gray (slate-600), not slate-500: the lighter muted token
     landed at ~4.42:1 on the subtle header fill, under the 4.5:1 AA floor. */
  color: var(--text-secondary, var(--ahcalc-slate-600));
  background: var(--surface-subtle, var(--brand-primary-10));
  border-bottom: 1px solid var(--border-light, var(--ahcalc-slate-200));
}

.tbox-cvps-pricing-grid__table thead .tbox-cvps-pricing-grid__cell--num { text-align: right; }

.tbox-cvps-pricing-grid__group {
  text-align: left;
  padding: var(--space-sm-mid) var(--space-lg) var(--space-xs);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--brand-primary-text);
  background: var(--surface-subtle, var(--brand-primary-10));
}

.tbox-cvps-pricing-grid__cell {
  padding: var(--space-sm-mid) var(--space-lg);
  border-top: 1px solid var(--border-light, var(--ahcalc-slate-200));
  vertical-align: top;
}

.tbox-cvps-pricing-grid__cell--name { text-align: left; }

.tbox-cvps-pricing-grid__name {
  display: block;
  font-weight: var(--fw-semibold);
  color: var(--text-primary, var(--ahcalc-slate-900));
}

.tbox-cvps-pricing-grid__sub {
  display: block;
  margin-top: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--text-muted, var(--ahcalc-slate-500));
}

.tbox-cvps-pricing-grid__cell--unit {
  color: var(--text-secondary, var(--ahcalc-slate-600));
  white-space: nowrap;
}

.tbox-cvps-pricing-grid__cell--num {
  text-align: right;
  white-space: nowrap;
  font-family: var(--ahcalc-mono);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-semibold);
  color: var(--text-primary, var(--ahcalc-slate-900));
}

.tbox-cvps-pricing-grid__per {
  margin-left: 2px;
  font-size: var(--fs-xs);
  font-weight: var(--fw-normal);
  color: var(--text-muted, var(--ahcalc-slate-500));
}

.tbox-cvps-pricing-grid__note {
  margin-top: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--text-muted, var(--ahcalc-slate-500));
  line-height: var(--lh-relaxed);
}

@media (width <= 600px) {
  /* Keep all four columns reachable on narrow screens via horizontal scroll
     rather than clipping the Est. monthly column. Scroll-shadow affordance
     (Verou technique): surface-colored cover layers (background-attachment:
     local) hide the edge shadows until there is content to scroll toward, so
     a fade appears on whichever side has more table off-screen. --border-mid
     adapts per theme, so the cue shows in both light and dark. */
  .tbox-cvps-pricing-grid {
    overflow: auto hidden;
    -webkit-overflow-scrolling: touch;
    background:
      linear-gradient(to right, var(--surface-card, #fff) 30%, rgb(255 255 255 / 0%)) left center,
      linear-gradient(to left, var(--surface-card, #fff) 30%, rgb(255 255 255 / 0%)) right center,
      radial-gradient(farthest-side at left center, var(--border-mid), rgb(255 255 255 / 0%)) left center,
      radial-gradient(farthest-side at right center, var(--border-mid), rgb(255 255 255 / 0%)) right center;
    background-repeat: no-repeat;
    background-size: 28px 100%, 28px 100%, 12px 100%, 12px 100%;
    background-attachment: local, local, scroll, scroll;
  }

  .tbox-cvps-pricing-grid__table { font-size: var(--fs-xs); min-width: 30rem; }

  .tbox-cvps-pricing-grid__cell,
  .tbox-cvps-pricing-grid__table thead th,
  .tbox-cvps-pricing-grid__group { padding-left: var(--space-md); padding-right: var(--space-md); }

  .tbox-cvps-pricing-grid__cell--unit { white-space: nowrap; }
}