/* design\components.css: the CSS of the components in design\components.md, the director's: the header, the footer,
   the exit popup, the call bar, the stop icon, and each section pattern, card, form box and call-to-action block as the
   home page built them. Every page loads it (the build copies it to site\assets\css\components.css). Builders use these
   classes as they are; a page's own CSS only places and sizes its parts, with the tokens of system.css. */

/* Part 1, the home page: the frame, the header bar, the main button and its line, the clients picker, the stop icon,
   the home header (kit rotate) with its live card and forecast card, the free plan tour (kit tour), the exit popup,
   the contour motif, the steps lit by a chat (kit chat), the calculator (kit worth and year), the outcome rows, what
   they report and what we give (kit sequence), the tiles, the FAQ, the closing band, the footer and the thank-you
   page (.thanks). */

/* ---------- the base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 76px; }
@media (max-width: 979px) { html { scroll-padding-top: 60px; } }
:focus-visible { outline: 3px solid var(--c-signal); outline-offset: 3px; }
.skip:focus { padding: var(--space-2) var(--space-3); background: var(--c-paper); color: var(--c-ink); border-radius: var(--radius-s); box-shadow: var(--shadow-m); font: 600 var(--fs-ui)/1.2 var(--font-ui); }

/* ---------- the frame ---------- */
.wrap { width: 100%; max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); }
.band { position: relative; padding-block: var(--section-y); }
.band--night { background: var(--c-night); color: var(--c-paper); }
.band--snow { background: var(--c-paper-alt); color: var(--c-ink); }
.band--white { background: var(--c-paper); color: var(--c-ink); }

.sec-head { margin-bottom: var(--space-5); }
.sec-head__title { margin: 0; max-width: 18ch; font: 800 var(--fs-h2)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-display); text-wrap: balance; }
.sec-head__lead { margin: var(--space-3) 0 0; max-width: 62ch; font-size: 19px; line-height: 1.55; color: var(--c-ink-soft); text-wrap: pretty; }
.band--night .sec-head__lead { color: var(--c-night-soft); }
.sec-head--center { text-align: center; }
.sec-head--center .sec-head__title, .sec-head--center .sec-head__lead { margin-inline: auto; }
@media (max-width: 599px) { .sec-head__lead { font-size: 18px; } }

/* ---------- the header bar (src\partials\header.mjs) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--space-5);
  height: 76px;
  padding-inline: max(var(--gutter), (100% - var(--max-w)) / 2 + var(--gutter));
  background: var(--c-paper); color: var(--c-ink);
  border-bottom: 1px solid var(--c-line);
}
.site-header__logo { display: block; flex: none; line-height: 0; }
.site-header__logo img { display: block; width: auto; height: 52px; }
.site-header__nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: clamp(var(--space-4), 2.2vw, var(--space-5)); margin: 0; padding: 0; list-style: none; }
.nav__item a { display: block; padding: var(--space-2) 0; font: 600 var(--fs-ui)/1.2 var(--font-ui); color: var(--c-ink); text-decoration: none; transition: color var(--dur-fast) var(--ease-out); }
.nav__item a:hover { color: var(--c-brand-text); }
.nav__item a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--c-brand); }
.site-header__menu { display: none; }

/* ---------- the main button and its line ---------- */
.btn, .site-header__cta {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  height: 54px; padding: 0 var(--space-4);
  background: var(--c-brand); color: var(--c-on-brand);
  font: 700 16px/1 var(--font-display); letter-spacing: 0; text-decoration: none; white-space: nowrap;
  border: 0; border-radius: var(--radius-s); box-shadow: var(--shadow-s); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.btn:hover, .site-header__cta:hover { background: var(--c-brand-dark); }
.btn__arrow { flex: none; width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow, .site-header__cta:hover .btn__arrow { transform: translateY(-2px); }
.site-header__cta { flex: none; height: 44px; padding: 0 var(--space-3); font-size: 15px; box-shadow: none; }
.btn--quiet { background: transparent; color: var(--c-ink); box-shadow: none; border: 1px solid var(--c-line); }
.btn--quiet:hover { background: var(--c-paper-alt); }
.band--night .btn--quiet { color: var(--c-paper); border-color: var(--c-night-line); }
.band--night .btn--quiet:hover { background: var(--c-night-card); }
.btn-note { margin: 10px 0 0; font: 400 var(--fs-small)/1.4 var(--font-text); color: var(--c-ink-soft); }
.band--night .btn-note, .picker--night .btn-note { color: var(--c-night-soft); }

/* the bar on smaller screens: the menu button opens the nav as a white panel under the bar (core.js sets data-open) */
@media (max-width: 979px) {
  .site-header {
    display: grid; grid-template-columns: auto 1fr auto auto; grid-template-rows: 59px auto auto;
    column-gap: var(--space-3); align-items: center; height: 60px;
  }
  .site-header__logo { grid-area: 1 / 1; }
  .site-header__logo img { height: 40px; }
  .site-header__cta { grid-area: 1 / 3; }
  .site-header__menu {
    grid-area: 1 / 4; position: relative; display: inline-flex; align-items: center;
    height: 44px; padding: 0 var(--space-3) 0 42px;
    font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--c-ink);
    background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-s); cursor: pointer;
  }
  .site-header__menu::before, .site-header__menu::after {
    content: ""; position: absolute; left: var(--space-3); top: 50%; width: 16px; height: 2px; margin-top: -1px;
    background: currentColor; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out);
  }
  .site-header__menu::before { box-shadow: 0 -5px 0 currentColor, 0 5px 0 currentColor; }
  .site-header__menu::after { opacity: 0; }
  .site-header__menu[aria-expanded="true"]::before { box-shadow: none; transform: rotate(45deg); }
  .site-header__menu[aria-expanded="true"]::after { opacity: 1; transform: rotate(-45deg); }
  .site-header__nav { grid-row: 2; grid-column: 1 / -1; display: none; position: relative; z-index: 1; margin: 0; padding-block: var(--space-2) var(--space-4); }
  .site-header[data-open] .site-header__nav { display: block; }
  .site-header[data-open]::after {
    content: ""; grid-row: 2 / span 2; grid-column: 1 / -1; align-self: stretch;
    margin-inline: calc(-1 * var(--gutter)); background: var(--c-paper);
    border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-m);
  }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item a { padding: 14px 0; font-size: 17px; border-bottom: 1px solid var(--c-line); }
}
@media (max-width: 599px) {
  .site-header { grid-template-columns: auto 1fr auto; }
  .site-header__logo img { height: 36px; }
  .site-header__menu { grid-area: 1 / 3; }
  .site-header__cta { display: none; }
  .site-header[data-open] .site-header__cta {
    display: flex; grid-row: 3; grid-column: 1 / -1; position: relative; z-index: 1;
    height: 54px; margin-bottom: var(--space-4); font-size: 16px;
  }
}

