@import url("../arsenal/thread.css");
/* how-it-works.css: the How it works page's own placing (plan.md, "How it works"). Every component and token comes
   from components.css and system.css; the thread composition's look is set here from its own custom properties.
   The line's lanes: the header card's foot; then each step's number between its words and its picture (5 parts words
   to 7 parts picture, the picture's side turning each step, so the line weaves); the questions pass on the last lane;
   then the line sweeps to the close band's left margin and plugs into its button from the left.
   Nothing the line passes makes a stacking context of its own (thread\README.md, "What it needs from a page"). */

/* ---------- the thread: the gold pen line, its head the pen's loop ---------- */
.thread.hiw { --thread-ink: var(--c-accent); --thread-bg: var(--c-paper); --thread-amp: 3.5px; --thread-wave: 64px; --thread-radius: 48px; --thread-tail: 88px; }
/* the designed ground keeps its faint flourish (in the line's own layer, under it) without a stacking context; it clips
   rather than hides, so nothing (a scroll into view, a focus) can scroll the part inside itself */
.hiw .ground { isolation: auto; overflow: clip; }

/* ---------- #top: the framed footage of a week being written in, the card inside it on the left, hanging below ---- */
.hiw-top { padding-top: clamp(1rem, 2vw, 1.5rem); padding-bottom: clamp(5.5rem, 4rem + 4vw, 7.5rem); }
.hiw-top__frame { position: relative; display: grid; align-items: end; min-height: clamp(560px, 78vh, 760px); padding: 40px 40px 0; }
.hiw-top__media { position: absolute; inset: 0; overflow: hidden; isolation: isolate; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
/* one still grade over the slides: a soft shade on the card's side */
.hiw-top__media::after { content: ''; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(90deg, rgb(13 27 51 / 0.38) 0%, rgb(13 27 51 / 0.12) 42%, transparent 62%); }
.hiw-top__stop { top: 16px; right: 16px; }
.hiw-top__card { position: relative; z-index: 2; width: min(100%, 35rem); margin-bottom: -48px; display: grid; gap: 1.35rem; padding: 2.5rem 2.1rem 1rem; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
.hiw-top__copy { display: grid; gap: var(--space-3); }
.hiw-top h1 { font-size: clamp(2.1rem, 1.3rem + 1.9vw, 3rem); }
.hiw-top__line { font-size: var(--fs-lead); color: var(--c-ink-soft); max-width: 30rem; }
/* the picker sits flat inside the card; the founder's face breaks the card's top edge */
.hiw-top__card .picker { position: static; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; background: none; }
.hiw-top__card .picker__face { left: 2.1rem; top: -28px; }

/* the choice pictures' own answers: the area's edge grows, the wasted spend falls away */
.choice .pic-grow { transform: scale(0.74); opacity: 0.55; }
.choice:has(input:checked) .pic-grow { transform: none; opacity: 1; }
.choice:has(input:checked) .pic-waste { transform: translate(3px, 10px) rotate(24deg); opacity: 0; }

/* ---------- the steps: words, the number on the line's lane, the picture ---------- */
.hiw-step { padding-block: clamp(3.5rem, 2.25rem + 4.5vw, 6.5rem); }
.hiw-step__grid { display: grid; grid-template-columns: minmax(0, 5fr) 88px minmax(0, 7fr); align-items: start; }
.hiw-step--b .hiw-step__grid { grid-template-columns: minmax(0, 7.5fr) 88px minmax(0, 4.5fr); }
.hiw-step__text { grid-column: 1; grid-row: 1; display: grid; gap: var(--space-3); align-content: start; padding-top: 0.35rem; }
.hiw-step__pic { grid-column: 3; grid-row: 1; }
.hiw-step--b .hiw-step__text { grid-column: 3; }
.hiw-step--b .hiw-step__pic { grid-column: 1; }
.hiw-step h2 { font-size: var(--fs-h2); }
.hiw-step__line { font-size: var(--fs-lead); color: var(--c-ink-soft); }
.hiw-step__who { font: 650 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-accent-text); }

/* the number: an ivory disc on the gold line; as the head plugs in it fills navy and one gold ring spreads and fades */
.hiw-num { --l: calc(var(--lit, 0) * var(--lit, 0) * (3 - 2 * var(--lit, 0))); --a: var(--lit-after, 0); grid-column: 2; grid-row: 1; justify-self: center; align-self: start; position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font: 600 1.45rem/1 var(--font-display); color: color-mix(in srgb, var(--c-on-brand) calc(var(--l) * 100%), var(--c-brand-text)); background: var(--c-paper); box-shadow: inset 0 0 0 1.5px var(--c-accent), 0 6px 14px -8px rgb(13 27 51 / 0.45); isolation: isolate; }
.hiw-num::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; background: var(--c-brand); transform: scale(var(--l)); }
.hiw-num::after { content: ''; position: absolute; inset: -2px; border-radius: 50%; border: 1.5px solid var(--c-accent); pointer-events: none; opacity: calc((1 - var(--a)) * min(1, var(--a) * 10)); transform: scale(calc(1 + var(--a) * 0.85)); }

