@import url("../arsenal/thread.css");
/* how-it-works.css: the How it works page's parts placed and sized, with the tokens of system.css and the components
   of components.css. The line is the arsenal composition `thread` (imported above, never edited). */

/* ---------- the thread: a chain of small diamonds down the page's middle lane ---------- */
/* The line rides above every part's ground and footage (z-index 1) and under what it plugs into or passes behind: the
   numbers, the node, the buttons, the scenes and the photos (z-index 2). No part makes a stacking context of its own,
   so all of them share the thread's one order. From 1100 px down it is a short line beside each run of steps. */
.hiw-thread { --thread-link: 8px; --thread-gap: 15px; }
.hiw-thread .thread__svg { z-index: 1; }
.hiw-thread :where([data-thread-anchor], [data-thread-light]) { position: relative; z-index: 2; }
.hiw-thread .thread__glyph { fill: var(--c-accent); }
@media (max-width: 1099.98px) { .hiw-thread { --thread-narrow: 1; } }

/* the designed ground, drawn in the part's own background (not a layer under it), so the line shows over it */
.hiw-thread > .ground { --ground: var(--c-paper-alt); isolation: auto; background-image: radial-gradient(120% 90% at 50% 50%, transparent 40%, var(--ground) 100%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-ink) 6%, transparent) 0 1px, transparent 1px 34px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c-ink) 6%, transparent) 0 1px, transparent 1px 34px); }
.hiw-thread > .ground--paper { --ground: var(--c-paper); }
.hiw-thread > .ground--navy { --ground: var(--c-ink); background-image: radial-gradient(120% 90% at 50% 50%, transparent 40%, var(--ground) 100%), repeating-linear-gradient(45deg, color-mix(in srgb, var(--c-on-ink) 7%, transparent) 0 1px, transparent 1px 34px), repeating-linear-gradient(-45deg, color-mix(in srgb, var(--c-on-ink) 7%, transparent) 0 1px, transparent 1px 34px); }
.hiw-thread > .ground::before { content: none; }

/* ---------- hero: full-bleed footage of an owner at her desk going through her schedule; the words on the left, her
   new call, booking and review landing on the right ---------- */
.hiw-hero { position: relative; overflow: hidden; box-sizing: border-box; display: flex; align-items: center; min-height: clamp(600px, calc(100svh - var(--header-h) - 40px), 800px); padding-block: 56px 112px; background: var(--c-ink); color: var(--c-on-ink); }
.hiw-hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
/* the kit's header CSS, as kit.md gives it */
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [data-kit-slide][data-kit-on] { visibility: visible; z-index: 2; opacity: var(--kit-move, 1); transform: translateX(var(--kit-glide, calc((1 - var(--kit-move, 1)) * 4%))); } /* the kit gives the glide in whole device pixels */
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; }
[data-kit-scene="rotate"] [data-kit-slide] video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; clip-path: inset(2px); } /* each clip reaches 1 px past its frame, so no still picture shows beside it; until it has shown its first frames, its first paint is cut 1 px inside the frame, so the first picture stays the largest paint */
[data-kit-scene="rotate"] [data-kit-slide] video[data-kit-shown] { clip-path: none; } /* the kit marks a clip once it has shown its first frames */
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { opacity: clamp(0, (1 - var(--kit-move, 0)) * 1000, 1); } /* the picture that left goes once the new one covers it whole */
[data-kit-scene="rotate"] [data-kit-slide] img.kit-first { inset: -1px !important; width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; max-width: none; } /* the first picture laid like its clip */
/* her moved into the right two thirds, clear of the words: both clips enlarged from their left edge */
.hiw-hero__slide :is(video, .kit-first) { object-position: 50% 50%; transform: scale(1.3); transform-origin: 0 0; } /* from the top: her head stays whole at every width */
.hiw-hero__slide:nth-of-type(2) video { transform: scale(1.12); } /* at her laptop she sits lower: less, so her face stays above the cards */
/* our grade, one still layer over both slides: the navy deep behind the words on the left, light over her */
.hiw-hero__media::after { --x: max(var(--gutter), calc((100% - var(--max-w)) / 2)); content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 93%, transparent) 0%, color-mix(in srgb, var(--c-ink) 88%, transparent) calc(var(--x) + 500px), color-mix(in srgb, var(--c-ink) 36%, transparent) calc(var(--x) + 700px), color-mix(in srgb, var(--c-ink) 12%, transparent) 100%); }
.hiw-hero__in { position: relative; width: 100%; }
.hiw-hero__copy { display: grid; gap: 22px; max-width: 520px; }
.hiw-hero__title { font-size: clamp(2.375rem, 1.3rem + 3vw, 3.5rem); color: var(--c-on-ink); }
.hiw-hero__lead { max-width: 42ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--c-on-ink-soft); }
.hiw-hero__cta { margin-top: 6px; }
/* her new call, booking and review land at the foot of the right side, under her face, right of her tablet and
   below her cup (they reach past the content's edge toward the screen's, so the tablet stays clear) */
