@import url("../arsenal/thread.css");

/* How it works: one line in the hum mark (the thread) runs down the page's centre from the header's button, through
   every step's number, to the close's button. Tokens of system.css only. The line shows from 1181 px; narrower, it is
   left out (data-narrow="hide") and the numbers still light. Every card that stands on a photo on the computer stays
   at least half on it at every width, below the faces. */

/* The thread: the hum mark as its links, in Sky */
.hiw { --thread-ink: var(--c-brand); --thread-link: 13px; --thread-gap: 21px; }
@media (max-width: 1180px) { .hiw { --thread-narrow: 1; } }

/* A part with a ground keeps it under the line: its ground is drawn below the line inside the thread, the part itself
   stays clear (the thread is the stacking context; a part with a background of its own would cover the line). */
.hiw .ground { isolation: auto; background: transparent; }
.hiw .ground::before { content: ""; position: absolute; inset: 0; z-index: -2; background: var(--c-paper-alt); }
.hiw .ground--slate::before { background: var(--c-brand-dark); }
.hiw .close { background: transparent; }
.hiw .close__ground { z-index: -1; background: var(--c-ink); }

/* Every scene's place: the runtime's own rules make a scene's box relative, so its place here keeps the absolute
   position that gives it its size. */
.hiw-hero__chat, .step__host, .row__host, .inside__host { position: absolute !important; inset: 0; }

/* Each head sits left of the line, never across it */
@media (min-width: 1181px) { .hiw .section__head { max-width: min(34rem, calc(50vw - var(--gutter) - 48px)); } }

/* The numbers on the line: they fill with Sky as the line plugs in, and give one ring */
.step__num, .row__num { display: grid; place-items: center; z-index: 2; box-sizing: border-box; width: 60px; height: 60px; border-radius: 50%; background: color-mix(in srgb, var(--c-brand) calc(var(--lit, 1) * 100%), var(--c-card)); box-shadow: inset 0 0 0 2px var(--c-brand-dark), var(--shadow-s); font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; line-height: 1; color: var(--c-ink); }
.step__num::after, .row__num::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; box-shadow: 0 0 0 2px var(--c-brand); opacity: calc(var(--lit, 0) * (1 - var(--lit-after, 1))); scale: calc(1 + var(--lit-after, 1) * 0.6); pointer-events: none; }

/* The header: two calm clips of a diary filling, the words centred, the free plan chat rising from its foot */
.hiw-hero { position: relative; display: grid; min-height: clamp(720px, calc(100svh - 84px), 900px); color: var(--c-on-ink); }
.hiw-hero__stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--c-ink); }
[data-kit-scene="rotate"] [data-kit-slide] { position: absolute; inset: 0; margin: 0; visibility: hidden; overflow: hidden; }
[data-kit-scene="rotate"] [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%))); }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-prev])) [data-kit-slide][data-kit-on] { transform: none; opacity: 1; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; }
[data-kit-scene="rotate"] [data-kit-slide] video { inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; clip-path: inset(2px); }
[data-kit-scene="rotate"] [data-kit-slide] video[data-kit-shown] { clip-path: none; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { opacity: clamp(0, (1 - var(--kit-move, 0)) * 1000, 1); }
.hiw-hero__stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: radial-gradient(ellipse 62% 74% at 50% 34%, color-mix(in srgb, var(--c-ink) 80%, transparent) 0%, color-mix(in srgb, var(--c-ink) 58%, transparent) 58%, color-mix(in srgb, var(--c-ink) 34%, transparent) 100%); }
.hiw-hero__stop { top: var(--space-4); right: var(--gutter); }
.hiw-hero__in { position: relative; display: grid; justify-items: center; align-content: start; gap: var(--space-5); padding-top: clamp(2.5rem, 5vh, 4.5rem); text-align: center; }
.hiw-hero__words { display: grid; justify-items: center; gap: var(--space-3); max-width: 52rem; }
.hiw-hero__words h1 { color: var(--c-on-ink); }
.hiw-hero__line { max-width: 38rem; font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.3125rem); line-height: 1.5; color: var(--c-on-ink); text-wrap: pretty; }
.hiw-hero__go, .hiw-close__go { display: grid; justify-items: center; gap: var(--space-2); margin-top: var(--space-1); }
.hiw-hero__go .promise { justify-content: center; }
.hiw-hero__phone { position: relative; width: 296px; height: 368px; margin-bottom: -40px; }

