@import url("../arsenal/thread.css");
/* how-it-works.css: How it works, placed and sized with the tokens of system.css (plan.md, how-it-works). One line (the
   thread, the site's mark as its links) runs down the page in one lane, 26 px in from the wrap's left edge: every text
   that lies on it keeps 72 px clear on its left, and what it passes behind is a photo or a card. The parts take no
   position and no z-index, so they never cover it (arsenal\compositions\thread\README.md). */

.hiw { --thread-ink: var(--c-purple-glow); --thread-inset: 26px; --thread-link: 10px; --thread-gap: 18px; --lane: 72px; }
@media (max-width: 1099px) { .hiw { --thread-narrow: 1; --lane: 0px; } }

/* the numbers the line plugs into, and the hand-over node: they fill with the brand as the head reaches them */
.hiw-num, .hiw-node { position: relative; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font: 800 1.1875rem/1 var(--font-display);
  --l: calc(var(--lit, 1) * var(--lit, 1) * (3 - 2 * var(--lit, 1)));
  background: color-mix(in srgb, var(--c-brand) calc(var(--l) * 100%), var(--c-paper));
  color: color-mix(in srgb, var(--c-on-brand) calc(var(--l) * 100%), var(--c-ink-soft));
  box-shadow: 0 0 0 6px var(--thread-bg), inset 0 0 0 1.5px color-mix(in srgb, var(--c-line) calc((1 - var(--l)) * 100%), transparent), 0 10px 22px -8px color-mix(in srgb, var(--c-brand) calc(var(--l) * 60%), transparent); }
.hiw-node svg { width: 24px; height: 24px; fill: currentColor; }
.hiw-num::after, .hiw-node::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; --a: var(--lit-after, 1);
  box-shadow: 0 0 0 calc((1 - (1 - var(--a)) * (1 - var(--a))) * 18px) color-mix(in srgb, var(--c-brand) calc((1 - var(--a)) * 26%), transparent); }
.hiw-h3 { font: 800 clamp(1.3125rem, 1.15rem + .5vw, 1.625rem)/1.15 var(--font-display); letter-spacing: -.015em; color: var(--c-ink); }
.hiw-who { margin-top: 4px; font: 700 .9375rem/1.2 var(--font-ui); color: var(--c-brand-text); }
/* a photo the line passes behind comes to full colour as it does */
[data-thread-light] > img { filter: saturate(calc(.72 + .28 * var(--lit, 1))); }

/* ---- hero: on navy, the words above-left, the button where the line starts; a wide clip of a diary filling up ---- */
.hiw-hero { background: var(--c-ink); color: var(--c-on-brand); padding-block: clamp(32px, 4vw, 60px) clamp(64px, 7vw, 104px); }
.hiw-hero__words { display: grid; gap: 18px; justify-items: start; max-width: 800px; margin-bottom: clamp(30px, 3.2vw, 44px); }
.hiw-hero .h1 { font-size: clamp(2.25rem, 1.25rem + 2.9vw, 3.75rem); max-width: 17ch; }
.hiw-hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 6px; }
.hiw-hero__cta .cta-row__line { max-width: 36ch; }
.hiw-hero__stage { aspect-ratio: 2.25; min-height: 460px; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
.hiw-hero__clips { position: absolute; inset: 0; }
.hiw-hero__clips [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
.hiw-hero__clips [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%))); }
.hiw-hero__clips:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; }
.hiw-hero__clips [data-kit-slide][data-prev] { visibility: visible; z-index: 1; opacity: clamp(0, (1 - var(--kit-move, 0)) * 1000, 1); }
.hiw-hero__clips:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; }
.hiw-hero__clips [data-kit-slide] video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 55%; clip-path: inset(2px); }
.hiw-hero__clips [data-kit-slide] video[data-kit-shown] { clip-path: none; }
/* one still grade over the stage, under the notifications: deeper where they stack */
.hiw-hero__clips::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(270deg, color-mix(in srgb, var(--c-navy-deep) 58%, transparent) 0%, color-mix(in srgb, var(--c-navy-deep) 20%, transparent) 42%, transparent 62%); }
.hiw-hero__feed { position: absolute; z-index: 4; top: 18px; right: 30px; height: 330px; width: max(484px, 40%); }
.hiw-hero__feed > [data-scene] { width: 100%; height: 100%; overflow: visible; }
.hiw-hero__stop { top: 16px; left: 16px; }
@media (max-width: 699px) {
  .hiw-hero__stage { aspect-ratio: 4 / 5; min-height: 0; }
  .hiw-hero__clips::after { background: linear-gradient(0deg, color-mix(in srgb, var(--c-navy-deep) 62%, transparent) 0%, transparent 60%); }
  .hiw-hero__feed { left: 4px; right: 4px; top: auto; bottom: 42px; height: 200px; width: auto; }
  .hiw-hero__stop { left: auto; right: 12px; top: 12px; }
}

