/*
 * palette-app-hosting.css: route-family styles for /app-hosting/ and its subpages.
 * Loads after site-palette.css (core) on those routes only; see
 * tb_get_palette_family() / inc/palette-families.json and "Where CSS Goes" in DESIGN.md.
 * Rules here may rely on core tokens and components, never the reverse.
 */

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

/* j-marketplace's Arial info glyph inside page content stays on the brand
   stack (the old #content wildcard used to force this). The #hoster-data
   modal is appended at body level and keeps its vendor font, as it always
   did — do not add a #content-scoped rule for it; it can never match. */
#content .marketplace .install-panel .label {
  font-family: inherit;
}

/* ============================================
   Migrated components (from style.css)
   PLAN_CSS_REFACTOR Phase 3
   ============================================ */

/*
 * Pricing Section (legacy class-driven component)
 */

.tbox-data-table {
  width: 100%;
  border-collapse: collapse;
}

/* ============================================
   Shared expand/collapse button
   ============================================ */

.tbox-text-center {
  text-align: center;
}

/* ── App Hosting hero: two-column split with centered CTA row ── */

.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__cta-block {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  text-align: center;
}

/* Hero sits on a deep cobalt fill; pure white reads cleanly on the saturated tint. */

@media (width <= 1024px) {
  .tbox-app-hosting-hero__split {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .tbox-app-hosting-hero__text {
    padding-top: 0;
  }
}

@media (width <= 600px) {
  /* 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);
  }
}

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

/* stylelint-disable no-duplicate-selectors -- route polish intentionally layers over earlier automation base selectors. */
/* App Hosting automation polish */

.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__arrow {
  display: 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%));
}

@media (width <= 900px) {

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

  /* Unnumbered node dot on the vertical rail so the thread reads as
     stations, not a bare line. Desktop draws no per-step marker; the dot's
     visual recipe lives in the shared station-node rule in §6.2. Offsets
     center the 20px outer box on the rail (left: 1rem, 1px wide) at the
     step title's first line (1.35rem top padding + half line-height). */
  .tbox-ah-deploy-pipeline__step::before {
    content: "";
    position: absolute;
    top: calc(1.25rem + 7px);
    left: calc(1rem - 9.5px);
  }
}
/* stylelint-enable no-duplicate-selectors */

/* ── /app-hosting/frameworks/: framework matrix page tweaks ──
   Values on this page contain inline links; the shared flex centering splits
   the text runs around the <a> into separate flex items and wraps oddly, so
   restore block flow. Row ids (#php, #node, …) are ad/sitelink deep-link
   anchors and must clear the sticky header + jump bar. */
#frameworks .tbox-matrix-value {
  display: block;
  min-height: 0;
}
/* Quiet anchor-link affordance on each row header so the deep-link ids are
   discoverable on-page, not just from ad URLs. Padding + negative margin
   grows the hit area to ~24px without shifting the label's layout. */
#frameworks .tbox-matrix-anchor {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: -0.25rem;
  margin-left: calc(var(--space-2xs) - 0.25rem);
  padding: 0.25rem;
  color: var(--text-muted);
  opacity: 0.55;
  vertical-align: middle;
  transition: opacity var(--ease-base), color var(--ease-base);
}
#frameworks .tbox-matrix-anchor svg {
  width: 1rem;
  height: 1rem;
}
#frameworks .tbox-matrix-anchor:hover {
  opacity: 1;
  color: var(--brand-primary);
}
#frameworks .tbox-matrix-anchor:focus-visible {
  opacity: 1;
  color: var(--brand-primary);
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-sm);
}
/* The Windows/.NET row is an anti-sell callout, not a peer runtime — a quiet
   slate tint separates it from the six supported stacks. */
#frameworks .tbox-feature-matrix__row--exception .tbox-matrix-label {
  color: var(--text-secondary);
}

/* Marketplace search/typeahead UI */

/**
 * Marketplace search/typeahead UI.
 */

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

/* =========================================================
   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 keyboard focus: the vendor input/.btn-install outline resets are
   gone from j-marketplace.min.css, so draw the contract ring on every vendor
   control instead of leaving the UA default ring. */
.container-wrap.marketplace :is(input, a, button, [tabindex]):focus-visible,
.container-wrap.marketplace .marketplace-offers .freewall-cell .marketplace-offer .details-state .btn-install:focus-visible,
.jlc-modal-wrapper-owerview :is(.slick-arrow, .je-carousel-item, .jlc-form--submit):focus-visible,
#hoster-data :is(input, a, button, label, [tabindex]):focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
}

/* Card faces are absolutely positioned inside their cell: keep the ring inside
   the rounded card so neighbouring cells cannot cover it. */
.container-wrap.marketplace .marketplace-offers .freewall-cell .marketplace-offer .default-state:focus-visible {
  outline-offset: calc(-1 * var(--focus-outline-width));
}

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

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

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

/* The vendor pager is a table, so the core prose-link rules for td/th
   (ID-scoped, ~11 classes deep) recolour and underline its links. Restore
   readable ink: brand blue on the white cells (both themes), white on a
   brand-blue active cell (the vendor #337ab7 fill is only 4.6:1 with white). */
#content .tbox-marketplace-embed .marketplace .pagination a {
  color: var(--blue-7) !important;
  text-decoration: none !important;
}

#content .tbox-marketplace-embed .marketplace .pagination a.active {
  color: var(--text-inverse) !important;
  background: var(--blue-7) !important;
  border-color: var(--blue-7);
}

