@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,400;1,500;1,600;1,700&family=Montserrat:wght@500;600;700&display=swap');

/* ============================================================
   HCP Prayer Flow — Design System
   ============================================================ */

:root {
  --hcp-cream: #FAFAF8;
  --hcp-white: #FFFFFF;
  --hcp-navy: #0B2840;
  --hcp-gold: #C9852A;
  --hcp-gold-light: #F5E6CC;
  --hcp-gold-hover: #A66D1E;
  --hcp-muted: #6B7280;
  --hcp-border: #E5E7EB;
  --hcp-selected-border: #C9852A;
  --hcp-radius-card: 16px;
  --hcp-radius-btn: 16px;
  --hcp-radius-chip: 999px;
  --hcp-shadow: 0 2px 12px rgba(11, 40, 64, 0.08);
  --hcp-shadow-selected: 0 4px 20px rgba(201, 133, 42, 0.18);
}

/* ============================================================
   GLOBAL WRAPPER
   ============================================================ */

.hcp-flow-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 0 16px 40px;
  background: var(--hcp-cream);
  font-family: inherit;
  color: var(--hcp-navy);
}

.hcp-step {
  display: none;
}

.hcp-step.active {
  display: block;
}

/* ============================================================
   PROGRESS BAR
   ============================================================ */

.hcp-progress {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 24px 0 32px;
  position: relative;
}

.hcp-progress-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
  z-index: 1;
}

.hcp-progress-step + .hcp-progress-step::before {
  content: '';
  position: absolute;
  top: 17px;
  right: 50%;
  width: 100%;
  height: 2px;
  background: var(--hcp-border);
  z-index: 0;
}

.hcp-progress-step.done::before,
.hcp-progress-step.active::before {
  background: var(--hcp-gold);
}

.hcp-progress-num {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  border: 2px solid var(--hcp-border);
  background: var(--hcp-white);
  color: var(--hcp-muted);
  position: relative;
  z-index: 1;
}

.hcp-progress-step.active .hcp-progress-num {
  background: var(--hcp-gold);
  border-color: var(--hcp-gold);
  color: #fff;
}

.hcp-progress-step.done .hcp-progress-num {
  background: var(--hcp-navy);
  border-color: var(--hcp-navy);
  color: #fff;
}

.hcp-progress-label {
  font-size: 11px;
  margin-top: 6px;
  color: var(--hcp-muted);
  text-align: center;
  font-weight: 500;
  white-space: nowrap;
}

.hcp-progress-step.active .hcp-progress-label {
  color: var(--hcp-gold);
  font-weight: 700;
}

.hcp-progress-step.done .hcp-progress-label {
  color: var(--hcp-navy);
}

/* ============================================================
   STEP HEADER
   ============================================================ */

.hcp-step-header {
  text-align: center;
  margin-bottom: 28px;
}

.hcp-step-title {
  font-size: 32px;
  font-weight: 800;
  color: var(--hcp-navy);
  line-height: 1.15;
  margin: 0 0 10px;
  letter-spacing: -0.5px;
}

.hcp-step-divider {
  width: 48px;
  height: 3px;
  background: var(--hcp-gold);
  border-radius: 999px;
  margin: 0 auto 12px;
}

.hcp-step-subtitle {
  font-size: 15px;
  color: var(--hcp-muted);
  margin: 0;
  line-height: 1.5;
}

/* ============================================================
   PRIMARY CTA BUTTON
   ============================================================ */

.hcp-btn-primary {
  width: 100%;
  height: 58px;
  background: var(--hcp-gold);
  color: #fff;
  border: none;
  border-radius: var(--hcp-radius-btn);
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s, transform 0.15s;
  margin-top: 24px;
  letter-spacing: 0.1px;
}

.hcp-btn-primary:hover {
  background: var(--hcp-gold-hover);
  transform: translateY(-1px);
}

.hcp-btn-primary:active {
  transform: translateY(0);
}

.hcp-btn-primary .hcp-btn-icon {
  font-size: 20px;
  line-height: 1;
}

.hcp-btn-primary .hcp-btn-arrow {
  font-size: 18px;
  opacity: 0.85;
}

.hcp-btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

/* ============================================================
   TRUST LINE
   ============================================================ */

.hcp-trust-line {
  text-align: center;
  font-size: 12px;
  color: var(--hcp-muted);
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.hcp-trust-line::before {
  content: '🔒';
  font-size: 11px;
}

/* ============================================================
   BACK LINK
   ============================================================ */

.hcp-back {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 14px;
  color: var(--hcp-muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-bottom: 16px;
  text-decoration: none;
}

.hcp-back:hover {
  color: var(--hcp-navy);
}

/* ============================================================
   STEP 1 — WRITE YOUR PRAYER
   ============================================================ */

.hcp-prayer-textarea {
  width: 100%;
  min-height: 180px;
  border: 1.5px solid var(--hcp-gold);
  border-radius: 14px;
  padding: 18px;
  font-size: 16px;
  color: var(--hcp-navy);
  background: var(--hcp-white);
  resize: vertical;
  outline: none;
  line-height: 1.7;
  box-sizing: border-box;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.hcp-prayer-textarea:focus {
  border-color: var(--hcp-gold-hover);
  box-shadow: 0 0 0 3px rgba(201, 133, 42, 0.12);
}

/* Prayer category chips */

.hcp-chips-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--hcp-navy);
  margin: 20px 0 10px;
}

.hcp-chips-label .hcp-chips-optional {
  color: var(--hcp-muted);
  font-weight: 400;
  margin-left: 4px;
}

.hcp-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 20px;
}

.hcp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1.5px solid var(--hcp-border);
  border-radius: var(--hcp-radius-chip);
  background: var(--hcp-white);
  font-size: 14px;
  font-weight: 500;
  color: var(--hcp-navy);
  cursor: pointer;
  transition: all 0.18s;
}

.hcp-chip:hover {
  border-color: var(--hcp-gold);
  background: var(--hcp-gold-light);
}

.hcp-chip.is-selected {
  border-color: var(--hcp-gold);
  background: var(--hcp-gold-light);
  color: var(--hcp-gold-hover);
  font-weight: 700;
}

/* Privacy badge */

.hcp-privacy-badge {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 8px;
}

.hcp-privacy-badge-icon {
  width: 48px;
  height: 48px;
  background: var(--hcp-gold-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.hcp-privacy-badge-text strong {
  display: block;
  font-size: 15px;
  color: var(--hcp-navy);
  font-weight: 700;
  margin-bottom: 2px;
}

.hcp-privacy-badge-text span {
  font-size: 13px;
  color: var(--hcp-muted);
  line-height: 1.4;
}

/* ============================================================
   STEP 2 — YOUR DETAILS
   ============================================================ */

.hcp-fields-card {
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: var(--hcp-radius-card);
  padding: 20px;
  margin-bottom: 16px;
}

.hcp-field-group {
  margin-bottom: 18px;
}

.hcp-field-group:last-child {
  margin-bottom: 0;
}

.hcp-field-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--hcp-navy);
  margin-bottom: 8px;
  display: block;
}

.hcp-field-input-wrap {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--hcp-border);
  border-radius: 12px;
  background: var(--hcp-white);
  overflow: hidden;
  transition: border-color 0.2s;
}

.hcp-field-input-wrap:focus-within {
  border-color: var(--hcp-gold);
  box-shadow: 0 0 0 3px rgba(201, 133, 42, 0.10);
}

.hcp-field-icon {
  padding: 0 14px;
  font-size: 17px;
  color: var(--hcp-gold);
  flex-shrink: 0;
}

.hcp-field-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  padding: 14px 14px 14px 0;
  color: var(--hcp-navy);
  background: transparent;
  font-family: inherit;
}

.hcp-field-input::placeholder {
  color: #B0B7C0;
}

/* Radio + checkbox options */

.hcp-options-card {
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: var(--hcp-radius-card);
  padding: 18px 20px;
  margin-bottom: 16px;
}

.hcp-options-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--hcp-navy);
  margin-bottom: 14px;
}

.hcp-radio-row {
  display: flex;
  gap: 24px;
  align-items: center;
}

.hcp-radio-option {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--hcp-navy);
}

.hcp-radio-option input[type="radio"] {
  width: 18px;
  height: 18px;
  accent-color: var(--hcp-gold);
  cursor: pointer;
}

.hcp-checkbox-option {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: var(--hcp-navy);
  cursor: pointer;
}

.hcp-checkbox-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--hcp-gold);
  cursor: pointer;
  flex-shrink: 0;
}

.hcp-options-divider {
  height: 1px;
  background: var(--hcp-border);
  margin: 14px 0;
}

/* ============================================================
   STEP 3 — CHOOSE YOUR PRAYER JOURNEY
   ============================================================ */

.hcp-choice-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 20px;
}

.hcp-choice-card {
  background: var(--hcp-white);
  border: 2px solid var(--hcp-border);
  border-radius: var(--hcp-radius-card);
  padding: 20px;
  cursor: pointer;
  position: relative;
  transition: all 0.2s;
  box-shadow: var(--hcp-shadow);
}

.hcp-choice-card:hover {
  border-color: var(--hcp-gold);
  box-shadow: var(--hcp-shadow-selected);
}

.hcp-choice-card.is-selected {
  border-color: var(--hcp-gold);
  box-shadow: var(--hcp-shadow-selected);
}

.hcp-choice-card.hcp-card-free {
  opacity: 0.82;
  background: #F9F9F9;
}

.hcp-choice-card.hcp-card-free:hover {
  opacity: 1;
}

.hcp-choice-check {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--hcp-border);
  background: var(--hcp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  color: transparent;
}