/* Your part: three wide cards on Oat, each number on the line above its card */
.yours { padding-top: calc(var(--section-y) + 40px); }
.steps { display: grid; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.step { display: grid; justify-items: center; }
.step__num { margin-bottom: -30px; }
.step__card { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 420px; align-items: center; gap: var(--space-5); box-sizing: border-box; width: min(100%, 1000px); padding: var(--space-5) var(--space-5) var(--space-4); border-radius: var(--radius-l); background: var(--c-card); box-shadow: var(--shadow-m); }
.step__words { display: grid; gap: var(--space-3); align-content: center; }
.step__words h3 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); }
.step__time { justify-self: start; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--c-brand-light); color: var(--c-brand-text); font-size: var(--fs-small); font-weight: 800; }
.step__stage { position: relative; height: 300px; }
.step--1 .step__stage { height: 252px; }
.step--2 .step__stage { height: 320px; }
.step--3 .step__stage { height: 400px; }
.yours__stop { top: 10px; right: 12px; }

/* Our part: the picture, the number on the line, the words; sides alternating */
.rows { display: grid; gap: clamp(3rem, 2rem + 3vw, 5.5rem); margin: 0; padding: 0; list-style: none; }
.row { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; }
.row__frame { grid-column: 1; grid-row: 1; aspect-ratio: 11 / 10; }
.row__num { grid-column: 2; grid-row: 1; justify-self: center; }
.row__words { grid-column: 3; grid-row: 1; display: grid; gap: var(--space-2); max-width: 30rem; }
.row__words h3 { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); }
.row__words p { font-size: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); color: var(--c-ink-soft); text-wrap: pretty; }
.row--2 .row__frame { grid-column: 3; }
.row--2 .row__words { grid-column: 1; justify-self: end; }
.row__pic { position: absolute; inset: 0; overflow: hidden; }
.row__pic img, .row__pic video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.row--1 .row__pic :is(video, img) { object-position: 70% 50%; }
.row--2 .row__pic img { object-position: 60% 50%; }
.row--3 .row__pic img { object-position: 50% 18%; }
.row__scene { position: absolute; z-index: 2; left: 20px; bottom: 20px; width: min(44%, 300px); height: 300px; }
.row--2 .row__scene { top: 20px; bottom: auto; width: min(56%, 340px); }
.row--3 .row__scene { width: 260px; height: 400px; }
.ours__stop { top: 16px; right: 16px; }

