/* Websites. The three levels as a deck of bands that stack as you scroll (each level slides over the one before it),
   then the three example sites side by side, page by page; No money down month by month; Care and Pause; the build.
   Every moving thing here is tied to the scroll and has a still state: without scroll timelines, or with reduced
   motion, the page simply sits at rest. */
:root { --secbar: 52px; --stick: calc(var(--head) + var(--secbar)); --band-pad: clamp(64px, 10vh, 96px); }

/* A list with a short vermilion rule for a bullet: what a price includes. */
.ticks { display: grid; gap: 8px; }
.ticks li { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: baseline; font-size: 18px; line-height: 1.35; }
.ticks li::before { content: ''; height: 3px; background: var(--signal); translate: 0 -5px; }
.on-signal .ticks li::before { background: var(--ink); }

/* Head: the title and the price on the left; the three example sites fanned on the right, one per level. */
.wh { padding: clamp(28px, 5vh, 56px) 0 clamp(48px, 8vh, 88px); overflow: clip; }
.wh__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: var(--s4) var(--s5); align-items: center; }
.wh__copy { display: grid; gap: 22px; justify-items: start; }
.wh__title { font-size: clamp(64px, 7.4vw, 124px); font-weight: 900; line-height: .84; }
.wh__lede { max-width: 34ch; font: 500 clamp(19px, 1.45vw, 22px)/1.4 var(--text); }
.wh__price { max-width: 40ch; color: var(--slate); font-size: 18px; }
.wh__price b { color: var(--ink); }
.wh__phones { position: relative; height: min(70vh, 660px); min-height: 440px; }
.wh__phone { position: absolute; bottom: 0; width: 44%; }
.wh__phone a { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--ink); }
.wh__phone img { width: 100%; transition: translate .35s var(--ease); }
.wh__phone a:hover img { translate: 0 -10px; }
.wh__tag { font: 700 16px/1.2 var(--text); color: var(--signal-ink); border-bottom: 2px solid transparent; transition: border-color .2s var(--ease); }
.wh__phone a:hover .wh__tag { border-color: currentColor; }
.wh__phone--launch { left: -2%; z-index: 1; }
.wh__phone--signature { left: 28%; z-index: 3; width: 48%; }
.wh__phone--flagship { right: -2%; z-index: 2; }
.wh__phone--launch img, .wh__phone--flagship img { scale: .84; transform-origin: 50% 100%; }
.wh__phone--launch img { rotate: -8deg; }
.wh__phone--flagship img { rotate: 8deg; }

/* The section bar: sticky under the header for the page's own sections; it lets go before the band that ends the page. */
.secbar { position: sticky; top: var(--head); z-index: 25; background: var(--bone); box-shadow: 0 1px 0 var(--hair); }
.secbar__in { display: flex; align-items: center; gap: var(--s2); min-height: var(--secbar); }
.secbar__list { flex: 1; min-width: 0; display: flex; margin-left: -12px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.secbar__list::-webkit-scrollbar { display: none; }
.secbar__list a { display: inline-flex; align-items: center; min-height: var(--secbar); padding: 0 12px; white-space: nowrap; color: var(--slate); font: 600 16px/1 var(--text); text-decoration: none; transition: color .2s var(--ease), box-shadow .2s var(--ease); }
.secbar__list a:hover { color: var(--ink); }
.secbar__list a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--signal); }
.secbar__list a:focus-visible { outline-offset: -4px; }
.secbar__book { flex: none; display: inline-flex; align-items: center; min-height: 44px; color: var(--signal-ink); font: 700 16px/1 var(--text); text-underline-offset: 5px; }
.secbar__book:hover { color: var(--ink); }
/* The page already pads the scroll by the header and 24px (tokens.css); these add the bar, so a jump lands where a click does. */
.doc [id] { scroll-margin-top: calc(var(--secbar) - 16px); }
.doc .lv { scroll-margin-top: calc(var(--secbar) - 24px); }

