/* Narzędzia samorozwoju — style unikalne dla tej strony. Ładować po base.css. */

.hero { padding-top: 56px; padding-bottom: 70px; text-align: center; }
.hero h1 { font-size: clamp(30px, 5.4vw, 48px); font-weight: 600; line-height: 1.2; margin: 0 0 22px; text-wrap: balance; }
.hero .sub { font-size: 18px; color: var(--ink-soft); max-width: 50ch; margin: 0 auto 0; }

/* products */
.products { padding-top: 10px; padding-bottom: 90px; }
.product-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 760px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }

.product-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--paper-raised);
  border-radius: 22px;
  padding: 34px 28px 28px;
  box-shadow: 0 20px 50px -28px rgba(60, 42, 99, 0.32);
}
.product-card.free { background: var(--gold-tint); border-color: transparent; }
.product-card .price.free-price { font-size: 18px; }
.product-card .kicker { margin-bottom: 14px; }
.product-card h2 { font-size: clamp(21px, 3vw, 25px); margin: 0 0 12px; text-wrap: balance; }
.product-card .hook { font-family: 'Fraunces', serif; font-style: italic; font-weight: 500; font-size: 17px; color: var(--purple-deep); margin: 0 0 18px; text-wrap: balance; }
.product-card .body-p { font-size: 15px; color: var(--ink-soft); margin: 0 0 14px; }
.product-card .section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-faint); margin: 0 0 9px; }
.product-card .for-you { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.product-card .for-you li { font-size: 14px; color: var(--ink-soft); padding-left: 22px; position: relative; }
.product-card .for-you li::before { content: '—'; position: absolute; left: 0; color: var(--gold); }
.product-card .gain { background: var(--purple-tint); border-radius: 12px; padding: 14px 16px; font-size: 14px; color: var(--purple-deep); margin: 0 0 20px; }
.product-card .gain strong { color: var(--purple); }
.product-card .format { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em; color: var(--purple); margin: 0 0 20px; }
.product-card .buy-row { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: 18px; border-top: 1px solid var(--line); }
.product-card .price { font-family: 'Fraunces', serif; font-weight: 600; font-size: 26px; color: var(--rose); }
.hero h1 .rose-word { color: var(--rose); border-bottom: 3px solid var(--gold); padding-bottom: 2px; }