/* === Pricing Page (Simplified) === */

.pricing-header { text-align: center; margin-bottom: 56px }
.pricing-intro {
  font-size: 16px; color: var(--text2); line-height: 1.7;
  max-width: 540px; margin: 0 auto; text-align: center;
}

/* Section titles */
.pricing-section-title {
  font-family: var(--serif); font-size: clamp(22px, 2.5vw, 30px);
  font-weight: 600; line-height: 1.2; margin-bottom: 10px;
}
.pricing-section-sub {
  font-size: 15px; color: var(--text2); line-height: 1.65;
  max-width: 620px; margin-bottom: 32px;
}

/* === Tier pricing cards === */
.tier-cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  max-width: 1020px; margin: 0 auto 28px;
}
.tier-card {
  position: relative;
  background: linear-gradient(160deg, rgba(35,28,18,.6), rgba(20,16,10,.6));
  border: 1px solid var(--line); border-radius: 14px;
  padding: 28px 22px; text-align: center;
  display: flex; flex-direction: column; align-items: center;
  transition: border-color .2s, transform .2s;
}
.tier-card:hover { border-color: rgba(201,168,76,.3); transform: translateY(-2px) }

/* Tier badges */
.tier-badge {
  display: inline-block; font-size: 11px; font-weight: 600;
  letter-spacing: .5px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 4px; margin-bottom: 10px;
}
.tier-badge--bronze { background: rgba(176,141,87,.1); border: 1px solid rgba(176,141,87,.3); color: #b08d57 }
.tier-badge--silver { background: rgba(192,192,192,.1); border: 1px solid rgba(192,192,192,.3); color: #c0c0c0 }
.tier-badge--gold { background: rgba(201,168,76,.1); border: 1px solid rgba(201,168,76,.3); color: var(--gold) }
.tier-badge--platinum { background: rgba(180,200,220,.1); border: 1px solid rgba(180,200,220,.3); color: #b4c8dc }

.tier-card-range { font-size: 13px; color: var(--text2); margin-bottom: 16px }

.tier-card-price {
  font-family: var(--serif); font-size: 36px; font-weight: 700;
  color: var(--gold); margin-bottom: 4px;
}
.tier-card-price span { font-size: 15px; font-weight: 400; color: var(--text2) }

.tier-card-desc {
  font-size: 13px; color: var(--text3); margin-bottom: 18px;
}

.tier-card-details {
  list-style: none; padding: 0; margin: 0;
  text-align: left; width: 100%;
}
.tier-card-details li {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text2); line-height: 1.5;
  padding: 5px 0;
}
.tier-card-details i { color: var(--good); flex-shrink: 0 }

@media (max-width: 900px) { .tier-cards { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .tier-cards { grid-template-columns: 1fr; max-width: 340px } }

/* === One-off setup fee section === */
.setup-fee-section {
  max-width: 1020px; margin: 0 auto 48px;
}
.setup-fee-vat {
  font-size: 15px; font-weight: 400; color: var(--text3);
}
.setup-fee-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
  margin-bottom: 20px;
}
.setup-fee-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 14px; border-radius: 10px;
  background: linear-gradient(160deg, rgba(35,28,18,.5), rgba(20,16,10,.5));
  border: 1px solid var(--line);
}
.setup-fee-item i { color: var(--gold); flex-shrink: 0; margin-top: 2px }
.setup-fee-item strong {
  display: block; font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 3px;
}
.setup-fee-item span { font-size: 13px; color: var(--text2); line-height: 1.5 }
.setup-fee-klarna {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--text2);
  background: rgba(201,168,76,.06); border: 1px solid rgba(201,168,76,.15);
  border-radius: 8px; padding: 12px 16px;
}
.setup-fee-klarna i { color: var(--gold); flex-shrink: 0 }

@media (max-width: 600px) { .setup-fee-grid { grid-template-columns: 1fr } }

/* Important information */
.tier-important-info {
  max-width: 1020px; margin: 0 auto 64px;
  padding: 20px 24px; border-radius: var(--r);
  background: rgba(201,168,76,.03); border: 1px solid rgba(201,168,76,.08);
}
.tier-important-title {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-size: 15px; font-weight: 600;
  color: var(--gold); margin-bottom: 12px;
}
.tier-important-list {
  list-style: none; padding: 0; margin: 0;
}
.tier-important-list li {
  position: relative; padding-left: 16px;
  font-size: 13px; color: var(--text2); line-height: 1.65;
}
.tier-important-list li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text3);
}
.tier-important-list a { color: var(--gold); text-decoration: underline }

/* === What's included === */
.pricing-included-section { margin-bottom: 64px }
.included-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
.inc-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 18px 16px; border-radius: 10px;
  background: linear-gradient(160deg, rgba(35,28,18,.5), rgba(20,16,10,.5));
  border: 1px solid var(--line);
  transition: border-color .2s;
}
.inc-item:hover { border-color: rgba(201,168,76,.25) }
.inc-item i { color: var(--gold); flex-shrink: 0; margin-top: 2px }
.inc-item strong {
  display: block; font-size: 14px; font-weight: 600; color: var(--text);
  margin-bottom: 4px;
}
.inc-item span { font-size: 13px; color: var(--text2); line-height: 1.55 }

@media (max-width: 700px) { .included-grid { grid-template-columns: 1fr } }

/* === Summary box === */
.pricing-summary-box {
  background: linear-gradient(160deg, rgba(35,28,18,.8), rgba(20,16,10,.8));
  border: 1px solid rgba(201,168,76,.3); border-radius: 14px;
  padding: 36px 32px;
}
.pricing-summary-box h3 {
  font-family: var(--serif); font-size: 22px; font-weight: 600;
  color: var(--gold); margin-bottom: 20px;
}
.psb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
.psb-item {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14px; color: var(--text); line-height: 1.55;
}
.psb-check {
  width: 24px; height: 24px; border-radius: 50%;
  background: rgba(90,170,122,.15); border: 1px solid rgba(90,170,122,.35);
  display: grid; place-items: center; flex-shrink: 0;
  color: var(--good);
}

@media (max-width: 600px) {
  .psb-grid { grid-template-columns: 1fr }
  .pricing-summary-box { padding: 24px 20px }
}