/* site\assets\css\pages\how-it-works.css: How it works. The whole page is one `thread` (the arsenal's line; its own
   files are never edited), restyled into the site's own ruler: its route a faint tick ruler, the drawn line blue down
   its spine, its head the site's mark in a blue bead, each step's number a Geist Mono pill that fills blue as the head
   plugs in. From 1200px the line weaves: the header's button (center), your steps (right lane), the plan (left), our
   steps (right), the team and the questions (left), into the close's button. Under 1200px it is hidden
   (data-narrow="hide") and each number still fills blue as the visitor reaches it. */
@import url("../arsenal/thread.css");

/* One charcoal ground under the whole line. The parts lay no ground of their own (a band's background is a positioned
   box and would cover the line); what stands under the line (your photo, the designed ground, the close's clip) sits
   at z-index -1 in the thread, and what the line passes behind (the panels, the numbers) stays above it. */
.hw {
  --thread-ink: var(--c-brand-on-ink);
  --thread-track-ink: color-mix(in srgb, var(--c-brand-on-ink) 42%, transparent);
  --thread-bg: var(--c-ink);
  --thread-tail: 110px;
  --hw-rail: 4.5rem;
  background: radial-gradient(60rem 44rem at 88% 0%, var(--c-glow), transparent 70%) no-repeat, var(--c-ink);
  color: var(--c-on-ink);
}
.hw > .band, .hw > .page-hero { background: none; }
.hw > .band { padding-block: clamp(4.5rem, 2rem + 6vw, 9rem); }
.hw .band--ground, .hw .close-band { isolation: auto; }
@media (max-width: 1199.98px) { .hw { --thread-narrow: 1; } }

/* the line in the site's own form */
.hw .thread__track { stroke-width: 9px; stroke-dasharray: 1.25 10.75; stroke-linecap: butt; }
.hw .thread__bead { fill: var(--c-brand); stroke: var(--c-brand-on-ink); }
.hw .thread__glyph { fill: var(--c-on-brand); }

/* a step's number: a pill on the ruler that fills blue as the head plugs in, one ring as it lands */
.hw-num {
  --l: calc(var(--lit, 0) * var(--lit, 0) * (3 - 2 * var(--lit, 0)));
  display: inline-grid; place-items: center; min-width: 3.25rem; height: 2.125rem; padding: 0 0.75rem; border-radius: 999px;
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 500; letter-spacing: var(--track-mono);
  background: color-mix(in srgb, var(--c-brand) calc(var(--l) * 100%), var(--c-ink));
  color: color-mix(in srgb, var(--c-on-brand) calc(var(--l) * 100%), var(--c-soft-on-ink));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand-on-ink) calc(var(--l) * 100%), var(--c-rule-ink));
}
.hw-num::after { content: ''; position: absolute; inset: -2px; border-radius: inherit; border: 2px solid var(--c-brand-on-ink); opacity: 0; pointer-events: none; }
.hw-num[data-lit]::after { opacity: calc(1 - var(--lit-after, 1)); transform: scale(calc(1 + var(--lit-after, 1) * 0.6)); }

.hw-step__title { margin: 0; font-family: var(--font-display); font-size: clamp(1.5rem, 1.1rem + 1.1vw, 2.125rem); line-height: 1.12; font-weight: 600; letter-spacing: var(--track-h2); text-wrap: balance; }
.hw-step__line { margin: var(--space-2) 0 0; max-width: 28rem; font-size: var(--fs-lead); line-height: 1.5; color: var(--c-soft-on-ink); text-wrap: pretty; }

/* ---------- hero: the words centered, the laptop at dusk under them, the chat over its right third ---------- */
.hw-hero__shot { position: absolute; width: 1700px; max-width: none; aspect-ratio: 2752 / 1536; margin: 0; left: calc(42% - 689px); top: calc(50% - 564px); }
@media (max-width: 1199.98px) { .hw-hero__shot { left: calc(50% - 689px); } }
@media (max-width: 759.98px) { .hw-hero__shot { width: 900px; left: calc(50% - 364px); top: calc(50% - 299px); } }
/* the laptop's own screen: Zema's dashboard, the night's calls and bookings stacking up (520 x 325; on a phone its
   content is drawn at twice its size so it still reads at 13px once the screen is scaled down) */