/* ---- yours: steps 1 to 3 side by side on the designed ground (the bridge's arcs drawn on the part itself) ---- */
.hiw-yours { padding-block: clamp(72px, 8vw, 120px); --arc: color-mix(in srgb, var(--c-ink) 8%, transparent);
  background:
    radial-gradient(circle at 84% 12%, color-mix(in srgb, var(--c-brand) 10%, transparent), transparent 30%),
    radial-gradient(ellipse 130% 150% at 18% 150%, transparent 61%, var(--arc) 61.15%, transparent 61.5%),
    radial-gradient(ellipse 120% 140% at 30% 155%, transparent 66%, var(--arc) 66.15%, transparent 66.45%),
    radial-gradient(ellipse 140% 160% at 70% 165%, transparent 69%, var(--arc) 69.12%, transparent 69.4%),
    var(--c-paper); }
.hiw-yours__head { display: grid; gap: 14px; justify-items: center; max-width: 640px; margin: 0 auto clamp(44px, 5vw, 68px); text-align: center; }
.hiw-yours__head .lead { margin-inline: auto; }
.hiw-yours__cols { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 2.4vw, 34px); align-items: start; }
.hiw-yours__stop { top: 0; right: 0; }
/* a column: its number in the lane (the line runs between the three numbers, along their middle), the words beside it
   below that line, the scene under both at the column's width */
.hiw-col { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; row-gap: 22px; align-content: start; }
.hiw-col > .hiw-num { grid-column: 1; grid-row: 1; }
.hiw-col__words { grid-column: 2; grid-row: 1; display: grid; gap: 8px; padding: 40px 44px 0 0; }
.hiw-col__words p { font-size: 1rem; line-height: 1.5; color: var(--c-ink-soft); }
.hiw-col__scene { grid-column: 1 / -1; grid-row: 2; min-height: 300px; }
.hiw-col__scene > [data-scene] { width: 100%; }
.hiw-col__scene--grow { position: relative; display: flex; flex-direction: column; justify-content: flex-end; height: 300px; }
@media (max-width: 1099px) {
  .hiw-yours__cols { grid-template-columns: minmax(0, 560px); justify-content: center; row-gap: 48px; }
  .hiw-col__words { padding: 6px 0 0; }
  .hiw-col__scene { min-height: 0; }
  .hiw-col__scene--grow { height: 220px; }
}

/* ---- ours: the hand-over node, then three large photos down the page, sides alternating ---- */
.hiw-ours { padding-block: clamp(64px, 7vw, 104px) 24px; }
.hiw-ours__head { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 20px; }
.hiw-ours__words { display: grid; gap: 14px; max-width: 720px; padding-top: 40px; }
.hiw-step { padding-block: clamp(48px, 5vw, 72px); }
.hiw-step__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(20px, 2.4vw, 34px); align-items: center; }
.hiw-step__side { grid-column: 1 / span 7; grid-row: 1; display: grid; gap: 16px; justify-items: start; }
.hiw-step__words { grid-column: 9 / span 4; grid-row: 1; display: grid; gap: 12px; align-content: center; }
.hiw-step__words p:not(.hiw-who) { font-size: 1.0625rem; line-height: 1.6; color: var(--c-ink-soft); }
.hiw-step--flip .hiw-step__side { grid-column: 6 / span 7; justify-items: end; }
.hiw-step--flip .hiw-step__words { grid-column: 1 / span 4; }
.hiw-step__media { width: 100%; aspect-ratio: 1.42; min-height: 470px; box-shadow: var(--shadow-l); }
.hiw-step__scene { position: absolute; z-index: 2; width: min(400px, 46%); }
.hiw-step__scene > [data-scene] { width: 100%; }
.hiw-step__scene--left { left: 4%; top: 7%; bottom: 7%; }
.hiw-step__scene--left > [data-scene] { height: 100%; }
.hiw-step__scene--top-right { right: 2.5%; top: 3%; height: 290px; width: min(360px, 52%); }
/* the clinic's front desk, taller, its right side shown: the clear wall the board sits on, the receptionist under it */
.hiw-step--flip .hiw-step__media { aspect-ratio: 1.15; }
.hiw-step--flip .hiw-step__media > img { object-position: 100% 50%; }
.hiw-step__scene--top-right > [data-scene] { height: 100%; }
/* the board tilts in depth, which shows its small words just under 13 px: it is drawn a little larger */
.hiw-step__scene--top-right { transform: scale(1.1); transform-origin: 100% 0; }
.hiw-step__scene--right { right: 4%; top: 50%; translate: 0 -50%; }
.hiw-step__stop { top: 14px; right: 14px; }
.hiw-step--flip .hiw-step__stop { right: auto; left: 14px; }
@media (max-width: 1099px) {
  .hiw-step__grid { grid-template-columns: 1fr; row-gap: 26px; }
  .hiw-step__side, .hiw-step--flip .hiw-step__side, .hiw-step__words, .hiw-step--flip .hiw-step__words { grid-column: 1; }
  .hiw-step__words, .hiw-step--flip .hiw-step__words { grid-row: 2; }
  .hiw-step__side, .hiw-step--flip .hiw-step__side { justify-items: start; }
}
@media (max-width: 699px) {
  /* on the phone each photo runs edge to edge, so its board keeps its own design size */
  .hiw-step__media, .hiw-step--flip .hiw-step__media { aspect-ratio: auto; min-height: 0; height: 520px; width: calc(100% + 2 * var(--gutter)); margin-inline: calc(-1 * var(--gutter)); border-radius: 0; }
  .hiw-step__scene, .hiw-step__scene--top-right { width: auto; left: 12px; right: 12px; }
  .hiw-step__scene--left { top: auto; bottom: 12px; height: 310px; }
  .hiw-step__scene--top-right { top: 12px; height: 290px; }
  .hiw-step__scene--right { top: auto; bottom: 12px; translate: none; }
  .hiw-step__stop, .hiw-step--flip .hiw-step__stop { top: 10px; right: 10px; left: auto; }
}

