/* Pricing's reading hierarchy; shared by the public and sales views. */
body:has(.pricing-layout) {
  --text-caption: .75rem;
  --text-secondary: .875rem;
  --text-body: 1rem;
  --text-subheading: 1.25rem;
  --text-heading: 1.75rem;
  --weight-body: 400;
  --weight-label: 500;
  --weight-heading: 600;
  --weight-price: 650;
  font-kerning: normal;
}

.price-line > strong,
.volume-output strong,
.call-pack-row strong,
.payg-rate strong,
.quote-payable strong,
.dock-service-price > strong {
  font-weight: var(--weight-price);
  font-variant-numeric: tabular-nums;
}

.plan-heading h2,
.addon-card h3,
.service-price-card > h3,
.payg-service-choice strong,
.dock-heading h2 {
  font-weight: var(--weight-heading);
  letter-spacing: -.02em;
}

.payg-operation h3,
.hosting-heading h3,
.dock-service-title > strong {
  font-weight: var(--weight-heading);
}

.plan-heading p,
.feature-list li,
.addon-description,
.payg-operation p,
.payg-service-choice small {
  font-weight: var(--weight-body);
  text-wrap: pretty;
}

.quote-lines:empty, #dock-total:empty { display: none; }
.quote-subtotal { font-size: var(--text-caption); }
.quote-subtotal del { font-weight: var(--weight-body); }
.quote-payable > span { font-weight: var(--weight-label); }
.quote-payable strong { letter-spacing: -.025em; }

