/* site\assets\css\pages\how-it-works.css: How it works, as plan.md writes it. Only system.css's tokens. Parts: hero
   (the general shot full-bleed, the words centered, the notifications stacking in glass at the lower right), steps (the
   signature: one gold road on the designed ground, dotted through the owner's three steps, then solid), plan (a framed
   photo with the plan's three cards in glass over its free side), team (a framed photo with the owner's phone in
   glass), faq, close. */

/* hero */
.hiw-hero { display: flex; align-items: center; min-height: min(90svh, 840px); padding-block: clamp(56px, 7vw, 104px) clamp(170px, 17vw, 220px); overflow: hidden; }
.hiw-hero__media::after { background: radial-gradient(52% 46% at 50% 40%, color-mix(in srgb, var(--c-ink) 62%, transparent), color-mix(in srgb, var(--c-ink) 22%, transparent) 74%, color-mix(in srgb, var(--c-ink) 8%, transparent)), linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 22%, transparent) 0%, transparent 26%, transparent 58%, color-mix(in srgb, var(--c-ink) 80%, transparent) 100%); }
.hiw-hero__photo { object-position: 50% 62%; }
.hiw-hero__in { position: relative; z-index: 1; text-align: center; }
.hiw-hero__title { max-width: 14em; margin-inline: auto; font-size: var(--fs-h1); color: var(--c-paper); }
.hiw-hero__line { max-width: 33em; margin: 22px auto 32px; font-size: 1.1875rem; line-height: 1.55; color: color-mix(in srgb, var(--c-paper) 88%, transparent); }
.hiw-hero__cta { position: relative; display: flex; flex-direction: column; align-items: center; }
/* a short gold line with a node, dropping from the button toward the steps */
.hiw-hero__cta::after { content: ""; position: absolute; left: 50%; top: calc(100% + 18px); width: 14px; height: 78px; margin-left: -7px; background: linear-gradient(var(--c-gold), var(--c-gold)) 50% 0 / 2px calc(100% - 14px) no-repeat, radial-gradient(circle, var(--c-ink) 0 3px, var(--c-gold) 3.5px 6.5px, transparent 7px) 50% 100% / 14px 14px no-repeat; }
/* over 480 px wide, so the scene shows all three notifications (it shows two at 480 and under) */
.hiw-hero__stack { position: absolute; z-index: 2; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); bottom: clamp(24px, 3vw, 44px); width: 500px; height: 290px; }
.hiw-hero__scene { display: block; width: 100%; height: 100%; }
.hiw-hero__stop { position: absolute; z-index: 3; top: -54px; right: 0; }

/* steps: the designed ground (warm white, a faint navy field of round nodes, the gold's light), the road at the left */
.hiw-steps { background: var(--c-paper-alt); overflow: hidden; }
.hiw-steps__ground { position: absolute; inset: 0; z-index: -1; background:
  radial-gradient(38% 26% at 10% 14%, color-mix(in srgb, var(--c-gold) 14%, transparent), transparent 70%),
  radial-gradient(44% 34% at 92% 64%, color-mix(in srgb, var(--c-azure) 8%, transparent), transparent 72%),
  radial-gradient(circle, transparent 0 2.2px, color-mix(in srgb, var(--c-ink) 9%, transparent) 2.6px 3.6px, transparent 4px) 0 0 / 38px 38px;
  -webkit-mask-image: linear-gradient(180deg, transparent, var(--c-ink) 8%, var(--c-ink) 92%, transparent); mask-image: linear-gradient(180deg, transparent, var(--c-ink) 8%, var(--c-ink) 92%, transparent); }
