@import url("../arsenal/thread.css");
/* site\assets\css\pages\how-it-works.css: How it works (plan.md, How it works). The whole page is one `thread`
   container on the ink; its line, a chain of the site's cube, runs down a lane on the left of every part. The parts
   paint no ground of their own (the container paints the ink), so the line shows wherever nothing covers it; the
   close is not positioned and its clip is not either, so the line runs over the footage into its button. Tokens of
   design\system.css only. */

/* ---------- the thread: the ink, the lane, the line ---------- */
.thread.hiw {
  --lane: 76px;
  --num: 44px;
  --thread-ink: var(--c-brand);
  --thread-bg: var(--c-ink);
  --thread-link: 9px;
  --thread-gap: 16px;
  background: var(--c-ink);
  color: var(--c-on-ink);
}
.hiw > .part--dark { background: none; }
/* every part's words and pictures start right of the lane */
.hiw-in { padding-left: calc(var(--gutter) + var(--lane)); }
.hiw-head { max-width: 760px; }

/* a number in the lane: charcoal until the line reaches it, then the signal, with one ring as it plugs in */
.hiw-num { position: absolute; left: calc(var(--lane) / -2 - var(--num) / 2); top: -4px; display: grid; place-items: center; box-sizing: border-box; width: var(--num); height: var(--num); border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-brand) calc(var(--lit, 0) * 100%), var(--c-ink-line)); background: color-mix(in srgb, var(--c-brand) calc(var(--lit, 0) * 100%), var(--c-ink-2)); color: color-mix(in srgb, var(--c-on-brand) calc(var(--lit, 0) * 100%), var(--c-on-ink-soft)); font: 800 1.1875rem/1 var(--font-display); font-stretch: var(--display-stretch); font-variant-numeric: tabular-nums; }
.hiw-num::after, .hiw-hand__node::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; border: 2px solid var(--c-brand); opacity: calc(var(--lit, 0) * (1 - var(--lit-after, 0)) * 0.9); transform: scale(calc(1 + var(--lit-after, 0) * 0.9)); pointer-events: none; }

/* ---------- hero: the centered headline, the button the line leaves from, the framed clip with its notifications ---------- */
.hiw-hero { overflow: hidden; padding: clamp(40px, 4.4vw, 64px) 0 clamp(48px, 6vw, 80px); }
.lattice--hiw-hero { right: 0; top: 0; width: 52%; height: 78%; opacity: 0.1; -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 70%); }
.hiw-hero__in { padding-left: calc(var(--gutter) + var(--lane)); }
.hiw-hero__words { max-width: 880px; margin: 0 auto; text-align: center; }
.hiw-hero__title { font-size: var(--fs-h1); }
.hiw-hero__line { max-width: 52ch; margin: var(--space-3) auto 0; font-size: 1.1875rem; line-height: 1.55; color: var(--c-on-ink-soft); }
.hiw-hero__cta { display: grid; justify-items: center; margin-top: var(--space-4); }
.hiw-hero__cta .btn-note { justify-content: center; margin-top: 10px; }
/* the phone in the frame's lower half, so its light shows on the first screen; the dark wall above it holds the cards */
.hiw-hero__frame { position: relative; margin-top: clamp(28px, 3vw, 40px); aspect-ratio: 2 / 1; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink-2); box-shadow: var(--shadow-l); --pos: 50% 72%; }
.hiw-hero__clip { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: var(--pos); filter: saturate(0.88) contrast(1.04); }
.hiw-hero__frame .kit-first { filter: saturate(0.88) contrast(1.04); }
.hiw-hero__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(200deg, color-mix(in srgb, var(--c-ink) 46%, transparent) 0%, transparent 46%); }
/* the notifications over the dark wall at the top right, above the phone */
.scene.hiw-hero__wyw { position: absolute; right: 76px; top: 10px; width: 380px; height: 206px; }
.hiw-hero__stop { right: 16px; top: 16px; }