/* ---------- the clients picker ---------- */
.picker { padding: 20px 22px; border-radius: var(--radius-m); }
.picker--night { background: color-mix(in srgb, var(--c-night-card) 94%, transparent); border: 1px solid var(--c-night-line); box-shadow: var(--shadow-l); color: var(--c-paper); }
.picker--light { background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--shadow-m); color: var(--c-ink); }
.picker__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.picker__q { display: block; margin: 0 0 12px; padding: 0; font: 600 16px/1.35 var(--font-text); text-wrap: balance; }
.picker__opts { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
.picker__opt { position: relative; display: block; }
.picker__opt input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picker__chip {
  display: flex; align-items: center; justify-content: center; height: 52px;
  font: 700 18px/1 var(--font-display); border: 1px solid; border-radius: var(--radius-s);
  transition: background-color var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.picker--night .picker__chip { color: var(--c-paper); border-color: var(--c-night-line); background: color-mix(in srgb, var(--c-night-deep) 35%, transparent); }
.picker--night .picker__opt:hover .picker__chip { border-color: var(--c-signal); }
.picker--light .picker__chip { color: var(--c-ink); border-color: var(--c-line); background: var(--c-paper); }
.picker--light .picker__opt:hover .picker__chip { border-color: var(--c-brand); }
.picker__opt input:checked + .picker__chip { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.picker__opt input:focus-visible + .picker__chip { outline: 3px solid var(--c-signal); outline-offset: 3px; }
.picker .btn { width: 100%; margin-top: var(--space-3); }
.picker--night .btn { box-shadow: none; }
.picker .btn-note { text-align: center; }
@media (max-width: 359px) {
  .picker__opts { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .picker__opt { grid-column: span 2; }
  .picker__opt:nth-child(n + 4) { grid-column: span 3; }
}

/* ---------- the stop icon (h.stop(); the tour's own button wears the same look) ---------- */
.stop {
  position: absolute; top: 16px; right: 16px; z-index: 6;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  color: var(--c-paper); background: color-mix(in srgb, var(--c-night-deep) 72%, transparent);
  border: 1px solid var(--c-night-line); border-radius: var(--radius-s); cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}
.stop:hover { background: var(--c-night-deep); }
.stop svg { display: block; width: 14px; height: 14px; }
.tour__stop .stop__play { display: none; }
.tour__stop[aria-pressed="true"] .stop__play { display: block; }
.tour__stop[aria-pressed="true"] .stop__pause { display: none; }

/* ---------- the home header (kit rotate): the kit's CSS as it is, then the site's grade and cards ---------- */
[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(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; } /* the first picture is simply there */
[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; }

.hero { position: relative; overflow: hidden; background: var(--c-night); color: var(--c-paper); }
.hero__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--c-night-deep); }
.hero__clip { filter: saturate(.92) contrast(1.04); }
.hero__slide { --fc-in: var(--kit-in, 1); }
.hero__shade { position: absolute; inset: 0; z-index: 1; background: var(--shade-left); pointer-events: none; }
.hero__copy { position: relative; z-index: 2; }
.hero__title { margin: 0; font: 800 var(--fs-display)/1.06 var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-paper); }
.hero__word { display: inline-block; color: var(--c-signal); opacity: calc(1 - var(--kit-swap, 0) * .85); transform: translateY(calc(var(--kit-swap, 0) * .14em)); }
.hero__lead { margin: var(--space-4) 0 0; font-size: 19px; line-height: 1.55; color: var(--c-night-soft); text-wrap: pretty; }
.hero__lead strong { font-weight: 600; color: var(--c-paper); }
.hero__copy .picker { margin-top: var(--space-5); }

/* the contour line: one path drawn from --kit-in (home.js gives it its shape from the slide and the card) */
.hero__line { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c-signal) 70%, transparent)); }
.hero__line:not([data-placed]) { visibility: hidden; }
.hero__path { fill: none; stroke: var(--c-signal); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: calc((1 - min(var(--kit-in, 1), 1)) * 100); }
.hero__head { fill: var(--c-accent); opacity: clamp(0, (var(--kit-in, 1) - .82) * 6, 1); }
.hero__booking, .hero__forecast { position: relative; z-index: 2; opacity: clamp(0, var(--fc-in) * 2, 1); }
.hero__booking { transform: translateY(calc((1 - var(--fc-in)) * 10px)); }

/* ---------- the live card ---------- */
.live-card {
  display: flex; align-items: center; gap: 12px; max-width: 300px; padding: 12px 16px 12px 12px;
  background: var(--c-night-card); color: var(--c-paper);
  border: 1px solid var(--c-night-line); border-radius: var(--radius-m); box-shadow: var(--shadow-l);
}
.live-card__icon { flex: none; display: grid; place-items: center; width: 34px; height: 34px; color: var(--c-accent); background: color-mix(in srgb, var(--c-accent) 16%, transparent); border-radius: var(--radius-s); }
.live-card__icon svg { display: block; width: 16px; height: 16px; }
.live-card__text { display: grid; gap: 2px; min-width: 0; }
.live-card__text b { font: 600 15px/1.3 var(--font-text); color: var(--c-paper); }
.live-card__text small { font: 400 13px/1.4 var(--font-text); color: var(--c-night-soft); text-wrap: balance; }

/* ---------- the forecast card (moving in the header from --fc-in; still everywhere else) ---------- */
.forecast {
  width: 248px; padding: 16px 18px;
  background: var(--c-night-card); color: var(--c-paper);
  border: 1px solid var(--c-night-line); border-radius: var(--radius-m); box-shadow: var(--shadow-l);
}
:where(.forecast p) { margin: 0; }
.forecast__title { font: 600 var(--fs-small)/1.3 var(--font-text); color: var(--c-paper); }
.forecast__big { display: flex; align-items: baseline; gap: var(--space-2); margin-top: 6px; }
.forecast__big b { font: 800 40px/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-paper); }
.forecast__big span { font: 600 15px/1 var(--font-text); color: var(--c-paper); }
.forecast__sub { margin-top: 6px; font: 400 var(--fs-small)/1.35 var(--font-text); color: var(--c-night-soft); text-wrap: balance; }
.forecast__bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; margin-top: 14px; }
.forecast__bars i {
  flex: none; width: 7px; height: var(--h); background: var(--c-brand); border-radius: 1px;
  transform-origin: 50% 100%; transform: scaleY(clamp(0, (var(--fc-in, 1) - var(--i) * .04) / .56, 1));
}
.forecast__bars i.is-setup { background: transparent; border: 1px dashed var(--c-night-soft); }
.forecast__bars i:last-child { background: var(--c-accent); }
.forecast__note { margin-top: 10px; font: 400 13px/1.35 var(--font-text); color: var(--c-night-soft); }
/* the source line holds one line: its words are as wide as the card's measure (210px), so a hair of rounding never
   drops "reviews" alone onto a second line */
.forecast__from { margin-top: 2px; font: 400 13px/1.35 var(--font-text); color: var(--c-night-soft); white-space: nowrap; }

/* ---------- the free plan tour (kit tour) ---------- */
.tour { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: stretch; }
.tour__side { grid-column: span 4; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.tour__tabs { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }
.tour__tab {
  position: relative; display: grid; gap: var(--space-1); width: 100%; margin: 0; padding: 18px 20px 20px 22px; overflow: hidden;
  text-align: left; color: var(--c-ink); background: var(--c-paper);
  border: 1px solid var(--c-line); border-radius: var(--radius-m); cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.tour__tab::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-brand); opacity: 0; }
