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

/* How it works. One line runs through every part: the parts keep no z-index and no positioned ground of their own, so the
   line stands over their grounds and behind what is marked in front of it (arsenal\compositions\thread\README.md). */
.hw {
  --thread-ink: var(--c-brand);
  --thread-track-ink: color-mix(in srgb, var(--c-brand) 46%, transparent);
  --thread-bg: var(--c-ink);
  --thread-radius: 40px;
  --thread-inset: 56px;
  --lane: 62px;
}
.hw > .band { position: static; }
.hw .wrap { position: relative; }

/* the step numbers: the line plugs into each */
.nb { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; font: 400 1.05rem/1 var(--font-display); color: var(--c-ink); background: color-mix(in srgb, var(--c-brand) calc(var(--lit, 0) * 100%), var(--c-paper)); box-shadow: 0 0 0 2px var(--c-brand); }
.nb--ink { color: var(--c-on-ink); background: color-mix(in srgb, var(--c-brand) calc(var(--lit, 0) * 100%), var(--c-ink)); }
.nb[data-lit] { color: var(--c-on-brand); }
.nb::after { content: ""; position: absolute; inset: -2px; border-radius: 50%; border: 2px solid var(--c-brand); opacity: calc(var(--lit, 0) * (1 - var(--lit-after, 0))); transform: scale(calc(1 + var(--lit-after, 0) * .9)); pointer-events: none; }

/* the header: a real phone lying on a bright table, the bookings on its own screen */
.hwh { position: relative; display: grid; align-items: center; min-height: clamp(760px, 58vw, 1000px); padding: 3rem var(--gutter); color: var(--c-ink); }
.hwh__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; background: var(--c-paper-alt); }
.hwh__photo { position: absolute; left: 0; top: 50%; width: 115%; margin: 0; aspect-ratio: 3 / 2; translate: 0 -48.8%; }
.hwh__photo .screen { border-radius: 30px; }
.hwh__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 58% at 48% 50%, color-mix(in srgb, var(--c-paper) 74%, transparent) 0%, color-mix(in srgb, var(--c-paper) 58%, transparent) 55%, transparent 100%); }
.hwh__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, min(620px, 46vw)) minmax(0, 1fr); grid-template-areas: "chat words ."; align-items: center; width: 100%; max-width: 1720px; margin-inline: auto; }
.hwh__words { grid-area: words; display: grid; justify-items: center; text-align: center; }
.hwh__title { margin: 0; font: 400 min(var(--fs-h1), 3.9vw) / var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-display); }
.hwh__title span { display: block; }
.hwh__key { color: var(--c-brand-text); }
.hwh__title::after { content: ""; display: block; width: 56px; height: 3px; margin: .55em auto 0; border-radius: 2px; background: var(--c-brand); }
.hwh__line { max-width: 31rem; margin: 1.1rem 0 0; font-size: calc(var(--fs-body) * 1.06); }
.hwh__go { margin-top: clamp(1.5rem, 3vw, 2.25rem); }
.hwh .cta-row { flex-direction: column; margin: 0; gap: .6rem; }
.hwh .cta-row__note { color: var(--c-ink); }
.hwh__chat { grid-area: chat; justify-self: start; width: min(300px, 100%); }
.hwh__chat .hwh__scene { width: 100%; }
.hwh .hwh__chat .hwh__scene .hc-phone { -webkit-backdrop-filter: none; backdrop-filter: none; } /* solid in the dark knob: no blur at its corners */
.stop--hwh { right: 1rem; top: 1rem; }

