/* How it works: the field holds still while you scroll; the step you are on lights up on the left and its device comes forward on the right. Classes hw- (the story) and hd- (the devices). */
.hw { --top: 92px; --field: radial-gradient(70% 120% at 12% 0%, #2A5250 0%, #14302E 48%, #0A1817 100%); --rail: rgba(238, 240, 234, .2); --in: cubic-bezier(.65, 0, .35, 1); }
.hw .hw-when { margin: 0; font: 500 14px/20px var(--font-text); letter-spacing: 0; text-transform: none; color: rgba(238, 240, 234, .58); white-space: nowrap; }
.hw .hw-title { margin: 0; font-family: var(--font); font-weight: 500; line-height: 1.02; letter-spacing: -0.035em; color: #EEF0EA; }
.hw .hw-line { margin: 0; font-size: 15px; line-height: 1.5; color: rgba(238, 240, 234, .76); text-wrap: pretty; }
.hw .hw-node { display: block; width: 12px; height: 12px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 6px #173533; }


/* ---------- B. Story: the field holds still, the step you're on lights up on the left and its thing comes forward on the right ---------- */
.hw-story { position: relative; height: calc(100svh + 270svh); }
.hw-story .hw-field { position: sticky; top: var(--top); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-xl); height: calc(100svh - var(--top) - 24px); padding: var(--space-xl) var(--space-xl); border-radius: 6px; background: var(--field); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); overflow: hidden; box-sizing: border-box; }
.hw-story .hw-list { position: relative; align-self: center; display: grid; gap: clamp(18px, 2.2svh, 30px); margin: 0; padding: 0 0 0 34px; list-style: none; }
.hw-story .hw-list::before, .hw-story .hw-list::after { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: var(--rail); }
.hw-story .hw-list::after { background: var(--mint); transform-origin: 0 0; transform: scaleY(var(--fill, 0)); }
.hw-story .hw-item { position: relative; }
.hw-story .hw-item::before { content: ""; position: absolute; left: -34px; top: 4px; z-index: 1; width: 12px; height: 12px; border-radius: 50%; background: #14302E; box-shadow: 0 0 0 6px #163331, inset 0 0 0 2px var(--rail); transition: background-color .5s var(--in), box-shadow .5s var(--in); }
.hw-story .hw-item.is-past::before, .hw-story .hw-item.is-on::before { background: var(--mint); box-shadow: 0 0 0 6px #163331; }
.hw-story .hw-pick { display: grid; gap: 6px; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; }
.hw-story .hw-title { display: block; font-size: clamp(30px, 2.9vw, 50px); color: rgba(238, 240, 234, .36); transition: color .5s var(--in); }
.hw-story .hw-pick:hover .hw-title { color: rgba(238, 240, 234, .62); }
.hw-story .hw-item.is-on .hw-title { color: #EEF0EA; }
.hw-story .hw-when { transition: color .5s var(--in); }
.hw-story .hw-item:not(.is-on) .hw-when { color: rgba(238, 240, 234, .38); }
.hw-story .hw-more { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows .6s var(--in), opacity .5s var(--in); }
.hw-story .hw-more > p { min-height: 0; overflow: hidden; }
.hw-story .hw-item.is-on .hw-more { grid-template-rows: 1fr; opacity: 1; }
.hw-story .hw-line { padding-top: 12px; max-width: 34ch; font-size: 16px; }
.hw-story .hw-stage { position: relative; min-height: 0; }
.hw-story .hw-bar { display: none; }
.hw-story .hw-pick:focus-visible { outline: 2px solid var(--mint); outline-offset: 6px; }
@media (max-width: 760px) {
  .hw { --top: 76px; }
  .hw-story { height: calc(100svh + 240svh); }
  .dark-site .process .wrap > .hw-story { margin-inline: calc(-1 * var(--gutter)); }
  .hw-story .hw-field { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; row-gap: 18px; height: calc(100svh - var(--top) - 92px); padding: 18px var(--gutter) 22px; border-radius: 0; box-shadow: none; }
  .hw-story .hw-bar { display: grid; grid-row: 1; grid-template-columns: repeat(4, 1fr); gap: 6px; height: 2px; }
  .hw-story .hw-bar i { display: none; }
  .hw-story .hw-bar::before { content: ""; grid-column: 1 / -1; grid-row: 1; height: 2px; background: linear-gradient(var(--mint), var(--mint)) 0 0 / calc(var(--fill, 0) * 100%) 100% no-repeat, var(--rail); }
  .hw-story .hw-stage { grid-row: 2; }
  .hw-story .hw-list { grid-row: 3; align-self: end; padding: 0; }
  .hw-story .hw-list::before, .hw-story .hw-list::after, .hw-story .hw-item::before { display: none; }
  .hw-story .hw-item { grid-area: 1 / 1; opacity: 0; transform: translateY(10px); transition: opacity .5s var(--in), transform .5s var(--in); pointer-events: none; }
  .hw-story .hw-item.is-on { opacity: 1; transform: none; pointer-events: auto; }
  .hw-story .hw-more { grid-template-rows: 1fr; opacity: 1; }
  .hw-story .hw-title { font-size: 32px; }
  .hw-story .hw-line { padding-top: 8px; font-size: 15px; }
}


/* ---------- the devices: a phone and a laptop on a still stage ---------- */
.hd .hw-story .hw-field { background: #0D0D0D; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
.hd--night .hw-story .hw-field { background: radial-gradient(90% 70% at 72% 46%, #161D1C 0%, #0D0D0D 60%, #0A0E0D 100%); }
.hd--night .hw-story .hw-item::before { box-shadow: 0 0 0 6px #0D0D0D, inset 0 0 0 2px var(--rail); background: #0D0D0D; }
.hd--night .hw-story .hw-item.is-past::before, .hd--night .hw-story .hw-item.is-on::before { background: var(--mint); box-shadow: 0 0 0 6px #0D0D0D; }

.hd .hw-stage { isolation: isolate; }
/* a soft light from above and the device's own shadow on the floor, as in a product shot */
.hd-light { position: absolute; left: 10%; right: 10%; top: -10%; height: 80%; z-index: -1; background: radial-gradient(closest-side, rgba(239, 236, 229, .09), rgba(239, 236, 229, 0)); pointer-events: none; }
.hd-floor { position: absolute; left: 22%; right: 22%; bottom: 6%; height: 50px; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, 0)); filter: blur(6px); pointer-events: none; }
/* each step's fade (and the laptop's quote-to-preview, --q) is its own: registered so a change to it restyles only the
   element that uses it, not every part of its photograph */
@property --o { syntax: '<number>'; inherits: false; initial-value: 0; }
@property --q { syntax: '<number>'; inherits: false; initial-value: 0; }
/* the slide's rise and ease back on laptops: also its own, so moving a slide never restyles everything inside it */
@property --hy { syntax: '<length-percentage>'; inherits: false; initial-value: 0px; }
@property --hs { syntax: '<number>'; inherits: false; initial-value: 1; }
.hd .hd-slide { position: absolute; inset: 0; display: grid; place-items: center; opacity: var(--o, 0); transform: translateY(var(--hy)) scale(var(--hs)); will-change: transform, opacity; }
.hd .hd-fit { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(var(--fit, 1)); transform-origin: 50% 50%; }

/* ---------- the phone ---------- */
.hd-phone { position: relative; width: 300px; height: 620px; font-family: var(--font-text); }
.hd-ph-shell { position: absolute; inset: 0; border-radius: 54px; padding: 11px; background: #060707; box-shadow: 0 0 0 1.5px #3A3E40, 0 0 0 3.5px #1B1E1F, 0 0 0 4.5px #55595B, 0 50px 80px -30px rgba(0, 0, 0, .9), 0 20px 40px -20px rgba(0, 0, 0, .7); }
.hd-ph-screen { position: relative; width: 100%; height: 100%; border-radius: 43px; overflow: hidden; background: #000; }
.hd-island { position: absolute; top: 22px; left: 50%; width: 92px; height: 27px; margin-left: -46px; border-radius: 14px; background: #000; z-index: 5; }
.hd-glass { position: absolute; inset: 11px; z-index: 6; border-radius: 43px; pointer-events: none; background: linear-gradient(120deg, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, 0) 32%); }
.hd-btn { position: absolute; width: 4px; border-radius: 2px; background: linear-gradient(90deg, #2A2D2F, #5A5E60); }
.hd-btn--a { left: -5px; top: 118px; height: 26px; }
.hd-btn--b { left: -5px; top: 166px; height: 50px; }
.hd-btn--c { right: -5px; top: 186px; height: 78px; background: linear-gradient(270deg, #2A2D2F, #5A5E60); }
.hd-sb { position: absolute; left: 0; right: 0; top: 0; z-index: 4; display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 4px 30px 0 36px; color: #F3EFE6; font: 600 14px/1 var(--font-text); letter-spacing: -0.01em; }
.hd-sb--dark { color: #F3EFE6; }
.hd-ic { display: inline-flex; align-items: center; gap: 5px; }
.hd-ic svg { height: 11px; width: auto; fill: currentColor; }
.hd-home { position: absolute; left: 50%; bottom: 8px; width: 120px; height: 4.5px; margin-left: -60px; border-radius: 3px; background: rgba(243, 239, 230, .85); z-index: 4; }

/* lock screen */
.hd-lock { position: absolute; inset: 0; color: #F3EFE6; background: radial-gradient(120% 70% at 30% 12%, #2E4A46 0%, #15211F 46%, #070A0A 100%); }
.hd-lock::after { content: ""; position: absolute; inset: 0; background: radial-gradient(80% 40% at 80% 100%, rgba(140, 207, 198, .14), transparent 70%); }
.hd-date { position: relative; z-index: 1; margin: 0; padding-top: 80px; text-align: center; font: 500 16px/1 var(--font-text); color: rgba(243, 239, 230, .82); }
.hd-clock { position: relative; z-index: 1; margin: 6px 0 0; text-align: center; font: 600 86px/1 var(--font-text); letter-spacing: -0.045em; }
.hd-notes { position: absolute; z-index: 2; left: 10px; right: 10px; top: 300px; display: grid; }
.hd-note { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; align-items: start; padding: 12px 13px 13px; border-radius: 20px; background: rgba(242, 240, 234, .86); color: #111111; -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); font-family: var(--font-text); }
.hd-notes .hd-note { grid-area: 1 / 1; position: relative; z-index: 2; }
.hd-note--back { z-index: 1 !important; transform: translateY(46px) scale(.93); opacity: .62; }
.hd-note p { margin: 0; }
.hd-nh { display: flex; justify-content: space-between; font: 500 11.5px/1.2 var(--font-text); color: rgba(17, 22, 21, .55); }
.hd-nt { margin-top: 2px !important; font: 600 14px/1.25 var(--font-text); }
.hd-nb { margin-top: 1px !important; font: 400 13px/1.3 var(--font-text); color: rgba(17, 22, 21, .82); }
.hd-app { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 8px; background: #0A0A0A; color: #8CCFC6; }
.hd-app svg { width: 20px; height: auto; }
.hd-app--cal { display: grid; grid-template-rows: 11px 1fr; place-items: center; background: #fff; color: #111111; box-shadow: inset 0 0 0 1px rgba(17, 22, 21, .08); padding-top: 3px; }
.hd-app--cal b { font: 700 7.5px/1 var(--font-text); color: #D9473B; letter-spacing: .02em; font-style: normal; }
.hd-app--cal span { font: 500 18px/1 var(--font-text); letter-spacing: -0.03em; }
.hd-lockfoot { position: absolute; z-index: 2; left: 34px; right: 34px; bottom: 34px; display: flex; justify-content: space-between; }
.hd-lockfoot i { width: 44px; height: 44px; border-radius: 50%; background: rgba(243, 239, 230, .16); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

/* the live site on the phone */
.hd-live { position: absolute; inset: 0; background: #17120E; }
.hd-live video { position: absolute; left: 0; right: 0; top: 50px; bottom: 0; width: 100%; height: calc(100% - 50px); object-fit: cover; object-position: 50% 0; }
.hd-note--top { position: absolute; z-index: 5; left: 10px; right: 10px; top: 58px; }

/* ---------- the laptop ---------- */
.hd-laptop { position: relative; width: 820px; font-family: var(--font-text); }
.hd-lid { position: relative; margin: 0 34px; padding: 14px 14px 18px; border-radius: 20px 20px 4px 4px; background: #070808; box-shadow: 0 0 0 1px #2C3032, 0 0 0 2.5px #4A4F51, 0 40px 80px -40px rgba(0, 0, 0, .9); }
.hd-cam { position: absolute; top: 5px; left: 50%; width: 5px; height: 5px; margin-left: -2.5px; border-radius: 50%; background: #1E2526; }
.hd-lscreen { position: relative; aspect-ratio: 16 / 10; border-radius: 4px; overflow: hidden; background: #F3F1EC; }
.hd-base { position: relative; height: 16px; border-radius: 2px 2px 14px 14px / 2px 2px 10px 10px; background: linear-gradient(180deg, #9EA3A6 0%, #6E7376 35%, #3B3F41 100%); box-shadow: 0 30px 40px -20px rgba(0, 0, 0, .9); }
.hd-base i { position: absolute; left: 50%; top: 0; width: 120px; height: 6px; margin-left: -60px; border-radius: 0 0 8px 8px; background: linear-gradient(180deg, #5C6164, #8A8F92); }
.hd-win { position: absolute; inset: 0; display: grid; grid-template-rows: 32px minmax(0, 1fr); background: #F3F1EC; transition: none; }
.hd-win--quote { opacity: calc(1 - var(--q, 0)); }
.hd-win--prev { opacity: var(--q, 0); }
.hd-bar { display: flex; align-items: center; gap: 6px; padding: 0 12px; background: #E7E3DB; border-bottom: 1px solid rgba(20, 25, 23, .1); }
.hd-bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(20, 25, 23, .16); }
.hd-bar i:nth-child(1) { background: #E5685D; } .hd-bar i:nth-child(2) { background: #E9B649; } .hd-bar i:nth-child(3) { background: #69BE5C; }
.hd-url { margin: 0 auto; transform: translateX(-24px); width: 46%; padding: 4px 10px; border-radius: 6px; background: rgba(255, 255, 255, .7); font: 500 11.5px/1.2 var(--font-text); color: rgba(20, 25, 23, .62); text-align: center; }
.hd-page { position: relative; overflow: hidden; }

/* the quote, as the page it is */
.hd-win--quote .hd-page { display: grid; place-items: center; background: #EFECE5; }
.hd-doc { width: 380px; padding: 26px 28px 24px; border-radius: 4px; background: #fff; color: #141414; box-shadow: 0 1px 2px rgba(20, 25, 23, .08), 0 20px 40px -24px rgba(20, 25, 23, .35); }
.hd-doc p { margin: 0; }
.hd-doc-head { display: flex; align-items: center; gap: 10px; font: 600 20px/1 var(--font); letter-spacing: -0.02em; }
.hd-mark { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #0A0A0A; color: #8CCFC6; }
.hd-mark svg { width: 17px; height: auto; }
.hd-doc-no { margin-left: auto; font: 500 12px/1 var(--font-text); color: #5C6461; letter-spacing: 0; }
.hd-doc-for { margin-top: 18px !important; font: 500 13px/1.3 var(--font-text); color: #5C6461; }
.hd-doc-rows { margin-top: 10px; border-top: 1px solid rgba(20, 25, 23, .12); }
.hd-doc-rows p { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-bottom: 1px solid rgba(20, 25, 23, .1); font: 400 13.5px/1.3 var(--font-text); }
.hd-doc-rows p.tot { border-bottom: 0; font-weight: 600; font-size: 15px; }
.hd-doc-rows b { white-space: nowrap; font-weight: 600; }
.hd-doc-date { margin-top: 2px !important; font: 400 13px/1.3 var(--font-text); color: #3A423F; }
.hd-doc-ok { display: flex; align-items: center; gap: 12px; margin-top: 18px !important; }
.hd-doc-ok span { padding: 9px 14px 9px 32px; border-radius: 999px; background: #8CCFC6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2l2.2 2.2 4.8-5' fill='none' stroke='%23141917' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E") 12px 50% / 12px no-repeat; font: 600 13px/1 var(--font-text); }
.hd-doc-ok small { font: 400 12px/1 var(--font-text); color: #5C6461; }

/* the preview, the real site with a comment on it */
.hd-win--prev .hd-page video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hd-pin { position: absolute; right: 13%; top: 3.5%; z-index: 2; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50% 50% 50% 4px; background: #F2D16B; box-shadow: 0 0 0 2px #fff, 0 6px 14px -4px rgba(0, 0, 0, .5); }
.hd-pin i { font: 700 10px/1 var(--font-text); font-style: normal; color: #141414; }
.hd-thread { position: absolute; right: 14px; top: 44px; z-index: 2; display: grid; gap: 10px; width: 236px; padding: 12px; border-radius: 10px; background: #fff; color: #141414; box-shadow: 0 1px 2px rgba(0, 0, 0, .1), 0 24px 40px -20px rgba(0, 0, 0, .6); }
.hd-c { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 8px; margin: 0; font: 400 12.5px/1.35 var(--font-text); }
.hd-c b { display: block; font-weight: 600; font-size: 12px; }
.hd-c i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; overflow: hidden; background: #F2D16B; font: 700 10px/1 var(--font-text); font-style: normal; }
.hd-c i img { width: 100%; height: 100%; object-fit: cover; }
.hd-c--us { padding-top: 10px; border-top: 1px solid rgba(20, 25, 23, .1); }

/* pause for the two films */
.hd-pause { position: absolute; right: 18px; bottom: 18px; z-index: 6; display: grid; place-items: center; width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(238, 240, 234, .12); color: #EEF0EA; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .4s var(--in), background-color .3s var(--in); }
.hd-pause.is-shown { opacity: 1; pointer-events: auto; }
.hd-pause:hover { background: rgba(238, 240, 234, .22); }
.hd-pause svg { width: 12px; height: 12px; }
.hd-pause:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px; }
@media (max-width: 760px) {
  .hd-floor { bottom: 2%; }
  .hd-pause { right: 10px; bottom: 8px; }
}
@media (min-width: 761px) { .hd .hw-story .hw-field { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); } }

/* ---------- the weeks of the preview, and the live site on the phone ---------- */
.hd .hw-story { height: calc(100svh + 330svh); }
@media (max-width: 760px) { .hd .hw-story { height: calc(100svh + 300svh); } }
/* the real site, as it looked in week 1, 2 and 3; the week on screen fades up over the last */
.hd-wk { position: absolute; inset: 0; opacity: 0; transition: opacity .7s var(--in); }
.hd-wk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.hd-win--prev .hd-page .hd-wk-film { position: absolute; inset: auto; left: 0; top: 37.5%; width: 100%; height: 68.6%; object-fit: cover; }
.hd-wk--1, [data-week="1"] .hd-wk--1, [data-week="2"] .hd-wk--2, [data-week="3"] .hd-wk--3 { opacity: 1; }
[data-week="2"] .hd-wk--1, [data-week="3"] .hd-wk--1 { opacity: 0; }
.hd-tab { font-weight: 500; }
/* your comment arrives on week 2, where the number is missing; Alex's reply and the number come with week 3 */
.hd-pin { right: 3.2%; top: 2.6%; opacity: 0; transform: translateY(6px); transition: opacity .5s var(--in), transform .5s var(--in); }
.hd-thread { top: 40px; right: 18px; opacity: 0; transform: translateY(8px); transition: opacity .5s var(--in), transform .5s var(--in); }
.hd-c--us { display: none; }
[data-week="2"] .hd-pin, [data-week="3"] .hd-pin, [data-week="2"] .hd-thread, [data-week="3"] .hd-thread { opacity: 1; transform: none; }
[data-week="3"] .hd-c--us { display: grid; }
[data-week="3"] .hd-pin { background: #8CCFC6; }
/* the weeks named under the laptop, the one on screen lit */
.hd-weeks { display: flex; justify-content: center; gap: 28px; margin-top: 30px; opacity: var(--q, 0); }
.hd-weeks span { position: relative; padding-bottom: 10px; font: 500 15px/1 var(--font-text); color: rgba(238, 240, 234, .38); transition: color .5s var(--in); }
.hd-weeks span::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: rgba(238, 240, 234, .14); }
.hd-weeks span::before { content: ""; position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; height: 2px; border-radius: 1px; background: var(--mint); transform: scaleX(0); transform-origin: 0 0; transition: transform .6s var(--in); }
[data-week="1"] .hd-weeks span:nth-child(1), [data-week="2"] .hd-weeks span:nth-child(-n+2), [data-week="3"] .hd-weeks span { color: #EEF0EA; }
[data-week="1"] .hd-weeks span:nth-child(1)::before, [data-week="2"] .hd-weeks span:nth-child(-n+2)::before, [data-week="3"] .hd-weeks span::before { transform: none; }
/* the live site under a light status bar, as Safari shows it, with its own film playing */
.hd-live { background: #F5EFE4; }
.hd-sb--ink { color: #14353A; }
.hd-home--ink { background: rgba(20, 53, 58, .75); }
.hd-site { position: absolute; left: 0; right: 0; top: 50px; aspect-ratio: 390 / 844; }
.hd-site img { display: block; width: 100%; height: 100%; }
.hd-live .hd-site-film { position: absolute; inset: auto; left: 0; top: 34.35%; width: 100%; height: 57.76%; object-fit: cover; }
.hd-note--top { top: 56px; box-shadow: 0 14px 34px -10px rgba(20, 30, 28, .45), 0 0 0 1px rgba(20, 30, 28, .06); }
/* the comment sits over the photo, clear of the name */
.hd-win--prev .hd-thread { top: auto; bottom: 16px; right: 16px; }
.hd-floor { bottom: 14%; }
/* phones: the laptop is drawn small, so its comment and the weeks under it are set larger to stay readable */
@media (max-width: 760px) {
  .hd-weeks { gap: 40px; margin-top: 40px; }
  .hd-weeks span { font-size: 34px; padding-bottom: 16px; }
  .hd-weeks span::before, .hd-weeks span::after { height: 4px; }
  .hd-win--prev .hd-thread { transform-origin: 100% 100%; scale: 1.9; }
  .hd-floor { bottom: 8%; }
}
/* half a screen of scrolling from one step to the next, so one scroll moves one step (how.js glides it the rest of the way) */
.hd .hw-story { height: calc(100svh + 150svh); }
@media (max-width: 760px) { .hd .hw-story { height: calc(100svh + 150svh); } }
/* the note on the lock screen is nearly solid, so it does without the blur behind it, which the browser would
   otherwise redraw on every frame while the phone moves */
.hd-note { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(242, 240, 234, .95); }

/* Laptops: each step's photograph slides up over the last inside the stage (how.js), so the stage trims what's still
   below it, and the edge coming up casts a soft shadow onto the step it covers */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .hd .hw-stage { overflow: clip; }
  .hd .hd-slide { transform-origin: 50% 0; }
  .hd .hd-slide + .hd-slide { box-shadow: 0 -30px 60px -30px rgba(0, 0, 0, .7); }
}

/* Laptops: the phone's Safari bar and the lock screen's two round buttons were frosted with a live blur of what's
   behind them. A live blur is worked out again on every frame anything behind it moves (the phone's film plays under
   the bar, and the whole photo moves as it slides), which kept the graphics chip busy through this section. The bar is
   90% solid and the buttons sit on a smooth dark wallpaper, so a plain fill of the same colour looks the same. */
@media (hover: hover) and (pointer: fine) and (min-width: 761px) {
  .hd .hd-saf { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(30, 30, 32, .93); }
  .hd .hd-lockfoot i { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* Phones: the story's heights use a screen height held fixed by how.js (--hw-vh, one hundredth of it), not svh, which
   in Instagram's browser changes as its bar comes and goes; without the script they fall back to svh as before */
.hw-vh-probe { position: fixed; top: 0; left: 0; width: 0; height: 100svh; visibility: hidden; pointer-events: none; }
@media (max-width: 760px) {
  .hd .hw-story { height: calc(var(--hw-vh, 1svh) * 250); }
}