.tour__tab:hover { border-color: color-mix(in srgb, var(--c-brand) 45%, var(--c-line)); }
.tour__tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--c-brand) 30%, var(--c-line)); box-shadow: var(--shadow-m); }
.tour__tab[aria-selected="true"]::before { opacity: 1; }
.tour__name { font: 700 18px/1.25 var(--font-display); color: var(--c-ink); }
.tour__line { font: 400 var(--fs-ui)/1.4 var(--font-text); color: var(--c-ink-soft); }
.tour__fill { position: absolute; left: 0; bottom: 0; width: calc(var(--kit-fill, 0) * 100%); height: 2px; background: var(--c-brand); }
.tour__tab[aria-selected="false"] .tour__fill { display: none; }
.tour__cta { margin-top: auto; }
.tour__cta .btn-note { margin-top: 10px; }
.tour__stage {
  grid-column: span 8; position: relative; isolation: isolate; overflow: hidden;
  height: clamp(460px, 40vw, 530px); background: var(--c-night-deep);
  border-radius: var(--radius-l); box-shadow: var(--shadow-l);
}
.tour__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tour__veil { position: absolute; inset: 0; background: color-mix(in srgb, var(--c-night-deep) 40%, transparent); }
.tour__panel { position: absolute; inset: 0; display: flex; justify-content: center; }
.tour__panel:focus-visible { outline-offset: -4px; }
.tour__stage .tour__stop { z-index: 6; }
@media (max-width: 1024px) {
  .tour { display: flex; flex-direction: column; gap: var(--space-4); }
  .tour__side { display: contents; }
  .tour__tabs { order: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .tour__stage { order: 2; width: 100%; }
  .tour__cta { order: 3; margin-top: 0; }
}
@media (max-width: 699px) {
  .tour__tabs {
    display: flex; flex-direction: row; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter);
  }
  .tour__tabs::-webkit-scrollbar { display: none; }
  .tour__tab { flex: 0 0 min(260px, 74%); scroll-snap-align: start; }
  .tour__cta .btn { width: 100%; }
  .tour__cta .btn-note { text-align: center; }
}

/* ---------- the exit popup (src\partials\exit.mjs) ---------- */
.exit {
  width: min(600px, calc(100% - 32px)); max-width: none; max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; background: transparent; color: var(--c-ink); overflow: visible;
}
.exit:focus, .exit:focus-visible { outline: none; }
.exit::backdrop { background: color-mix(in srgb, var(--c-night-deep) 72%, transparent); }
.exit__in {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 248px;
  grid-template-areas: "title fc" "line fc" "pick pick"; grid-template-rows: auto 1fr auto; column-gap: var(--space-4); align-items: start;
  max-height: calc(100dvh - 32px); overflow-y: auto; padding: 32px;
  background: var(--c-paper); border-radius: var(--radius-l); box-shadow: var(--shadow-l);
  opacity: 0; transform: translateY(12px); transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out);
}
.exit[data-kit-on] .exit__in { opacity: 1; transform: none; }
.exit__title { grid-area: title; margin: 0; padding-right: var(--space-2); font: 800 28px/1.12 var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-ink); text-wrap: balance; }
.exit__line { grid-area: line; margin: var(--space-3) 0 0; font-size: var(--fs-body); line-height: 1.55; color: var(--c-ink-soft); }
.exit__forecast { grid-area: fc; margin-top: 30px; box-shadow: var(--shadow-m); }
.exit__picker { grid-area: pick; margin-top: var(--space-4); padding: 0; border: 0; box-shadow: none; }
.exit__close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 36px; height: 36px; padding: 0;
  color: var(--c-ink); background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-s); cursor: pointer;
}
.exit__close:hover { background: var(--c-paper-alt); }
.exit__close svg { display: block; width: 14px; height: 14px; }
html[data-kit-modal] { overflow: hidden; }
@media (max-width: 519px) {
  .exit__in { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "line" "pick"; grid-template-rows: auto auto auto; padding: 24px; }
  .exit__title { padding-right: 36px; font-size: 24px; }
  .exit__forecast { display: none; }
}

/* ---------- the contour motif: 8 nested, irregular rings of one peak (smooth Beziers), 1px --c-signal lines ----------
   One drawing, laid as a mask over the signal color: in a corner of every night band (cropped by its edge), faint in
   the footer, inside the "And many more" tile, and behind the thank-you page (the calculator draws it in relief). Each host
   isolates, so the drawing sits over its ground and under its words. */
