/* 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.
   Growth Shift AI, "growth bars": flat color blocks, white sticker cards (a 2px navy outline and a hard navy offset
   shadow, carried by the shadow tokens), the logo's three rising bars. No gradient, no glass, no blur. */

/* ---------- basics ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-padding-top: 104px; }
body { overflow-wrap: break-word; }
main { display: block; overflow-x: clip; }
img, video { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.block--blue :focus-visible, .block--navy :focus-visible, .site-footer :focus-visible { outline-color: var(--c-paper); }
.block--blue .sticker :focus-visible, .block--navy .sticker :focus-visible, .site-footer .sticker :focus-visible { outline-color: var(--c-brand); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.skip { padding: 10px 16px; border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-m); font: 700 var(--fs-ui)/1 var(--font-ui); text-decoration: none; }

.wrap { width: min(var(--max-w), 100% - 2 * var(--gutter)); margin-inline: auto; }

/* Blocks: the page reads as a run of the logo's colors. */
.block { position: relative; padding-block: var(--section-y); --block-c: var(--c-paper); background: var(--block-c); color: var(--c-ink); }
.block--blue { --block-c: var(--c-brand); color: var(--c-on-brand); }
.block--teal { --block-c: var(--c-teal); }
.block--green { --block-c: var(--c-green); }
.block--navy { --block-c: var(--c-ink); color: var(--c-on-brand); }
.block--sky { --block-c: var(--c-sky); }
.block--aqua { --block-c: var(--c-aqua); }
.block--mint { --block-c: var(--c-mint); }
.block--white { --block-c: var(--c-paper); }

/* A block's edge in three steps rising from left to right, like the logo's bars: the lowest third flat, the middle
   one step up, the right two. --step-color is the next (or the previous) block's color. */
.block--step-bottom, .block--step-top { --step: 28px; }
.block--step-bottom { padding-bottom: calc(var(--section-y) + 2 * var(--step)); }
.block--step-bottom::before, .block--step-bottom::after { content: ''; position: absolute; bottom: -1px; z-index: 1; background: var(--step-color, var(--c-paper)); border-radius: var(--radius-l) 0 0 0; pointer-events: none; }
.block--step-bottom::before { left: 33.333%; width: 33.334%; height: calc(var(--step) + 1px); }
.block--step-bottom::after { left: 66.666%; right: 0; height: calc(2 * var(--step) + 1px); }
.block--step-top { border-top: calc(2 * var(--step)) solid var(--step-color, var(--c-paper)); background-clip: padding-box; }
.block--step-top::before, .block--step-top::after { content: ''; position: absolute; background: var(--block-c); border-radius: var(--radius-l) 0 0 0; pointer-events: none; }
.block--step-top::before { left: 33.333%; width: 33.334%; top: calc(-1 * var(--step)); height: calc(var(--step) + 1px); }
.block--step-top::after { left: 66.666%; right: 0; top: calc(-2 * var(--step)); height: calc(2 * var(--step) + 1px); }
@media (max-width: 699px) { .block--step-bottom, .block--step-top { --step: 14px; } }

/* The section head: a headline and at most one line. No label above the headline, ever. */
.section-head { max-width: 760px; margin-bottom: var(--space-5); }
.section-head__title { font-size: var(--fs-h2); }
.section-head__line { max-width: 40em; margin: var(--space-3) 0 0; font-size: var(--fs-body); }
.section-head--center { margin-inline: auto; text-align: center; }
.section-head--center .section-head__line { margin-inline: auto; }

