/* 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. A page's own CSS only places and sizes its parts, with the tokens. */

/* ---------- base type and layout ---------- */
h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 700; color: var(--c-ink); letter-spacing: var(--track-display); line-height: var(--lh-tight); text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
a { color: var(--c-brand-text); text-underline-offset: 3px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.wrap { box-sizing: border-box; width: 100%; max-width: calc(var(--max-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
main { display: block; }
:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; }

/* ---------- bands and section heads ---------- */
.band { position: relative; padding-block: var(--section-y); }
.band--alt { background: var(--c-paper-alt); }
.band--navy { background: var(--c-ink); color: var(--c-on-ink); }
.band--navy :is(h2, h3) { color: var(--c-on-ink); }
.section-head { display: grid; gap: var(--space-3); max-width: 760px; margin-bottom: clamp(32px, 4vw, 56px); }
.section-head--center { margin-inline: auto; text-align: center; justify-items: center; }
.section-head--split { max-width: none; grid-template-columns: minmax(0, 1fr) auto; align-items: end; column-gap: var(--space-5); }
.section-head--split > :not(.section-title):not(.section-line) { grid-row: 1 / span 2; grid-column: 2; }
.section-title { font-size: var(--fs-h2); }
.section-line { max-width: 62ch; font-size: var(--fs-lead); line-height: 1.55; color: var(--c-ink-soft); }
.band--navy .section-line { color: var(--c-on-ink-soft); }
@media (max-width: 760px) {
  .section-head--split { grid-template-columns: 1fr; }
  .section-head--split > :not(.section-title):not(.section-line) { grid-row: auto; grid-column: auto; }
}

/* footage behind a band or a stage */
.footage { position: relative; isolation: isolate; overflow: hidden; }
.footage__media { position: absolute; inset: 0; z-index: -2; }
.footage__media video, .footage__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.footage__shade { position: absolute; inset: 0; z-index: -1; background: var(--c-shade); }

/* ---------- buttons ---------- */
.button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-m); font: 700 var(--fs-ui)/1.1 var(--font-ui); letter-spacing: 0.005em; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background-color var(--dur-fast), box-shadow var(--dur-fast), transform var(--dur-fast) var(--ease-out); }
.button--main { background: var(--c-accent); color: var(--c-on-accent); box-shadow: 0 1px 0 color-mix(in srgb, var(--c-ink) 18%, transparent), 0 12px 24px -14px color-mix(in srgb, var(--c-accent) 90%, transparent); }
.button--main:hover { background: color-mix(in srgb, var(--c-accent) 86%, var(--c-paper)); transform: translateY(-1px); }
.button--main:active { transform: none; }
.button__arrow { flex: none; transition: transform var(--dur-fast) var(--ease-out); }
.button:hover .button__arrow { transform: translateX(3px); }
.link-arrow { display: inline-flex; align-items: center; gap: 8px; font: 700 var(--fs-ui)/1.2 var(--font-ui); color: var(--c-brand-text); text-decoration: none; white-space: nowrap; }
.link-arrow:hover { text-decoration: underline; }
.link-arrow:hover .button__arrow { transform: translateX(3px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.cta-note { display: flex; flex-wrap: wrap; gap: 6px 18px; font: 500 var(--fs-small)/1.4 var(--font-ui); color: var(--c-ink-soft); }
.cta-note span { display: inline-flex; align-items: center; gap: 8px; }
.cta-note span::before, .promise li::before, .dia-list li::before { content: ""; flex: none; width: 7px; height: 7px; background: var(--c-accent); transform: rotate(45deg); }
.band--navy .cta-note, .on-dark .cta-note { color: var(--c-on-ink-soft); }

/* ---------- the stop icon ---------- */
.stop { z-index: 5; display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-paper) 94%, transparent); color: var(--c-ink); box-shadow: var(--shadow-s); cursor: pointer; }
.stop--dark { background: color-mix(in srgb, var(--c-ink) 70%, transparent); color: var(--c-on-ink); box-shadow: inset 0 0 0 1px var(--c-ink-line); }
.stop:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
[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: 60; background: var(--c-paper); border-bottom: 1px solid var(--c-line); }
.site-header__in { box-sizing: border-box; display: flex; align-items: center; gap: 24px; height: var(--header-h); max-width: calc(var(--max-w) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.site-header__logo { flex: none; display: flex; align-items: center; }
.site-header__logo img { display: block; width: auto; height: 34px; }
.site-header__nav { margin-left: auto; }
.nav__list { display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; }
.nav__item a { position: relative; display: block; padding: 10px 12px; border-radius: var(--radius-s); font: 600 15px/1.2 var(--font-ui); color: var(--c-ink); text-decoration: none; }
.nav__item a:hover { color: var(--c-brand-text); }
.nav__item a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: 3px; height: 2px; background: var(--c-accent); }
.site-header__phone { flex: none; display: inline-flex; align-items: center; gap: 8px; font: 700 15px/1 var(--font-ui); color: var(--c-ink); text-decoration: none; white-space: nowrap; }
.site-header__phone svg { color: var(--c-brand); }
.site-header__phone:hover { color: var(--c-brand-text); }
.site-header__cta { flex: none; min-height: 44px; padding: 0 18px; font-size: 15px; }
.site-header__menu { display: none; }
@media (max-width: 1140px) { .site-header__phone { display: none; } }
@media (max-width: 960px) {
  :root { --header-h: 64px; }
  .site-header__in { gap: 12px; }
  .site-header__logo img { height: 28px; }
  .site-header__cta { margin-left: auto; min-height: 42px; padding: 0 14px; font-size: 14px; }
  .site-header__cta .button__arrow { display: none; }
  .site-header__menu { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink); cursor: pointer; }
  .site-header__burger { display: grid; gap: 6px; width: 18px; }
  .site-header__burger i { display: block; height: 2px; border-radius: 2px; background: currentColor; transition: transform var(--dur-fast) var(--ease-out); }
  .site-header[data-open] .site-header__burger i:first-child { transform: translateY(4px) rotate(45deg); }
  .site-header[data-open] .site-header__burger i:last-child { transform: translateY(-4px) rotate(-45deg); }
  .site-header__nav { position: absolute; top: 100%; left: 0; right: 0; display: none; margin: 0; background: var(--c-paper); border-bottom: 1px solid var(--c-line); box-shadow: var(--shadow-m); }
  .site-header[data-open] .site-header__nav { display: block; }
  .nav__list { flex-direction: column; gap: 0; padding: 6px var(--gutter) 18px; }
  .nav__item a { padding: 15px 2px; border-bottom: 1px solid var(--c-line); border-radius: 0; font-size: 17px; }
  .nav__item a[aria-current="page"]::after { left: 2px; right: auto; width: 28px; bottom: 8px; }
}
@media (max-width: 360px) {
  .site-header__logo img { height: 22px; }
  .site-header__cta { padding: 0 11px; font-size: 13.5px; }
}

/* ---------- the footer ---------- */
.site-footer { box-sizing: border-box; display: grid; grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(0, 1fr)); gap: 40px 32px; padding: clamp(56px, 7vw, 88px) max(var(--gutter), calc((100% - var(--max-w)) / 2)) 28px; background: var(--c-ink); color: var(--c-on-ink-soft); font-size: var(--fs-small); }
.site-footer__logo { display: inline-flex; padding: 12px 16px; border-radius: var(--radius-m); background: var(--c-paper); }
.site-footer__logo img { display: block; width: auto; height: 30px; }
.site-footer__line { max-width: 36ch; margin-top: 20px; line-height: 1.65; }
.site-footer__title { margin-bottom: 14px; font: 700 var(--fs-small)/1.2 var(--font-ui); color: var(--c-on-ink); }
.site-footer ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.site-footer a { color: var(--c-on-ink); text-decoration: none; }
.site-footer a:hover { color: var(--c-accent-on-ink); }
.site-footer__contact { display: grid; align-content: start; gap: 10px; padding-top: 30px; }
.site-footer__contact a { font-weight: 600; }
.site-footer__legal { grid-column: 1 / -1; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; padding-top: 24px; border-top: 1px solid var(--c-ink-line); font-size: 14px; }
.site-footer__legal ul { display: flex; gap: 22px; }
@media (max-width: 900px) { .site-footer { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__brand { grid-column: 1 / -1; } .site-footer__contact { padding-top: 0; } }
@media (max-width: 480px) { .site-footer { grid-template-columns: 1fr; } }

/* ---------- the picker (the form box) ---------- */
.picker { box-sizing: border-box; display: grid; gap: 16px; width: 100%; max-width: 520px; padding: 22px 22px 20px; border-radius: var(--radius-l); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l); }
.picker__set { min-width: 0; margin: 0; padding: 0; border: 0; }
.picker__legend { margin-bottom: 12px; padding: 0; font: 700 1rem/1.35 var(--font-ui); color: var(--c-ink); }
.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: grid; place-items: center; height: 48px; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); font: 700 1.0625rem/1 var(--font-display); color: var(--c-ink); transition: border-color var(--dur-fast), background-color var(--dur-fast), color var(--dur-fast); }
.picker__choice:hover span { border-color: var(--c-brand); }
.picker__choice input:checked + span { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); }
.picker__choice input:focus-visible + span { outline: 3px solid var(--c-brand); outline-offset: 2px; }
.picker__go { width: 100%; }
.picker .cta-note { justify-content: center; color: var(--c-ink-soft); } /* the picker is a white card, even in a navy band */
@media (max-width: 380px) { .picker { padding: 18px 16px 16px; } .picker__choices { gap: 6px; } .picker__choice span { height: 46px; font-size: 1rem; } }