/* Dark: the vendor's white tiles were the only light surface in the dark
   marketplace. Inactive cells move onto the dark card with dark-safe ink. */
:root[data-theme="dark"] #content .tbox-marketplace-embed .marketplace .pagination a:not(.active) {
  color: var(--brand-primary-text) !important;
  background: var(--surface-card);
  border-color: var(--border-light);
}

:root[data-theme="dark"] #content .tbox-marketplace-embed .marketplace .pagination a:not(.active):hover {
  background: var(--surface-muted);
}

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

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

.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-text) !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 */

/* ── Product features: tabbed chapter strip (App Hosting, Cloud VPS) ──────── */

.tbox-fops-tab .tbox-runtime-icon {
  --tbox-runtime-icon-size: 20px;
}

/* ── Runtime logo strip (static, 7-column) ──────────────────────────────── */

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

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

/* ═══════════════════════════════════════════════════════════════════════
   App Hosting › Kubernetes — page-specific components
   ═══════════════════════════════════════════════════════════════════════ */

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

/* Cluster topology diagram */
.k8s-proof-list {
  display: grid;
  gap: var(--space-sm);
  margin: var(--space-lg) 0 0;
  padding: 0;
  list-style: none;
}

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

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

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

@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--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);
}
@media (width <= 600px) {
  .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 .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 + .k8s-topology-board__row {
  border-top: 1px solid var(--border-light);
}
@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);
}

/* 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 */
@media (width <= 768px) {

  .k8s-billing-split {
    grid-template-columns: 1fr;
  }
}

: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 {
  border-color: var(--border-mid);
}

:root[data-theme="dark"] .k8s-cluster-component {
  background: var(--surface-raised);
  border-color: var(--border-mid);
}
/* stylelint-disable no-descending-specificity -- scoped block ordered for readability over cross-file specificity ranking */

/* App Hosting landing overrides */


.tbox-ah-proof-section > .tbox-container {
  max-width: min(1200px, 92vw);
}


@media (width <= 640px) {

  .tbox-ah-pricing-section {
    overflow-x: clip;
  }
}

/* stylelint-disable no-duplicate-selectors -- overview polish intentionally layers over existing App Hosting component contracts. */

/* 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. */

.tbox-app-hosting-hero__visual .tbox-ah-scope {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* Reserve the longest chapter caption ("9 AM ...") so chapter swaps never
   resize the hero (mobile CLS was 0.15-0.18 when the server-rendered 9 AM
   caption gave way to the shorter Overnight one). Measured maxima: 2 lines
   in the wide column, 4 lines in the ~280px phone column (320-767px).
   The p is border-box, so the padding (--space-md top, --space-lg bottom)
   is added in. */
.tbox-app-hosting-hero__visual .tbox-ah-scope__story {
  min-height: calc(var(--lh-normal) * 2em + var(--space-md) + var(--space-lg));
}

@media (width < 768px) {
  .tbox-app-hosting-hero__visual .tbox-ah-scope__story {
    min-height: calc(var(--lh-normal) * 4em + var(--space-md) + var(--space-lg));
  }
}

/* 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. */

.tbox-ah-rtmsup__intro {
  max-width: var(--width-prose-narrow);
  margin: 0 0 var(--space-2xl-plus);
}

.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-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--space-xl);
  margin: 0;
}

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

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

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

/* Prose paragraph colour is a light-surface token; keep the band's on-dark ink. */
.tbox-db-spec-band__footer p {
  color: inherit;
}

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

/* Quick-path decision strip + cross-page typography baselines. */

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

/* Hub #supported-runtimes segmented tabs (CSS-only) + .tbox-runtime-icon. */

/* App Hosting two-column hero layout (clustering, database) */

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

@media (width <= 980px) {

  #content .tbox-clustering-hero .tbox-clustering-hero__body-col,
  #content .tbox-database-hero .tbox-database-hero__body-col {
    padding-top: 0;
  }
}

/* App Hosting operations layout refinement */

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

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

/* The app grid flows in the page; vendor pagination bounds its length. A
   nested vertical scroller trapped swipes on phones (704px box holding 6000px
   of cards) and clipped the last row on desktop. clip on x only keeps expanded
   cards from widening the page without creating a scroll container. */
#content .tbox-marketplace-embed .marketplace-offers {
  overflow: clip visible;
}

@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-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-base) !important; /* DESIGN.md floor: buttons stay at 16px */
    white-space: normal;
    text-wrap: balance;
  }

  #content .tbox-marketplace-embed .freewall-cell {
    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 {
    padding: var(--space-md);
  }

  /* Tighten only the horizontal padding: the 3rem left clearance and the
     1.35rem top padding are rail-node geometry (the dot's fixed top offset
     centers on the title's first line only at that padding). */
  #scale-at-two-layers .tbox-ah-deploy-pipeline__step {
    padding: 1.35rem var(--space-md) 1.45rem 3rem;
  }
}

/* =========================================================================
   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-text);
}
.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);
  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);
  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); }
.tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__link:focus-visible {
  outline: var(--focus-outline-width) solid var(--focus-ring);
  outline-offset: var(--focus-outline-offset);
  border-radius: var(--radius-xs);
}
@media (prefers-reduced-motion: reduce) {
  .tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__link .material-symbols-outlined { transition: none; }
  .tbox-ah-stack-primitives__row-tiles .tbox-ah-stack-primitive__link:hover .material-symbols-outlined { transform: none; }
}

: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-text);
  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-deep-text);
  border-bottom-color: currentcolor;
}

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

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