/* THE PRICING KIND, lifted from the approved example on the board, rebrand/pages/src/price-everfit.html (a4fdc4d),
   where it sat inside the page. Shared by the rival pricing pages and the calculator; the calculator's own rules stay in its page. */
/* ---------- the pricing kind (shared by every rival pricing page and the calculator) ---------- */
/* the opening: words on the left, the short answer card on the right, like the pricing page's calculator */
.pr-hero .wrap{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:clamp(28px,4.4vw,80px);align-items:center}
.pr-hero h1{max-width:15ch}
.pr-hero .lead{max-width:40em}
.pr-hero .note a{color:inherit;text-decoration-color:rgba(14,14,16,.35);text-underline-offset:2px}
.pr-hero .crumbs [aria-current]{color:var(--ink)}
.pr-card{gap:14px}
.pr-card > h2{margin:0;font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-0.015em;line-height:1.15}
.pr-card > .note{margin-top:-6px}
.pr-more{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;min-height:36px;font-family:var(--display);font-weight:700;font-size:15px;color:var(--ink);text-decoration:underline;text-decoration-color:var(--sun);text-decoration-thickness:3px;text-underline-offset:4px}
.pr-more svg{transition:transform .25s var(--ease)}
.pr-more:hover svg{transform:translateX(4px)}
@media (max-width:980px){.pr-hero .wrap{grid-template-columns:minmax(0,1fr)}.pr-hero h1{max-width:18ch}}

/* bars: grey for the others, sun for us, every bar named and priced in words (the colours alone are too faint on white) */
.sa-g{display:flex;flex-direction:column;gap:6px;padding-top:12px;border-top:1px solid var(--line)}
.sa-n{margin:0 0 2px;font-family:var(--display);font-weight:800;font-size:15px}
.sa-r{display:grid;grid-template-columns:76px minmax(0,1fr);align-items:center;gap:12px;font-size:14.5px}
.sa-r > span:first-child{font-weight:600;color:var(--ink-2)}
.sa-b{display:flex;align-items:center;gap:10px;min-width:0;min-height:28px;border-left:1px solid #CFCFC8}
.sa-b i{flex:none;height:18px;width:calc((100% - 100px) * var(--p));border-radius:0 4px 4px 0;background:#B4B5AE;transition:width .9s var(--ease)}
.sa-r.us .sa-b i{background:var(--sun)}
.sa-r.us > span:first-child{color:var(--ink);font-weight:700}
.js .pr-card:not(.in) .sa-b i{width:0}
.sa-b b{font-family:var(--display);font-weight:800;font-size:16px;white-space:nowrap}

/* the long read's pieces; the article may shrink below a wide table's width, so the table scrolls in its own box on a phone */
.art-side > .art{min-width:0}
.art .tcap{margin-bottom:-.5em;font-size:14.5px;line-height:1.45;color:var(--muted)}
.art .tcap b{font-family:var(--display);font-weight:800;color:var(--ink)}
.art .tbl td,.art .tbl th{font-variant-numeric:tabular-nums}
.pr-two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;align-items:start}
.pr-two .tcap{margin:0 0 10px}
.pr-wide{min-width:640px}
.art h3.pr-h3{margin-top:1.4em}
@media (max-width:700px){.pr-two{grid-template-columns:minmax(0,1fr);gap:26px}}

/* the add-ons they sell, set out like a bill */
.pr-bill{border-radius:18px;background:#fff;box-shadow:0 0 0 1px #E6E6DF;overflow:hidden}
.pr-bill > div{padding:16px 20px 18px;border-top:1px solid #EDEDE7}
.pr-bill > div:first-child{border-top:0}
.bill-top{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:6px 16px}
.bill-top b{font-family:var(--display);font-weight:800;font-size:18px;line-height:1.25}
.bill-top span{font-family:var(--display);font-weight:700;font-size:14.5px;line-height:1.3;padding:4px 10px;border-radius:9px;background:#F1F1EC;max-width:100%}
.pr-bill p{margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2)}

/* the sums at each size, as receipts */
.pr-rc3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;align-items:stretch}
.pr-rc{border-radius:18px;background:#fff;box-shadow:0 0 0 1px #E6E6DF;padding:16px 18px 0;display:flex;flex-direction:column;overflow:hidden}
.pr-rc .rc-h{margin:0 0 4px;font-family:var(--display);font-weight:800;font-size:19px}
.pr-rc .rl{font-size:14.5px;line-height:1.35;padding:6px 0}
.pr-rc .rl b{font-size:15.5px}
.pr-rc .rc-t{margin-top:auto;padding-top:10px;border-top:1.5px solid var(--ink)}
.pr-rc .rl:nth-last-child(3){margin-bottom:6px}
.pr-rc .rc-t span{font-weight:700;color:var(--ink)}
.pr-rc .rc-us{margin:12px -18px 0;padding:12px 18px 14px;background:#FFF4CC}
.pr-rc .rc-us span{font-weight:700;color:var(--ink)}
@media (max-width:860px){.pr-rc3{grid-template-columns:minmax(0,1fr)}}

/* a clip from the app, inside the read */
.pr-fig{margin:0}
.pr-fig .duo-media{aspect-ratio:12/5;border-radius:20px;background:#EDEBE3}
.pr-fig figcaption{margin-top:10px;font-size:14.5px;line-height:1.5;color:var(--muted)}
@media (max-width:640px){.pr-fig .duo-media{aspect-ratio:4/3}}

/* the terms, as short facts */
.pr-terms{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 26px}
.pr-terms div{border-top:3px solid var(--ink);padding-top:12px}
.pr-terms b{display:block;font-family:var(--display);font-weight:800;font-size:18px;line-height:1.2}
.pr-terms p{margin:6px 0 0;font-size:16px;line-height:1.55;color:var(--ink-2)}
@media (max-width:700px){.pr-terms{grid-template-columns:minmax(0,1fr)}}

/* how Evobody prices: one price, no add-ons, Evo SI optional */
.pr-how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.pr-how > div{border-radius:20px;padding:18px 18px 20px;background:#F6F6F1;display:flex;flex-direction:column;gap:6px}
.pr-how > div.pick{background:#FFE88C}
.pr-how small{font-family:var(--display);font-weight:800;font-size:15px}
.pr-how .big{font-family:var(--display);font-weight:900;font-size:clamp(34px,3vw,46px);line-height:.95;letter-spacing:-0.035em}
.pr-how .big em{font-style:normal;font-size:.36em;font-weight:700;letter-spacing:0;margin-left:5px}
.pr-how p{margin:4px 0 0;font-size:15px;line-height:1.5;color:var(--ink-2)}
@media (max-width:760px){.pr-how{grid-template-columns:minmax(0,1fr)}}
.pr-onward{margin-top:2.2em;font-family:var(--display);font-weight:800;font-size:20px}
.pr-onward + .next-cards{margin-top:14px}