/* "Not enough credits" (credits-sheet.js): the plans first, the packs second. The cards are the pricing page's own
   (.pr-card from pricing.css: the plan's colour, art, credits box, slider, price, button), cut down to fit; this file
   only sizes the sheet and adds what the sheet needs (the Recommended ring and chip, the quiet pack row). The phone
   layer is credits-sheet-m.css (≤ 760 px). */
#credsheet .cs-sheet{width:min(1160px,96vw);max-height:calc(100vh - 32px);padding:24px 24px 18px;display:flex;flex-direction:column;gap:16px}
#credsheet .cs-sheet.cs-n3{width:min(980px,96vw)}
#credsheet .cs-sheet.cs-n2{width:min(800px,96vw)}
#credsheet .cs-sheet.cs-n1,#credsheet .cs-sheet.cs-n0{width:min(760px,96vw)}
#credsheet .cs-x{z-index:3;color:var(--ink);background:var(--ground)}
#credsheet .cs-x svg{width:14px;height:14px}
#credsheet .cs-x:hover{border-color:var(--ink)}
#credsheet .cs-x:focus-visible{outline:2px solid var(--sun);outline-offset:2px}

/* the head: what happened, in one line, and Monthly ◯ Annual */
.cs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap;padding-right:40px}
.cs-hl{min-width:0;flex:1 1 420px}
.cs-hl .aih{margin:6px 0 6px;font-size:36px}
.cs-hl .ais{margin:0;font-size:14px;line-height:1.45;max-width:640px}
.cs-hl .ais b{color:var(--ink);font-variant-numeric:tabular-nums}
.cs-cyc{flex:0 0 auto}

/* the cards: one row, the cheapest first; the button sits on one line across them */
.cs-cards{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));grid-auto-rows:auto;column-gap:12px;row-gap:14px;align-items:stretch}
/* one grid for the row, every card on its rows (subgrid, as on the plans page): name, line, credits box, price and
   button sit on the same lines across the cards whatever their text */