.hcp-choice-card.is-selected .hcp-choice-check {
  background: var(--hcp-gold);
  border-color: var(--hcp-gold);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.hcp-choice-top {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-right: 40px;
}

.hcp-choice-icon-wrap {
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background: var(--hcp-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.hcp-choice-title {
  font-size: 17px;
  font-weight: 800;
  color: var(--hcp-navy);
  margin: 0 0 4px;
}

.hcp-choice-desc {
  font-size: 13px;
  color: var(--hcp-muted);
  line-height: 1.4;
  margin: 0;
}

.hcp-choice-price-tag {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--hcp-border);
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--hcp-navy);
}

.hcp-choice-price-tag .hcp-price-highlight {
  color: var(--hcp-gold);
  font-weight: 700;
}

/* Inline subscription plan selector */

.hcp-sub-plans {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--hcp-border);
  display: flex;
  gap: 10px;
}

.hcp-sub-plan {
  flex: 1;
  border: 1.5px solid var(--hcp-border);
  border-radius: 12px;
  padding: 10px 8px;
  text-align: center;
  cursor: pointer;
  transition: all 0.18s;
  background: var(--hcp-white);
}

.hcp-sub-plan:hover {
  border-color: var(--hcp-gold);
  background: var(--hcp-gold-light);
}

.hcp-sub-plan.is-selected {
  border-color: var(--hcp-gold);
  background: var(--hcp-gold-light);
}

.hcp-sub-plan-name {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--hcp-navy);
  margin-bottom: 3px;
}

.hcp-sub-plan-price {
  display: block;
  font-size: 13px;
  color: var(--hcp-gold);
  font-weight: 600;
}

.hcp-sub-billing-note {
  font-size: 11px;
  color: var(--hcp-muted);
  text-align: center;
  margin-top: 8px;
}

/* Trust badges */

.hcp-trust-badges {
  display: flex;
  gap: 10px;
  margin: 4px 0 8px;
}

.hcp-trust-badge {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: 12px;
  padding: 14px 8px;
  text-align: center;
}

.hcp-trust-badge-icon {
  font-size: 22px;
}

.hcp-trust-badge-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--hcp-navy);
}

.hcp-trust-badge-desc {
  font-size: 11px;
  color: var(--hcp-muted);
  line-height: 1.3;
}

/* ============================================================
   STEP 4 — HOLY SITES
   ============================================================ */

.hcp-site-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.hcp-site-card {
  display: flex;
  align-items: center;
  background: var(--hcp-white);
  border: 2px solid var(--hcp-border);
  border-radius: var(--hcp-radius-card);
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: var(--hcp-shadow);
  min-height: 100px;
}

.hcp-site-card:hover {
  border-color: var(--hcp-gold);
}

.hcp-site-card.is-selected {
  border-color: var(--hcp-gold);
  box-shadow: var(--hcp-shadow-selected);
}

.hcp-site-thumb {
  width: 90px;
  height: 100px;
  object-fit: cover;
  flex-shrink: 0;
}

.hcp-site-info {
  flex: 1;
  padding: 12px 14px;
}

.hcp-site-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--hcp-navy);
  margin: 0 0 3px;
  line-height: 1.2;
}

.hcp-site-location {
  font-size: 12px;
  color: var(--hcp-gold);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 3px;
  margin-bottom: 5px;
}

.hcp-site-desc {
  font-size: 12px;
  color: var(--hcp-muted);
  line-height: 1.35;
  margin: 0;
}

.hcp-site-check {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid var(--hcp-border);
  margin: 0 16px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  background: var(--hcp-white);
  font-size: 13px;
  color: transparent;
}

.hcp-site-card.is-selected .hcp-site-check {
  background: var(--hcp-gold);
  border-color: var(--hcp-gold);
  color: #fff;
  font-weight: 700;
}

/* Site counter badge */

.hcp-site-counter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 8px;
}

.hcp-site-counter-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.hcp-site-counter-icon {
  font-size: 22px;
}

.hcp-site-counter-text strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--hcp-navy);
}

.hcp-site-counter-text span {
  font-size: 12px;
  color: var(--hcp-muted);
}

.hcp-site-counter-edit {
  color: var(--hcp-gold);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}

/* ============================================================
   STEP 5 — REVIEW & PAY
   ============================================================ */

.hcp-review-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.hcp-review-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: var(--hcp-radius-card);
  padding: 16px 18px;
  cursor: pointer;
  transition: border-color 0.2s;
}

.hcp-review-card:hover {
  border-color: var(--hcp-gold);
}

.hcp-review-icon-wrap {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--hcp-gold-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.hcp-review-content {
  flex: 1;
}

.hcp-review-card-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hcp-navy);
  margin: 0 0 4px;
}

.hcp-review-card-detail {
  font-size: 13px;
  color: var(--hcp-muted);
  line-height: 1.4;
  margin: 0;
}

.hcp-review-arrow {
  color: var(--hcp-gold);
  font-size: 16px;
  font-weight: 700;
}

/* Add-ons */

.hcp-addons-card {
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: var(--hcp-radius-card);
  padding: 18px 18px 8px;
  margin-bottom: 12px;
}

.hcp-addons-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--hcp-navy);
  margin: 0 0 14px;
}

.hcp-addon-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--hcp-border);
}

.hcp-addon-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.hcp-addon-check {
  width: 20px;
  height: 20px;
  accent-color: var(--hcp-gold);
  cursor: pointer;
  flex-shrink: 0;
}

.hcp-addon-icon {
  font-size: 17px;
}

.hcp-addon-label {
  flex: 1;
  font-size: 14px;
  color: var(--hcp-navy);
  font-weight: 500;
}

.hcp-addon-price {
  font-size: 14px;
  font-weight: 700;
  color: var(--hcp-navy);
}

/* Total bar */

.hcp-total-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: var(--hcp-radius-card);
  padding: 18px 20px;
  margin-bottom: 8px;
}

.hcp-total-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--hcp-navy);
}

.hcp-total-amount {
  font-size: 26px;
  font-weight: 800;
  color: var(--hcp-gold);
}

.hcp-total-currency {
  font-size: 14px;
  font-weight: 600;
  color: var(--hcp-muted);
  margin-right: 4px;
}

.hcp-secure-line {
  text-align: center;
  font-size: 13px;
  color: var(--hcp-muted);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

/* ============================================================
   RESPONSIVE — MOBILE
   ============================================================ */

@media (max-width: 480px) {
  .hcp-step-title {
    font-size: 26px;
  }

  .hcp-progress-label {
    font-size: 10px;
  }

  .hcp-progress-num {
    width: 30px;
    height: 30px;
    font-size: 12px;
  }

  .hcp-progress-step + .hcp-progress-step::before {
    top: 14px;
  }

  .hcp-trust-badges {
    flex-direction: column;
  }

  .hcp-sub-plans {
    flex-direction: column;
  }

  .hcp-btn-primary {
    height: 54px;
    font-size: 16px;
  }

  .hcp-site-thumb {
    width: 80px;
    height: 90px;
  }

  .hcp-choice-title {
    font-size: 16px;
  }
}

/* ============================================================
   STEP 3 — Recommended badge, muted card, sub-options
   ============================================================ */

/* --- Recommended badge --- */
.hcp-recommended-badge {
    display: inline-block;
    background: var(--hcp-gold);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 20px;
    margin-bottom: 10px;
}

/* --- Muted (Free) choice card --- */
.hcp-choice-card--muted {
    opacity: 0.65;
    border-style: dashed;
}
.hcp-choice-card--muted:hover { opacity: 0.85; }

/* --- Sub-options block --- */
.hcp-sub-options {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--hcp-border);
    animation: hcp-fade-in 0.2s ease;
}
@keyframes hcp-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.hcp-sub-options-label {
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--hcp-navy);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 14px;
}

.hcp-sub-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}
@media (max-width: 600px) { .hcp-sub-cards { grid-template-columns: 1fr; } }

.hcp-sub-card {
    position: relative;
    padding: 18px 20px;
    border: 2px solid var(--hcp-border);
    border-radius: 14px;
    background: #fff;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s, background 0.2s;
}
.hcp-sub-card:hover { border-color: var(--hcp-gold); }
.hcp-sub-card.is-selected {
    border-color: var(--hcp-gold);
    background: var(--hcp-gold-light);
    box-shadow: 0 2px 14px rgba(201,133,42,0.15);
}
.hcp-sub-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--hcp-navy);
    margin: 0 0 6px;
}
.hcp-sub-card-desc {
    font-size: 0.85rem;
    color: var(--hcp-muted);
    line-height: 1.5;
    margin: 0;
}

/* ============================================================
   STEP 3 — Billing toggle + plan pills
   ============================================================ */

/* --- Billing toggle (Monthly / Annually) --- */
.hcp-billing-toggle {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.hcp-billing-btn {
    flex: 1;
    padding: 9px 16px;
    border: 2px solid var(--hcp-border);
    border-radius: 30px;
    background: #fff;
    color: var(--hcp-navy);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.hcp-billing-btn.is-active {
    border-color: var(--hcp-gold);
    background: var(--hcp-gold);
    color: #fff;
}
.hcp-save-badge {
    font-size: 0.7rem;
    font-weight: 700;
    background: rgba(255,255,255,0.25);
    border-radius: 10px;
    padding: 1px 6px;
    margin-left: 4px;
}

/* --- Plan pills --- */
.hcp-plan-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 4px;
}
.hcp-plan-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 12px 18px;
    border: 2px solid var(--hcp-border);
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    min-width: 130px;
    transition: border-color 0.2s, background 0.2s;
    text-align: left;
}
.hcp-plan-pill:hover { border-color: var(--hcp-gold); }
.hcp-plan-pill.is-selected {
    border-color: var(--hcp-gold);
    background: var(--hcp-gold-light);
}
.hcp-pill-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--hcp-navy);
    margin-bottom: 4px;
}
.hcp-pill-price {
    font-size: 0.82rem;
    color: var(--hcp-muted);
}

