/* 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). Every page uses these
   classes as they are; a page's own CSS only places and sizes its parts, with the tokens of system.css. */

/* ---------- the light scope inside a dark one (a white card on a dark band) ---------- */
.is-light {
  --c-brand: #1e1e1e; --c-brand-dark: #0b0b0b; --c-brand-light: #ecebe8; --c-accent: #6e6a66;
  --c-ink: #1e1e1e; --c-ink-soft: #4f4d4a; --c-paper: #ffffff; --c-paper-alt: #f3f2f0; --c-line: #e2e0dc;
  --c-on-brand: #ffffff; --c-brand-text: #1e1e1e; --c-accent-text: #55524f;
  color-scheme: light; color: var(--c-ink);
}

/* ---------- layout ---------- */
.wrap { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); box-sizing: border-box; }
.band { padding-block: var(--section-y); position: relative; }
.band--dark { background: var(--c-night); }
.band--alt { background: var(--c-paper-alt); }
main { display: block; }
a { color: inherit; }
:where(a, button, input, summary, [tabindex]):focus-visible { outline: 3px solid var(--c-ink); outline-offset: 3px; }

/* ---------- type ---------- */
.h-display, .h1, .h2, .h3 { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); text-transform: uppercase; line-height: var(--lh-tight); letter-spacing: .004em; margin: 0; text-wrap: balance; }
.h-display { font-size: var(--fs-display); line-height: .86; }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); line-height: 1; }
.lead { font-size: var(--fs-lead); line-height: 1.45; color: var(--c-ink-soft); max-width: 44ch; margin: var(--space-4) 0 0; text-wrap: pretty; }
.lead strong { color: var(--c-ink); font-weight: 600; }
/* the signal: one word or phrase inverted in its own block */
.flip { background: var(--c-ink); color: var(--c-paper); padding: .03em .12em .02em; margin-inline: -.02em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }

/* ---------- the logo's mark ---------- */
.mark { width: 26px; height: 26px; flex: none; display: block; transition: transform var(--dur-fast) var(--ease-out); }
.mark__circle { fill: var(--mark-circle, currentColor); }
.mark__arrow { fill: var(--mark-arrow, var(--c-paper)); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: space-between; gap: 14px; min-height: 54px; padding: 12px 13px 12px 22px; box-sizing: border-box; border-radius: var(--radius-s); font: 600 1.0625rem/1.1 var(--font-ui); letter-spacing: .005em; text-decoration: none; cursor: pointer; border: 0; transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out); }
.btn--main { background: var(--c-brand); color: var(--c-on-brand); --mark-circle: var(--c-on-brand); --mark-arrow: var(--c-brand); }
.btn--main:hover { background: var(--c-brand-dark); }
.btn--main:hover .btn__mark, .btn--main:focus-visible .btn__mark { transform: translateY(-3px); }
.btn--small { min-height: 44px; padding: 8px 9px 8px 16px; font-size: .9375rem; gap: 10px; }
.btn--small .mark { width: 24px; height: 24px; }
.btn--line { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 2px var(--c-ink); padding: 12px 22px; justify-content: center; }
.btn--line:hover { background: var(--c-ink); color: var(--c-paper); }
.note { margin: 12px 0 0; font-size: var(--fs-small); line-height: 1.35; color: var(--c-ink-soft); letter-spacing: .01em; }
.link-arrow { display: inline-flex; align-items: center; gap: 10px; font: 600 1rem/1.2 var(--font-ui); text-decoration: none; border-bottom: 2px solid currentColor; padding-bottom: 4px; --mark-circle: var(--c-ink); --mark-arrow: var(--c-paper); }
.link-arrow .mark { width: 22px; height: 22px; transform: rotate(90deg); }
.link-arrow:hover .mark { transform: rotate(90deg) translateY(-3px); }

