/* How it works (2026-10-17). On computers (with the script) the four
   steps' words scroll up the middle while their pictures share one pinned
   frame on the right that changes as each step reaches the middle of the
   screen, with a 1 to 4 rail on the left (js/hiw.js). Without the script
   and on phones the steps stack, each picture under its words, and the rail
   becomes a bar under the header. Pictures rest on their last frame without
   the script or with reduced motion. */

.hiw { border-top: 1px solid var(--line); }
.hiw-cue { display: flex; width: max-content; margin: 0 auto; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 99px; background: #fff; box-shadow: 0 0 0 1px var(--line); color: var(--ink-3); font-size: 14px; font-weight: 600; transform: translateY(-50%); }
.hiw-cue svg { width: 12px; height: 12px; animation: hiwBob 1.6s ease-in-out infinite; }
@keyframes hiwBob { 50% { transform: translateY(3px); } }

.hiw-grid { display: grid; grid-template-columns: minmax(0, 1fr); padding-block: 8px clamp(56px, 7vw, 96px); }
.hiw-rail { display: none; }
.hiw-step { padding-top: clamp(48px, 7vw, 72px); text-align: center; scroll-margin-top: calc(var(--nav-h) + 24px); }
.hiw-num { display: inline-flex; width: 40px; height: 40px; border-radius: 999px; align-items: center; justify-content: center; background: var(--purple-soft); color: var(--purple); font-size: 17px; font-weight: 700; }
.hiw-title { margin-top: 20px; font-size: clamp(34px, 4.4vw, 56px); line-height: 1.04; letter-spacing: -0.04em; font-weight: 700; text-wrap: balance; }
.hiw-body { margin: 16px auto 0; max-width: 30ch; font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; color: var(--ink-3); }
.hiw-art { min-width: 0; margin-top: 32px; text-align: left; }
.hiw-rec { max-width: 640px; margin: 0 auto; }
.hiw-rec video { display: block; width: 100%; height: auto; border-radius: calc(var(--r) - var(--frame)); background: #1A1A1E; } /* frame color: a white background showed as a hairline along the bottom (2026-10-23) */

/* The rail: four numbered dots on a line that fills as you go. */
.hiw-rail { list-style: none; position: relative; margin: 0; padding: 0; }
.hiw-rail li { position: relative; z-index: 1; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #fff; box-shadow: 0 0 0 1.5px var(--line); color: var(--ink-4); font-size: 13px; font-weight: 700; transition: background 0.3s, color 0.3s, box-shadow 0.3s; }
.hiw-rail li.done { background: var(--purple); color: #fff; box-shadow: 0 0 0 1.5px var(--purple); }
.hiw-rail-fill { position: absolute; z-index: 0; background: var(--purple); transition: height 0.4s ease, width 0.4s ease; }

/* With the script the rail shows the numbers, so the badges go. */
.hiw.js-steps .hiw-num { display: none; }
.hiw.js-steps .hiw-title { margin-top: 0; }

/* Phones with the script: the rail as a bar under the header. */
.hiw.js-steps .hiw-rail { display: flex; justify-content: center; gap: 36px; position: sticky; top: var(--nav-h); z-index: 5; padding: 10px 0; margin: 0 calc(-1 * var(--gutter, 20px)); background: #fff; box-shadow: 0 1px 0 var(--line); }
.hiw.js-steps .hiw-rail::before { content: ''; position: absolute; left: 50%; top: 50%; width: calc(3 * 66px); height: 2px; transform: translate(-50%, -50%); background: var(--line); }
.hiw.js-steps .hiw-rail-fill { left: calc(50% - 99px); top: calc(50% - 1px); height: 2px; width: var(--fill, 0px); }

@media (min-width: 861px) {
  .hiw.js-steps .hiw-grid { grid-template-columns: 30px minmax(0, 0.8fr) minmax(0, 1.2fr); column-gap: clamp(28px, 4vw, 64px); padding-block: 0 clamp(48px, 6vw, 80px); }
  .hiw.js-steps .hiw-rail { grid-column: 1; grid-row: 1 / 5; align-self: start; flex-direction: column; gap: 26px; top: calc(var(--nav-h) + (100svh - var(--nav-h)) / 2 - 96px); margin: 120px 0 0; padding: 0; background: none; box-shadow: none; }
  .hiw.js-steps .hiw-rail::before { left: 50%; top: 15px; width: 2px; height: calc(100% - 30px); transform: translateX(-50%); }
  .hiw.js-steps .hiw-rail-fill { left: calc(50% - 1px); top: 15px; width: 2px; height: var(--fill, 0px); }
  .hiw.js-steps .hiw-step { grid-column: 2; grid-row: var(--row); min-height: 72svh; padding: 0; display: flex; flex-direction: column; justify-content: center; text-align: left; opacity: 0.2; transition: opacity 0.22s ease-out; }
  .hiw.js-steps .hiw-step:first-of-type { justify-content: flex-start; padding-top: 72px; }
  .hiw.js-steps .hiw-step.is-active { opacity: 1; }
  .hiw.js-steps .hiw-body { margin-left: 0; }
  .hiw.js-steps .hiw-art { grid-column: 3; grid-row: 1 / 5; align-self: start; position: sticky; top: calc(var(--nav-h) + (100svh - var(--nav-h) - var(--frame-h)) / 2); height: var(--frame-h); margin-top: 48px; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: scale(0.97); transition: opacity 0.45s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 0.45s; }
  .hiw.js-steps .hiw-art.is-active { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
  .hiw.js-steps .hiw-art > * { width: 100%; }
  .hiw { --frame-h: min(470px, calc(100svh - var(--nav-h) - 80px)); }
}

.hiw-promise { padding-block: clamp(64px, 8vw, 112px); border-top: 1px solid var(--line); text-align: center; }
.hiw-promise p { max-width: 30ch; margin: 0 auto; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.25; letter-spacing: -0.025em; }
.hiw-promise b { display: block; font-weight: 700; }

/* The drawn pictures: 520 by 400, sized in em off their box width. */
.hv { width: 100%; max-width: 520px; margin: 0 auto; container-type: inline-size; }
.hv-in { font-size: 10px; font-size: calc(100cqw / 52); width: 52em; height: 40em; position: relative; display: flex; align-items: center; justify-content: center; }

/* Step 1: the booked demo. */
.hd-card { width: 38em; background: #fff; border-radius: 2em; padding: 2.6em 2.8em; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 3em 6em -2.8em rgba(0,0,0,0.3); text-align: left; }
.hd-top { display: flex; align-items: center; gap: 1.4em; padding-bottom: 1.8em; border-bottom: 1px solid #F0F0F2; margin-bottom: 1.2em; }
.hd-check { flex: none; width: 4.4em; height: 4.4em; border-radius: 50%; background: #16A34A; display: flex; align-items: center; justify-content: center; }
.hd-check svg { width: 58%; height: 58%; }
.hd-top b { display: block; font-size: 2.1em; letter-spacing: -0.03em; }
.hd-top div span { display: block; margin-top: 0.15em; font-size: 1.4em; color: #6E6E73; }
.hd-row { display: flex; align-items: center; gap: 1.1em; padding: 0.7em 0; font-size: 1.55em; color: #1D1D1F; }
.hd-ic { flex: none; width: 1.5em; height: 1.5em; color: var(--purple); }
.hd-ic svg { width: 100%; height: 100%; }

/* Step 2: products going in. */
.hp-card { width: 46em; background: #fff; border-radius: 2em; padding: 2.2em 2.4em 1.4em; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 3em 6em -2.8em rgba(0,0,0,0.3); text-align: left; }
.hp-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2em; }
.hp-head b { font-size: 2em; letter-spacing: -0.03em; }
.hp-tabs { display: flex; gap: 0.3em; padding: 0.3em; border-radius: 99px; background: #F2F2F4; }
.hp-tabs span { padding: 0.45em 1.1em; border-radius: 99px; font-size: 1.25em; color: #6E6E73; transition: background 0.25s, color 0.25s, box-shadow 0.25s; }
.hp-tabs span.on { background: #fff; color: #1D1D1F; font-weight: 600; box-shadow: 0 1px 3px rgba(0,0,0,0.12); }
.hp-row { display: flex; align-items: center; gap: 1.2em; padding: 1em 0; border-top: 1px solid #F0F0F2; }
.hp-art { flex: none; width: 4.2em; height: 4.2em; border-radius: 0.9em; background: #F4F4F6; display: flex; align-items: center; justify-content: center; }
.hp-art .prod { height: 78%; width: auto; max-width: 80%; object-fit: contain; }
.hp-name { flex: 1; min-width: 0; font-size: 1.45em; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-name small { display: block; font-size: 0.82em; font-weight: 400; color: #6E6E73; }
.hp-price { font-size: 1.4em; font-weight: 600; }
.hp-ok { padding: 0.35em 0.9em; border-radius: 99px; background: #E8F7EE; color: #15803D; font-size: 1.2em; font-weight: 600; }

/* Step 3: the website building itself (the Online store picture's parts). */
.hb { position: relative; max-width: 560px; margin: 0 auto; padding-bottom: 28px; }
.hb .hb-browser { width: 100%; }
.hb-chip { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 10px 16px 14px; border-radius: 16px; background: #1D1D1F; color: #fff; font-size: 13px; white-space: nowrap; box-shadow: 0 14px 30px -12px rgba(0,0,0,0.45); }
.hb-dot { width: 10px; height: 10px; border-radius: 50%; background: #C98BFF; }
.hb-label b { font-weight: 700; margin-right: 4px; }
.hb-done { display: none; }
.hb-bar { position: absolute; left: 16px; right: 16px; bottom: 7px; height: 3px; border-radius: 99px; background: rgba(255,255,255,0.18); overflow: hidden; }
.hb-bar i { position: absolute; inset: 0; width: 100%; border-radius: 99px; background: #C98BFF; }
.hb.is-done .hb-label { display: none; }
.hb.is-done .hb-done { display: inline; }
.hb.is-done .hb-dot { background: #4ADE80; }

/* The motion, only when js/hiw.js turns it on (motion allowed). Each step
   starts from its first frame when it comes on screen ("in"). */
.hiw.js-anim .hiw-art:not(.in) .hd-card { opacity: 0; transform: translateY(2.4em) scale(0.97); }
.hiw.js-anim .hiw-art:not(.in) .hd-check { transform: scale(0); }
.hiw.js-anim .hiw-art:not(.in) .hd-row { opacity: 0; transform: translateY(0.8em); }
.hiw.js-anim .hd-card { transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1); }
.hiw.js-anim .hd-check { transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s; }
.hiw.js-anim .hd-row { transition: opacity 0.4s ease, transform 0.4s ease; }
.hiw.js-anim .hd-row:nth-of-type(2) { transition-delay: 0.7s; }
.hiw.js-anim .hd-row:nth-of-type(3) { transition-delay: 0.85s; }
.hiw.js-anim .hd-row:nth-of-type(4) { transition-delay: 1s; }

.hiw.js-anim .hp-row { transition: opacity 0.4s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.hiw.js-anim .hp-row:not(.shown) { opacity: 0; transform: translateY(1em); }
.hiw.js-anim .hp-ok { transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s; }
.hiw.js-anim .hp-row:not(.shown) .hp-ok { transform: scale(0.4); }

.hiw.js-anim .hb-part { transition: opacity 0.45s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1); }
.hiw.js-anim .hb-part:not(.shown) { opacity: 0; transform: translateY(10px); }
.hiw.js-anim .hb-bar i { transition: width 0.5s ease; }

@media (prefers-reduced-motion: reduce) {
  .hiw-art *, .hiw-art, .hiw-step, .hiw-rail li, .hiw-rail-fill, .hiw-cue svg { transition: none !important; animation: none !important; }
}

/* The hero headline breaks evenly (no word alone on the last line). */
.page-hero:has(+ .hiw) .h1 { text-wrap: balance; }