/* ============================================================
   /css/pricing-tool.css
   Wizard UI for the customer-facing pricing tool.
   Matches the site's redesigned hero language: glass surfaces,
   sky blue accents, subtle gradients, premium feel.
   ============================================================ */

:root {
  --pt-blue:      #1AACE0;
  --pt-blue-soft: #7dd8f5;
  --pt-blue-deep: #002f5c;
  --pt-orange:    #F26520;
  --pt-orange-l:  #E84E08;
  --pt-dark:      #041220;
  --pt-bg:        #F9F8F6;
  --pt-card:      #ffffff;
  --pt-border:    #E5E7EB;
  --pt-text:      #111111;
  --pt-text-sub:  #5F5F5F;
  --pt-shadow-sm: 0 2px 8px rgba(8,12,24,0.05);
  --pt-shadow-md: 0 8px 28px rgba(8,12,24,0.10);
  --pt-shadow-lg: 0 24px 56px rgba(8,12,24,0.15);
}

/* ============================================================
   PAGE CONTAINER & HERO
   ============================================================ */
.pt-page {
  background:
    linear-gradient(180deg, #F0F6FA 0%, #F9F8F6 30%, #F9F8F6 100%);
  min-height: 100vh;
  padding-bottom: 80px;
}

.pt-hero {
  position: relative;
  padding: clamp(80px, 12vw, 140px) 0 clamp(40px, 6vw, 70px);
  text-align: center;
  background:
    radial-gradient(ellipse at top, rgba(26,172,224,0.06) 0%, transparent 60%),
    linear-gradient(180deg, #F0F6FA 0%, transparent 100%);
}
.pt-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(26,172,224,0.10);
  color: #006a92;
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
.pt-hero-eyebrow svg {
  width: 14px; height: 14px;
}
.pt-hero h1 {
  font-family: var(--font-display, Raleway, sans-serif);
  font-size: clamp(32px, 4.8vw, 54px);
  font-weight: 900;
  line-height: 1.06;
  letter-spacing: -0.025em;
  color: var(--pt-text);
  margin: 0 0 16px;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}
.pt-hero h1 .pt-accent {
  background: linear-gradient(135deg, var(--pt-blue-soft) 0%, var(--pt-blue) 50%, var(--pt-blue-deep) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}
.pt-hero p.pt-sub {
  font-size: clamp(15px, 1.6vw, 18px);
  color: var(--pt-text-sub);
  max-width: 620px;
  margin: 0 auto;
  line-height: 1.55;
}

/* The pt-step-engaged class previously shrunk the hero on subsequent steps —
   but that caused the page to JUMP upward when users hit Continue, which is
   jarring. We now leave the hero untouched. The progress bar carries the
   "you're in step N" feedback. */

/* ============================================================
   PROGRESS BAR
   ============================================================ */
.pt-progress {
  max-width: 720px;
  margin: 0 auto 32px;
  padding: 0 20px;
}
.pt-progress-bar {
  height: 6px;
  background: rgba(8,12,24,0.06);
  border-radius: 999px;
  overflow: hidden;
  position: relative;
}
.pt-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--pt-blue) 0%, var(--pt-blue-soft) 100%);
  border-radius: 999px;
  width: 0%;
  transition: width 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-progress-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
  font-size: 12px;
  color: var(--pt-text-sub);
  letter-spacing: 0.04em;
}
.pt-progress-meta strong {
  color: var(--pt-text);
}

/* ============================================================
   STEP CARD
   ============================================================ */
.pt-wizard {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
  /* When JS scrolls the wizard into view on step change, leave room for
     the sticky nav AND its 24px drop shadow so the new step's heading +
     subtitle aren't visually crowded by the shadow's frosted zone. */
  scroll-margin-top: calc(var(--nav-h, 72px) + 48px);
}
.pt-step {
  background: var(--pt-card);
  border-radius: 18px;
  padding: clamp(28px, 4vw, 44px) clamp(24px, 4vw, 48px);
  box-shadow: var(--pt-shadow-md);
  border: 1px solid rgba(8,12,24,0.04);
  display: none;
  animation: pt-fade-in 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.pt-step.is-active {
  display: block;
}
@keyframes pt-fade-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pt-step-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pt-blue);
  margin-bottom: 8px;
}
.pt-step h2 {
  font-family: var(--font-display, Raleway, sans-serif);
  font-size: clamp(22px, 3vw, 30px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0 0 8px;
  color: var(--pt-text);
}
.pt-step .pt-step-sub {
  font-size: 15px;
  color: var(--pt-text-sub);
  margin: 0 0 28px;
  line-height: 1.55;
}

/* ============================================================
   OPTION CARDS — multi-select / single-select
   ============================================================ */
.pt-options {
  display: grid;
  gap: 12px;
}
.pt-options-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pt-options-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pt-options-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 720px) {
  .pt-options-grid-2,
  .pt-options-grid-3,
  .pt-options-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .pt-options-grid-2,
  .pt-options-grid-3,
  .pt-options-grid-4 { grid-template-columns: 1fr; }
}