/* ---------- the stop icon (h.stop(), and the tour's data-kit-tabs-stop) ---------- */
.stop { display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--radius-round); background: rgb(17 17 17 / .72); color: #fff; cursor: pointer; z-index: 6; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.stop:hover { background: #111; }
.stop svg { width: 15px; height: 15px; }
[data-kit-tabs-stop] .stop__play { display: none; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__play { display: inline; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__pause { display: none; }

/* ---------- the header ---------- */
.site-header { position: sticky; top: 0; z-index: 50; background: #fff; color: #1e1e1e; border-bottom: 1px solid var(--c-line); }
.site-header__in { max-width: var(--max-w); margin-inline: auto; padding-inline: var(--gutter); height: var(--header-h); display: flex; align-items: center; gap: var(--space-4); box-sizing: border-box; }
.site-header__logo { display: block; flex: none; line-height: 0; }
.site-header__logo img { height: 42px; width: auto; display: block; }
.site-header__nav { margin-left: auto; }
.nav__list { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(14px, 1.6vw, 28px); }
.nav__item a { display: block; padding: 10px 2px; font: 500 .9375rem/1 var(--font-ui); text-decoration: none; border-bottom: 2px solid transparent; }
.nav__item a:hover, .nav__item a[aria-current="page"] { border-bottom-color: currentColor; }
.nav__item a[data-planned] { opacity: 1; }
.site-header__cta { flex: none; }
.site-header__menu { display: none; width: 44px; height: 44px; margin-right: -8px; border: 0; background: none; cursor: pointer; position: relative; color: inherit; }
.site-header__menu-bars, .site-header__menu-bars::before { position: absolute; left: 11px; right: 11px; height: 2px; background: currentColor; content: ""; transition: transform var(--dur-fast) var(--ease-out); }
.site-header__menu-bars { top: 18px; }
.site-header__menu-bars::before { left: 0; right: 0; top: 7px; }
.site-header[data-open] .site-header__menu-bars { transform: translateY(3.5px) rotate(45deg); }
.site-header[data-open] .site-header__menu-bars::before { transform: translateY(-7px) rotate(-90deg); }
@media (max-width: 1023px) {
  .site-header__menu { display: block; }
  .site-header__nav { display: none; position: fixed; inset: var(--header-h) 0 0 0; background: #fff; padding: var(--space-5) var(--gutter); overflow-y: auto; }
  .site-header[data-open] .site-header__nav { display: block; }
  .site-header__cta { margin-left: auto; }
  .nav__list { flex-direction: column; gap: 0; }
  .nav__item a { font: var(--display-weight) clamp(2.4rem, 9vw, 3.4rem)/1 var(--font-display); font-stretch: var(--display-stretch); text-transform: uppercase; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
}
@media (max-width: 699px) {
  :root { --header-h: 64px; }
  .site-header__logo img { height: 36px; }
  .site-header__cta { display: none; }
  .site-header__menu { margin-left: auto; }
}

/* ---------- the footer ---------- */
.site-footer { background: var(--c-paper-alt); color: var(--c-ink); border-top: 1px solid var(--c-line); }
.site-footer__in { max-width: var(--max-w); margin-inline: auto; padding: var(--space-6) var(--gutter) var(--space-4); display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, .8fr)); gap: var(--space-5) var(--space-6); box-sizing: border-box; }
.site-footer__logo img { height: 64px; width: auto; display: block; }
.site-footer__line { font: var(--display-weight) clamp(1.6rem, 1.2rem + 1.2vw, 2.4rem)/.95 var(--font-display); font-stretch: var(--display-stretch); text-transform: uppercase; margin: var(--space-4) 0 var(--space-4); max-width: 14em; }
.site-footer__title { font: 600 var(--fs-small)/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-soft); margin: 6px 0 var(--space-3); }
.site-footer__col ul, .site-footer__legal ul { list-style: none; margin: 0; padding: 0; }
.site-footer__col a { display: inline-block; padding: 7px 0; font: 500 1rem/1.2 var(--font-ui); text-decoration: none; }
.site-footer__col a:hover { text-decoration: underline; text-underline-offset: 4px; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--c-line); font-size: var(--fs-small); color: var(--c-ink-soft); }
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { display: flex; gap: var(--space-4); }
.site-footer__legal a { text-decoration: none; padding: 6px 0; display: inline-block; }
.site-footer__legal a:hover { text-decoration: underline; }
@media (max-width: 799px) {
  .site-footer__in { grid-template-columns: 1fr 1fr; }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__logo img { height: 52px; }
}

/* ---------- the clients picker ---------- */
.picker { background: var(--c-paper); box-shadow: inset 0 0 0 1px var(--c-line); border-radius: var(--radius-m); padding: clamp(16px, 1.6vw, 22px); box-sizing: border-box; max-width: 540px; }
.picker__set { border: 0; margin: 0; padding: 0; min-width: 0; }
.picker__legend { padding: 0; font: 600 1rem/1.3 var(--font-ui); color: var(--c-ink); margin-bottom: 12px; }
.picker__choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.picker__choice { position: relative; display: block; }
.picker__choice input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picker__choice span { display: flex; align-items: center; justify-content: center; height: 54px; border-radius: var(--radius-s); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--c-ink) 26%, transparent); font: var(--display-weight) 1.75rem/1 var(--font-display); font-stretch: var(--display-stretch); color: var(--c-ink); transition: background-color var(--dur-fast), color var(--dur-fast), box-shadow var(--dur-fast); }
.picker__choice:hover span { box-shadow: inset 0 0 0 2px var(--c-ink); }
.picker__choice input:checked + span { background: var(--c-ink); color: var(--c-paper); box-shadow: none; }
.picker__choice input:focus-visible + span { outline: 3px solid var(--c-ink); outline-offset: 3px; }
.picker__go { width: 100%; margin-top: 12px; min-height: 58px; }
.picker__note { text-align: center; }