/* The deck. Each level is a band with its name set as big as the band allows, low, behind its example site on the phone. */
.lv { position: relative; display: grid; min-height: 640px; overflow: clip; }
.lv--launch { background: var(--signal); color: var(--ink); }
.lv--signature { background: var(--bone); }
.lv--flagship { background: var(--night); color: var(--on-dark); }
.lv__word { position: absolute; left: 0; right: 0; bottom: -0.105em; z-index: 0; margin: 0; font-size: var(--word); font-weight: 900; line-height: .8; letter-spacing: -0.015em; text-align: center; white-space: nowrap; pointer-events: none; }
.lv--launch .lv__word { --word: min(31vw, 46vh); color: var(--bone); }
.lv--signature .lv__word { --word: min(21.6vw, 40vh); color: var(--signal); }
.lv--flagship .lv__word { --word: min(24.4vw, 42vh); color: var(--signal); }
.lv__phone { position: absolute; z-index: 1; bottom: 2%; height: min(92%, 700px); width: auto; filter: drop-shadow(0 30px 40px rgba(19, 17, 21, .28)); }
.lv--launch .lv__phone, .lv--flagship .lv__phone { left: max(var(--gutter), (100vw - var(--wrap)) / 2 + 4vw); }
.lv--signature .lv__phone { right: max(var(--gutter), (100vw - var(--wrap)) / 2 + 3vw); height: min(98%, 760px); bottom: 0; }
.lv__text { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); gap: 14px clamp(32px, 3.4vw, 56px); align-content: start; justify-items: start; width: min(780px, 54vw); padding: clamp(36px, 7vh, 76px) 0 0; }
.lv__text > * { grid-column: 1; }
.lv__text > .ticks { grid-column: 2; grid-row: 1 / span 6; align-self: start; margin: 0; padding-top: 18px; border-top: 3px solid currentColor; }
.lv--launch .lv__text, .lv--flagship .lv__text { justify-self: end; margin-right: max(var(--gutter), (100vw - var(--wrap)) / 2); }
.lv--signature .lv__text { justify-self: start; margin-left: max(var(--gutter), (100vw - var(--wrap)) / 2); }
.lv__best { font: 800 18px/1.2 var(--text); color: var(--signal-ink); }
.lv__price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; }
.lv__amount { font: 900 clamp(64px, 6.2vw, 104px)/.82 var(--display); letter-spacing: -0.01em; }
.lv--signature .lv__amount { font-size: clamp(76px, 7.4vw, 124px); }
.lv__once { font: 700 18px/1 var(--text); }
.lv__for { font: 600 19px/1.35 var(--text); }
.lv__eg { max-width: 40ch; font-size: 16px; }
.lv--launch .lv__eg { color: var(--ink); }
.lv--signature .lv__eg { color: var(--slate); }
.lv--flagship .lv__eg, .lv--flagship .lv__for { color: var(--on-dark-soft); }
.lv--flagship .lv__amount { color: var(--on-dark); }
.lv--flagship .ticks { border-top-color: var(--signal); }
.lv--signature .ticks { border-top-color: var(--signal); }

/* On a laptop tall enough to hold a whole band, the bands stack: each sticks under the bars, the next slides over it. */
@media (min-width: 900px) and (min-height: 660px) {
  .lv { position: sticky; top: var(--stick); height: calc(100vh - var(--stick)); height: calc(100svh - var(--stick)); max-height: 820px; min-height: 0; box-shadow: 0 -28px 48px -30px rgba(19, 17, 21, .55); }
}

/* Compare: the three sites' pages as piles of sheets, bottoms in line, so the piles climb with the price. */
.cmp { position: relative; z-index: 2; background: var(--bone); padding: var(--band-pad) 0 var(--s5); }
.cmp__head { grid-area: 1 / 1; z-index: 1; display: grid; gap: 18px; align-content: start; }
.cmp__head h2 { font-size: clamp(48px, 4.2vw, 64px); }
.cmp__head p { max-width: 36ch; color: var(--slate); font-size: 17px; }
.cmp__col--launch { grid-area: 1 / 1; }
.cmp__col--signature { grid-area: 1 / 2; }
.cmp__col--flagship { grid-area: 1 / 3; }
.cmp__cols { display: grid; grid-template-columns: 0.9fr 1.1fr 1.2fr; gap: var(--s4) clamp(28px, 3.4vw, 56px); align-items: start; }
.cmp__col { display: grid; gap: 14px; justify-items: start; }
.cmp__pilebox { display: flex; align-items: flex-end; width: 100%; height: 474px; margin-bottom: 10px; }
.cmp__col h3 { display: grid; gap: 4px; }
.cmp__level { font: 800 16px/1.2 var(--text); color: var(--signal-ink); }
.cmp__does { max-width: 44ch; color: var(--slate); font-size: 17px; }

