/* Small illustrated screens for each bundle and subscription type (home page and the type cards on bundles.html and subscriptions.html). */
.sw { display: block; border-radius: 12px; background: linear-gradient(150deg, var(--c1, #ffd9cc), var(--c2, #ffb8a3)); }
img.sw { object-fit: contain; padding: 4px; }
.tv { height: 150px; border-radius: 16px; display: grid; place-items: center; padding: 14px; margin-bottom: 18px; }
.tv-b { background: linear-gradient(160deg, #fff6f2, #ffe9e3); }
.tv-s { background: linear-gradient(160deg, #faf5ff, #f1e6fd); }
.tcard h3 { font-size: 21px; font-weight: 700; margin: 0 6px 6px; }
.tcard p { font-size: 15px; color: var(--ink-secondary); line-height: 1.5; margin: 0 6px 14px; flex: 1; }
.ttag { align-self: flex-start; margin: 0 6px; font-size: 12.5px; font-weight: 700; padding: 4px 12px; border-radius: 999px; background: var(--coral-soft); color: var(--coral-deep); }
.ts .ttag { background: var(--purple-soft); color: var(--purple-deep); }
.tmore { margin-top: 22px; font-weight: 700; }
.tv .sw { width: 38px; height: 38px; border-radius: 10px; flex: none; }
.tv em { font-style: normal; font-weight: 700; font-size: 13px; }
/* bundle minis */
.m-tiers { display: flex; gap: 8px; }
.m-tiers span { width: 62px; padding: 12px 0 10px; text-align: center; background: #fff; border: 1px solid var(--border); border-radius: 12px; font: 700 20px var(--font-display); }
.m-tiers small { display: block; font: 700 12px var(--font-body); color: var(--ink-muted); }
.m-tiers .on { border: 2px solid var(--coral); background: #fff7f8; }
.m-tiers .on small { color: var(--coral-deep); }
.m-slots { display: grid; grid-template-columns: repeat(4, 38px); gap: 8px; justify-items: center; }
.m-slots b { width: 38px; height: 38px; border-radius: 10px; border: 2px dashed #f0b8b0; }
.m-slots em { grid-column: 1 / -1; color: var(--coral-deep); margin-top: 6px; }
.m-bogo { display: flex; align-items: center; gap: 10px; }
.m-bogo span { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 16px; font: 700 17px var(--font-display); }
.m-bogo .free { background: var(--bundle-gradient); color: #fff; border: 0; }
.m-bogo i { font: 800 20px var(--font-display); color: var(--coral); }
.m-set { display: grid; grid-template-columns: repeat(3, 38px); gap: 8px; justify-items: center; }
.m-set em { grid-column: 1 / -1; margin-top: 8px; font-size: 15px; color: var(--ink-primary); }
.m-set s { color: var(--ink-muted); font-weight: 500; margin-right: 4px; }
.m-add { display: grid; grid-template-columns: 38px auto 38px; gap: 10px; align-items: center; justify-items: center; }
.m-add > i { font: 800 20px var(--font-display); color: var(--coral); }
.m-add em { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; margin-top: 10px; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 6px 14px 6px 8px; }
.m-add u { width: 16px; height: 16px; border-radius: 5px; background: var(--coral); display: inline-block; }
.m-gift { width: 100%; max-width: 240px; text-align: center; }
.m-gift .bar { height: 10px; background: #f5d9d5; border-radius: 99px; overflow: hidden; margin-bottom: 12px; }
.m-gift .bar i { display: block; width: 80%; height: 100%; background: var(--bundle-gradient); }
.m-gift p { margin: 0 0 10px; font-size: 14px; color: var(--ink-secondary); }
.giftchip { display: inline-block; background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 5px 14px; font-weight: 700; font-size: 13px; color: var(--coral-deep); }
/* subscription minis */
.m-opts { width: 100%; max-width: 250px; display: grid; gap: 8px; }
.m-opts span { display: flex; align-items: center; gap: 9px; background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; font-weight: 600; font-size: 13.5px; }
.m-opts b { margin-left: auto; }
.m-opts u { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #d9c9d4; flex: none; }
.m-opts .on { border: 2px solid var(--purple); background: #fbf7ff; }
.m-opts .on u { border-color: var(--purple); background: radial-gradient(circle, var(--purple) 45%, transparent 50%); }
.m-steps { display: flex; align-items: center; gap: 10px; }
.m-steps span { display: flex; flex-direction: column; align-items: center; gap: 5px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; font: 700 20px var(--font-display); min-width: 92px; }
.m-steps span b { font: 600 12px var(--font-body); color: var(--ink-muted); }
.m-steps span.on { border: 2px solid var(--purple); background: #fbf7ff; }
.m-steps i { font-style: normal; font-weight: 800; color: var(--purple); }
.m-steps .sw { width: 28px; height: 28px; border-radius: 8px; }
.m-months { display: flex; gap: 10px; }
.m-months span { display: flex; flex-direction: column; align-items: center; gap: 6px; background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 10px 14px; font-weight: 700; font-size: 13px; }
.m-months .sw { width: 44px; height: 44px; }
.m-pick { display: grid; gap: 10px; justify-items: center; }
.m-pick .tg { display: flex; background: var(--purple-soft); border-radius: 999px; padding: 3px; font-weight: 600; font-size: 13px; color: var(--ink-secondary); }
.m-pick .tg span { padding: 6px 14px; border-radius: 999px; }
.m-pick .tg .on { background: var(--sub-gradient); color: #fff; }
.m-pick .row { display: flex; gap: 8px; }
.m-pick em { color: var(--purple-deep); }
.m-gifts { display: flex; align-items: center; gap: 10px; }
.m-gifts span { background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; font-size: 13px; color: var(--ink-muted); font-weight: 600; text-align: center; }
.m-gifts b { display: block; font: 700 18px var(--font-display); color: var(--ink-primary); }
.m-gifts em { display: block; font: 800 18px var(--font-display); color: var(--purple-deep); }
.m-gifts .gf { background: var(--sub-gradient); color: #fff; border: 0; font-weight: 700; }