.hiw-hero__seq { position: absolute; z-index: 4; right: max(24px, calc((100% - var(--max-w)) / 2 - 72px)); bottom: 64px; display: grid; justify-items: start; gap: 10px; width: 290px; }
.hiw-hero__seq [data-kit-at] { opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.hiw-hero__card { width: 100%; max-width: none; }
.hiw-hero__ico--star { background: var(--c-accent); color: var(--c-on-accent); }
.hiw-hero__stop { position: absolute; z-index: 5; top: 20px; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); }
@media (min-width: 1100px) { .hiw-hero__cta { flex-wrap: nowrap; } } /* the line leaves the button straight down: its line stays beside it */
@media (max-width: 899px) {
  .hiw-hero { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 0; }
  .hiw-hero__in { grid-row: 1; padding-block: 32px 36px; }
  .hiw-hero__copy { gap: 18px; max-width: 560px; }
  .hiw-hero__media { position: relative; inset: auto; grid-row: 2; grid-column: 1; aspect-ratio: 4 / 3.6; }
  .hiw-hero__slide :is(video, .kit-first) { transform: none; object-position: 58% 50%; }
  .hiw-hero__media::after { background: color-mix(in srgb, var(--c-ink) 12%, transparent); }
  /* under the footage, on the header's navy: never over her or her tablet */
  .hiw-hero__seq { position: relative; right: auto; bottom: auto; grid-row: 3; grid-column: 1; width: auto; max-width: 340px; margin: 18px 16px 28px; }
  .hiw-hero__stop { position: relative; top: auto; right: auto; grid-row: 2; grid-column: 1; align-self: start; justify-self: end; margin: 12px; }
}

/* ---------- the parts below the header ---------- */
.hiw-part { padding-block: clamp(80px, 9vw, 128px); }
.hiw-part__stop { position: absolute; top: 24px; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); }
/* each head stays on one side of the middle lane */
.hiw-head { max-width: min(520px, calc(50% - 60px)); }
.hiw-head--right { margin-left: calc(50% + 60px); }

/* ---------- steps: text on one side, the picture on the other crossing the lane; the number above it, on the lane ---------- */
.hiw-steps { display: grid; gap: clamp(64px, 6vw, 96px); margin: 0; padding: 0; list-style: none; }
.hiw-step { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: 48px; align-items: center; padding-top: 72px; }
.hiw-step--flip { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
.hiw-step__pic { grid-column: 1; grid-row: 1; }
.hiw-step__text { grid-column: 2; grid-row: 1; display: grid; gap: 12px; justify-items: start; max-width: 440px; }
.hiw-step--flip .hiw-step__pic { grid-column: 2; }
.hiw-step--flip .hiw-step__text { grid-column: 1; }
.hiw-step__title { margin: 0; font: 700 var(--fs-h3)/1.25 var(--font-display); letter-spacing: var(--track-display); color: var(--c-ink); }
.hiw-step__line { margin: 0; color: var(--c-ink-soft); }
.hiw-step__who { display: inline-flex; align-items: center; gap: 10px; margin: 4px 0 0; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-accent-text); }
.hiw-step__who::before { content: ""; width: 7px; height: 7px; border-radius: 1px; background: var(--c-accent); transform: rotate(45deg); }
/* the number: white in its diamond frame, filling orange as the line plugs in, one ring spreading as the head moves on */
.hiw-num { position: absolute; top: 12px; left: calc(50% - 24px); }
.hiw-num::before { background: color-mix(in srgb, var(--c-accent) calc(var(--lit, 0) * 100%), var(--c-paper)); border-color: color-mix(in srgb, var(--c-accent) calc(var(--lit, 0) * 100%), var(--c-ink)); }
.hiw-num::after { content: ""; position: absolute; inset: 8px; border: 2px solid var(--c-accent); border-radius: 4px; pointer-events: none; opacity: calc(var(--lit, 0) * (1 - var(--lit-after, 0))); transform: rotate(45deg) scale(calc(1 + var(--lit-after, 0) * 0.9)); }