.pile { --step: 48px; --shift: 12px; --sheet: 118px; position: relative; width: 100%; height: calc(var(--sheet) + (var(--n) - 1) * var(--step)); }
.pile li { position: absolute; left: calc(var(--i) * var(--shift)); right: calc((var(--n) - 1 - var(--i)) * var(--shift)); bottom: calc(var(--i) * var(--step)); z-index: calc(var(--n) - var(--i)); height: var(--sheet); }
.pile a { display: grid; align-content: start; gap: 6px; height: 100%; padding: 12px 16px; border-radius: 12px; background: var(--paper); box-shadow: 0 0 0 1px var(--hair), 0 -10px 24px -18px rgba(19, 17, 21, .35); color: var(--ink); text-decoration: none; transition: background-color .2s var(--ease), translate .3s var(--ease); }
.pile b { font: 700 17px/1.2 var(--text); }
.pile span { color: var(--slate); font-size: 16px; line-height: 1.35; }
.pile a:hover { background: #fff; translate: 0 -6px; }
.pile li + li a { grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 14px; }
.pile li + li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; }
.pile li:first-child a { background: var(--ink); color: var(--on-dark); box-shadow: 0 18px 30px -18px rgba(19, 17, 21, .5); }
.pile li:first-child span { color: var(--on-dark-soft); }
.pile li:first-child a:hover { background: var(--signal); color: var(--ink); }
.pile li:first-child a:hover span { color: var(--ink); }
.pile li:first-child a:focus-visible { outline-color: var(--signal); }


/* Care and Pause: the live site on the phone, and the two ways to keep it, Care wider because it is the usual one. */
.care { position: relative; z-index: 2; background: var(--bone); padding: var(--band-pad) 0 var(--s5); overflow: clip; }
.care__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "phone copy copy" "phone care pause"; gap: var(--s4) var(--s5); align-items: start; }
.care__phone { grid-area: phone; align-self: center; width: 118%; max-width: 520px; margin: -64px 0 -80px -8%; -webkit-mask-image: linear-gradient(#000 82%, transparent 98%); mask-image: linear-gradient(#000 82%, transparent 98%); }
.care__copy { grid-area: copy; display: grid; gap: 18px; max-width: 62ch; }
.care__copy p { color: var(--slate); max-width: 48ch; }
.care__plans { display: contents; }
.keep { display: grid; gap: 12px; align-content: start; padding-top: 18px; border-top: 3px solid var(--ink); }
.keep--care { grid-area: care; }
.keep--pause { grid-area: pause; border-top-color: var(--hair); }
.keep__name { font: 800 24px/1.1 var(--text); }
.keep__price { display: flex; align-items: baseline; gap: 10px; font: 700 18px/1 var(--text); }
.keep__price span { font: 900 clamp(72px, 6.6vw, 112px)/.8 var(--display); }
.keep--pause .keep__price span { font-size: clamp(56px, 4.8vw, 80px); }
.keep__note { font: 700 16px/1.3 var(--text); color: var(--signal-ink); }

/* The build: four steps on one line, the line filling as you read down; the two halves of the price marked on it. */
.build { position: relative; z-index: 2; background: var(--night); color: var(--on-dark); padding: var(--band-pad) 0; }
.build__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--s2) var(--s5); margin-bottom: var(--s4); }
.build__head p { color: var(--on-dark-soft); max-width: 40ch; }
.track { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s4); counter-reset: step; padding-top: 128px; }
.track::before, .track::after { content: ''; position: absolute; left: 0; right: 0; top: 104px; height: 3px; background: var(--hair-dark); }
.track::after { background: var(--signal); transform-origin: 0 50%; }
.track__step { position: relative; display: grid; gap: 10px; align-content: start; counter-increment: step; }
.track__step::before { content: counter(step); position: absolute; top: -132px; left: -0.04em; font: 900 108px/1 var(--display); color: var(--signal); }
.track__step h3 { color: var(--on-dark); }
.track__step p { color: var(--on-dark-soft); max-width: 30ch; }
.track__step p.track__pay { margin-top: 6px; color: var(--signal); font-weight: 700; }