/* The evening, before and after: the same cards in the same places */
.eve { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); }
.eve__frame { grid-row: 1; margin: 0; aspect-ratio: 4 / 3; }
.eve__frame--before { grid-column: 1; }
.eve__frame--after { grid-column: 3; }
.eve__pic { position: absolute; inset: 0; overflow: hidden; }
.eve__pic img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.eve__cards { position: absolute; z-index: 2; left: 16px; top: 16px; display: grid; justify-items: start; gap: 8px; width: min(36%, 236px); }
.eve__tag { padding: 0.3rem 0.8rem; border-radius: 999px; background: var(--c-card); color: var(--c-ink); font-size: var(--fs-small); font-weight: 800; box-shadow: var(--shadow-s); }
.eve__tag--after { background: var(--c-brand); color: var(--c-on-brand); }
.eve__list { display: grid; gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; }
.eve__card { position: relative; box-sizing: border-box; padding: 0.6rem 0.85rem 0.6rem 2.45rem; border-radius: var(--radius-s); background: var(--c-card); box-shadow: var(--shadow-m); font-size: var(--fs-small); font-weight: 700; line-height: 1.3; color: var(--c-ink); }
.eve__card::before { content: ""; position: absolute; left: 0.8rem; top: 50%; width: 18px; height: 18px; margin-top: -9px; box-sizing: border-box; border-radius: 50%; border: 2px solid var(--c-ink-soft); }
.eve__card--after { opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.eve__card--after::before { border: 0; background: var(--c-brand); }
.eve__card--after::after { content: ""; position: absolute; left: calc(0.8rem + 5px); top: 50%; width: 8px; height: 4px; margin-top: -4px; border-left: 2px solid var(--c-ink); border-bottom: 2px solid var(--c-ink); transform: rotate(-45deg); }
.eve__hum { position: absolute; right: -14px; top: -30px; width: 40px; --hum-off: calc((1 - var(--kit-in, 1)) * 100); }
.eve__stop { top: 12px; right: 12px; }

/* What's inside: the plan building itself on Slate, the line passing behind it */
.inside__in { display: grid; grid-template-columns: minmax(0, 1fr) 720px; align-items: center; gap: 64px; }
.inside__words { margin: 0; }
.inside__frame { position: relative; }
.inside__stage { position: relative; height: 560px; }
.inside__stop { top: calc(100% + 12px); right: 0; }

/* Who runs it: the photo with her dashboard on the plain wall, the words and the number beside it */
.team__in { display: grid; grid-template-columns: minmax(0, 1fr) 96px minmax(0, 1fr); align-items: center; }
.team__frame { grid-column: 1; aspect-ratio: 4 / 3; }
.team__pic { position: absolute; inset: 0; overflow: hidden; }
.team__pic img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.team__words { grid-column: 3; display: grid; justify-items: start; gap: var(--space-3); max-width: 30rem; }
.team__words .section__line a { font-weight: 800; white-space: nowrap; }
.team__stop { top: 14px; left: 14px; }
.dash { position: absolute; z-index: 2; right: 4%; top: 50%; translate: 0 -50%; display: grid; grid-template-columns: minmax(0, 1fr); width: min(42%, 268px); }
.dash__base { grid-area: 1 / 1; display: grid; gap: 12px; padding: 14px 14px 16px; border-radius: var(--radius-m) var(--radius-m) 0 0; background: var(--c-card); box-shadow: var(--shadow-l); }
.dash__head { display: grid; gap: 2px; margin: 0; }
.dash__head b { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; color: var(--c-brand-dark); }
.dash__head span { font-size: var(--fs-small); font-weight: 700; color: var(--c-ink-soft); }
.dash__btn { display: grid; place-items: center; min-height: 44px; padding: 0 14px; border-radius: 999px; background: var(--c-brand-light); color: var(--c-brand-text); font-size: var(--fs-small); font-weight: 800; }
.dash__btn--sent { grid-area: 1 / 1; align-self: end; margin: 0 14px 16px; background: var(--c-brand-dark); color: var(--c-on-ink); opacity: var(--kit-in, 1); }
.dash__reply { position: relative; display: grid; gap: 4px; padding: 12px 14px 14px; border-radius: 0 0 var(--radius-m) var(--radius-m); background: var(--c-brand); color: var(--c-on-brand); box-shadow: var(--shadow-l); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.dash__reply b { font-size: var(--fs-small); font-weight: 800; }
.dash__reply p { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; line-height: 1.3; }
.dash__hum { position: absolute; right: -12px; top: -28px; width: 40px; --hum-off: calc((1 - var(--kit-in, 1)) * 100); }

/* The FAQ: its cards are opaque, so the line passes behind them */
.hiw .faq-list details { position: relative; z-index: 1; }

/* The close: the shop's counter, the card beside the new customer, the words low on the left, the line ending in
   the button */
.hiw-close { align-items: end; }
.hiw-close .close__ground img { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 25%; }
.hiw-close .close__ground::after { background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 88%, transparent) 0%, color-mix(in srgb, var(--c-ink) 62%, transparent) 30%, transparent 56%), linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 42%, transparent) 0%, transparent 44%); }
.hiw-close__card { position: absolute; z-index: 2; right: max(var(--gutter), 4%); top: 44%; width: min(23rem, 30%); }
.hiw-close__card .pathcard__row--booked b { font-size: 1.1875rem; }
.hiw-close__go { justify-items: start; }
.hiw-close__go .promise { justify-content: flex-start; }