/* your part, on the navy designed ground: each scene at the picture's inner edge, so the lane runs behind it */
.hiw-yours .hiw-step__line { color: var(--c-on-ink-soft); }
.hiw-yours .hiw-step__who { color: var(--c-accent); }
.hiw-step__pic--scene { display: flex; flex-direction: column; justify-content: center; width: min(100%, 420px); min-height: 320px; justify-self: end; }
.hiw-step--flip .hiw-step__pic--scene { justify-self: start; }
.hiw-step__pic--wide { width: min(100%, 560px); }
.hiw-step__pic .hiw-scene { width: 100%; overflow: visible; } /* each card's shadow shows whole (scene hosts clip by default) */
.hiw-step__pic .hiw-scene--goal { margin-top: auto; } /* the chat grows upward from its foot, moving nothing */
.hiw-step__pic .hiw-scene--bars { --lb-chip-ink: var(--c-brand-dark); } /* the legend's blue on its tint read 4.4:1 */
/* each step's picture a crisp white card on the navy (paper, line border, the large shadow), never the scenes' pale
   gradient panel: the chat's bubbles and the check's rows a light tint inside it, every fill one solid color */
.hiw-step__pic .hiw-scene--goal { --gl-stage: var(--c-paper); --gl-edge: var(--c-line); --gl-card: var(--c-paper-alt); box-shadow: var(--shadow-l); }
.hiw-step__pic .hiw-scene--scan { --sn-stage: var(--c-paper); --sn-edge: var(--c-line); --sn-card: var(--c-paper-alt); box-shadow: var(--shadow-l); }
.hiw-step__pic .hiw-scene--goal .gl-msg.me > span { background: var(--c-brand); }
.hiw-step__pic .hiw-scene--scan .sn-bar i { background: var(--c-brand); }
.hiw-step__pic .hiw-scene--bars .lb-col:not(.setup) i { background: var(--c-brand); }
/* month 1 names itself "Set-up" over its stub, so it never reads as a dead month */
.hiw-step__pic .hiw-scene--bars .lb-col.setup b { display: block; }
/* in the scene's narrow layout the bars are thinner than that word: month 1's column takes its width, so the next bar never covers it */
@container (max-width: 560px) {
  .hiw-step__pic .hiw-scene--bars .lb { grid-template-columns: 44px repeat(11, minmax(0, 1fr)); }
  .hiw-step__pic .hiw-scene--bars .lb-end { white-space: normal; } /* on one line it held the card, and the page, wider than a phone under 382 px */
}
/* on a touch screen the chat is tapped, not clicked: no mouse arrow there */
@media (hover: none), (max-width: 699.98px) {
  .hiw-step__pic .hiw-scene--goal .gl-cursor { display: none; }
}
@media (min-width: 1100px) {
  /* bigger, so each card holds its side of the lane: the scenes keep their design size and are drawn 1.2 times */
  .hiw-yours .hiw-step__pic--scene { width: min(100%, 504px); min-height: 384px; }
  .hiw-yours .hiw-step__pic--wide { width: min(100%, 640px); }
  .hiw-step__pic :is(.hiw-scene--goal, .hiw-scene--scan) { zoom: 1.2; }
  .hiw-step__pic .hiw-scene--bars { zoom: 1.12; }
}

/* the hand-over: your part ends, ours begins, the node on the lane */
.hiw-hand { display: grid; grid-template-columns: minmax(0, 1fr) 48px minmax(0, 1fr); column-gap: 20px; align-items: center; margin-top: clamp(72px, 7vw, 104px); font: 700 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-on-ink); }
.hiw-hand__you { text-align: right; }
.hiw-hand__us { color: var(--c-brand-on-ink); }
.hiw-hand__node { display: grid; place-items: center; width: 48px; height: 48px; }
.hiw-hand__node svg { width: 30px; height: 30px; fill: color-mix(in srgb, var(--c-accent) calc(var(--lit, 0) * 100%), var(--c-paper)); stroke: color-mix(in srgb, var(--c-accent) calc(var(--lit, 0) * 100%), var(--c-ink)); stroke-width: 1.6; stroke-linejoin: round; }