/* Motion, tied to the scroll. Without scroll timelines, or with reduced motion, all of it rests where it ends. */
@media (prefers-reduced-motion: no-preference) {
  .wh__phone img { animation: wh-rise 1s var(--ease) both; }
  .wh__phone--launch img { animation-delay: .12s; }
  .wh__phone--flagship img { animation-delay: .22s; }
  @supports (animation-timeline: view()) {
    .lv { view-timeline: --band block; }
    .lv__phone { animation: lv-turn linear both; animation-timeline: --band; animation-range: entry 0% entry 100%; }
    .lv__word { animation: lv-slide linear both; animation-timeline: --band; animation-range: entry 0% entry 100%; }
    .lv--signature .lv__word { animation-name: lv-slide-back; }
    .pile li { animation: pile-fan linear both; animation-timeline: view(); animation-range: entry 30% cover 42%; }
    .track::after { animation: track-fill linear both; animation-timeline: view(); animation-range: entry 60% cover 62%; }
    .care__phone { animation: care-tilt linear both; animation-timeline: view(); animation-range: cover 0% cover 100%; }
  }
}
@keyframes wh-rise { from { opacity: 0; translate: 0 60px; } }
@keyframes lv-turn { from { transform: translateY(26%) rotate(11deg); } }
@keyframes lv-slide { from { transform: translateX(22%); } }
@keyframes lv-slide-back { from { transform: translateX(-22%); } }
@keyframes pile-fan { from { transform: translate(calc(var(--i) * var(--shift) * -1), calc(var(--i) * var(--step))); } }
@keyframes track-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes care-tilt { from { transform: rotate(-5deg) translateY(30px); } to { transform: rotate(4deg) translateY(-30px); } }

/* A phone or a small tablet: no deck; each band stacks its name, the phone over the name's foot, then the words. */
@media (max-width: 899.98px) {
  :root { --secbar: 48px; }
  .wh__in, .cmp__head { grid-template-columns: 1fr; }
  .wh__phones { height: auto; min-height: 0; aspect-ratio: 1 / 1.02; margin-top: 8px; }
  .wh__phone { width: 42%; }
  .wh__phone--launch { left: 0; }
  .wh__phone--flagship { right: 0; }
  .wh__phone--signature { left: 26%; width: 48%; }
  .wh__tag { max-width: 8ch; text-align: center; }
  .wh__phone--launch .wh__tag { justify-self: start; text-align: left; }
  .wh__phone--flagship .wh__tag { justify-self: end; text-align: right; }
  .secbar__in { gap: 10px; }
  .secbar__book { padding-left: 12px; box-shadow: -1px 0 0 var(--hair); }
  .lv { display: flex; flex-direction: column; padding: 48px 0 64px; }
  .lv__word { position: relative; bottom: auto; order: 1; margin: 0 0 -0.1em; }
  .lv--launch .lv__word { --word: 31vw; }
  .lv--signature .lv__word { --word: 21.4vw; }
  .lv--flagship .lv__word { --word: 24.2vw; }
  .lv__phone, .lv--signature .lv__phone { position: relative; order: 2; left: auto; right: auto; bottom: auto; width: min(82vw, 420px); height: auto; margin: -16vw auto 0; }
  .lv__text, .lv--launch .lv__text, .lv--flagship .lv__text, .lv--signature .lv__text { order: 3; width: auto; margin: 8px var(--gutter) 0; padding: 0; justify-self: auto; }
  .cmp { padding: var(--s5) 0; }
  .cmp__cols { grid-template-columns: 1fr; gap: var(--s5); }
  .cmp__head, .cmp__col--launch, .cmp__col--signature, .cmp__col--flagship { grid-area: auto; }
  .lv__text { grid-template-columns: 1fr; }
  .lv__text > .ticks { grid-column: 1; grid-row: auto; padding-top: 14px; }
  .cmp__pilebox { height: auto; }
  .care__in { grid-template-columns: 1fr 1fr; grid-template-areas: "copy copy" "phone phone" "care pause"; gap: var(--s4) var(--s3); }
  .care__phone { width: min(80vw, 400px); margin: -20px auto -30px; }
  .track { grid-template-columns: 1fr; gap: var(--s4); padding: 0 0 0 76px; }
  .track::before, .track::after { left: 26px; right: auto; top: 8px; bottom: 8px; width: 3px; height: auto; }
  .track::after { transform-origin: 50% 0; }
  .track__step::before { top: -12px; left: -76px; width: 56px; text-align: center; font-size: 72px; background: var(--night); }
  @keyframes track-fill { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  .build { padding: var(--s5) 0; }
  /* A band here is taller than the screen: the turn ends once its top half is in view, not when its foot is. */
  .lv__phone, .lv__word { animation-range: entry 0% entry 520px !important; }
}
@media (max-width: 599.98px) {
  .care__in { grid-template-columns: 1fr; grid-template-areas: "copy" "phone" "care" "pause"; }
}

/* The phone number in the band that ends the page is a link: give it a full tap target. */
.next__call a { display: inline-flex; align-items: center; min-height: 44px; }