.hw-ui { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--c-brand-light) 60%, var(--c-paper)) 0%, var(--c-paper-alt) 100%); color: var(--c-ink); }
.hw-ui__in { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.hw-ui__bar { display: flex; align-items: center; gap: 9px; height: 44px; margin: 0; padding: 0 16px; background: var(--c-white); box-shadow: 0 1px 0 var(--c-line); font: 600 15px/1 var(--font-ui); }
.hw-ui__mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--c-brand); }
.hw-ui__mark svg { width: 16px; height: 16px; fill: var(--c-on-brand); }
.hw-ui__when { margin-left: auto; font: 500 13px/1 var(--font-mono); letter-spacing: var(--track-mono); text-transform: uppercase; color: var(--c-ink-soft); }
.hw-ui__in > .hw-ui__scene { position: absolute; left: 0; right: 0; top: 44px; bottom: 68px; }
@media (max-width: 759.98px) {
  .hw-ui__in { width: 50%; height: 50%; transform: scale(2); transform-origin: 0 0; }
  .hw-ui__bar { display: none; }
  .hw-ui__in > .hw-ui__scene { top: 0; bottom: 48px; }
}
/* the chat over the window's right third; under 1200px the screen fills the panel and the chat is left out (the goal
   chat plays again in your steps just below) */
.hw-hero__chat { display: none; }
.hw-hero__chat > .hw-hero__scene { width: 100%; }
@media (min-width: 1200px) { .hw-hero__chat { display: block; position: absolute; z-index: 2; right: var(--space-5); top: 4rem; width: 20rem; } }

/* ---------- yours: steps 1 and 2 over the owner at his desk (held under them as they scroll, from 1200px) ---------- */
.hw-yours { padding-bottom: 0; }
.hw-yours__head .lede { margin-top: var(--space-3); max-width: 34rem; }
.hw-yours__scroll { position: relative; margin-top: var(--space-5); }
.hw-yours__stopbar { display: none; }
.hw-yours__media { position: relative; overflow: hidden; border-radius: var(--radius-xl); }
.hw-yours__pin { position: absolute; inset: 0; }
.hw-yours__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 46% 0%; }
.hw-step__stage { position: relative; width: min(26rem, 100%); }
.hw-step__stage > .hw-step__scene { width: 100%; }
.hw-step__stage:has([data-scene="goal"]) { display: grid; align-content: end; min-height: 17.5rem; }
/* under 900px: the two steps' words, then the photo with both scenes at its foot, under his face */
@media (max-width: 899.98px) {
  .hw-yours__scroll { display: grid; grid-template-columns: var(--gutter) auto minmax(0, 1fr) var(--gutter); grid-template-rows: auto auto var(--space-5) 22rem auto auto 0.75rem; padding-bottom: clamp(4.5rem, 2rem + 6vw, 9rem); }
  .hw-yours__steps, .hw-step { display: contents; }
  .hw-step > .hw-num { grid-column: 2; align-self: start; margin: 0.15rem var(--space-3) 0 0; }
  .hw-step > .hw-step__words { grid-column: 3; }
  .hw-step:nth-of-type(1) > .hw-num, .hw-step:nth-of-type(1) > .hw-step__words { grid-row: 1; }
  .hw-step:nth-of-type(1) > .hw-step__words { padding-bottom: var(--space-4); }
  .hw-step:nth-of-type(2) > .hw-num, .hw-step:nth-of-type(2) > .hw-step__words { grid-row: 2; }
  .hw-yours__media { grid-column: 2 / 4; grid-row: 4 / 8; }
  .hw-step > .hw-step__stage { grid-column: 2 / 4; justify-self: center; z-index: 1; width: min(26rem, calc(100% - 1.5rem)); }
  .hw-step:nth-of-type(1) > .hw-step__stage { grid-row: 5; margin-bottom: 0.75rem; }
  .hw-step:nth-of-type(2) > .hw-step__stage { grid-row: 6; }
  .hw-yours__media > .hw-yours__mstop { top: 1rem; right: 1rem; }
}
/* from 900px: the photo held under the steps as they scroll, the steps down the right lane */
@media (min-width: 900px) {
  .hw-yours__head > * { max-width: calc(100% * 7 / 12 - 3rem); }
  .hw-yours__stopbar { display: block; position: sticky; top: calc(var(--header-h) + 1rem); z-index: 3; height: 0; }
  .hw-yours__stopbar > .hw-yours__stop { top: 0; right: var(--gutter); }
  .hw-yours__mstop { display: none; }
  /* the photo is pinned inside a box as tall as the steps, so it holds under them and leaves with them */
  .hw-yours__media { position: absolute; inset: 0; z-index: -1; overflow: visible; border-radius: 0; }
  .hw-yours__pin { position: sticky; top: 0; inset: auto; height: 100svh; max-width: 105rem; margin-inline: auto; overflow: hidden; }
  .hw-yours__pin::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(13, 13, 13, 0) 36%, rgba(13, 13, 13, 0.55) 60%, rgba(13, 13, 13, 0.8) 100%), linear-gradient(180deg, var(--c-ink) 0%, rgba(13, 13, 13, 0) 18%, rgba(13, 13, 13, 0) 80%, var(--c-ink) 100%); }
  .hw-yours__img { object-position: 46% 22%; }
  .hw-yours__steps { display: grid; row-gap: 24svh; padding-block: 32svh 16svh; }
  .hw-step { display: grid; grid-template-columns: var(--hw-rail) minmax(0, 1fr); grid-template-areas: "num words" ". stage"; column-gap: var(--space-2); row-gap: var(--space-4); margin-left: calc(100% * 7 / 12); }
  .hw-step > .hw-num { grid-area: num; justify-self: center; margin-top: 0.15rem; }
  .hw-step > .hw-step__words { grid-area: words; }
  .hw-step > .hw-step__stage { grid-area: stage; }
}
@media (min-width: 1700px) { .hw-yours__pin { border-radius: var(--radius-xl); } }