/* the owner's three steps: the ink with faint report hairlines, the line running down its stairs */
.stp, .hand { background: repeating-linear-gradient(0deg, transparent 0 55px, color-mix(in srgb, var(--c-on-ink) 5%, transparent) 55px 56px), var(--c-ink); color: var(--c-on-ink); }
.stp { padding-block: clamp(6rem, 9vw, 8.5rem) 4rem; background: repeating-linear-gradient(0deg, transparent 0 55px, color-mix(in srgb, var(--c-on-ink) 5%, transparent) 55px 56px), radial-gradient(70% 55% at 78% 18%, color-mix(in srgb, var(--c-blue) 62%, transparent) 0%, transparent 100%), var(--c-ink); }
.stp__in { position: relative; width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.stp__head { margin-left: var(--lane); }
.stp .head__line { color: var(--c-on-ink-soft); }
.stp__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 2.2vw, 2.25rem); align-items: start; margin: 0; padding: 0; list-style: none; }
.stp__step { position: relative; padding-left: var(--lane); }
.stp__step--2 { margin-top: 84px; }
.stp__step--3 { margin-top: 168px; }
.stp__n { position: absolute; left: 0; top: 0; }
.stp__body { padding-top: 74px; }
.stp__title { margin: 0; font: 400 var(--fs-h3) / 1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.stp__line { margin: .6rem 0 0; color: var(--c-on-ink-soft); }
.stp__time { margin: .55rem 0 0; font: 700 var(--fs-small) / 1.3 var(--font-ui); color: var(--c-brand-on-ink); }
.stp__stage { position: relative; min-height: 330px; margin-top: 1.1rem; }
.stp__stage .stp__scene { width: 100%; }
.stop--stp { right: 0; top: -3rem; }

/* the hand-over, set apart */
.hand { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(1rem, 2.4vw, 2rem); padding: 4.5rem var(--gutter) 10.5rem; font: 400 var(--fs-h3) / 1.25 var(--font-display); letter-spacing: var(--tracking-display); }
.hand p { margin: 0; }
.hand__you { text-align: right; }
.hand__us { color: var(--c-brand-on-ink); }
.hand__node { display: grid; place-items: center; width: 68px; height: 68px; border-radius: 50%; color: var(--c-brand); background: color-mix(in srgb, var(--c-brand) calc(var(--lit, 0) * 100%), var(--c-ink)); box-shadow: 0 0 0 2px var(--c-brand), 0 0 0 calc(10px * var(--lit, 0)) color-mix(in srgb, var(--c-brand) 16%, transparent); }
.hand__node[data-lit] { color: var(--c-on-brand); }
.hand__node svg { width: 34px; height: 34px; fill: currentColor; }

/* the agency's three steps: a framed photo each, the line running beside the words and sweeping across the gaps */
.our { padding-block: 4.5rem; background: var(--c-paper); }
.our__in { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.our__head { margin-bottom: clamp(2rem, 3.4vw, 3rem); }
.our__row { display: grid; grid-template-columns: minmax(0, 860fr) minmax(0, 404fr); gap: clamp(1.75rem, 3.6vw, 3.5rem); align-items: start; }
.our--flip .our__row { grid-template-columns: minmax(0, 404fr) minmax(0, 860fr); }
.our--flip .our__frame { order: 2; }
.our--last { padding-bottom: 9.5rem; }
.our__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-m); }
.our__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.our__frame .our__scene { position: absolute; left: clamp(.9rem, 1.7vw, 1.5rem); top: 50%; translate: 0 -50%; width: min(376px, 44%); }
.our--attorney .our__frame .our__scene { zoom: 1.08; } /* the board stands tilted in depth: its 13 px text keeps 13 px as shown */
.stop--our { left: clamp(.9rem, 1.7vw, 1.5rem); top: .9rem; right: auto; }
.our__text { position: relative; padding: .3rem 0 0 var(--lane); }
.our__n { position: absolute; left: 0; top: 0; }
.our__title { margin: 0; font: 400 var(--fs-h3) / 1.2 var(--font-display); letter-spacing: var(--tracking-display); }
.our__line { margin: .7rem 0 0; color: var(--c-ink-soft); }

/* what the free plan holds */
.ins { padding-block: 4.5rem var(--section-y); background: var(--c-paper-alt); }
.ins__in { width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.ins__frame { position: relative; height: clamp(600px, 46vw, 680px); overflow: hidden; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-m); }
.ins__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 100% 34%; }
.ins__frame .ins__scene { position: absolute; left: 1.25rem; top: 50%; translate: 0 -50%; width: min(690px, 54%); }
/* on a real photo the cards float by themselves: the scene's own stage stays out of the way */
.ins__frame .ins__scene .pc-stage { background: none; border: 0; box-shadow: none; }
.ins__frame .ins__scene .pc-stage::before { display: none; }
.stop--ins { left: 1.25rem; top: .9rem; right: auto; }

/* who runs it: a phone in two hands, no stock face */
.tm { padding-block: var(--section-y) 11rem; background: var(--c-paper); }
.tm__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 620px); gap: clamp(2rem, 6vw, 6rem); align-items: center; width: min(100% - 2 * var(--gutter), 1320px); margin-inline: auto; }
.tm__quote { margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; padding-left: 1.25rem; border-left: 3px solid var(--c-brand); }
.tm__quote blockquote { margin: 0; }
.tm__quote blockquote p { margin: 0; font: 400 var(--fs-h3) / 1.3 var(--font-display); letter-spacing: var(--tracking-display); }
.tm__quote figcaption { margin-top: .6rem; font-size: var(--fs-small); color: var(--c-ink-soft); }
.tm__frame { position: relative; height: 720px; overflow: hidden; border-radius: var(--radius-l); background: var(--c-paper-alt); box-shadow: var(--shadow-m); }
.tm__photo { position: absolute; left: -86.6%; top: -123px; width: 285%; margin: 0; aspect-ratio: 3 / 2; }
.tm__frame .screen { border-radius: 26px; }
.stop--tm { right: .9rem; top: .9rem; }

