/* pricing.css - Pricing section "料金の考え方" (3-phase structure) */

.pricing {
  position: relative;
  padding: var(--sp-9) 0;
  background: var(--cal-bg-soft);
  overflow: hidden;
}

.pricing__inner {
  position: relative;
  z-index: 1;
  max-width: var(--container-wide);
  margin: 0 auto;
  padding: 0 var(--sp-5);
}

.pricing__header {
  text-align: center;
  margin-bottom: var(--sp-8);
}
.pricing__label { display: inline-block; margin-bottom: var(--sp-3); }
.pricing__heading { margin-bottom: var(--sp-4); }
.pricing__lead {
  color: var(--fg-2);
  max-width: 40em;
  margin: 0 auto;
}

/* --- 4-phase grid --------------------------------------------- */
.pricing__phases {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: var(--sp-3);
  max-width: var(--container-wide);
  margin: 0 auto;
  list-style: none;
  padding: 0;
}

.pricing__phase {
  display: block;
  height: 100%;
}

/* --- Phase card ----------------------------------------------- */
.pricing__phase-card {
  position: relative;
  background: var(--cal-bg-soft);
  border: 1px solid var(--cal-line);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-2);
  height: 100%;
  overflow: hidden;
}

/* Top accent strip */
.pricing__phase-strip {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background: var(--cal-teal);
}

/* Phase 03 emphasis */
.pricing__phase-card--featured {
  background: var(--cal-white);
  border: 2px solid var(--cal-teal);
  box-shadow: var(--shadow-md);
}

.pricing__phase-num {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--cal-teal);
}

.pricing__phase-name {
  margin: 0;
}

.pricing__phase-price {
  font-family: var(--font-display);
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  color: var(--cal-teal);
  line-height: 1;
  margin: var(--sp-3) 0 0;
  letter-spacing: var(--tracking-tight);
}
.pricing__phase-price--text {
  /* "月額制" is text — same prominence, slightly smaller for fit */
  font-size: var(--fs-h2);
}

.pricing__phase-price-label {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  margin: var(--sp-1) 0 0;
}

.pricing__phase-divider {
  display: block;
  width: 100%;
  height: 1px;
  background: var(--cal-line);
  margin: var(--sp-4) 0 var(--sp-2);
}

.pricing__phase-desc {
  font-family: var(--font-body);
  font-size: var(--fs-body-sm);
  color: var(--cal-text);
  line-height: var(--lh-relaxed);
  margin: 0;
}

/* --- Phase arrow separator ------------------------------------ */
.pricing__phase-sep {
  display: flex;
  align-items: center;
  justify-content: center;
  list-style: none;
}
.pricing__phase-arrow {
  width: 28px;
  height: 28px;
  color: var(--cal-coral);
  stroke-width: 2;
  flex-shrink: 0;
}
.pricing__phase-arrow--mobile {
  display: none;
}

/* --- Bottom message banner ------------------------------------ */
.pricing__message {
  margin: var(--sp-8) auto 0;
  max-width: 720px;
  padding: var(--sp-4) var(--sp-5);
  text-align: center;
  background: var(--cal-teal-tint);
  border-radius: var(--r-md);
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--fw-bold);
  color: var(--cal-teal-dark);
  line-height: var(--lh-relaxed);
}

/* --- Tablet --- 1 column, switch arrow direction -------------- */
@media (max-width: 1024px) {
  .pricing__phases {
    grid-template-columns: 1fr;
    gap: var(--sp-3);
    max-width: 520px;
  }
  .pricing__phase-arrow--desktop {
    display: none;
  }
  .pricing__phase-arrow--mobile {
    display: block;
  }
}

/* --- Mobile --------------------------------------------------- */
@media (max-width: 768px) {
  .pricing { padding: var(--sp-7) 0; }
  .pricing__header { margin-bottom: var(--sp-7); }
  .pricing__phase-card {
    padding: var(--sp-6) var(--sp-5) var(--sp-5);
  }
  .pricing__phase-price {
    font-size: var(--fs-h2);
  }
  .pricing__phase-price--text {
    font-size: var(--fs-h3);
  }
  .pricing__message {
    margin-top: var(--sp-7);
    padding: var(--sp-3) var(--sp-4);
    font-size: var(--fs-body-sm);
  }
}