/* Stickers, frames and chips. */
.sticker { background: var(--c-paper); color: var(--c-ink); border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
.sticker--m { border-radius: var(--radius-m); box-shadow: var(--shadow-m); }
a.sticker { text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
a.sticker:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lift); }
a.sticker:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }
.frame { position: relative; overflow: hidden; border-radius: var(--radius-l); box-shadow: var(--shadow-l); background: var(--c-ink); isolation: isolate; }
.frame > video, .frame > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.chip { display: inline-flex; align-items: center; padding: 5px 12px; border: 2px solid var(--c-ink); border-radius: 999px; background: var(--c-paper); color: var(--c-ink); font: 600 var(--fs-small)/1.2 var(--font-ui); white-space: nowrap; }
.chip--green { background: var(--c-green); }
.chip--teal { background: var(--c-teal); }
.chip--sky { background: var(--c-sky); }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55em; min-height: 52px; padding: 0.7em 1.35em; border: 0; border-radius: var(--radius-m); font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--fs-ui) * 1.0625); line-height: 1.15; text-align: center; text-decoration: none; cursor: pointer; box-shadow: var(--shadow-m); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.btn--main { background: var(--c-green); color: var(--c-ink); }
.btn--ghost { background: var(--c-paper); color: var(--c-ink); }
.btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lift); }
.btn:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }
.btn__arrow { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.btn:hover .btn__arrow { transform: translateX(3px); }

/* The line under every main button: each part after a small check drawn in CSS. */
.fear { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 4px 18px; margin: 12px 0 0; font-family: var(--font-ui); font-size: var(--fs-small); font-weight: 600; line-height: 1.4; }
.fear span { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; }
.fear span::before { content: ''; flex: none; width: 6px; height: 11px; margin-top: -3px; border: solid currentColor; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }

/* ---------- the stop icon: a navy round button with a white outline, top right of its part's media ---------- */
.stop { position: absolute; top: 14px; right: 14px; z-index: 6; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--c-ink); color: var(--c-on-brand); box-shadow: 0 0 0 2px var(--c-paper); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.stop:hover { transform: scale(1.07); }
.stop svg { display: block; width: 16px; height: 16px; }
.stop .stop__play, .stop[aria-pressed="true"] .stop__pause { display: none; }
.stop[aria-pressed="true"] .stop__play { display: block; }

/* ---------- the header: a white sticker bar floating over the top of the first block ---------- */
.site-header { position: sticky; top: 14px; z-index: 50; display: flex; align-items: center; gap: 16px; width: min(var(--max-w), 100% - 2 * var(--gutter)); height: 72px; margin: 14px auto -86px; padding: 0 12px 0 20px; background: var(--c-paper); color: var(--c-ink); border-radius: var(--radius-l); box-shadow: var(--shadow-m); }
.site-header__logo { flex: none; display: flex; align-items: center; border-radius: var(--radius-s); }
.site-header__logo img { width: auto; height: 46px; }
.site-header__nav { flex: 1; display: flex; justify-content: center; min-width: 0; }
.nav__list { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__item a { position: relative; display: block; padding: 10px 13px; border-radius: var(--radius-s); color: var(--c-ink); font: 600 var(--fs-ui)/1.2 var(--font-ui); text-decoration: none; white-space: nowrap; transition: background-color var(--dur-fast); }
.nav__item a:hover { background: var(--c-sky); }
.nav__item a[aria-current="page"]::after { content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px; height: 3px; border-radius: 3px; background: var(--c-green); }
.nav__cta { display: none; }
.site-header__cta { flex: none; min-height: 48px; padding: 0.55em 1.15em; }
.site-header__cta-short, .site-header__menu { display: none; }
@media (max-width: 1099px) {
  .site-header__cta .btn__arrow { display: none; }
  .nav__item a { padding-inline: 9px; }
  .nav__item a[aria-current="page"]::after { left: 9px; right: 9px; }
}
@media (max-width: 899px) {
  .site-header { height: 60px; margin-bottom: -74px; padding: 0 8px 0 14px; gap: 8px; }
  .site-header__logo { margin-right: auto; }
  .site-header__logo img { height: 36px; }
  .site-header__cta { order: 2; min-height: 44px; padding: 0.45em 1em; font-size: var(--fs-ui); }
  .site-header__cta-long { display: none; }
  .site-header__cta-short { display: inline; }
  .site-header__menu { order: 3; position: relative; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: var(--radius-m); background: var(--c-sky); color: var(--c-ink); box-shadow: 0 0 0 2px var(--c-ink); cursor: pointer; }
  .site-header__bars, .site-header__bars::before, .site-header__bars::after { display: block; width: 20px; height: 2.5px; border-radius: 2px; background: currentColor; transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast); }
  .site-header__bars { position: relative; }
  .site-header__bars::before, .site-header__bars::after { content: ''; position: absolute; left: 0; }
  .site-header__bars::before { top: -6.5px; }
  .site-header__bars::after { top: 6.5px; }
  .site-header__menu[aria-expanded="true"] .site-header__bars { background-color: transparent; }
  .site-header__menu[aria-expanded="true"] .site-header__bars::before { transform: translateY(6.5px) rotate(45deg); }
  .site-header__menu[aria-expanded="true"] .site-header__bars::after { transform: translateY(-6.5px) rotate(-45deg); }
  .site-header__nav { position: absolute; top: calc(100% + 10px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; padding: 12px; background: var(--c-paper); border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
  .site-header[data-open] .site-header__nav { display: flex; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item a { padding: 12px 12px; font: 800 var(--fs-h3)/1.15 var(--font-display); letter-spacing: -0.01em; }
  .nav__item a[aria-current="page"]::after { left: 12px; right: auto; width: 48px; bottom: 6px; }
  .nav__cta { display: flex; width: 100%; margin-top: 10px; }
}

/* ---------- the clients picker ---------- */
.picker { padding: 20px 22px 16px; text-align: left; }
.picker__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.picker__legend { padding: 0; margin-bottom: 12px; font: 700 var(--fs-ui)/1.3 var(--font-ui); color: var(--c-ink); }
.picker__choices { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.picker__choice { position: relative; display: block; cursor: pointer; }
.picker__choice input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.picker__choice span { display: grid; place-items: center; height: 52px; border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-m); font: 800 var(--fs-h3)/1 var(--font-display); letter-spacing: -0.02em; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast); }
.picker__choice:hover span { transform: translate(-2px, -2px); box-shadow: var(--shadow-lift); }
.picker__choice input:checked + span { background: var(--c-green); transform: translate(2px, 2px); box-shadow: var(--shadow-press); }
.picker__choice input:focus-visible + span { outline: 3px solid var(--c-brand); outline-offset: 3px; }
.picker__go { width: 100%; min-height: 56px; margin-top: 14px; }
.picker .fear { justify-content: center; color: var(--c-ink); }
.picker--compact { padding: 0; }
.picker--compact .picker__legend { width: 100%; text-align: center; }
.picker--compact .picker__choice span { height: 48px; }

/* ---------- the exit popup: a white sticker on a navy backdrop ---------- */
.exit { width: min(560px, 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::backdrop { background: color-mix(in srgb, var(--c-ink) 80%, transparent); }
.exit__in { position: relative; padding: 30px 30px 24px; text-align: center; opacity: 0; transform: translateY(18px); transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-fast) var(--ease-out); }
.exit[data-kit-on] .exit__in { opacity: 1; transform: none; }
.exit__bars { display: flex; align-items: flex-end; justify-content: center; gap: 7px; height: 64px; margin-bottom: 18px; }
.exit__bars i { width: 24px; border-radius: 9px 9px 0 0; box-shadow: 0 0 0 2px var(--c-ink); }
.exit__bars i:nth-child(1) { height: 46%; background: var(--c-brand); }
.exit__bars i:nth-child(2) { height: 72%; background: var(--c-teal); }
.exit__bars i:nth-child(3) { height: 100%; background: var(--c-green); }
.exit__title { max-width: 15em; margin: 0 auto; font-size: calc(var(--fs-h3) * 1.35); }
.exit__line { max-width: 30em; margin: 12px auto 20px; color: var(--c-ink-soft); }
.exit__close { position: absolute; top: 14px; right: 14px; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--c-sky); box-shadow: 0 0 0 2px var(--c-ink); cursor: pointer; transition: transform var(--dur-fast) var(--ease-out); }
.exit__close::before, .exit__close::after { content: ''; position: absolute; left: 50%; top: 50%; width: 18px; height: 2.5px; margin: -1.25px 0 0 -9px; border-radius: 2px; background: var(--c-ink); transform: rotate(45deg); }
.exit__close::after { transform: rotate(-45deg); }
.exit__close:hover { transform: rotate(90deg); }
html[data-kit-modal] { overflow: hidden; }
@media (max-width: 560px) { .exit__in { padding: 24px 18px 20px; } }

/* ---------- the call bar on the phone ---------- */
.callbar { display: none; }
@media (max-width: 899px) {
  .callbar { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 40; display: flex; align-items: center; gap: 8px; padding: 8px; background: var(--c-paper); border-radius: var(--radius-l); box-shadow: var(--shadow-m); transform: translateY(calc(100% + 24px)); transition: transform var(--dur-med) var(--ease-out); }
  .callbar[data-kit-on] { transform: none; }
  .callbar__mail, .callbar__call { flex: none; display: grid; place-items: center; min-height: 48px; padding: 0 14px; border-radius: var(--radius-m); color: var(--c-brand-text); font: 700 var(--fs-ui)/1 var(--font-ui); text-decoration: none; }
  .callbar__mail:hover, .callbar__call:hover { background: var(--c-sky); }
  .callbar__cta { flex: 1; min-height: 48px; padding: 0.5em 0.8em; font-size: var(--fs-ui); }
}

/* ---------- the footer: a navy block ---------- */
.site-footer { padding: var(--space-6) 0 var(--space-4); background: var(--c-ink); color: var(--c-on-brand); }
.site-footer__in { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: var(--space-5) var(--space-4); }
.site-footer__logo { display: inline-block; padding: 10px 14px; border-radius: var(--radius-m); background: var(--c-paper); box-shadow: 4px 4px 0 0 var(--c-brand); transition: transform var(--dur-fast) var(--ease-out); }
.site-footer__logo:hover { transform: translate(-2px, -2px); }
.site-footer__logo img { width: auto; height: 44px; }
.site-footer__line { max-width: 18em; margin: 18px 0 0; font: 800 var(--fs-h3)/1.15 var(--font-display); letter-spacing: -0.015em; text-wrap: balance; }
.site-footer__title { margin: 0 0 12px; font: 700 var(--fs-small)/1.2 var(--font-ui); color: var(--c-green); }
.site-footer__col ul, .site-footer__legal ul { margin: 0; padding: 0; list-style: none; }
.site-footer__col li + li { margin-top: 8px; }
.site-footer a { color: var(--c-on-brand); text-decoration: none; text-underline-offset: 3px; }
.site-footer a:not(.site-footer__logo):hover { text-decoration: underline; }
.site-footer__col a, .site-footer__mail { font: 600 var(--fs-ui)/1.4 var(--font-ui); }
.site-footer__contact address { font-style: normal; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; padding-top: var(--space-4); border-top: 1px solid color-mix(in srgb, var(--c-on-brand) 20%, transparent); font: 500 var(--fs-small)/1.4 var(--font-ui); }
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 899px) {
  .site-footer { padding-bottom: calc(var(--space-4) + 84px); }
  .site-footer__in { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .site-footer__brand, .site-footer__contact { grid-column: 1 / -1; }
}

/* ==================== section patterns (their look; each page places and sizes them) ==================== */

/* ---------- the home header (kit rotate) ---------- */
/* The kit's own rotate CSS (kit.md), kept as it is. */
[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; }

/* The h1 is the live line alone, one clean sentence. Its aria-hidden sibling (.hero__sizers) holds every field's line,
   invisible, in the same grid cell of the words' column: the tallest keeps the height, so nothing below ever moves. */
.hero__words { display: grid; grid-template-columns: minmax(0, 1fr); }
.hero__title, .hero__sizers { grid-area: 1 / 1; color: var(--c-on-brand); font-family: var(--font-display); font-weight: var(--fw-display); font-size: var(--fs-display); line-height: var(--lh-tight); letter-spacing: var(--tracking-display); text-wrap: balance; }
.hero__sizers { display: grid; visibility: hidden; }
.hero__variant { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: space-between; }
.hero__l1, .hero__l2, .hero__l3 { display: block; }
.hero__l2 { padding: 0.07em 0 0.11em; }
/* The changing word in its sticker: the word shifts up out of it and the next one up into it (--kit-swap, and --dir
   from the page's script), clipped inside the sticker; the sticker takes the slide's color. */
.hero__sticker { display: inline-block; max-width: calc(100% - 0.32em); padding: 0.015em 0.22em 0.06em; border-radius: var(--radius-m); background: var(--c-green); color: var(--c-ink); box-shadow: var(--shadow-m); overflow: clip; baseline-source: last; transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), width var(--dur-med) var(--ease-out); }
.hero__word { display: inline-block; transform: translateY(calc(var(--kit-swap, 0) * var(--dir, -1) * 0.35em)); opacity: calc(1 - var(--kit-swap, 0)); }
.hero:has(.hero__slide[data-color="teal"][data-kit-on]) .hero__variant--live .hero__sticker { background: var(--c-teal); }
.hero:has(.hero__slide[data-color="white"][data-kit-on]) .hero__variant--live .hero__sticker { background: var(--c-paper); color: var(--c-brand-text); }
.hero__line { color: var(--c-on-brand); font-size: calc(var(--fs-body) * 1.15); line-height: 1.45; }
.hero__line strong { font-weight: 600; }
/* The stage: the frame is the tallest bar, two shorter blocks step up to its left. */
.hero__stage { position: relative; }
.hero__frame { z-index: 3; }
.hero__bar { position: absolute; bottom: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; box-shadow: var(--shadow-l); }
.hero__bar--1 { z-index: 1; background: var(--c-teal); }
.hero__bar--2 { z-index: 2; background: var(--c-green); }
.hero__slide video { object-position: var(--pos, 50% 50%); }
/* The booking card: it rises 10px into place once the picture is half in (the slide's --kit-in, a spring). */
.hero__card { position: absolute; z-index: 3; display: flex; align-items: center; gap: 12px; padding: 12px 14px 12px 12px; transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); opacity: clamp(0, calc(var(--kit-in, 1) * 2.5), 1); }
.hero__check { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 2px var(--c-ink); }
.hero__check::after { content: ''; position: absolute; left: 12px; top: 7px; width: 8px; height: 15px; border: solid var(--c-ink); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.hero__card-text { min-width: 0; }
.hero__card-text b { display: block; font: 700 var(--fs-ui)/1.25 var(--font-ui); color: var(--c-ink); }
.hero__card-text small { display: block; margin-top: 2px; font: 500 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
/* The forecast card: one for every slide; only the number and unit change, shifting up. */
.hero__forecast { position: absolute; z-index: 4; padding: 14px 16px 16px; }
.hero__fc-label { margin: 0; font: 700 var(--fs-small)/1.2 var(--font-ui); color: var(--c-ink); }
.hero__fc-figure { display: grid; margin: 2px 0 -4px; padding: 6px 0 4px; overflow: clip; } /* the padding holds the number's whole type box inside the clip */
.hero__fc-val { grid-area: 1 / 1; display: flex; align-items: center; gap: 10px; opacity: 0; transform: translateY(0.45em); transition: transform var(--dur-med) var(--ease-spring), opacity var(--dur-fast) var(--ease-out); }
.hero__fc-val b { font: 800 2.6rem/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-brand-text); }
.hero__fc-val span { font: 600 var(--fs-small)/1.2 var(--font-ui); color: var(--c-ink); }
.hero:not(:has(.hero__slide[data-kit-on])) .hero__fc-val:first-child,
.hero:has(.hero__slide[data-kit-word="business"][data-kit-on]) .hero__fc-val[data-for="business"],
.hero:has(.hero__slide[data-kit-word="painting company"][data-kit-on]) .hero__fc-val[data-for="painting company"],
.hero:has(.hero__slide[data-kit-word="orthodontic practice"][data-kit-on]) .hero__fc-val[data-for="orthodontic practice"],
.hero:has(.hero__slide[data-kit-word="concrete company"][data-kit-on]) .hero__fc-val[data-for="concrete company"],
.hero:has(.hero__slide[data-kit-word="chimney company"][data-kit-on]) .hero__fc-val[data-for="chimney company"] { opacity: 1; transform: none; }
.hero:has(.hero__slide[data-kit-word="business"][data-prev]) .hero__fc-val[data-for="business"],
.hero:has(.hero__slide[data-kit-word="painting company"][data-prev]) .hero__fc-val[data-for="painting company"],
.hero:has(.hero__slide[data-kit-word="orthodontic practice"][data-prev]) .hero__fc-val[data-for="orthodontic practice"],
.hero:has(.hero__slide[data-kit-word="concrete company"][data-prev]) .hero__fc-val[data-for="concrete company"],
.hero:has(.hero__slide[data-kit-word="chimney company"][data-prev]) .hero__fc-val[data-for="chimney company"] { transform: translateY(-0.45em); }
.hero__fc-by { margin: 2px 0 12px; font: 500 var(--fs-small)/1.2 var(--font-ui); color: var(--c-ink-soft); }
/* 12 small bars: the set-up stub dashed, then blue (2 to 5), teal (6 to 9), green (10 to 12); they rise once. */
.hero__fc-bars { display: flex; align-items: flex-end; gap: 4px; height: 56px; }
.hero__fc-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--c-brand); transform-origin: 50% 100%; animation: hero-rise var(--dur-med) var(--ease-spring) calc(300ms + var(--i) * 60ms) both; }
.hero__fc-bars i:nth-child(n+6) { background: var(--c-teal); }
.hero__fc-bars i:nth-child(n+10) { background: var(--c-green); }
.hero__fc-bars i:first-child { background: none; border: 1.5px dashed var(--c-ink-soft); border-bottom: 0; }
@keyframes hero-rise { from { transform: scaleY(0); } }

