/* Plans, the minutes meter and plan banners */
.plans{display:grid;gap:14px;grid-template-columns:minmax(0,1fr);margin:16px 0}
@media (min-width:700px){.plans{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1180px){.plans{grid-template-columns:repeat(4,minmax(0,1fr))}}
.plan{position:relative;display:flex;flex-direction:column;gap:10px;background:var(--cw-surface);border:1px solid var(--cw-line);border-radius:18px;padding:22px 20px 20px}
.plan.pop{border-color:var(--cw-accent);box-shadow:0 0 0 1px var(--cw-accent)}
.plan.now{background:color-mix(in srgb,var(--cw-accent) 8%,var(--cw-surface))}
.plan.want:not(.pop){border-color:var(--cw-accent)}
.plan h3{margin:0;font:600 24px var(--serif)}
.plan .price{margin:0;display:flex;align-items:baseline;gap:4px}.plan .price b{font:600 30px var(--sans);letter-spacing:-.01em}.plan .price span{color:var(--cw-muted);font-size:14px}
.pf{list-style:none;margin:6px 0 8px;padding:0;display:grid;gap:8px;flex:1;font-size:14.5px}
.pf li{position:relative;padding-left:22px}.pf li::before{content:"";position:absolute;left:2px;top:.55em;width:10px;height:6px;border-left:2px solid var(--cw-accent);border-bottom:2px solid var(--cw-accent);transform:translateY(-60%) rotate(-45deg)}
.plan button,.plan .btn{width:100%;justify-content:center;text-align:center}
.ptag,.ptag2{position:absolute;top:-11px;left:16px}.ptag2{left:auto;right:16px}
.fine{margin:8px 0 0;padding-left:18px;display:grid;gap:8px;color:var(--cw-muted);font-size:14px}.fine b{color:var(--cw-ink)}
.meter{display:block;height:8px;border-radius:99px;background:color-mix(in srgb,var(--cw-ink) 12%,transparent);overflow:hidden;margin-top:8px}.meter i{display:block;height:100%;background:var(--cw-accent);border-radius:99px;min-width:2px}
.planlink{display:block;text-decoration:none;color:inherit}.planlink b{display:block}.planlink small{display:block;color:var(--cw-muted)}.planlink:hover b{color:var(--cw-accent)}
.planbanner{display:flex;gap:14px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px;border-color:var(--cw-accent)}
.planbanner>div{min-width:220px;flex:1}
.style.locked{opacity:.6}.chip.lock{font-size:11px}
/* Pricing on the home page */
.pricing{padding:56px 0}.pricing .plans{margin:28px 0 12px}.pricing .center{text-align:center}.pricing .note{text-align:center;color:var(--cw-muted);font-size:14px;margin:12px auto 0;max-width:62ch}

/* The "Your month" card on the dashboard */
.monthcard .mc-big{margin:10px 0 0;font-size:15px;color:var(--cw-muted)}.monthcard .mc-big b{font:600 34px var(--serif);color:var(--cw-ink);letter-spacing:-.01em}
.mc-rows{list-style:none;margin:16px 0;padding:0;display:grid;gap:0;border-top:1px solid var(--cw-line)}
.mc-rows li{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--cw-line);font-size:14px}.mc-rows li span{color:var(--cw-muted)}.mc-rows li b{text-align:right;min-width:0;overflow-wrap:anywhere}
.monthcard .row{display:flex;flex-wrap:wrap;gap:10px}
.plans button:disabled,.yourplan button:disabled{opacity:.45;cursor:not-allowed}