.pt-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  background: #fff;
  border: 2px solid var(--pt-border);
  border-radius: 14px;
  padding: 22px 18px;
  cursor: pointer;
  transition: all 0.18s ease;
  position: relative;
  min-height: 120px;
  justify-content: center;
}
.pt-option:hover {
  border-color: var(--pt-blue-soft);
  transform: translateY(-2px);
  box-shadow: var(--pt-shadow-sm);
}
.pt-option.is-selected {
  border-color: var(--pt-blue);
  background: linear-gradient(180deg, rgba(26,172,224,0.04) 0%, rgba(26,172,224,0.10) 100%);
  box-shadow: 0 0 0 4px rgba(26,172,224,0.12);
}
.pt-option.is-selected::after {
  content: '';
  position: absolute;
  top: 10px; right: 10px;
  width: 22px; height: 22px;
  background: var(--pt-blue);
  border-radius: 50%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: 14px;
  background-position: center;
  background-repeat: no-repeat;
}
.pt-option-icon {
  font-size: 32px;
  margin-bottom: 10px;
  color: var(--pt-blue);
  display: block;
  line-height: 1;
}
.pt-option-icon svg {
  width: 36px; height: 36px;
  stroke: var(--pt-blue);
  fill: none;
  stroke-width: 1.6;
}
.pt-option-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pt-text);
  margin: 0 0 4px;
}
.pt-option-sub {
  font-size: 12px;
  color: var(--pt-text-sub);
  line-height: 1.4;
  margin: 0;
}

/* Wider option cards (single-column for big choices like home type) */
.pt-options-list .pt-option {
  flex-direction: row;
  text-align: left;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 18px 22px;
  min-height: 0;
}
.pt-options-list .pt-option-icon {
  margin: 0;
  flex-shrink: 0;
}
.pt-options-list .pt-option-body {
  flex: 1;
}

/* ============================================================
   TEXT/NUMBER INPUTS
   ============================================================ */
.pt-field {
  margin-bottom: 18px;
}
.pt-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--pt-text);
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.pt-input,
.pt-select,
.pt-textarea {
  width: 100%;
  font-family: inherit;
  font-size: 16px;  /* 16px prevents mobile zoom */
  padding: 14px 16px;
  border: 2px solid var(--pt-border);
  border-radius: 10px;
  background: #fff;
  color: var(--pt-text);
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
  -webkit-appearance: none;
}
.pt-input:focus,
.pt-select:focus,
.pt-textarea:focus {
  outline: none;
  border-color: var(--pt-blue);
  box-shadow: 0 0 0 4px rgba(26,172,224,0.12);
}
.pt-input.is-invalid {
  border-color: #DC2626;
  box-shadow: 0 0 0 4px rgba(220,38,38,0.10);
}
.pt-error {
  display: block;
  font-size: 13px;
  color: #DC2626;
  margin-top: 6px;
}