/* ---------- the free plan tour: tabs as rising bars (kit tour) ---------- */
.tour__tabs { display: flex; align-items: flex-end; gap: 12px; }
.tour__tab { position: relative; container-type: inline-size; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 12px 26px; border: 0; border-radius: var(--radius-l) var(--radius-l) 0 0; text-align: left; cursor: pointer; box-shadow: 0 0 0 2px var(--c-ink); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), background-color var(--dur-fast); }
/* the others at 85% (the fill only, so their words keep their contrast), the selected one whole and with its shadow */
.tour__tab--1 { background: color-mix(in srgb, var(--c-brand) 88%, var(--c-sky)); color: var(--c-on-brand); }
.tour__tab--2 { background: color-mix(in srgb, var(--c-teal) 85%, var(--c-sky)); color: var(--c-ink); }
.tour__tab--3 { background: color-mix(in srgb, var(--c-green) 85%, var(--c-sky)); color: var(--c-ink); }
.tour__tab--1[aria-selected="true"] { background: var(--c-brand); }
.tour__tab--2[aria-selected="true"] { background: var(--c-teal); }
.tour__tab--3[aria-selected="true"] { background: var(--c-green); }
.tour__tab[aria-selected="true"] { box-shadow: var(--shadow-l); }
.tour__tab:hover { transform: translateY(-4px); }
.tour__tab:focus-visible { outline-offset: 4px; }
.tour__tab-title { font: 800 1.15rem/1.1 var(--font-display); font-size: max(13px, min(1.15rem, 100cqi / 6.1)); letter-spacing: -0.01em; text-wrap: balance; } /* 1.15rem, or less where a bar is too narrow for a title's last two words */
.tour__tab-line { font: 500 var(--fs-small)/1.3 var(--font-ui); text-wrap: pretty; }
.tour__fill { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 6px; border-radius: 3px; background: var(--c-ink); transform-origin: 0 50%; transform: scaleX(var(--kit-fill, 0)); }
.tour__tab:not([aria-selected="true"]) .tour__fill { visibility: hidden; }
.tour__stage { position: relative; }
.tour__wash { position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--c-brand-light) 72%, transparent); }
.tour__panel { position: absolute; z-index: 2; border-radius: var(--radius-m); }
.tour__panel > .scene { width: 100%; height: 100%; }
.tour__panel:focus-visible { outline-offset: -3px; }
.tour__go { display: flex; flex-direction: column; align-items: flex-start; }

