/* /pricing/ (WS-698 (7), WS-707, WS-736). Phone first (W-115): the hero is short so the first plan card's name sits on
   the first 375x667 screen; cards stack one per row, two from 600px, four from 1100px. The comparison table (exhibit
   P-1, a figure.plate with the X1 signature, WS-720) reflows below 700px: each feature takes its own row and the four
   plans sit under it in four columns, each cell naming its plan (data-plan; the header row is hidden there), so the page never scrolls sideways. */
.pr-hero{padding-bottom:16px}
.pr-hero h1{max-width:22ch}
.pr-hero .standfirst{margin-top:12px}
@media (max-width:599px){
  .pr-hero{padding-top:20px}
  .pr-hero .standfirst{font-size:16px;line-height:1.45}
}

.pr-plans{padding-top:8px}
.pr-cards{display:grid;gap:16px}
.pr-card{display:flex;flex-direction:column;gap:8px;background:var(--white);border:1px solid var(--hair);border-top:3px solid var(--ink);padding:20px}
.pr-card#plan-pro{border-top-color:var(--verm)}
.pr-name{font:600 22px/1.2 var(--serif);margin:0}
.pr-who{font:600 11px/1.3 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--graphite)}
.pr-price{margin-top:4px;font:600 15px/1.3 var(--sans);color:var(--graphite)}
.pr-price .num{font-family:var(--mono);font-weight:500;font-size:26px;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;margin-right:4px}
.pr-alt{font-size:14px;color:var(--graphite)}
.pr-when{font:600 14px/1.4 var(--sans);color:var(--ink)}
.pr-text{font-size:15.5px;line-height:1.5;text-wrap:pretty}
.pr-per{white-space:nowrap}
.pr-cta{margin-top:auto;padding-top:8px}
.pr-line{font-size:13.5px;line-height:1.45;color:var(--graphite)}
@media (min-width:600px){.pr-cards{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.pr-cards{grid-template-columns:repeat(4,1fr)}.pr-price .num{font-size:22px}}

/* exhibit P-1: the table inside the plate */
.pr-plate{margin-top:8px}
.pr-tbl{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.4}
.pr-tbl th,.pr-tbl td{text-align:left;vertical-align:top;padding:10px 10px 10px 0;border-bottom:1px solid var(--hair)}
.pr-tbl thead th{font:600 11px/1.2 var(--sans);letter-spacing:.12em;text-transform:uppercase;color:var(--ink);border-bottom:1px solid var(--ink)}
.pr-tbl tbody th{font-weight:600;color:var(--ink);width:30%}
.pr-tbl .pr-price-row td{font-weight:600}
.pr-tbl .pr-price-row .num{font-family:var(--mono);font-weight:500;font-size:15px;display:block}
.pr-yes{font-weight:600;color:var(--ink)}
.pr-no{color:var(--graphite)}
.pr-tax{margin-top:12px}
@media (max-width:699px){
  .pr-tbl,.pr-tbl thead,.pr-tbl tbody{display:block}
  .pr-tbl tr{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));column-gap:8px;border-bottom:1px solid var(--hair);padding:8px 0}
  .pr-tbl thead tr{border-bottom:1px solid var(--ink);padding-top:0}
  .pr-tbl .pr-corner{display:none}
  .pr-tbl tbody th{grid-column:1 / -1;width:auto;padding:0 0 4px}
  .pr-tbl th,.pr-tbl td{border-bottom:0;padding:0;font-size:12.5px;overflow-wrap:break-word;hyphens:auto}
  .pr-tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:-1px;padding:0;border:0}
  .pr-tbl td::before{content:attr(data-plan);display:block;font:600 10px/1.3 var(--sans);letter-spacing:0;color:var(--graphite);hyphens:none;overflow-wrap:anywhere}
  .pr-tbl .pr-price-row .num{font-size:12.5px;white-space:normal}
}

.pr-faq{display:grid;gap:20px;max-width:var(--measure)}
.pr-q h3{font:600 17px/1.35 var(--sans);margin:0 0 4px}
.pr-q p{line-height:1.55}
.pr-contact{margin-top:24px}