/* our part: framed real photos, a solid scene card on each one's clear side */
.hiw-shot { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.hiw-shot__media { position: absolute; inset: 0; }
.hiw-shot__media :is(img, video) { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
.hiw-shot--live { --pos: 0% 50%; }
.hiw-shot--tune { --pos: 0% 50%; }
.hiw-step .hiw-shot__scene { position: absolute; z-index: 1; left: 18px; bottom: 18px; width: 300px; }
/* 04: the panel as tall as its lines, with room at its top for the alert, so the alert never lands on a line */
.hiw-step .hiw-shot--live .hiw-shot__scene { height: auto; }
.hiw-shot--live .hiw-shot__scene .ln-list { margin-top: 88px; }
.hiw-step .hiw-shot--tune .hiw-shot__scene { width: 320px; height: auto; } /* its height follows its changes */
/* 05: the owner's hands and the customer fill the photo, so the dashboard sits under its foot, over the clothes rail
   at its left, hanging into the lane (the line runs behind it). zoom: the board's tilt showed its 13 px words at
   about 12.3 px; at 1.1 they read at 13.5 (its tilted edge shows whole) */
.hiw-shot--new { aspect-ratio: auto; overflow: visible; background: none; box-shadow: none; }
.hiw-shot--new .hiw-shot__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.hiw-step .hiw-shot--new .hiw-shot__scene { position: relative; left: -40px; bottom: auto; width: 300px; height: 250px; margin-top: -64px; zoom: 1.1; overflow: visible; }

/* ---------- plan: the words on the left, the plan building itself on the right, over the lane ---------- */
.hiw-plan__in { display: grid; grid-template-columns: minmax(0, 1fr) calc(50% + 80px); column-gap: 40px; align-items: center; }
.hiw-plan__copy { display: grid; gap: 28px; justify-items: start; max-width: 460px; }
.hiw-plan__copy .section-head { margin-bottom: 0; }
.hiw-plan__pic { height: 560px; }
.hiw-plan__pic .hiw-plan__scene { width: 100%; height: 100%; overflow: visible; }
.hiw-plan__stop { position: absolute; top: -52px; right: 0; }

/* ---------- team: the words on the left; over his workshop, a mechanic's own question and our team's answer ---------- */
.hiw-team__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 48px; align-items: center; }
.hiw-team__copy { display: grid; gap: 18px; justify-items: start; max-width: 440px; }
.hiw-team__copy .link-arrow { margin-top: 6px; }
.hiw-team__pic { position: relative; aspect-ratio: 3 / 2; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.hiw-team__media { position: absolute; inset: 0; }
.hiw-team__media img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 40%; }
/* the thread over the wall and the bench on the photo's left, clear of him, his hand and his phone (from 45%) */
.hiw-team__seq { position: absolute; z-index: 1; left: 18px; top: 50%; display: grid; justify-items: start; gap: 10px; width: min(300px, calc(45% - 26px)); transform: translateY(-50%); }
.hiw-team__seq [data-kit-at] { opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.hiw-msg { box-sizing: border-box; width: 100%; padding: 11px 14px 12px; border-radius: 16px 16px 16px 6px; background: var(--c-paper); box-shadow: var(--shadow-l); color: var(--c-ink); }
.hiw-msg small { display: block; margin-bottom: 3px; font: 600 13px/1.3 var(--font-ui); color: var(--c-ink-soft); }
.hiw-msg p { margin: 0; font: 600 15px/1.4 var(--font-ui); }
.hiw-msg--us { display: flex; align-items: flex-start; gap: 10px; border-radius: 16px 16px 6px 16px; background: var(--c-brand); color: var(--c-on-brand); }
.hiw-msg--us small { color: var(--c-on-brand); }
.hiw-msg__av { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--c-paper); }
.hiw-msg__av img { width: 18px; height: 18px; }
.hiw-team__stop { position: absolute; z-index: 2; top: 14px; right: 14px; }

/* ---------- close: footage, the words on the left, the button on the lane where the line ends ---------- */
/* the component isolates its footage and shade; here they share the thread's order, so the line runs over them and
   under the button */
.hiw-thread > .end-band { isolation: auto; }
.hiw-thread > .end-band > :is(.end-band__media, .end-band__shade) { z-index: auto; }
.hiw-thread > .end-band > .wrap { position: relative; }
.hiw-close__in { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); column-gap: 40px; align-items: center; }
.hiw-close__copy { grid-column: 1; max-width: none; }
.hiw-close .hiw-close__copy .section-title { font-size: clamp(2rem, 1.4rem + 1.6vw, 2.75rem); }
.hiw-close__go { grid-column: 2; display: grid; justify-items: center; gap: 14px; }
.hiw-close__go .cta-note { color: var(--c-on-ink-soft); }
.hiw-nowrap { white-space: nowrap; }
@media (min-width: 1100px) {
  /* the installer moved to the right third, clear of the button: the clip enlarged from its top left corner, laid
     from its very top so his hard hat stays in the band when he stands */
  .hiw-close .end-band__media video { --pos: 50% 0%; transform: scale(1.35); transform-origin: 0 0; }
  .hiw-close .end-band__shade { background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 86%, transparent) 57%, color-mix(in srgb, var(--c-ink) 30%, transparent) 66%, color-mix(in srgb, var(--c-ink) 8%, transparent) 86%); }
}