/* ---- inside: the free plan itself, over the kind of job Clearwater builds ---- */
.hiw-inside { padding-block: clamp(72px, 8vw, 120px); }
.hiw-inside__grid { display: grid; gap: clamp(32px, 3.5vw, 48px); }
.hiw-inside__words { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px clamp(28px, 4.5vw, 64px); align-items: end; padding-left: var(--lane); }
.hiw-inside__side { display: grid; gap: 18px; justify-items: start; }
.hiw-inside__media { padding: clamp(18px, 2.6vw, 36px); box-shadow: var(--shadow-l); }
.hiw-inside__media > img { object-position: 50% 62%; }
.hiw-inside__media::after { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--c-navy-deep) 12%, transparent); pointer-events: none; }
.hiw-inside__scene { position: relative; z-index: 2; }
.hiw-inside__scene > [data-scene] { width: 100%; }
/* the plan's cards float over the pool itself: its stage keeps no panel of its own */
.hiw-inside__scene [data-scene] .pc-stage { background: transparent; box-shadow: none; border-color: color-mix(in srgb, var(--c-paper) 45%, transparent); }
.hiw-inside__stop { top: 12px; right: 12px; }
@media (max-width: 899px) { .hiw-inside__words { grid-template-columns: 1fr; } }
@media (max-width: 699px) { .hiw-inside__media { padding: 10px; } .hiw-inside__stop { top: 6px; right: 6px; } }

/* ---- team: the owner on a call at her own desk, our three ways of talking landing beside her ---- */
.hiw-team { padding-block: clamp(56px, 6vw, 96px) clamp(72px, 8vw, 120px); }
.hiw-team__grid { display: grid; grid-template-columns: minmax(0, 60fr) minmax(0, 40fr); gap: clamp(28px, 4.5vw, 68px); align-items: center; }
.hiw-team__media { aspect-ratio: 1.42; min-height: 480px; box-shadow: var(--shadow-l); }
.hiw-team__media > img { object-position: 30% 40%; }
.hiw-team__cards { position: absolute; z-index: 2; top: 50%; right: 5%; translate: 0 -50%; display: grid; gap: 12px; width: min(330px, 46%); }
.hiw-team__card { max-width: none; }
.hiw-team__stop { top: 14px; left: 14px; }
.hiw-team__words { display: grid; gap: 16px; }
@media (max-width: 1099px) { .hiw-team__grid { grid-template-columns: 1fr; } }
@media (max-width: 699px) {
  .hiw-team__media { aspect-ratio: auto; min-height: 0; height: 520px; }
  .hiw-team__media > img { object-position: 24% 30%; }
  .hiw-team__cards { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; translate: none; }
}

/* ---- faq: on the grey, its heading clear of the line's lane ---- */
.hiw-faq { padding-block: clamp(72px, 8vw, 120px); background: var(--c-paper-alt); --thread-bg: var(--c-paper-alt); }
.hiw-faq .page-faq__head { padding-left: var(--lane); }

/* ---- close: the close band; the line ends in the form's box ---- */
.hiw-close .close__words > .h2, .hiw-close .close__words > .lead { padding-left: var(--lane); }
.hiw-close__video { object-position: 40% 50%; }