.head{padding:clamp(2.5rem,6vw,4.5rem) 0 2rem}
.head h1{margin:.8rem 0 1rem}
.head .lead{max-width:62ch}
.packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,12.5rem),1fr));gap:1rem;margin-top:1rem}
.pack{background:var(--surface);border:1px solid var(--rule);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:.4rem;position:relative}
.pack.pop{border:2px solid var(--accent)}
.pack .tag{position:absolute;top:-.7rem;left:1.2rem;background:var(--accent);color:#fff;font-size:.72rem;font-weight:700;padding:.15rem .5rem;border-radius:4px}
:root[data-theme="dark"] .pack .tag{color:#10142B}
.pack .price{font-family:var(--display);font-size:2.6rem;font-weight:400;line-height:1}
.pack .price small{font-family:var(--body);font-size:1rem;color:var(--ink-3)}
.pack .words{font-weight:700;font-size:1.05rem}
.pack .per{font-family:var(--mono);font-size:.8rem;color:var(--ink-3)}
.pack .hint{font-size:.9rem;color:var(--ink-2);flex:1}
.pack .btn{margin-top:1rem}
.free{background:var(--surface-2);border-radius:14px;padding:1.5rem;display:flex;flex-direction:column;gap:.4rem}
.free .price{font-family:var(--display);font-size:2.6rem;font-weight:400;line-height:1}
.how{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));gap:1.2rem 2.5rem}
.how > div{border-top:1px solid var(--rule);padding-top:.9rem}
.how h3{font-family:var(--body);font-size:1rem;margin-bottom:.3rem}
.how p{color:var(--ink-2);font-size:.95rem}
.ex{font-family:var(--mono);font-size:.86rem}
.ex td{padding:.45rem .6rem}