/* --- Inline step-level error banner --- */
.hcp-step-error {
    color: #c0392b;
    background: #fdf2f2;
    border: 1px solid #f5c6cb;
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 0.88rem;
    margin-top: 12px;
}

/* --- Sub-card checkmark visibility (Fix 3) ---
   Primary .hcp-choice-card cards already toggle the check via the
   color:transparent → color:#fff swap with a gold background; sub-cards
   sit on a light-cream selected state and need their own opacity rule. */
.hcp-sub-card .hcp-choice-check { opacity: 0; transition: opacity 0.2s; }
.hcp-sub-card.is-selected .hcp-choice-check {
    opacity: 1;
    background: var(--hcp-gold);
    border-color: var(--hcp-gold);
    color: #fff;
    font-weight: 700;
}

/* --- Free Prayer confirmation screen --- */
.hcp-upgrade-card {
    background: var(--hcp-gold-light);
    border: 2px solid var(--hcp-gold);
    border-radius: 16px;
    padding: 28px 24px;
    text-align: center;
    margin: 24px 0;
}
.hcp-upgrade-icon { font-size: 2rem; margin-bottom: 10px; }
.hcp-upgrade-title {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--hcp-navy);
    margin: 0 0 10px;
}
.hcp-upgrade-body {
    font-size: 0.9rem;
    color: var(--hcp-muted);
    line-height: 1.6;
    margin: 0 0 20px;
}
.hcp-free-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    gap: 12px;
}
.hcp-btn-secondary {
    padding: 12px 24px;
    border: 2px solid var(--hcp-border);
    border-radius: 30px;
    background: #fff;
    color: var(--hcp-muted);
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color 0.2s, color 0.2s;
}
.hcp-btn-secondary:hover {
    border-color: var(--hcp-navy);
    color: var(--hcp-navy);
}

/* ============================================================
   DESIGN SYSTEM v2 — Polished serif + line-SVG design system.
   Style-only overrides; no markup, class, ID, PHP, or JS changes.
   Existing emoji unicode glyphs are visually hidden via
   font-size:0 and replaced with line SVG icons via background-image.
   ============================================================ */

:root {
  --hcp-cream: #FBFAF8;
  --hcp-navy: #1B2A4A;
  --hcp-gold: #D4881F;
  --hcp-border: #EAE6E0;
  --hcp-selected-border: #D4881F;
  --hcp-shadow: 0 2px 12px rgba(27, 42, 74, 0.06);
  --hcp-shadow-selected: 0 4px 20px rgba(212, 136, 31, 0.18);
  --hcp-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --hcp-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* --- Typography --- */
.hcp-flow-wrap { font-family: var(--hcp-font-sans); }
.hcp-step-title,
.hcp-choice-title,
.hcp-sub-card-title {
  font-family: var(--hcp-font-serif);
  letter-spacing: -0.3px;
}
.hcp-btn-primary {
  font-family: var(--hcp-font-serif);
  letter-spacing: 0.4px;
  font-weight: 600;
}

/* --- CTA button: replace 🙏 + › with line SVGs --- */
.hcp-btn-primary .hcp-btn-icon {
  font-size: 0 !important;
  width: 22px;
  height: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18'/><path d='M8 7c-2 0-3 2-3 4v3c0 2 1 4 3 5l4 2'/><path d='M16 7c2 0 3 2 3 4v3c0 2-1 4-3 5l-4 2'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
}
.hcp-btn-primary .hcp-btn-arrow {
  font-size: 0 !important;
  width: 18px;
  height: 18px;
  opacity: 1;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  display: inline-block;
}

/* --- Trust badges: replace 🛡️ 📷 🕊️ with line SVGs --- */
.hcp-trust-badge-icon {
  font-size: 0 !important;
  color: transparent !important;
  width: 36px;
  height: 36px;
  background-color: var(--hcp-gold-light);
  border-radius: 50%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  margin-bottom: 4px;
}
.hcp-trust-badge:nth-child(1) .hcp-trust-badge-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>");
}
.hcp-trust-badge:nth-child(2) .hcp-trust-badge-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14.5 4h-5L7 7H4a2 2 0 0 0-2 2v9a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2h-3l-2.5-3z'/><circle cx='12' cy='13' r='3'/></svg>");
}
.hcp-trust-badge:nth-child(3) .hcp-trust-badge-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/><path d='M16 8 2 22'/><path d='M17.5 15H9'/></svg>");
}

/* --- Choice cards: add line-SVG icon via ::before --- */
.hcp-choice-card {
  padding: 22px 22px 22px 88px;
  border-color: var(--hcp-border);
  box-shadow: var(--hcp-shadow);
}
.hcp-choice-card::before {
  content: '';
  position: absolute;
  left: 22px;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 12px;
  background-color: var(--hcp-gold-light);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px;
}
.hcp-choice-card[data-journey="documented"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z'/><polyline points='14 2 14 8 20 8'/><line x1='16' x2='8' y1='13' y2='13'/><line x1='16' x2='8' y1='17' y2='17'/></svg>");
}
.hcp-choice-card[data-journey="free"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>");
}
.hcp-choice-top { padding-right: 40px; }

/* --- Sub-cards: add line-SVG icon via ::before --- */
.hcp-sub-card {
  padding: 18px 20px 18px 70px;
}
.hcp-sub-card::before {
  content: '';
  position: absolute;
  left: 18px;
  top: 22px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background-color: var(--hcp-gold-light);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}
.hcp-sub-card[data-journey="one-time"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='18' height='18' x='3' y='4' rx='2'/><line x1='16' x2='16' y1='2' y2='6'/><line x1='8' x2='8' y1='2' y2='6'/><line x1='3' x2='21' y1='10' y2='10'/></svg>");
}
.hcp-sub-card[data-journey="subscription"]::before {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M3 12a9 9 0 0 1 9-9 9.75 9.75 0 0 1 6.74 2.74L21 8'/><path d='M21 3v5h-5'/><path d='M21 12a9 9 0 0 1-9 9 9.75 9.75 0 0 1-6.74-2.74L3 16'/><path d='M3 21v-5h5'/></svg>");
}

/* --- Refined plan pills (Faith / Devotion / Salvation) --- */
.hcp-plan-pills {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}
.hcp-plan-pill {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 14px 8px;
  min-width: 0;
  border-radius: 14px;
}
.hcp-pill-name {
  font-family: var(--hcp-font-serif);
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--hcp-navy);
  margin-bottom: 4px;
}
.hcp-pill-price {
  font-size: 0.82rem;
  color: var(--hcp-gold);
  font-weight: 600;
}

/* --- Progress bar polish --- */
.hcp-progress-num {
  font-family: var(--hcp-font-sans);
  font-weight: 700;
}

/* ============================================================
   STEP 1 — Write Your Prayer: chips + privacy badge SVG icons
   ============================================================ */

/* --- Category chips: hide native text/emoji, inject SVG icon + label via CSS --- */
.hcp-chip {
  font-size: 0 !important;
  letter-spacing: 0;
  padding: 8px 18px 8px 36px;
  border-color: var(--hcp-gold);
  background-color: var(--hcp-white);
  background-repeat: no-repeat;
  background-position: 12px center;
  background-size: 16px;
  gap: 0;
}
.hcp-chip::after {
  font-family: var(--hcp-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--hcp-navy);
  line-height: 1.4;
}
.hcp-chip:hover {
  background-color: var(--hcp-gold-light);
}
.hcp-chip.is-selected {
  background-color: var(--hcp-gold-light) !important;
  border-color: var(--hcp-gold-hover);
}
.hcp-chip.is-selected::after {
  color: var(--hcp-gold-hover);
  font-weight: 600;
}

/* Per-category icon + label */
.hcp-chip[data-category="healing"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>");
}
.hcp-chip[data-category="healing"]::after { content: 'Healing'; }

.hcp-chip[data-category="family"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2'/><circle cx='9' cy='7' r='4'/><path d='M22 21v-2a4 4 0 0 0-3-3.87'/><path d='M16 3.13a4 4 0 0 1 0 7.75'/></svg>");
}
.hcp-chip[data-category="family"]::after { content: 'Family'; }

.hcp-chip[data-category="thanksgiving"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M11 20A7 7 0 0 1 9.8 6.1C15.5 5 17 4.48 19 2c1 2 2 4.18 2 8 0 5.5-4.78 10-10 10Z'/><path d='M2 21c0-3 1.85-5.36 5.08-6'/></svg>");
}
.hcp-chip[data-category="thanksgiving"]::after { content: 'Thanksgiving'; }

.hcp-chip[data-category="peace"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20.24 12.24a6 6 0 0 0-8.49-8.49L5 10.5V19h8.5z'/><path d='M16 8 2 22'/><path d='M17.5 15H9'/></svg>");
}
.hcp-chip[data-category="peace"]::after { content: 'Peace'; }

.hcp-chip[data-category="other"] {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z'/></svg>");
}
.hcp-chip[data-category="other"]::after { content: 'Other'; }

/* --- Privacy badge: replace 🛡️ with shield-check SVG --- */
.hcp-privacy-badge-icon {
  font-size: 0 !important;
  color: transparent !important;
  background-color: var(--hcp-gold-light);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z'/><path d='m9 12 2 2 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 22px;
}
.hcp-privacy-badge-text strong {
  font-family: var(--hcp-font-sans);
}