/* ---------- cards ---------- */
.card { border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-m); }
.note-card { box-sizing: border-box; display: flex; align-items: center; gap: 12px; width: max-content; max-width: 320px; padding: 12px 18px 12px 12px; border-radius: var(--radius-l); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l); }
.note-card__ico { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-m); background: var(--c-brand); color: var(--c-on-brand); }
.note-card b { display: block; font: 700 15px/1.3 var(--font-ui); color: var(--c-ink); }
.note-card small { display: block; margin-top: 2px; font: 400 13px/1.35 var(--font-ui); color: var(--c-ink-soft); }
.quote-card { display: grid; gap: 12px; padding: 22px 24px; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-m); }
.quote-card .stars { display: flex; gap: 3px; color: var(--c-accent); }
.quote-card blockquote { margin: 0; font: 500 1.0625rem/1.55 var(--font-text); color: var(--c-ink); }
.quote-card__by { display: flex; align-items: center; gap: 8px; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.quote-card__g { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--c-paper-alt); font: 700 12px/1 var(--font-ui); color: var(--c-brand-text); }

/* the promise strip */
.promise { box-sizing: border-box; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 44px; margin: 0; padding: 18px 30px; border-radius: var(--radius-l); background: var(--c-paper); box-shadow: var(--shadow-l); list-style: none; }
.promise li { display: flex; align-items: center; gap: 10px; font: 600 15px/1.3 var(--font-ui); color: var(--c-ink); }
.promise li::before { width: 9px; height: 9px; }
.dia-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.dia-list li { display: flex; align-items: baseline; gap: 12px; }
.dia-list li::before { transform: translateY(-2px) rotate(45deg); }

