.cost-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .42fr);
  gap: 18px;
  margin-top: 42px;
}
.cost-card, .total-card, .steps article, .learning {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #0d1922;
}
.cost-card { overflow: hidden; }
.cost-head, .cost-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(170px, .42fr) 92px;
  gap: 18px;
  align-items: center;
  padding: 18px 24px;
}
.cost-head {
  background: rgba(255,255,255,.035);
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.cost-row { border-top: 1px solid var(--line); }
.cost-row strong { font-size: 16px; }
.cost-row span { color: var(--muted); font-size: 14px; line-height: 1.45; }
.cost-row b { text-align: right; font-size: 16px; }
.cost-group { padding: 17px 24px 8px; color: var(--teal); font-size: 12px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.total-card { padding: 30px; display: flex; flex-direction: column; justify-content: space-between; }
.total-card small { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.total-card strong { display: block; margin: 10px 0 4px; font-size: clamp(44px,5vw,70px); letter-spacing: -.06em; }
.total-card p { margin: 0; color: var(--muted); font-size: 15px; line-height: 1.6; }
.subtotal { margin-top: 25px; padding-top: 20px; border-top: 1px solid var(--line); display: grid; gap: 12px; }
.subtotal div { display: flex; justify-content: space-between; gap: 20px; color: var(--muted); font-size: 14px; }
.subtotal b { color: var(--ink); }
.steps { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 42px; }
.steps article { padding: 28px; }
.steps small { color: var(--teal); font-weight: 850; }
.steps h3 { margin: 13px 0 10px; font-size: 25px; letter-spacing: -.035em; }
.steps p, .learning p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.65; }
.learning { margin-top: 20px; padding: clamp(28px,4vw,48px); }
.learning h3 { margin: 10px 0 15px; font-size: clamp(30px,4vw,46px); letter-spacing: -.045em; }
.disclosure { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); color: #c8c1b4; font-size: 14px; line-height: 1.65; }
@media(max-width:980px) { .cost-layout { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } }
@media(max-width:660px) { .cost-head { display: none; } .cost-row { grid-template-columns: 1fr auto; gap: 7px 16px; } .cost-row span { grid-column: 1/-1; } .cost-group { padding-top: 22px; } }