.hiw-road { --node: 52px; --rail: clamp(22px, 3vw, 40px); position: relative; max-width: 1100px; margin-inline: auto; padding-left: calc(var(--node) + var(--rail)); }
/* the road: dots through the owner's stretch, a line through the team's; its gold fills as the visitor reads */
.hiw-road__track { position: absolute; left: calc(var(--node) / 2 - 2px); top: 8px; bottom: 0; width: 4px; }
.hiw-road__track::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--yes, 50%); background: radial-gradient(circle, color-mix(in srgb, var(--c-ink) 26%, transparent) 0 1.7px, transparent 2.2px) 50% 0 / 4px 12px repeat-y; }
.hiw-road__track::after { content: ""; position: absolute; left: 1px; right: 1px; top: var(--yes, 50%); bottom: 0; border-radius: 2px; background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 16%, transparent) 80%, transparent); }
.hiw-road__fill { position: absolute; z-index: 1; left: 0; right: 0; top: 0; }
.hiw-road__fill--you { height: min(var(--fill, 0px), var(--yes, 50%)); background: radial-gradient(circle, var(--c-gold) 0 2px, transparent 2.5px) 50% 0 / 4px 12px repeat-y; }
.hiw-road__fill--us { top: var(--yes, 50%); height: max(0px, var(--fill, 0px) - var(--yes, 50%)); border-radius: 2px; background: var(--c-gold); box-shadow: 0 0 14px color-mix(in srgb, var(--c-gold) 50%, transparent); }
.hiw-road__stop { position: absolute; z-index: 4; top: -6px; right: 0; }
.hiw-road__stretch { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 22px; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.hiw-road__stretch b { font-family: var(--font-display); font-stretch: var(--stretch-tag); font-weight: 800; font-size: var(--fs-tag); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink); }
.hiw-road__stretch::before { content: ""; position: absolute; left: calc(-1 * (var(--node) / 2 + var(--rail)) - 8px); top: 1px; width: 16px; height: 16px; box-sizing: border-box; border-radius: 50%; background: var(--c-paper-alt); border: 2px solid color-mix(in srgb, var(--c-ink) 30%, transparent); }
.hiw-road__stretch--us { margin-top: 0; }
.hiw-road__steps { list-style: none; margin: 0; padding: 0; }
.hiw-step { position: relative; }
.hiw-step + .hiw-step { margin-top: clamp(24px, 3.4vw, 44px); }
.hiw-step__node { position: absolute; z-index: 2; left: calc(-1 * (var(--node) + var(--rail))); top: 28px; display: grid; place-items: center; width: var(--node); height: var(--node); box-sizing: border-box; border-radius: 50%; background: var(--c-paper); border: 2px solid color-mix(in srgb, var(--c-ink) 18%, transparent); font-family: var(--font-display); font-stretch: var(--stretch-tag); font-weight: 800; font-size: 1.0625rem; color: var(--c-ink); transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.hiw-step.is-reached .hiw-step__node { background: var(--c-gold); border-color: var(--c-gold); box-shadow: var(--glow-gold); }
.hiw-step__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); gap: clamp(24px, 3vw, 48px); align-items: center; padding: clamp(22px, 2.4vw, 34px); border-radius: var(--radius-l); background: color-mix(in srgb, var(--c-paper) 88%, transparent); border: 1px solid var(--c-line); box-shadow: var(--shadow-m); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.hiw-step__words h3 { margin: 0; font-size: var(--fs-h3); color: var(--c-ink); }
.hiw-step__time { display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 0; padding: 7px 13px 7px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-gold) 24%, var(--c-paper)); font: 700 var(--fs-small)/1 var(--font-ui); color: var(--c-ink); }
.hiw-step__time svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hiw-road__steps[start="4"] .hiw-step__time { background: var(--c-ink); color: var(--c-paper); }
.hiw-step__line { max-width: 34ch; margin: 14px 0 0; font-size: 1.0625rem; line-height: 1.55; color: var(--c-ink-soft); }
.hiw-step__pic { position: relative; height: 330px; }
.hiw-step__scene { display: block; width: 100%; height: 100%; }
/* the bars' card sizes itself (its end tag wraps under the sources in a narrow box): its picture takes the card's height */
.hiw-step__pic:has(.hiw-step__scene--bars), .hiw-step__scene--bars { height: auto; }
/* the yes: where the dots turn into the team's line */
.hiw-road__yes { position: relative; display: flex; align-items: center; margin: clamp(30px, 4vw, 50px) 0; }
.hiw-road__yesnode { position: absolute; z-index: 2; left: calc(-1 * (var(--node) / 2 + var(--rail)) - 24px); top: 50%; display: grid; place-items: center; width: 48px; height: 48px; margin-top: -24px; box-sizing: border-box; border-radius: 50%; background: var(--c-paper); border: 2px solid var(--c-gold); transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.hiw-road__yesnode svg { width: 22px; height: 22px; fill: none; stroke: var(--c-gold); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.hiw-road__yes.is-reached .hiw-road__yesnode { background: var(--c-gold); box-shadow: var(--glow-gold); }
.hiw-road__yes.is-reached .hiw-road__yesnode svg { stroke: var(--c-ink); }
.hiw-road__yes p { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.hiw-road__yes b { display: inline-block; padding: 11px 20px; border-radius: 999px; background: var(--c-ink); color: var(--c-gold); font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1; }
.hiw-road__yes p span { font-size: var(--fs-small); color: var(--c-ink-soft); }

/* plan: the photo framed at the right, the plan's three cards in glass over its free side (the chair, the window) */
.hiw-plan { overflow: hidden; }
.hiw-plan__pic { position: relative; height: 760px; }
.hiw-plan__frame { position: absolute; inset: 0 0 0 34%; overflow: hidden; border-radius: var(--radius-l); background: var(--c-navy-2); box-shadow: var(--shadow-l); }
.hiw-plan__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 72% 30%; }
.hiw-plan__frame::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 48%, transparent) 0%, transparent 42%); }
/* 760 px or more where it fits, so the scene sets its three captions in one row; her face stays right of it */
.hiw-plan__panel { position: absolute; z-index: 2; left: 0; top: 50%; width: min(780px, 63%); transform: translateY(-50%); }
.hiw-plan__scene { display: block; width: 100%; }
.hiw-plan__stop { position: absolute; z-index: 4; top: -54px; left: 0; }