/* step numbers in the logo's diamond */
.step-num { position: relative; flex: none; display: grid; place-items: center; width: 48px; height: 48px; font: 700 15px/1 var(--font-display); letter-spacing: 0; color: var(--c-ink); }
.step-num::before { content: ""; position: absolute; inset: 8px; z-index: -1; border: 1.5px solid currentColor; border-radius: 4px; transform: rotate(45deg); transition: background-color var(--dur-med), border-color var(--dur-med); }
.chip { display: inline-flex; align-items: center; min-height: 26px; padding: 0 10px; border-radius: 999px; background: var(--c-brand-light); font: 700 13px/1 var(--font-ui); color: var(--c-brand-dark); white-space: nowrap; }

/* ---------- steps lit by a chat, and the phone ---------- */
.steps { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: none; }
.steps__item { position: relative; display: flex; gap: 18px; padding: 20px 22px; border-radius: var(--radius-l); background: var(--c-ink-raise); box-shadow: inset 0 0 0 1px var(--c-ink-line); color: var(--c-on-ink-soft); transition: background-color var(--dur-med), box-shadow var(--dur-med); }
.steps__item .step-num { color: var(--c-on-ink); isolation: isolate; }
.steps__item h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-bottom: 6px; font-size: var(--fs-h3); color: var(--c-on-ink); }
.steps__item p { line-height: 1.55; }
.steps__item .chip { background: color-mix(in srgb, var(--c-on-ink) 12%, transparent); color: var(--c-on-ink); }
.steps__item[aria-current="step"] { background: var(--c-paper); box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.5); color: var(--c-ink-soft); }
.steps__item[aria-current="step"] h3 { color: var(--c-ink); }
.steps__item[aria-current="step"] .step-num { color: var(--c-ink); }
.steps__item[aria-current="step"] .step-num::before { border-color: var(--c-accent); background: var(--c-accent); }
.steps__item[aria-current="step"] .chip { background: var(--c-brand-light); color: var(--c-brand-dark); } /* #1B5596 on #E8F1FB: AA for small text */
.phone { box-sizing: border-box; width: min(100%, 340px); padding: 10px; border-radius: 36px; background: var(--c-ink); box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--c-on-ink) 22%, transparent), var(--shadow-l); }
.phone__screen { overflow: hidden; border-radius: 28px; background: var(--c-paper); }
.phone__head { display: flex; align-items: center; gap: 10px; padding: 16px 16px 12px; border-bottom: 1px solid var(--c-line); }
.phone__avatar { position: relative; flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; background: var(--c-ink); }
.phone__avatar::before { content: ""; width: 12px; height: 12px; background: var(--c-accent); transform: rotate(45deg); border-radius: 2px; }
.phone__head b { display: block; font: 700 15px/1.2 var(--font-ui); color: var(--c-ink); }
.phone__head small { display: block; font: 400 13px/1.3 var(--font-ui); color: var(--c-ink-soft); }
.phone__chat { position: relative; display: flex; flex-direction: column; justify-content: flex-start; gap: 8px; height: 470px; padding: 14px; overflow: hidden; background: var(--c-paper-alt); scroll-behavior: smooth; } /* messages start under the header; home.js keeps the newest in view once they fill it */
.phone__chat > * { flex: none; }
@media (prefers-reduced-motion: reduce) { .phone__chat { scroll-behavior: auto; } }
.msg { margin: 0; max-width: 86%; padding: 10px 13px; border-radius: 16px; font: 400 14px/1.4 var(--font-ui); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.msg--in { align-self: flex-start; border-bottom-left-radius: 4px; background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-s); }
.msg--out { align-self: flex-end; border-bottom-right-radius: 4px; background: var(--c-brand); color: var(--c-on-brand); font-weight: 600; }
.msg--chips { display: flex; align-self: stretch; gap: 5px; max-width: 100%; padding: 0; background: none; }
.msg--chips span { display: grid; flex: 1 1 0; place-items: center; min-width: 0; height: 36px; padding: 0 4px; border: 1.5px solid var(--c-line); border-radius: 999px; background: var(--c-paper); font: 700 14px/1 var(--font-display); color: var(--c-ink); transition: background-color var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.msg--chips span[data-kit-on] { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); }
.msg--typing { display: flex; gap: 4px; align-self: flex-start; padding: 13px 14px; background: var(--c-paper); box-shadow: var(--shadow-s); }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink-soft); animation: kit-dots 1s infinite ease-in-out; }
.msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes kit-dots { 0%, 80%, 100% { opacity: 0.35; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.msg--bar { align-self: stretch; max-width: 100%; display: grid; gap: 8px; padding: 12px 14px; background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-s); }
.msg--bar b { font: 700 13.5px/1.2 var(--font-ui); }
.msg--bar i { display: block; height: 6px; border-radius: 6px; background: linear-gradient(var(--c-brand), var(--c-brand)) left / calc(var(--kit-fill, 0) * 100%) 100% no-repeat, var(--c-line); }
.msg--result { align-self: stretch; max-width: 100%; display: grid; gap: 4px; padding: 14px; border: 1.5px solid var(--c-brand); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-m); }
.msg--result small { font: 700 13px/1.2 var(--font-ui); color: var(--c-brand-text); }
.msg--result strong { font: 700 22px/1.15 var(--font-display); letter-spacing: -0.02em; }
.msg--result em { font: 400 13px/1.3 var(--font-ui); font-style: normal; color: var(--c-ink-soft); }
.msg--result .mini-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 4px; height: 52px; margin: 8px 0 6px; }
.msg--result .mini-bars i { display: block; height: var(--h); min-height: 3px; border-radius: 3px 3px 1px 1px; background: var(--c-brand); }
.msg--result .mini-bars i:first-child { background: var(--c-line); }
.msg--result .from { display: flex; justify-content: space-between; gap: 10px; padding-top: 8px; border-top: 1px solid var(--c-line); font: 400 13px/1.3 var(--font-ui); color: var(--c-ink-soft); }
.msg--result .from b { color: var(--c-ink); }
@media (prefers-reduced-motion: reduce) { .msg--typing i { animation: none; } }