/* ---------- the steps lit by a chat (kit chat) ---------- */
.steps__list { display: grid; gap: 18px; margin: 0; padding: 0; list-style: none; }
.steps__item { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 16px; padding: 20px 22px; transition: transform var(--dur-med) var(--ease-spring), box-shadow var(--dur-fast) var(--ease-out); }
.steps__item[aria-current="step"] { transform: translate(-3px, -3px); box-shadow: var(--shadow-lift), 0 0 0 3px var(--c-ink); }
.steps__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--c-paper); box-shadow: 0 0 0 2px var(--c-ink); font: 800 var(--fs-h3)/1 var(--font-display); transition: background-color var(--dur-fast) var(--ease-out); }
.steps__item[aria-current="step"] .steps__num { background: var(--c-green); }
.steps__top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding-top: 8px; }
.steps__title { font-size: var(--fs-h3); }
.steps__text { margin: 8px 0 0; color: var(--c-ink-soft); }
.steps__stage { position: relative; }
/* The phone: a white sticker with 34px corners, the chat app's bar, then the messages from the bottom up. */
.phone { position: absolute; z-index: 2; display: flex; flex-direction: column; padding: 10px; border-radius: 34px; }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 6px 8px 10px; }
.phone__mark { flex: none; display: flex; align-items: flex-end; justify-content: center; gap: 3px; width: 38px; height: 38px; padding: 10px 0; border-radius: 50%; background: var(--c-sky); box-shadow: 0 0 0 1.5px var(--c-ink); }
.phone__mark i { width: 5px; border-radius: 2px 2px 0 0; }
.phone__mark i:nth-child(1) { height: 45%; background: var(--c-brand); }
.phone__mark i:nth-child(2) { height: 72%; background: var(--c-teal); }
.phone__mark i:nth-child(3) { height: 100%; background: var(--c-green); }
.phone__who { min-width: 0; }
.phone__who b { display: block; font: 700 var(--fs-small)/1.2 var(--font-ui); }
.phone__who small { display: block; font: 500 calc(var(--fs-small) * 0.9)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.phone__chat { position: relative; flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 12px 10px; overflow: hidden; border-radius: 24px; background: var(--c-paper-alt); box-shadow: inset 0 0 0 1.5px var(--c-line); }
/* Each message slides up from the bottom as it lands (its --kit-in), pushing the others up; all fade as the loop ends. */
.msg { flex: none; max-width: 86%; margin: 0 0 calc((var(--kit-in, 1) - 1) * var(--msg-h, 52px)); padding: 9px 12px; border-radius: 16px; font: 500 var(--fs-small)/1.35 var(--font-ui); opacity: calc(var(--kit-in, 1) * (1 - var(--kit-out, 0))); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.msg--bot { --msg-h: 64px; align-self: flex-start; background: var(--c-paper); color: var(--c-ink); box-shadow: 0 0 0 1.5px var(--c-ink); border-bottom-left-radius: 6px; }
.msg--you { --msg-h: 40px; align-self: flex-end; background: var(--c-brand); color: var(--c-on-brand); border-bottom-right-radius: 6px; }
.msg--choices { --msg-h: 40px; align-self: flex-start; display: flex; flex-wrap: wrap; gap: 6px; padding: 0; }
.msg--choices span { padding: 7px 13px; border-radius: 999px; background: var(--c-paper); box-shadow: 0 0 0 1.5px var(--c-ink); font-weight: 700; line-height: 1; }
.msg--choices span[data-kit-on] { background: var(--c-green); }
.msg--typing { --msg-h: 38px; align-self: flex-start; display: flex; gap: 4px; padding: 13px 14px; background: var(--c-paper); box-shadow: 0 0 0 1.5px var(--c-ink); border-bottom-left-radius: 6px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink-soft); animation: msg-dot 900ms var(--ease-in-out) infinite; }
.msg--typing i:nth-child(2) { animation-delay: 150ms; }
.msg--typing i:nth-child(3) { animation-delay: 300ms; }
@keyframes msg-dot { 0%, 60%, 100% { transform: none; opacity: 0.45; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg--scan { --msg-h: 70px; display: grid; gap: 8px; min-width: 72%; }
.msg__track { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: var(--c-sky); box-shadow: 0 0 0 1px var(--c-line); }
.msg__track i { display: block; height: 100%; border-radius: inherit; background: var(--c-green); transform-origin: 0 50%; transform: scaleX(var(--kit-fill, 0)); }
.msg--plan { --msg-h: 176px; align-self: stretch; max-width: none; display: grid; gap: 2px; padding: 12px 14px; background: var(--c-paper); color: var(--c-ink); border-radius: var(--radius-m); box-shadow: var(--shadow-m); }
.plan-card__k { font-weight: 700; color: var(--c-ink-soft); }
.plan-card__big { font-weight: 600; line-height: 1.25; }
.plan-card__big b { margin-right: 4px; font: 800 2rem/1 var(--font-display); letter-spacing: var(--tracking-display); color: var(--c-brand-text); }
.plan-card__by, .plan-card__from { color: var(--c-ink-soft); }
.plan-card__bars { display: flex; align-items: flex-end; gap: 3px; height: 44px; margin: 8px 0 6px; }
.plan-card__bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--c-brand); }
.plan-card__bars i:nth-child(n+5) { background: var(--c-teal); }
.plan-card__bars i:nth-child(n+9) { background: var(--c-green); }
.plan-card__bars i:first-child { background: none; border: 1.5px dashed var(--c-ink-soft); border-bottom: 0; }

/* ---------- the calculator (kit worth and year) ---------- */
.worth__box { display: grid; gap: 32px; align-items: stretch; }
.worth__inputs { display: flex; flex-direction: column; justify-content: space-between; gap: 24px; padding: 28px 28px 26px; }
.worth__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; column-gap: 12px; }
.worth__label { font: 700 var(--fs-ui)/1.3 var(--font-ui); }
.worth__out { font: 800 calc(var(--fs-h3) * 1.15)/1 var(--font-display); letter-spacing: -0.02em; color: var(--c-brand-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.worth__scale { grid-column: 1 / -1; display: flex; justify-content: space-between; font: 600 var(--fs-small)/1 var(--font-ui); color: var(--c-ink-soft); }
.worth__hint { margin: 0; padding: 12px 14px; border-radius: var(--radius-m); background: var(--c-paper-alt); font-size: var(--fs-small); }
/* the sliders: a 28px green thumb with the navy outline; the track's filled part blue (--kit-fill, from the kit) */
.worth__range { grid-column: 1 / -1; width: 100%; height: 32px; margin: 10px 0 4px; background: transparent; cursor: pointer; -webkit-appearance: none; appearance: none; }
.worth__range::-webkit-slider-runnable-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--c-brand) var(--kit-fill, 0%), var(--c-paper-alt) var(--kit-fill, 0%)); box-shadow: 0 0 0 1.5px var(--c-ink); }
.worth__range::-webkit-slider-thumb { width: 28px; height: 28px; margin-top: -9px; border: 0; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 2px var(--c-ink), 2px 2px 0 0 var(--c-ink); -webkit-appearance: none; appearance: none; }
.worth__range::-moz-range-track { height: 10px; border-radius: 999px; background: var(--c-paper-alt); box-shadow: 0 0 0 1.5px var(--c-ink); }
.worth__range::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--c-brand); }
.worth__range::-moz-range-thumb { width: 28px; height: 28px; border: 0; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 2px var(--c-ink), 2px 2px 0 0 var(--c-ink); }
.worth__range:focus-visible { outline: none; }
.worth__range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 2px var(--c-ink), 0 0 0 5px var(--c-brand); }
.worth__range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 2px var(--c-ink), 0 0 0 5px var(--c-brand); }
/* The result: the visitor's year drawn as the logo's mark. Three rising bars, the new business by month 4, 8 and 12
   (blue, teal, green, as in the logo), under the logo's navy arrow. Their height follows the year's size (the kit's
   --kit-size, a log scale; --bf is the third bar's share of the stage), so the bars grow and the arrow climbs as the
   numbers grow, and sink as they fall. It builds once (the kit's year: --kit-year, a month every 380 ms, each bar
   stepping up from the ground), then only a slider changes it, at once. The arrow is drawn by pages\home.js. */