#credsheet .cs-cards>.cs-card{display:grid;grid-row:span 5;grid-template-rows:subgrid;row-gap:10px;align-content:start}
.cs-n3 .cs-cards{--n:3}.cs-n2 .cs-cards{--n:2}.cs-n1 .cs-cards{--n:1;max-width:360px}
#credsheet .cs-card{gap:10px;padding:16px 12px 14px}
.cs-card .pr-top{min-height:32px}
.cs-card .pr-top .disp{font-size:30px}
.cs-card .pr-sub{font-size:13px;min-height:2.7em}
.cs-card .cs-box{padding:10px 11px 8px}
.cs-card .cs-tier{min-height:0;margin-top:2px}
.cs-card .cs-tier .pr-range{margin-top:8px}
.cs-card .cs-tier .pr-ticks{margin-top:8px}
.cs-card .cs-out{margin:8px 0 0;font-size:12.5px;line-height:1.55}
.cs-card .cs-out li{max-height:none;white-space:nowrap}
.cs-card .cs-out li .pr-n{min-width:3ch}
.cs-card .cs-out .pr-plus b{color:#fff}
.cs-card .pr-price{min-height:0}
.cs-card .pr-price b{font-size:28px}
.cs-card .pr-price s{font-size:22px}
.cs-card .pr-cta{height:44px;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:0 10px}
/* the other cards' buttons are there, but quieter than the recommended one */
.pr-cta.cs-ghost{background:rgba(255,255,255,.06);color:#f3efe6;border:1px solid rgba(243,239,230,.22);box-shadow:none}
.pr-cta.cs-ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(243,239,230,.45);filter:none}

/* the recommended card: a ring in its own colour, a chip, and the primary button */
#credsheet .cs-card.cs-rec{border-color:var(--acc);box-shadow:0 0 0 1px var(--acc),0 22px 60px -28px var(--acc)}
.cs-chip{font:700 10.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;padding:5px 8px;border-radius:999px;background:var(--acc);color:var(--accink);white-space:nowrap}
.cs-rec .cs-line{color:#fff}
.cs-card.pr-neutral.cs-rec .cs-chip{background:#fff;color:#000}

/* the packs: one quiet row under the plans, each with its own Buy; the one that covers the shortfall is picked */
.cs-top{border-top:1px solid var(--hair);padding-top:14px}
.cs-toph{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.cs-toph h3{margin:0;font-size:15px;font-weight:700}
.cs-toph span{font-size:12.5px;color:var(--muted)}
.cs-packs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
.cs-pack{position:relative;display:flex;flex-direction:column;gap:8px;padding:10px 10px 10px 12px;border-radius:14px;border:1px solid var(--hair2);background:var(--card);min-width:0}
.cs-pack.on{border-color:var(--sun);box-shadow:0 0 0 1px var(--sun)}
.cs-pv{display:flex;align-items:baseline;flex-wrap:wrap;gap:0 5px;min-width:0}
.cs-pv b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.cs-pv span{font-size:12px;color:var(--muted)}
.cs-tag{position:absolute;top:-8px;right:10px;font:700 9.5px/1 var(--ui);letter-spacing:.05em;text-transform:uppercase;padding:4px 7px;border-radius:999px;background:var(--sun);color:#000;white-space:nowrap}
.cs-tag.dim{background:var(--card2);color:var(--muted);border:1px solid var(--hair2)}
.cs-buy{height:34px;border-radius:9px;border:1px solid var(--hair2);background:transparent;color:var(--ink);font-weight:700;font-size:13px;font-variant-numeric:tabular-nums;cursor:pointer;transition:border-color .12s,background .12s}
.cs-buy:hover{border-color:var(--ink)}
.cs-pack.on .cs-buy{background:var(--sun);border-color:var(--sun);color:#000}
.cs-pack.on .cs-buy:hover{filter:brightness(1.06)}
.cs-buy:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.cs-buy:disabled{opacity:.6;cursor:default}
/* the top plan's top tier: the packs lead, bigger, with one primary button for the picked pack */
.cs-top.lead{border-top:0;padding-top:0}
.cs-top.lead .cs-toph h3{font:400 24px/1 var(--disp);text-transform:uppercase}
.cs-top.lead .cs-pack{padding:14px 12px 12px 14px}
.cs-top.lead .cs-pv b{font-size:24px}
.pr-cta.cs-packgo{margin-top:14px;max-width:360px;background:var(--sun);color:#000;box-shadow:0 10px 30px -14px var(--sun)}
.cs-packnote{margin:0;padding:12px 14px;border-radius:12px;border:1px dashed var(--hair2);font-size:12.5px;color:var(--muted)}

/* the foot: See all plans · Billing, the legal line */
.cs-foot{display:flex;align-items:baseline;flex-wrap:wrap;gap:6px 10px;font-size:13px;color:var(--muted)}
.cs-link{color:var(--ink);font-weight:600;text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--hair2)}
.cs-link:hover{text-decoration-color:var(--ink)}
.cs-foot .blegal{flex:1 1 100%;margin:2px 0 0;font-size:12px}

/* between a laptop and a phone: the cards two across */
@media (max-width:1100px) and (min-width:761px){.cs-n4 .cs-cards,.cs-n3 .cs-cards{--n:2}.cs-packs{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-height:860px) and (min-width:761px){.cs-card .pr-sub{min-height:0}#credsheet .cs-sheet{gap:12px;padding-top:20px}.cs-hl .aih{font-size:32px}}
/* one plan card (the top plan's bigger tiers): the card on the left, the packs a list beside it */
@media (min-width:761px){
  #credsheet .cs-sheet.cs-n1{display:grid;grid-template-columns:340px minmax(0,1fr);column-gap:22px;row-gap:16px;align-items:start}
  .cs-n1 .cs-head,.cs-n1 .cs-foot{grid-column:1/-1}
  .cs-n1 .cs-cards{max-width:none;grid-column:1}
  .cs-n1 .cs-top{grid-column:2;border-top:0;padding-top:0}
  .cs-n1 .cs-packs{grid-template-columns:1fr;gap:10px}
  .cs-n1 .cs-pack{flex-direction:row;align-items:center;justify-content:space-between;padding:10px 10px 10px 14px}
  .cs-n1 .cs-pack .cs-tag{top:-8px}
  .cs-n1 .cs-buy{flex:0 0 112px}
}
.cs-top.lead .cs-pv{flex-direction:column;align-items:flex-start;gap:0}