/* step 1: the founder's portrait card beside the consultation card, its rows lighting as the line passes */
.hiw-consult { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.hiw-consult__face { position: relative; z-index: 1; margin: 0; max-width: 260px; justify-self: end; display: grid; gap: 0.85rem; justify-items: center; padding: 12px 12px 1.1rem; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-m); }
.hiw-consult__face img { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: calc(var(--radius-l) - 10px); }
.hiw-consult__face figcaption { display: grid; justify-items: center; gap: 0.15rem; }
.hiw-consult__face b { font: 600 1.6rem/1.1 var(--font-display); color: var(--c-ink); }
.hiw-consult__face span { font: 600 var(--fs-ui)/1.2 var(--font-ui); color: var(--c-ink-soft); }
.hiw-consult__card { display: grid; gap: 0.9rem; padding: 1.4rem 1.3rem 1.25rem; background: var(--c-card); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
.hiw-consult__title { margin: 0; font: 650 1.3rem/1.2 var(--font-display); color: var(--c-ink); }
.hiw-consult__rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; }
.hiw-consult__rows li { --p: clamp(0, (var(--lit, 0) - var(--at)) * 6, 1); --e: calc(var(--p) * var(--p) * (3 - 2 * var(--p))); display: flex; align-items: center; gap: 0.7rem; min-height: 50px; padding: 0.6rem 0.85rem; border-radius: var(--radius-m); background: color-mix(in srgb, var(--c-brand-light) calc(var(--e) * 75%), var(--c-paper)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-brand) calc(var(--e) * 14%), var(--c-line)); font: 600 1.02rem/1.3 var(--font-ui); color: var(--c-ink); }
.hiw-consult__rows svg { flex: none; width: 22px; height: 22px; transform: scale(calc(0.8 + 0.2 * var(--e))); }
.hiw-consult__rows path { fill: color-mix(in srgb, var(--c-accent) calc(var(--e) * 100%), var(--c-line)); }
.hiw-consult__next { --p: clamp(0, (var(--lit, 0) - var(--at)) * 6, 1); --e: calc(var(--p) * var(--p) * (3 - 2 * var(--p))); margin: 0.15rem 0 0; padding-left: 0.2rem; font: 600 1rem/1.3 var(--font-ui); color: var(--c-ink-soft); }
.hiw-consult__next b { color: var(--c-brand-text); box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--c-accent) calc(var(--e) * 100%), transparent); }

/* step 2, on the designed ground: the market check over a drawn neighborhood of Maple Grove */
.hiw-market__k { right: -12%; top: -24%; }
.hiw-market { position: relative; z-index: 1; min-height: 520px; overflow: hidden; border-radius: var(--radius-l); background: var(--c-paper-alt); box-shadow: inset 0 0 0 1px var(--c-line), var(--shadow-m); }
.hiw-market__town { position: absolute; inset: 0; width: 100%; height: 100%; }
.town-park { fill: color-mix(in srgb, var(--c-accent) 18%, var(--c-paper-alt)); }
.town-water { fill: none; stroke: color-mix(in srgb, var(--c-brand-light) 85%, var(--c-paper-alt)); stroke-width: 26; stroke-linecap: round; }
.town-st { fill: none; stroke: var(--c-card); stroke-width: 9; stroke-linecap: round; }
.town-av { fill: none; stroke: var(--c-card); stroke-width: 17; stroke-linecap: round; }
.town-pin { --p: clamp(0, (var(--lit, 0) - var(--at)) * 6, 1); fill: var(--c-brand); opacity: var(--p); transform: translateY(calc((1 - var(--p)) * -14px)); }
.town-pin circle { fill: var(--c-card); }
.town-star { fill: var(--c-accent); }
.town-pin--own { fill: var(--c-accent); }
.hiw-market .hiw-market__scene { position: absolute; left: 50%; top: 50%; width: min(500px, calc(100% - 64px)); transform: translate(-50%, -50%); box-shadow: var(--shadow-l); }
.hiw-market__stop { top: 14px; right: 14px; }

/* step 3: the owner reading her plan, the plan's months in glass over the window side */
.hiw-plan__stage { aspect-ratio: 5 / 4; }
.hiw-plan__stage img, .hiw-cust__stage img { --e: calc(var(--lit, 0) * var(--lit, 0) * (3 - 2 * var(--lit, 0))); inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; filter: saturate(calc(0.62 + 0.38 * var(--e))); transform: scale(calc(1.05 - 0.05 * var(--e))); }
.hiw-plan__stage img { object-position: 0% 40%; }
.stage.hiw-plan__stage .hiw-plan__scene { right: auto; width: 57%; }
.hiw-plan__stop { top: 14px; right: 14px; }