/* ---------- from 1100 px down: one column, the number beside each step's heading, the short line beside the steps ---------- */
@media (max-width: 1099.98px) {
  .hiw-head, .hiw-head--right { max-width: 640px; margin-left: 0; }
  .hiw-steps { gap: 56px; }
  .hiw-step, .hiw-step--flip { grid-template-columns: 48px minmax(0, 1fr); column-gap: 18px; row-gap: 24px; align-items: start; padding-top: 0; }
  .hiw-num { position: relative; top: auto; left: auto; grid-column: 1; grid-row: 1; }
  .hiw-step__text, .hiw-step--flip .hiw-step__text { grid-column: 2; grid-row: 1; justify-self: start; max-width: 600px; padding-top: 10px; }
  .hiw-step__pic, .hiw-step--flip .hiw-step__pic { grid-column: 2; grid-row: 2; justify-self: start; }
  .hiw-step__pic--scene { min-height: 300px; }
  /* each photo whole, its scene card under it, overlapping its foot */
  .hiw-shot, .hiw-step--flip .hiw-shot { width: min(100%, 640px); overflow: visible; aspect-ratio: auto; background: none; box-shadow: none; }
  .hiw-shot__media, .hiw-shot--new .hiw-shot__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-m); }
  .hiw-step .hiw-shot__scene, .hiw-step .hiw-shot--tune .hiw-shot__scene, .hiw-step .hiw-shot--new .hiw-shot__scene { position: relative; left: auto; bottom: auto; width: min(420px, calc(100% - 20px)); margin: -40px 10px 0; }
  /* the dashboard (zoomed 1.1: its px count 1.1 times) reaches back over the number's lane, so its rows keep their words
     whole; the line runs behind it */
  .hiw-step .hiw-shot--new .hiw-shot__scene { width: min(382px, calc(100% + 51px)); margin: -36px 0 0 -60px; }
  .hiw-hand { grid-template-columns: 48px minmax(0, 1fr); row-gap: 4px; column-gap: 18px; }
  .hiw-hand__node { grid-column: 1; grid-row: 1 / span 2; }
  .hiw-hand__you { grid-column: 2; grid-row: 1; text-align: left; }
  .hiw-hand__us { grid-column: 2; grid-row: 2; }
  .hiw-plan__in, .hiw-team__in { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .hiw-plan__pic { width: min(100%, 720px); }
  .hiw-team__pic { width: min(100%, 720px); }
  .hiw-close__in { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .hiw-close__copy, .hiw-close__go { grid-column: 1; }
  .hiw-close__go { justify-items: start; }
}
@media (max-width: 699.98px) {
  .hiw-plan__pic { height: 700px; }
  /* taller, his phone and hand at the top right, the thread over his coverall and the bench below them */
  .hiw-team__pic { aspect-ratio: 4 / 5; }
  .hiw-team__media img { object-position: 62% 40%; }
  .hiw-team__seq { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; transform: none; }
}