/* Prices. A rate board: each thing we sell in its own band, the phone standing on that band's word (the words of the
   home page: seen, answered, found), the prices set large enough to read across a room. Then the bundles, with the
   example site each one buys standing behind its card; four plain answers on the night; the calculator last. */

/* The head: the h1 as big as the page allows, one sentence beside it, the first band's prices already in view. */
.pr-head { padding: clamp(20px, 3.4vh, 40px) 0 clamp(20px, 3vh, 34px); }
.pr-head__in { display: grid; grid-template-columns: auto minmax(0, 470px); justify-content: space-between; align-items: end; gap: var(--s3) var(--s5); }
.pr-head h1 { font-size: clamp(76px, 11.4vw, 184px); font-weight: 900; line-height: .8; letter-spacing: -0.015em; }
.pr-head__lede { font: 500 clamp(18px, 1.35vw, 21px)/1.45 var(--text); padding-bottom: .3em; }

/* The section bar: the page's four parts, a marker under the one in view. */
.pr-bar { position: sticky; top: var(--head); z-index: 20; background: var(--bone); box-shadow: 0 1px 0 var(--hair); }
.pr-bar__in { position: relative; display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.pr-bar__in::-webkit-scrollbar { display: none; }
.calc__now { display: none; }
.pr-bar a { flex: none; display: inline-flex; align-items: center; min-height: 52px; padding: 0 16px; color: var(--slate); font: 700 16px/1 var(--text); text-decoration: none; transition: color .2s var(--ease); }
.pr-bar a:first-child { padding-left: 0; }
.pr-bar a:hover, .pr-bar a[aria-current="true"] { color: var(--ink); }
.pr-bar__mark { position: absolute; left: 0; bottom: 0; height: 3px; width: var(--w, 0); background: var(--signal); translate: var(--x, 0) 0; transition: translate .4s var(--ease), width .4s var(--ease); pointer-events: none; }

/* A band. The picture side (the phone on its word) and the body (title, rows, how it is paid, one door). */
.rate {
  --pad: max(var(--gutter), (100% - var(--wrap)) / 2);
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 0 clamp(36px, 5.5vw, 104px);
  padding: clamp(56px, 8.5vh, 96px) var(--pad); overflow: clip;
}
.rate--site { background: var(--bone); padding-top: clamp(36px, 5vh, 56px); }
.rate--desk { background: var(--night); color: var(--on-dark); grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
.rate--desk .rate__pic { order: 2; }
.rate--found { background: var(--signal); color: var(--ink); }

.rate__pic { position: relative; container-type: inline-size; display: grid; align-content: center; justify-items: center; }
.rate__phone { position: relative; z-index: 1; width: min(96cqi, 470px); margin-bottom: -6cqi; }
.rate__word { position: relative; z-index: 0; order: 2; width: 100%; margin-top: calc(-1 * var(--rise, 34cqi)); font: 900 var(--fit, 40cqi)/.8 var(--display); text-transform: uppercase; letter-spacing: -0.015em; text-align: center; white-space: nowrap; user-select: none; }
.rate--site .rate__word { --fit: 47cqi; --rise: 30cqi; color: var(--signal); }
.rate--desk .rate__word { --fit: 25.5cqi; --rise: 16cqi; color: var(--signal); }
.rate--found .rate__word { --fit: 39cqi; --rise: 25cqi; color: var(--bone); }

.rate__body { display: grid; align-content: start; gap: 18px; }
.rate__title { font-size: clamp(50px, 5.6vw, 92px); }
.rate__what { max-width: 52ch; color: var(--slate); }
.rate--desk .rate__what { color: var(--on-dark-soft); }
.rate--found .rate__what { color: var(--ink); }
.rate__then { margin-top: 6px; font-weight: 700; }
.rate__fine { margin-top: -10px; color: var(--slate); font-size: 17px; }
.rate .door { justify-self: start; margin-top: 8px; }

/* The rows: the name and what it is on the left, the price large on the right, a hairline between. */
.rows { margin-top: 10px; border-top: 2px solid currentColor; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "name cost" "has cost"; gap: 2px var(--s4); align-items: center; padding: 14px 0 15px; border-bottom: 1px solid var(--hair); }
.rate--desk .row { border-bottom-color: var(--hair-dark); }
.rate--found .row { border-bottom-color: rgba(19, 17, 21, .28); }
.row__name { grid-area: name; align-self: end; font: 800 22px/1.2 var(--text); }
.row__has { grid-area: has; align-self: start; max-width: 46ch; color: var(--slate); font-size: 17px; }
.rate--desk .row__has { color: var(--on-dark-soft); }
.rate--found .row__has { color: var(--ink); }
.rate__egs { color: var(--slate); font-size: 16px; line-height: 1.3; }
.rate__eg { display: inline-block; padding: 12px 6px 12px 0; color: var(--signal-ink); font-weight: 700; text-underline-offset: 4px; }
.rate__eg .num { font-weight: 500; }
.rate__eg:hover { color: var(--ink); }
.row__cost { grid-area: cost; display: flex; align-items: baseline; justify-content: flex-end; gap: 10px; white-space: nowrap; font: 600 17px/1 var(--text); color: var(--slate); }
.row__cost b { font: 900 clamp(56px, 5.4vw, 92px)/.82 var(--display); letter-spacing: -0.01em; color: var(--ink); }
.rate--desk .row__cost { color: var(--on-dark-soft); }
.rate--desk .row__cost b { color: var(--on-dark); }
.rate--found .row__cost { color: var(--ink); }

/* Get found has one price: it is the band's whole board. */
.rows--one .row { padding: 8px 0 14px; }
.rate__jobs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px var(--s3); margin: 4px 0 6px; }
.rate__jobs li { padding-top: 10px; border-top: 2px solid var(--ink); font: 700 18px/1.3 var(--text); }
.rows--one .row__cost b { font-size: clamp(110px, 11vw, 190px); }

/* Bundles: the example site each one buys stands behind its card; Growth, the one we recommend, widest and in the field colour. */
.bundles { padding: var(--s6) 0 var(--s5); background: var(--bone); }
.bundles__head { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: end; gap: var(--s3) var(--s5); }
.bundles__head p { max-width: 36ch; font: 600 20px/1.4 var(--text); }
.bundles__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.42fr) minmax(0, 1fr); gap: var(--s3); align-items: end; }
.bundle { display: grid; justify-items: center; }
.bundle__phone { position: relative; z-index: 0; width: 74%; margin-bottom: -44%; }
.bundle--best .bundle__phone { width: 64%; margin-bottom: -40%; }
.bundle__card { position: relative; z-index: 1; display: grid; align-content: start; gap: 14px; width: 100%; padding: 28px 28px 24px; border-radius: var(--r); background: var(--paper); box-shadow: 0 -18px 30px -24px rgba(19, 17, 21, .5), inset 0 0 0 1px var(--hair); }
.bundle--best .bundle__card { padding: 32px 36px 28px; background: var(--signal); box-shadow: 0 -18px 30px -22px rgba(19, 17, 21, .55); }
.bundle__name { font: 900 clamp(48px, 4.4vw, 68px)/.84 var(--display); text-transform: uppercase; letter-spacing: -0.01em; }
.bundle--best .bundle__name { font-size: clamp(60px, 5.8vw, 92px); }
.bundle__flag { margin-top: -4px; font-weight: 800; }
.bundle__why { margin-top: -10px; max-width: 40ch; }
.pay { display: flex; flex-wrap: wrap; gap: 8px var(--s4); padding: 14px 0 16px; border-block: 1px solid var(--hair); }
.bundle--best .pay { border-color: rgba(19, 17, 21, .3); }
.pay dt { font: 700 14px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.pay dd { margin-top: 6px; font: 900 clamp(52px, 4.6vw, 72px)/.84 var(--display); }
.bundle--best .pay dd { font-size: clamp(64px, 6.2vw, 104px); }
.bundle__h { font: 800 17px/1.2 var(--text); }
.bundle__parts { display: grid; gap: 6px; margin-top: -6px; }
.bundle__part { display: flex; align-items: baseline; gap: 10px; font-size: 17px; }
.bundle__part::before { content: ''; flex: none; width: 10px; height: 3px; translate: 0 -5px; background: var(--signal); }
.bundle--best .bundle__part::before { background: var(--ink); }
.bundle__save { padding-top: 12px; border-top: 1px solid var(--hair); font-size: 17px; }
.bundle--best .bundle__save { border-color: rgba(19, 17, 21, .3); }
.bundle__eg { color: var(--slate); font-size: 15px; }
.bundle--best .bundle__eg { color: var(--ink); }

/* Four plain answers on the night. */
.asks { background: var(--night); color: var(--on-dark); padding: var(--s6) 0; }
.asks__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--s4) var(--s5); }
.asks h2 { font-size: clamp(54px, 6vw, 100px); }
.asks__list { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4) var(--s4); }
.ask { padding-top: 18px; border-top: 2px solid var(--signal); }
.ask dt { font: 800 21px/1.25 var(--text); }
.ask dd { margin: 10px 0 0; color: var(--on-dark-soft); }