/* Narrower screens: the line is left out, the numbers stay */
@media (max-width: 1180px) {
  .hiw .close { background: var(--c-ink); }
  .hiw .close__ground { z-index: auto; }
  .inside__in { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: var(--space-4); }
  .inside__words { justify-self: start; }
  .inside__frame { width: min(100%, 720px); }
}
@media (max-width: 1100px) {
  /* Our part: the number and the words above, the picture across the width under them */
  .row { grid-template-columns: 60px minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-3); align-items: center; }
  .row__num, .row--2 .row__num { grid-column: 1; grid-row: 1; justify-self: start; }
  .row__words, .row--2 .row__words { grid-column: 2; grid-row: 1; justify-self: start; max-width: 40rem; }
  .row__frame, .row--2 .row__frame { grid-column: 1 / -1; grid-row: 2; aspect-ratio: 16 / 10; }
  .row__scene, .row--2 .row__scene { width: min(42%, 340px); }
  .row--3 .row__scene { width: min(42%, 340px); height: 360px; }
  .row--3 .row__pic img { object-position: 50% 15%; }
  /* The evening: before above after, the cards in the same places */
  .eve { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .eve__frame--before, .eve__frame--after { grid-column: 1; grid-row: auto; aspect-ratio: 16 / 10; }
  .eve__cards { width: min(36%, 300px); }
  /* Who runs it: the words above, the photo under them */
  .team__in { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .team__words { grid-column: 1; grid-row: 1; max-width: 40rem; }
  .team__frame { grid-column: 1; grid-row: 2; }
}
@media (max-width: 900px) {
  /* Your part: each card's words above its scene */
  .step__card { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); padding: var(--space-5) var(--space-3) var(--space-3); }
  .step__words { justify-items: center; text-align: center; }
  .step__time { justify-self: center; }
  .step__stage { width: min(100%, 440px); justify-self: center; }
  .step--1 .step__stage { height: 280px; }
  .step--2 .step__stage { height: 400px; }
  .step--3 .step__stage { height: 420px; }
}
@media (max-width: 760px) {
  /* The header: the clips behind the words and down to the middle of the chat, so the chat stands half on them and
     the first clip's poster is never drawn past its file; Ink under them (the line is left out at this width) */
  .hiw-hero { min-height: 0; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; background: var(--c-ink); }
  .hiw-hero__in { display: contents; }
  .hiw-hero__words { position: relative; z-index: 2; grid-row: 1; grid-column: 1; justify-self: center; padding: 64px var(--gutter) var(--space-4); }
  .hiw-hero__words h1 { font-size: clamp(2.125rem, 1.6rem + 2.2vw, 2.5rem); }
  .hiw-hero__stage { position: relative; inset: auto; z-index: 0; grid-row: 1 / 3; grid-column: 1; margin-bottom: calc(368px * 0.48 - 32px); }
  .hiw-hero__slide:first-child :is(video, img) { object-position: 67% 50%; }
  .hiw-hero__slide:nth-child(2) :is(video, img) { object-position: 47% 50%; }
  .hiw-hero__stage::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 84%, transparent) 0%, color-mix(in srgb, var(--c-ink) 62%, transparent) 55%, color-mix(in srgb, var(--c-ink) 30%, transparent) 82%, var(--c-ink) 100%); }
  .hiw-hero__stop { grid-row: 1; grid-column: 1; top: 12px; right: 12px; }
  .hiw-hero__phone { z-index: 2; grid-row: 2; grid-column: 1; justify-self: center; width: min(296px, 84vw); margin-bottom: -32px; }
  /* Our part: each picture at a set height, its scene over its foot, below the faces */
  .row--1 { --ph: 340px; --sh: 300px; }
  .row--2 { --ph: 300px; --sh: 290px; }
  .row--3 { --ph: 420px; --sh: 380px; }
  .row__frame, .row--2 .row__frame { aspect-ratio: auto; height: calc(var(--ph) + var(--sh) * 0.5); background: var(--c-paper-alt); }
  .row__pic { inset: 0 0 auto 0; height: var(--ph); }
  .row__scene, .row--2 .row__scene, .row--3 .row__scene { top: auto; bottom: 12px; left: 12px; right: 12px; width: auto; height: var(--sh); }
  .row--2 .row__scene { left: 4px; right: 4px; }
  .inside__stop { top: -56px; right: 0; }
  .row--1 .row__pic :is(video, img) { object-position: 64% 50%; }
  .row--3 .row__pic img { object-position: 50% 10%; }
  .ours__stop { top: 12px; right: 12px; }
  /* The evening: taller frames on the left of each photo, the cards wider */
  .eve__frame--before, .eve__frame--after { aspect-ratio: 4 / 5; }
  .eve__pic img { object-position: 0% 50%; }
  .eve__cards { left: 12px; top: 12px; width: 58%; }
  /* Who runs it: the photo at a set height, her dashboard over its foot, below her face */
  .team__frame { --ph: 340px; --sh: 236px; aspect-ratio: auto; height: calc(var(--ph) + var(--sh) * 0.5); background: var(--c-paper-alt); }
  .team__pic { inset: 0 0 auto 0; height: var(--ph); }
  .team__pic img { object-position: 36% 50%; }
  .dash { top: auto; bottom: 12px; right: 12px; left: 12px; translate: none; width: auto; }
  .team__stop { top: 12px; left: auto; right: 12px; }
  /* The close: the photo on top, the card on its counter, the words under it */
  .hiw-close__card { top: 120px; right: 12px; width: min(300px, calc(100% - 24px)); }
}
@media (max-width: 640px) {
  .hiw-close .close__ground img { object-position: 46% 30%; }
}
@media (max-width: 600px) {
  /* the plan is 700 px tall here: its stop icon sits in its top corner, so both fit one view */
  .inside__stage { height: 700px; }
  .inside__stop { top: 10px; right: 10px; }
}