/* ============================================================================
   WELL RUN · SIGNAL SYSTEM — WR SCORE · PRICING
   Design's page, approved by the owner 25 Oct 10:29 (owner/proposal-1025-pricing): the opening, Free · Club · Pro ·
   Ultra in one panel (Ultra the black column), every feature plan by plan, the terms of every plan, and League on its
   own band in Docs' words (S19). The white press is Signal Press's .wr-btn--white.
   ============================================================================ */

.pp-wrap { max-width: var(--wr-max-width); margin: 0 auto; padding: 0 var(--wr-pad-x); }
.pp-ic { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pp-top { padding: calc(var(--wr-nav-height) + 72px) 0 40px; }
.pp-top__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; }
.pp-top h1 { margin: 0; } .pp-top p { margin: 0 0 6px; }
.pp-h2 { font-size: var(--sch-t-h2); font-weight: 800; letter-spacing: -.01em; line-height: 1.05; margin: 0 0 12px; }
.pp-lead { margin: 0 0 32px; color: var(--wr-ui-mid); max-width: 40em; }
.pp-sec { padding: 56px 0; }
/* the plans: one panel, four columns parted by rounded dividers; Ultra, the best, is the black one */
.pp-panel { background: var(--sch-panel); border-radius: var(--wr-radius-card); padding: 12px; }
.pp-plans { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); list-style: none; margin: 0; padding: 0; }
.pp-plan { position: relative; padding: 30px 26px 30px; display: flex; flex-direction: column; }
.pp-plan + .pp-plan::before { content: ''; position: absolute; left: -1px; top: 28px; bottom: 28px; width: 2px; border-radius: 1px; background: var(--wr-black-08); }
.pp-plan.is-best { background: var(--wr-black); color: var(--wr-white); border-radius: calc(var(--wr-radius-card) - 8px); }
.pp-plan.is-best::before { display: none; }
.pp-plan__name { font-size: 22px; font-weight: 800; margin: 0; }
.pp-plan__price { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 0; }
.pp-plan__price b { font-size: 52px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.pp-plan__per { font-size: 15px; font-weight: 600; color: var(--wr-ui-muted); }
.pp-plan__year { font-size: 14px; font-weight: 600; color: var(--wr-ui-muted); margin: 6px 0 0; }
.pp-plan__who { font-size: 15.5px; font-weight: 600; margin: 16px 0 0; min-height: 2.9em; color: var(--wr-ui-mid); }
.pp-plan.is-best :is(.pp-plan__per, .pp-plan__year, .pp-plan__who, .pp-from) { color: var(--wr-white-65); }
.pp-live { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 0; padding: 14px 0; position: relative; font-size: 15px; font-weight: 700; }
.pp-live b { font-size: 26px; font-weight: 800; }
.pp-live::after { content: ''; position: absolute; bottom: 0; height: .7rem; border-bottom: 1.5px solid var(--wr-black-10); border-radius: 0 0 .7rem .7rem; left: 0; right: 0; }

.pp-plan.is-best .pp-live::after { border-bottom-color: var(--wr-white-16); }
.pp-from { font-size: 13.5px; font-weight: 600; color: var(--wr-ui-muted); margin: 16px 0 6px; min-height: 1.2em; }
.pp-feats { list-style: none; margin: 0 0 28px; padding: 0; flex: 1; }
.pp-feat { display: flex; align-items: center; gap: 12px; padding: 9px 0; font-size: 15.5px; font-weight: 600; }
.pp-feat .pp-ic { color: var(--wr-orange); }
.pp-plan.is-best .pp-feat .pp-ic { color: var(--wr-orange); }
.pp-plan .wr-btn { align-self: stretch; justify-content: center; max-width: 100%; padding-left: 14px; padding-right: 14px; font-size: 12.5px; letter-spacing: .04em; gap: 8px; }
.pp-already { text-align: center; margin: 22px 6px 0; font-size: 15px; color: var(--wr-ui-mid); }
.pp-already a { color: var(--wr-orange); font-weight: 700; text-decoration: none; }
/* the full list: one panel; a group's name, then its rows parted by rounded dividers; Ultra's column on black */
.pp-cmp { background: var(--sch-panel); border-radius: var(--wr-radius-card); padding: 22px 30px 30px; --ucol: calc(100% / 5.5); }
.pp-cmp__row { position: relative; display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(4, minmax(0, 1fr)); align-items: center; min-height: 48px; font-size: 15px; }
.pp-cmp__row > span { padding: 12px 10px; text-align: center; color: var(--wr-ui-dark); font-weight: 600; }
.pp-cmp__row > span:first-child { text-align: left; padding-left: 0; }
.pp-cmp__row > span:last-child { color: var(--wr-white); }
/* G35, the app's rounded divider: a line under each row whose ends curve up (.7rem); the last row has one too (G35 on the Mac) */
.pp-cmp__row::before { content: ''; position: absolute; bottom: 0; height: .7rem; border-bottom: 1.5px solid var(--wr-black-10); border-radius: 0 0 .7rem .7rem; left: 0; right: calc(var(--ucol) + 14px); }
/* the same rounded divider carries on inside Ultra's black block, in white */
.pp-cmp__row::after { content: ''; position: absolute; bottom: 0; height: .7rem; border-bottom: 1.5px solid var(--wr-white-16); border-radius: 0 0 .7rem .7rem; right: 14px; width: calc(var(--ucol) - 28px); }
.pp-cmp__row .is-no { color: var(--wr-ui-muted); font-weight: 400; }
.pp-cmp__row > span:last-child.is-no { color: var(--wr-white-45); }
.pp-cmp__row .pp-ic { width: 20px; height: 20px; color: var(--wr-orange); stroke-width: 2.2; vertical-align: middle; }
/* the plans' names; Ultra's on its black pill */
.pp-cmp__head { font-size: 17px; font-weight: 800; min-height: 56px; }
.pp-cmp__head > span:last-child { background: var(--wr-black); border-radius: 12px; align-self: stretch; display: grid; place-items: center; }
/* each group is its own block, set apart by space; Ultra's column runs black down the block */
.pp-cmp__g { margin-top: 36px; }
.pp-cmp__rows { position: relative; isolation: isolate; }
.pp-cmp__rows::after { content: ''; position: absolute; z-index: -1; right: 0; top: 0; bottom: -12px; width: var(--ucol); border-radius: 14px; background: var(--wr-black); }
.pp-cmp__gt { margin: 0 0 8px; padding: 16px 0 8px; font-size: 18px; font-weight: 800; color: var(--wr-ui-dark); width: calc(100% - var(--ucol) - 14px);
  position: relative; }
.pp-cmp__gt::after { content: ''; position: absolute; bottom: 0; height: .7rem; border-bottom: 1.5px solid var(--wr-black-15); border-radius: 0 0 .7rem .7rem; left: 0; right: 0; }
/* Every plan: one panel of rows */
.pp-terms { background: var(--sch-panel); border-radius: var(--wr-radius-card); padding: 10px 34px; }
.pp-term { position: relative; display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 32px; padding: 20px 0; font-size: 16px; line-height: 1.5; }
.pp-term::before { content: ''; position: absolute; bottom: 0; height: .7rem; border-bottom: 1.5px solid var(--wr-black-10); border-radius: 0 0 .7rem .7rem; left: 0; right: 0; }
.pp-term b { font-weight: 700; } .pp-term span { color: var(--wr-ui-mid); }
/* League: its own section, on the dark band */
/* League: its own section on the dark band. How it works on the left, as icon rows held by rounded dividers; on the
   right the League card, one tone up, with the first licence, the cheaper ones after it, what it holds and the quote press */
.pp-league { background: var(--wr-hero); color: var(--wr-white); padding: 96px 0; margin: 40px 0; }
.pp-league .pp-lead { color: var(--wr-white-65); }
.pp-league__grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: 72px; align-items: start; }
.pp-how { list-style: none; margin: 8px 0 0; padding: 0; }
.pp-how > li { position: relative; display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 4px 18px; padding: 20px 16px 24px; }
.pp-how > li::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: .7rem; border-bottom: 1.5px solid var(--wr-white-16); border-radius: 0 0 .7rem .7rem; }
.pp-how__ic { grid-row: span 2; width: 28px; height: 28px; display: grid; place-items: start center; padding-top: 2px; color: var(--wr-orange); }
.pp-how__ic .pp-ic { width: 24px; height: 24px; }
.pp-how b { font-size: 18px; font-weight: 700; } .pp-how span { font-size: 15.5px; line-height: 1.5; color: var(--wr-white-65); }
.pp-lcard { --pp-lcard: color-mix(in srgb, var(--wr-white) 8%, var(--wr-hero)); --wr-btn-surface: var(--pp-lcard); background: var(--pp-lcard); border-radius: var(--wr-radius-card); padding: 34px 34px 30px; }
.pp-lcard__name { margin: 0; font-size: 22px; font-weight: 800; }
.pp-lcard__price { display: flex; align-items: baseline; gap: 10px; margin: 14px 0 0; }
.pp-lcard__price b { font-size: 56px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.pp-lcard__price span, .pp-lcard__sub { font-size: 15px; font-weight: 600; color: var(--wr-white-65); }
.pp-lcard__sub { margin: 22px 0 4px; }
.pp-ladder { list-style: none; margin: 0 0 22px; padding: 0; }
.pp-ladder li { position: relative; display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 18px; font-size: 15.5px; font-weight: 600; }
.pp-ladder li::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: .7rem; border-bottom: 1.5px solid var(--wr-white-16); border-radius: 0 0 .7rem .7rem; }
.pp-ladder b { font-size: 24px; font-weight: 800; }
.pp-lcard .pp-feats { margin: 0 0 26px; display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.pp-lcard .pp-feat .pp-ic { color: var(--wr-orange); }

.pp-lcard .wr-btn { width: 100%; justify-content: center; --wr-btn-surface: var(--pp-lcard); }
.pp-lcard__more { display: block; text-align: center; margin-top: 16px; }
.pp-league .wr-btn--link { color: var(--wr-white); }
/* inside the rounded divider: a row's content stands in from the curve's ends and clear above the line */
.pp-cmp__row > span:first-child { padding-left: 16px; }
.pp-cmp__row > span { padding-bottom: 15px; }
.pp-cmp__gt { padding-left: 16px; padding-bottom: 12px; }
.pp-term { padding-left: 16px; padding-right: 16px; padding-bottom: 22px; }
.pp-live { padding-left: 14px; padding-right: 14px; padding-bottom: 16px; }
@media (max-width: 1024px) {
  /* the phone: a row's name and a group's heading centred over the white side, above its three values */
  .pp-cmp__row > span:first-child { padding-left: 0; text-align: center; }
  .pp-cmp__gt { text-align: center; width: calc(100% - var(--ucol)); padding-left: 8px; padding-right: 0; }
  .pp-cmp__gt::after { right: 8px; }
  .pp-cmp__row > span { padding-bottom: 13px; }
  .pp-cmp__gt { padding-left: 8px; }
}
/* the plans' press: white, black words, a soft lift so it reads on the white panel (Website adds it to Signal Press) */
.pp-plan .wr-btn--white { padding: 15px 14px; font-weight: 600; }
@media (max-width: 1024px) {
  .pp-top__grid, .pp-league__grid { grid-template-columns: 1fr; gap: 24px; }
  .pp-lcard { padding: 26px 22px 24px; }
  .pp-lcard__price { flex-wrap: wrap; }
  .pp-lcard__price span { flex-basis: 100%; }
  .pp-lcard .pp-feats { grid-template-columns: 1fr; }
  .pp-how > li { padding-left: 8px; padding-right: 8px; }
  .pp-plans { grid-template-columns: 1fr; }
  .pp-plan.is-best { order: -1; }
  .pp-plan + .pp-plan::before { left: 26px; right: 26px; top: -1px; bottom: auto; width: auto; height: 2px; }
  .pp-plan__who, .pp-from { min-height: 0; }
  .pp-feats { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
  .pp-cmp { padding: 14px 16px 22px; --ucol: 25%; }
  .pp-cmp__row { grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: 13.5px; }
  .pp-cmp__row > span { padding: 10px 4px; }
  .pp-cmp__row > span:first-child { grid-column: 1 / span 3; padding: 14px 0 0; font-size: 14.5px; }
  .pp-cmp__row > span:not(:first-child) { grid-row: 2; }
  .pp-cmp__head > span:first-child { display: none; }
  .pp-cmp__head > span:not(:first-child) { grid-row: 1; }
  .pp-cmp__head { font-size: 14.5px; min-height: 46px; }
  .pp-cmp__row::before { right: calc(var(--ucol) + 8px); }
  .pp-cmp__row::after { right: 8px; width: calc(var(--ucol) - 16px); }
  .pp-cmp__g { margin-top: 28px; }
  .pp-cmp__gt { font-size: 16.5px; width: calc(100% - var(--ucol) - 8px); }
  .pp-term, .pp-league .pp-term { grid-template-columns: 1fr; gap: 4px; }
}
@media (max-width: 480px) {
  .pp-top { padding-top: calc(var(--wr-nav-height) + 40px); }
  .pp-panel { padding: 8px; } .pp-plan { padding: 24px 22px; } .pp-terms { padding: 6px 22px; }
  .pp-plan__price b { font-size: 46px; }
}
/* Q189's extra place, one short line under the ladder (Architect 12:36) */
.pp-lcard__extra { margin: -10px 0 22px; padding: 0 16px; font-size: 14px; font-weight: 600; color: var(--wr-white-65); }