/* ---------- yours: the owner's three steps on the designed ground, her photo in view beside them ---------- */
.hiw-yours { overflow: clip; }
.lattice--hiw-yours { right: 0; top: 0; width: 46%; height: 64%; opacity: 0.1; -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 100% at 100% 0%, #000 0%, transparent 70%); }
.hiw-yours__grid { display: grid; grid-template-columns: minmax(0, 1fr) clamp(280px, 26vw, 360px); gap: var(--space-6); align-items: start; }
.hiw-steps { list-style: none; display: grid; gap: clamp(56px, 7vw, 96px); margin: 0; padding: 0; }
.hiw-step { position: relative; display: grid; grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); gap: var(--space-4) var(--space-5); align-items: start; }
.hiw-step__title { font-size: var(--fs-h3); line-height: 1.15; }
.hiw-step__line { margin: var(--space-3) 0 0; font-size: var(--fs-body); line-height: 1.55; color: var(--c-on-ink-soft); }
.hiw-step__scene { position: relative; }
.scene.hiw-fill { width: 100%; height: 100%; }
.hiw-yours__goal, .hiw-yours__scan { height: 300px; }
/* goal and scan are their own panels: as high as their chat or their rows at each moment, in a box of their full height */
.hiw-yours__goal .scene.hiw-fill, .hiw-yours__scan .scene.hiw-fill { height: auto; }
.hiw-yours__bars { height: 330px; }
.hiw-yours__stop { right: -14px; top: -14px; }
.hiw-yours__photo { position: sticky; top: 112px; margin: 0; aspect-ratio: 3 / 4; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink-2); box-shadow: var(--shadow-l); }
.hiw-yours__img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 31% 50%; filter: saturate(0.88) contrast(1.04); }

/* ---------- ours: the hand-over, then a wide framed photo per step, its scene in glass over the side with no face ---------- */
.hiw-hand { position: relative; display: flex; align-items: center; min-height: 52px; margin-bottom: clamp(56px, 7vw, 96px); }
.hiw-hand__node { position: absolute; left: calc(var(--lane) / -2 - 26px); top: 50%; display: grid; place-items: center; box-sizing: border-box; width: 52px; height: 52px; margin-top: -26px; border-radius: 50%; border: 1px solid color-mix(in srgb, var(--c-brand) calc(var(--lit, 0) * 100%), var(--c-ink-line)); background: var(--c-ink-2); }
.hiw-hand__node svg { width: 24px; height: 24px; fill: color-mix(in srgb, var(--c-brand) calc(var(--lit, 0) * 100%), var(--c-on-ink-soft)); }
.hiw-hand__words { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0; font: 600 1.0625rem/1.4 var(--font-ui); }
.hiw-hand__you, .hiw-hand__us { display: inline-flex; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--c-ink-line); }
.hiw-hand__you { color: var(--c-on-ink-soft); }
.hiw-hand__us { color: var(--c-on-brand); background: var(--c-brand); border-color: var(--c-brand); }
.hiw-steps--ours { gap: clamp(64px, 8vw, 112px); }
.hiw-step--photo { grid-template-columns: minmax(0, 0.42fr) minmax(0, 1fr); align-items: center; }
.hiw-shot { position: relative; margin: 0; aspect-ratio: 16 / 9; }
.hiw-shot__media { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink-2); box-shadow: var(--shadow-l); }
.hiw-shot__img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; filter: saturate(0.88) contrast(1.04); }
.hiw-shot__scene { position: absolute; top: 22px; bottom: 22px; width: min(380px, 46%); }
.hiw-shot__scene--left { left: 22px; }
.hiw-shot__scene--right { right: 22px; }
.hiw-shot--launch .hiw-shot__scene { width: min(340px, 41%); }
.hiw-shot--launch .hiw-shot__img { object-position: 50% 60%; }
/* the leads board keeps its tilt in depth, which shows its 13 px words at about 12.4 px: its box drawn 8% larger */
.hiw-shot--leads .hiw-shot__scene { transform: scale(1.08); transform-origin: 0 50%; }
/* tune is its own panel, as high as its changes */
.hiw-shot--tune .scene.hiw-fill { height: auto; }
.hiw-shot--leads .hiw-shot__img { object-position: 60% 40%; }
/* the leads board is dark, and the scene draws its words in the brand's text colour, which is ink on this site's orange:
   on this board they take the on-ink tones (step 13) */