/* Slider for sq ft */
.pt-slider-wrap {
  background: #F3F6F9;
  border: 1px solid var(--pt-border);
  border-radius: 14px;
  padding: 24px;
}
.pt-slider-value {
  font-size: 32px;
  font-weight: 800;
  color: var(--pt-blue);
  text-align: center;
  margin-bottom: 4px;
  font-family: var(--font-display, Raleway, sans-serif);
}
.pt-slider-value-unit {
  font-size: 14px;
  color: var(--pt-text-sub);
  text-align: center;
  margin-bottom: 18px;
}
.pt-slider {
  width: 100%;
  -webkit-appearance: none;
  background: transparent;
  height: 32px;
  cursor: pointer;
}
.pt-slider::-webkit-slider-runnable-track {
  height: 6px;
  background: linear-gradient(90deg, var(--pt-blue-soft) 0%, var(--pt-blue) 100%);
  border-radius: 999px;
}
.pt-slider::-moz-range-track {
  height: 6px;
  background: linear-gradient(90deg, var(--pt-blue-soft) 0%, var(--pt-blue) 100%);
  border-radius: 999px;
  border: none;
}
.pt-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  margin-top: -10px;
  background: #fff;
  border: 3px solid var(--pt-blue);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--pt-shadow-sm);
  transition: transform 0.15s ease;
}
.pt-slider::-webkit-slider-thumb:hover { transform: scale(1.1); }
.pt-slider::-moz-range-thumb {
  width: 26px;
  height: 26px;
  background: #fff;
  border: 3px solid var(--pt-blue);
  border-radius: 50%;
  cursor: pointer;
  box-shadow: var(--pt-shadow-sm);
}
.pt-slider-marks {
  display: flex;
  justify-content: space-between;
  margin-top: 10px;
  font-size: 11px;
  color: var(--pt-text-sub);
}

/* ============================================================
   NAVIGATION BAR (Back / Continue)
   ============================================================ */
.pt-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 32px;
  gap: 12px;
}
.pt-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  padding: 14px 28px;
  border-radius: 10px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.18s ease;
  text-decoration: none;
  letter-spacing: 0.01em;
  min-height: 48px;
}
.pt-btn-primary {
  background: var(--pt-orange);
  color: #fff;
  border-color: var(--pt-orange);
}
.pt-btn-primary:hover:not(:disabled) {
  background: var(--pt-orange-l);
  border-color: var(--pt-orange-l);
  transform: translateY(-1px);
  box-shadow: var(--pt-shadow-md);
}
.pt-btn-primary:disabled {
  background: #C4C4C4;
  border-color: #C4C4C4;
  cursor: not-allowed;
  opacity: 0.7;
}
.pt-btn-ghost {
  background: transparent;
  color: var(--pt-text-sub);
  border-color: transparent;
}
.pt-btn-ghost:hover {
  color: var(--pt-text);
  background: rgba(8,12,24,0.04);
}
.pt-btn svg {
  width: 16px; height: 16px;
}

/* ============================================================
   SERVICE AREA STATUS CALLOUTS
   ============================================================ */
.pt-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  border-radius: 12px;
  margin-top: 16px;
  font-size: 14px;
  line-height: 1.5;
}
.pt-callout svg {
  width: 20px; height: 20px;
  flex-shrink: 0;
  margin-top: 1px;
}
.pt-callout-success {
  background: rgba(26,172,224,0.08);
  color: #006a92;
}
.pt-callout-success svg { stroke: var(--pt-blue); fill: none; stroke-width: 2; }
.pt-callout-warning {
  background: rgba(242,101,32,0.08);
  color: #9C3F0F;
}
.pt-callout-warning svg { stroke: var(--pt-orange); fill: none; stroke-width: 2; }
.pt-callout-danger {
  background: rgba(220,38,38,0.08);
  color: #991B1B;
}
.pt-callout-danger svg { stroke: #DC2626; fill: none; stroke-width: 2; }
.pt-callout strong { display: block; margin-bottom: 2px; }

/* ============================================================
   FALLBACK (no JS)
   ============================================================ */
.pt-nojs {
  text-align: center;
  padding: 40px 24px;
  background: var(--pt-card);
  border-radius: 14px;
  margin: 40px auto;
  max-width: 600px;
  box-shadow: var(--pt-shadow-sm);
}
.pt-nojs h3 {
  font-size: 20px;
  margin: 0 0 12px;
  font-weight: 700;
}
.pt-nojs p {
  color: var(--pt-text-sub);
  margin: 0 0 20px;
}

/* ============================================================
   RESULTS PAGE — recommendation panels with good/better/best tiers
   ============================================================ */

/* Wider container on results so tier cards have room */
.pt-step[data-step-id="results"] {
  max-width: none;
}

/* Each equipment recommendation gets its own panel */
.pt-rec-panel {
  margin: 32px 0;
  padding: 24px;
  border-radius: 14px;
  background: #FAFBFC;
  border: 1px solid var(--pt-border);
}
.pt-rec-header {
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--pt-border);
}
.pt-rec-name {
  font-size: 19px;
  font-weight: 800;
  color: var(--pt-text);
  margin: 0 0 4px;
}
.pt-rec-size {
  font-size: 13px;
  color: var(--pt-text-sub);
}