/* ============================================================
   STEP 2 — Your Details: field icons replaced with line SVGs
   ============================================================ */

/* --- Field icon (Name / Email): hide emoji, inject SVG --- */
.hcp-field-icon {
  font-size: 0 !important;
  color: transparent !important;
  width: 20px;
  height: 20px;
  padding: 0 14px;
  box-sizing: content-box;
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
}

/* Name field — Lucide "user" icon */
.hcp-fields-card .hcp-field-group:nth-of-type(1) .hcp-field-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}

/* Email field — Lucide "mail" icon */
.hcp-fields-card .hcp-field-group:nth-of-type(2) .hcp-field-icon {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><rect width='20' height='16' x='2' y='4' rx='2'/><path d='m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7'/></svg>");
}

/* --- Labels / options labels: ensure Inter sans (override any inheritance quirks) --- */
.hcp-field-label,
.hcp-options-label {
  font-family: var(--hcp-font-sans);
  letter-spacing: 0.1px;
}

/* ============================================================
   STEP 4 — Holy Sites: card typography + counter icons
   ============================================================ */

/* --- Site card refinements --- */
.hcp-site-name {
  font-size: 17px;
  font-weight: 700;
  color: var(--hcp-navy);
  margin: 0 0 4px;
  line-height: 1.25;
  letter-spacing: -0.1px;
}
.hcp-site-desc {
  font-style: italic;
  font-size: 13px;
  color: var(--hcp-muted);
  line-height: 1.45;
}

/* --- Counter card church icon: replace ⛪ with line SVG --- */
.hcp-site-counter-icon {
  font-size: 0 !important;
  color: transparent !important;
  width: 32px;
  height: 32px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10 9h4'/><path d='M12 7v5'/><path d='M14 22v-4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v4'/><path d='M18 22V5.618a1 1 0 0 0-.553-.894l-4.553-2.277a2 2 0 0 0-1.788 0L6.553 4.724A1 1 0 0 0 6 5.618V22'/><path d='M18 8h2a2 2 0 0 1 2 2v12'/><path d='M6 8H4a2 2 0 0 0-2 2v12'/><path d='M2 22h20'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

/* --- Counter card edit button: replace ✏️ Edit with pencil SVG + 'Edit' via ::after --- */
.hcp-site-counter-edit {
  font-size: 0 !important;
  display: inline-block;
  padding-left: 22px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/><path d='m15 5 4 4'/></svg>");
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 16px;
  letter-spacing: 0;
}
.hcp-site-counter-edit::after {
  content: 'Edit';
  font-family: var(--hcp-font-sans);
  font-size: 13px;
  font-weight: 600;
  color: var(--hcp-gold);
}

/* ============================================================
   STEP 5 — Review & Pay: rows-in-card + line SVG icons
   ============================================================ */

/* --- Outer container becomes the single unified card --- */
.hcp-review-list {
  border: 1px solid var(--hcp-border);
  border-radius: 16px;
  background: var(--hcp-white);
  overflow: hidden;
  display: block;
  gap: 0;
  margin-bottom: 16px;
  box-shadow: var(--hcp-shadow);
}

/* --- Each item becomes a borderless row inside the card --- */
.hcp-review-card {
  background: transparent !important;
  border: none !important;
  border-radius: 0;
  box-shadow: none;
  padding: 16px 20px;
  border-bottom: 1px solid var(--hcp-border) !important;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  cursor: default;
  position: relative;
  transition: background 0.15s;
}
.hcp-review-card:last-child {
  border-bottom: none !important;
}
.hcp-review-card:hover {
  background: rgba(245, 230, 204, 0.18) !important;
}

/* --- Icon: hide emoji, inject SVG by position
   Order in loadReview(): 1=Prayer, 2=Details, 3=Journey, 4=Sites --- */
.hcp-review-icon-wrap {
  font-size: 0 !important;
  color: transparent !important;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background-color: var(--hcp-gold-light);
  background-repeat: no-repeat;
  background-position: center;
  background-size: 18px;
  flex-shrink: 0;
  margin-top: 2px;
}
.hcp-review-card:nth-child(1) .hcp-review-icon-wrap {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3v18'/><path d='M8 7c-2 0-3 2-3 4v3c0 2 1 4 3 5l4 2'/><path d='M16 7c2 0 3 2 3 4v3c0 2-1 4-3 5l-4 2'/></svg>");
}
.hcp-review-card:nth-child(2) .hcp-review-icon-wrap {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2'/><circle cx='12' cy='7' r='4'/></svg>");
}
.hcp-review-card:nth-child(3) .hcp-review-icon-wrap {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M10 9h4'/><path d='M12 7v5'/><path d='M14 22v-4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v4'/><path d='M18 22V5.618a1 1 0 0 0-.553-.894l-4.553-2.277a2 2 0 0 0-1.788 0L6.553 4.724A1 1 0 0 0 6 5.618V22'/><path d='M18 8h2a2 2 0 0 1 2 2v12'/><path d='M6 8H4a2 2 0 0 0-2 2v12'/><path d='M2 22h20'/></svg>");
}
.hcp-review-card:nth-child(4) .hcp-review-icon-wrap {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>");
}

/* --- Content area --- */
.hcp-review-content {
  flex: 1;
  min-width: 0;
}
.hcp-review-card-title {
  font-family: var(--hcp-font-sans);
  font-size: 13px;
  font-weight: 700;
  color: var(--hcp-navy);
  margin: 0 0 4px;
  letter-spacing: 0.05em;
}
.hcp-review-card-detail {
  font-family: var(--hcp-font-sans);
  font-size: 14px;
  color: var(--hcp-navy);
  line-height: 1.45;
  margin: 0;
  font-weight: 500;
}

/* --- Review rows are static by default: no arrow on non-interactive rows.
   The only clickable row (Your Prayer) gets its own expand chevron, defined
   in the POLISH PASS block below. --- */

/* --- Addons card polish to match review card aesthetic --- */
.hcp-addons-card {
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: 16px;
  box-shadow: var(--hcp-shadow);
}
.hcp-addons-title {
  font-family: var(--hcp-font-sans);
  font-weight: 700;
  color: var(--hcp-navy);
  font-size: 13px;
  letter-spacing: 0.05em;
}

/* --- Total bar polish: serif amount, matching card chrome --- */
.hcp-total-bar {
  background: var(--hcp-white);
  border: 1px solid var(--hcp-border);
  border-radius: 16px;
  box-shadow: var(--hcp-shadow);
  padding: 20px 22px;
}
.hcp-total-label {
  font-family: var(--hcp-font-sans);
  font-size: 16px;
  font-weight: 600;
}
.hcp-total-amount {
  font-family: var(--hcp-font-serif);
  font-size: 30px;
  font-weight: 700;
}
.hcp-total-currency {
  font-family: var(--hcp-font-sans);
}

/* --- Secure checkout line --- */
.hcp-secure-line {
  font-family: var(--hcp-font-sans);
  font-size: 12px;
}

/* ============================================================
   POLISH PASS — brand color enforcement, icon layout fix,
   Step 4 visual consistency, responsive mobile tightening.
   Wins against WooCommerce/theme button rules via .hcp-flow-wrap
   prefix (specificity bump) and !important on critical properties.
   ============================================================ */

/* === PRIMARY CTA — locked to brand gold === */
.hcp-flow-wrap .hcp-btn-primary,
.hcp-flow-wrap button.hcp-btn-primary {
  background: var(--hcp-gold) !important;
  background-color: var(--hcp-gold) !important;
  color: #ffffff !important;
  border: none !important;
  box-shadow: none !important;
  text-shadow: none !important;
  text-transform: none !important;
  text-decoration: none !important;
  font-family: var(--hcp-font-serif) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  letter-spacing: 0.4px !important;
  height: 58px !important;
  padding: 0 18px !important;
  border-radius: var(--hcp-radius-btn) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 100% !important;
  cursor: pointer !important;
  margin-top: 24px;
  line-height: 1 !important;
}
.hcp-flow-wrap .hcp-btn-primary:hover,
.hcp-flow-wrap .hcp-btn-primary:focus {
  background: var(--hcp-gold-hover) !important;
  background-color: var(--hcp-gold-hover) !important;
  color: #ffffff !important;
  transform: translateY(-1px);
}
.hcp-flow-wrap .hcp-btn-primary:disabled {
  background: var(--hcp-gold) !important;
  opacity: 0.6 !important;
  cursor: not-allowed !important;
  transform: none !important;
}

/* Icon spans inside the CTA — pin dimensions, prevent flex shrink */
.hcp-flow-wrap .hcp-btn-primary .hcp-btn-icon,
.hcp-flow-wrap .hcp-btn-primary .hcp-btn-arrow {
  display: inline-block !important;
  flex: 0 0 auto !important;
  vertical-align: middle;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
}
.hcp-flow-wrap .hcp-btn-primary .hcp-btn-icon {
  width: 22px !important;
  height: 22px !important;
  font-size: 0 !important;
  background-size: 22px !important;
  /* Clean Lucide "heart" line icon — devotional, universal, renders reliably */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.29 1.51 4.04 3 5.5l7 7Z'/></svg>") !important;
  background-repeat: no-repeat;
  background-position: center;
}
.hcp-flow-wrap .hcp-btn-primary .hcp-btn-arrow {
  width: 18px !important;
  height: 18px !important;
  font-size: 0 !important;
  background-size: 18px !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='9 18 15 12 9 6'/></svg>") !important;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 1 !important;
}

/* === SECONDARY BUTTON — locked to white-on-muted with navy hover === */
.hcp-flow-wrap .hcp-btn-secondary,
.hcp-flow-wrap button.hcp-btn-secondary {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--hcp-muted) !important;
  border: 2px solid var(--hcp-border) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-family: var(--hcp-font-sans) !important;
  font-weight: 600 !important;
  text-transform: none !important;
  padding: 10px 22px !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  height: auto !important;
}
.hcp-flow-wrap .hcp-btn-secondary:hover {
  background: #ffffff !important;
  border-color: var(--hcp-navy) !important;
  color: var(--hcp-navy) !important;
}

