/* /pricing · page scoped CSS (prefix pg-pricing-). Spacing between shared blocks, the arithmetic table and the twelve months plate
   (fig. 02, now the shared .cy-months). Every block style lives in css/components.css or the landing S6
   (sections/s6-pricing.css); nothing here restyles a cy- or price- class except through a pg-pricing- parent for spacing.
   Promoted on 27 Sep: the plan bands (.cy-gate--banded, .cy-gate__band), the marks (.cy-yes, .cy-no), table row groups
   (.cy-table__group), the phone pair layout (.cy-table--pair); the S6 phone currency chip fix is in sections/s6-pricing.css. */

/* ------------------------------------------------------------------ top: the landing S6 section is the page hero */
/* hero rhythm (as .cy-phero): short top padding, the H1 at the page H1 size, a lead, then the plan box */
.pg-pricing-top{padding-top:clamp(40px,5svh,64px)}
.pg-pricing-top .price-kicker{margin-bottom:28px}
.pg-pricing-lead{max-width:40em;margin-top:32px;color:var(--s-ink)}
.pg-pricing-lead-2{color:var(--s-ink-2)}
.pg-pricing-top .price-box{margin-top:48px}
/* 28 Sep: the fade line reads "Proof is CHF 9 per Mac a month.", so from 768 up the H1 is set 10% under the page H1 size (84px at
   most), which keeps it on two lines at 1024, 1440 and 1920 in every currency */
@media (min-width:768px){.pg-pricing-h1{font-size:min(calc(var(--pg-h1) * .9),84px)}}
.pg-pricing-under{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 32px;margin-top:14px}
.pg-pricing-under .price-more{margin-top:0}
@media (max-width:767px){
  .pg-pricing-top{padding-top:28px}
  .pg-pricing-top .price-kicker{margin-bottom:20px}
  .pg-pricing-lead{margin-top:22px;font-size:17px;line-height:1.5}
  .pg-pricing-top .price-box{margin-top:32px}
  .pg-pricing-under{flex-direction:column-reverse;align-items:flex-start;margin-top:20px}
}

/* ------------------------------------------------------------------ why: the second split label sits one paragraph gap down */
.pg-pricing-why__paid{margin-top:36px}

/* ------------------------------------------------------------------ the arithmetic: table left, the twelve months plate right */
.pg-pricing-math{display:grid;grid-template-columns:repeat(var(--pg-cols),minmax(0,1fr));column-gap:var(--pg-gap);row-gap:52px;align-items:start}
.pg-pricing-math__table{grid-column:1/span 7}
.pg-pricing-math__fig{grid-column:9/span 4}
.pg-pricing-mathtable thead tr:first-child th,.pg-pricing-mathtable thead tr:first-child td{padding-bottom:8px;border-bottom:0}
.pg-pricing-mathtable__group{color:var(--s-ink);box-shadow:inset 0 -1px 0 var(--pg-rule)}
.pg-pricing-mathtable__group--year{box-shadow:inset 0 -1px 0 #794DFF}
.pg-pricing-mathtable thead tr+tr th{padding-top:10px}
.pg-pricing-mathtable tbody td{font-size:20px;line-height:1.35}
@media (max-width:1179px){.pg-pricing-math__table{grid-column:1/-1}.pg-pricing-math__fig{grid-column:1/span 7}}
@media (max-width:899px){.pg-pricing-math__fig{grid-column:1/-1}}

/* the twelve months plate (fig. 02) is the shared .cy-months (promoted 28 Sep, also on /for/solo) */

/* ------------------------------------------------------------------ trial */
.pg-pricing-trial__note{margin-top:28px}

/* ------------------------------------------------------------------ every line: the Proof plan column marks in iris, the price row in ink */
.pg-pricing-compare td:last-child{--cy-hue:#794DFF}
.pg-pricing-compare__price th,.pg-pricing-compare__price td{font-weight:500;color:var(--s-ink)}
.pg-pricing-compare__foot{max-width:64ch;margin-top:20px;font-size:14px;line-height:1.5;color:var(--s-ink-3)}

/* ------------------------------------------------------------------ when payment stops */
.pg-pricing-stops{background:var(--s-bg);padding-inline:32px}
.pg-pricing-stops__links{margin-top:28px}
@media (max-width:767px){.pg-pricing-stops{padding-inline:20px}}