body { padding:2rem 0 4rem; }
/* Offset main purchase content below fixed header + portal (approx 170px) */
.page-shell { max-width:1100px; margin:170px auto 0; }
.tiers-wrapper { display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:1.5rem; }
.tier-card { background:#23221f; border:1px solid #32312d; border-radius:1rem; padding:1.2rem 1.1rem 1.4rem; position:relative; display:flex; flex-direction:column; min-height:420px; }
.tier-card h3 { margin:0 0 0.35rem; font-size:1.2rem; }
.tier-card .subtitle { font-size:0.65rem; letter-spacing:1px; text-transform:uppercase; color:#7db9a2; margin-bottom:0.6rem; font-weight:600; }
.feature-list { list-style:none; margin:0.75rem 0 0; padding:0; font-size:0.75rem; line-height:1.35; flex:1; }
.feature-list li { margin-bottom:0.4rem; }
.pricing-block { background:#2d2c29; padding:0.6rem 0.7rem; border-radius:0.55rem; font-size:0.62rem; line-height:1.3; margin-top:0.55rem; }
.select-tier-btn { background:#3a7; color:#fff; border:none; padding:0.65rem 0.9rem; border-radius:0.55rem; font-size:0.8rem; font-weight:600; cursor:pointer; margin-top:0.85rem; transition:0.25s; }
.select-tier-btn:hover { background:#2f8258; }
.current-plan-tag { position:absolute; top:0.7rem; right:0.75rem; background:#3a7; color:#fff; font-size:0.55rem; letter-spacing:0.5px; padding:0.3rem 0.5rem; border-radius:0.4rem; text-transform:uppercase; display:none; }
.purchase-panel { margin-top:2.2rem; background:#23221f; border:1px solid #32312d; border-radius:1rem; padding:1.5rem 1.25rem 1.75rem; }
.purchase-panel h2 { font-size:1.05rem; margin:0 0 0.85rem; }
.hidden { display:none !important; }
.duration-options, .billing-mode-options { display:flex; gap:0.75rem; flex-wrap:wrap; }
.duration-options label, .billing-mode-options label { background:#2b2b2b; padding:0.55rem 0.85rem; border-radius:0.55rem; font-size:0.7rem; display:flex; align-items:center; gap:0.4rem; cursor:pointer; border:1px solid #393835; }
.duration-options input, .billing-mode-options input { accent-color:#3a7; }
.summary-line { font-size:0.75rem; color:#bbb; margin-top:0.55rem; }
.field { margin-top:0.65rem; }
label.input-label { font-size:0.55rem; text-transform:uppercase; letter-spacing:0.5px; display:block; margin-bottom:0.3rem; color:#999; }
input[type=text] { width:100%; background:#1c1b19; border:1px solid #363531; border-radius:0.4rem; padding:0.5rem 0.6rem; font-size:0.8rem; color:#eee; }
.actions { margin-top:1rem; display:flex; gap:0.75rem; flex-wrap:wrap; }
button.primary { background:#3a7; color:#fff; border:none; padding:0.8rem 1.4rem; border-radius:0.55rem; font-weight:600; cursor:pointer; font-size:0.85rem; transition:0.25s; }
button.primary:hover { background:#2f8258; }
a.link { color:#3a7; text-decoration:none; font-size:0.75rem; }
.status-msg { font-size:0.7rem; margin-top:0.6rem; min-height:1.1rem; color:#aaa; }
.tier-card.selected { outline:2px solid #3a7; }