.contours, .band--night::before, .site-footer::before, .thanks::before, .tile--more::before {
  content: ""; position: absolute; z-index: -1; aspect-ratio: 1; pointer-events: none;
  background: var(--c-signal);
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800'%3E%3Cpath d='M493.4 368.9C493.4 376.4 491.3 384.2 487.5 390.4C483.6 396.6 476.8 402.6 470.3 406.2C463.8 409.7 455.9 411.9 448.5 411.7C441.2 411.5 432.4 408.7 426.3 405.2C420.1 401.7 415.2 396.7 411.7 390.6C408.1 384.5 405.3 376.1 405 368.4C404.7 360.8 406.1 351 409.8 344.5C413.5 337.9 421.1 332.2 427.4 329.1C433.7 326.1 440.2 326 447.5 326.2C454.9 326.5 464.7 327.2 471.4 330.4C478.1 333.6 484.1 339.1 487.7 345.5C491.4 351.9 493.4 361.4 493.4 368.9ZM533.1 377.1C532.9 392.9 527.5 409.5 520.2 421.7C512.9 434 502.3 443.6 489.3 450.5C476.2 457.4 457.6 463.4 441.9 463.2C426.2 463 407.9 457 395 449.4C382.1 441.7 371.4 430.1 364.2 417.4C357 404.6 352.4 388.2 351.7 373C351.1 357.8 352.4 339.3 360.3 326.2C368.3 313 385.2 300 399.3 294.1C413.4 288.1 430.3 290 444.7 290.3C459.2 290.7 473.1 290.1 485.8 296.2C498.6 302.3 513.3 313.4 521.2 326.9C529.1 340.3 533.3 361.3 533.1 377.1ZM573.1 383.7C573.4 407.1 567.8 429.3 556.7 448.1C545.6 466.9 526.6 485.5 506.7 496.5C486.8 507.6 460.2 514.6 437.2 514.5C414.2 514.5 388.3 507.2 368.7 496.3C349.2 485.4 331.6 469.2 319.9 449C308.1 428.8 299.7 398.9 298.1 375.2C296.4 351.5 298.1 326.2 309.9 307C321.7 287.8 347.2 268.5 368.6 260C390.1 251.5 417.2 255.8 438.7 256C460.3 256.2 478.6 252.7 498 261.3C517.4 270 542.6 287.3 555.1 307.7C567.6 328.1 572.8 360.3 573.1 383.7ZM613.4 386.9C613.7 419.1 606.2 453.8 590.9 480.2C575.5 506.6 547.7 531.1 521.3 545.3C494.9 559.6 463.7 567 432.4 565.7C401.1 564.4 359.8 551.7 333.7 537.6C307.7 523.5 290.8 506.1 276 481.1C261.2 456.2 248 419.8 244.8 388C241.7 356.1 241.4 317.1 257 290.1C272.6 263.2 309.1 237.3 338.5 226.2C367.9 215 403.4 222.8 433.5 223.2C463.6 223.7 493.1 218.1 519.1 228.7C545 239.4 573.3 260.8 589 287.2C604.7 313.6 613.1 354.7 613.4 386.9ZM653.9 390.2C654 428.9 647.8 473.4 628.9 507.3C610 541.2 574.8 575.4 540.4 593.7C506 611.9 460.4 617.9 422.4 616.8C384.3 615.6 344.8 605.5 312.1 586.6C279.4 567.8 246.6 536.5 226.3 503.7C206 471 194 428.4 190.2 389.9C186.3 351.3 182.6 305.4 203.3 272.4C223.9 239.5 278 205.5 314.1 192.2C350.3 178.8 382.4 191.7 420.3 192.3C458.3 193 507.3 182.1 541.9 195.9C576.5 209.8 609.4 243.1 628 275.4C646.7 307.8 653.7 351.6 653.9 390.2ZM694.9 401C695.2 449.5 686.9 502 663.8 542.7C640.8 583.4 599 624.5 556.7 645.3C514.3 666.1 457.3 671 409.9 667.6C362.5 664.1 310.4 646.7 272.3 624.6C234.3 602.4 204.6 573.2 181.8 534.7C158.9 496.1 140.5 440.4 135.1 393.4C129.7 346.3 125.3 291 149.3 252.1C173.3 213.3 235.4 175.3 279.1 160.5C322.7 145.6 366.3 163.5 411.2 163.1C456.1 162.6 506.5 143.1 548.3 157.9C590.1 172.7 637.5 211.5 661.9 252C686.3 292.5 694.5 352.6 694.9 401ZM736.2 411.8C736.5 471.3 722.6 536.7 697.8 583.8C672.9 630.9 636.6 671.9 586.9 694.3C537.1 716.7 453.4 720.8 399 718.2C344.6 715.7 304.4 704.5 260.5 678.7C216.7 652.9 165.6 607.6 135.8 563.3C106 519 89 467.5 81.8 413C74.5 358.5 62.2 283.6 92.3 236.2C122.4 188.8 210.7 145.2 262.2 128.5C313.6 111.7 349.2 136.4 401 135.5C452.8 134.7 523.9 108.3 573 123.4C622.1 138.5 668.3 178.3 695.5 226.3C722.7 274.4 735.8 352.2 736.2 411.8ZM777.2 408.7C778.4 475.6 768.4 553.1 740.4 609.9C712.4 666.7 668.1 723 609.3 749.5C550.6 776 453.9 775 387.9 768.8C321.8 762.5 264 743.3 213.1 711.9C162.2 680.5 114.3 632.6 82.5 580.3C50.7 528 28.1 463.2 22.4 398.4C16.7 333.5 13.8 241.3 48.2 191.3C82.6 141.3 171 112.2 228.7 98.5C286.5 84.8 337.4 111.7 394.6 109.2C451.8 106.6 515.4 66.8 571.9 83.4C628.4 99.9 699.2 154.2 733.4 208.4C767.6 262.7 776.1 341.8 777.2 408.7Z' fill='none' stroke='%23000' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") center / contain no-repeat;
}
.band--night { isolation: isolate; overflow: clip; }
.band--night::before { width: 760px; top: -330px; right: -300px; opacity: .12; }

/* the up arrow of the logo, as a mark: the outcome lists' markers and the thank-you page's main button */
.row__list li::before, .thanks__next li:first-child a::after {
  content: ""; flex: none; width: 14px; height: 14px; background: currentColor;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M8 14.5V3.2M3.2 8 8 3.2 12.8 8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square' stroke-linejoin='miter'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---------- three steps lit by a chat (kit chat) ---------- */
/* the clip behind the whole band under its navy veil; the contour over both, the words over everything */
.how__clip { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.how::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: color-mix(in srgb, var(--c-night) 82%, transparent); }
.how::before { z-index: 1; top: -300px; right: auto; left: -320px; }
.how > .wrap { position: relative; z-index: 2; }
.how__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-5); align-items: center; }
.steps { grid-column: span 7; display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.step {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--space-3);
  padding: 24px 28px 26px 24px; overflow: hidden;
  background: var(--c-night-card); border: 1px solid var(--c-night-line); border-radius: var(--radius-m);
  opacity: .7;
  transition: opacity var(--dur-med) var(--ease-out), background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.step::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--c-signal); opacity: 0; transition: opacity var(--dur-med) var(--ease-out); }
.step[aria-current="step"] { opacity: 1; background: color-mix(in srgb, var(--c-night-card) 86%, var(--c-signal)); box-shadow: var(--shadow-l); }
.step[aria-current="step"]::before { opacity: 1; }
.step__num { font: 700 18px/30px var(--font-display); letter-spacing: .02em; color: var(--c-night-soft); }
.step[aria-current="step"] .step__num { color: var(--c-accent); }
.step > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.step__title { margin: 0; font: 800 22px/30px var(--font-display); letter-spacing: -0.012em; color: var(--c-paper); }
.step__tag { padding: 3px 10px; font: 600 13px/1.4 var(--font-text); color: var(--c-night-soft); white-space: nowrap; background: var(--c-night-line); border-radius: var(--radius-s); }
.step__text { flex-basis: 100%; margin: 4px 0 0; max-width: 56ch; font-size: 16px; line-height: 1.55; color: var(--c-night-soft); text-wrap: pretty; }

/* the phone: a 10px bezel, a white screen with its camera, the agency's bar, then the chat, from the top down like a new
   conversation (so the first message is in view the moment the chat starts, even with only the phone's top on screen) */