/* the doubts: the line passes beside them */
.hfaq { padding-block: 6rem var(--section-y); }
.hfaq__dot { position: absolute; left: clamp(-2.5rem, -2.4vw, -1rem); top: .4rem; width: 14px; height: 14px; border-radius: 50%; background: var(--c-ink); box-shadow: 0 0 0 2px var(--c-brand); }

/* the close: the line ends in the main button */
.hw .end { isolation: auto; background: transparent; }
.end--desk .end__video { object-position: 50% 26%; }
.end--desk .btn::after { content: ""; position: absolute; inset: -6px; border-radius: calc(var(--radius-m) + 6px); border: 2px solid var(--c-brand); opacity: var(--lit, 0); pointer-events: none; }

/* a computer narrower than the three columns: the words and the chat at the left, the phone at the right */
@media (max-width: 1240px) {
  .hwh { min-height: 800px; }
  .hwh__in { grid-template-columns: minmax(0, 58%); grid-template-areas: "words" "chat"; gap: 1.75rem; }
  .hwh__words { justify-items: start; text-align: left; }
  .hwh__title { font-size: var(--fs-h1); }
  .hwh__title::after { margin-inline: 0; }
  .hwh .cta-row { align-items: flex-start; }
  .hwh__photo { left: auto; right: -24%; width: 150%; }
  .hwh__media::after { background: linear-gradient(90deg, color-mix(in srgb, var(--c-paper) 80%, transparent) 0%, color-mix(in srgb, var(--c-paper) 66%, transparent) 50%, transparent 70%); }
  .stop--hwh { top: 5rem; }
  .our__row, .our--flip .our__row { grid-template-columns: minmax(0, 1fr); }
  .our--flip .our__frame { order: 0; }
  .our__text { order: -1; }
}

/* one column: the number stays in its lane, the words and the scene beside it */
@media (max-width: 1040px) {
  .stp__list { grid-template-columns: minmax(0, 1fr); gap: 3rem; }
  .stp__step--2, .stp__step--3 { margin-top: 0; }
  .stp__body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto 1fr; column-gap: 1.75rem; padding-top: .35rem; }
  .stp__stage { grid-column: 2; grid-row: 1 / span 3; margin-top: 0; }
  .stp__title, .stp__line, .stp__time { grid-column: 1; }
  .tm__in { grid-template-columns: minmax(0, 1fr); }
  .tm__frame { width: min(100%, 620px); justify-self: center; }
}

@media (max-width: 900px) {
  .hwh__photo { right: -28%; width: 175%; }
}

/* the phone: the words on the paper, then the phone on the table */
@media (max-width: 760px) {
  .hwh { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding: 0; }
  .hwh__in { display: block; order: -1; padding: 2rem var(--gutter) 1.75rem; }
  .hwh__chat { display: none; }
  .hwh__media { position: relative; z-index: auto; inset: auto; height: 590px; }
  .hwh__media::after { display: none; }
  .hwh__photo { left: calc(44% - 1002px); right: auto; top: -152px; width: 1360px; translate: none; }
  .stop--hwh { top: auto; bottom: 520px; right: .5rem; }
  .stp__head { margin-left: 0; }
  .stp__body { display: block; padding-top: .35rem; }
  .stp__stage { margin-top: 1rem; min-height: 0; }
  .stop--stp { top: -2.9rem; }
  .hand { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding-block: 3rem 4rem; }
  .hand__you { text-align: center; }
  .hand__node { order: 3; }
  .our { padding-block: 3rem; }
  .our--last { padding-bottom: 4rem; }
  .our__frame { aspect-ratio: auto; height: 540px; }
  .our--advisor .our__photo { object-position: 81% 50%; }
  .our--attorney .our__photo { object-position: 86% 50%; }
  .our--medspa .our__frame { height: 690px; }
  .our--medspa .our__photo { height: 600px; object-position: 86% 50%; }
  .our__frame .our__scene { left: 50%; right: auto; top: auto; bottom: .75rem; translate: -50% 0; width: min(340px, 100% - 1.5rem); }
  .stop--our { left: .75rem; top: 146px; }
  .ins { padding-block: 3rem var(--section-y); }
  .ins__frame { height: 670px; }
  .ins__photo { object-position: 90% 0; height: 544px; }
  .ins__frame .ins__scene { left: 50%; top: auto; bottom: .5rem; translate: -50% 0; width: min(358px, 100% - 1rem); }
  .stop--ins { left: .75rem; top: 146px; }
  .tm { padding-block: var(--section-y); }
  .tm__frame { height: 620px; }
  .tm__photo { left: -155%; top: -116px; width: 427%; }
  .hfaq { padding-block: var(--section-y); }
  .hfaq__dot { display: none; }
}