/* Pricing: the four free books, then Monthly / Annual / Family. Prices come from data
   attributes via js/components/pricing.js, never hard-coded here.
   API: <div class="db-pricing" data-db="pricing"> <div class="db-pricing__free"> <div class="db-plan[ db-plan--featured]"> */
.db-pricing__free{display:flex;flex-wrap:wrap;align-items:center;gap:var(--db-s5);
  background:var(--db-card);border-radius:var(--db-r-xl);padding:var(--db-s5) var(--db-s6);
  margin-bottom:var(--db-s7);box-shadow:var(--db-shadow-1)}
.db-pricing__free-covers{display:flex}
.db-pricing__free-covers img{width:64px;aspect-ratio:4/5;object-fit:cover;border-radius:10px;
  border:2px solid var(--db-card);box-shadow:var(--db-shadow-1);margin-left:-14px}
.db-pricing__free-covers img:first-child{margin-left:0}
.db-pricing__free-copy{flex:1;min-width:220px}
.db-pricing__free-title{font-weight:800;font-size:var(--db-fs-h3);margin:0 0 .2rem}
.db-pricing__free-text{color:var(--fg-muted);margin:0}

.db-pricing__plans{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--db-s5)}
@media (max-width:900px){.db-pricing__plans{grid-template-columns:1fr;max-width:420px;margin-inline:auto}}

.db-plan{position:relative;display:flex;flex-direction:column;gap:var(--db-s4);background:var(--db-card);
  border-radius:var(--db-r-xl);padding:var(--db-s6) var(--db-s5);box-shadow:var(--db-shadow-1);
  border:var(--db-border)}
.db-plan--featured{border:1.5px solid rgba(255,206,92,.5);box-shadow:var(--db-shadow-2)}

.db-plan__tag{position:absolute;top:-14px;left:var(--db-s5)}
.db-plan__name{font-size:var(--db-fs-h3);font-weight:700;margin:0}
.db-plan__desc{color:var(--fg-muted);font-size:var(--db-fs-small);margin:0}

.db-plan__price{display:flex;align-items:baseline;gap:.35rem;margin:0}
.db-plan__amount{font-size:2rem;font-weight:800;font-variant-numeric:tabular-nums}
.db-plan__unit{color:var(--fg-muted);font-size:var(--db-fs-small)}

.db-plan__features{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.6rem;flex:1}
.db-plan__features li{display:flex;align-items:flex-start;gap:.55rem;font-size:var(--db-fs-small)}
.db-plan__features svg{width:19px;height:19px;flex:none;color:var(--db-gold);margin-top:.1em}

.db-pricing__foot{text-align:center;color:var(--fg-muted);font-size:var(--db-fs-small);
  margin-top:var(--db-s6)}