/* Tier cards — three-column grid */
.pt-tier-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .pt-tier-grid { grid-template-columns: 1fr; }
}

.pt-tier {
  background: #fff;
  border: 2px solid var(--pt-border);
  border-radius: 12px;
  padding: 22px 20px;
  position: relative;
  display: flex;
  flex-direction: column;
}
.pt-tier-featured {
  border-color: var(--pt-blue);
  box-shadow: 0 0 0 4px rgba(26,172,224,0.12);
  transform: translateY(-4px);
}
@media (max-width: 720px) {
  .pt-tier-featured { transform: none; }
}

.pt-tier-badge {
  position: absolute;
  top: -10px; left: 50%;
  transform: translateX(-50%);
  background: var(--pt-blue);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 4px 12px;
  border-radius: 999px;
  white-space: nowrap;
}

.pt-tier-eyebrow {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--pt-blue);
  margin-bottom: 6px;
}
.pt-tier-name {
  font-size: 16px;
  font-weight: 800;
  margin: 0 0 14px;
  color: var(--pt-text);
}

.pt-tier-price {
  margin-bottom: 16px;
  padding-bottom: 14px;
  border-bottom: 1px dashed var(--pt-border);
}
.pt-tier-price-was {
  font-size: 13px;
  color: var(--pt-text-sub);
  text-decoration: line-through;
  margin-bottom: 2px;
}
.pt-tier-price-now {
  font-family: var(--font-display, Raleway, sans-serif);
  font-size: 22px;
  font-weight: 800;
  color: var(--pt-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.pt-tier-price-rebate {
  font-size: 12px;
  color: var(--pt-blue);
  font-weight: 600;
  margin-top: 2px;
}

.pt-tier-specs {
  list-style: none;
  padding: 0;
  margin: 0 0 14px;
  flex: 1;
}
.pt-tier-specs li {
  font-size: 13px;
  color: var(--pt-text-sub);
  padding: 4px 0 4px 22px;
  position: relative;
  line-height: 1.45;
}
.pt-tier-specs li::before {
  content: '';
  position: absolute;
  left: 0; top: 7px;
  width: 14px; height: 14px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%231AACE0' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
}

.pt-tier-rebates {
  background: rgba(26,172,224,0.06);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 12px;
  color: var(--pt-text-sub);
  line-height: 1.6;
}
.pt-tier-rebates strong {
  display: block;
  color: var(--pt-text);
  margin-bottom: 4px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Infrastructure block (added cost line items below tiers) */
.pt-infra-block {
  margin-top: 20px;
  padding: 16px 20px;
  background: rgba(242,101,32,0.06);
  border-left: 3px solid var(--pt-orange);
  border-radius: 8px;
}
.pt-infra-label {
  font-size: 12px;
  font-weight: 700;
  color: #9C3F0F;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 10px;
}
.pt-infra-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  padding: 8px 0;
  border-bottom: 1px solid rgba(242,101,32,0.12);
  align-items: start;
}
.pt-infra-item:last-child { border-bottom: none; }
.pt-infra-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--pt-text);
  grid-column: 1;
}
.pt-infra-desc {
  font-size: 12px;
  color: var(--pt-text-sub);
  grid-column: 1;
  line-height: 1.4;
}
.pt-infra-price {
  font-size: 14px;
  font-weight: 700;
  color: #9C3F0F;
  grid-column: 2;
  grid-row: 1 / 3;
  align-self: center;
  white-space: nowrap;
}