.worth__result { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 20px; padding: 28px 30px 30px; }
.worth__head { display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; align-content: start; min-width: 0; }
.worth__total { justify-self: stretch; font: 800 min(4.2rem, 13cqi)/1 var(--font-display); letter-spacing: var(--tracking-display); font-variant-numeric: tabular-nums; white-space: nowrap; }
.worth__by { margin-top: 8px; font: 700 calc(var(--fs-ui) * 1.0625)/1.3 var(--font-ui); }
.worth__facts { display: grid; gap: 4px; margin: 16px 0 0; font: 500 var(--fs-small)/1.45 var(--font-ui); color: var(--c-ink-soft); }
.worth__facts b { font: 800 1.1875rem/1.2 var(--font-display); letter-spacing: -0.01em; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.worth__year { --b-min: 0.12; --b-span: 0.66; --b-sat: 0.8; --bars-l: 8%; --bar-w: 18%; --bar-g: 10%; --y: var(--kit-year, 1); --bf: calc(var(--b-min) + var(--b-span) * min(1, var(--kit-size, 0.5) / var(--b-sat))); display: flex; flex-direction: column; min-height: 0; }
.worth__stage { position: relative; flex: 1 1 auto; min-height: 240px; overflow: hidden; border-bottom: 3px solid var(--c-ink); border-radius: var(--radius-m) var(--radius-m) 0 0; background: var(--c-sky); }
.worth__bar { position: absolute; bottom: 0; width: var(--bar-w); border-radius: var(--radius-s) var(--radius-s) 0 0; box-shadow: 0 0 0 2px var(--c-ink), 5px 0 0 2px var(--c-ink); }
.worth__bar--1 { left: var(--bars-l); background: var(--c-brand); height: calc(var(--bf) * 100% * (clamp(0, 12 * var(--y), 1) / 12 + clamp(0, var(--y) - 1 / 12, 3 / 12))); }
.worth__bar--2 { left: calc(var(--bars-l) + var(--bar-w) + var(--bar-g)); background: var(--c-teal); height: calc(var(--bf) * 100% * (clamp(0, 12 * var(--y) - 4, 1) * 5 / 12 + clamp(0, var(--y) - 5 / 12, 3 / 12))); }
.worth__bar--3 { left: calc(var(--bars-l) + 2 * (var(--bar-w) + var(--bar-g))); background: var(--c-green); height: calc(var(--bf) * 100% * (clamp(0, 12 * var(--y) - 8, 1) * 9 / 12 + clamp(0, var(--y) - 9 / 12, 3 / 12))); }
/* the arrow: a canvas the page's script draws in --arrow-c (a bitmap, so it stays exactly as drawn until the numbers move) */
.worth__arrow { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; --arrow-c: var(--c-ink); }
/* under each bar, its month and what it holds by then (the figure lands with its bar) */
.worth__marks { position: relative; height: 3.5rem; }
.worth__mark { position: absolute; top: 10px; display: grid; grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 3px; width: calc(var(--bar-w) + var(--bar-g) * 0.9); margin: 0; transform: translateX(-50%); font: 600 0.8125rem/1.2 var(--font-ui); color: var(--c-ink-soft); white-space: nowrap; }
.worth__mark b { justify-self: stretch; font: 800 1.125rem/1.1 var(--font-display); letter-spacing: -0.01em; text-align: center; color: var(--c-ink); font-variant-numeric: tabular-nums; }
.worth__mark--1 { left: calc(var(--bars-l) + var(--bar-w) / 2); }
.worth__mark--2 { left: calc(var(--bars-l) + var(--bar-w) * 1.5 + var(--bar-g)); }
.worth__mark--3 { left: calc(var(--bars-l) + var(--bar-w) * 2.5 + 2 * var(--bar-g)); }
.worth__mark--1 b { opacity: clamp(0, 12 * var(--y), 1); }
.worth__mark--2 b { opacity: clamp(0, 12 * var(--y) - 4, 1); }
.worth__mark--3 b { opacity: clamp(0, 12 * var(--y) - 8, 1); }
.worth__go { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
.worth__note { flex: 1 1 14em; margin: 0; font-size: var(--fs-small); color: var(--c-ink-soft); }

/* ---------- outcome cards ---------- */
.outcomes__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; }
.outcome { color: var(--c-on-brand); }
.outcome--blue { box-shadow: 0 0 0 2px var(--c-brand), 6px 6px 0 0 var(--c-brand); }
.outcome--teal { box-shadow: 0 0 0 2px var(--c-teal), 6px 6px 0 0 var(--c-teal); }
.outcome--green { box-shadow: 0 0 0 2px var(--c-green), 6px 6px 0 0 var(--c-green); }
.outcome--white { box-shadow: 0 0 0 2px var(--c-paper), 6px 6px 0 0 var(--c-paper); }
.outcome__shade { position: absolute; inset: 50% 0 0; z-index: 1; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-ink) 88%, transparent) 55%); pointer-events: none; }
.outcome__scene { position: absolute; z-index: 2; left: 20px; top: 20px; width: min(374px, calc(100% - 40px)); }
.outcome__words { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 26px; }
.outcome__title { color: var(--c-on-brand); font-size: calc(var(--fs-h3) * 1.3); }
.outcome__text { max-width: 34em; margin: 10px 0 14px; color: color-mix(in srgb, var(--c-on-brand) 90%, transparent); }
.outcome__link { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--fs-ui)/1.2 var(--font-ui); color: var(--c-on-brand); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }

/* ---------- compare (kit compare) ---------- */
.compare { position: relative; overflow: hidden; isolation: isolate; background: var(--c-ink); }
.compare__side { position: absolute; inset: 0; }
.compare__side--ours { clip-path: inset(0 0 0 calc(var(--kit-v, 0.55) * 100%)); }
.compare__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare__side--usual .compare__photo { filter: grayscale(1); }
.compare__side--usual::after { content: ''; position: absolute; inset: 0; background: color-mix(in srgb, var(--c-ink) 35%, transparent); }
.compare__tag { position: absolute; z-index: 2; top: 18px; padding: 7px 14px; border-radius: 999px; font: 700 var(--fs-small)/1.2 var(--font-ui); box-shadow: var(--shadow-m); }
.compare__side--usual .compare__tag { left: 18px; background: var(--c-paper); color: var(--c-ink-soft); }
.compare__side--ours .compare__tag { right: 18px; background: var(--c-green); color: var(--c-ink); }
.compare__cards { position: absolute; z-index: 2; bottom: 24px; display: grid; gap: 12px; width: min(330px, 38%); }
.compare__side--usual .compare__cards { left: 24px; }
.compare__side--ours .compare__cards { right: 24px; }
.compare__card { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--c-paper); box-shadow: var(--shadow-m); }
.compare__card b { display: block; font: 700 var(--fs-ui)/1.25 var(--font-ui); color: var(--c-ink); }
.compare__card small { display: block; margin-top: 2px; font: 500 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.compare__side--usual .compare__card b { color: var(--c-ink-soft); }
.compare__mark { position: relative; flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--c-green); box-shadow: 0 0 0 2px var(--c-ink); }
.compare__mark::after { content: ''; position: absolute; left: 10px; top: 5px; width: 6px; height: 12px; border: solid var(--c-ink); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.compare__mark--no { background: var(--c-line); box-shadow: 0 0 0 2px var(--c-ink-soft); }
.compare__mark--no::before, .compare__mark--no::after { content: ''; position: absolute; left: 50%; top: 50%; width: 12px; height: 2.5px; margin: -1.25px 0 0 -6px; border: 0; border-radius: 2px; background: var(--c-ink-soft); transform: rotate(45deg); }
.compare__mark--no::after { transform: rotate(-45deg); }
.compare__bars { display: flex; align-items: flex-end; gap: 4px; height: 28px; margin-top: 8px; }
.compare__bars i { width: 12px; height: var(--h); border-radius: 3px 3px 0 0; background: var(--c-green); box-shadow: 0 0 0 1.5px var(--c-ink); }
/* the range covers the box, invisible: a drag anywhere moves the line, and so do the keys */
.compare__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare__handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(var(--kit-v, 0.55) * 100%); width: 0; pointer-events: none; }
.compare__line { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--c-ink); box-shadow: 0 0 0 1px var(--c-paper); }
.compare__knob { position: absolute; top: var(--knob-y, 50%); left: 0; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--c-green); box-shadow: var(--shadow-m); }
.compare__knob::before, .compare__knob::after { content: ''; position: absolute; top: 50%; margin-top: -7px; border: 7px solid transparent; }
.compare__knob::before { left: 8px; border-left: 0; border-right: 9px solid var(--c-ink); }
.compare__knob::after { right: 8px; border-right: 0; border-left: 9px solid var(--c-ink); }
.compare__hint { position: absolute; top: calc(var(--knob-y, 50%) + 38px); left: 0; padding: 6px 12px; border-radius: 999px; background: var(--c-ink); color: var(--c-on-brand); font: 700 var(--fs-small)/1 var(--font-ui); box-shadow: 0 0 0 2px var(--c-paper); transform: translateX(-50%); transition: opacity var(--dur-med) var(--ease-out); }
.compare[data-kit-touched] .compare__hint { opacity: 0; }
.compare:has(.compare__range:focus-visible) .compare__knob { outline: 3px solid var(--c-brand); outline-offset: 3px; }
.promises { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin: 28px 0 0; padding: 0; list-style: none; }