/* ---------- the chapter stage (kit tour) ---------- */
.chapters__stage { position: relative; overflow: hidden; aspect-ratio: 11 / 5; max-height: 560px; width: 100%; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); }
.chapter { position: absolute; inset: 0; }
.chapter__media { position: absolute; inset: 0; }
.chapter__media video, .chapter__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.chapter__scene { position: absolute; width: min(360px, 40%); }
.chapters__stage > .stop { position: absolute; top: 16px; right: 16px; }
.chapters__tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-top: 16px; }
.chapters__tab { position: relative; overflow: hidden; display: grid; align-content: start; gap: 6px; padding: 18px 18px 18px; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink-soft); font: 400 var(--fs-small)/1.5 var(--font-text); text-align: left; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); }
.chapters__tab::before { content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--c-accent); transform: scaleX(0); transform-origin: left; }
.chapters__tab[aria-selected="true"]::before { transform: scaleX(var(--kit-fill, 1)); }
.chapters__tabs:not([data-kit-on]) .chapters__tab[aria-selected="true"]::before { transform: scaleX(1); }
.chapters__tab b { display: flex; align-items: center; gap: 10px; font: 700 var(--fs-h3)/1.2 var(--font-display); letter-spacing: var(--track-display); color: var(--c-ink); }
.chapters__tab b::before { content: ""; flex: none; width: 9px; height: 9px; border: 1.5px solid var(--c-line); transform: rotate(45deg); transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.chapters__tab:hover { border-color: color-mix(in srgb, var(--c-brand) 45%, var(--c-line)); }
.chapters__tab[aria-selected="true"] { border-color: transparent; box-shadow: var(--shadow-m); color: var(--c-ink-soft); }
.chapters__tab[aria-selected="true"] b::before { border-color: var(--c-accent); background: var(--c-accent); }
@media (max-width: 760px) {
  .chapters__stage { aspect-ratio: auto; max-height: none; overflow: visible; background: none; box-shadow: none; }
  .chapter { position: relative; inset: auto; display: grid; }
  .chapter[hidden] { display: none; }
  .chapter__media { position: relative; inset: auto; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-l); }
  .chapter__scene { position: relative; inset: auto !important; width: auto; max-width: 360px; margin: -36px 12px 0; }
  .chapters__stage > .stop { top: 10px; right: 10px; }
  .chapters__tabs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .chapters__tab { padding: 14px; }
  .chapters__tab span { display: none; }
}