/* === BACK LINK / BUTTON — locked to muted text with navy hover === */
.hcp-flow-wrap .hcp-back,
.hcp-flow-wrap .hcp-btn-back,
.hcp-flow-wrap button.hcp-back,
.hcp-flow-wrap button.hcp-btn-back {
  background: transparent !important;
  background-color: transparent !important;
  color: var(--hcp-muted) !important;
  border: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  font-family: var(--hcp-font-sans) !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-transform: none !important;
  text-decoration: none !important;
  padding: 0 !important;
  height: auto !important;
  width: auto !important;
  min-height: 0 !important;
  cursor: pointer !important;
}
.hcp-flow-wrap .hcp-back:hover,
.hcp-flow-wrap .hcp-btn-back:hover {
  background: transparent !important;
  color: var(--hcp-navy) !important;
  text-decoration: none !important;
}

/* === CHIP — locked to white-on-gold, no theme button styling === */
.hcp-flow-wrap .hcp-chip,
.hcp-flow-wrap button.hcp-chip {
  background: var(--hcp-white) !important;
  background-color: var(--hcp-white) !important;
  color: var(--hcp-navy) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-family: var(--hcp-font-sans) !important;
  height: auto !important;
  cursor: pointer !important;
}
.hcp-flow-wrap .hcp-chip:hover {
  background: var(--hcp-gold-light) !important;
  background-color: var(--hcp-gold-light) !important;
}
.hcp-flow-wrap .hcp-chip.is-selected {
  background: var(--hcp-gold-light) !important;
  background-color: var(--hcp-gold-light) !important;
}

/* === PLAN PILL + BILLING TOGGLE — locked to brand === */
.hcp-flow-wrap .hcp-plan-pill,
.hcp-flow-wrap button.hcp-plan-pill,
.hcp-flow-wrap .hcp-billing-btn,
.hcp-flow-wrap button.hcp-billing-btn {
  background: #ffffff !important;
  background-color: #ffffff !important;
  color: var(--hcp-navy) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  text-transform: none !important;
  font-family: var(--hcp-font-sans) !important;
  cursor: pointer !important;
  height: auto !important;
}
.hcp-flow-wrap .hcp-billing-btn.is-active {
  background: var(--hcp-gold) !important;
  background-color: var(--hcp-gold) !important;
  border-color: var(--hcp-gold) !important;
  color: #ffffff !important;
}
.hcp-flow-wrap .hcp-plan-pill.is-selected,
.hcp-flow-wrap .hcp-plan-pill:hover {
  background: var(--hcp-gold-light) !important;
  background-color: var(--hcp-gold-light) !important;
  border-color: var(--hcp-gold) !important;
}

/* === STEP 4 — site card consistency with other screens === */
.hcp-flow-wrap .hcp-site-card {
  padding: 14px;
  gap: 14px;
  overflow: hidden;
  min-height: 0;
  align-items: center;
}
.hcp-flow-wrap .hcp-site-thumb {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
  overflow: hidden;
  background-color: var(--hcp-gold-light);
  display: block;
}
.hcp-flow-wrap .hcp-site-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 0;
}
.hcp-flow-wrap .hcp-site-info {
  flex: 1;
  padding: 0;
  min-width: 0;
}
.hcp-flow-wrap .hcp-site-check {
  margin: 0 4px 0 0;
}

/* Fallback for sites without an image (no .hcp-site-thumb element): show
   a gold tile with a map-pin so the visual rhythm matches other cards. */
.hcp-flow-wrap .hcp-site-card:not(:has(.hcp-site-thumb))::before {
  content: '';
  width: 64px;
  height: 64px;
  border-radius: 12px;
  flex-shrink: 0;
  background-color: var(--hcp-gold-light);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'><path d='M20 10c0 7-8 13-8 13s-8-6-8-13a8 8 0 0 1 16 0Z'/><circle cx='12' cy='10' r='3'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 28px;
}

/* === RESPONSIVE — tighter spacing on mobile to reduce scroll === */
@media (max-width: 600px) {
  .hcp-flow-wrap {
    padding: 0 14px 28px;
  }
  .hcp-step-title {
    font-size: 24px;
  }
  .hcp-step-header {
    margin-bottom: 20px;
  }
  .hcp-progress {
    padding: 16px 0 22px;
  }
  .hcp-choice-card {
    padding: 18px 18px 18px 76px;
  }
  .hcp-choice-card::before {
    width: 44px;
    height: 44px;
    left: 16px;
    background-size: 22px;
  }
  .hcp-sub-card {
    padding: 14px 16px 14px 60px;
  }
  .hcp-sub-card::before {
    width: 32px;
    height: 32px;
    left: 14px;
    top: 18px;
    background-size: 18px;
  }
  .hcp-trust-badges {
    flex-direction: column;
    gap: 6px;
  }
  .hcp-trust-badge {
    flex-direction: row;
    justify-content: flex-start;
    text-align: left;
    padding: 10px 14px;
    gap: 10px;
  }
  .hcp-trust-badge-icon {
    margin-bottom: 0;
  }
  .hcp-trust-badge-desc {
    line-height: 1.3;
  }
  .hcp-fields-card,
  .hcp-options-card,
  .hcp-addons-card {
    padding: 14px 16px;
  }
  .hcp-privacy-badge {
    padding: 12px 14px;
  }
  .hcp-flow-wrap .hcp-btn-primary {
    height: 54px !important;
    font-size: 16px !important;
    margin-top: 18px;
  }
  .hcp-flow-wrap .hcp-site-card {
    padding: 12px;
  }
  .hcp-flow-wrap .hcp-site-thumb {
    width: 56px;
    height: 56px;
  }
  .hcp-plan-pills {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 6px;
  }
  .hcp-plan-pill {
    padding: 10px 6px;
  }
  .hcp-pill-name {
    font-size: 0.85rem;
  }
  .hcp-pill-price {
    font-size: 0.78rem;
  }
  .hcp-review-card {
    padding: 14px 16px;
  }
  .hcp-total-bar {
    padding: 16px 18px;
  }
  .hcp-total-amount {
    font-size: 26px;
  }
  .hcp-free-actions {
    flex-direction: column-reverse;
    gap: 10px;
  }
  .hcp-free-actions .hcp-btn-secondary,
  .hcp-free-actions .hcp-btn-back {
    width: 100%;
    text-align: center;
  }
}

@media (max-width: 400px) {
  .hcp-plan-pills {
    grid-template-columns: 1fr;
  }
  .hcp-chips {
    gap: 6px;
  }
  .hcp-chip {
    padding: 7px 14px 7px 32px;
    background-position: 10px center;
  }
}

/* ============================================================
   FINAL PASS v3 — progress bar, brand-locked focus states,
   redesigned Prayer Journey plan cards, expandable prayer row.
   Appended last so it wins on equal specificity.
   ============================================================ */

/* ------------------------------------------------------------
   1) PROGRESS BAR — gold = current, light = every other step.
   No navy. One continuous track that sits BEHIND the circles,
   so the connector never crosses over the numbered nodes.
   ------------------------------------------------------------ */
.hcp-flow-wrap .hcp-progress {
  position: relative;
  align-items: flex-start;
}

/* Kill the old per-step connector (it inherited paint order from the
   step's stacking context and painted on top of the previous circle). */
.hcp-flow-wrap .hcp-progress-step + .hcp-progress-step::before {
  content: none !important;
  display: none !important;
}

/* Single track from the first circle's centre (10%) to the last (90%).
   With 5 equal-width steps each centre sits at 10/30/50/70/90%. */
.hcp-flow-wrap .hcp-progress::before {
  content: '';
  position: absolute;
  top: 42px;            /* progress padding-top 24 + circle radius 18 */
  left: 10%;
  right: 10%;
  height: 3px;
  background: var(--hcp-gold-light);
  border-radius: 999px;
  z-index: 0;
}

/* Remove the per-step stacking context so every number (z-index:1)
   paints above the track (z-index:0); the opaque circles cover the
   track behind them, leaving clean connectors between nodes. */
.hcp-flow-wrap .hcp-progress-step {
  z-index: auto;
}
.hcp-flow-wrap .hcp-progress-num {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border: none !important;
  background: var(--hcp-gold-light);
  color: var(--hcp-gold-hover);
  box-shadow: 0 0 0 4px var(--hcp-cream);   /* clean gap where node meets track */
  font-weight: 700;
}
.hcp-flow-wrap .hcp-progress-step.done .hcp-progress-num {
  background: var(--hcp-gold-light);
  color: var(--hcp-gold-hover);
}
.hcp-flow-wrap .hcp-progress-step.active .hcp-progress-num {
  background: var(--hcp-gold);
  color: #ffffff;
  box-shadow: 0 0 0 4px var(--hcp-cream), 0 2px 8px rgba(212, 136, 31, 0.35);
}

