/* =========================================================
   TILAUSSIVU (subscription.html)
   ========================================================= */
.sb { padding: 48px 0 40px; }

.sb-hero { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 56px; align-items: start; }
.sb-hero h1 { font-family: var(--display); font-size: clamp(38px, 5vw, 64px); font-weight: 900; letter-spacing: -.03em; line-height: 1.02; }
.sb-intro { color: var(--muted); font-size: 16px; line-height: 1.75; max-width: 500px; margin-top: 24px; }
.sb-intro strong { color: var(--text); }
.sb-perks { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-top: 28px; font-size: 14.5px; color: var(--text-2); }
.sb-perks li { display: flex; align-items: center; gap: 14px; }
.sb-perks li::before { content: "✓"; color: var(--text-2); font-size: 13px; }

/* Pakettikortti */
.sb-card { padding: 24px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line-2); }
.sb-card h3 { font-family: var(--display); font-size: 18px; font-weight: 800; margin-bottom: 16px; }
.sb-plans { display: flex; flex-direction: column; gap: 12px; }
.sb-plan { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 12px; width: 100%; padding: 16px; border-radius: 12px; text-align: left; background: var(--card); border: 1px solid var(--line-2); transition: border-color .2s; }
.sb-plan:hover { border-color: var(--line-3); }
.sb-plan.active { border: 2px solid #fff; padding: 15px; }
.sb-plan strong { display: block; font-size: 16px; font-weight: 800; }
.sb-plan small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.sb-plan em { font-style: normal; font-weight: 500; font-size: 12px; color: var(--muted); }
.sb-plan-right { text-align: right; }
.sb-plan-right strong { font-size: 18px; }
.sb-save, .sb-best { position: absolute; top: -10px; padding: 2px 9px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .06em; }
.sb-save { right: 14px; background: var(--accent); color: #000; }
.sb-best { left: 14px; background: #fff; color: #000; }
#sbBuy { width: 100%; height: 50px; margin-top: 16px; font-size: 14px; font-weight: 800; letter-spacing: .03em; text-transform: uppercase; }
.sb-notes { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 14px; color: var(--muted); font-size: 12px; }
.sb-empty { color: var(--muted); padding: 12px 0; }

/* Mukana olevat skriptit */
.sb-list { margin-top: 88px; }
.sb-list h2 { font-family: var(--display); font-size: clamp(30px, 3.6vw, 44px); font-weight: 900; letter-spacing: -.03em; line-height: 1.08; }
.sb-list h2 span { color: var(--muted); }
.sb-list > p { color: var(--muted); max-width: 480px; margin: 16px 0 32px; line-height: 1.7; }
.sb-product { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: var(--card); border: 1px solid var(--line); transition: border-color .2s, transform .25s; }
.sb-product:hover { border-color: var(--line-3); transform: translateY(-3px); }
.sb-product-img { aspect-ratio: 16/9; overflow: hidden; background: var(--bg-2); }
.sb-product-img > * { width: 100%; height: 100%; object-fit: cover; }
.sb-product-body { padding: 14px 16px 18px; }
.sb-product h3 { font-size: 18px; font-weight: 800; margin-top: 10px; overflow-wrap: anywhere; }
.sb-product small { display: block; color: var(--muted); font-size: 10.5px; letter-spacing: .1em; font-weight: 700; margin-top: 14px; }
.sb-product strong { font-size: 24px; font-weight: 800; letter-spacing: -.02em; }

@media (max-width: 980px) {
  .sb-hero { grid-template-columns: minmax(0, 1fr); gap: 36px; }
}
@media (max-width: 640px) {
  .sb { padding-top: 28px; }
  .sb-card { padding: 18px; }
  .sb-list { margin-top: 56px; }
}