/* ==========================================================================
   product-pages.css — Platform overview, integrations, and cloud cost pages.
   These pages use the homepage system (home.css, trust.css, pages.css).
   This file adds only the parts that those files do not have.
   ========================================================================== */

/* ----- Shared ----- */

.hp .days.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hp .days.three p { max-width: 34ch; }
.hp .tour-vis.center .sheet { width: 100%; max-width: 460px; }
.hp .sheet.rows dl > div { grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; }
.hp .sheet.rows dt { font-size: 15.5px; color: var(--ink-soft); }
.hp .sheet.rows dd { text-align: right; font-variant-numeric: tabular-nums; }
.hp .sheet.rows dd a, .hp .small a { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.hp .small { margin-top: 14px; font-size: 13.5px; line-height: 1.45; color: var(--ink-mute); }
.hp .pill.live { background: var(--blue); color: #fff; }

/* Our column in a table. The class `.ours` collides with a Webflow rule, so these pages use `.pick`. */
.hp :is(th, td).pick { background: var(--surface); color: var(--ink); font-weight: 500; }
.hp thead .pick { border-radius: 20px 20px 0 0; }
.hp thead .pick b, .hp td.pick b { color: var(--blue); }
.hp tbody tr:last-child .pick { border-radius: 0 0 20px 20px; }
.hp :is(th, td).num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hp td b { font-weight: 600; color: var(--ink); }
.hp tbody th img { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px; }

/* Segmented control. The page scripts set `.active` or `.v14-on` on the selected button. */
.hp .seg { display: inline-grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; max-width: 100%; padding: 4px; border-radius: 14px; background: rgba(15, 22, 56, 0.07); }
.hp .seg button { min-height: 42px; padding: 9px 14px; border: 0; border-radius: 10px; background: transparent; font: 500 15px/1.2 var(--text); color: var(--ink-soft); white-space: nowrap; cursor: pointer; transition: background-color 150ms, color 150ms, box-shadow 150ms; }
.hp .seg button:hover { color: var(--ink); }
.hp .seg button:is(.active, .v14-on) { background: #fff; color: var(--blue-deep); font-weight: 600; box-shadow: 0 1px 2px rgba(15, 22, 56, 0.12), 0 6px 14px -6px rgba(43, 54, 163, 0.35); }
.hp .sec-head > .seg { justify-self: end; }
.hp .text-btn { padding: 0; border: 0; background: none; font: 500 14.5px/1.3 var(--text); color: var(--blue); text-decoration: underline; text-decoration-color: rgba(61, 75, 202, 0.3); text-underline-offset: 4px; cursor: pointer; }
.hp .text-btn:hover { text-decoration-color: currentColor; }

/* ----- Integrations: directory ----- */

.hp .filter-count { margin-left: 8px; font-size: 13px; font-weight: 500; color: var(--ink-mute); }
.hp .intg-grid { border-top: 1px solid var(--line-strong); }
.hp .intg-card { display: grid; grid-template-columns: 44px minmax(0, 4fr) minmax(0, 7fr) 8em; gap: 4px 24px; align-items: center; padding: 20px 0; border-bottom: 1px solid var(--line-strong); }
.hp :is(.intg-card, .modal-form-wrap).hidden { display: none; }
.hp .intg-card .logo { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.hp .intg-card .logo :is(svg, img) { width: 24px; height: 24px; }
.hp .intg-card h3 { font: 600 21px/1.2 var(--display); letter-spacing: -0.02em; }
.hp .intg-card h3 small { display: block; margin-top: 3px; font: 400 14px/1.3 var(--text); letter-spacing: 0; color: var(--ink-mute); }
.hp .intg-card p { font-size: 16px; color: var(--ink-soft); }
.hp .intg-card .pill { justify-self: end; }

/* ----- Integrations: API sample ----- */

.hp .code { align-self: center; min-width: 0; border-radius: 18px; background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); overflow: hidden; }
.hp .code figcaption { padding: 12px 20px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); font-size: 13px; color: rgba(255, 255, 255, 0.66); }
.hp .code pre { margin: 0; padding: 20px; overflow-x: auto; font: 400 14px/1.7 ui-monospace, "SF Mono", Menlo, Consolas, monospace; color: #DCE3FF; }
.hp .code pre i { font-style: normal; color: rgba(255, 255, 255, 0.5); }

/* ----- Cost page: section nav and footer. They sit outside <main>. ----- */

.cost-experience .cost-skip-link { position: absolute; left: 24px; top: -100px; z-index: 200; padding: 12px 18px; border-radius: 999px; background: #fff; color: #0F1638; box-shadow: inset 0 0 0 2px #3D4BCA; }
.cost-experience .cost-skip-link:focus { top: 12px; }
.cost-experience .cost-nav { position: sticky; top: 0; z-index: 100; background: rgba(246, 247, 252, 0.97); border-bottom: 1px solid var(--line); }
.cost-experience .cost-nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding: 14px var(--gutter); }
.cost-experience .cost-brand img { display: block; width: 156px; height: auto; }
.cost-experience .cost-nav-links { display: flex; align-items: center; gap: 22px; }
.cost-experience .cost-nav-links a { color: var(--ink); text-decoration: none; white-space: nowrap; transition: color 150ms; }
.cost-experience .cost-nav-links a:hover { color: var(--blue); }
.cost-experience .cost-nav-links .cost-nav-cta { padding: 11px 18px; border-radius: 999px; background: var(--blue); color: #fff; }
.cost-experience .cost-nav-links .cost-nav-cta:hover { background: var(--blue-deep); color: #fff; }
.cost-experience .cost-menu-toggle { display: none; }
.cost-experience :is(.cost-nav, .cost-footer) :focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 6px; }
.cost-experience .cost-footer { padding: 40px var(--gutter); border-top: 1px solid var(--line); color: var(--ink-soft); }
.cost-experience .cost-footer-inner { max-width: var(--wrap); margin-inline: auto; }
.cost-experience .cost-footer img { height: auto; }
.cost-experience .cost-footer nav { display: flex; flex-wrap: wrap; gap: 12px 24px; margin: 24px 0; }
.cost-experience .cost-footer a { color: var(--ink); font-size: 15px; text-decoration: none; }
.cost-experience .cost-footer a:hover { color: var(--blue); }
.cost-experience .cost-footer p { margin: 0; font-size: 13.5px; }
@media (max-width: 1100px) {
  .cost-experience .cost-nav-inner { flex-wrap: wrap; gap: 0; }
  .cost-experience .cost-menu-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 16px; border: 0; border-radius: 999px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 15px/1.2 var(--text); color: var(--ink); cursor: pointer; }
  .cost-experience .cost-nav-links { display: none; flex-direction: column; align-items: stretch; gap: 0; width: 100%; padding: 14px 0 4px; }
  .cost-experience .menu-open .cost-nav-links { display: flex; }
  .cost-experience .cost-nav-links a { padding: 13px 0; }
  .cost-experience .cost-nav-links .cost-nav-cta { margin-top: 8px; padding: 13px 18px; text-align: center; }
}

/* ----- Cost page: hero estimate ----- */

.hp .sheet h2 + .small { margin-top: 6px; }
.hp .money { position: relative; }
.hp .money span { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); font-size: 16px; color: var(--ink-mute); pointer-events: none; }
.hp .money input { width: 100%; height: 52px; margin: 0; padding: 0 16px 0 34px; border: 0; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 18px/1 var(--text); color: var(--ink); font-variant-numeric: tabular-nums; }
.hp .money.wide input { padding-left: 74px; }
.hp .money input:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--blue); }
/* The split is fixed: the quick estimate always saves 14.7% (60% × 70% × 35%). */
.hp .bill-bar { display: flex; gap: 3px; height: 14px; margin-top: 20px; }
.hp .bill-bar span { flex: 85.3; border-radius: 999px 0 0 999px; background: var(--ink); }
.hp .bill-bar i { flex: 14.7; border-radius: 0 999px 999px 0; background: var(--blue); }
.hp .sheet .bill-bar + .small { margin: 10px 0 14px; }