/* ---------- plan: step 3, the free plan building itself on the designed ground ---------- */
.hw-plan__grid { display: grid; gap: var(--space-5); }
.hw-plan__head { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-3); align-items: start; }
.hw-plan__head > .hw-num { margin-top: 0.5rem; }
.hw-plan__words .lede { margin-top: var(--space-3); max-width: 30rem; }
.hw-plan__stage { position: relative; }
.hw-plan__stage > .hw-plan__scene { width: 100%; height: 700px; }
.hw-plan__stop { top: -3.25rem; right: 0; }
@media (min-width: 600px) { .hw-plan__stage > .hw-plan__scene { height: auto; aspect-ratio: 720 / 560; max-height: 640px; } }
@media (min-width: 1200px) {
  .hw-plan__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-4); align-items: center; }
  .hw-plan__head { grid-template-columns: var(--hw-rail) minmax(0, 1fr); column-gap: 0; }
  .hw-plan__head > .hw-num { justify-self: center; }
  .hw-plan__words { padding-left: var(--space-2); }
}

/* ---------- ours: the hand-over, then steps 4 to 6 down the right lane, each photo with its scene ---------- */
.hw-hand { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: var(--space-3); row-gap: var(--space-1); margin-bottom: var(--space-5); font-family: var(--font-mono); font-size: var(--fs-mono); letter-spacing: var(--track-mono); text-transform: uppercase; font-weight: 500; }
.hw-hand__you { grid-column: 2; grid-row: 1; color: var(--c-soft-on-ink); }
.hw-hand__node { grid-column: 1; grid-row: 1 / span 2; }
.hw-hand__us { grid-column: 2; grid-row: 2; color: var(--c-brand-on-ink); }
.hw-hand__node {
  --l: calc(var(--lit, 0) * var(--lit, 0) * (3 - 2 * var(--lit, 0)));
  display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  background: color-mix(in srgb, var(--c-brand) calc(var(--l) * 100%), var(--c-raised));
  box-shadow: 0 0 0 6px var(--c-ink), inset 0 0 0 1px color-mix(in srgb, var(--c-brand-on-ink) calc(var(--l) * 100%), var(--c-rule-ink));
}
.hw-hand__node svg { width: 1.25rem; height: 1.25rem; fill: color-mix(in srgb, var(--c-on-brand) calc(var(--l) * 100%), var(--c-soft-on-ink)); }
.hw-hand__node::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c-brand-on-ink); opacity: 0; pointer-events: none; }
.hw-hand__node[data-lit]::after { opacity: calc(1 - var(--lit-after, 1)); transform: scale(calc(1 + var(--lit-after, 1) * 0.7)); }
.hw-ours__head .lede { margin-top: var(--space-3); max-width: 30rem; }
.hw-ours__steps { display: grid; gap: var(--space-6); margin-top: var(--space-5); }
/* each step: its number and words, then its photo with its scene at the photo's foot, under the faces */
.hw-row { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "num words" "shot shot"; column-gap: var(--space-3); row-gap: var(--space-4); }
.hw-row > .hw-num { grid-area: num; margin-top: 0.15rem; }
.hw-row > .hw-row__words { grid-area: words; }
.hw-row > .hw-row__shot { grid-area: shot; height: max(34rem, 62vw); }
.hw-row > .hw-row__stage { grid-area: shot; align-self: end; justify-self: start; position: relative; z-index: 2; width: min(24rem, calc(100% - 1.5rem)); margin: 0 0 0.75rem 0.75rem; }
.hw-row__stage > .hw-row__scene { width: 100%; }
/* the job board is tilted in depth: drawn a little larger so its smallest words still read at 13px */
.hw-row > .hw-row__stage--leads { transform: scale(1.08); transform-origin: 0 100%; width: min(22rem, calc((100% - 1.5rem) / 1.08)); }
/* the photo lights as the line passes behind it: from a little grey to its full color */
.hw-row__shot, .hw-team__shot { --l: calc(var(--lit, 0) * var(--lit, 0) * (3 - 2 * var(--lit, 0))); }
.hw-row__shot > img, .hw-row__shot > video, .hw-team__shot > img { filter: saturate(calc(0.62 + 0.38 * var(--l))) brightness(calc(0.84 + 0.16 * var(--l))); }
.hw-row__shot > video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; }
.hw-row__shot--launch > img { object-position: 62% 10%; }
.hw-row__shot--leads > img { object-position: 0% 0%; }
.hw-row__stop { top: 1rem; right: 1rem; }
@media (max-width: 759.98px) {
  .hw-row > .hw-row__shot--leads { height: 40rem; }
  .hw-row__shot--leads > img { object-position: 45% 0%; }
}
@media (min-width: 1200px) {
  .hw-hand { grid-template-columns: calc(100% * 7 / 12) var(--hw-rail) minmax(0, 1fr); column-gap: 0; margin-bottom: var(--space-6); }
  .hw-hand__you { grid-column: 1; grid-row: 1; text-align: right; padding-right: var(--space-3); }
  .hw-hand__node { grid-column: 2; grid-row: 1; justify-self: center; }
  .hw-hand__us { grid-column: 3; grid-row: 1; padding-left: var(--space-3); }
  .hw-ours__head { display: grid; grid-template-columns: calc(100% * 7 / 12 - var(--space-4)) minmax(0, 1fr); column-gap: calc(var(--space-4) + var(--hw-rail)); align-items: end; }
  .hw-ours__head .lede { margin: 0; }
  .hw-row { grid-template-columns: calc(100% * 7 / 12 - var(--space-4)) var(--hw-rail) minmax(0, 1fr); grid-template-areas: "shot num words"; column-gap: 0; align-items: center; }
  .hw-row > .hw-row__shot { margin-right: var(--space-4); }
  .hw-row > .hw-num { justify-self: center; margin-top: 0; }
  .hw-row > .hw-row__words { padding-left: var(--space-3); }
  .hw-row > .hw-row__shot { height: auto; aspect-ratio: 4 / 3; }
  .hw-row > .hw-row__stage { justify-self: end; width: min(22rem, 46%); margin: 0 calc(var(--space-4) + 1.25rem) 1.25rem 1.25rem; }
  .hw-row > .hw-row__stage--leads { width: min(20rem, calc(46% / 1.08)); }
  .hw-row > .hw-row__stage--leads, .hw-row > .hw-row__stage--tune { justify-self: start; }
  .hw-row__shot--launch > img { object-position: 50% 60%; }
  .hw-row__shot--leads > img { object-position: 0% 40%; }
}