/* Align all three usage labels on their text baseline, with icons centered on the label. */
.pricing-content .volume-metric { align-items: baseline; }
.pricing-content .volume-output { align-items: baseline; }
.pricing-content .merchant-count { gap: 4px; line-height: 1.5; }
.merchant-count-label { display: inline-block; white-space: nowrap; }
.merchant-count-label > .icon { vertical-align: -.18em; margin-right: 7px; }
.merchant-help-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 50%;
  color: var(--muted);
  touch-action: manipulation;
}
.merchant-help-trigger > .icon { width: 16px; height: 16px; }
.merchant-help-trigger:hover,
.merchant-help-trigger[aria-expanded="true"] { color: var(--ink); background: var(--soft, #f6f7f5); }
.merchant-help-trigger:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.merchant-quota-tooltip {
  position: fixed;
  inset: auto;
  margin: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100dvh - 24px);
  overflow: auto;
  padding: 16px 18px;
  border: 1px solid #41474c;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 10px 28px #20232825;
  font-size: 14px;
  line-height: 1.65;
  text-align: left;
  overflow-wrap: anywhere;
}
.merchant-quota-tooltip[hidden] { display: none; }
.merchant-quota-tooltip > strong { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px; }
.merchant-quota-tooltip > p { margin: 0; color: inherit; }
.pricing-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 16px; }
.pricing-toolbar .pricing-modes { margin-bottom: 0; }
.pricing-currency { padding-inline: 8px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.pricing-currency select { min-height: 44px; width: 66px; }

/* Each plan shares the same title, amount, action and feature rows. */
@media (min-width: 681px) {
  .pricing-content .plan-card { grid-template-rows: subgrid; grid-row: span 4; }
  .pricing-content .plan-title-row h2 { overflow-wrap: anywhere; }
  .pricing-content .plan-card .price-area { align-self: stretch; }
  .pricing-content .plan-card .original-price { min-height: 17px; }
}

@media (max-width: 680px) {
  .pricing-content .volume-metric { flex-direction: row; flex-wrap: wrap; gap: 4px 16px; justify-content: flex-start; }
  .pricing-content .volume-output strong { font-size: clamp(28px, 7.5vw, 32px); }
  .pricing-content .merchant-count { padding-left: 0; font-size: 12px; }
  .merchant-count-label > .icon { margin-right: 5px; }
  .merchant-help-trigger { flex-basis: 36px; width: 36px; height: 36px; }
  .pricing-currency { margin: 0; }
  .pricing-currency select { width: 55px; max-width: 55px; padding-inline: 2px; font-size: 12px; }
}

@media (min-width: 1100px) {
  html:has(.pricing-layout) { scroll-padding-bottom: 144px; }
  .pricing-layout { display: block; }

  .site-header { height: 72px; }
  .header-inner { gap: 32px; }
  .hero { padding: 32px 0 28px; }
  .hero .eyebrow { margin-bottom: 12px; letter-spacing: .06em; }
  .hero h1 {
    font-size: clamp(2.25rem, 3vw, 2.75rem);
    font-weight: var(--weight-heading);
    line-height: 1.18;
    letter-spacing: -.03em;
    margin-bottom: 16px;
  }
  .hero-description { font-size: var(--text-body); line-height: 1.6; max-width: 65ch; }
  .pricing-modes { margin-bottom: 16px; }
  .pricing-modes button { padding: 10px 20px; min-height: 44px; font-size: var(--text-secondary); }
  .pricing-content .product-tabs { gap: 12px; }
  .pricing-content .product-tab { padding: 14px 20px; font-size: var(--text-secondary); }

  .usage-bar { padding: 16px 0 20px; }
  .usage-top { min-height: 56px; margin-bottom: 4px; }
  .pricing-content .volume-output strong { font-size: 2rem; letter-spacing: -.025em; }
  .volume-output > span, .pricing-content .merchant-count { font-size: var(--text-secondary); }
  .pricing-content .volume-metric { gap: 16px; }
  .free-month, .range-presets button { font-size: var(--text-caption); }

  .pricing-content .plan-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
  .pricing-content .plan-card { padding: 24px 20px; }
  .pricing-content .plan-heading { min-height: 88px; }
  .pricing-content .plan-heading h2 { font-size: 1.375rem; }
  .plan-heading p { font-size: var(--text-secondary); line-height: 1.55; }
  .pricing-content .price-area { min-height: 120px; padding-top: 8px; }
  .pricing-content .price-line > strong { font-size: 2rem; letter-spacing: -.03em; }
  .price-line > span, .billing-note, .unit-rate { font-size: var(--text-caption); }
  .billing-note { margin-top: 6px; }
  .unit-rate { margin-top: 8px; }
  .pricing-content .plan-select { margin: 4px 0 16px; font-size: var(--text-secondary); min-height: 44px; }
  .plan-includes { padding-top: 16px; }
  .inherit-label { margin-bottom: 12px; font-size: var(--text-caption); }
  .feature-list { gap: 8px; }
  .feature-list li { font-size: var(--text-secondary); line-height: 1.6; }
  .included-line { margin-top: 16px; padding-top: 12px; font-size: var(--text-caption); }
  .below-plans { padding-top: 16px; }
  .below-plans > span { font-size: var(--text-caption); }

  .addons-section { padding: 48px 0 32px; }
  .section-heading { margin-bottom: 20px; }
  .section-heading h2, .faq-section h2 { font-size: var(--text-heading); font-weight: var(--weight-heading); }
  .section-heading p { font-size: var(--text-secondary); }
  .pricing-content .addon-grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  .addon-card { padding: 24px; }
  .service-symbol { margin-bottom: 16px; }
  .addon-card h3 { font-size: var(--text-subheading); }
  .addon-description { font-size: var(--text-secondary); margin-bottom: 20px; }
  .addon-facts { gap: 12px; margin-bottom: 20px; }
  .addon-facts > span { font-size: var(--text-secondary); }
  .addon-bottom { padding-top: 16px; }
  .addon-button { min-height: 44px; }
  .pricing-content .mini-price .price-line > strong { font-size: 1.75rem; }
  .mini-price .billing-note, .call-pack-row > span, .call-pack-row output > span { font-size: var(--text-caption); }
  .addon-links { margin-top: 16px; }
  .pricing-content .standalone-stage { grid-template-columns: 1fr 1fr; gap: 48px; padding: 24px 0 40px; }
  .standalone-story h2 { font-size: 2rem; }
  .standalone-story > p { font-size: var(--text-body); max-width: 65ch; margin-bottom: 24px; }
  .service-price-card { padding: 28px; }
  .pricing-content .service-price-card .price-area { min-height: 104px; }
  .pricing-content .service-price-card .price-line > strong { font-size: 2.75rem; }
  .service-entitlements { font-size: var(--text-secondary); padding-top: 16px; }
  .managed-note { font-size: var(--text-caption); }

  .payg-intro { font-size: var(--text-secondary); margin-bottom: 16px; }
  .payg-service { padding: 20px 0 8px; }
  .payg-service-choice strong { font-size: var(--text-subheading); }
  .payg-service-choice small { font-size: var(--text-secondary); margin-top: 4px; }
  .payg-operation {
    grid-template-columns: minmax(0, 1fr) minmax(140px, .48fr) minmax(128px, 160px);
    gap: 24px;
    padding: 14px 0;
  }
  .payg-operation h3, .hosting-heading h3 { font-size: var(--text-body); }
  .payg-operation p { font-size: var(--text-secondary); margin-top: 4px; }
  .payg-rate strong { font-size: 1.75rem; }
  .payg-rate small, .payg-rate del, .payg-quantity label { font-size: var(--text-caption); }
  .payg-quantity label { margin-bottom: 4px; }
  .payg-quantity input { font-size: var(--text-body); font-weight: var(--weight-label); padding-block: 8px; }
  .hosting-section { padding-top: 16px; margin-bottom: 16px; }
  .hosting-rates { gap: 24px; margin: 16px 0; }
  .hosting-rates > div { padding-bottom: 12px; }
  .hosting-rates > div > span, .payg-airline-form > label { font-size: var(--text-secondary); }
  .payg-airlines strong { font-size: var(--text-secondary); }
  .hosting-note, .payg-airline-count, .payg-airlines small { font-size: var(--text-caption); }

  .dock-heading { padding: 16px 20px 0; }
  .dock-heading h2 { font-size: var(--text-body); }
  .dock-basis { padding-inline: 20px; font-size: var(--text-caption); margin-top: 6px; }
  .dock-services { padding-inline: 12px; }
  .dock-service { padding: 12px 8px; }
  .dock-service-title > strong { font-size: var(--text-secondary); }
  .dock-service-price { margin-top: 4px; }
  .dock-service-price > span, .is-payg .dock-service-price span { font-size: var(--text-caption); }
  .dock-service-price > strong { font-size: var(--text-body); }
  .quote-discount { padding-inline: 20px; }
  #dock-total:not(:empty) { margin-inline: 20px; padding-top: 16px; }
  .quote-payable { margin-top: 12px; gap: 4px; }
  .quote-payable strong, .is-payg .quote-payable strong { font-size: 2rem; }
  .quote-payable small, .dock-period { font-size: var(--text-caption); }
  .dock-actions { padding: 16px 20px 20px; }
  .dock-actions > .button { min-height: 44px; font-size: var(--text-secondary); }

  .faq-section { grid-template-columns: minmax(160px, .65fr) minmax(0, 1.65fr); gap: 40px; padding: 48px 0 40px; }
  .faq-list summary { font-size: var(--text-body); padding-block: 16px; }
  .faq-list p, .capability-body p, .service-capability-body p { font-size: var(--text-body); line-height: 1.7; max-width: 70ch; }
  .capability-list > details > summary { font-size: var(--text-body); }
  .fine-print { padding-block: 20px 24px; }
  .fine-print p { font-size: var(--text-caption); }
}

@media (min-width: 1400px) {
  .pricing-content .plan-card { padding-inline: 24px; }
  .pricing-content .price-line > strong { font-size: 2.5rem; }
  .pricing-content .mini-price .price-line > strong { font-size: 1.75rem; }
}

/* Keep the estimate available without reserving a column in the page. */
.pricing-discount-inline:empty { display: none; }
.pricing-discount-inline:not(:empty) { margin-bottom: 16px; }
.pricing-discount-inline .quote-discount { padding: 0; }
@media (max-width: 1099px) {
  .pricing-discount-inline { margin: -12px 0 20px; }
  .pricing-discount-inline .quote-discount { padding: 0; max-width: 420px; }
  .pricing-discount-inline .discount-toggle { flex: none; padding: 8px 0; }
  .pricing-discount-inline .discount-form { position: static; width: 100%; margin: 0; padding: 8px 0 12px; }
  .pricing-discount-inline .discount-remove { margin-left: auto; }
  .quote-dock.is-empty { display: none; }
}
@media (min-width: 1100px) {
  .quote-dock {
    position: fixed;
    top: auto;
    bottom: 20px;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    display: grid;
    grid-template-columns: minmax(160px, 1fr) auto auto;
    grid-template-areas: "heading total actions" "discount total actions";
    align-items: center;
    gap: 0 24px;
    width: min(900px, calc(100% - 48px));
    max-height: none;
    padding: 12px 20px;
    overflow: visible;
    box-shadow: 0 6px 32px #20232818;
  }
  .dock-heading { grid-area: heading; padding: 0; }
  .dock-heading h2 { font-size: var(--text-secondary); }
  .dock-heading > div { align-items: flex-start; }
  .dock-heading > div > .icon { margin-top: 2px; }
  .quote-dock.has-service-names .dock-count { display: none; }
  .dock-heading .icon { width: 16px; height: 16px; }
  .dock-toggle, .dock-details { display: none; }
  .quote-discount { grid-area: discount; position: static; padding: 0; }
  .discount-toggle { padding: 4px 0; }
  .discount-form {
    position: absolute;
    left: 20px;
    bottom: calc(100% + 12px);
    width: min(340px, calc(100vw - 64px));
    max-height: calc(100dvh - 180px);
    overflow: auto;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 10px;
    box-shadow: 0 8px 32px #2023281a;
  }
  #dock-total:not(:empty) {
    grid-area: total;
    display: grid;
    grid-template-columns: auto auto;
    align-items: start;
    gap: 0 24px;
    margin: 0;
    padding: 0 0 0 24px;
    border: 0;
    border-inline-start: 1px solid var(--line);
  }
  #dock-total .quote-subtotal { display: grid; gap: 4px; font-size: var(--text-caption); }
  #dock-total:not(:has(.quote-subtotal)) { grid-template-columns: auto; }
  #dock-total .quote-subtotal > :last-child { font-size: var(--text-secondary); }
  #dock-total .quote-payable { margin: 0; gap: 0; }
  #dock-total .quote-payable strong { font-size: 1.75rem; }
  #dock-total .dock-period { grid-column: 1 / -1; margin-top: 4px; font-size: var(--text-caption); text-align: right; }
  .dock-actions { grid-area: actions; padding: 0; }
  .dock-actions > .button { max-width: 200px; min-height: 44px; }
  .quote-dock.is-empty {
    display: none;
  }
  .site-footer { padding-bottom: 152px; }
  .toast { bottom: 152px; }
}