.phone {
  grid-column: span 5; justify-self: center; position: relative; display: flex; flex-direction: column;
  width: 340px; height: 640px; padding: 10px;
  background: var(--c-night-deep); border-radius: 36px; box-shadow: var(--shadow-l), 0 0 0 1px var(--c-night-line);
}
.phone__bar {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr); column-gap: 10px; align-items: center;
  padding: 40px 16px 12px; background: var(--c-paper); color: var(--c-ink);
  border-bottom: 1px solid var(--c-line); border-radius: 26px 26px 0 0;
}
.phone__bar::before { content: ""; position: absolute; top: 10px; left: 50%; width: 86px; height: 22px; margin-left: -43px; background: var(--c-night-deep); border-radius: 11px; }
.phone__bar img { grid-row: 1 / span 2; width: 32px; height: 32px; border-radius: var(--radius-s); }
.phone__bar b { font: 700 15px/1.25 var(--font-text); color: var(--c-ink); }
.phone__bar small { font: 400 13px/1.3 var(--font-text); color: var(--c-ink-soft); }
.phone__chat {
  position: relative; flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px;
  padding: 16px 14px 18px; overflow: hidden; background: var(--c-paper); color: var(--c-ink); border-radius: 0 0 26px 26px;
}
/* every message rises 8px and fades in from the kit's --kit-in; the root's --kit-out fades them all before it starts again */
.msg {
  flex: none; max-width: 84%; margin: 0; padding: 9px 12px; font: 400 15px/1.4 var(--font-text); border-radius: var(--radius-l);
  opacity: calc(var(--kit-in, 1) * (1 - var(--kit-out, 0))); transform: translateY(calc((1 - var(--kit-in, 1)) * 8px));
}
.msg--bot { align-self: flex-start; background: var(--c-paper-alt); color: var(--c-ink); border-bottom-left-radius: var(--radius-s); }
.msg--me { align-self: flex-end; background: var(--c-brand); color: var(--c-on-brand); font-weight: 600; border-bottom-right-radius: var(--radius-s); }
.msg__chips { align-self: flex-start; display: flex; gap: 6px; max-width: none; padding: 0; }
.msg__chips span {
  display: grid; place-items: center; min-width: 40px; height: 34px; padding: 0 10px;
  font: 700 15px/1 var(--font-display); color: var(--c-brand-text); background: var(--c-paper);
  border: 1px solid var(--c-line); border-radius: var(--radius-s);
}
.msg__chips [data-kit-pick][data-kit-on] { color: var(--c-on-brand); background: var(--c-brand); border-color: var(--c-brand); }
.msg--typing { display: flex; gap: 5px; padding: 13px 14px; }
.msg--typing i { width: 7px; height: 7px; background: var(--c-ink-soft); border-radius: 50%; animation: msg-dot 1s var(--ease-in-out) infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msg-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-3px); opacity: 1; } }
.how:has(> .stop[aria-pressed="true"]) .msg--typing i { animation-play-state: paused; }
.msg__check { display: grid; gap: 8px; min-width: 200px; font-weight: 600; }
.msg__check i { position: relative; display: block; height: 4px; overflow: hidden; background: var(--c-line); border-radius: 2px; }
.msg__check i::after { content: ""; position: absolute; inset: 0; background: var(--c-brand); transform-origin: 0 50%; transform: scaleX(var(--kit-fill, 1)); }
/* the plan: the forecast card's parts, light, its bars rising with the message (--fc-in) */
/* the plan: the chat's result, as wide as the chat, its bars across the card */
.msg__plan { --fc-in: var(--kit-in, 1); width: 100%; max-width: none; padding: 12px 14px; background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--shadow-s); }
:where(.msg__plan p) { margin: 0; }
.msg__plan .forecast__title { font-size: 13px; color: var(--c-ink-soft); }
.msg__plan .forecast__big { margin-top: 4px; }
.msg__plan .forecast__big b { font-size: 34px; color: var(--c-ink); }
.msg__plan .forecast__big span { font-size: 14px; color: var(--c-ink); }
.msg__plan .forecast__sub { margin-top: 3px; font-size: 13px; color: var(--c-ink-soft); }
.msg__plan .forecast__bars { height: 52px; margin-top: 12px; }
.msg__plan .forecast__bars i { flex: 1 1 0; width: auto; border-radius: 2px 2px 0 0; }
.msg__plan .forecast__bars i.is-setup { border-color: var(--c-ink-soft); }
.msg__plan .forecast__from { margin-top: 8px; font-size: 13px; color: var(--c-ink-soft); }
/* under reduced motion the phone grows to show the whole conversation (the page keeps the latest messages in view
   while it plays: home.css) */
/* under reduced motion the whole conversation shows: the phone grows to hold it */
@media (prefers-reduced-motion: reduce) {
  .phone { height: auto; min-height: 640px; }
  .phone__chat { flex: 1 0 auto; }
}

/* ---------- the calculator (kit worth and year) ---------- */
/* the inputs card stands as tall as the year card beside it: its sliders and the hint spread over its height */
.worth { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-4); align-items: stretch; }
.worth__inputs {
  grid-column: span 5; display: flex; flex-direction: column; justify-content: space-between; gap: 30px; min-width: 0; padding: 36px 34px 30px;
  background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-l); box-shadow: var(--shadow-m);
}
.slider { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: var(--space-3); row-gap: 12px; }
.slider label { font: 600 16px/1.35 var(--font-text); color: var(--c-ink); }
.slider__val { font: 700 26px/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--c-brand-text); }
.slider input[type="range"] {
  grid-column: 1 / -1; width: 100%; height: 26px; margin: 0; background: transparent; cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
/* the track fills to the thumb's middle: the thumb travels inside the track's width less its own (26px) */
.slider input[type="range"]::-webkit-slider-runnable-track {
  height: 6px; border-radius: 3px;
  background:
    linear-gradient(90deg, var(--c-brand) var(--kit-fill, 50%), var(--c-line) var(--kit-fill, 50%)) 13px 0 / calc(100% - 26px) 100% no-repeat,
    linear-gradient(90deg, var(--c-brand) 50%, var(--c-line) 50%);
}
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 26px; height: 26px; margin-top: -10px;
  background: var(--c-paper); border: 2px solid var(--c-brand); border-radius: 50%; box-shadow: var(--shadow-s);
}
.slider input[type="range"]::-moz-range-track { height: 6px; background: var(--c-line); border-radius: 3px; }
.slider input[type="range"]::-moz-range-progress { height: 6px; background: var(--c-brand); border-radius: 3px; }
.slider input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 26px; height: 26px; background: var(--c-paper); border: 2px solid var(--c-brand); border-radius: 50%; box-shadow: var(--shadow-s); }
.slider__ends { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: -4px; font: 400 13px/1.3 var(--font-text); color: var(--c-ink-soft); }
.worth__hint { margin: 0; padding-top: 18px; font-size: 15px; line-height: 1.5; color: var(--c-ink-soft); border-top: 1px solid var(--c-line); text-wrap: pretty; }
/* the year (calculator fix, 22 Oct): a navy card; its total, then the summit: the year's twelve months as the layers of
   a terrain model cut along contour lines (the contour motif in relief), as high as the year's new revenue. home.js
   draws the layers from the kit's --kit-size; the kit's year lands them one a month the first time it is seen, then
   only a slider changes them. Flat tones from the tokens: the sides lit on the left and in shade on the right like
   the logo's arrow, each step's top a little lighter going up, the summit in glacier. */