/* ---------- team: a person a tap away in the dashboard, over the contractor in his truck ---------- */
.hw-team__grid { display: grid; gap: var(--space-5); }
.hw-team__frame { position: relative; display: grid; }
.hw-team__shot { aspect-ratio: 16 / 10; }
.hw-team__img { object-position: 30% 40%; }
.hw-team__stop { top: 1rem; right: 1rem; }
.hw-seq { position: absolute; z-index: 2; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; display: grid; gap: 0.75rem; padding: 1rem; border-radius: var(--radius-l); background: var(--c-glass-ink); border: 1px solid var(--c-glass-edge); backdrop-filter: blur(18px) saturate(1.4); -webkit-backdrop-filter: blur(18px) saturate(1.4); box-shadow: 0 24px 60px -24px rgba(13, 13, 13, 0.7); font-family: var(--font-ui); }
.hw-seq [data-kit-at] { opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.hw-seq__dash { position: relative; display: grid; gap: 0.75rem; }
.hw-seq__head { display: flex; align-items: center; gap: 0.6rem; margin: 0; font-size: 0.9375rem; }
.hw-seq__mark { flex: none; display: grid; place-items: center; width: 1.75rem; height: 1.75rem; border-radius: 0.5rem; background: var(--c-brand); }
.hw-seq__mark svg { width: 1.125rem; height: 1.125rem; fill: var(--c-on-brand); }
.hw-seq__btn { display: flex; align-items: center; justify-content: center; height: 2.75rem; border-radius: 999px; border: 1px solid var(--c-glass-edge); background: rgba(249, 249, 251, 0.08); font-size: 0.9375rem; font-weight: 600; color: var(--c-on-ink); }
/* the press: the same button, filled blue, lands over the first and rings once */
.hw-seq .hw-seq__btn--on { position: absolute; left: 1rem; right: 1rem; top: calc(1rem + 1.75rem + 0.75rem); background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); box-shadow: 0 0 0 calc((1 - var(--kit-in, 1)) * 10px + 0px) rgba(61, 123, 255, 0.35); transform: scale(calc(0.96 + 0.04 * var(--kit-in, 1))); }
.hw-seq__hello { display: flex; align-items: center; gap: 0.6rem; margin: 0.25rem 0 0; font-size: 0.9375rem; font-weight: 600; }
.hw-seq__reply { margin: 0; padding: 0.75rem 0.9rem; border-radius: 1rem 1rem 1rem 0.35rem; background: rgba(249, 249, 251, 0.1); font-size: 0.9375rem; line-height: 1.4; }
.hw-team__words .lede { margin-top: var(--space-3); max-width: 32rem; }
.hw-team__link { margin: var(--space-3) 0 0; }
/* on a phone the photo is tall, his face at its top and the card at its foot; from 760px the card stands on the
   photo's free right half */