/* ---------- section patterns ---------- */
/* a section head: the headline and its one line */
.head { display: grid; gap: var(--space-4) var(--space-6); align-items: end; margin-bottom: clamp(2rem, 1.2rem + 3vw, 4rem); }
.head .lead { margin: 0; }
@media (min-width: 900px) { .head--split { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); margin-top: clamp(2rem, 1.4rem + 2vw, 3rem); }
.cta-row .note { margin: 0; }

/* the promise list, each after the mark */
.promises { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: var(--space-3) var(--space-5); }
.promises li { display: flex; align-items: center; gap: 12px; font: 600 1.0625rem/1.25 var(--font-ui); --mark-circle: var(--c-ink); --mark-arrow: var(--c-paper); }

/* the FAQ */
.faq-list { border-top: var(--rule) solid var(--c-ink); }
.faq-list details { border-bottom: 1px solid var(--c-line); }
.faq-list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); padding: 22px 0; font: 600 clamp(1.1rem, 1rem + .4vw, 1.3rem)/1.3 var(--font-ui); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: ""; flex: none; width: 14px; height: 14px; background: linear-gradient(currentColor, currentColor) center / 100% 2.5px no-repeat, linear-gradient(currentColor, currentColor) center / 2.5px 100% no-repeat; transition: transform var(--dur-fast) var(--ease-out); }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details > :not(summary) { margin: 0 0 24px; max-width: 62ch; color: var(--c-ink-soft); }

/* a band over footage: the closing band */
.footage { position: relative; overflow: hidden; background: var(--c-night); isolation: isolate; }
.footage__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.footage__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, var(--c-shade) 0%, rgb(10 10 10 / .62) 45%, rgb(10 10 10 / .12) 78%); }
.footage .stop { position: absolute; top: 18px; right: var(--gutter); }

/* ---------- the free plan tour ---------- */
.tour__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; border-top: var(--rule) solid var(--c-ink); }
.tour__tab { position: relative; display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; align-items: start; text-align: left; padding: 22px 22px 24px 0; border: 0; background: none; color: var(--c-ink-soft); cursor: pointer; font: inherit; transition: color var(--dur-fast); }
.tour__tab + .tour__tab { padding-left: 22px; box-shadow: inset 1px 0 0 var(--c-line); }
.tour__tab:hover, .tour__tab[aria-selected="true"] { color: var(--c-ink); }
.tour__num { grid-row: span 2; font: var(--display-weight) 2.6rem/.85 var(--font-display); font-stretch: var(--display-stretch); }
.tour__title { font: 600 1.125rem/1.25 var(--font-ui); }
.tour__line { font-size: var(--fs-small); line-height: 1.35; }
.tour__tab::before { content: ""; position: absolute; left: 0; right: 0; top: calc(-1 * var(--rule)); height: var(--rule); background: transparent; }
.tour__tab[aria-selected="true"]::before { background: var(--c-ink); height: 6px; top: -4px; transform-origin: left; transform: scaleX(1); }
[data-kit-tabs][data-kit-on] .tour__tab[aria-selected="true"]::before { transform: scaleX(var(--kit-fill, 1)); }
.tour__stage { position: relative; overflow: hidden; border-radius: var(--radius-l); background: #0c0c0c; margin-top: var(--space-4); }
.tour__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .55; filter: grayscale(.35) contrast(1.05); }
.tour__stage::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgb(12 12 12 / .1), rgb(12 12 12 / .65)); pointer-events: none; }
.tour__panel { position: relative; z-index: 1; display: grid; place-items: center; min-height: clamp(470px, 40vw, 560px); padding: clamp(14px, 2vw, 28px); box-sizing: border-box; }
.tour__panel:focus-visible { outline-offset: -4px; }
.tour__panel > .scene { width: 100%; }
.tour__stage .stop { position: absolute; top: 16px; right: 16px; }
@media (max-width: 799px) {
  .tour__tabs { grid-template-columns: 1fr; }
  .tour__tab { padding: 14px 0; grid-template-columns: 2.4rem 1fr; }
  .tour__tab + .tour__tab { padding-left: 0; box-shadow: inset 0 1px 0 var(--c-line); }
  .tour__num { font-size: 2rem; }
  .tour__tab[aria-selected="true"]::before { top: -3px; height: 4px; }
}