.hiw-shot--leads [data-scene="leads"] { --ld-on: var(--c-on-ink); --ld-soft: var(--c-on-ink-soft); }
.hiw-shot--leads [data-scene="leads"] .ld-board { border-color: color-mix(in srgb, var(--c-on-ink) 12%, transparent); }
.hiw-shot--leads [data-scene="leads"] .ld-row { background: color-mix(in srgb, var(--c-on-ink) 7%, transparent); border-color: color-mix(in srgb, var(--c-on-ink) 10%, transparent); }
.hiw-shot--leads [data-scene="leads"] .ld-src { color: color-mix(in srgb, var(--ld-tone) 28%, var(--c-on-ink)); }
.hiw-shot--leads [data-scene="leads"] .ld-row:nth-child(3n+2) { --ld-tone: var(--c-accent-on-ink); }
.hiw-shot--tune .hiw-shot__img { object-position: 30% 40%; }
.hiw-shot__stop { right: 14px; top: 14px; z-index: 2; }
.hiw-shot--tune .hiw-shot__stop { right: auto; left: 14px; }

/* ---------- plan: the words left, the pool photo right with the budget over its right half ---------- */
.hiw-plan__in { display: grid; grid-template-columns: minmax(0, 0.62fr) minmax(0, 1.38fr); gap: var(--space-6); align-items: center; }
.hiw-plan__shot { aspect-ratio: 3 / 2; }
.hiw-plan__shot .hiw-shot__img { object-position: 50% 30%; }
.hiw-plan__cost { position: absolute; right: 22px; top: 22px; bottom: 22px; width: min(400px, 52%); }
.hiw-plan__shot .hiw-shot__stop { right: auto; left: 14px; }

/* ---------- team: Walter's portrait, and an owner talking with his team, their chat in glass ---------- */
.hiw-team__row { display: grid; grid-template-columns: clamp(180px, 18vw, 240px) minmax(0, 1fr); gap: var(--space-6); align-items: end; }
.hiw-walter { margin: 0; }
.hiw-walter__img { display: block; width: 100%; height: auto; aspect-ratio: 322 / 377; object-fit: cover; border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
.hiw-walter__cap { display: grid; gap: 2px; margin-top: var(--space-3); }
.hiw-walter__cap b { font: 700 1.125rem/1.3 var(--font-ui); }
.hiw-walter__cap span { font-size: var(--fs-small); color: var(--c-on-ink-soft); }
/* only the owner's side of the desk: no stock face beside "The people behind your plan" (step 13); the photo drawn twice
   the frame's width, anchored right */
.hiw-team__shot .hiw-shot__img { inset: -1px -1px -1px auto; width: 200%; object-position: 100% 30%; }
.hiw-team__chat { position: absolute; right: 22px; top: 50%; display: grid; gap: 10px; width: min(360px, 46%); transform: translateY(-50%); }
.hiw-team__chat [data-kit-at] { opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.hiw-chat__bar, .hiw-chat__me, .hiw-chat__them { box-sizing: border-box; margin: 0; border-radius: 14px; box-shadow: var(--shadow-l); }
.hiw-chat__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 14px; background: color-mix(in srgb, var(--c-ink) 74%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--c-paper) 16%, transparent); color: var(--c-on-ink); }
.hiw-chat__app { display: grid; gap: 1px; min-width: 0; }
.hiw-chat__app b { font: 700 0.9375rem/1.25 var(--font-ui); }
.hiw-chat__app span { font-size: 0.8125rem; color: var(--c-on-ink-soft); }
.hiw-chat__btn { flex: none; padding: 9px 13px; border-radius: 10px; background: var(--c-brand); color: var(--c-on-brand); font: 700 0.875rem/1 var(--font-ui); box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-brand) 34%, transparent); }
.hiw-chat__me { justify-self: end; max-width: 82%; padding: 11px 14px; background: color-mix(in srgb, var(--c-paper) 92%, transparent); color: var(--c-ink); font: 600 0.9375rem/1.35 var(--font-ui); }
.hiw-chat__them { display: flex; align-items: flex-start; gap: 10px; padding: 11px 14px 12px 11px; background: color-mix(in srgb, var(--c-paper) 92%, transparent); color: var(--c-ink); }
.hiw-chat__av { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px; background: var(--c-paper); box-shadow: 0 0 0 1px var(--c-line); }
.hiw-chat__av img { width: 24px; height: 24px; }
.hiw-chat__them p { display: grid; gap: 2px; margin: 0; }
.hiw-chat__them b { font: 700 0.875rem/1.25 var(--font-ui); color: var(--c-brand-text); }
.hiw-chat__them span { font-size: 0.9375rem; line-height: 1.35; }