.worth__year {
  --pad-x: 40px;
  grid-column: span 7; position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; min-width: 0;
  padding: 36px var(--pad-x) 30px; background: var(--c-night); color: var(--c-paper); border-radius: var(--radius-l); box-shadow: var(--shadow-l);
}
:where(.worth__year p) { margin: 0; }
.year__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.year__total b { font: 800 56px/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; color: var(--c-paper); }
.year__total > span { font: 600 18px/1.3 var(--font-text); color: var(--c-night-soft); }
/* the drawing runs to the card's sides; its words are laid over it in % of the stage (home.js gives the levels) */
.summit { position: relative; margin: 14px calc(-1 * var(--pad-x)) 0; }
.summit__stage { position: relative; aspect-ratio: 640 / 380; }
.summit__svg { position: absolute; inset: 0; display: block; width: 100%; height: 100%; overflow: visible; }
.summit__ring { fill: none; stroke: var(--c-signal); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: calc(.34 - var(--i) * .06); }
.summit__foot { fill: var(--c-night-deep); opacity: .9; }
.summit__lit { fill: color-mix(in srgb, var(--c-signal) calc(24% + var(--k) * 1.2%), var(--c-night)); }
.summit__shade { fill: color-mix(in srgb, var(--c-signal) calc(12% + var(--k) * .8%), var(--c-night)); }
.summit__top {
  fill: color-mix(in srgb, var(--c-signal) calc(17% + var(--k) * 3.2%), var(--c-night-card));
  stroke: var(--c-signal); stroke-width: 1; stroke-linejoin: round; vector-effect: non-scaling-stroke; stroke-opacity: .8;
}
.summit__layer:last-of-type .summit__top { fill: var(--c-accent); stroke: var(--c-paper); stroke-opacity: .9; }
/* a layer lands from just above as its month comes in (the kit's --kit-in); the months still to come wait unseen */
.summit__layer { opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * -22px)); }
.summit__layer:not([data-kit-on]) { opacity: 0; }
.summit__lead { fill: none; stroke: var(--c-night-soft); stroke-width: 1; vector-effect: non-scaling-stroke; opacity: .7; }
/* the flag stands on the top layer, with the month it has reached (it climbs with the kit's --kit-year) */
.summit__flag {
  --pole: 28px;
  position: absolute; z-index: 1;
  left: calc((var(--x0) + var(--dx) * var(--kit-year, 1)) * 1%);
  top: calc((var(--base) - var(--kit-year, 1) * var(--peak) + var(--dy) * var(--kit-year, 1)) * 1%);
  transform: translate(-50%, calc(-100% - var(--pole)));
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px 6px 8px;
  font: 700 14px/1 var(--font-display); color: var(--c-paper); white-space: nowrap;
  background: var(--c-night-card); border: 1px solid var(--c-night-line); border-radius: var(--radius-s); box-shadow: var(--shadow-l);
}
.summit__flag::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1px; height: var(--pole); background: var(--c-paper); opacity: .75; }
.summit__flag svg { flex: none; display: block; color: var(--c-accent); }
.summit__flag span { font-variant-numeric: tabular-nums; }
/* the key, at the right of the foot layer, its lead running to it */
.summit__key { position: absolute; left: 64%; top: calc(var(--foot) * 1%); right: var(--pad-x); transform: translateY(-50%); display: grid; justify-items: start; gap: 3px; }
.summit__key b { font: 700 19px/1.25 var(--font-display); font-variant-numeric: tabular-nums; color: var(--c-paper); }
.summit__what, .summit__all { font: 600 14px/1.35 var(--font-text); color: var(--c-night-soft); }
.summit__what { margin-bottom: 3px; }
.summit__all { margin-top: 6px; padding-top: 8px; border-top: 1px solid var(--c-night-line); }
.worth__year .btn { align-self: flex-start; margin-top: 8px; box-shadow: none; }
.worth__year .btn-note { color: var(--c-night-soft); }
.year__note { margin-top: 18px; padding-top: 14px; font: 400 13px/1.45 var(--font-text); color: var(--c-night-soft); border-top: 1px solid var(--c-night-line); }
@media (max-width: 1024px) {
  .worth { display: flex; flex-direction: column; }
}
/* side by side on a smaller computer, the card is narrow: the key a size smaller */
@media (min-width: 1025px) and (max-width: 1199px) {
  .summit__key b { font-size: 17px; }
  .summit__what, .summit__all { font-size: 13px; }
}
/* one under the other, the card is wide: the drawing keeps its size in the middle, its ground running out to the sides */
@media (min-width: 700px) and (max-width: 1024px) {
  .summit { width: min(100%, 700px); margin: 14px auto 0; }
}
/* narrower: the drawing a third wider than the card, so the summit fills it (the ground runs off its right side); the
   key moves under the drawing, its lead gone */
@media (max-width: 699px) {
  .summit { overflow: hidden; }
  .summit__stage { width: 133.4%; }
  .summit__lead { display: none; }
  .summit__key { position: static; transform: none; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; margin: 4px var(--pad-x) 0; }
  .summit__key b { font-size: 18px; }
  .summit__key b + b::before { content: "·"; margin-right: 12px; font-weight: 400; color: var(--c-night-soft); }
  .summit__what, .summit__all { flex-basis: 100%; }
  .summit__flag { --pole: 18px; padding: 5px 8px 5px 7px; font-size: 13px; }
}
@media (max-width: 599px) {
  .worth__inputs { padding: 26px 20px 22px; gap: 26px; }
  .worth__year { --pad-x: 20px; padding: 26px var(--pad-x) 22px; }
  .year__total b { font-size: 44px; }
  .worth__year .btn { align-self: stretch; margin-top: 22px; }
  .worth__year .btn-note { text-align: center; }
}

/* ---------- outcome rows ---------- */
/* div.rows and article.row by their elements: the out-found scene has its own .rows and .row inside it */
div.rows { display: grid; gap: 96px; }
article.row { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); align-items: center; }
.row__panel {
  grid-row: 1; grid-column: 6 / span 7; position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10;
  background: var(--c-night-deep); border-radius: var(--radius-l); box-shadow: var(--shadow-l);
}
.row__words { grid-row: 1; grid-column: 1 / span 5; min-width: 0; }
.row--flip .row__panel { grid-column: 1 / span 7; }
.row--flip .row__words { grid-column: 8 / span 5; }
.row__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* a light navy wash, and a shade on the scene's side (--row-side: 90deg with the scene at left, 270deg at right) */
.row__veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(var(--row-side, 90deg), color-mix(in srgb, var(--c-night-deep) 58%, transparent), transparent 58%),
    color-mix(in srgb, var(--c-night) 20%, transparent);
}
.row__scene { position: absolute; top: 24px; left: 24px; z-index: 1; width: min(360px, 48%); }
.row__num { display: block; font: 700 18px/1 var(--font-display); letter-spacing: .04em; color: var(--c-signal); }
.row__title { margin: 14px 0 0; font: 800 30px/1.15 var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-paper); text-wrap: balance; }
.row__text { margin: 14px 0 0; max-width: 48ch; font-size: 17px; line-height: 1.6; color: var(--c-night-soft); text-wrap: pretty; }
.row__list { display: grid; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.row__list li { display: flex; gap: 12px; font: 500 15px/1.45 var(--font-text); color: var(--c-paper); }
.row__list li::before { margin-top: 3px; color: var(--c-signal); }
.row__link {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 26px; padding-bottom: 4px;
  font: 600 16px/1.3 var(--font-ui); color: var(--c-paper); text-decoration: none; border-bottom: 1px solid var(--c-night-line);
}
.row__link svg { width: 16px; height: 16px; color: var(--c-signal); transition: transform var(--dur-fast) var(--ease-out); }
.row__link:hover svg { transform: translateX(3px); }
.row__link:hover { border-bottom-color: var(--c-signal); }
/* From 1100 the panel and the words side by side, 7 and 5 (at 6 and 6 the panel is under its scenes' own height); under
   1100 (where a 7-column panel leaves the found card too narrow for its names) the panel spans the column, its scenes
   as on the computer, the words under it in two columns; under 760 the panel grows to 4:5 and its scene sits at its
   foot, full card, the clip's free part above it */
@media (max-width: 1099px) {
  article.row { display: flex; flex-direction: column; align-items: stretch; gap: var(--space-4); }
  .row__words { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--space-5); align-items: start; }
  .row__num, .row__title, .row__text { grid-column: 1; }
  .row__list { grid-column: 2; grid-row: 1 / span 3; align-self: center; margin-top: 0; }
  .row__link { grid-column: 2; justify-self: start; }
}
@media (max-width: 759px) {
  div.rows { gap: 64px; }
  article.row { gap: var(--space-4); }
  .row__panel { --row-side: 0deg; aspect-ratio: 4 / 5; }
  .row__scene { top: auto; bottom: 16px; left: 16px; right: 16px; width: auto; max-width: 360px; }
  .row__words { display: block; }
  .row__list { margin-top: 20px; }
  .row__title { font-size: 26px; }
}