/* ---------- the steps lit by the chat ---------- */
.steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: 0; border-top: var(--rule) solid var(--c-line); }
.step { display: grid; grid-template-columns: clamp(64px, 6vw, 92px) 1fr; gap: 4px var(--space-4); padding: 22px 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink-soft); transition: color var(--dur-med) var(--ease-out); }
.step__num { grid-row: span 2; font: var(--display-weight) clamp(3.6rem, 2.6rem + 3vw, 5.6rem)/.8 var(--font-display); font-stretch: var(--display-stretch); color: color-mix(in srgb, var(--c-ink) 22%, transparent); transition: color var(--dur-med) var(--ease-out); }
.step__title { font: 600 clamp(1.2rem, 1.05rem + .5vw, 1.45rem)/1.2 var(--font-ui); color: var(--c-ink); margin: 2px 0 0; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.step__tag { font: 600 .8125rem/1 var(--font-ui); letter-spacing: .02em; padding: 6px 9px; border-radius: var(--radius-s); box-shadow: inset 0 0 0 1.5px currentColor; color: var(--c-ink-soft); }
.step p { margin: 6px 0 0; line-height: 1.5; max-width: 46ch; }
.step[aria-current="step"] .step__num { color: var(--c-ink); }
.step[aria-current="step"] .step__tag { background: var(--c-ink); color: var(--c-paper); box-shadow: none; }

/* the phone and its chat (kit chat) */
.phone { position: relative; width: min(100%, 340px); background: #0f0f0f; color: #fff; border-radius: 34px; padding: 10px; box-shadow: 0 0 0 1px rgb(255 255 255 / .12), var(--shadow-l); box-sizing: border-box; }
.phone__screen { background: #fff; color: #1e1e1e; border-radius: 26px; overflow: hidden; height: 520px; display: flex; flex-direction: column; }
.phone__head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid #ecebe8; flex: none; --mark-circle: #1e1e1e; --mark-arrow: #fff; }
.phone__head .mark { width: 32px; height: 32px; }
.phone__name { font: 600 15px/1.2 var(--font-ui); }
.phone__sub { font: 400 13px/1.2 var(--font-ui); color: #5f5c58; }
.chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px; overflow: hidden; }
.chat__msg { max-width: 84%; padding: 10px 13px; border-radius: 16px; font: 400 14.5px/1.38 var(--font-ui); background: #f1f0ee; align-self: flex-start; opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.chat__msg--me { align-self: flex-end; background: #1e1e1e; color: #fff; }
.chat__msg:first-child { opacity: 1; transform: none; } /* the opening question is there the moment the chat starts again */
.chat__chips { display: flex; gap: 6px; background: none; padding: 0; }
.chat__chips span { padding: 8px 13px; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #c9c6c1; font: 600 14px/1 var(--font-ui); }
.chat__chips span[data-kit-on] { background: #1e1e1e; color: #fff; box-shadow: none; }
.chat__typing { display: inline-flex; gap: 4px; padding: 13px 14px; }
.chat__typing i { width: 7px; height: 7px; border-radius: 50%; background: #8d8984; animation: chatdot 1s infinite ease-in-out; }
.chat__typing i:nth-child(2) { animation-delay: .15s; }
.chat__typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chatdot { 0%, 80%, 100% { transform: translateY(0); opacity: .5; } 40% { transform: translateY(-4px); opacity: 1; } }
.chat__bar { display: block; height: 6px; border-radius: 3px; background: #e6e4e1; margin-top: 8px; overflow: hidden; }
.chat__bar i { display: block; height: 100%; background: #1e1e1e; transform-origin: left; transform: scaleX(var(--kit-fill, 0)); }
.chat__card { width: 100%; max-width: 100%; box-sizing: border-box; background: #1e1e1e; color: #fff; border-radius: 14px; padding: 14px; }
.chat__card-k { font: 500 13px/1.2 var(--font-ui); color: #bdbab6; }
.chat__card-v { font: var(--display-weight) 2.3rem/.95 var(--font-display); font-stretch: var(--display-stretch); text-transform: uppercase; margin: 6px 0 2px; }
.chat__card-s { font: 400 13px/1.3 var(--font-ui); color: #bdbab6; }
.chat__bars { display: flex; align-items: flex-end; gap: 4px; height: 52px; margin: 12px 0 10px; }
.chat__bars i { flex: 1; background: #fff; border-radius: 2px 2px 0 0; }
.chat__from { display: flex; justify-content: space-between; gap: 8px; font: 400 13px/1.3 var(--font-ui); color: #bdbab6; border-top: 1px solid #3a3836; padding-top: 9px; }
.chat__from b { color: #fff; font-weight: 600; }
[data-kit-scene="chat"] { opacity: calc(1 - var(--kit-out, 0) * .7); }
@media (prefers-reduced-motion: reduce) { .chat__typing i { animation: none; } }

/* ---------- the calculator (kit worth and year): three sliders, and the logo's up-arrow rising as tall as the year of
   new business, on a dollar ladder (a log scale: $1K at the arrow's shortest, each step x10, room above $10M) ----------
   The kit sets --kit-fill on each slider and --kit-year on the picture (it fills once, the first time it is seen); the
   page's script (home.js) turns the year so far into --rise (0 to 1, where the arrow's tip stands on the ladder), marks
   the steps reached (data-on) and sets --len (the year's figure in characters, so it is as big as its column allows).
   Nothing here moves by itself. */
.worth { display: grid; gap: clamp(1.75rem, 1rem + 2.4vw, 3rem); }
.worth__sliders { display: grid; border-top: var(--rule) solid var(--c-ink); }
.slider { --thumb-w: 18px; --thumb-h: 34px; --track: color-mix(in srgb, var(--c-ink) 28%, transparent); display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 1fr auto auto; align-items: end; gap: 4px 16px; padding: 20px 0 12px; border-bottom: 1px solid var(--c-line); }
.slider label { font: 600 1rem/1.3 var(--font-ui); color: var(--c-ink); padding-bottom: 2px; }
.slider output { font: var(--display-weight) clamp(2.3rem, 1.7rem + 1.4vw, 3.1rem)/.82 var(--font-display); font-stretch: var(--display-stretch); color: var(--c-ink); font-variant-numeric: tabular-nums; }
/* the native slider, drawn in the look: a hairline track, a solid fill to the thumb, a fader thumb with its index line;
   the scale's ticks are drawn in the slider's own box, under the track, where the thumb stands at each value */
.slider input[type=range] { grid-column: 1 / -1; display: block; width: 100%; height: 44px; margin: 8px 0 0; padding: 0; -webkit-appearance: none; appearance: none; cursor: pointer; border-radius: var(--radius-s);
  --tick: linear-gradient(var(--track), var(--track));
  background: var(--tick) calc(var(--thumb-w) / 2 + var(--t1, 0) * (100% - var(--thumb-w))) 30px / 1px 7px no-repeat, var(--tick) calc(var(--thumb-w) / 2 + var(--t2, .33) * (100% - var(--thumb-w))) 30px / 1px 7px no-repeat, var(--tick) calc(var(--thumb-w) / 2 + var(--t3, .66) * (100% - var(--thumb-w))) 30px / 1px 7px no-repeat, var(--tick) calc(var(--thumb-w) / 2 + var(--t4, 1) * (100% - var(--thumb-w))) 30px / 1px 7px no-repeat; }
.slider input[type=range]::-webkit-slider-runnable-track { height: 6px; border-radius: 1px; background: linear-gradient(var(--c-ink), var(--c-ink)) 0 50% / var(--kit-fill, 0%) 6px no-repeat, linear-gradient(var(--track), var(--track)) 0 50% / 100% 2px no-repeat; }
.slider input[type=range]::-moz-range-track { height: 6px; border-radius: 1px; background: linear-gradient(var(--c-ink), var(--c-ink)) 0 50% / var(--kit-fill, 0%) 6px no-repeat, linear-gradient(var(--track), var(--track)) 0 50% / 100% 2px no-repeat; }
.slider input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: var(--thumb-w); height: var(--thumb-h); margin-top: calc((6px - var(--thumb-h)) / 2); border: 0; border-radius: var(--radius-s); background: linear-gradient(var(--c-night), var(--c-night)) 50% 50% / 2px 12px no-repeat, var(--c-ink); box-shadow: 0 0 0 4px var(--c-night); transition: transform var(--dur-fast) var(--ease-out); }
.slider input[type=range]::-moz-range-thumb { width: var(--thumb-w); height: var(--thumb-h); border: 0; border-radius: var(--radius-s); background: linear-gradient(var(--c-night), var(--c-night)) 50% 50% / 2px 12px no-repeat, var(--c-ink); box-shadow: 0 0 0 4px var(--c-night); }
.slider input[type=range]:hover::-webkit-slider-thumb, .slider input[type=range]:active::-webkit-slider-thumb { transform: scaleY(1.1); }
.slider__scale { grid-column: 1 / -1; position: relative; height: 22px; font: 500 .8125rem/1 var(--font-ui); color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.slider__scale span { position: absolute; top: 2px; left: calc(var(--thumb-w) / 2 + var(--at) * (100% - var(--thumb-w))); transform: translateX(-50%); white-space: nowrap; }
.slider__scale span:first-child { left: 0; transform: none; }
.slider__scale span:last-child { left: auto; right: 0; transform: none; }
.worth__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); }
.worth__note { margin: 0; max-width: 32ch; font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-soft); }
/* the picture: a white panel. At the top the year's figure; under it a dollar ladder ruled across the whole panel
   ($10K, $100K, $1M, $10M, each step x10), and the logo's up-arrow, in its proportions (a shaft 0.41 of its head),
   standing on the floor at the right and rising through the ladder to the year's level; the facts on the floor. */
.rise { --pad: clamp(20px, 2.6vw, 36px); --aw: 150px; --h: 330px; --top: 16px; position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(var(--h), 1fr) auto; padding: var(--pad); border-radius: var(--radius-l); background: var(--c-paper); color: var(--c-ink); box-sizing: border-box; }
.rise__read { grid-row: 1; grid-column: 1; min-width: 0; container-type: inline-size; padding-bottom: 22px; }
.rise__kicker { margin: 0; font: 600 .8125rem/1.25 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-soft); }
.rise__sum { margin: 14px 0 0; }
.rise__sum b { display: block; font: var(--display-weight) min(6.25rem, calc(100cqi / (var(--len, 11) * .43)))/.8 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: -.005em; font-variant-numeric: tabular-nums; white-space: nowrap; }
/* the chart: a size container, so the ladder and the arrow share one scale (100cqh is its height). The arrow's tip
   is at --base ($1,000, the arrow at its shortest) plus --rise times the ladder's range ($31.6M at the top). */
.rise__chart { grid-row: 2; grid-column: 1; position: relative; container-type: size; --hh: calc(var(--aw) * .55); --base: calc(var(--hh) + 14px); --range: calc(100cqh - var(--base) - var(--top)); }
.rise__chart::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-1 * var(--rule)); height: var(--rule); background: var(--c-ink); } /* the floor */
.rise__ladder { list-style: none; margin: 0; padding: 0; }
/* each step: its figure at the left, centred on its line; a step the arrow has reached (data-on, from home.js) turns
   black, figure and line */
.rise__ladder li { position: absolute; left: 0; right: 0; bottom: calc(var(--base) + var(--at) * var(--range)); display: grid; grid-template-columns: 3.2em minmax(0, 1fr); align-items: center; transform: translateY(50%); font: var(--display-weight) 1.25rem/1 var(--font-display); font-stretch: var(--display-stretch); letter-spacing: .01em; color: var(--c-accent-text); }
.rise__ladder li::after { content: ""; height: 1px; background: var(--c-line); }
.rise__ladder li[data-on] { color: var(--c-ink); }
.rise__ladder li[data-on]::after { background: var(--c-ink); }
.rise__arrow { position: absolute; right: var(--ax, 7%); bottom: 0; width: var(--aw); height: calc(var(--base) + var(--rise, .6) * var(--range)); background: var(--c-ink); clip-path: polygon(50% 0, 100% var(--hh), 70.4% var(--hh), 70.4% 100%, 29.6% 100%, 29.6% var(--hh), 0 var(--hh)); }
/* the facts stand on the floor, left of the arrow, in one row (a label may take two lines, never the row) */
.rise__facts { grid-row: 2; grid-column: 1; align-self: end; justify-self: start; position: relative; display: flex; gap: 14px clamp(22px, 2.4vw, 36px); padding-bottom: 18px; max-width: calc(100% - var(--aw) - var(--ax, 7%) - 24px); }
.rise__fact { margin: 0; min-width: 0; flex: 0 1 auto; }
.rise__fact b { display: block; font: var(--display-weight) clamp(1.8rem, 1.45rem + .8vw, 2.2rem)/.9 var(--font-display); font-stretch: var(--display-stretch); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rise__fact span { display: block; margin-top: 6px; font: 500 .875rem/1.3 var(--font-ui); color: var(--c-ink-soft); }
@media (min-width: 1200px) {
  .worth { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "sliders rise" "foot rise"; column-gap: clamp(2.5rem, 1rem + 2.4vw, 4rem); row-gap: 2rem; }
  .worth__sliders { grid-area: sliders; }
  .worth__foot { grid-area: foot; align-self: end; }
  .rise { grid-area: rise; }
}
@media (min-width: 760px) and (max-width: 1199px) {
  .rise { order: -1; --h: 340px; }
}
@media (min-width: 1000px) and (max-width: 1199px) {
  .worth__sliders { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(1.5rem, 1rem + 2vw, 2.5rem); }
}
@media (max-width: 759px) {
  .rise { order: -1; --aw: 96px; --h: 250px; --top: 14px; --ax: 6%; }
  .rise__read { padding-bottom: 18px; }
  .rise__sum b { font-size: min(4.6rem, calc(100cqi / (var(--len, 11) * .43))); }
  /* on the phone the facts stand under the floor, the whole width theirs */
  .rise__facts { grid-row: 3; align-self: start; justify-self: stretch; max-width: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 16px; padding: 16px 0 0; }
  .rise__fact b { font-size: 1.85rem; }
  .rise__fact span { font-size: .8125rem; }
  .rise__ladder li { font-size: 1.0625rem; }
  .slider output { font-size: 2.3rem; }
}

/* ---------- outcome cards: a clip with a scene over it ---------- */
.outs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1vw, 16px); }
.out { position: relative; overflow: hidden; border-radius: var(--radius-l); background: #111; min-height: clamp(540px, 44vw, 640px); display: flex; flex-direction: column; justify-content: flex-end; isolation: isolate; container-type: inline-size; }
.out__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.out::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgb(10 10 10 / .25) 0%, rgb(10 10 10 / 0) 30%, rgb(10 10 10 / 0) 52%, rgb(10 10 10 / .88) 82%); }
.out__scene[data-scene] { position: relative; margin: 0 12px; } /* in the card's flow above its words (each scene sets position: relative on itself), 12px from both sides */
.out__words { padding: 20px 20px 22px; }
.out__title { font: var(--display-weight) clamp(1.9rem, 1.4rem + 1.2vw, 2.5rem)/.9 var(--font-display); font-stretch: var(--display-stretch); text-transform: uppercase; margin: 0; text-wrap: balance; }
.out__words p { margin: 10px 0 0; font-size: .975rem; line-height: 1.45; color: var(--c-ink-soft); }
@media (max-width: 1099px) { .outs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .outs { grid-template-columns: 1fr; } .out { min-height: 560px; } }

/* ---------- compare: drag the line (kit compare) ---------- */
.cmp { position: relative; overflow: hidden; border-radius: var(--radius-l); aspect-ratio: 16 / 7.4; min-height: 440px; background: #111; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cmp__side { position: absolute; inset: 0; }
.cmp__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cmp__before .cmp__img { filter: grayscale(1) contrast(.92) brightness(.92); }
.cmp__before::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(20 20 20 / .55), rgb(20 20 20 / .1) 60%); }
.cmp__after { clip-path: inset(0 0 0 calc(var(--kit-v, .55) * 100%)); }
.cmp__after::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgb(12 12 12 / .5), rgb(12 12 12 / 0) 55%); }
.cmp__tag { position: absolute; top: 18px; z-index: 2; font: 600 .875rem/1 var(--font-ui); letter-spacing: .04em; text-transform: uppercase; padding: 9px 12px; border-radius: var(--radius-s); }
.cmp__before .cmp__tag { left: 18px; background: #e6e4e1; color: #3a3836; }
.cmp__after .cmp__tag { right: 18px; background: #fff; color: #111; }
.cmp__cards { position: absolute; z-index: 2; bottom: 18px; list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; width: min(300px, 40%); }
.cmp__before .cmp__cards { left: 18px; }
.cmp__after .cmp__cards { right: 18px; }
.cmp__card { padding: 12px 14px; border-radius: var(--radius-m); font: 400 .875rem/1.3 var(--font-ui); }
.cmp__card b { display: block; font: 600 1rem/1.25 var(--font-ui); }
.cmp__before .cmp__card { background: rgb(232 230 227 / .94); color: #4a4846; }
.cmp__before .cmp__card b { color: #2a2826; }
.cmp__before .cmp__card--x b { text-decoration: line-through; text-decoration-thickness: 2px; }
.cmp__after .cmp__card { background: #111; color: #bdbab6; box-shadow: var(--shadow-m); }
.cmp__after .cmp__card b { color: #fff; }
.cmp__minibars { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: 8px; }
.cmp__minibars i { flex: 1; background: #fff; border-radius: 1px 1px 0 0; }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; z-index: 4; }
.cmp__handle { position: absolute; top: 0; bottom: 0; left: calc(var(--kit-v, .55) * 100%); width: 0; z-index: 3; pointer-events: none; }
.cmp__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: #fff; }
.cmp__knob { position: absolute; top: 50%; left: 0; transform: translate(-50%, -50%); width: 56px; height: 56px; border-radius: 50%; background: #fff; color: #111; display: grid; place-items: center; box-shadow: var(--shadow-m); }
.cmp__knob svg { width: 28px; height: 28px; }
.cmp__hint { position: absolute; top: calc(50% + 40px); left: 0; transform: translateX(-50%); font: 600 .8125rem/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #111; padding: 7px 10px; border-radius: var(--radius-s); white-space: nowrap; }
.cmp[data-kit-touched] .cmp__hint { opacity: 0; }
@media (max-width: 899px) { .cmp__hint { top: auto; bottom: calc(50% + 40px); } } /* above the knob, clear of the cards */
.cmp__range:focus-visible ~ .cmp__handle .cmp__knob { outline: 3px solid #fff; outline-offset: 4px; }
@media (max-width: 799px) {
  .cmp { aspect-ratio: auto; height: 600px; min-height: 0; }
  .cmp__cards { width: calc(50% - 26px); bottom: 14px; gap: 8px; }
  .cmp__before .cmp__cards { left: 10px; }
  .cmp__after .cmp__cards { right: 10px; }
  .cmp__card { padding: 10px; font-size: .8125rem; }
  .cmp__card b { font-size: .875rem; }
  .cmp__tag { top: 12px; font-size: .75rem; padding: 7px 9px; }
  .cmp__before .cmp__tag { left: 10px; }
  .cmp__after .cmp__tag { right: 10px; }
}

/* ---------- who we help: photo strips ---------- */
.strips { list-style: none; margin: 0; padding: 0; border-top: var(--rule) solid var(--c-ink); }
.strip { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto; align-items: stretch; text-decoration: none; border-bottom: 1px solid var(--c-line); min-height: clamp(150px, 15vw, 210px); --mark-circle: var(--c-ink); --mark-arrow: var(--c-paper); }
.strip__words { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 22px 28px 22px 0; }
.strip__name { font: var(--display-weight) clamp(2.1rem, 1.4rem + 2.4vw, 3.9rem)/.88 var(--font-display); font-stretch: var(--display-stretch); text-transform: uppercase; }
.strip__fields { font-size: 1rem; line-height: 1.4; color: var(--c-ink-soft); }
.strip__photo { position: relative; overflow: hidden; margin: 14px 0; border-radius: var(--radius-m); }
.strip__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); filter: brightness(.86); transition: filter var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }
.strip:hover .strip__photo img, .strip:focus-visible .strip__photo img { filter: brightness(1); transform: scale(1.025); }
.strip__go { display: grid; place-items: center; padding-left: clamp(16px, 2vw, 32px); }
.strip__go .mark { width: 44px; height: 44px; transform: rotate(90deg); }
.strip:hover .strip__go .mark { transform: rotate(90deg) translateY(-4px); }
.strip--more { background: var(--c-ink); color: var(--c-paper); border-bottom: 0; padding-inline: clamp(16px, 2vw, 28px); border-radius: var(--radius-m); margin-top: 14px; grid-template-columns: minmax(0, 1fr) auto; --mark-circle: var(--c-paper); --mark-arrow: var(--c-ink); }
.strip--more .strip__fields { color: color-mix(in srgb, var(--c-paper) 75%, transparent); }
@media (max-width: 799px) {
  .strip { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "photo photo" "words go"; min-height: 0; }
  .strip__photo { grid-area: photo; height: 190px; margin: 16px 0 0; }
  .strip__words { grid-area: words; padding: 14px 12px 18px 0; }
  .strip__go { grid-area: go; padding-left: 0; }
  .strip__go .mark { width: 36px; height: 36px; }
  .strip--more { grid-template-areas: "words go"; padding-block: 6px; }
}

/* ---------- the exit popup ---------- */
.exit { padding: 0; border: 0; margin: auto; max-width: min(620px, calc(100vw - 32px)); max-height: calc(100vh - 32px); background: transparent; color: inherit; overflow: visible; }
.exit::backdrop { background: rgb(10 10 10 / .62); }
.exit__in { position: relative; background: var(--c-night); color: #fff; padding: clamp(28px, 4vw, 48px); border-radius: var(--radius-l); box-shadow: var(--shadow-l); opacity: 0; transform: translateY(14px); 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 { font: var(--display-weight) clamp(2.2rem, 1.6rem + 2vw, 3.4rem)/.9 var(--font-display); font-stretch: var(--display-stretch); text-transform: uppercase; margin: 0 40px 0 0; text-wrap: balance; }
.exit__line { margin: 14px 0 22px; color: var(--c-ink-soft); font-size: 1.0625rem; }
.exit .picker { max-width: none; }
.exit__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; display: grid; place-items: center; border: 0; border-radius: 50%; background: transparent; color: #fff; cursor: pointer; }
.exit__close:hover { background: rgb(255 255 255 / .1); }
html[data-kit-modal] { overflow: hidden; }

/* ---------- the call bar on the phone ---------- */
.callbar { position: fixed; left: 10px; right: 10px; bottom: 10px; z-index: 60; display: grid; grid-template-columns: auto 1fr; gap: 8px; padding: 8px; background: #111; border-radius: var(--radius-l); box-shadow: var(--shadow-l); transform: translateY(calc(100% + 20px)); transition: transform var(--dur-med) var(--ease-out); visibility: hidden; }
.callbar[data-kit-on] { transform: none; visibility: visible; }
.callbar a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 50px; padding: 0 16px; border-radius: var(--radius-s); font: 600 1rem/1 var(--font-ui); text-decoration: none; }
.callbar__call { color: #fff; box-shadow: inset 0 0 0 2px rgb(255 255 255 / .35); }
.callbar__cta { background: #fff; color: #111; justify-content: space-between !important; --mark-circle: #111; --mark-arrow: #fff; }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .mark, .btn, .strip__photo img { transition: none; }
}