/* The public pricing page (/pricing). Tokens only; the segmented control is the system's
   `.seg`, here made of links so it works without script. */
.pricing{padding-block:var(--s7) var(--s9)}
.pricing-head{max-width:var(--reading-max);margin-inline:auto;text-align:center}
.pricing-head h1{font:var(--t-title1);letter-spacing:var(--k-title1)}
.pricing-lead{margin-top:var(--s2);font:var(--t-body);color:var(--label-2)}
.pricing-seg{max-width:18rem;margin:var(--s6) auto 0}
.pricing-seg a{flex:1 1 0;min-width:0;color:var(--label);position:relative}
.pricing-seg a::before{content:"";position:absolute;inset:-4px 0}
.pricing-seg a:hover{text-decoration:none}
.pricing-seg a span{padding-block:var(--s3)}
.pricing-seg a[aria-current] span{background:var(--bg-elev);box-shadow:var(--shadow-thumb)}
.pricing-seg a:focus-visible{outline:none}
.pricing-seg a:focus-visible span{outline:2px solid var(--accent);outline-offset:1px}
.pricing-note{margin-top:var(--s3);text-align:center;font:var(--t-footnote);color:var(--label-2)}
.pricing-plans{display:grid;gap:var(--s4);margin-top:var(--s7)}
.pricing-plan{display:flex;flex-direction:column;gap:var(--s2);padding:var(--s6) var(--s5);background:var(--bg-2);border-radius:var(--r-l)}
.pricing-plan h2{font:var(--t-title3);letter-spacing:var(--k-title3)}
.pricing-desc{font:var(--t-subhead);color:var(--label-2)}
.pricing-price{margin-top:var(--s3)}
.pricing-price strong{font:var(--t-title1);letter-spacing:var(--k-title1);font-variant-numeric:tabular-nums}
.pricing-price span{font:var(--t-subhead);color:var(--label-2)}
.pricing-sub{min-height:1.25rem;font:var(--t-footnote);color:var(--label-2)}
.pricing-save{display:inline-block;padding:0 var(--s2);border-radius:var(--r-xs);background:var(--accent-tint);color:var(--accent);font-weight:600}
.pricing-list{flex:1;margin-block:var(--s3) var(--s4);border-top:var(--hairline) solid var(--separator)}
.pricing-list li{padding-block:var(--s2);border-bottom:var(--hairline) solid var(--separator);font:var(--t-subhead)}
.pricing-fine{max-width:var(--reading-max);margin:var(--s7) auto 0;text-align:center;font:var(--t-footnote);color:var(--label-2)}
.pricing-fine p + p{margin-top:var(--s2)}
@media (min-width: 48rem){.pricing-plans{grid-template-columns:repeat(auto-fit, minmax(15rem, 1fr))}}