/* ---------- the FAQ, on the ink ---------- */
.hiw-faq__in { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: var(--space-5) var(--space-6); align-items: start; }
.hiw-faq__title { position: sticky; top: 110px; max-width: 12ch; }
.hiw .faq__item { border-color: var(--c-ink-line); }
.hiw .faq__item summary { color: var(--c-on-ink); }
.hiw .faq__item summary::before, .hiw .faq__item summary::after { background: var(--c-on-ink); }
.hiw .faq__item summary:hover { color: var(--c-brand-on-ink); }
.hiw .faq__answer { color: var(--c-on-ink-soft); }

/* ---------- close: the salon's footage under the line (not positioned), the words in the middle ---------- */
.hiw > .hiw-close { position: static; display: grid; overflow: hidden; padding: 0; }
.hiw-close > * { grid-area: 1 / 1; }
.hiw-close__clip { align-self: stretch; justify-self: stretch; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; margin: -1px; object-fit: cover; object-position: 50% 40%; }
.hiw-close__shade { pointer-events: none; background: radial-gradient(40% 62% at 50% 54%, color-mix(in srgb, var(--c-ink) 86%, transparent) 0%, color-mix(in srgb, var(--c-ink) 66%, transparent) 46%, color-mix(in srgb, var(--c-ink) 18%, transparent) 78%, transparent 100%), linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 40%, transparent) 0%, transparent 22%); }
.hiw-close__in { padding-top: clamp(130px, 14vw, 200px); padding-bottom: clamp(110px, 12vw, 170px); text-align: center; }
.hiw-close__title { max-width: 14ch; margin: 0 auto; font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.2rem); }
.hiw-close__line { max-width: 36ch; margin: var(--space-4) auto 0; font-size: 1.25rem; color: var(--c-on-ink-soft); }
.hiw-close__cta { display: grid; justify-items: center; margin-top: var(--space-6); }
.hiw-close__cta .btn-note { justify-content: center; }
.hiw-close__stop { right: var(--gutter); top: 28px; }

/* ---------- the computer narrows ---------- */
@media (max-width: 1100px) {
  .hiw-yours__grid { grid-template-columns: minmax(0, 1fr) 260px; gap: var(--space-5); }
  .hiw-step { grid-template-columns: minmax(0, 1fr); }
  .hiw-yours__goal, .hiw-yours__scan { width: min(420px, 100%); }
  .hiw-yours__bars { width: min(460px, 100%); }
  .hiw-step--photo { grid-template-columns: minmax(0, 1fr); }
  .hiw-plan__in { grid-template-columns: minmax(0, 1fr); }
  .hiw-plan__words { max-width: 760px; }
  .hiw-team__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .hiw-walter { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--space-4); align-items: center; max-width: 420px; }
  .hiw-walter__cap { margin-top: 0; }
}