/* Labels: only the current step is emphasised; others stay quiet. */
.hcp-flow-wrap .hcp-progress-label {
  color: var(--hcp-muted);
  font-weight: 500;
}
.hcp-flow-wrap .hcp-progress-step.done .hcp-progress-label {
  color: var(--hcp-muted);
  font-weight: 500;
}
.hcp-flow-wrap .hcp-progress-step.active .hcp-progress-label {
  color: var(--hcp-gold);
  font-weight: 700;
}

@media (max-width: 600px) {
  .hcp-flow-wrap .hcp-progress::before { top: 34px; }   /* padding-top 16 + 18 */
}
@media (max-width: 480px) {
  .hcp-flow-wrap .hcp-progress::before { top: 31px; }   /* padding-top 16 + 15 */
  .hcp-flow-wrap .hcp-progress-num {
    width: 30px;
    height: 30px;
    box-shadow: 0 0 0 3px var(--hcp-cream);
  }
  .hcp-flow-wrap .hcp-progress-step.active .hcp-progress-num {
    box-shadow: 0 0 0 3px var(--hcp-cream), 0 2px 8px rgba(212, 136, 31, 0.35);
  }
}

/* ------------------------------------------------------------
   2) BRAND-LOCK every interactive control — no residual
   WooCommerce/theme purple borders or focus rings. Keyboard
   users still get a clear, on-brand gold focus ring.
   ------------------------------------------------------------ */
.hcp-flow-wrap button:focus {
  outline: none !important;
}
.hcp-flow-wrap button:focus-visible {
  outline: 2px solid var(--hcp-gold) !important;
  outline-offset: 2px;
}
.hcp-flow-wrap button::-moz-focus-inner {
  border: 0 !important;
  padding: 0 !important;
}

/* Re-assert brand borders on focus/active for controls the theme
   might otherwise tint with its accent colour. */
.hcp-flow-wrap .hcp-btn-secondary:focus,
.hcp-flow-wrap .hcp-btn-secondary:active,
.hcp-flow-wrap .hcp-billing-btn:focus,
.hcp-flow-wrap .hcp-billing-btn:active,
.hcp-flow-wrap .hcp-plan-card:focus,
.hcp-flow-wrap .hcp-plan-card:active {
  border-color: var(--hcp-border) !important;
}
.hcp-flow-wrap .hcp-chip:focus,
.hcp-flow-wrap .hcp-chip:active {
  border-color: var(--hcp-gold) !important;
}
.hcp-flow-wrap .hcp-billing-btn.is-active:focus,
.hcp-flow-wrap .hcp-billing-btn.is-active:active,
.hcp-flow-wrap .hcp-plan-card.is-selected:focus,
.hcp-flow-wrap .hcp-plan-card.is-selected:active,
.hcp-flow-wrap .hcp-plan-card.is-selected {
  border-color: var(--hcp-gold) !important;
}

/* ------------------------------------------------------------
   3) PRAYER JOURNEY — full-width comparative plan cards.
   Replaces the cramped 3-up pills so each plan's value is clear.
   ------------------------------------------------------------ */
.hcp-plans-section {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--hcp-border);
  animation: hcp-fade-in 0.2s ease;
}
.hcp-plans-heading {
  font-family: var(--hcp-font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--hcp-navy);
  margin: 0 0 4px;
}
.hcp-plans-subheading {
  font-size: 0.82rem;
  color: var(--hcp-muted);
  line-height: 1.45;
  margin: 0 0 14px;
}

/* Billing toggle keeps its existing styling; just add breathing room. */
.hcp-plans-section .hcp-billing-toggle {
  margin-bottom: 14px;
}

.hcp-plan-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hcp-flow-wrap .hcp-plan-card {
  position: relative;
  display: block;
  width: 100%;
  text-align: left;
  background: var(--hcp-white) !important;
  background-color: var(--hcp-white) !important;
  border: 2px solid var(--hcp-border) !important;
  border-radius: 16px;
  padding: 18px 46px 18px 20px;   /* right room for the check */
  cursor: pointer;
  box-shadow: var(--hcp-shadow);
  transition: border-color 0.2s, box-shadow 0.2s, background 0.2s, transform 0.15s;
  font-family: var(--hcp-font-sans);
}
.hcp-flow-wrap .hcp-plan-card:hover {
  border-color: var(--hcp-gold) !important;
  transform: translateY(-1px);
}
.hcp-flow-wrap .hcp-plan-card.is-selected {
  border-color: var(--hcp-gold) !important;
  background: var(--hcp-gold-light) !important;
  background-color: var(--hcp-gold-light) !important;
  box-shadow: var(--hcp-shadow-selected);
}
.hcp-flow-wrap .hcp-plan-card.is-featured {
  border-color: var(--hcp-gold) !important;
}

.hcp-plan-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 2px;
}
.hcp-plan-name {
  font-family: var(--hcp-font-serif);
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--hcp-navy);
  letter-spacing: -0.2px;
}
.hcp-plan-price {
  font-family: var(--hcp-font-sans);
  font-size: 1rem;
  font-weight: 700;
  color: var(--hcp-gold);
  white-space: nowrap;
  flex-shrink: 0;
}
.hcp-plan-price del {
  color: var(--hcp-muted);
  font-weight: 400;
  font-size: 0.85em;
  margin-right: 4px;
}
.hcp-plan-tagline {
  font-size: 0.85rem;
  color: var(--hcp-muted);
  line-height: 1.45;
  margin: 4px 0 12px;
}
.hcp-plan-features {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.hcp-plan-features li {
  position: relative;
  padding-left: 26px;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--hcp-navy);
}
.hcp-plan-features li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M20 6 9 17l-5-5'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 15px;
}

/* "Most Popular" ribbon */
.hcp-plan-badge {
  position: absolute;
  top: -11px;
  left: 18px;
  background: var(--hcp-gold);
  color: #ffffff;
  font-family: var(--hcp-font-sans);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  padding: 3px 11px;
  border-radius: 20px;
  box-shadow: 0 2px 6px rgba(212, 136, 31, 0.3);
}

/* Selection check */
.hcp-plan-check {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid var(--hcp-border);
  background: var(--hcp-white);
  display: flex;
  align-items: center;
  justify-content: center;
  color: transparent;
  transition: all 0.2s;
}
.hcp-flow-wrap .hcp-plan-card.is-selected .hcp-plan-check {
  background: var(--hcp-gold);
  border-color: var(--hcp-gold);
  color: #ffffff;
}

@media (max-width: 480px) {
  .hcp-flow-wrap .hcp-plan-card {
    padding: 16px 42px 16px 18px;
  }
  .hcp-plan-name { font-size: 1.08rem; }
  .hcp-plan-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }
}

/* ------------------------------------------------------------
   4) REVIEW — click-to-expand "Your Prayer" row.
   Only this row is interactive and carries a chevron.
   ------------------------------------------------------------ */
