/* Isolated public /gpu/ UI. No account, gateway or admin selectors. */
body.xgpu-marketing .xgpu-c-hero { padding-block: 68px 54px; }
body.xgpu-marketing .xgpu-c-hero h1 { max-width: 900px; margin: 0; font-size: clamp(34px,4vw,58px); letter-spacing: -.035em; line-height: 1.17; text-wrap: balance; }
body.xgpu-marketing .xgpu-c-hero .xgpu-m-lead { max-width: 760px; }
body.xgpu-marketing .xgpu-c-section { padding-block: 30px 88px; scroll-margin-top: 24px; }
body.xgpu-marketing .xgpu-c-section h2 { margin: 0; font-size: clamp(28px,3vw,40px); letter-spacing: -.025em; }
body.xgpu-marketing .xgpu-c-steps { display: flex; flex-wrap: wrap; gap: 12px 28px; list-style: none; margin: 0 0 30px; padding: 0; font-size: 12px; color: var(--xgpu-m-accent-light); }
body.xgpu-marketing .xgpu-c-layout { display: grid; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); gap: 28px; align-items: start; }
body.xgpu-marketing .xgpu-c-fields { display: grid; gap: 22px; padding: 30px; border: 1px solid var(--xgpu-m-line); background: #100d19; border-radius: 18px; min-width: 0; }
body.xgpu-marketing .xgpu-c-options { display: grid; gap: 20px; }
body.xgpu-marketing .xgpu-c-specs { color: var(--xgpu-m-muted); font-size: 13px; }
body.xgpu-marketing .xgpu-c-fields .xgpu-m-note { margin: -6px 0 0; }
body.xgpu-marketing .xgpu-c-summary { display: flex; flex-direction: column; gap: 20px; padding: 30px; border: 1px solid #503073; border-radius: 18px; background: radial-gradient(ellipse at 100% 0,rgba(121,68,244,.17),transparent 65%),#15101e; min-width: 0; }
body.xgpu-marketing .xgpu-c-summary .xgpu-m-eyebrow { margin: 0; }
body.xgpu-marketing .xgpu-c-summary h3 { margin: 0; font-size: 23px; line-height: 1.3; overflow-wrap: anywhere; }
body.xgpu-marketing .xgpu-c-rate { display: flex; flex-wrap: nowrap; font-size: 18px; gap: .4em; align-items: baseline; margin: 0; }
body.xgpu-marketing .xgpu-c-rate strong { font-size: 1em; letter-spacing: -.03em; }
body.xgpu-marketing .xgpu-c-rate > span { color: var(--xgpu-m-muted); font-size: .75em; }
body.xgpu-marketing .xgpu-c-money { display: grid; gap: 12px; margin: 0; padding-block: 18px; border-block: 1px solid var(--xgpu-m-line); }
body.xgpu-marketing .xgpu-c-money > div { display: flex; flex-wrap: nowrap; justify-content: space-between; gap: .5em; font-size: 13px; align-items: baseline; }
body.xgpu-marketing .xgpu-c-money dt { color: var(--xgpu-m-muted); font-size: .9em; }
body.xgpu-marketing .xgpu-c-money dd { margin: 0; min-width: 0; max-width: 100%; font-size: 1em; font-weight: 650; }
body.xgpu-marketing .xgpu-c-summary .xgpu-m-note, body.xgpu-marketing .xgpu-c-status, body.xgpu-marketing .xgpu-c-consent { margin: 0; font-size: 13px; line-height: 1.7; }
body.xgpu-marketing .xgpu-c-status { color: #cbb4eb; min-height: 24px; }
body.xgpu-marketing .xgpu-c-status[data-state="error"] { color: #ffb6bb; }
body.xgpu-marketing .xgpu-c-consent { margin-bottom: 14px; }
body.xgpu-marketing [data-c-launch] { width: 100%; background: #8250e9; }
body.xgpu-marketing .xgpu-c-dashboard, body.xgpu-marketing .xgpu-c-auth-note a { color: #d2b6ff; font-size: 13px; text-underline-offset: 4px; }
body.xgpu-marketing .xgpu-c-auth-note { margin: 20px 0 0; font-size: 12px; color: var(--xgpu-m-muted); line-height: 1.65; }
body.xgpu-marketing .xgpu-c-modal { position: fixed; inset: 0; z-index: 1300; display: grid; place-items: center; padding: 24px; overflow-y: auto; }
body.xgpu-marketing .xgpu-c-modal-backdrop { position: fixed; inset: 0; background: rgba(3,2,8,.82); backdrop-filter: blur(5px); }
body.xgpu-marketing .xgpu-c-modal-dialog { position: relative; width: min(600px,100%); max-height: calc(100dvh - 48px); overflow-y: auto; padding: 32px; background: #171020; border: 1px solid #503073; border-radius: 20px; box-shadow: 0 24px 90px #0008; }
body.xgpu-marketing .xgpu-c-modal-dialog h2 { margin: 0 0 18px; font-size: 28px; line-height: 1.25; }
body.xgpu-marketing .xgpu-c-modal-dialog .xgpu-m-eyebrow { margin-bottom: 18px; padding-right: 24px; }
body.xgpu-marketing .xgpu-c-modal-close { position: absolute; right: 12px; top: 10px; width: 38px; height: 38px; border: 0; border-radius: 50%; background: #2f2042; color: #eee; font-size: 25px; cursor: pointer; }
body.xgpu-marketing .xgpu-c-modal-dialog form { display: grid; gap: 18px; margin-block: 26px; }
body.xgpu-marketing .xgpu-c-payment-result { overflow-wrap: anywhere; white-space: pre-wrap; padding: 14px; border: 1px solid #51356d; border-radius: 10px; font-size: 14px; }
body.xgpu-marketing .xgpu-c-payment-result:empty { display: none; }
body.xgpu-marketing .xgpu-c-modal-dialog > .xgpu-c-dashboard { display: block; margin-top: 18px; }
body.xgpu-marketing.xgpu-c-modal-open { overflow: hidden; }
@media (max-width: 800px) {
  body.xgpu-marketing .xgpu-c-layout { grid-template-columns: minmax(0,1fr); }
  body.xgpu-marketing .xgpu-c-fields, body.xgpu-marketing .xgpu-c-summary { padding: 24px; }
  body.xgpu-marketing .xgpu-c-hero { padding-block: 42px; }
}
@media (max-width: 480px) {
  body.xgpu-marketing .xgpu-c-fields, body.xgpu-marketing .xgpu-c-summary { padding: 18px; }
  body.xgpu-marketing .xgpu-c-modal { padding: 12px; }
  body.xgpu-marketing .xgpu-c-modal-dialog { padding: 24px 18px; max-height: calc(100dvh - 24px); }
  body.xgpu-marketing .xgpu-c-steps { gap: 8px 16px; font-size: 11px; }
}

body.xgpu-marketing .xgpu-c-browse { margin: -10px 0 26px; }
body.xgpu-marketing .xgpu-c-section:focus { outline: none; }
body.xgpu-marketing [data-c-runtime-summary] { color: #e5d6f4; }

/* One progressive homepage panel at the existing calculator position. */
body.xgpu-marketing .xgpu-c-inline .xgpu-c-steps { margin: 0; padding: 20px 26px; gap: 10px 20px; border-bottom: 1px solid #382640; }
body.xgpu-marketing .xgpu-c-inline .xgpu-c-layout { display: block; }
body.xgpu-marketing .xgpu-c-inline .xgpu-c-fields { padding: 26px; border: 0; border-radius: 0; background: transparent; }
body.xgpu-marketing .xgpu-c-inline .xgpu-c-progress-settings { display: grid; gap: 20px; }
body.xgpu-marketing .xgpu-c-inline .xgpu-c-summary { padding: 26px; border: 0; border-top: 1px solid #382640; border-radius: 0; background: transparent; gap: 16px; }
body.xgpu-marketing .xgpu-c-inline .xgpu-c-runtime-fields { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
body.xgpu-marketing .xgpu-c-inline-total { margin-top: 4px; }
body.xgpu-marketing .xgpu-c-inline-total p { margin: 0 0 8px; color: #b7a4c4; font-size: 12px; }
body.xgpu-marketing .xgpu-c-inline .xgpu-c-rate strong { font-size: 1em; }
body.xgpu-marketing .xgpu-c-inline .xgpu-c-money { padding-block: 14px; }
body.xgpu-marketing .xgpu-c-inline .xgpu-c-money > div { flex-wrap: nowrap; }
body.xgpu-marketing .xgpu-c-inline [data-c-runtime-quantity][aria-invalid="true"] { border-color: #da7c94; }
@media (max-width: 480px) {
  body.xgpu-marketing .xgpu-c-inline .xgpu-c-steps { padding: 18px; gap: 8px 14px; font-size: 10px; }
  body.xgpu-marketing .xgpu-c-inline .xgpu-c-fields, body.xgpu-marketing .xgpu-c-inline .xgpu-c-summary { padding: 19px; }
  body.xgpu-marketing .xgpu-c-inline .xgpu-c-runtime-fields { gap: 12px; }
}

body.xgpu-marketing .xgpu-c-inline-status { padding: 0 26px 26px; }
body.xgpu-marketing .xgpu-c-inline-status:empty { display: none; }
@media (max-width: 480px) { body.xgpu-marketing .xgpu-c-inline-status { padding: 0 19px 19px; } }

/* Keep recovery next to the saved form, usable on narrow public pages. */
body.xgpu-marketing .xgpu-c-recovery { display: flex; flex-wrap: wrap; gap: 12px; }
body.xgpu-marketing .xgpu-c-inline .xgpu-c-recovery { padding: 0 26px 26px; }
@media (max-width: 480px) { body.xgpu-marketing .xgpu-c-inline .xgpu-c-recovery { padding: 0 19px 19px; } }

/* Vlad: summary labels and complete price groups share a compact single row.
 * A descendant span rule would also shrink the final amount inside <strong>. */
body.xgpu-marketing .xgpu-c-money dt { min-width: 0; white-space: nowrap; }
body.xgpu-marketing .xgpu-c-money dd { margin-inline-start: auto; }
body.xgpu-marketing .xgpu-c-money dd { white-space: nowrap; overflow: visible; }
body.xgpu-marketing .xgpu-c-modal-dialog h2 { padding-inline-end: 28px; overflow-wrap: anywhere; }
@media (max-width: 420px) {
  body.xgpu-marketing .xgpu-c-inline .xgpu-c-runtime-fields { grid-template-columns: minmax(0,1fr); }
}

@media (max-width: 480px) {
  body.xgpu-marketing .xgpu-c-inline .xgpu-c-fields, body.xgpu-marketing .xgpu-c-inline .xgpu-c-summary { padding-inline: 14px; }
}

/* Summary rows keep their compact layout when it fits, then wrap whole prices
 * and units. Never clip a discount or split currency from its digits. */
body.xgpu-marketing .xgpu-c-rate,
body.xgpu-marketing .xgpu-c-money > div,
body.xgpu-marketing .xgpu-c-inline .xgpu-c-money > div { flex-wrap: wrap; }
body.xgpu-marketing .xgpu-c-rate > strong,
body.xgpu-marketing .xgpu-c-money dd { max-width: 100%; min-width: 0; flex-shrink: 1; }
body.xgpu-marketing .xgpu-c-rate > .has-discount,
body.xgpu-marketing .xgpu-c-money dd.has-discount { flex-wrap: wrap; }
body.xgpu-marketing .xgpu-c-money dt { white-space: normal; }

body.xgpu-marketing .xgpu-c-fields .xgpu-m-select-price { flex-wrap: wrap; }
body.xgpu-marketing .xgpu-c-fields .xgpu-m-select--priced .xgpu-m-select-value.has-price { grid-template-columns: minmax(0,min(var(--xgpu-m-price-width,24ch),70%)) minmax(0,1fr); }
@container xgpu-public-price-field (max-width: 320px) {
  body.xgpu-marketing .xgpu-c-fields .xgpu-m-select--priced .xgpu-m-select-value.has-price { grid-template-columns: minmax(0,1fr); }
}