/* ---------- the tablet and the phone: one column, each scene over its photo's lower part, the faces above it ---------- */
@media (max-width: 900px) {
  .hiw-yours__grid { grid-template-columns: minmax(0, 1fr); }
  .hiw-yours__photo { position: relative; top: auto; order: -1; aspect-ratio: 4 / 3; }
  .hiw-yours__img { object-position: 30% 50%; }
}
@media (max-width: 760px) {
  .thread.hiw { --lane: 50px; --num: 38px; }
  .hiw-hero__in { padding-left: var(--gutter); }
  .hiw-hero__frame { aspect-ratio: auto; height: 520px; --pos: 50% 50%; }
  .scene.hiw-hero__wyw { left: 8px; right: 8px; top: 8px; width: auto; height: 200px; }
  .hiw-hero__stop { top: auto; bottom: 12px; right: 12px; }
  .hiw-num { font-size: 1rem; }
  .hiw-hand__node { width: 44px; height: 44px; margin-top: -22px; left: calc(var(--lane) / -2 - 22px); }
  /* a step's photo: the whole width under its words (over the lane), a fixed height, the faces in its top half, the
     scene over its lower part and past its foot */
  .hiw-shot { aspect-ratio: auto; margin-left: calc(-1 * var(--lane)); }
  .hiw-yours__photo { margin-left: calc(-1 * var(--lane)); }
  .hiw-shot__media { position: relative; inset: auto; height: 460px; }
  .hiw-shot__scene, .hiw-shot--launch .hiw-shot__scene, .hiw-plan__cost { position: relative; inset: auto; width: auto; height: 300px; margin: -196px 10px 0; }
  .hiw-shot--launch .hiw-shot__img { object-position: 44% 50%; }
  .hiw-shot--leads .hiw-shot__img { object-position: 82% 50%; }
  .hiw-shot--tune .hiw-shot__img { object-position: 24% 50%; }
  .hiw-shot--tune .hiw-shot__scene { height: auto; margin-top: -240px; }
  .hiw-shot--leads .hiw-shot__scene { transform-origin: 50% 0; }
  .hiw-shot__stop, .hiw-shot--tune .hiw-shot__stop, .hiw-plan__shot .hiw-shot__stop { left: auto; right: 12px; top: 12px; }
  .hiw-plan__shot .hiw-shot__media { height: 520px; }
  .hiw-plan__cost { height: 440px; margin-top: -300px; }
  .hiw-plan__shot .hiw-shot__img { object-position: 34% 50%; }
  .hiw-team__row { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .hiw-walter { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-3); align-items: center; }
  .hiw-walter__cap { margin-top: 0; }
  .hiw-team__shot .hiw-shot__media { height: 440px; }
  .hiw-team__shot .hiw-shot__img { inset: -1px; width: calc(100% + 2px); object-position: 100% 50%; }
  .hiw-team__chat { position: relative; right: auto; top: auto; width: auto; margin: -214px 10px 0; transform: none; }
  .hiw-faq__in { grid-template-columns: minmax(0, 1fr); }
  .hiw-faq__title { position: static; max-width: none; }
  /* the close: its clip above, the words under it on the ink */
  .hiw > .hiw-close { display: block; }
  .hiw-close__clip { display: block; width: calc(100% + 2px); height: auto; aspect-ratio: 4 / 3; margin: 0 -1px; object-position: 30% 40%; }
  .hiw-close__shade { display: none; }
  .hiw-close__in { position: relative; padding-top: var(--space-5); padding-bottom: var(--section-y); }
  .hiw-close__stop { top: -56px; right: var(--gutter); }
}
@media (max-width: 600px) {
  .hiw-step__title { font-size: 1.3rem; }
  .hiw-hand__words { font-size: 0.9375rem; }
}