/* step 4, on the designed ground: the week, handled */
.hiw-run__k { left: -14%; bottom: -22%; }
.hiw-run { position: relative; z-index: 1; height: 540px; }
.hiw-run .hiw-run__scene { position: absolute; inset: 0; }
.hiw-run__stop { top: -48px; right: 10px; }

/* step 5: the front desk, the new patients landing in glass over the calm wall */
.hiw-cust__stage { aspect-ratio: 5 / 4; }
.hiw-cust__stage img { object-position: 0% 50%; }
.stage.hiw-cust__stage .hiw-cust__scene { left: auto; width: 52%; }
.hiw-cust__stop { top: 14px; left: 14px; right: auto; }

/* ---------- the questions, on the last step's lane; then the close, the line plugging into its button ---------- */
.hiw-faq .faq-part__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: 88px; }
.hiw-end__node { display: block; width: 2px; height: 2px; margin: 0 0 -2px calc(max(var(--gutter), (100% - var(--max-w)) / 2) + 22px); }
/* the band's footage, wash and flourish sit under the line, its words and button over it */
.hiw-end .close-band { isolation: auto; background: none; }
.hiw-end .close-band__in { padding-left: 72px; }
.hiw-end .close-band .btn--gold { --l: calc(var(--lit, 0) * var(--lit, 0) * (3 - 2 * var(--lit, 0))); box-shadow: 0 1px 0 rgb(255 255 255 / 0.35) inset, 0 0 0 calc(var(--l) * 5px) rgb(196 162 98 / 0.32), 0 12px 28px -12px rgb(0 0 0 / 0.55); }
.hiw-close .close-band__media video { object-position: 64% 40%; }

/* ---------- under 1200 px: one column, the number beside the heading, the picture under the words ---------- */
@media (max-width: 1199px) {
  .hiw-step__grid, .hiw-step--b .hiw-step__grid { grid-template-columns: 40px minmax(0, 1fr); column-gap: 16px; }
  .hiw-step__text, .hiw-step--b .hiw-step__text { grid-column: 2; grid-row: 1; max-width: 44rem; }
  .hiw-num { grid-column: 1; width: 40px; height: 40px; font-size: 1.1rem; }
  .hiw-step__pic, .hiw-step--b .hiw-step__pic { grid-column: 1 / -1; grid-row: 2; margin-top: 2rem; }
  .hiw-consult { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr); }
  .hiw-plan__stage, .hiw-cust__stage { aspect-ratio: 3 / 2; }
  .stage.hiw-plan__stage .hiw-plan__scene { width: 47%; }
  .hiw-run { height: 560px; }
  .hiw-run__stop { top: -46px; right: 0; }
  /* the questions keep clear of the line's lane (the numbers' x) */
  .hiw-faq .faq-part__grid { grid-template-columns: 1fr; padding-left: 56px; }
  .hiw-faq .faq-part__side { position: static; }
}
@media (max-width: 999px) {
  .hiw-top__frame { display: block; min-height: 0; padding: 0; }
  .hiw-top__media { position: relative; inset: auto; height: 440px; }
  .hiw-top__card { width: min(100% - 32px, 38rem); margin: -72px auto 0; }
}
@media (max-width: 699px) {
  .hiw-top__media { height: 300px; }
  .hiw-top__card { width: auto; margin: -40px 0 0; padding: 2.5rem 1.15rem 0.9rem; }
  .hiw-top__card .picker__face { left: 1.15rem; }
  .hiw-consult { grid-template-columns: 1fr; gap: 1rem; }
  .hiw-consult__face { justify-self: stretch; max-width: none; grid-template-columns: 84px minmax(0, 1fr); justify-items: start; align-items: center; gap: 1rem; padding: 10px; }
  .hiw-consult__face figcaption { justify-items: start; }
  .hiw-market { min-height: 560px; }
  .hiw-market .hiw-market__scene { width: calc(100% - 28px); }
  .hiw-plan__stage { aspect-ratio: auto; height: 620px; }
  .hiw-cust__stage { aspect-ratio: auto; height: 580px; }
  .hiw-plan__stage img { object-position: 48% 30%; }
  .stage.hiw-plan__stage .hiw-plan__scene { top: auto; bottom: 0; width: auto; right: 0; height: 330px; padding: 0 10px 10px; }
  .hiw-cust__stage img { object-position: 32% 40%; }
  .stage.hiw-cust__stage .hiw-cust__scene { top: auto; bottom: 0; left: 0; width: auto; height: 290px; }
  .hiw-run { height: 640px; }
  .hiw-faq .faq-part__grid { padding-left: 0; }
  .hiw-end .close-band__in { padding-left: 0; }
  /* the line's lane in the gutter, left of the close's words, into the button's side */
  .hiw-end__node { margin-left: 6px; }
}