/* How it works, shot as real objects: each step is a photograph of the device on its own ground (a phone on dark
   limestone, a laptop on an oak desk), and the screen is laid into the glass where the real display sits, so it stays
   sharp and alive. how.js frames each photograph to fill the stage around the device (data-focus, in the photo's own
   2048 px). The screens are drawn at the device's own size in points and scaled to the glass: the phone an iPhone 15 Pro
   lock screen (393 x 852 pt), the laptop a 14 inch display at 1024 x 659 pt with its notch and menu bar.
   The quote and the preview are pages the Rejouice way: one flat warm white, hairlines, one typeface, no coloured pills. */
.dark-site .lw-how .hd-light, .dark-site .lw-how .hd-floor { display: none; }
.hd .hd-shot, .hd .hd-shot.hd-laptop { position: absolute; inset: 0; width: auto; overflow: hidden; border-radius: 6px; background: #12110F; }
.hd .hd-frame { position: absolute; left: 0; top: 0; width: 2048px; height: 2048px; transform-origin: 0 0; }
.hd .hd-photo { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.hd .hd-scr { position: absolute; overflow: hidden; background: #000; }
/* the glass catches a little of the room: brighter where the window light comes from, darker away from it */
.hd .hd-sheen { position: absolute; inset: 0; z-index: 9; border-radius: inherit; pointer-events: none; background: linear-gradient(104deg, rgba(255, 248, 236, .085) 0%, rgba(255, 248, 236, .025) 34%, rgba(255, 248, 236, 0) 58%); }

/* ---------- the phone: an iPhone 15 Pro face up on stone; its display measured in the photograph ---------- */
.hd .hd-scr--phone { left: 711px; top: 395px; width: 594px; height: 1300px; border-radius: 86px; }
.hd .hd-ios { position: absolute; left: 0; top: 0; width: 393px; height: 852px; transform-origin: 0 0; transform: scale(1.5115, 1.5258); overflow: hidden; color: #fff;
  font-family: -apple-system, "SF Pro Text", Inter, "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.hd .hd-ios p { margin: 0; }
.hd-ios--lock { background: radial-gradient(120% 70% at 30% 20%, #2D4A5E 0%, #152634 45%, #0A121A 100%); }
.hd-ios-island { position: absolute; z-index: 6; top: 11px; left: 50%; width: 125px; height: 37px; margin-left: -62.5px; border-radius: 19px; background: #000; }
.hd-ios-sb { position: absolute; z-index: 5; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 6px 30px 0 46px; font: 600 17px/1 -apple-system, "SF Pro Text", Inter, "Geist", sans-serif; letter-spacing: -.2px; color: #fff; }
.hd-ios-sb--ink { color: #111; }
.hd-ios-ic { display: inline-flex; align-items: center; gap: 6px; }
.hd-ios-ic svg { width: auto; height: 11.5px; fill: currentColor; }
.hd-ios-bat { position: relative; display: block; width: 25px; height: 12px; margin-right: 3px; border-radius: 4px; box-shadow: inset 0 0 0 1px currentColor; opacity: 1; }
.hd-ios-bat::before { content: ""; position: absolute; left: 2px; top: 2px; bottom: 2px; width: 16px; border-radius: 2px; background: currentColor; }
.hd-ios-bat::after { content: ""; position: absolute; right: -3px; top: 4px; width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: currentColor; opacity: .45; }
.hd-ios-sb .hd-ios-bat { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .42); }
.hd-ios-sb--ink .hd-ios-bat { box-shadow: inset 0 0 0 1px rgba(17, 17, 17, .4); }
.hd-ios-date { position: absolute; top: 84px; left: 0; right: 0; text-align: center; font: 600 21px/1 -apple-system, "SF Pro Text", Inter, "Geist", sans-serif; letter-spacing: -.1px; color: rgba(255, 255, 255, .9); }
.hd-ios-clock { position: absolute; top: 104px; left: 0; right: 0; text-align: center; font: 600 104px/1 -apple-system, "SF Pro Display", "Inter Display", Inter, "Geist", sans-serif; letter-spacing: -2.5px; color: rgba(255, 255, 255, .96); }
/* a notification as iOS 17 draws it on a dark wallpaper: frosted, white words, no outline */
.hd-ios-note { position: absolute; z-index: 4; left: 12px; right: 12px; bottom: 150px; display: flex; align-items: center; gap: 11px; padding: 13px 15px 14px 13px; border-radius: 22px; background: rgba(136, 152, 168, .32); }
.hd-ios-app { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 9px; background: #0A0A0A; color: #EFECE5; }
.hd-ios-app svg { width: 22px; height: auto; }
.hd-ios-app--cal { grid-template-rows: 12px 1fr; padding-top: 3px; background: #fff; color: #111; }
.hd-ios-app--cal b { font: 600 8px/12px -apple-system, "SF Pro Text", Inter, sans-serif; letter-spacing: .2px; color: #E5483D; }
.hd-ios-app--cal span { font: 400 21px/1 -apple-system, "SF Pro Display", Inter, sans-serif; letter-spacing: -.6px; }
.hd-ios-tx { flex: 1; min-width: 0; }
.hd-ios-nh { display: flex; align-items: baseline; gap: 8px; }
.hd-ios-nh b { flex: 1; font: 600 15px/20px -apple-system, "SF Pro Text", Inter, sans-serif; letter-spacing: -.2px; }
.hd-ios-nh small { font: 400 13px/20px -apple-system, "SF Pro Text", Inter, sans-serif; color: rgba(255, 255, 255, .6); }
.hd-ios-nt, .hd-ios-nb { font: 400 15px/20px -apple-system, "SF Pro Text", Inter, sans-serif; letter-spacing: -.2px; }
.hd-ios-nt { font-weight: 600; }
.hd-ios-btn { position: absolute; z-index: 4; top: 748px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: rgba(255, 255, 255, .13); }
.hd-ios-btn--l { left: 46px; } .hd-ios-btn--r { right: 46px; }
.hd-ios-btn svg { width: 21px; height: 21px; fill: #fff; }
.hd-ios-home { position: absolute; z-index: 6; left: 50%; bottom: 8px; width: 134px; height: 5px; margin-left: -67px; border-radius: 3px; background: #fff; }
/* launch day: the firm's own site open in Safari, the light page under a dark status bar, its film playing */
.hd-ios--live { background: #405B4B; }
.hd-ios--live .hd-site { position: absolute; left: 0; right: 0; top: 54px; width: 100%; height: 686px; aspect-ratio: auto; }
.hd-ios--live .hd-site img { display: block; width: 100%; height: 100%; }
.hd-ios--live .hd-site-film { position: absolute; left: 0; top: 34.35%; width: 100%; height: 57.76%; object-fit: cover; }
.hd-ios--live .hd-ios-home { background: #fff; }
/* launch day says itself: Safari's own bar, dark, with the firm's domain in it, and nothing laid over the site */
.hd-saf { position: absolute; z-index: 5; left: 0; right: 0; bottom: 0; height: 112px; padding-top: 6px; box-sizing: border-box; background: rgba(30, 30, 32, .9); -webkit-backdrop-filter: blur(20px) saturate(1.6); backdrop-filter: blur(20px) saturate(1.6); box-shadow: inset 0 .5px 0 rgba(255, 255, 255, .12); }
.hd .hd-saf p { margin: 0; }
.hd-saf-url { position: relative; display: flex; align-items: center; justify-content: center; height: 44px; margin: 0 12px !important; border-radius: 13px; background: rgba(118, 118, 128, .26); font: 400 17px/1 -apple-system, "SF Pro Text", Inter, sans-serif; letter-spacing: -.3px; color: #fff; }
.hd-saf-aa { position: absolute; left: 14px; top: 50%; translate: 0 -50%; font: 500 17px/1 -apple-system, "SF Pro Text", Inter, sans-serif; }
.hd-saf-aa small { font-size: 12px; margin-right: 1px; }
.hd-saf-url svg { position: absolute; right: 13px; top: 50%; translate: 0 -50%; width: 18px; height: 18px; color: #fff; }
.hd-saf-bar { display: flex; justify-content: space-between; align-items: center; height: 38px; padding: 0 26px; color: #0A84FF; }
.hd-saf-bar svg { width: 24px; height: 24px; }
.hd-saf-bar svg.off { color: rgba(235, 235, 245, .3); }
/* over a light page iOS draws the banner light, with dark words */
.hd-ios-note--top { top: 58px; bottom: auto; background: rgba(250, 249, 246, .94); color: #111; box-shadow: 0 10px 30px -14px rgba(0, 0, 0, .35); }
.hd-ios-note--top .hd-ios-nh small { color: rgba(17, 17, 17, .5); }

/* ---------- the laptop: a 14 inch laptop on oak, its display measured in the photograph ---------- */
.hd .hd-scr--mac { left: 452px; top: 414px; width: 1134px; height: 730px; border-radius: 12px 12px 3px 3px; }
.hd .hd-mac { position: absolute; left: 0; top: 0; width: 1024px; height: 659px; transform-origin: 0 0; transform: scale(1.1074); background: #E9E7E2; font-family: -apple-system, "SF Pro Text", Inter, "Geist", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
.hd-mac-menu { position: absolute; z-index: 3; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 18px; height: 25px; padding: 0 16px; background: #151513; color: rgba(255, 255, 255, .9); font: 400 12.5px/1 -apple-system, "SF Pro Text", Inter, sans-serif; }
.hd-mac-menu b { font-weight: 600; }
.hd-mac-menu em { margin-left: auto; font-style: normal; }
.hd-mac-notch { position: absolute; z-index: 4; left: 459px; top: 0; width: 115px; height: 25px; border-radius: 0 0 9px 9px; background: #000; }
.hd .hd-mac .hd-win { position: absolute; inset: 25px 0 0; display: grid; grid-template-rows: 38px minmax(0, 1fr); background: #EFECE5; }
.hd-safari { display: flex; align-items: center; gap: 8px; padding: 0 14px; background: #F4F4F4; border-bottom: 1px solid rgba(0, 0, 0, .09); }
.hd-safari i { width: 12px; height: 12px; border-radius: 50%; background: rgba(0, 0, 0, .14); }
.hd-safari-url { margin: 0 auto; transform: translateX(-30px); width: 42%; padding: 6px 12px; border-radius: 7px; background: rgba(0, 0, 0, .055); text-align: center; font: 400 12.5px/1 -apple-system, "SF Pro Text", Inter, sans-serif; color: rgba(20, 25, 23, .7); }
.hd .hd-mac .hd-page { position: relative; overflow: hidden; }

/* the quote, as UkasonDev sends it, set the Rejouice way: pure white, near black words in one light weight, the
   service as a two-tone headline, the price set huge against the foot of the page, the terms on hairlines beside it and
   one plain black button. how.js plays it as a short film when the step comes in: the page lands, the pointer comes in
   from the edge of the screen and accepts the quote, and the clock in the menu bar turns over to 16:20. Every moving
   part is drawn from one clock (render(t) in how.js), so it can be paused, stepped and filmed frame by frame. */
.hd .hd-win--quote .hd-page { display: block; place-items: normal; background: #FFF; }
.hd-qt { display: flex; flex-direction: column; height: 100%; box-sizing: border-box; padding: 26px 48px 44px; color: #0A0A0A; font-family: var(--font); font-weight: 400; }
.hd .hd-qt p { margin: 0; }
.hd-qt-top { display: flex; justify-content: space-between; font: 400 13px/1.2 var(--font); color: rgba(10, 10, 10, .48); }
.hd-qt-top span:first-child { color: #0A0A0A; }
.hd-qt-m { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.hd-qt-up, .hd-qt-fade { display: inline-block; will-change: transform; }
.hd-qt-head { margin-top: 46px !important; font: 400 48px/1.02 var(--font); letter-spacing: -.035em; }
.hd-qt-for { color: rgba(10, 10, 10, .34); }
.hd-qt-foot { display: grid; grid-template-columns: minmax(0, 1fr) 328px; column-gap: 48px; align-items: end; margin-top: auto; }
.hd-qt-price { display: flex; align-items: flex-end; gap: 16px; font: 300 232px/.74 var(--font); letter-spacing: -.06em; margin-bottom: -6px !important; }
.hd-qt-price .hd-qt-m { display: flex; padding: .03em .04em .02em 0; margin: 0; }
.hd-qt-price small { padding-bottom: 8px; font: 400 17px/1 var(--font); letter-spacing: -.01em; }
:root .dark-site .process .hd-qt small, .hd-qt-price small { color: rgba(10, 10, 10, .48); }
.hd-qt-rows p { position: relative; display: flex; justify-content: space-between; gap: 24px; padding: 11px 0 12px; font: 400 15px/1.2 var(--font); letter-spacing: -.01em; }
.hd-qt-rows p > i { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: rgba(10, 10, 10, .16); transform-origin: 0 50%; }
.hd-qt-rows p span { color: rgba(10, 10, 10, .48); }
.hd-qt-rows b { font-weight: 400; white-space: nowrap; }
/* the one button, plain and black; pressed, its words roll over to Accepted with the time and a tick that draws itself */
.hd-qt-go { position: relative; overflow: hidden; height: 48px; margin-top: 10px !important; background: #0A0A0A; color: #FFF; font: 400 15px/48px var(--font); letter-spacing: -.01em; transform-origin: 50% 50%; }
.hd-qt-go > span { position: absolute; inset: 0; display: flex; align-items: center; padding: 0 16px; }
.hd-qt-ask { justify-content: space-between; }
.hd-qt-ask svg { width: 16px; height: 16px; }
.hd-qt-done svg { width: 16px; height: 16px; margin-right: 10px; }
.hd-qt-done svg path { stroke-dasharray: 1; }
.hd-qt-done small { margin-left: auto; font: inherit; }
:root .dark-site .process .hd-qt .hd-qt-done small { color: rgba(255, 255, 255, .55); }
/* the pointer, macOS's own arrow, over everything on the screen */
.hd .hd-mac .hd-cursor { position: absolute; z-index: 5; left: 0; top: 0; width: 28px; height: 28px; margin: -5px 0 0 -8px; pointer-events: none; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); will-change: transform; }
/* the quote gives way to the preview as the next page does in a browser: the preview rises over it from below, the
   quote settling back into the shade, and no two pages ever show through each other */
.hd .hd-mac .hd-win--quote { opacity: 1; }
.hd .hd-mac .hd-win--quote::after { content: ""; position: absolute; inset: 0; z-index: 2; background: #000; opacity: calc(var(--q, 0) * .3); pointer-events: none; }
.hd .hd-mac .hd-win--prev { z-index: 6; opacity: clamp(0, calc(var(--q, 0) * 40), 1); transform: translateY(calc((1 - var(--q, 0)) * 102%)); box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .5); }

/* the preview: the real site week by week, with your comment pinned and Alex's reply, drawn flat */
.hd .hd-mac .hd-win--prev .hd-page .hd-wk-film { position: absolute; left: 0; top: 37.5%; width: 100%; height: 68.6%; object-fit: cover; }
.hd .hd-mac .hd-pin { right: 1%; top: 1.8%; width: 22px; height: 22px; border-radius: 50% 50% 50% 3px; background: #141414; box-shadow: 0 0 0 2px #EFECE5; }
.hd .hd-mac .hd-pin i { color: #EFECE5; font: 600 10px/1 var(--font); }
.hd .hd-mac .hd-thread { width: 250px; padding: 12px 14px; gap: 10px; border-radius: 4px; background: #EFECE5; color: #141414; box-shadow: 0 0 0 1px rgba(20, 25, 23, .1), 0 18px 34px -22px rgba(0, 0, 0, .55); font-family: var(--font); }
.hd .hd-mac .hd-c { font: 400 13px/1.35 var(--font); }
.hd .hd-mac .hd-c b { font-weight: 500; font-size: 12.5px; }
.hd .hd-mac .hd-c i { background: #141414; color: #EFECE5; font: 600 10px/1 var(--font); }
.hd .hd-mac .hd-c--us { border-top-color: rgba(20, 25, 23, .14); }

/* the weeks, named in plain words over the foot of the photograph, the one on screen lit */
.hd .hd-laptop .hd-weeks { position: absolute; z-index: 3; left: 0; right: 0; bottom: clamp(18px, 2.2vw, 34px); display: flex; justify-content: center; gap: 28px; margin: 0; }
.dark-site .lw-how .hd-laptop .hd-weeks span { padding-bottom: 8px; font: 400 15px/1 var(--font); color: rgba(239, 236, 229, .45); }
.dark-site .lw-how .hd-laptop .hd-weeks span::before, .dark-site .lw-how .hd-laptop .hd-weeks span::after { height: 1px; border-radius: 0; }
.dark-site .lw-how .hd-laptop .hd-weeks span::after { background: rgba(239, 236, 229, .2); }
.dark-site .lw-how .hd[data-week] .hd-laptop .hd-weeks span { transition: color .5s var(--in); }
[data-week="1"] .hd-laptop .hd-weeks span:nth-child(1), [data-week="2"] .hd-laptop .hd-weeks span:nth-child(-n+2), [data-week="3"] .hd-laptop .hd-weeks span { color: #EFECE5 !important; }
.hd .hd-pause { background: rgba(0, 0, 0, .5); }

/* phones: the laptop is small on the screen, so its pages are set as a browser zoomed in, larger, to stay readable */
@media (max-width: 760px) {
  .hd .hd-shot { border-radius: 4px; }
  .hd-qt-top { font-size: 26px; }
  .hd-qt { padding: 28px 44px 34px; }
  .hd-qt-head { margin-top: 24px !important; font-size: 56px; }
  .hd-qt-foot { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .hd-qt-price { font-size: 196px; margin-bottom: 0 !important; }
  .hd-qt-price small { font-size: 30px; padding-bottom: 10px; }
  .hd-qt-rows p { padding: 16px 0 18px; font-size: 30px; }
  .hd-qt-rows p:nth-child(-n+2) { display: none; }
  .hd-qt-go { height: 76px; margin-top: 4px !important; font-size: 30px; line-height: 76px; }
  .hd-qt-go > span { padding: 0 28px; }
  .hd-qt-ask svg, .hd-qt-done svg { width: 30px; height: 30px; }
  .hd .hd-mac .hd-cursor { width: 64px; height: 64px; margin: -12px 0 0 -18px; }
  .hd-safari-url { font-size: 22px; padding: 8px 12px; width: 56%; }
  .hd .hd-mac .hd-win { grid-template-rows: 52px minmax(0, 1fr); }
  .hd .hd-mac .hd-win--prev .hd-thread { transform-origin: 100% 100%; scale: 2.1; }
  .dark-site .lw-how .hd-laptop .hd-weeks { gap: 22px; bottom: 14px; }
  .dark-site .lw-how .hd-laptop .hd-weeks span { font-size: 14px; padding-bottom: 7px; }
  .dark-site .lw-how .hd-laptop .hd-weeks span::before, .dark-site .lw-how .hd-laptop .hd-weeks span::after { height: 1px; }
}

/* the light moving across the stone and the desk: a film of each photograph, laid exactly over it, so the still shows
   until the film is ready */
.hd .hd-sun { object-fit: cover; }
.hd .hd-sun { opacity: 0; transition: opacity .9s cubic-bezier(.4, 0, .2, 1); }
.hd .hd-sun.is-on { opacity: 1; }
/* Pellow & Marsh's own pages fill the screen, so its films fill it too */
.hd .hd-mac .hd-win--prev .hd-page .hd-wk-film { top: 0; height: 100%; }
.hd-ios--live .hd-site-film { top: 0; height: 100%; }
/* Chrome on some laptops (AMD graphics) drew a bright green line along the film's top edge, under the status bar (Alex
   4 Nov). The film now carries 6 extra rows top and bottom and 4 columns each side, copies of its own edge, and reaches
   past its box by exactly that much, so the edge Chrome gets wrong is cropped off and the picture sits where it did */
.hd-ios--live .hd-site { overflow: hidden; }
.hd-ios--live .hd-site-film { top: calc(-100% * 6 / 1028); left: calc(-100% * 4 / 584); width: calc(100% * 592 / 584); max-width: none; height: calc(100% * 1040 / 1028); }

/* before how.js runs the quote shows as it ends, accepted, with no pointer */
.hd-qt-ask { transform: translateY(-100%); opacity: 0; }
.hd .hd-mac .hd-cursor { opacity: 0; }
.hd .hd-mac .hd-cursor.is-on { opacity: calc(1 - var(--q, 0) * 3); }
/* a lit laptop display shows no room light over its white pages; the faint warm wash banded into stripes across them */
.hd .hd-laptop .hd-sheen { display: none; }

/* the comment on the preview: Alex's reply opens into the card when week 3 comes up, so the card grows smoothly
   instead of jumping 50 px taller in one frame */
.hd .hd-mac .hd-thread .hd-c--us { display: grid; max-height: 0; margin-top: -10px; padding-top: 0; overflow: hidden; opacity: 0; border-top-color: transparent; transition: max-height .6s var(--in), margin-top .6s var(--in), padding-top .6s var(--in), border-top-color .6s var(--in), opacity .3s var(--in); }
.hd [data-week="3"] .hd-mac .hd-thread .hd-c--us { max-height: 80px; margin-top: 0; padding-top: 10px; opacity: 1; border-top-color: rgba(20, 25, 23, .14); transition: max-height .6s var(--in), margin-top .6s var(--in), padding-top .6s var(--in), border-top-color .6s var(--in), opacity .45s var(--in) .2s; }

/* phones: one caption shows at a time under the device; the step going out fades first and the next comes up after it,
   so the two never sit on top of each other half faded */
@media (max-width: 760px) {
  .hd .hw-story .hw-item { transition: opacity .22s var(--in), transform .22s var(--in); }
  .hd .hw-story .hw-item.is-on { transition: opacity .45s var(--in) .18s, transform .45s var(--in) .18s; }
}