.hcp-review-card--prayer {
  cursor: pointer !important;
}
.hcp-review-prayer-text {
  max-height: 3em;            /* ~2 lines collapsed */
  overflow: hidden;
  white-space: pre-wrap;      /* preserve the writer's line breaks */
  transition: max-height 0.3s ease;
}
/* Fade hint while collapsed (review card background is white). */
.hcp-review-card--prayer:not(.is-expanded) .hcp-review-prayer-text {
  -webkit-mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
          mask-image: linear-gradient(to bottom, #000 60%, transparent 100%);
}

/* Expand chevron — only present on the interactive prayer row. */
.hcp-review-expand {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  align-self: center;
  margin-left: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D4881F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform 0.3s ease;
  opacity: 0.8;
}
.hcp-review-card--prayer.is-expanded .hcp-review-expand {
  transform: rotate(180deg);
}
/* If a row lost its interactive class (short prayer), hide any chevron. */
.hcp-review-card:not(.hcp-review-card--prayer) .hcp-review-expand {
  display: none;
}

/* ============================================================
   FINAL PASS v3.1 — live hotfixes
   (a) Kill the residual theme "pink" focus ring (it's a box-shadow,
       not an outline) and out-rank theme button borders.
   (b) Keep plan-card text inside the card on every screen width.
   ============================================================ */

/* (a) — The theme paints its focus state as a box-shadow glow. Remove it
   on focus/active for every control, then re-apply the shadows we DO want. */
.hcp-flow-wrap button:focus,
.hcp-flow-wrap button:focus-visible,
.hcp-flow-wrap button:active {
  box-shadow: none !important;
}
.hcp-flow-wrap button.hcp-plan-card.is-selected,
.hcp-flow-wrap button.hcp-plan-card.is-selected:focus,
.hcp-flow-wrap button.hcp-plan-card.is-selected:active {
  box-shadow: var(--hcp-shadow-selected) !important;
}
/* Keyboard users still get a clean, on-brand gold ring (never pink). */
.hcp-flow-wrap button:focus-visible {
  outline: 2px solid var(--hcp-gold) !important;
  outline-offset: 2px;
}

/* Element-qualified selectors so the brand border beats any theme
   `.woocommerce button { border: ... }` rule, in every state. */
.hcp-flow-wrap button.hcp-plan-card {
  border: 2px solid var(--hcp-border) !important;
}
.hcp-flow-wrap button.hcp-plan-card:hover,
.hcp-flow-wrap button.hcp-plan-card:focus,
.hcp-flow-wrap button.hcp-plan-card:active,
.hcp-flow-wrap button.hcp-plan-card.is-selected,
.hcp-flow-wrap button.hcp-plan-card.is-featured {
  border-color: var(--hcp-gold) !important;
}
.hcp-flow-wrap button.hcp-billing-btn {
  border: 2px solid var(--hcp-border) !important;
}
.hcp-flow-wrap button.hcp-billing-btn:hover,
.hcp-flow-wrap button.hcp-billing-btn.is-active {
  border-color: var(--hcp-gold) !important;
}
.hcp-flow-wrap button.hcp-btn-secondary {
  border: 2px solid var(--hcp-border) !important;
}
.hcp-flow-wrap button.hcp-btn-secondary:hover,
.hcp-flow-wrap button.hcp-btn-secondary:focus {
  border-color: var(--hcp-navy) !important;
}
.hcp-flow-wrap button.hcp-chip {
  border: 1.5px solid var(--hcp-gold) !important;
}
.hcp-flow-wrap button.hcp-btn-primary,
.hcp-flow-wrap button.hcp-btn-primary:hover,
.hcp-flow-wrap button.hcp-btn-primary:focus,
.hcp-flow-wrap button.hcp-btn-primary:active {
  border: none !important;
}
.hcp-flow-wrap button.hcp-back,
.hcp-flow-wrap button.hcp-btn-back {
  border: none !important;
}

/* (b) — Plan-card text must never cross the card border.
   Let the price drop below the name when space is tight, and force
   long words / prices to break instead of overflowing. */
.hcp-flow-wrap .hcp-plan-card {
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hcp-plan-card-head {
  flex-wrap: wrap;
  row-gap: 2px;
}
.hcp-plan-name {
  min-width: 0;
  overflow-wrap: anywhere;
}
.hcp-plan-price {
  min-width: 0;
  white-space: normal;       /* allow a very long price to wrap as a last resort */
}
.hcp-plan-tagline,
.hcp-plan-features li {
  overflow-wrap: anywhere;
}

/* Same safeguard for the One-Time / Prayer Journey choice cards. */
.hcp-sub-card-title,
.hcp-sub-card-desc,
.hcp-choice-title,
.hcp-choice-desc {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* ============================================================
   FINAL PASS v3.2 — plan-card text wrapping (root cause)
   The plan cards are <button> elements. Many WooCommerce themes set
   `button { white-space: nowrap }`, which the name / tagline / feature
   text INHERITS — so it never wraps and runs past the card border.
   Force normal wrapping on the card and every text node inside it,
   on all screen sizes.
   ============================================================ */
.hcp-flow-wrap button.hcp-plan-card,
.hcp-flow-wrap .hcp-plan-card,
.hcp-flow-wrap .hcp-plan-card * {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* The price can still contain a theme-styled WooCommerce amount span
   with its own nowrap — neutralise that too. */
.hcp-flow-wrap .hcp-plan-price,
.hcp-flow-wrap .hcp-plan-price * {
  white-space: normal !important;
}

/* Belt-and-braces: nothing inside a plan card may exceed its width. */
.hcp-plan-card-head > *,
.hcp-plan-name,
.hcp-plan-price,
.hcp-plan-tagline,
.hcp-plan-features,
.hcp-plan-features li {
  min-width: 0;
  max-width: 100%;
}

/* ============================================================
   FINAL PASS v3.3 — responsive text/overflow hardening (all elements)
   ============================================================ */

/* --- PRIMARY CTA: fixed height was clipping long labels (e.g. "Choose
   Documented Prayer Journey"). Switch to a flexible height that grows with
   wrapped text, on every screen size. button.<class> matches the existing
   element-qualified rule's specificity and wins by source order. --- */
.hcp-flow-wrap button.hcp-btn-primary,
.hcp-flow-wrap .hcp-btn-primary {
  height: auto !important;
  min-height: 58px !important;
  padding: 14px 20px !important;
  white-space: normal !important;
  line-height: 1.25 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hcp-flow-wrap button.hcp-btn-primary .hcp-btn-icon,
.hcp-flow-wrap button.hcp-btn-primary .hcp-btn-arrow {
  flex: 0 0 auto !important;   /* icon/arrow never shrink; only the label wraps */
}

/* --- SECONDARY + BACK buttons: allow wrapping, grow with content --- */
.hcp-flow-wrap button.hcp-btn-secondary {
  height: auto !important;
  min-height: 44px;
  white-space: normal !important;
  line-height: 1.3 !important;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.hcp-flow-wrap .hcp-back,
.hcp-flow-wrap .hcp-btn-back {
  white-space: normal !important;
  overflow-wrap: anywhere;
}

/* --- PROGRESS LABELS: were nowrap and could overflow the viewport on small
   phones. Let them wrap to two lines, centred under each circle. --- */
.hcp-flow-wrap .hcp-progress-label {
  white-space: normal;
  line-height: 1.2;
  overflow-wrap: anywhere;
  word-break: normal;
  padding: 0 2px;
}

/* --- GENERIC TEXT-WRAP SAFETY: every text node that can receive long or
   unbreakable input (emails, plan names, site names, add-on titles) must
   break inside its container rather than spill past a border. --- */
.hcp-flow-wrap .hcp-step-title,
.hcp-flow-wrap .hcp-step-subtitle,
.hcp-flow-wrap .hcp-choice-title,
.hcp-flow-wrap .hcp-choice-desc,
.hcp-flow-wrap .hcp-sub-card-title,
.hcp-flow-wrap .hcp-sub-card-desc,
.hcp-flow-wrap .hcp-site-name,
.hcp-flow-wrap .hcp-site-desc,
.hcp-flow-wrap .hcp-review-card-title,
.hcp-flow-wrap .hcp-review-card-detail,
.hcp-flow-wrap .hcp-addon-name,
.hcp-flow-wrap .hcp-addon-label,
.hcp-flow-wrap .hcp-options-label,
.hcp-flow-wrap .hcp-field-label,
.hcp-flow-wrap .hcp-radio-option,
.hcp-flow-wrap .hcp-checkbox-option,
.hcp-flow-wrap .hcp-upgrade-title,
.hcp-flow-wrap .hcp-upgrade-body,
.hcp-flow-wrap .hcp-trust-badge-title,
.hcp-flow-wrap .hcp-trust-badge-desc,
.hcp-flow-wrap .hcp-privacy-badge-text strong,
.hcp-flow-wrap .hcp-privacy-badge-text span,
.hcp-flow-wrap .hcp-site-counter-text strong,
.hcp-flow-wrap .hcp-site-counter-text span {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}

/* Flex children that hold text need min-width:0 so they can actually shrink
   (otherwise their content's intrinsic width forces overflow). */
.hcp-flow-wrap .hcp-review-content,
.hcp-flow-wrap .hcp-site-info,
.hcp-flow-wrap .hcp-addon-label,
.hcp-flow-wrap .hcp-privacy-badge-text,
.hcp-flow-wrap .hcp-site-counter-text,
.hcp-flow-wrap .hcp-site-counter-left,
.hcp-flow-wrap .hcp-total-bar > span {
  min-width: 0;
}

/* Inputs must not push their card wider than the viewport. */
.hcp-flow-wrap .hcp-field-input,
.hcp-flow-wrap .hcp-prayer-textarea {
  max-width: 100%;
  box-sizing: border-box;
}

/* Final safety net: the flow itself never produces a horizontal scrollbar. */
.hcp-flow-wrap {
  overflow-x: clip;
}

/* ============================================================
   FINAL PASS v4 — ADAPTIVE LAYOUT (mobile → tablet → desktop)
   Mobile keeps the focused single column. From 768px up the flow
   widens and option groups become side-by-side comparison grids;
   the review step becomes a two-column checkout with a sticky
   order panel. The wrappers .hcp-review-grid / -main / -aside are
   inert blocks on mobile (no layout change there).
   ============================================================ */

/* The review wrappers must not alter the mobile stack. */
.hcp-review-grid { display: block; }

@media (min-width: 768px) {

  /* --- Wider, more generous canvas --- */
  .hcp-flow-wrap {
    max-width: 760px;
    padding: 8px 28px 64px;
  }
  .hcp-flow-wrap .hcp-step-title { font-size: 34px; }
  .hcp-flow-wrap .hcp-step-header { margin-bottom: 32px; }
  .hcp-flow-wrap .hcp-progress { padding: 28px 0 36px; }

  /* --- STEP 2 — Name & Email side by side --- */
  .hcp-flow-wrap .hcp-fields-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 20px;
    align-items: start;
  }
  .hcp-flow-wrap .hcp-fields-card .hcp-field-group { margin-bottom: 0; }

  /* --- STEP 3 — Documented vs Free side by side (equal height) --- */
  .hcp-flow-wrap .hcp-choice-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
  }

  /* --- STEP 3 — Plans as a 3-up comparison grid (auto-fits down) --- */
  .hcp-flow-wrap .hcp-plan-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    align-items: stretch;
  }

  /* --- STEP 4 — Holy sites in a responsive 2-up grid --- */
  .hcp-flow-wrap .hcp-site-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
  }

  /* --- STEP 5 — Two-column checkout: details + sticky order panel --- */
  .hcp-flow-wrap .hcp-review-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 28px;
    align-items: start;
  }
  .hcp-flow-wrap .hcp-review-main { min-width: 0; }
  .hcp-flow-wrap .hcp-review-aside {
    position: sticky;
    top: 24px;
    display: flex;
    flex-direction: column;
  }
  /* In the order panel the CTA sits directly under the total — trim the
     large default top gap so the panel reads as one unit. */
  .hcp-flow-wrap .hcp-review-aside .hcp-btn-primary { margin-top: 14px; }
  .hcp-flow-wrap .hcp-review-aside .hcp-total-bar { margin-bottom: 12px; }
}

@media (min-width: 1024px) {
  .hcp-flow-wrap { max-width: 840px; }
  .hcp-flow-wrap .hcp-review-grid { grid-template-columns: 1fr 340px; }
}

/* ============================================================
   FINAL PASS v5 — RESPONSIVE POLISH
   Appended last so it overrides earlier equal-specificity rules.
   Targeted small-screen fixes; does not change the desktop layout.
   ============================================================ */

/* Box-sizing safety for every element inside the flow. */
.hcp-flow-wrap,
.hcp-flow-wrap *,
.hcp-flow-wrap *::before,
.hcp-flow-wrap *::after { box-sizing: border-box; }

/* Media never overflows its container. */
.hcp-flow-wrap img { max-width: 100%; height: auto; }

/* Progress labels: never force a single nowrap line — prevents overflow on
   narrow screens and lets "Review & Pay" wrap cleanly under its step. */
.hcp-flow-wrap .hcp-progress-label {
  white-space: normal;
  overflow-wrap: break-word;
  hyphens: none;
  line-height: 1.2;
}

@media (max-width: 600px) {

  /* Trust badges (Step 3): lay each out as [icon | title over description] so
     short titles like "Documented" never break mid-word and the text column
     can shrink without forcing horizontal overflow. */
  .hcp-flow-wrap .hcp-trust-badge {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 12px;
    row-gap: 1px;
    align-items: center;
    text-align: left;
    padding: 12px 14px;
  }
  .hcp-flow-wrap .hcp-trust-badge-icon  { grid-column: 1; grid-row: 1 / 3; align-self: center; margin: 0; }
  .hcp-flow-wrap .hcp-trust-badge-title { grid-column: 2; grid-row: 1; align-self: end; word-break: normal; overflow-wrap: normal; }
  .hcp-flow-wrap .hcp-trust-badge-desc  { grid-column: 2; grid-row: 2; align-self: start; }

  /* Full-width, comfortable tap targets on phones. */
  .hcp-flow-wrap .hcp-btn-primary,
  .hcp-flow-wrap .hcp-btn-secondary { width: 100%; }

  /* Any multi-column option grids collapse to a single column on phones. */
  .hcp-flow-wrap .hcp-choice-cards,
  .hcp-flow-wrap .hcp-sub-cards,
  .hcp-flow-wrap .hcp-plan-cards { grid-template-columns: 1fr; }
  .hcp-flow-wrap .hcp-billing-toggle { flex-wrap: wrap; }

  /* Long single words (names, emails, prayer text) wrap instead of overflowing. */
  .hcp-flow-wrap .hcp-review-card-detail,
  .hcp-flow-wrap .hcp-review-prayer-text,
  .hcp-flow-wrap .hcp-site-name,
  .hcp-flow-wrap .hcp-site-desc { overflow-wrap: anywhere; }
}


/* ============================================================
   FINAL PASS v6 — BRAND ALIGNMENT (site-wide tokens)
   Titles: Lora italic #333333 · Buttons: Montserrat #FFFFFF on #E6B040
   Body: site default font · Accent gold unified to #E6B040
   ============================================================ */
:root{
  --hcp-gold:#E6B040;
  --hcp-gold-hover:#D29A2C;
  --hcp-gold-light:#FBEED2;
  --hcp-gold-soft:#FFF7E6;
  --hcp-navy:#333333;
  --hcp-selected-border:#E6B040;
  --hcp-shadow-selected:0 4px 20px rgba(230,176,64,.20);
}

/* Body uses the site's default font */
.hcp-flow-wrap{ font-family: inherit; }

/* Titles — Lora italic #333 */
.hcp-flow-wrap .hcp-step-title,
.hcp-flow-wrap .hcp-plans-heading,
.hcp-flow-wrap .hcp-upgrade-title{
  font-family:'Lora', Georgia, 'Times New Roman', serif !important;
  font-style: italic !important;
  color:#333333 !important;
}

/* Buttons — Montserrat, white text, brand gold background */
.hcp-flow-wrap .hcp-btn-primary{
  font-family:'Montserrat', sans-serif !important;
  color:#FFFFFF !important;
  background:#E6B040 !important;
}
.hcp-flow-wrap .hcp-btn-primary:hover{ background:#D29A2C !important; }
.hcp-flow-wrap .hcp-btn-secondary{ font-family:'Montserrat', sans-serif !important; }

/* ============================================================
   FOCUS MODE — full-screen in-place overlay
   Opens when the user starts writing; X / Esc / back closes it and
   returns them to the same spot on the page. Mobile: full-bleed.
   Desktop: dimmed backdrop with the form centered as a card.
   ============================================================ */
.hcp-flow-wrap .hcp-focus-close{ display:none; }
.hcp-flow-inner{ display:block; }

.hcp-flow-wrap.is-focus{
  position:fixed; inset:0; z-index:99999;
  max-width:none; margin:0; padding:0;
  background:#FAFAF8;
  overflow-y:auto; -webkit-overflow-scrolling:touch;
  height:100vh; height:100dvh;
  animation:hcpFocusIn .22s ease;
}
@keyframes hcpFocusIn{ from{ opacity:0 } to{ opacity:1 } }

.hcp-flow-wrap.is-focus .hcp-flow-inner{
  min-height:100%;
  max-width:600px; margin:0 auto;
  padding:56px 20px 48px;
  box-sizing:border-box;
}

.hcp-flow-wrap.is-focus .hcp-focus-close{
  display:flex; align-items:center; justify-content:center;
  position:fixed; top:12px; right:12px; z-index:100000;
  width:40px; height:40px; border-radius:50%;
  background:#fff; color:#333; border:1px solid var(--hcp-border,#E5E7EB);
  font-size:26px; line-height:1; cursor:pointer; padding:0;
  box-shadow:0 2px 10px rgba(0,0,0,.12);
}
.hcp-flow-wrap.is-focus .hcp-focus-close:hover{ background:#f7f7f7; }

body.hcp-focus-lock{ overflow:hidden !important; }

@media (min-width:768px){
  .hcp-flow-wrap.is-focus{
    background:rgba(17,24,39,.55);
    -webkit-backdrop-filter:saturate(120%) blur(2px);
    backdrop-filter:saturate(120%) blur(2px);
    padding:32px 16px;
  }
  .hcp-flow-wrap.is-focus .hcp-flow-inner{
    background:#FAFAF8;
    border-radius:18px;
    box-shadow:0 24px 60px rgba(0,0,0,.28);
    min-height:auto;
    padding:44px 40px;
  }
  .hcp-flow-wrap.is-focus .hcp-focus-close{ top:18px; right:18px; }
}

/* ============================================================
   FINAL PASS v8 — FOCUS-MODE & CARD LAYOUT (all screen sizes)
   Cards become vertical (icon on top) so titles use the full width
   and never get squeezed; the overlay uses a calm, focused column.
   ============================================================ */

/* Comfortable reading column inside the overlay on tablet/desktop. */
@media (min-width: 768px) {
  .hcp-flow-wrap.is-focus .hcp-flow-inner {
    max-width: 660px;
    padding: 48px 44px 44px;
  }
}

/* --- Journey choice cards: vertical layout (icon top, full-width text) --- */
.hcp-flow-wrap .hcp-choice-card {
  padding: 20px 20px 22px;
  display: flex;
  flex-direction: column;
}
.hcp-flow-wrap .hcp-choice-card::before {
  position: static;
  transform: none;
  display: block;
  margin: 0 0 14px;
  width: 46px;
  height: 46px;
}
.hcp-flow-wrap .hcp-choice-top {
  display: block;
  padding-right: 34px;        /* clear the selection circle only */
}
.hcp-flow-wrap .hcp-choice-title { line-height: 1.25; }
.hcp-flow-wrap .hcp-choice-card .hcp-choice-check { top: 16px; right: 16px; }

/* --- Sub-cards (One-Time / Prayer Journey): same vertical treatment --- */
.hcp-flow-wrap .hcp-sub-card {
  padding: 18px 20px 20px;
}
.hcp-flow-wrap .hcp-sub-card::before {
  position: static;
  top: auto;
  left: auto;
  transform: none;
  display: block;
  margin: 0 0 12px;
}
.hcp-flow-wrap .hcp-sub-card .hcp-choice-check { top: 16px; right: 16px; }

/* Equal-height cards when shown two-up. */
@media (min-width: 601px) {
  .hcp-flow-wrap .hcp-choice-cards { align-items: stretch; }
  .hcp-flow-wrap .hcp-choice-card,
  .hcp-flow-wrap .hcp-sub-card { height: 100%; }
}

/* Below 600px the journey cards stack full-width. */
@media (max-width: 600px) {
  .hcp-flow-wrap .hcp-choice-cards { display: flex; flex-direction: column; }
}

/* ============================================================
   FINAL PASS v9 — REVIEW STEP inside the focus overlay
   The two-column review needs ~800px; the overlay is a focused
   ~660px column, so the viewport-based 2-col made the summary too
   narrow (text wrapped, columns unbalanced). Stack it to one column:
   full-width summary + add-ons, then totals and the CTA below.
   ============================================================ */
.hcp-flow-wrap.is-focus .hcp-review-grid {
  display: block;
}
.hcp-flow-wrap.is-focus .hcp-review-main { width: 100%; }
.hcp-flow-wrap.is-focus .hcp-review-aside {
  position: static;
  width: 100%;
  margin-top: 18px;
}
.hcp-flow-wrap.is-focus .hcp-review-aside .hcp-total-bar { margin-bottom: 12px; }
.hcp-flow-wrap.is-focus .hcp-review-aside .hcp-btn-primary { margin-top: 14px; }

/* Summary rows breathe at full width (icon + title/detail, no cramping). */
.hcp-flow-wrap .hcp-review-card { gap: 14px; }
.hcp-flow-wrap .hcp-review-card-detail { overflow-wrap: anywhere; }