/* Total range */
.pt-total {
  margin: 32px 0;
  padding: 24px;
  background: linear-gradient(135deg, var(--pt-blue) 0%, var(--pt-blue-deep) 100%);
  color: #fff;
  border-radius: 14px;
  text-align: center;
}
.pt-total-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  opacity: 0.9;
  margin-bottom: 6px;
}
.pt-total-amount {
  font-family: var(--font-display, Raleway, sans-serif);
  font-size: clamp(28px, 4vw, 38px);
  font-weight: 900;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.pt-total-note {
  font-size: 13px;
  opacity: 0.85;
}

/* Results CTA */
.pt-results-cta {
  margin: 32px 0;
  padding: 28px;
  background: #fff;
  border: 2px solid var(--pt-blue);
  border-radius: 14px;
  text-align: center;
}
.pt-results-cta h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 0 0 8px;
  color: var(--pt-text);
}
.pt-results-cta p {
  color: var(--pt-text-sub);
  margin: 0 0 18px;
  font-size: 14px;
  line-height: 1.55;
}
.pt-results-cta-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.pt-disclaimer {
  font-size: 12px;
  color: var(--pt-text-sub);
  line-height: 1.55;
  background: #F3F6F9;
  padding: 14px 16px;
  border-radius: 8px;
  margin-top: 24px;
}
.pt-disclaimer strong { color: var(--pt-text); }

/* Make the wizard wider on the results step so tier cards aren't cramped */
.pt-wizard:has(.pt-step[data-step-id="results"].is-active),
.pt-wizard.pt-results-mode {
  max-width: 980px;
}

/* ============================================================
   COMPACT OPTION CARDS (used for large grids like home types)
   ============================================================ */
.pt-options-compact .pt-option {
  padding: 14px 12px;
  min-height: 100px;
}
.pt-options-compact .pt-option-icon svg {
  width: 28px; height: 28px;
}
.pt-options-compact .pt-option-icon {
  margin-bottom: 6px;
}
.pt-options-compact .pt-option-title {
  font-size: 14px;
  margin-bottom: 2px;
}
.pt-options-compact .pt-option-sub {
  font-size: 11px;
}

/* ============================================================
   AUTO-ADVANCE FEEDBACK — brief flash when picking, before transition
   ============================================================ */
.pt-option.is-pending {
  border-color: var(--pt-blue);
  background: linear-gradient(180deg, rgba(26,172,224,0.06) 0%, rgba(26,172,224,0.14) 100%);
  box-shadow: 0 0 0 4px rgba(26,172,224,0.16);
  transform: scale(1.02);
  transition: all 0.15s ease;
}

/* ============================================================
   "WHAT HAPPENS NEXT" — rendered server-side by
   /api/pricing-tool-submit.php after the customer submits.
   The <ul> is intentional (not <ol>) so the browser does not
   add default "1. 2. 3." markers on top of the custom
   .pt-next-steps-num circle badges.
   ============================================================ */
.pt-next-steps {
  margin-top: 32px;
  padding: 32px;
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: 14px;
  box-shadow: var(--pt-shadow-sm);
}
.pt-next-steps-header {
  text-align: center;
  margin-bottom: 24px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--pt-border);
}
.pt-next-steps-header .pt-step-eyebrow {
  display: inline-block;
  margin-bottom: 8px;
}
.pt-next-steps-header h3 {
  font-size: 22px;
  font-weight: 800;
  margin: 4px 0 8px;
  color: var(--pt-text);
}
.pt-next-steps-header p {
  color: var(--pt-text-sub);
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}
.pt-next-steps-list {
  list-style: none;
  padding: 0;
  margin: 0 0 28px;
}
.pt-next-steps-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--pt-border);
}
.pt-next-steps-list li:last-child {
  border-bottom: none;
}
.pt-next-steps-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--pt-blue);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-next-steps-body {
  flex: 1;
  min-width: 0;
}
.pt-next-steps-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--pt-text);
  margin-bottom: 4px;
  line-height: 1.4;
}
.pt-next-steps-desc {
  font-size: 14px;
  color: var(--pt-text-sub);
  line-height: 1.6;
}
.pt-next-steps-call {
  text-align: center;
  padding-top: 8px;
}
.pt-next-steps-call > p {
  font-size: 14px;
  color: var(--pt-text-sub);
  margin: 0 0 14px;
}
.pt-next-steps-hours {
  font-size: 12px;
  color: #8a8a8a;
  margin: 12px 0 0;
}
.pt-btn-large {
  padding: 14px 32px;
  font-size: 17px;
  font-weight: 700;
}
@media (max-width: 600px) {
  .pt-next-steps { padding: 22px 18px; }
  .pt-next-steps-header h3 { font-size: 19px; }
  .pt-next-steps-num { width: 32px; height: 32px; font-size: 14px; }
}