@media print {
  .container { width: 100%; }
  .pricing-content .price-line > strong { font-size: 1.5rem; }
}

/* Keep subscription unit rates and add-on actions readable in narrow layouts. */
.pricing-content .unit-rate { flex-wrap: wrap; align-items: baseline; }
@media (max-width: 370px) {
  .pricing-content .addon-bottom { flex-wrap: wrap; gap: 12px; }
  .pricing-content .addon-bottom .addon-button { width: 100%; max-width: 100%; white-space: normal; }
  .pricing-content .mini-price { min-width: 0; max-width: 100%; }
}

/* Planned capability and the consultation action share the existing quote flow. */
.plan-planned { display:flex; align-items:flex-start; gap:8px; margin:18px 0 0; color:var(--muted); font-size:13px; line-height:1.65; }
.plan-planned .icon { width:16px; height:16px; flex-shrink:0; margin-top:3px; }
.capability-planned { color:var(--muted); font-size:12px; }
#quote-dialog .dialog-actions { display:flex; flex-wrap:wrap; gap:10px; }
#quote-dialog .dialog-actions [data-action="contact-sales"] { flex:1 0 100%; white-space:normal; text-align:center; }
#quote-dialog .dialog-actions button { flex:1 1 180px; min-width:0; white-space:normal; text-align:center; }