/* ---------- what they report, what we give (kit sequence) ---------- */
.vs { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.vs__side { position: relative; isolation: isolate; overflow: hidden; aspect-ratio: 16 / 10; background: var(--c-night-deep); border-radius: var(--radius-l); box-shadow: var(--shadow-m); }
.vs__photo { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; object-fit: cover; }
.vs__veil { position: absolute; inset: 0; z-index: -1; }
.vs__side--them .vs__photo { filter: grayscale(1) contrast(.8); }
.vs__side--them .vs__veil { background: color-mix(in srgb, var(--c-night-deep) 55%, transparent); }
.vs__side--us .vs__veil { background: var(--shade-bottom); }
.vs__tag {
  position: absolute; top: 16px; left: 16px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px;
  font: 700 14px/1 var(--font-display); color: var(--c-paper); background: var(--c-night-card);
  border: 1px solid var(--c-night-line); border-radius: var(--radius-s);
}
.vs__tag img { width: 20px; height: 20px; border-radius: 2px; }
.vs__lines { position: absolute; left: 16px; right: 16px; bottom: 16px; display: grid; justify-items: start; gap: 6px; margin: 0; padding: 0; list-style: none; }
.vs__line {
  --p: calc(min(var(--kit-in, 1), 1) * (1 - var(--kit-out, 0)));
  display: flex; align-items: center; gap: 10px; max-width: 100%; padding: 9px 14px;
  font: 600 18px/1.3 var(--font-text); color: var(--c-paper); background: var(--c-night-card); border-radius: var(--radius-s);
}
/* the usual agency's lines: struck through in turn, the words dimming to 55% */
.vs__side--them .vs__line span { position: relative; color: color-mix(in srgb, var(--c-paper) calc(100% - var(--p) * 45%), transparent); }
.vs__side--them .vs__line span::after {
  content: ""; position: absolute; left: -3px; right: -3px; top: 55%; height: 2px; margin-top: -1px;
  background: var(--c-paper); transform-origin: 0 50%; transform: scaleX(var(--p));
}
/* ours: each line arrives with its glacier check drawing in */
.vs__side--us .vs__line { opacity: var(--p); transform: translateY(calc((1 - var(--p)) * 10px)); }
.vs__check { flex: none; width: 18px; height: 18px; color: var(--c-accent); }
.vs__check path { stroke-dasharray: 100; stroke-dashoffset: calc((1 - clamp(0, (var(--p) - .3) / .7, 1)) * 100); }
/* under 1000px the lines sit under each photo, on the panel's navy */
@media (max-width: 999px) {
  .vs__side { aspect-ratio: auto; display: flex; flex-direction: column; }
  .vs__photo { position: relative; z-index: -2; height: auto; aspect-ratio: 16 / 10; }
  .vs__veil { bottom: auto; aspect-ratio: 16 / 10; }
  .vs__side--us .vs__veil { background: color-mix(in srgb, var(--c-night-deep) 12%, transparent); }
  .vs__tag { position: static; align-self: flex-start; margin: 16px 16px 0; }
  .vs__lines { position: static; padding: 12px 16px 18px; }
  .vs__line { font-size: 17px; }
}
@media (max-width: 759px) {
  .vs { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
}

/* ---------- who we help tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); }
.tile {
  position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: flex-end; aspect-ratio: 4 / 3;
  color: var(--c-paper); text-decoration: none; background: var(--c-night-card); border-radius: var(--radius-l); box-shadow: var(--shadow-m);
  transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.tile__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--ease-out), filter .6s var(--ease-out); }
.tile__veil { position: absolute; inset: 0; z-index: -1; background: var(--shade-bottom); }
.tile__body { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-3); align-items: end; width: 100%; padding: 22px 22px 22px 24px; }
.tile__name { grid-column: 1; margin: 0; font: 800 24px/1.15 var(--font-display); letter-spacing: -0.012em; color: var(--c-paper); }
.tile__fields { grid-column: 1; margin: 6px 0 0; font-size: 15px; line-height: 1.45; color: var(--c-night-soft); text-wrap: pretty; }
.tile__go {
  grid-column: 2; grid-row: 1 / span 2; display: grid; place-items: center; width: 40px; height: 40px;
  color: var(--c-on-brand); background: var(--c-brand); border-radius: var(--radius-s); transition: transform var(--dur-fast) var(--ease-out);
}
.tile__go svg { width: 16px; height: 16px; }
.tile:hover, .tile:focus-visible { transform: translateY(-3px); box-shadow: var(--shadow-l); }
.tile:hover .tile__photo, .tile:focus-visible .tile__photo { transform: scale(1.03); filter: brightness(1.08); }
.tile:hover .tile__go, .tile:focus-visible .tile__go { transform: translateX(3px); }
.tile--more { grid-column: 1 / -1; align-items: center; aspect-ratio: auto; min-height: 148px; border: 1px solid var(--c-night-line); }
.tile--more::before { width: 600px; top: -240px; right: -140px; opacity: .14; }
.tile--more .tile__body { padding: 28px 28px 28px 32px; }
.tile--more .tile__fields { font-size: 17px; }
/* two columns under 1200px: three tiles across a narrower row wrap their fields to three lines, and the words climb
   into the faces of the upper half */
@media (max-width: 1199px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* two narrow columns (700 to 799px): square tiles, so the words at the foot stay under the faces */
@media (min-width: 700px) and (max-width: 799px) {
  .tile:not(.tile--more) { aspect-ratio: 1; }
}
@media (max-width: 699px) {
  .tiles { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  .tile__name { font-size: 22px; }
}

/* ---------- the FAQ ---------- */
.faq { max-width: calc(860px + 2 * var(--gutter)); }
.faq__item { background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); }
.faq__item + .faq__item { margin-top: var(--space-2); }
.faq__q { position: relative; display: block; padding: 22px 64px 22px 24px; font: 700 19px/1.35 var(--font-display); color: var(--c-ink); cursor: pointer; list-style: none; border-radius: var(--radius-m); }
.faq__q::-webkit-details-marker { display: none; }
.faq__q::before, .faq__q::after { content: ""; position: absolute; right: 24px; top: 50%; width: 16px; height: 2px; margin-top: -1px; background: var(--c-brand); transition: transform var(--dur-fast) var(--ease-out); }
.faq__q::after { transform: rotate(90deg); }
.faq__item[open] > .faq__q::after { transform: rotate(0deg); }
.faq__q:hover { color: var(--c-brand-text); }
.faq__q:focus-visible { outline-offset: -3px; }
.faq__a { padding: 0 24px 24px; }
.faq__a p { margin: 0; max-width: 68ch; font-size: 17px; line-height: 1.65; color: var(--c-ink-soft); }
.faq__a a { color: var(--c-brand-text); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 599px) {
  .faq__q { padding: 18px 52px 18px 18px; font-size: 17px; }
  .faq__q::before, .faq__q::after { right: 18px; }
  .faq__a { padding: 0 18px 20px; }
}

/* ---------- the closing band ---------- */
.close { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: center; min-height: 640px; padding-block: var(--section-y); background: var(--c-night-deep); color: var(--c-paper); }
.close__clip { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
/* darkened only behind the words: a centered navy shade over a light veil */
.close__veil {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 50% 64% at 50% 50%, color-mix(in srgb, var(--c-night-deep) 90%, transparent) 0%, color-mix(in srgb, var(--c-night-deep) 78%, transparent) 50%, transparent 100%),
    color-mix(in srgb, var(--c-night-deep) 34%, transparent);
}
.close__in { max-width: calc(760px + 2 * var(--gutter)); text-align: center; }
.close__title { margin: 0; font: 800 var(--fs-h2)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-paper); text-wrap: balance; }
.quote { margin: var(--space-4) auto 0; max-width: 620px; }
.quote__text { margin: 0; }
.quote__text p { margin: 0; font: 600 22px/1.45 var(--font-display); color: var(--c-paper); text-wrap: balance; }
.quote__text p::before { content: "\201C"; }
.quote__text p::after { content: "\201D"; }
.quote__by { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; margin-top: 14px; font: 600 15px/1.4 var(--font-ui); color: var(--c-night-soft); }
.quote__link { color: var(--c-signal); text-decoration: underline; text-underline-offset: 3px; }
.close__in .picker { max-width: 620px; margin: var(--space-5) auto 0; }
@media (max-width: 599px) {
  .close { min-height: 0; }
  .close__veil { background: color-mix(in srgb, var(--c-night-deep) 72%, transparent); }
  .quote__text p { font-size: 20px; }
  .close__in .picker { padding: 18px 16px; }
}

/* ---------- the footer (src\partials\footer.mjs) ---------- */
.site-footer {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--space-5); row-gap: var(--space-5);
  padding: var(--space-6) max(var(--gutter), (100% - var(--max-w)) / 2 + var(--gutter)) var(--space-5);
  background: var(--c-night-deep); color: var(--c-paper);
}
.site-footer::before { width: 620px; top: -300px; right: -220px; opacity: .1; }
.site-footer__brand { grid-column: 1 / span 6; }
.site-footer__logo { display: inline-block; padding: 12px 16px; line-height: 0; background: var(--c-paper); border-radius: var(--radius-m); }
.site-footer__logo img { display: block; width: auto; height: 48px; }
.site-footer__line { margin: var(--space-4) 0 0; max-width: 24ch; font: 700 18px/1.35 var(--font-display); color: var(--c-paper); }
.site-footer__col { grid-column: span 3; }
.site-footer__title { margin: 0 0 14px; font: 600 14px/1.3 var(--font-ui); color: var(--c-night-soft); }
.site-footer__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer__col a { font: 400 16px/1.4 var(--font-text); color: var(--c-paper); text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 3px; }
.site-footer__contact { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 24px; font-size: 16px; }
.site-footer__contact a, .site-footer__contact address { color: var(--c-paper); font-style: normal; }
.site-footer__legal {
  grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 24px;
  padding-top: var(--space-4); font-size: var(--fs-small); color: var(--c-night-soft); border-top: 1px solid var(--c-night-line);
}
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; padding: 0; list-style: none; }
.site-footer__legal a { color: var(--c-night-soft); text-decoration: none; }
.site-footer__legal a:hover { color: var(--c-paper); }
@media (max-width: 759px) {
  .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-4); padding-top: 56px; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__col { grid-column: span 1; }
  .site-footer__legal { flex-direction: column; align-items: flex-start; }
}