/* ---------- compare (kit compare) ---------- */
.compare { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 620px; width: 100%; border-radius: var(--radius-l); background: var(--c-ink); box-shadow: var(--shadow-l); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.compare > .before, .compare > .after { position: absolute; inset: 0; }
.compare > .after { clip-path: inset(0 0 0 calc(var(--kit-v, 0.5) * 100%)); }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.compare > .before img { object-position: var(--pos-b, 30% 50%); filter: grayscale(0.9) contrast(0.92) brightness(0.92); }
.compare > .after img { object-position: var(--pos-a, 60% 40%); }
.compare > .before::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--c-ink) 22%, transparent); }
.compare__tag { position: absolute; top: 18px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 34px; padding: 0 14px; border-radius: 999px; font: 700 14px/1 var(--font-ui); }
.before .compare__tag { left: 18px; background: var(--c-paper); color: var(--c-ink-soft); }
.compare__tag--us { right: 18px; background: var(--c-ink); color: var(--c-on-ink); }
.compare__tag--us::before { content: ""; width: 8px; height: 8px; background: var(--c-accent); transform: rotate(45deg); }
.compare__cards { position: absolute; bottom: 18px; z-index: 2; display: grid; gap: 10px; width: min(300px, calc(50% - 40px)); margin: 0; padding: 0; list-style: none; }
.before .compare__cards { left: 18px; }
.after .compare__cards { right: 18px; }
.compare__card { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-m); background: var(--c-paper); box-shadow: var(--shadow-m); color: var(--c-ink); }
.compare__card b { font: 700 15px/1.25 var(--font-ui); }
.compare__card small { font: 400 13px/1.35 var(--font-ui); color: var(--c-ink-soft); }
.before .compare__card { background: color-mix(in srgb, var(--c-paper) 92%, var(--c-paper-alt)); }
.before .compare__card b { color: var(--c-ink-soft); }
.before .compare__card s { text-decoration-thickness: 2px; text-decoration-color: color-mix(in srgb, var(--c-ink-soft) 70%, transparent); }
.compare__card .mini-bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 3px; height: 30px; margin-top: 6px; }
.compare__card .mini-bars i { display: block; height: var(--h); border-radius: 2px 2px 1px 1px; background: var(--c-brand); }
.compare__card--ok b { display: flex; align-items: center; gap: 8px; }
.compare__card--ok b::before { content: ""; flex: none; width: 8px; height: 8px; background: var(--c-accent); transform: rotate(45deg); }
[data-kit-whole] { transition: opacity 0.2s, visibility 0s; }
[data-kit-under] { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.compare__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.handle { position: absolute; top: 0; bottom: 0; z-index: 3; left: calc(var(--kit-v, 0.5) * 100%); width: 0; pointer-events: none; opacity: clamp(0, calc((min(var(--kit-v, 0.5), 1 - var(--kit-v, 0.5)) - 0.03) * 14), 1); }
.compare__range:focus-visible + .handle { opacity: 1; }
.handle__line { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--c-paper); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-ink) 20%, transparent); }
.handle__knob { position: absolute; top: var(--knob-y, 34%); left: -26px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-accent); box-shadow: var(--shadow-l); }
.compare__range:focus-visible + .handle .handle__knob { outline: 3px solid var(--c-paper); outline-offset: 3px; }
.handle__hint { position: absolute; top: calc(var(--knob-y, 34%) + 62px); left: 0; transform: translateX(-50%); padding: 6px 12px; border-radius: 999px; background: var(--c-ink); font: 700 13px/1 var(--font-ui); color: var(--c-on-ink); white-space: nowrap; transition: opacity var(--dur-med); }
.compare[data-kit-touched] .handle__hint { opacity: 0; }
@media (max-width: 700px) {
  .compare { aspect-ratio: 4 / 5; max-height: none; }
  .compare__tag { top: 12px; min-height: 30px; padding: 0 11px; font-size: 13px; }
  .before .compare__tag { left: 12px; }
  .compare__tag--us { right: 12px; }
  .compare__cards { bottom: 12px; gap: 8px; width: calc(50% - 24px); }
  .before .compare__cards { left: 12px; }
  .after .compare__cards { right: 12px; }
  .compare__card { padding: 10px; }
  .compare__card b { font-size: 13.5px; }
  .compare__card small { font-size: 13px; }
  .handle__knob { top: var(--knob-y-phone, 22%); width: 46px; height: 46px; left: -23px; }
  .handle__hint { top: calc(var(--knob-y-phone, 22%) + 54px); }
}