/* ----- Cost page: savings strip ----- */

.hp .marquee-group figure { display: flex; align-items: center; gap: 18px; white-space: nowrap; }
.hp .marquee-group .savings-logo { display: flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink-soft); }
/* The logo files have mixed colours, so each one shows as a dark mark. */
.hp .marquee-group .savings-logo img { height: 30px; filter: brightness(0); opacity: 0.68; }
.hp .marquee-group .savings-logo img[src*="pubnub"] { width: 130px; height: 44px; max-width: none; object-fit: cover; }
.hp .marquee-group .savings-logo img[src*="kumu"] { width: 30px; filter: grayscale(1); opacity: 1; }
.hp .marquee-group figcaption { font-size: 14px; line-height: 1.3; color: var(--ink-mute); }
.hp .marquee-group strong { display: block; font: 600 24px/1.1 var(--display); letter-spacing: -0.02em; color: var(--ink); }
.hp .is-paused .marquee-track { animation-play-state: paused; }

/* ----- Cost page: service rates ----- */

.hp #service-rates[data-term="y1"] .d30, .hp #service-rates[data-term="d30"] .y1 { display: none; }

/* ----- Cost page: calculator ----- */

.hp .steps { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-bottom: 24px; font-size: 15px; color: var(--ink-mute); }
.hp .step { display: flex; align-items: center; gap: 10px; }
.hp .step span { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 13.5px; font-weight: 600; }
.hp .step.active { font-weight: 600; color: var(--ink); }
.hp .step.active span { background: var(--blue); box-shadow: none; color: #fff; }
.hp .step.done span { background: var(--blue-tint); box-shadow: none; color: var(--blue-deep); }

.hp .calc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 8fr); border-radius: var(--radius-panel); background: var(--surface); box-shadow: var(--shadow-card); overflow: clip; }
.hp .calc-in { padding: clamp(24px, 3.4vw, 48px); background: radial-gradient(120% 60% at 0% 0%, rgba(141, 185, 255, 0.35), transparent 70%), var(--blue-tint); }
.hp .calc-out { min-width: 0; padding: clamp(24px, 3.4vw, 48px); }
.hp .calc h3 { font: 600 24px/1.15 var(--display); letter-spacing: -0.02em; }
.hp .calc-in h3 { margin-bottom: 28px; }
.hp .field { margin-bottom: 26px; }
.hp .field-label { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin: 0 0 10px; font-size: 15px; font-weight: 600; color: var(--ink); }
.hp .field-label :is(small, output) { font-size: 14px; font-weight: 400; color: var(--ink-mute); }
.hp .field-label output { font-weight: 600; color: var(--blue); }
.hp .hint { margin-top: 8px; font-size: 13.5px; line-height: 1.45; color: var(--ink-mute); }
.hp .field-error { display: none; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.hp :is(.field-error, .modal-api-err, .modal-success).vis { display: block; }
.hp .calc-in .seg { display: grid; }
.hp .calc-in .seg button { padding-inline: 6px; }
.hp .calc-in .seg.wrap { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hp #services-grid, .hp .rate-badge { display: flex; flex-wrap: wrap; gap: 8px; }
.hp .rate-badge { margin-top: 12px; gap: 6px; }
.hp .svc-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 8px 14px; border: 0; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); font: 500 14.5px/1.2 var(--text); color: var(--ink); cursor: pointer; transition: background-color 150ms, color 150ms; }
.hp .svc-chip .svc-check { display: none; }
.hp .svc-chip.sel { background: var(--blue); box-shadow: none; color: #fff; }
.hp .svc-chip.sel .svc-check { display: inline-flex; }
.hp .rate-pill { padding: 4px 11px; border-radius: 999px; background: rgba(255, 255, 255, 0.7); font-size: 13px; font-weight: 500; color: var(--ink-soft); }
.hp :is(.adv-body, .assm-body) { display: none; padding-top: 22px; }
.hp :is(.adv-body, .assm-body).open { display: block; }
.hp .slider-row { display: grid; grid-template-columns: minmax(0, 1fr) 68px auto; gap: 10px; align-items: center; font-size: 15px; color: var(--ink-soft); }
.hp .slider-row input[type="range"] { width: 100%; margin: 0; accent-color: var(--blue); }
.hp .slider-row input[type="number"] { width: 100%; height: 40px; margin: 0; padding: 0 8px; border: 0; border-radius: 10px; background: #fff; box-shadow: inset 0 0 0 1px var(--line-strong); font: 600 15px/1 var(--text); color: var(--ink); text-align: right; }
.hp .calc .btn { width: 100%; border: 0; cursor: pointer; }
.hp .calc-in .btn { margin-top: 26px; }

.hp .results-empty { display: grid; align-content: center; gap: 10px; min-height: 100%; color: var(--ink-soft); }
.hp .results-empty p:first-child { max-width: 18ch; font: 600 clamp(26px, 2.8vw, 40px)/1.08 var(--display); letter-spacing: -0.03em; color: var(--ink); }
.hp .terms { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.hp .term { padding: 18px 20px; border-radius: 18px; box-shadow: inset 0 0 0 1px var(--line-strong); font-size: 14.5px; color: var(--ink-soft); cursor: pointer; transition: background-color 150ms, box-shadow 150ms; }
.hp .term:hover { box-shadow: inset 0 0 0 1px var(--blue); }
.hp .term.active { background: var(--blue-tint); box-shadow: inset 0 0 0 2px var(--blue); }
.hp .term b { display: block; font-weight: 600; color: var(--ink); }
.hp .term .amount { margin: 10px 0 2px; font: 600 clamp(19px, 1.9vw, 24px)/1.15 var(--display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp .term strong { color: var(--ink); font-weight: 600; }
.hp .lead-in { margin-top: 32px; font-size: 15px; font-weight: 600; color: var(--blue); }
.hp .figure { margin-top: 6px; font: 600 clamp(40px, 4.8vw, 76px)/0.98 var(--display); letter-spacing: -0.04em; color: var(--ink); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hp .figure + p { margin-top: 12px; color: var(--ink-soft); }
.hp .calc-out > div > .btn { margin-top: 24px; }
.hp .figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 28px 0 0; }
.hp .figures > div { padding-block: 16px; border-top: 1px solid var(--line-strong); }
.hp .figures dt { font-size: 14px; color: var(--ink-mute); }
.hp .figures dd { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-mute); }
.hp .figures dd b { display: block; font: 600 22px/1.2 var(--display); letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp .chart { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line-strong); }
.hp .chart h4 { margin: 0 0 6px; font: 600 17px/1.3 var(--text); color: var(--ink); }
.hp .cost-chart-summary > p { margin-bottom: 18px; font-size: 14px; color: var(--ink-mute); }
.hp .cost-annual-row + .cost-annual-row { margin-top: 16px; }
.hp .cost-annual-row > div:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-bottom: 8px; font-size: 15px; color: var(--ink-soft); }
.hp .cost-annual-row strong { font-size: 17px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.hp .cost-annual-track { height: 14px; border-radius: 999px; background: rgba(15, 22, 56, 0.07); overflow: hidden; }
.hp .cost-annual-bar { height: 100%; border-radius: 999px; background: var(--ink); }
.hp .is-projected .cost-annual-bar { background: var(--blue); }
.hp .is-projected strong { color: var(--blue); }
.hp .assm { margin-top: 28px; }
.hp .assm-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 2px 16px; padding-block: 10px; border-top: 1px solid var(--line); font-size: 14.5px; }
.hp .assm-key { color: var(--ink-soft); }
.hp .assm-val { font-weight: 600; color: var(--ink); }
.hp .assm-src { grid-column: 2; font-size: 13px; color: var(--ink-mute); }

/* ----- Cost page: review request dialog ----- */

.hp .modal-overlay { position: fixed; inset: 0; z-index: 1000; display: none; place-items: center; padding: 20px; background: rgba(15, 22, 56, 0.6); overflow-y: auto; }
.hp .modal-overlay.open { display: grid; }
.hp .modal-box { position: relative; width: 100%; max-width: 480px; padding: clamp(24px, 4vw, 40px); border-radius: 28px; background: var(--surface); box-shadow: var(--shadow-stage); }
.hp .modal-box h2 { padding-right: 40px; }
.hp .modal-close { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--paper); font-size: 22px; line-height: 1; color: var(--ink); cursor: pointer; }
.hp .modal-success { display: none; }
.hp .modal-api-err { display: none; margin-top: 16px; font-size: 14.5px; font-weight: 500; color: var(--ink); }
.hp .modal-api-err a { color: var(--blue); text-decoration: underline; }
.hp .estimate { margin-top: 18px; padding: 14px 18px; border-radius: 14px; background: var(--blue-tint); font-size: 15px; color: var(--blue-deep); }
.hp .ask select { display: block; width: 100%; height: 52px; margin: 0; padding: 0 16px; border: 0; border-radius: 12px; background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-strong); font: 400 16px/1.4 var(--text); color: var(--ink); }
.hp .ask select:focus-visible { outline: 0; box-shadow: inset 0 0 0 2px var(--blue); }
.hp .ask .state { text-align: left; }
.hp .ask .state .btn { margin-top: 14px; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- Cost page: pricing panel ----- */

.hp .foundation .sheet { align-self: start; animation: none; }
.hp .sheet h3 { margin-bottom: 16px; font: 600 22px/1.2 var(--display); letter-spacing: -0.02em; }
.hp .sheet details { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 15px; color: var(--ink-soft); }
.hp .sheet summary { font-weight: 600; color: var(--ink); cursor: pointer; }
.hp .sheet details p { margin-top: 10px; }
.hp .tour-text li b { display: block; font-weight: 600; }
.hp .tour-text li small { display: block; font-size: 13.5px; color: var(--ink-mute); }

/* ----- Responsive ----- */

@media (max-width: 900px) {
  .hp .days.three, .hp .calc { grid-template-columns: minmax(0, 1fr); }
  .hp .sec-head > .seg { justify-self: start; }
  .hp .results-empty { min-height: 0; }
  .hp .tour-vis.center { min-height: 0; }
}
@media (max-width: 700px) {
  .hp .intg-card { grid-template-columns: 44px minmax(0, 1fr) auto; }
  .hp .intg-card p { grid-column: 2 / -1; grid-row: 2; }
  .hp .intg-card .pill { grid-column: 3; grid-row: 1; }
}
@media (max-width: 560px) {
  .hp .terms, .hp .figures { grid-template-columns: minmax(0, 1fr); }
}
.hp .field-label label { margin: 0; font-weight: inherit; }
.hp .page-hero .sheet p { max-width: none; margin-top: 6px; font-size: 13.5px; line-height: 1.45; color: var(--ink-mute); }
.hp .page-hero .sheet .bill-bar + p { margin: 10px 0 14px; }
.hp .page-hero .sheet dl + p { margin-top: 14px; }