/* ---------- who we help: tiles ---------- */
.tiles { display: grid; gap: 20px; }
.tile { position: relative; display: block; color: var(--c-on-brand); text-decoration: none; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.tile.frame:hover { transform: translate(-3px, -3px); box-shadow: var(--shadow-lift); }
.tile.frame:active { transform: translate(2px, 2px); box-shadow: var(--shadow-press); }
.tile__words { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 56px 20px 18px; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-ink) 88%, transparent) 55%); }
.tile__title { color: var(--c-on-brand); font-size: 1.4rem; line-height: 1.1; }
.tile__text { margin: 6px 0 0; font: 500 var(--fs-small)/1.4 var(--font-ui); color: color-mix(in srgb, var(--c-on-brand) 92%, transparent); }
.tile--more { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 22px; color: var(--c-ink); }
.tile--more .tile__words { position: static; padding: 0; background: none; }
.tile--more .tile__title { color: var(--c-ink); }
.tile--more .tile__text { color: var(--c-ink-soft); }
.tile__go { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--fs-ui)/1.2 var(--font-ui); color: var(--c-brand-text); }
.tile--more:hover .tile__go span { transform: translateX(3px); }
.tile__go span { transition: transform var(--dur-fast) var(--ease-out); }

/* ---------- FAQ and the founder card ---------- */
.faq__list { display: grid; gap: 14px; }
.faq__item summary { position: relative; display: block; padding: 20px 64px 20px 22px; border-radius: var(--radius-m); cursor: pointer; list-style: none; font: 800 var(--fs-h3)/1.2 var(--font-display); letter-spacing: -0.015em; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::before, .faq__item summary::after { content: ''; position: absolute; right: 24px; top: 50%; width: 18px; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--c-ink); transition: transform var(--dur-fast) var(--ease-out); }
.faq__item summary::after { transform: rotate(90deg); }
.faq__item[open] summary::after { transform: rotate(0deg); }
.faq__answer { padding: 0 22px 20px; }
.faq__answer p { max-width: 62ch; margin: 0; color: var(--c-ink-soft); }
.faq__answer a { color: var(--c-brand-text); font-weight: 600; }
.founder { display: grid; gap: 8px; padding: 26px 26px 24px; }
.founder__who { display: grid; justify-items: start; gap: 10px; margin-bottom: 8px; }
.founder__photo { display: block; width: 120px; height: 120px; overflow: hidden; border-radius: 50%; background: var(--c-sky); box-shadow: 0 0 0 2px var(--c-ink); }
.founder__photo img { width: 100%; height: 100%; object-fit: cover; }
.founder__name { margin: 0; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.founder__ask { margin: 0; font: 800 1.4rem/1.15 var(--font-display); letter-spacing: -0.015em; }
.founder__line { margin: 0; color: var(--c-ink-soft); }
.founder__mail { justify-self: start; margin-top: 6px; font: 700 var(--fs-body)/1.3 var(--font-ui); color: var(--c-brand-text); text-underline-offset: 3px; overflow-wrap: anywhere; }

/* ---------- the closing band ---------- */
.close__title { color: var(--c-on-brand); font-size: var(--fs-h2); }
.close__line { max-width: 32em; margin: 16px 0 28px; font-size: calc(var(--fs-body) * 1.1); }
.close__clip { object-position: 50% 45%; }

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__arrow, a.sticker, .stop, .picker__choice span, .exit__in, .exit__close, .callbar, .site-header__bars, .site-header__bars::before, .site-header__bars::after,
  .hero__sticker, .hero__fc-val, .tour__tab, .steps__item, .steps__num, .compare__hint, .tile, .tile__go span, .faq__item summary::before, .faq__item summary::after { transition: none; }
  .hero__fc-bars i, .msg--typing i { animation: none; }
}