/* ---------- photo tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.tile { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 420px; border-radius: var(--radius-l); background: var(--c-ink); color: var(--c-ink); text-decoration: none; box-shadow: var(--shadow-m); }
.tile > img { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 35%); transition: transform 0.6s var(--ease-out); }
.tile:hover > img { transform: scale(1.04); }
.tile__plate { position: relative; display: grid; gap: 6px; margin: 12px; padding: 16px 48px 16px 18px; border-radius: var(--radius-m); background: var(--c-paper); box-shadow: var(--shadow-m); }
.tile__plate h3 { font-size: var(--fs-h3); }
.tile__plate p { font: 400 14px/1.45 var(--font-ui); color: var(--c-ink-soft); }
.tile__plate svg { position: absolute; right: 16px; top: 50%; margin-top: -9px; color: var(--c-brand); transition: transform var(--dur-fast) var(--ease-out); }
.tile:hover .tile__plate svg { transform: translateX(3px); }
.tile--wide { grid-column: 1 / -1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; background: var(--c-ink); color: var(--c-on-ink); }
.tile--wide > img { position: relative; z-index: 0; grid-column: 2; grid-row: 1; height: 100%; min-height: 260px; }
.tile--wide .tile__wide-copy { grid-column: 1; grid-row: 1; display: grid; align-content: center; gap: 12px; padding: clamp(24px, 4vw, 44px); }
.tile--wide h3 { color: var(--c-on-ink); font-size: var(--fs-h2); }
.tile--wide p { max-width: 44ch; color: var(--c-on-ink-soft); font-size: var(--fs-lead); line-height: 1.55; }
.tile--wide .link-arrow { color: var(--c-accent-on-ink); margin-top: 6px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile { min-height: 360px; } }
@media (max-width: 560px) {
  .tiles { gap: 10px; }
  .tile { min-height: 300px; }
  .tile__plate { margin: 8px; padding: 12px 12px 12px 12px; }
  .tile__plate svg { display: none; }
  .tile__plate h3 { font-size: 1rem; }
  .tile__plate p { font-size: 13px; }
  .tile--wide { grid-template-columns: 1fr; }
  .tile--wide > img { grid-column: 1; grid-row: 1; min-height: 200px; }
  .tile--wide .tile__wide-copy { grid-row: 2; }
}

/* ---------- the FAQ ---------- */
.faq-list { display: grid; gap: 10px; }
.faq { border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper); }
.faq summary { position: relative; display: block; padding: 20px 60px 20px 22px; font: 700 1.0625rem/1.4 var(--font-ui); color: var(--c-ink); cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before, .faq summary::after { content: ""; position: absolute; right: 24px; top: 50%; width: 14px; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--c-brand); transition: transform var(--dur-fast) var(--ease-out); }
.faq summary::after { transform: rotate(90deg); }
.faq[open] summary::after { transform: rotate(0deg); }
.faq summary:hover { color: var(--c-brand-text); }
.faq__a { padding: 0 22px 20px; color: var(--c-ink-soft); line-height: 1.65; }
.faq__a p + p { margin-top: 10px; }