.quote-overages { margin:0 0 20px; border-block:1px solid var(--line); }
.quote-overages>summary { min-height:44px; font-size:14px; line-height:1.5; }
.quote-overages>summary .icon { width:16px; height:16px; flex-shrink:0; }
.quote-overages dl { margin:0 0 16px; font-size:13px; line-height:1.6; }
.quote-overages dl>div { display:flex; justify-content:space-between; gap:18px; margin-top:8px; }
.quote-overages dd { margin:0; text-align:right; white-space:nowrap; }

.bundle-comparison { margin-top:24px; padding-block:20px; border-block:1px solid var(--line); }
.bundle-comparison h3 { font-size:17px; line-height:1.5; margin:0 0 14px; }
.bundle-comparison table { width:100%; border-collapse:collapse; table-layout:fixed; font-size:14px; line-height:1.5; }
.bundle-comparison th,.bundle-comparison td { padding:9px 10px; text-align:left; vertical-align:middle; overflow-wrap:anywhere; }
.bundle-comparison thead th { color:var(--muted); font-size:12px; font-weight:400; border-bottom:1px solid var(--line); }
.bundle-comparison tbody th { font-weight:500; }
.bundle-comparison th:first-child { padding-left:0; width:38%; }
.bundle-comparison small { display:block; font-size:12px; line-height:1.5; color:var(--muted); font-weight:400; margin-top:4px; }
.bundle-comparison p { font-size:13px; line-height:1.7; color:var(--muted); margin:14px 0; max-width:90ch; }
.bundle-actions { display:flex; align-items:center; flex-wrap:wrap; gap:12px 22px; }
.bundle-actions .button,.bundle-actions .text-button { white-space:normal; font-size:13px; min-height:44px; text-align:center; }
#quote-dialog .bundle-comparison { margin:0 0 22px; padding-top:16px; }
@media(max-width:680px) {
  .bundle-comparison thead { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .bundle-comparison table,.bundle-comparison tbody { display:block; }
  .bundle-comparison tr { display:block; padding:10px 0; border-top:1px solid var(--line); }
  .bundle-comparison th:first-child { display:block; padding:0 0 10px; width:auto; }
  .bundle-comparison td { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:2px 16px; padding:6px 0; text-align:right; }
  .bundle-comparison td::before { content:attr(data-label); text-align:left; font-size:12px; color:var(--muted); }
  .bundle-comparison td small { grid-column:2; }
  .bundle-actions { align-items:stretch; gap:4px; }
  .bundle-actions .button,.bundle-actions .text-button { width:100%; }
}