/* ---------- the thank-you page (src\pages\thank-you.mjs) ---------- */
.thanks {
  position: relative; isolation: isolate; overflow: clip;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: max(520px, min(760px, 100svh - 76px)); padding: var(--section-y) var(--gutter);
  text-align: center; background: var(--c-night); color: var(--c-paper);
}
.thanks::before { width: 1040px; left: 50%; top: 50%; margin: -520px 0 0 -520px; opacity: .12; }
.thanks__headline { margin: 0; max-width: 20ch; font: 800 var(--fs-h1)/var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-paper); text-wrap: balance; }
.thanks__body { margin: var(--space-4) 0 0; max-width: 58ch; font-size: 18px; line-height: 1.6; color: var(--c-night-soft); text-wrap: pretty; }
.thanks__next { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: var(--space-5) 0 0; padding: 0; list-style: none; }
.thanks__next a {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: 54px; padding: 0 var(--space-4);
  font: 700 16px/1 var(--font-display); text-decoration: none; white-space: nowrap; border-radius: var(--radius-s);
  transition: background-color var(--dur-fast) var(--ease-out);
}
.thanks__next li:first-child a { color: var(--c-on-brand); background: var(--c-brand); }
.thanks__next li:first-child a:hover { background: var(--c-brand-dark); }
.thanks__next li:first-child a::after { width: 16px; height: 16px; transition: transform var(--dur-fast) var(--ease-out); }
.thanks__next li:first-child a:hover::after { transform: translateY(-2px); }
.thanks__next li + li a { color: var(--c-paper); border: 1px solid var(--c-night-line); }
.thanks__next li + li a:hover { background: var(--c-night-card); }
@media (max-width: 599px) {
  .thanks { min-height: 0; text-align: left; align-items: flex-start; }
  .thanks__next { flex-direction: column; align-self: stretch; }
  .thanks__next a { width: 100%; }
}

/* ---------- reduced motion: the components' own transitions rest ---------- */
@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow, .site-header__cta, .nav__item a, .picker__chip, .stop, .tour__tab, .exit__in,
  .site-header__menu::before, .site-header__menu::after,
  .step, .step::before, .row__link svg, .tile, .tile__photo, .tile__go, .faq__q::before, .faq__q::after,
  .thanks__next a, .thanks__next li:first-child a::after { transition: none; }
  .msg--typing i { animation: none; }
}