/* ---------- the calculator's knobs (kit\calc.md) ---------- */
.worth__box { --calc-ink: var(--c-ink); --calc-ink-soft: var(--c-ink-soft); --calc-track: var(--c-line); --calc-fill: var(--c-brand); --calc-thumb: var(--c-paper); --calc-thumb-edge: var(--c-brand); --calc-thumb-shadow: var(--shadow-m); --calc-focus: var(--c-brand); --calc-surface: var(--c-paper); --calc-font: var(--font-ui); --calc-font-figure: var(--font-display); --calc-track-radius: 999px; --calc-thumb-radius: 50%; }

/* ---------- the exit popup ---------- */
.exit { box-sizing: border-box; width: min(520px, calc(100% - 32px)); max-width: none; max-height: calc(100% - 32px); margin: auto; padding: 0; border: 0; border-radius: var(--radius-l); background: transparent; color: var(--c-ink); box-shadow: var(--shadow-l); overflow: visible; }
.exit::backdrop { background: color-mix(in srgb, var(--c-ink) 62%, transparent); }
.exit__in { position: relative; overflow: hidden; border-radius: var(--radius-l); background: var(--c-paper); opacity: 0; transform: translateY(12px) scale(0.98); 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__top { display: grid; gap: 10px; padding: 32px 30px 26px; background: var(--c-ink); color: var(--c-on-ink-soft); }
.exit__title { font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem); color: var(--c-on-ink); padding-right: 30px; }
.exit__line { line-height: 1.55; }
.exit .picker { max-width: none; border-radius: 0; box-shadow: none; padding: 22px 30px 26px; }
.exit__close { position: absolute; top: 14px; right: 14px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: color-mix(in srgb, var(--c-on-ink) 12%, transparent); color: var(--c-on-ink); cursor: pointer; }
.exit__close:hover { background: color-mix(in srgb, var(--c-on-ink) 22%, transparent); }
html[data-kit-modal] { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .exit__in { transition: none; } }