@media (max-width: 759.98px) { .hw-team__shot { aspect-ratio: auto; min-height: 40rem; } .hw-team__img { object-position: 29% 0%; } }
@media (min-width: 760px) { .hw-seq { left: auto; right: 1.25rem; bottom: 1.25rem; width: min(21rem, 46%); } }
@media (min-width: 1200px) { .hw-team__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-5); align-items: center; } }

/* ---------- faq: the owners' questions on a paper panel, the line running beside it ---------- */
.hw-faq__panel { position: relative; padding: clamp(1.75rem, 1rem + 3vw, 4rem); border-radius: var(--radius-xl); background: var(--c-paper); color: var(--c-ink); }
@media (min-width: 1200px) { .hw-faq__panel { margin-left: 5rem; } }

/* ---------- close: the homeowner at her door, the words at the lower left, the line ending in the button ---------- */
.hw-close .close-band__media video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; }
.hw-close .close-band__inner { grid-template-columns: minmax(0, 1fr); }
.hw-close .close-band__title { max-width: 13ch; }
.hw-close .close-band__lede { max-width: 30rem; }
.hw-close .btn[data-lit] { box-shadow: 0 0 0 calc((1 - var(--lit-after, 1)) * 12px) rgba(61, 123, 255, 0.35), 0 12px 32px -14px rgba(0, 85, 255, 0.85); }
@media (min-width: 1200px) { .hw-close .close-band__inner { padding-left: 5rem; } }