/* The package cards, one design on the homepage and the packages page (Orhan, 1 Nov 2026: one card design everywhere).
   Built by packageCard() in build-pages.cjs; the price lines and terms are the single-package pages' own. */
.pick-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;align-items:stretch}
.pick-card{position:relative;display:flex;flex-direction:column;padding:34px 30px 26px;border-radius:24px;background:rgba(28,27,22,.94)}
@media (hover:hover) and (prefers-reduced-motion:no-preference){.pick-card{transition:translate .6s cubic-bezier(.16,1,.3,1)}.pick-card:hover{translate:0 -6px}}
/* Pro, the recommended package, is taller at both ends, so the three cards still share one baseline */
.pick-card.is-pro{background:#2a2617;margin:-16px 0;padding-top:50px;padding-bottom:42px}
.pick-card .pick-name{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;font-size:clamp(28px,2vw,40px);line-height:1.1;font-weight:700;font-stretch:100%;letter-spacing:0;margin:0 0 6px}
.pick-card .rec{font-size:13px;font-weight:700;padding:6px 11px;border-radius:99px;background:var(--gold,#e8c547);color:#15150f;line-height:1}
.pick-card .for{margin:0 0 22px;color:var(--muted);font-size:15px;line-height:1.4}
.pick-card .price-line{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:0 0 18px}
.pick-card .price-line strong{font-size:clamp(40px,3.4vw,52px);line-height:1;letter-spacing:-.025em;font-weight:800;font-stretch:125%;font-variant-numeric:tabular-nums}
.pick-card .price-line span{font-size:14px;color:var(--muted);flex-basis:auto;white-space:normal}   /* not the single-package pages' wrap rules */
/* the price every 30 days in one type style with its sentence, in a soft box */
.pick-card .recurring{margin:0 0 24px;padding:12px 14px;border-radius:12px;background:rgba(247,245,237,.05);font-size:14.5px;line-height:1.5;color:var(--muted)}
.pick-card .recurring strong{font:inherit;font-weight:700;color:var(--ink,#f7f5ed)}
.pick-card .offer-scope{list-style:none;display:grid;gap:12px;padding:0;margin:0 0 28px;font-size:15px;line-height:1.45;color:var(--ink,#f7f5ed)}
.pick-card .offer-scope li{display:flex;gap:12px;padding:0}
.pick-card .offer-scope li::before{content:"";position:static;flex:none;width:16px;height:16px;margin-top:2px;rotate:none;border-radius:50%;background:rgba(232,197,71,.15) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 8.2l2.2 2.2 4.8-4.8' fill='none' stroke='%23E8C547' stroke-width='1.6'/%3E%3C/svg%3E") center/16px}
.pick-btn{display:flex;align-items:center;justify-content:center;margin-top:auto;min-height:52px;padding:10px 16px;text-align:center;line-height:1.25;border-radius:99px;background:rgba(232,197,71,.14);color:var(--gold,#e8c547);font-weight:700;font-size:15px;text-decoration:none;transition:background .18s,color .18s,transform .16s cubic-bezier(.2,.8,.2,1)}
.pick-btn.is-pro{background:var(--gold,#e8c547);color:#15150f}
@media(hover:hover){.pick-btn:hover{background:#f3d363;color:#15150f}}
@media (prefers-reduced-motion:no-preference){.pick-btn:active{transform:scale(.97)}}
.pick-card .pick-more{align-self:center;display:inline-flex;align-items:center;min-height:44px;margin-top:8px;font-size:14px;color:var(--ink,#f7f5ed);text-decoration:underline;text-decoration-color:rgba(232,197,71,.6);text-underline-offset:5px}
@media(hover:hover){.pick-card .pick-more:hover{color:var(--gold,#e8c547)}}
@media(max-width:1100px){.pick-cards{gap:14px}.pick-card{padding:28px 20px 22px}.pick-card.is-pro{padding-top:44px;padding-bottom:38px}.pick-card .pick-name{font-size:26px}.pick-card .price-line strong{font-size:clamp(34px,4.6vw,48px)}.pick-btn{padding:10px 8px;font-size:14px}}
/* phones: one column with Pro first; pages and languages share a row so each card stays short */
@media(max-width:760px){
.pick-cards{grid-template-columns:1fr;max-width:520px}
.pick-card>*{order:0}   /* undoes the single-package pages' phone order (.price-line, .offer-scope) */
.pick-card.is-pro{order:-1;margin:0;padding-top:28px;padding-bottom:22px}
.pick-card .offer-scope{grid-template-columns:1fr 1fr;gap:10px 14px;font-size:14px}
.pick-card .offer-scope li:nth-child(n+3){grid-column:1/-1}   /* the two short facts side by side, the longer ones full width */
.pick-card .recurring{margin-bottom:20px}
}