/* ---------- the call bar on the phone ---------- */
.callbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 70; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--c-paper); box-shadow: 0 -8px 24px -12px rgba(16, 42, 86, 0.3); visibility: hidden; transform: translateY(110%); transition: transform var(--dur-med) var(--ease-out), visibility 0s var(--dur-med); }
.callbar[data-kit-on] { visibility: visible; transform: none; transition: transform var(--dur-med) var(--ease-out), visibility 0s; }
.callbar a { display: grid; place-items: center; min-height: 48px; border-radius: var(--radius-m); font: 700 15px/1 var(--font-ui); text-decoration: none; }
.callbar__call { box-shadow: inset 0 0 0 1.5px var(--c-ink); color: var(--c-ink); }
.callbar__cta { background: var(--c-accent); color: var(--c-on-accent); }
@media (min-width: 900px) { .callbar { display: none; } }

/* ---------- the thank-you page ---------- */
.thanks { box-sizing: border-box; display: grid; justify-items: start; gap: 18px; max-width: calc(760px + 2 * var(--gutter)); margin-inline: auto; padding: clamp(80px, 12vw, 160px) var(--gutter); }
.thanks__headline { font-size: var(--fs-h1); }
.thanks__body { font-size: var(--fs-lead); line-height: 1.6; color: var(--c-ink-soft); }
.thanks__next { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
.thanks__next a { display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 10px 24px; text-align: center; text-wrap: balance; border-radius: var(--radius-m); background: var(--c-accent); color: var(--c-on-accent); font: 700 var(--fs-ui)/1.1 var(--font-ui); text-decoration: none; }
.thanks__next a:hover { background: color-mix(in srgb, var(--c-accent) 86%, var(--c-paper)); }