/* css/account-plan.css - look of the My plan section (js/account/plan.js, /account/plan and the chooser /account/plan?welcome=1).
   Builds on css/account.css (cards, notices, badges: `ac-*`) and the design tokens; every rule here is prefixed `pl-`. Dark theme only, like the site.
   Rules of the owner: symmetric, equal-width cards, centred orphans (five cards: 3 + 2 or 2 + 2 + 1, each row centred), one control height, nothing wider than the page at 320 px. */

.pl{display:flex;flex-direction:column;gap:var(--sp-5);min-width:0;container:pl / inline-size}

/* ---------- the current plan ---------- */
.pl-now{gap:var(--sp-4)}
.pl-now-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4) var(--sp-5);align-items:start}
.pl-now-head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;min-width:0}
.pl-label,.pl-kicker{font-size:var(--fs-xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-3)}
.pl-now-name{margin:0;font-size:var(--fs-2xl);font-weight:800;letter-spacing:-.02em;line-height:1.2;text-wrap:balance;overflow-wrap:anywhere}
.pl-when{margin:0;font-size:var(--fs-l);font-weight:650;font-variant-numeric:tabular-nums;text-wrap:balance}
.pl-via{margin:0;color:var(--text-2);font-size:var(--fs-m);text-wrap:balance}
.pl-now-body{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-m);background:var(--bg-0)}
.pl-sub{margin:0;font-size:var(--fs-m);font-weight:750;color:var(--text)}
.pl-notice p{text-wrap:pretty}
@container pl (min-width:640px){
  .pl-now-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center}
}

/* ---------- feature lists (current plan, Also yours, the cards) ---------- */
.pl-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px;min-width:0}
.pl-list li{display:grid;grid-template-columns:14px minmax(0,1fr);gap:8px;align-items:start;font-size:var(--fs-m);line-height:1.45;color:var(--text-2);text-align:left;overflow-wrap:anywhere}
.pl-list li.pl-li-lead{display:block;color:var(--text);font-weight:650}
.pl-tick{display:block;margin-top:3px;color:var(--good)}

/* ---------- Also yours ---------- */
.pl-also{gap:var(--sp-4)}
.pl-also>.ac-card-title{text-align:center}
.pl-also-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--sp-4)}
.pl-also-item{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0;padding:var(--sp-3) var(--sp-4);border:1px solid var(--line);border-radius:var(--radius-m);background:var(--bg-0)}
.pl-also-item>.pl-sub{text-align:center}
.pl-also-text{margin:0;color:var(--text-2);font-size:var(--fs-m);line-height:1.5;text-align:center;text-wrap:pretty}
@container pl (min-width:640px){
  .pl-also-2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pl-also-2>.pl-also-item:last-child:nth-child(odd){grid-column:1 / -1;justify-self:center;width:calc((100% - var(--sp-4)) / 2)}   /* a lone third item keeps the width of the others, centred */
}

/* ---------- the cards ---------- */
.pl-plans{display:flex;flex-direction:column;gap:var(--sp-3);min-width:0}
.pl-head{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center}
.pl-title{margin:0;font-size:var(--fs-xl);font-weight:800;letter-spacing:-.02em;text-wrap:balance}
.pl[data-mode="welcome"] .pl-title{font-size:var(--fs-2xl)}
.pl-lead{margin:0;max-width:62ch;color:var(--text-2);font-size:var(--fs-m);line-height:1.5;text-wrap:balance}
.pl-loading{margin:0;padding:24px 0;text-align:center;color:var(--text-2)}
.pl-cards{--cols:1;--gap:16px;display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:var(--gap);padding-top:14px}
.pl-cards>.pl-card{flex:0 0 calc((100% - (var(--cols) - 1) * var(--gap)) / var(--cols))}
@container pl (min-width:520px){.pl-cards{--cols:2}}
@container pl (min-width:780px){.pl-cards{--cols:3}}
@container pl (min-width:1180px){.pl-cards{--cols:5}}
.pl-card{position:relative;display:flex;flex-direction:column;gap:var(--sp-3);min-width:0;padding:var(--sp-5) var(--sp-4) var(--sp-4);color:var(--text);background:linear-gradient(180deg,var(--bg-2),var(--bg-1));border:1px solid var(--line);border-radius:var(--radius-l);box-shadow:var(--shadow-1)}
.pl-card.pl-is-current{border-color:color-mix(in srgb,var(--accent) 60%,transparent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 35%,transparent),var(--shadow-1)}
.pl-ribbon{position:absolute;top:-12px;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;height:24px;padding:0 12px;border-radius:var(--radius-pill);background:var(--accent);color:var(--text-inv);font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;white-space:nowrap}
.pl-card-head{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;min-width:0}
.pl-card-name{margin:0;font-size:var(--fs-xl);font-weight:750;letter-spacing:-.01em}
.pl-price{margin:6px 0 2px;font-size:34px;line-height:1.1;font-weight:850;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pl-period{margin:0;color:var(--text-2);font-size:var(--fs-m);text-wrap:balance}
.pl-card>.pl-list{flex:1;padding-top:var(--sp-3);border-top:1px solid var(--line)}
.pl-act{margin-top:auto;display:flex;justify-content:center;min-height:var(--ctl-h);align-items:center}
.pl-act>.bm-btn{width:100%}
.pl-state{display:inline-flex;align-items:center;gap:6px;min-height:var(--ctl-h);font-size:var(--fs-m);font-weight:650;color:var(--good)}
.pl-state .pl-tick{margin-top:0}
.pl-state-off{color:var(--text-3)}
.pl-note{margin:0;font-size:var(--fs-s);line-height:1.45;color:var(--text-3);text-align:center;text-wrap:balance}
.pl-fine{margin:0;font-size:var(--fs-s);color:var(--text-3);text-align:center;text-wrap:balance}

@container pl (max-width:420px){
  .pl-now-name{font-size:22px}
  .pl-price{font-size:30px}
  .pl-card{padding-inline:var(--sp-3)}
  .pl-now-body,.pl-also-item{padding-inline:var(--sp-3)}
}