/* team: the photo framed at the left, the owner's phone in glass over its free side, the words at the right */
.hiw-team__in { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.hiw-team__copy { order: 2; }
.hiw-team__copy h2 { color: var(--c-ink); }
.hiw-team__copy p { max-width: 36ch; margin: 20px 0 0; font-size: 1.1875rem; line-height: 1.55; color: var(--c-ink-soft); }
.hiw-team__pic { position: relative; height: 640px; }
.hiw-team__frame { position: absolute; inset: 0; overflow: hidden; border-radius: var(--radius-l); background: var(--c-sand); box-shadow: var(--shadow-l); }
.hiw-team__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 18% 50%; }
.hiw-team__phone { position: absolute; z-index: 2; right: 8%; top: 50%; display: flex; flex-direction: column; width: 330px; height: 560px; padding: 18px 14px 16px; box-sizing: border-box; border-radius: 38px; background: var(--c-glass-strong); border: 1px solid var(--c-glass-line); color: var(--c-paper); box-shadow: var(--shadow-l); transform: translateY(-50%); -webkit-backdrop-filter: blur(18px) saturate(150%); backdrop-filter: blur(18px) saturate(150%); }
.hiw-team__app { display: flex; align-items: center; gap: 10px; padding: 2px 6px 14px; border-bottom: 1px solid var(--c-glass-line); }
.hiw-team__app img { width: 36px; height: 36px; border-radius: 50%; }
.hiw-team__app p { margin: 0; display: grid; gap: 2px; }
.hiw-team__app b { font: 700 1rem/1.2 var(--font-ui); }
.hiw-team__app span { font-size: var(--fs-small); color: color-mix(in srgb, var(--c-paper) 72%, transparent); }
.hiw-team__chat { display: flex; flex: 1; flex-direction: column; gap: 10px; padding-top: 14px; }
.hiw-team__msg { margin: 0; opacity: calc(var(--kit-in, 1) * (1 - var(--kit-out, 0))); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.hiw-team__board { padding: 13px 12px 12px; border-radius: 18px; background: color-mix(in srgb, var(--c-paper) 9%, transparent); border: 1px solid var(--c-glass-line); opacity: 1; transform: none; }
.hiw-team__today { display: flex; align-items: baseline; justify-content: space-between; margin: 0 2px 10px; }
.hiw-team__today span { font-family: var(--font-display); font-stretch: var(--stretch-tag); font-weight: 700; font-size: var(--fs-tag); letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--c-paper) 72%, transparent); }
.hiw-team__today b { font-family: var(--font-display); font-weight: 800; font-size: 1.125rem; line-height: 1.1; color: var(--c-gold); }
.hiw-team__board ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.hiw-team__board li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 8px; row-gap: 1px; padding: 9px 10px; border-radius: 12px; background: color-mix(in srgb, var(--c-ink) 42%, transparent); }
.hiw-team__board li b { font: 700 .9375rem/1.25 var(--font-ui); }
.hiw-team__board li span { grid-column: 1; font-size: .8125rem; line-height: 1.3; color: color-mix(in srgb, var(--c-paper) 74%, transparent); }
.hiw-team__board li em { grid-column: 2; grid-row: 1 / span 2; align-self: center; padding: 5px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c-azure) 18%, transparent); color: var(--c-azure); font: 700 .75rem/1 var(--font-ui); font-style: normal; white-space: nowrap; }
.hiw-team__human { display: flex; justify-content: center; }
.hiw-team__human span { display: inline-flex; align-items: center; padding: 11px 20px; border-radius: 999px; border: 1.5px solid var(--c-gold); color: var(--c-gold); font: 700 .9375rem/1 var(--font-ui); }
.hiw-team__human span[data-kit-on] { background: var(--c-gold); color: var(--c-ink); box-shadow: 0 0 0 6px color-mix(in srgb, var(--c-gold) 24%, transparent); }
.hiw-team__msg--me { align-self: flex-end; max-width: 84%; padding: 10px 14px; border-radius: 16px 16px 4px 16px; background: var(--c-azure); color: var(--c-ink); font: 600 .9375rem/1.35 var(--font-ui); }
.hiw-team__msg--typing { align-self: flex-start; display: inline-flex; gap: 5px; padding: 13px 14px; border-radius: 16px 16px 16px 4px; background: color-mix(in srgb, var(--c-paper) 14%, transparent); }
.hiw-team__msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: color-mix(in srgb, var(--c-paper) 72%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .hiw-team__msg--typing i { animation: hiw-dot 1s var(--ease-in-out) infinite; }
  .hiw-team__msg--typing i:nth-child(2) { animation-delay: .15s; }
  .hiw-team__msg--typing i:nth-child(3) { animation-delay: .3s; }
}
@keyframes hiw-dot { 0%, 60%, 100% { transform: translateY(0); } 30% { transform: translateY(-4px); } }
.hiw-team__msg--team { align-self: flex-start; max-width: 88%; padding: 10px 14px 12px; border-radius: 16px 16px 16px 4px; background: var(--c-paper); color: var(--c-ink); }
.hiw-team__msg--team small { display: block; margin-bottom: 4px; font: 700 .75rem/1 var(--font-ui); color: var(--c-brand-text); }
.hiw-team__msg--team p { margin: 0; font: 600 .9375rem/1.35 var(--font-ui); }
.hiw-team__stop { position: absolute; z-index: 4; top: 14px; right: 14px; }