/* The calculator: the choices on the left, what you pay on the right, held in view while you choose. */
.calc { padding: var(--s6) 0; background: var(--bone); }
.calc__in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s5); align-items: start; }
.calc__form { display: grid; gap: var(--s4); }
.calc__head { display: grid; gap: 14px; }
.calc__head h2 { font-size: clamp(52px, 5.8vw, 96px); }
.calc__head p { max-width: 44ch; color: var(--slate); }
.calc__own { display: grid; gap: var(--s4); }
.pick { margin: 0; padding: 0; border: 0; min-width: 0; }
.pick legend { padding: 0; margin-bottom: 12px; font: 800 19px/1.2 var(--text); }
.pick__opts { display: flex; flex-wrap: wrap; gap: 10px; }
.pick--plan .pick__opts { display: grid; gap: 8px; }
.pick--plan .opt__face { width: 100%; grid-template-columns: minmax(0, 190px) minmax(0, 1fr) auto; grid-template-areas: "name has price"; align-items: center; column-gap: var(--s3); min-height: 72px; padding: 14px 22px; }
.pick--plan .opt__face b { grid-area: name; font: 900 34px/.9 var(--display); text-transform: uppercase; }
.pick--plan .opt__face .num { grid-area: price; text-align: right; font-weight: 700; color: var(--ink); }
.opt__has { grid-area: has; color: var(--slate); font-size: 16px; }
.opt__in:checked + .opt__face .opt__has { color: var(--on-dark-soft); }
.pick--plan .opt__in:checked + .opt__face .num { color: var(--on-dark); }
.pick--plan .opt__in[value="growth"]:checked + .opt__face { background: var(--signal); color: var(--ink); }
.pick--plan .opt__in[value="growth"]:checked + .opt__face .num, .pick--plan .opt__in[value="growth"]:checked + .opt__face .opt__has { color: var(--ink); }
.opt { position: relative; display: inline-flex; }
.opt__in { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.opt__face { display: grid; gap: 4px; min-height: 64px; padding: 12px 18px; border-radius: var(--r); background: var(--paper); box-shadow: inset 0 0 0 1px var(--hair); font-size: 16px; transition: background-color .2s var(--ease), color .2s var(--ease), box-shadow .2s var(--ease); }
.opt__face b { font: 800 18px/1.2 var(--text); }
.opt__face .num { color: var(--slate); }
.opt:hover .opt__face { box-shadow: inset 0 0 0 2px var(--ink); }
.opt__in:checked + .opt__face { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.opt__in:checked + .opt__face .num { color: var(--on-dark-soft); }
.opt__in:focus-visible + .opt__face { outline: 3px solid var(--signal); outline-offset: 3px; }
.opt__in:disabled + .opt__face { opacity: .45; cursor: not-allowed; }
.tick { position: relative; display: flex; align-items: center; gap: 14px; min-height: 52px; margin-top: 12px; cursor: pointer; font-weight: 600; }
.tick input { flex: none; width: 26px; height: 26px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.tick input:focus-visible { outline: 3px solid var(--signal); outline-offset: 3px; }
.tick input:disabled + span { opacity: .45; }

.receipt { position: sticky; top: calc(var(--head) + 52px + 24px); display: grid; justify-items: center; }
.receipt__phone { width: 44%; margin-bottom: -34%; }
.receipt__card { position: relative; z-index: 1; display: grid; gap: 14px; width: 100%; padding: 26px 28px; border-radius: var(--r); background: var(--paper); box-shadow: 0 -18px 30px -24px rgba(19, 17, 21, .5), inset 0 0 0 1px var(--hair); }
.receipt__title { font: 900 40px/.9 var(--display); text-transform: uppercase; }
.receipt__out { display: grid; gap: 14px; }
.receipt__plan { font-weight: 800; }
.receipt__lines { display: grid; gap: 6px; }
.receipt__lines li { display: flex; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; font-size: 16px; }
.receipt__lines li span:last-child { color: var(--slate); }
.totals { display: grid; grid-template-columns: 1fr 1fr; gap: 12px var(--s3); padding: 14px 0; border-block: 1px solid var(--hair); }
.totals div:not(.totals__big) { display: flex; justify-content: space-between; gap: 12px; grid-column: 1 / -1; font-size: 16px; }
.totals__big dt { font: 700 14px/1 var(--text); letter-spacing: .06em; text-transform: uppercase; }
.totals__big dd { margin-top: 6px; font: 900 clamp(52px, 4.6vw, 76px)/.84 var(--display); }
.totals dd { margin: 0; }
.receipt__words { font-size: 16px; color: var(--slate); }
.receipt__verdict { padding-top: 12px; border-top: 2px solid var(--signal); font-weight: 700; }
.receipt__eg, .receipt__plain { color: var(--slate); font-size: 15px; }

/* The phones take their pose as each band arrives, the way the home page's phone does; the words slide in under them.
   Native scroll drives it; without support, or with reduced motion, everything simply stands where it ends. */
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .rate:not(.rate--site) .rate__phone { animation: pr-pose linear both; animation-timeline: view(); animation-range: entry 10% cover 45%; }
    .rate--desk .rate__phone { animation-name: pr-pose-r; }
    .rate:not(.rate--site) .rate__word { animation: pr-word linear both; animation-timeline: view(); animation-range: entry 0% cover 50%; }
    .bundle__phone, .receipt__phone { animation: pr-rise linear both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
  }
}
@keyframes pr-pose { from { translate: 0 14%; rotate: -5deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes pr-pose-r { from { translate: 0 14%; rotate: 5deg; } to { translate: 0 0; rotate: 0deg; } }
@keyframes pr-word { from { translate: -7% 0; } to { translate: 0 0; } }
@keyframes pr-rise { from { translate: 0 22%; } to { translate: 0 0; } }

/* A small laptop or a tablet. */
@media (max-width: 1099.98px) {
  .bundles__row { grid-template-columns: 1fr 1fr; }
  .bundle--best { grid-column: 1 / -1; grid-row: 1; }
  .bundle--best .bundle__phone { width: 40%; margin-bottom: -26%; }
  .calc__in { grid-template-columns: minmax(0, 1fr) minmax(0, 340px); }
}

/* A phone. Each band: the title beside a small phone, then the rows. */
@media (max-width: 759.98px) {
  .pr-head__in { grid-template-columns: 1fr; }
  .pr-head h1 { font-size: clamp(64px, 21vw, 120px); }
  .pr-bar a { padding: 0 11px; font-size: 15px; }
  .rate__jobs { grid-template-columns: 1fr; gap: 8px; }
  .calc__now { position: sticky; top: calc(var(--head) + 52px); z-index: 5; display: flex; justify-content: space-between; gap: 12px; margin: -12px calc(-1 * var(--gutter)); padding: 12px var(--gutter); background: var(--ink); color: var(--on-dark); font: 600 15px/1.2 var(--text); }
  .calc__now[hidden] { display: none; }
  .calc__now b { margin-left: 4px; font: 900 26px/1 var(--display); }
  .rate, .rate--desk { grid-template-columns: minmax(0, 1fr) minmax(0, 40%); grid-template-areas: "title pic" "what pic" "rest rest"; gap: 14px 16px; padding-block: 44px 52px; }
  .rate--site { padding-top: 32px; }
  .rate__body { display: contents; }
  .rate__title { grid-area: title; align-self: end; font-size: clamp(42px, 12vw, 60px); }
  .rate__what { grid-area: what; font-size: 17px; }
  .rate__pic, .rate--desk .rate__pic { grid-area: pic; order: 0; align-self: center; }
  .rate__phone { width: 100%; margin-bottom: -10cqi; }
  .rows, .rate__egs, .rate__jobs, .rate__then, .rate__fine, .rate .door { grid-column: 1 / -1; }
  .rate__fine { margin-top: -8px; }
  .row { grid-template-columns: 1fr; grid-template-areas: "name" "cost" "has"; gap: 8px; }
  .row__cost { justify-content: flex-start; }
  .row__cost b { font-size: 60px; }
  .rows--one .row__cost b { font-size: 112px; }
  .bundles { padding-top: var(--s5); }
  .bundles__head { grid-template-columns: 1fr; }
  .bundles__row { grid-template-columns: 1fr; gap: var(--s5); }
  .bundle__phone, .bundle--best .bundle__phone { width: 58%; margin-bottom: -38%; }
  .bundle__card, .bundle--best .bundle__card { padding: 24px 20px 20px; }
  .asks { padding: var(--s5) 0; }
  .asks__in, .asks__list { grid-template-columns: 1fr; }
  .calc { padding: var(--s5) 0; }
  .calc__in { grid-template-columns: 1fr; }
  .pick--plan .opt__face { grid-template-columns: 1fr; grid-template-areas: "name" "price" "has"; row-gap: 6px; padding: 14px 16px; }
  .pick--plan .opt__face .num { text-align: left; }
  .pick--plan .opt__face b { font-size: 30px; }
  .pick__opts .opt { flex: 1 1 calc(50% - 5px); }
  .opt__face { width: 100%; }
  .receipt { position: relative; top: auto; }
  .receipt__phone { width: 50%; margin-bottom: -38%; }
}