/* close: the home page's closing band, with the main button and its note */
.close { display: flex; align-items: flex-end; min-height: min(90svh, 880px); }
.close__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 34%, transparent) 0%, color-mix(in srgb, var(--c-ink) 20%, transparent) 30%, color-mix(in srgb, var(--c-ink) 76%, transparent) 60%, color-mix(in srgb, var(--c-ink) 96%, transparent) 100%); }
.close__media video { object-position: 40% 16%; } /* his whole head in the band, clear above the words */
.close__wrap { width: 100%; text-align: center; }
.close h2 { font-size: var(--fs-h1); color: var(--c-paper); }
.close__line { max-width: 560px; margin: 16px auto 28px; font-size: 1.1875rem; line-height: 1.5; color: color-mix(in srgb, var(--c-paper) 90%, transparent); }
.close__cta { display: flex; flex-direction: column; align-items: center; }

@media (max-width: 1100px) {
  .hiw-step__card { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
  .hiw-team__in { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
}

@media (max-width: 900px) {
  .hiw-hero { flex-direction: column; align-items: stretch; justify-content: center; padding-block: 56px 40px; }
  .hiw-hero__cta::after { display: none; }
  .hiw-hero__stack { position: relative; right: auto; bottom: auto; width: min(420px, 100%); height: 230px; margin: 44px auto 0; }
  .hiw-road { --node: 36px; --rail: 10px; }
  .hiw-step__node { top: 22px; font-size: .875rem; }
  .hiw-step__card { grid-template-columns: minmax(0, 1fr); gap: 20px; padding: 20px 12px 14px; }
  .hiw-step__words { padding-inline: 4px; }
  .hiw-step__pic { width: min(420px, 100%); height: 380px; margin-inline: auto; }
  .hiw-road__yesnode { width: 40px; height: 40px; margin-top: -20px; left: calc(-1 * (var(--node) / 2 + var(--rail)) - 20px); }
  /* plan: a tall crop, her face in its top third, the three cards standing on its lower half */
  .hiw-plan__pic { height: auto; }
  .hiw-plan__frame { position: relative; inset: auto; height: 960px; }
  .hiw-plan__photo { object-position: 71% 0%; }
  .hiw-plan__frame::after { background: linear-gradient(180deg, transparent 44%, color-mix(in srgb, var(--c-ink) 52%, transparent) 100%); }
  .hiw-plan__panel { position: relative; left: auto; top: auto; width: 100%; max-width: 560px; margin: -480px auto 0; transform: none; }
  .hiw-plan__stop { left: auto; right: 0; }
  /* team: the words, then a tall crop with his face at its top, the phone standing on its lower half */
  .hiw-team__in { grid-template-columns: minmax(0, 1fr); }
  .hiw-team__copy { order: 0; }
  .hiw-team__pic { height: auto; }
  .hiw-team__frame { position: relative; inset: auto; height: 900px; }
  .hiw-team__photo { object-position: 19% 0%; }
  .hiw-team__phone { position: relative; right: auto; top: auto; width: min(330px, 100%); margin: -480px auto 0; transform: none; }
  .hiw-team__stop { top: auto; bottom: 572px; right: 12px; }
}