/* design\components.css: the CSS of the components in design\components.md, the director's: the header, the footer,
   the exit popup, the call bar, the stop icon, and each section pattern, card, form box and call-to-action block as the
   home page built them. Every page loads it (the build copies it to site\assets\css\components.css). Builders use these
   classes as they are; a page's own CSS only places and sizes its parts, with the tokens of system.css.
   Part 1, home page, first builder: bands, buttons, the header, the stop icon, the form box, the home hero, the exit
   popup and the call bar. Second builder: the footer, the action line, the leak, the calculator, split and stage, the
   showcase, the video feature, the FAQ and the CTA band. Rules that a scene's own markup could share a class name with
   (.btn, .hero, .stage) stay out of scenes ([data-scene]). Sizes in px are the catalog's; --fs-micro (13px) only
   inside the form box's mini pictures, the brief's floor for text on screen. */

/* ---------- base: links, the container, bands ---------- */
/* a jump to a part (#plan-form, #start) lands under the sticky header, not behind it */
html { scroll-padding-top: calc(var(--header-h) + var(--space-3)); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
a { color: var(--c-brand); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 3px; }
.skip:focus { padding: var(--space-2) var(--space-3); border-radius: var(--radius-btn); background: var(--c-ink); color: var(--c-paper); font: 600 var(--fs-ui)/var(--lh-snug) var(--font-ui); text-decoration: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--max-w)); margin-inline: auto; }
.band { position: relative; padding-block: var(--section-y); }
.band--white { background: var(--c-paper); }
.band--pale { background: var(--c-paper-alt); }
.band--navy { background: var(--c-navy); color: var(--c-on-navy); }
.band--diag { margin-top: calc(-1 * var(--diag)); padding-top: calc(var(--section-y) + var(--diag)); clip-path: polygon(0 var(--diag), 100% 0, 100% 100%, 0 100%); }

/* ---------- buttons ---------- */
.btn:not([data-scene] *) {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  box-sizing: border-box; height: 52px; padding: 0 26px; border: 0; border-radius: var(--radius-btn);
  font: 600 1.0625rem/1 var(--font-ui); letter-spacing: -0.005em; text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.btn:not([data-scene] *):focus-visible { outline: none; box-shadow: var(--ring); }
.btn:not([data-scene] *):active { transform: scale(.98); }
.btn--primary:not([data-scene] *) { background: var(--c-brand); color: var(--c-on-brand); }
.btn--primary:not([data-scene] *):hover { background: var(--c-brand-dark); }
.btn--primary:not([data-scene] *)::after {
  content: ''; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.8L12.7 8l-4.2 4.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.5M8.5 3.8L12.7 8l-4.2 4.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn--primary:not([data-scene] *):hover::after { transform: translateX(3px); }
.btn--light:not([data-scene] *) { background: var(--c-paper); color: var(--c-ink); }
.btn--light:not([data-scene] *):hover { background: var(--c-brand-light); }
.btn--ghost:not([data-scene] *) { background: transparent; color: var(--c-ink); box-shadow: inset 0 0 0 1.5px var(--c-ink); }
.btn--ghost:not([data-scene] *):hover { background: var(--c-paper-alt); }
.btn--block:not([data-scene] *) { display: flex; width: 100%; }
.btn:not([data-scene] *):disabled { cursor: default; opacity: .7; }
@media (max-width: 599px) { .btn:not([data-scene] *) { height: 56px; } }

/* ---------- the header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  display: flex; align-items: center; gap: var(--space-4);
  box-sizing: border-box; height: var(--header-h);
  padding-inline: max(var(--gutter), (100% - var(--max-w)) / 2);
  background: var(--c-paper);
  box-shadow: 0 1px 0 transparent;
  transition: box-shadow var(--dur-med) var(--ease-out);
}
.site-header[data-scrolled] { box-shadow: 0 1px 0 var(--c-line); }
.site-header__logo { flex: none; display: block; line-height: 0; }
.site-header__logo img { display: block; width: auto; height: 56px; }
.site-header__logo:focus-visible { outline-offset: 4px; border-radius: 4px; }
.site-header__menu { display: none; }
.nav__cta { display: none !important; }
.site-header__nav { margin-left: auto; }
.nav__list { display: flex; align-items: center; gap: var(--space-5); margin: 0; padding: 0; list-style: none; }
.nav__link, .nav__group {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-2) 0; border: 0; background: none;
  font: 500 var(--fs-ui)/var(--lh-snug) var(--font-ui); color: var(--c-ink); text-decoration: none; cursor: pointer;
}
.nav__link:hover, .nav__link[aria-current] { color: var(--c-brand); text-decoration: underline 2px var(--c-brand); text-underline-offset: 6px; }
.nav__group:hover, .nav__group[aria-expanded="true"] { color: var(--c-brand); }
.nav__link[data-planned], .nav__sublink[data-planned] { cursor: default; }
.nav__chev { transition: transform var(--dur-fast) var(--ease-out); }
.nav__group[aria-expanded="true"] .nav__chev { transform: rotate(180deg); }
.nav__item--group { position: relative; }
.nav__sub { margin: 0; padding: 0; list-style: none; }
.nav__sublink { display: grid; gap: 2px; padding: var(--space-2) var(--space-3); border-radius: var(--radius-s); text-decoration: none; }
.nav__sublink:hover { background: var(--c-paper-alt); }
.nav__subname { font: 600 var(--fs-ui)/var(--lh-snug) var(--font-ui); color: var(--c-ink); }
.nav__subline { font: 400 var(--fs-small)/var(--lh-snug) var(--font-ui); color: var(--c-ink-soft); }
.site-header__action { flex: none; display: flex; flex-direction: column; align-items: center; gap: var(--space-1); }
.btn.site-header__cta:not([data-scene] *) { height: 44px; padding: 0 20px; font-size: var(--fs-ui); }
.site-header__note { font: 500 var(--fs-small)/1 var(--font-ui); color: var(--c-ink-soft); white-space: nowrap; }

@media (min-width: 900px) {
  /* the Services card: opens on hover and with its button (Enter or a tap); closes on a click elsewhere, Escape or when the focus leaves it */
  .nav__sub {
    position: absolute; top: calc(100% + var(--space-3)); left: 50%; z-index: 2; width: 330px; box-sizing: border-box; padding: var(--space-2);
    background: var(--c-paper); border-radius: var(--radius-m); box-shadow: var(--shadow-m);
    opacity: 0; visibility: hidden; transform: translate(-50%, 6px);
    transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast);
  }
  .nav__sub::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; } /* the bridge from the button */
  .nav__item--group:hover .nav__sub, .nav__group[aria-expanded="true"] + .nav__sub {
    opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s;
  }
}
@media (min-width: 900px) and (max-width: 1199px) {
  .site-header { gap: var(--space-3); }
  .nav__list { gap: var(--space-4); }
}
@media (max-width: 899px) {
  .site-header { gap: var(--space-2); }
  .site-header__logo { margin-right: auto; }
  .site-header__logo img { height: 40px; }
  .site-header__action { order: 1; }
  .site-header__note { display: none; }
  .btn.site-header__cta:not([data-scene] *) { height: 40px; padding: 0 14px; }
  .btn.site-header__cta:not([data-scene] *)::after { display: none; }
  .site-header__menu {
    order: 2; display: inline-flex; align-items: center; gap: var(--space-2); height: 44px; padding: 0 6px; margin-right: -6px;
    border: 0; background: none; border-radius: var(--radius-s); font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--c-ink); cursor: pointer;
  }
  .site-header__burger { position: relative; width: 18px; height: 10px; border-block: 2px solid currentColor; box-sizing: border-box; transition: transform var(--dur-fast) var(--ease-out); }
  .site-header[data-open] .site-header__burger { border-color: transparent; }
  .site-header[data-open] .site-header__burger::before, .site-header[data-open] .site-header__burger::after { content: ''; position: absolute; left: 0; top: 2px; width: 18px; height: 2px; background: currentColor; transform: rotate(45deg); }
  .site-header[data-open] .site-header__burger::after { transform: rotate(-45deg); }
  /* the menu: a full-height white sheet under the bar */
  .site-header__nav {
    position: fixed; inset: var(--header-h) 0 0 0; z-index: 59; margin: 0;
    display: none; flex-direction: column; gap: var(--space-4);
    padding: var(--space-3) var(--gutter) calc(var(--space-4) + env(safe-area-inset-bottom));
    background: var(--c-paper); box-shadow: inset 0 1px 0 var(--c-line); overflow-y: auto; overscroll-behavior: contain;
  }
  .site-header[data-open] .site-header__nav { display: flex; }
  html:has(.site-header[data-open]) { overflow: hidden; }
  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--c-line); }
  .nav__link, .nav__group { width: 100%; justify-content: space-between; padding: var(--space-3) 0; font: var(--fw-display) 1.75rem/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); }
  .nav__link:hover, .nav__link[aria-current] { text-decoration: none; }
  .nav__chev { width: 18px; height: 18px; }
  .nav__sub { display: none; padding: 0 0 var(--space-3); }
  .nav__group[aria-expanded="true"] + .nav__sub { display: block; }
  .nav__sublink { padding: var(--space-2) 0; }
  .nav__subname { font-size: var(--fs-body); }
  .nav__cta { display: flex !important; margin-top: auto; }
}
@media (max-width: 380px) {
  .site-header { gap: var(--space-1); }
  .btn.site-header__cta:not([data-scene] *) { padding: 0 10px; }
}

/* ---------- the stop icon ---------- */
.stop {
  position: absolute; top: 12px; right: 12px; z-index: 6;
  display: grid; place-items: center; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%;
  background: color-mix(in srgb, var(--c-navy-deep) 55%, transparent);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-paper) 35%, transparent);
  color: var(--c-paper); cursor: pointer;
}
.stop:hover { background: color-mix(in srgb, var(--c-navy-deep) 72%, transparent); }
.stop:focus-visible { outline: none; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-paper) 35%, transparent), var(--ring); }
.stop svg { width: 16px; height: 16px; }

/* ---------- the form box (the plan form) ---------- */
.plan-form { position: relative; box-sizing: border-box; padding: 28px; background: var(--c-paper); border-radius: var(--radius-l); box-shadow: var(--shadow-l); overflow: clip; text-align: left; color: var(--c-ink); }
.plan-form::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c-brand); }
.plan-form__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.plan-form__title { margin: 0; font: var(--fw-display) 1.5rem/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); color: var(--c-ink); }
/* on a narrow box the title wraps before "12-month plan", never at its hyphen */
.plan-form__title span { white-space: nowrap; }
.plan-form__steps { display: flex; align-items: center; margin: 0; padding: 0; list-style: none; }
.plan-form__steps li {
  position: relative; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: var(--c-brand-light); color: var(--c-ink-soft); font: 600 var(--fs-small)/1 var(--font-ui); font-variant-numeric: tabular-nums;
  transition: background-color var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.plan-form__steps li + li { margin-left: 18px; }
.plan-form__steps li + li::before { content: ''; position: absolute; right: calc(100% + 3px); top: 13px; width: 12px; height: 2px; border-radius: 1px; background: var(--c-line); }
/* The current step and the passed ones: the kit marks markers inside the form (aria-current, data-kit-past); here the
   markers sit above the form, so they read the step from the form's data-kit-at (step 1 until the kit starts). */
.plan-form__steps li[aria-current="step"],
.plan-form:not(:has(form[data-kit-at])) .plan-form__steps li:first-child,
.plan-form:has(form[data-kit-at="1"]) .plan-form__steps li:nth-child(1),
.plan-form:has(form[data-kit-at="2"]) .plan-form__steps li:nth-child(2),
.plan-form:has(form[data-kit-at="3"]) .plan-form__steps li:nth-child(3) { background: var(--c-brand); color: var(--c-on-brand); }
.plan-form__steps li[data-kit-past],
.plan-form:has(form[data-kit-at="2"]) .plan-form__steps li:nth-child(1),
.plan-form:has(form[data-kit-at="3"]) .plan-form__steps li:nth-child(-n+2) { background: var(--c-paper); color: transparent; box-shadow: inset 0 0 0 1.5px var(--c-brand); }
.plan-form__steps li[data-kit-past]::after,
.plan-form:has(form[data-kit-at="2"]) .plan-form__steps li:nth-child(1)::after,
.plan-form:has(form[data-kit-at="3"]) .plan-form__steps li:nth-child(-n+2)::after {
  content: ''; position: absolute; inset: 0; background: var(--c-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 14px no-repeat;
}
.plan-form__steps li[data-kit-past] + li::before,
.plan-form:has(form[data-kit-at="2"]) .plan-form__steps li:nth-child(2)::before,
.plan-form:has(form[data-kit-at="3"]) .plan-form__steps li:nth-child(n+2)::before { background: var(--c-brand); }
.plan-form__form { margin: 0; }
.plan-form__step { min-width: 0; margin: 0; padding: 0; border: 0; }
.plan-form__step:focus { outline: none; }
.plan-form__q { float: left; width: 100%; margin: 0 0 calc(var(--space-2) + var(--space-1)); padding: 0; font: 600 1.1875rem/var(--lh-snug) var(--font-text); color: var(--c-ink); }
.plan-form__q + * { clear: both; }
.plan-form__step > .field + .field { margin-top: var(--space-3); }
.plan-form__next, .plan-form__send { margin-top: var(--space-3); }
.plan-form__back {
  display: block; margin: var(--space-1) auto 0; padding: var(--space-2) var(--space-3); border: 0; border-radius: var(--radius-s); background: none;
  font: 600 var(--fs-ui)/var(--lh-snug) var(--font-ui); color: var(--c-brand); cursor: pointer;
}
.plan-form__back:hover { color: var(--c-brand-dark); text-decoration: underline; text-underline-offset: 3px; }
.plan-form__assure { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); margin: var(--space-3) 0 0; font: 500 var(--fs-small)/var(--lh-snug) var(--font-ui); color: var(--c-ink-soft); }
.plan-form__assure span { display: inline-flex; align-items: center; gap: var(--space-1); white-space: nowrap; }
.plan-form__assure span::before {
  content: ''; width: 14px; height: 14px; flex: none; background: var(--c-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan-form[data-kit-sending] .plan-form__send, .plan-form__form[data-kit-sending] .plan-form__send { opacity: .7; }
@media (max-width: 599px) { .plan-form { padding: 20px; } }

/* the choices: a 2x2 grid of tiles, each with its finished mini picture */
.choices { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.choices > .field__error { grid-column: 1 / -1; }
@media (max-width: 359px) { .choices { grid-template-columns: 1fr; } }
.choice {
  position: relative; display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; padding: 12px;
  background: var(--c-paper); border: 1.5px solid var(--c-line); border-radius: var(--radius-m); cursor: pointer;
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), border-color var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out);
}
/* the radio itself covers the whole tile, unseen: a tap anywhere on it is a tap on the choice, and its focus is the tile's */
.choice > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; border-radius: inherit; opacity: 0; cursor: pointer; }
.choice:hover { transform: translateY(-2px); box-shadow: var(--shadow-s); }
.choice:has(> input:focus-visible) { box-shadow: var(--ring); }
.choice[data-kit-on] { border-color: var(--c-brand); background: var(--c-brand-light); box-shadow: 0 0 0 .5px var(--c-brand); }
.choice[data-kit-on]:has(> input:focus-visible) { box-shadow: 0 0 0 .5px var(--c-brand), var(--ring); }
.choices[data-kit-invalid] .choice { border-color: color-mix(in srgb, var(--c-error) 45%, var(--c-line)); }
/* the chosen tile's teal check badge, on its top-right corner */
.choice::before, .choice::after {
  content: ''; position: absolute; top: -8px; right: -8px; width: 22px; height: 22px; border-radius: 50%;
  transform: scale(0); transition: transform var(--dur-med) var(--ease-out);
}
.choice::before { background: var(--c-brand); box-shadow: 0 0 0 2px var(--c-paper); }
.choice::after {
  background: var(--c-on-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 13px no-repeat;
}
.choice[data-kit-on]::before, .choice[data-kit-on]::after { transform: scale(1); }
.choice__pic { position: relative; display: block; height: 84px; overflow: hidden; border-radius: var(--radius-s); background: var(--c-paper-alt); container-type: inline-size; }
.choice__label { font: 600 var(--fs-ui)/var(--lh-snug) var(--font-ui); color: var(--c-ink); }

/* the mini pictures: finished interfaces in miniature (every word 13px or more) */
.mini { position: absolute; inset: 0; display: grid; place-items: center; box-sizing: border-box; padding: 6px 8px; font: 500 var(--fs-micro)/1.25 var(--font-ui); letter-spacing: -0.005em; color: var(--c-ink); white-space: nowrap; }
.mini svg { display: block; }
/* calls: a phone's incoming call card that rings once and turns to "Answered" */
.mini-call { display: grid; grid-template-columns: auto auto auto; align-items: center; gap: 8px; padding: 7px 7px 7px 7px; border-radius: 14px; background: var(--c-navy); color: var(--c-on-navy); box-shadow: var(--shadow-m); transform-origin: 50% 50%; }
.mini-call__who { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: color-mix(in srgb, var(--c-on-navy) 16%, transparent); transition: background-color var(--dur-med) var(--ease-out); }
.mini-call__who svg { width: 13px; height: 13px; }
.mini-call__txt { display: grid; font-weight: 600; }
.mini-call__in, .mini-call__ok { grid-area: 1 / 1; transition: opacity var(--dur-fast) var(--ease-out); }
.mini-call__ok { display: inline-flex; align-items: center; gap: 5px; opacity: 0; color: var(--c-on-navy); }
.mini-call__ok::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--c-demo-answer); }
.mini-call__btns { display: flex; gap: 6px; }
.mini-call__no, .mini-call__yes { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: var(--c-paper); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); }
.mini-call__no { background: var(--c-demo-missed); }
.mini-call__yes { background: var(--c-demo-answer); }
.mini-call__no svg, .mini-call__yes svg { width: 13px; height: 13px; }
.choice[data-kit-on] .mini-call__who { background: var(--c-demo-answer); }
.choice[data-kit-on] .mini-call__in { opacity: 0; }
.choice[data-kit-on] .mini-call__ok { opacity: 1; transition-delay: .3s; }
.choice[data-kit-on] .mini-call__no { opacity: 0; transform: scale(.6); transition-delay: .3s; }
@container (max-width: 189px) {
  .mini-call { grid-template-columns: auto auto; justify-items: start; gap: 5px 7px; padding: 6px 8px 6px 6px; }
  .mini-call__who { width: 22px; height: 22px; }
  .mini-call__btns { grid-column: 1 / -1; justify-self: center; gap: 22px; }
  .mini-call__no, .mini-call__yes { width: 22px; height: 22px; }
}
@container (max-width: 149px) {
  .mini--calls { padding: 4px; }
  .mini-call { grid-template-columns: auto; justify-items: center; gap: 6px; padding: 7px 9px; }
  .mini-call__who { display: none; }
}
/* maps: three Maps rows; "Your business" climbs from 3rd to 1st */
.mini--maps { --row: 22px; --row-gap: 3px; padding: 5px 7px; }
.mini-rows { display: grid; gap: var(--row-gap); width: 100%; }
.mini-row { display: flex; align-items: center; gap: 6px; height: var(--row); padding: 0 7px 0 6px; border-radius: 7px; }
.mini-row--you { background: var(--c-paper); box-shadow: var(--shadow-s); font-weight: 600; }
.mini-row__pin, .mini-row__n { flex: none; width: 10px; text-align: center; }
.mini-row__pin { color: var(--c-demo-pin); }
.mini-row__pin svg { width: 10px; height: 13px; }
.mini-row__n { color: var(--c-ink-soft); font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-row__name { flex: 1; }
.mini-stars { flex: none; width: 46px; height: 9px; fill: var(--c-demo-star); }
@container (max-width: 179px) {
  .mini--maps { --row: 25px; --row-gap: 2px; padding: 2px 5px; }
  .mini-row { display: grid; grid-template-columns: 10px auto; grid-template-rows: 15px 8px; column-gap: 5px; row-gap: 1px; align-content: center; padding: 0 6px 0 5px; }
  .mini-row__pin, .mini-row__n { grid-row: 1 / 3; align-self: center; }
  .mini-row__name { line-height: 15px; }
  .mini-stars { grid-column: 2; width: 40px; height: 8px; }
}
@container (max-width: 149px) {
  .mini--maps { padding: 2px; }
  .mini-row { grid-template-columns: 8px auto; column-gap: 4px; padding: 0 4px; }
  .mini-row__pin, .mini-row__n { width: 8px; }
  .mini-row__pin svg { width: 8px; height: 11px; }
}
/* ai: an AI answer whose list ends with "Your business", highlighted */
.mini--ai { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 4px; padding: 5px 8px; }
.mini-q { align-self: flex-end; max-width: 100%; box-sizing: border-box; padding: 3px 9px; border-radius: 11px 11px 3px 11px; background: var(--c-brand); color: var(--c-on-brand); white-space: normal; text-align: right; }
.mini-a { align-self: flex-start; display: flex; align-items: flex-start; gap: 5px; padding: 4px 9px 4px 6px; border-radius: 3px 11px 11px 11px; background: var(--c-paper); box-shadow: var(--shadow-s); }
.mini-a__spark { flex: none; width: 14px; height: 16px; padding-top: 1px; color: var(--c-indigo); }
.mini-a__spark svg { width: 14px; height: 14px; }
.mini-a__list { display: grid; }
.mini-a__n { color: var(--c-ink-soft); font-variant-numeric: tabular-nums; }
.mini-a__item--you { margin-left: -4px; padding: 0 4px; border-radius: 4px; background: var(--c-brand-light); color: var(--c-brand-dark); font-weight: 600; }
.mini-a__item--you .mini-a__n { color: var(--c-brand-dark); }
@container (max-width: 179px) {
  .mini--ai { gap: 3px; padding: 2px 4px; }
  .mini-q { padding: 2px 8px; line-height: 15px; }
  .mini-a { padding: 3px 7px 3px 6px; }
  .mini-a__spark { display: none; }
  .mini-a__list { line-height: 15px; }
}
@container (max-width: 149px) {
  .mini--ai { padding: 2px 3px; }
  .mini-a { padding: 3px 6px; }
  .mini-a__n { display: none; }
}
/* site: a small phone page whose "Call now" button presses */
.mini--site { place-items: start center; padding: 0; }
.mini-phone { display: flex; flex-direction: column; align-items: center; gap: 6px; box-sizing: border-box; width: 116px; height: 96px; margin-top: 10px; padding: 7px 8px 0; border-radius: 15px 15px 0 0; background: var(--c-paper); box-shadow: 0 0 0 3px var(--c-navy), var(--shadow-m); }
.mini-phone__bar { width: 30px; height: 5px; border-radius: var(--radius-pill); background: var(--c-navy); }
.mini-phone__h { font-weight: 600; color: var(--c-ink); }
.mini-phone__btn { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 11px; border-radius: var(--radius-pill); background: var(--c-brand); color: var(--c-on-brand); font-weight: 600; box-shadow: var(--shadow-s); }
.mini-phone__btn svg { width: 11px; height: 11px; }
@container (max-width: 149px) {
  .mini-phone { width: min(116px, 100% - 8px); padding-inline: 6px; }
  .mini-phone__btn { padding: 0 9px; }
}
/* mouth: two speech bubbles */
.mini--mouth { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 6px 8px; }
.mini-bub { max-width: 92%; box-sizing: border-box; padding: 3px 9px; border-radius: 11px; white-space: normal; }
.mini-bub--a { align-self: flex-start; border-bottom-left-radius: 3px; background: var(--c-paper); box-shadow: var(--shadow-s); }
.mini-bub--b { align-self: flex-end; border-bottom-right-radius: 3px; background: var(--c-brand); color: var(--c-on-brand); text-align: right; }
@container (max-width: 179px) {
  .mini--mouth { gap: 3px; padding: 2px 5px; }
  .mini-bub { padding: 2px 8px; line-height: 15px; max-width: 100%; }
}
/* ads: an ad card whose results sit on a flat line */
.mini-ad { display: grid; gap: 3px; box-sizing: border-box; width: min(100%, 176px); padding: 6px 10px 5px; border-radius: 10px; background: var(--c-paper); box-shadow: var(--shadow-s); }
.mini-ad__tag { font-weight: 600; color: var(--c-ink); }
.mini-ad__chart { width: 100%; height: auto; max-height: 36px; }
.mini-ad__grid { fill: none; stroke: var(--c-line); stroke-width: 1; }
.mini-ad__line { fill: none; stroke: var(--c-ink-soft); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 100 200; stroke-dashoffset: 0; }
.mini-ad__dot { fill: var(--c-ink-soft); }
/* agency: an invoice line, and "New clients: ?" */
.mini-inv { display: grid; gap: 5px; box-sizing: border-box; width: min(100%, 196px); padding: 8px 10px; border-radius: 10px; background: var(--c-paper); box-shadow: var(--shadow-s); }
.mini-inv__row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mini-inv__row--q { padding-top: 5px; border-top: 1px dashed var(--c-line); }
.mini-inv__sum { font-weight: 600; font-variant-numeric: tabular-nums; }
.mini-inv__q { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--c-brand-light); color: var(--c-ink); font-weight: 600; }
/* the invoice line in one row needs about 203 px: under it the sum goes under its words */
@container (max-width: 204px) {
  .mini--agency { padding: 3px; }
  .mini-inv { width: 100%; gap: 3px; padding: 5px 7px; }
  .mini-inv__row:first-child { display: grid; gap: 0; }
  .mini-inv__row:first-child .mini-inv__sum { justify-self: end; }
  .mini-inv__row--q { padding-top: 3px; }
}
@container (max-width: 149px) {
  .mini--agency { padding: 2px; }
  .mini-inv { padding: 4px 6px; }
  .mini-inv__row:first-child { display: flow-root; line-height: 15px; }
  /* on the narrowest phones "Marketing retainer" takes two lines, the sum beside or under the second */
  .mini-inv__row:first-child .mini-inv__what { white-space: normal; }
  .mini-inv__row:first-child .mini-inv__sum { float: right; margin-left: 4px; }
}
/* nothing: a week with empty days */
.mini-week { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; width: min(100%, 196px); }
.mini-day { display: grid; justify-items: center; gap: 3px; }
.mini-day__d { font-weight: 600; color: var(--c-ink-soft); }
.mini-day__slot { width: 100%; height: 44px; box-sizing: border-box; border: 1.5px dashed var(--c-line); border-radius: 6px; background: var(--c-paper); }

/* each chosen tile's mini picture plays its moment once */
@media (prefers-reduced-motion: no-preference) {
  .choice[data-kit-on] .mini-call { animation: mini-ring .6s var(--ease-out); }
  .choice[data-kit-on] .mini-row--you { animation: mini-climb .6s var(--ease-out); }
  .choice[data-kit-on] .mini-row--2, .choice[data-kit-on] .mini-row--3 { animation: mini-drop .6s var(--ease-out); }
  .choice[data-kit-on] .mini-a__item--you { animation: mini-mark .6s var(--ease-out); }
  .choice[data-kit-on] .mini-phone__btn { animation: mini-press .6s var(--ease-out); }
  .choice[data-kit-on] .mini-bub--a { animation: mini-pop .34s var(--ease-out) backwards; }
  .choice[data-kit-on] .mini-bub--b { animation: mini-pop .34s var(--ease-out) .26s backwards; }
  .choice[data-kit-on] .mini-ad__line { animation: mini-draw .6s var(--ease-out); }
  .choice[data-kit-on] .mini-inv__q { animation: mini-ask .6s var(--ease-out); }
  .choice[data-kit-on] .mini-day__slot { animation: mini-empty .28s var(--ease-out) backwards; }
  .choice[data-kit-on] .mini-day:nth-child(2) .mini-day__slot { animation-delay: .08s; }
  .choice[data-kit-on] .mini-day:nth-child(3) .mini-day__slot { animation-delay: .16s; }
  .choice[data-kit-on] .mini-day:nth-child(4) .mini-day__slot { animation-delay: .24s; }
  .choice[data-kit-on] .mini-day:nth-child(5) .mini-day__slot { animation-delay: .32s; }
}
@media (prefers-reduced-motion: reduce) {
  .choice, .choice::before, .choice::after, .mini *, .plan-form__steps li { transition: none !important; }
}
@keyframes mini-ring { 0%, 100% { transform: none; } 12% { transform: rotate(-3deg) scale(1.03); } 26% { transform: rotate(3deg) scale(1.03); } 40% { transform: rotate(-2deg); } 54% { transform: rotate(1deg); } 68% { transform: none; } }
@keyframes mini-climb { from { transform: translateY(calc(2 * (var(--row) + var(--row-gap)))); } }
@keyframes mini-drop { from { transform: translateY(calc(-1 * (var(--row) + var(--row-gap)))); } }
@keyframes mini-mark { from { background-color: transparent; color: var(--c-ink); } 50% { background-color: transparent; } }
@keyframes mini-press { 0%, 30% { transform: none; } 50% { transform: scale(.9); background: var(--c-brand-dark); } 100% { transform: none; } }
@keyframes mini-pop { from { opacity: 0; transform: translateY(6px) scale(.92); } }
@keyframes mini-draw { from { stroke-dashoffset: 100; } }
@keyframes mini-ask { 0%, 100% { transform: none; } 45% { transform: scale(1.3); background: var(--c-brand); color: var(--c-on-brand); } }
@keyframes mini-empty { 50% { border-color: var(--c-brand); background: var(--c-brand-light); } }

/* fields */
.field { display: grid; gap: var(--space-2); }
.field > label { font: 600 var(--fs-small)/var(--lh-snug) var(--font-ui); color: var(--c-ink); }
.field > label span { font-weight: 500; color: var(--c-ink-soft); }
.field > input {
  box-sizing: border-box; width: 100%; height: 52px; padding: 0 16px; border: 1.5px solid var(--c-line); border-radius: var(--radius-s);
  background: var(--c-paper); font: 400 var(--fs-body)/1.2 var(--font-text); color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.field > input:hover { border-color: color-mix(in srgb, var(--c-brand) 40%, var(--c-line)); }
.field > input:focus { outline: none; border-color: var(--c-brand); box-shadow: var(--ring); }
.field[data-kit-invalid] > input { border-color: var(--c-error); }
.field__error { margin: 0; font: 500 var(--fs-small)/var(--lh-snug) var(--font-ui); color: var(--c-error); }

/* ---------- the home hero ---------- */
.hero:not([data-scene] *) { position: relative; background: var(--c-paper); }
.hero__media { position: relative; overflow: hidden; background: var(--c-navy); }
.hero__slides { position: absolute; inset: 0; }
/* the kit's gentle change (kit.md "The header that changes its picture"), 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; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { visibility: visible; z-index: 1; }
[data-kit-scene="rotate"] [data-kit-slide] video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide video { object-position: var(--crop-x, 50%) 50%; }
/* the one grade: a soft navy from the panel's bottom-left to nothing at its middle, for the card */
.hero__grade { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: linear-gradient(to top right, color-mix(in srgb, var(--c-navy-deep) 28%, transparent), transparent 50%); }
.hero__scene { position: absolute; z-index: 4; }
.stop.hero__stop { top: 16px; right: 16px; }
.hero__title { margin: 0; font-size: var(--fs-display); color: var(--c-ink); }
.hero__line { margin: 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-ink-soft); text-wrap: balance; }

/* ---------- the exit popup ---------- */
.exit { box-sizing: border-box; width: min(760px, 100% - 2 * var(--gutter)); max-width: none; max-height: calc(100% - 2 * var(--space-4)); margin: auto; padding: 0; border: 0; background: transparent; color: var(--c-ink); overflow: visible; }
.exit::backdrop { background: color-mix(in srgb, var(--c-navy-deep) 55%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.exit:focus { outline: none; }
.exit__in {
  position: relative; display: grid; grid-template-columns: 38% 62%; overflow: hidden;
  background: var(--c-paper); border-radius: var(--radius-l); box-shadow: var(--shadow-l);
  opacity: 0; transform: translateY(16px); 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__pic { display: grid; place-items: center; padding: var(--space-5) var(--space-4); background: var(--c-paper-alt); }
.exit-plan { box-sizing: border-box; width: 100%; padding: var(--space-3); background: var(--c-paper); border-radius: var(--radius-m); box-shadow: var(--shadow-m); }
.exit-plan__title { margin: 0 0 var(--space-3); font: 600 var(--fs-ui)/var(--lh-snug) var(--font-ui); color: var(--c-ink); }
.exit-plan__months { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin-bottom: 12px; }
.exit-plan__m { display: grid; place-items: center; height: 26px; border-radius: 6px; background: var(--c-paper-alt); color: var(--c-ink-soft); font: 600 var(--fs-small)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.exit-plan__m.is-lit { background: var(--c-brand); color: var(--c-on-brand); }
.exit-plan__rows { display: grid; }
.exit-plan__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); margin: 0; padding: 8px 0; border-top: 1px solid var(--c-line); font: 500 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink); }
.exit-plan__state { padding: 3px 8px; border-radius: var(--radius-pill); background: var(--c-brand-light); color: var(--c-brand-dark); font-weight: 600; }
.exit-plan__state--up { background: var(--c-navy); color: var(--c-accent); }
.exit__body { padding: var(--space-5); }
.exit__title { margin: 0 0 var(--space-3); padding-right: var(--space-4); font-size: 2.125rem; color: var(--c-ink); }
.exit__text { margin: 0 0 var(--space-4); color: var(--c-ink-soft); }
.exit__form { display: grid; gap: var(--space-3); margin: 0; }
.exit__form .btn { margin-top: var(--space-1); }
.exit__close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--c-ink); cursor: pointer; }
.exit__close:hover { background: var(--c-paper-alt); }
@media (max-width: 699px) {
  .exit__in { grid-template-columns: 1fr; }
  .exit__pic { display: none; }
  .exit__body { padding: var(--space-4); }
}
@media (prefers-reduced-motion: reduce) { .exit__in { transition: none; } }

/* ---------- the call bar on the phone ---------- */
.callbar { display: none; }
@media (max-width: 899px) {
  .callbar {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: flex; gap: var(--space-2);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    background: var(--c-paper); box-shadow: 0 -1px 0 var(--c-line), var(--shadow-m);
    transform: translateY(100%); transition: transform var(--dur-med) var(--ease-out), visibility 0s linear var(--dur-med);
  }
  .callbar[data-kit-on] { transform: none; transition-delay: 0s; }
  .callbar__cta { flex: 1; }
  .callbar__cta span { font-weight: 500; opacity: .85; }
  .btn.callbar__call:not([data-scene] *) { flex: none; padding: 0 22px; }
}
@media (prefers-reduced-motion: reduce) { .callbar { transition: none; } }

/* ---------- the footer ---------- */
.site-footer { position: relative; background: var(--c-paper); color: var(--c-ink); }
/* the client's skyline as a strip: 240 px at 1440, 150 px at 390, its warm sky kept, fading into the white body */
.site-footer__skyline { position: relative; height: clamp(150px, 116.6px + 8.57vw, 240px); overflow: hidden; background: var(--c-navy); }
.site-footer__sky { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 62%; }
.site-footer__skyline::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(to bottom, color-mix(in srgb, var(--c-paper) 0%, transparent), var(--c-paper)); pointer-events: none; }
.site-footer__body { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-5); padding-block: var(--space-5) var(--space-4); }
.site-footer__logo { display: inline-block; line-height: 0; }
.site-footer__logo img { display: block; width: auto; height: 48px; }
.site-footer__line { max-width: 34ch; margin: var(--space-3) 0; font: 400 var(--fs-ui)/var(--lh-body) var(--font-text); color: var(--c-ink-soft); }
.site-footer__social { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0; font: 600 var(--fs-ui)/1 var(--font-ui); color: var(--c-ink); text-decoration: none; }
.site-footer__social:hover { color: var(--c-brand); }
.site-footer__title { margin: 0 0 var(--space-3); font: 600 var(--fs-small)/var(--lh-snug) var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c-ink-soft); }
.site-footer__col ul { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.site-footer__col a { font: 400 var(--fs-ui)/var(--lh-snug) var(--font-ui); color: var(--c-ink); text-decoration: none; }
.site-footer__col a:not([data-planned]):hover { color: var(--c-brand); text-decoration: underline; text-underline-offset: 3px; }
.site-footer__contact { display: grid; align-content: start; gap: var(--space-2); font: 400 var(--fs-ui)/var(--lh-snug) 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: var(--space-2) var(--space-4); padding-top: var(--space-4); border-top: 1px solid var(--c-line); font: 400 var(--fs-small)/var(--lh-snug) var(--font-ui); color: var(--c-ink-soft); }
.site-footer__legal p { margin: 0; }
.site-footer__legal ul { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin: 0; padding: 0; list-style: none; }
.site-footer__legal a { color: var(--c-ink-soft); text-decoration: none; }
@media (max-width: 899px) {
  .site-footer__body { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-4); }
  .site-footer__brand { grid-column: 1 / -1; }
  .site-footer__logo img { height: 40px; }
}

/* ---------- the action line: a button with the assure line beside it (under it under 600) ---------- */
.cta-line { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); }
.cta-line__assure { display: grid; gap: 2px; margin: 0; font: 500 var(--fs-small)/var(--lh-snug) var(--font-ui); color: var(--c-ink-soft); }
.cta-line__assure span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.cta-line__assure span::before {
  content: ''; width: 14px; height: 14px; flex: none; background: var(--c-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l3 3 6-6.4' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.band--navy .cta-line__assure { color: var(--c-on-navy-soft); }
.band--navy .cta-line__assure span::before { background: var(--c-accent); }
@media (max-width: 599px) {
  .cta-line { flex-direction: column; align-items: stretch; gap: var(--space-3); }
  .cta-line__assure { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1) var(--space-3); }
}

/* ---------- the leak: the client's graphic, rebuilt ---------- */
.leak__grid { display: grid; grid-template-columns: 46% 54%; align-items: center; }
.leak__type { min-width: 0; padding-right: var(--space-4); }
/* the title and its brush stroke share one box, so the stroke is as wide as the widest line */
.leak__head { display: inline-flex; flex-direction: column; max-width: 100%; }
.leak__title { font: 700 clamp(4.5rem, 2.9rem + 6.6vw, 7.5rem)/.9 var(--font-display); letter-spacing: 0; text-transform: uppercase; }
.leak__title > span > span { display: block; white-space: nowrap; }
.leak__navy { color: var(--c-ink); }
.leak__teal { color: var(--c-brand); }
.leak__brush { display: block; width: 100%; height: clamp(14px, 0.5rem + 0.8vw, 22px); margin-top: var(--space-3); fill: var(--c-ink); }
.leak__line { max-width: 30em; margin: var(--space-4) 0 0; font: 500 var(--fs-lead)/var(--lh-body) var(--font-text); color: var(--c-ink-soft); text-wrap: balance; }
.leak__arrow { display: flex; align-items: center; gap: var(--space-3); max-width: 30em; margin: var(--space-4) 0 0; font: 500 1.375rem/1.35 var(--font-text); color: var(--c-ink); }
.leak__arrow-svg { flex: none; width: 76px; height: 30px; fill: var(--c-brand); }
.leak__btn { margin-top: var(--space-5); }
.leak__stage { position: relative; justify-self: center; width: min(100%, 640px); }
.leak__host { position: relative; width: min(100%, 640px); aspect-ratio: 640 / 680; margin-inline: auto; }
.leak__scene { position: absolute; inset: 0; }
@media (max-width: 899px) {
  .leak__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
  .leak__type { padding-right: 0; }
  .leak__stage { display: grid; place-items: center; width: 100%; aspect-ratio: 706 / 750; }
  .leak__arrow { font-size: var(--fs-lead); }
  .leak__arrow-svg { width: 60px; height: 24px; }
}

/* ---------- the calculator (rebuilt in the calculator fix, 22 Oct) ----------
   The picture on top: the month's schedule today and with BlitzBiz, two calendar cards side by side on a pale inset
   (one above the other under 600 px). home.js puts every booked job in its day, as long as what it is worth (--pw),
   as tall as the busiest day allows (--rows); the jobs a missed call loses today are open red marks, the same jobs won
   back with BlitzBiz are teal. It builds once when first on screen ([data-wait], then [data-build]); after that only
   the visitor changes it, all at once. Under it the four inputs in two groups (your numbers, where you stand today),
   then the difference and the button. */
.calc__head { max-width: 760px; margin-bottom: var(--space-5); }
.calc__title { font-size: var(--fs-h2); }
.calc__lead { margin: var(--space-3) 0 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-ink-soft); text-wrap: balance; }
.calc { box-sizing: border-box; padding: var(--space-3); background: var(--c-paper); border-radius: var(--radius-l); box-shadow: var(--shadow-m); }

/* the picture: two months */
.calc__picture {
  --cell-h: 58px; --date-h: 14px; --pg: 2px; --ph-max: 14px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4);
  padding: var(--space-4); background: var(--c-paper-alt); border-radius: calc(var(--radius-l) - var(--space-2));
}
/* the months are drawn flat and crisp (borders and a hard lip, no blur, no gradient), so they look the same at every
   repaint: nothing in the picture changes unless a number does */
.cal { min-width: 0; padding: 20px; background: var(--c-paper); border: 1px solid var(--c-line); border-radius: var(--radius-m); box-shadow: 0 3px 0 var(--c-line); }
.cal--with { border: 2px solid var(--c-brand); box-shadow: 0 4px 0 color-mix(in srgb, var(--c-brand) 30%, var(--c-paper-alt)); }
.cal__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: 32px; }
.cal__name { margin: 0; font: var(--fw-display) var(--fs-h3)/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); color: var(--c-ink); }
.cal__count { display: flex; align-items: center; margin: 0; font: 500 var(--fs-small)/1 var(--font-ui); color: var(--c-ink-soft); white-space: nowrap; }
.cal__count b { margin-right: 6px; font: 600 1.625rem/1 var(--font-ui); letter-spacing: -0.01em; color: var(--c-ink); }
.cal__plus { margin-left: var(--space-2); padding: 5px 9px; border-radius: var(--radius-pill); background: var(--c-brand); color: var(--c-on-brand); font: 600 var(--fs-small)/1 var(--font-ui); }
.cal__sub { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font: 500 var(--fs-small)/var(--lh-snug) var(--font-ui); color: var(--c-ink-soft); }
.cal__icon { flex: none; width: 16px; height: 16px; }
.cal__icon--missed path { fill: none; stroke: var(--c-error); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cal__icon--answered circle { fill: var(--c-brand); }
.cal__icon--answered path { fill: none; stroke: var(--c-on-brand); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.cal--with .cal__sub { color: var(--c-brand-dark); }
.cal__week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin: var(--space-3) 0 6px; font: 600 0.75rem/1 var(--font-ui); color: var(--c-ink-soft); }
.cal__week span { padding-left: 6px; }
.cal__grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-auto-rows: var(--cell-h); gap: 4px; }
.cal__day { display: flex; flex-direction: column; gap: 3px; box-sizing: border-box; min-width: 0; padding: 5px 6px; border-radius: calc(var(--radius-s) - 2px); background: var(--c-paper-alt); }
.cal__day--end { background: color-mix(in srgb, var(--c-paper-alt) 45%, var(--c-paper)); }
.cal__day--out { background: none; border: 1px solid color-mix(in srgb, var(--c-line) 55%, var(--c-paper)); }
.cal__date { flex: none; height: var(--date-h); font: 500 0.75rem/var(--date-h) var(--font-ui); color: var(--c-ink-soft); }
.cal__jobs { display: flex; flex-direction: column; gap: var(--pg); min-height: 0; }
/* a booked job: as long as what it is worth, as tall as the busiest day of the month allows */
.cal__job {
  display: block; flex: none; box-sizing: border-box; width: var(--pw, 52%);
  height: min(var(--ph-max), (var(--cell-h) - 13px - var(--date-h) - (var(--rows, 1) - 1) * var(--pg)) / var(--rows, 1));
  border-radius: var(--radius-pill); transform-origin: left center;
}
.cal__job--booked { background: var(--c-ink); }
.cal__job--back { background: var(--c-logo-blue); }
.cal__job--lost { border: 1.5px dashed var(--c-error); background: color-mix(in srgb, var(--c-error) 9%, var(--c-paper)); }
.cal__job--won { background: var(--c-brand); }
.cal__key { display: flex; flex-wrap: wrap; gap: 6px var(--space-4); margin: var(--space-3) 0 0; padding: 0; list-style: none; font: 500 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.cal__key-item { display: inline-flex; align-items: center; gap: 8px; }
.cal__key-item::before { content: ''; flex: none; box-sizing: border-box; width: 22px; height: 10px; border-radius: var(--radius-pill); }
.cal__key-item--booked::before { background: var(--c-ink); }
.cal__key-item--back::before { background: var(--c-logo-blue); }
.cal__key-item--lost::before { border: 1.5px dashed var(--c-error); background: color-mix(in srgb, var(--c-error) 9%, var(--c-paper)); }
.cal__key-item--won::before { background: var(--c-brand); }
/* it builds once: the month fills day by day, then the lost jobs open up and the won-back ones land */
@keyframes cal-job-in { from { opacity: 0; transform: scaleX(.15); } to { opacity: 1; transform: none; } }
@keyframes cal-job-land { 0% { opacity: 0; transform: translateY(-5px) scale(.55); } 65% { opacity: 1; transform: translateY(0) scale(1.06); } 100% { opacity: 1; transform: none; } }
.calc__picture[data-wait] .cal__job { opacity: 0; }
.calc__picture[data-build] .cal__job { animation: cal-job-in 300ms var(--ease-out) calc(var(--d) * 34ms) both; }
.calc__picture[data-build] .cal__job--lost, .calc__picture[data-build] .cal__job--won { animation: cal-job-land 440ms var(--ease-out) calc(1350ms + var(--d) * 16ms) both; }
@media (prefers-reduced-motion: reduce) { .calc__picture .cal__job { opacity: 1; animation: none; } }

/* the inputs: your numbers, then where you stand today */
.calc__inputs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding: var(--space-5) var(--space-5) var(--space-4); }
.calc__group { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); align-items: start; }
.calc__group--levers { position: relative; }
.calc__group--levers::before { content: ''; position: absolute; top: 0; bottom: 0; left: calc(var(--space-5) / -2); width: 1px; background: var(--c-line); }
.calc__field { display: grid; gap: var(--space-2); min-width: 0; margin: 0; padding: 0; border: 0; }
.calc__label { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); min-height: calc(2em * var(--lh-snug)); }
.calc__label label, .calc__legend-q { font: 600 var(--fs-ui)/var(--lh-snug) var(--font-ui); color: var(--c-ink); }
.calc__legend-q { float: left; width: 100%; min-height: calc(2em * var(--lh-snug)); margin: 0 0 var(--space-2); padding: 0; }
.calc__legend-q + * { clear: both; }
.calc__value { flex: none; font: 600 var(--fs-lead)/1 var(--font-ui); color: var(--c-brand-dark); white-space: nowrap; }
/* the sliders: a teal fill up to the thumb (the kit's --kit-fill) on a pale track, a white thumb ringed in teal */
.calc__range { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 30px; margin: 0; background: none; cursor: pointer; }
.calc__range::-webkit-slider-runnable-track { height: 8px; border-radius: var(--radius-pill); background: linear-gradient(to right, var(--c-brand) var(--kit-fill, 50%), var(--c-brand-light) var(--kit-fill, 50%)); box-shadow: inset 0 1px 2px color-mix(in srgb, var(--c-navy-deep) 10%, transparent); }
.calc__range::-moz-range-track { height: 8px; border-radius: var(--radius-pill); background: var(--c-brand-light); }
.calc__range::-moz-range-progress { height: 8px; border-radius: var(--radius-pill); background: var(--c-brand); }
.calc__range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 28px; height: 28px; margin-top: -10px; border: 3px solid var(--c-brand); border-radius: 50%; background: var(--c-paper); box-shadow: var(--shadow-s); transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.calc__range::-moz-range-thumb { box-sizing: border-box; width: 28px; height: 28px; border: 3px solid var(--c-brand); border-radius: 50%; background: var(--c-paper); box-shadow: var(--shadow-s); }
@media (hover: hover) { .calc__range:hover::-webkit-slider-thumb { box-shadow: var(--shadow-s), 0 0 0 6px color-mix(in srgb, var(--c-brand) 14%, transparent); } }
.calc__range:active::-webkit-slider-thumb { transform: scale(1.08); }
.calc__range:focus-visible { outline: none; }
.calc__range:focus-visible::-webkit-slider-thumb { box-shadow: var(--shadow-s), var(--ring); }
.calc__range:focus-visible::-moz-range-thumb { box-shadow: var(--shadow-s), var(--ring); }
/* each slider's scale: its two ends; the job's ends drawn as a short and a long job, as in the months above */
.calc__scale { display: flex; justify-content: space-between; gap: var(--space-3); margin: -2px 0 0; font: 500 var(--fs-micro)/1 var(--font-ui); color: var(--c-ink-soft); }
.calc__scale--job span { display: inline-flex; align-items: center; gap: 6px; }
.calc__scale--job span::before, .calc__scale--job span::after { flex: none; height: 8px; border-radius: var(--radius-pill); background: var(--c-ink); }
.calc__scale--job span:first-child::before { content: ''; width: 9px; }
.calc__scale--job span:last-child::after { content: ''; width: 26px; }
/* the call-back choice: three pills in one track */
.calc__pills { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-1); padding: var(--space-1); background: var(--c-paper-alt); border-radius: var(--radius-m); box-shadow: inset 0 0 0 1px var(--c-line); }
.calc__pill { position: relative; display: grid; }
.calc__pill > input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.calc__pill > span {
  display: grid; place-items: center; box-sizing: border-box; min-height: 48px; padding: 6px var(--space-2); border-radius: calc(var(--radius-m) - var(--space-1));
  font: 600 var(--fs-small)/1.2 var(--font-ui); color: var(--c-ink-soft); text-align: center;
  transition: background-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.calc__pill > input:checked + span { background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-s), inset 0 0 0 1.5px var(--c-brand); }
.calc__pill > input:focus-visible + span { box-shadow: var(--ring); }
@media (hover: hover) { .calc__pill:hover > input:not(:checked) + span { color: var(--c-ink); } }

/* the difference, and the button */
.calc__result { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3) var(--space-4); margin: 0 var(--space-5) var(--space-3); padding-top: var(--space-4); border-top: 1px solid var(--c-line); }
.calc__diff { display: grid; gap: var(--space-2); }
.calc__diff p { margin: 0; }
.calc__big { font: 500 var(--fs-lead)/1.1 var(--font-ui); color: var(--c-ink); }
.calc__big b { margin-right: 6px; font: var(--fw-display) var(--fs-h2)/1 var(--font-display); letter-spacing: var(--ls-display); color: var(--c-brand); }
.calc__small { font: 500 var(--fs-ui)/var(--lh-snug) var(--font-ui); color: var(--c-ink-soft); }
.calc__small b { font-weight: 600; color: var(--c-ink); }
.calc__source { max-width: 920px; margin: var(--space-3) 0 0; font: 400 var(--fs-small)/var(--lh-body) var(--font-text); color: var(--c-ink-soft); }
@media (prefers-reduced-motion: reduce) { .calc__pill > span, .calc__range::-webkit-slider-thumb { transition: none; } }
@media (max-width: 1099px) {
  .calc__picture { --cell-h: 52px; }
  .calc__inputs { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .calc__group--levers { padding-top: var(--space-4); border-top: 1px solid var(--c-line); }
  .calc__group--levers::before { content: none; }
}
@media (max-width: 899px) {
  .calc__picture { --cell-h: 50px; gap: var(--space-3); padding: var(--space-3); }
  .cal { padding: var(--space-3); }
  .calc__inputs { padding: var(--space-4) var(--space-3); }
  .calc__result { margin-inline: var(--space-3); }
}
/* the phone: one month above the other, the days without their dates, the inputs one under another */
@media (max-width: 599px) {
  .calc { padding: var(--space-2); }
  .calc__picture { --cell-h: 32px; --date-h: 0px; --ph-max: 9px; --pg: 1.5px; grid-template-columns: minmax(0, 1fr); padding: var(--space-2); }
  .cal { padding: 14px; }
  .cal__head { min-height: 28px; }
  .cal__date { display: none; }
  .cal__day { padding: 4px; }
  .cal__job { height: min(var(--ph-max), (var(--cell-h) - 8px - (var(--rows, 1) - 1) * var(--pg)) / var(--rows, 1)); }
  .cal__week { margin-top: var(--space-2); }
  .cal__week span { padding-left: 5px; }
  .cal__key { gap: 4px var(--space-3); }
  .calc__group { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .calc__label, .calc__legend-q { min-height: 0; }
  .calc__result { margin: 0 var(--space-2) var(--space-2); }
  .calc__result .btn { width: 100%; }
}

/* ---------- split, and the stage over footage ---------- */
.split__grid { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: var(--space-5); align-items: center; }
.split--reverse .split__text { order: 2; }
.split__title { font-size: var(--fs-h2); }
.band--navy .split__title { color: var(--c-on-navy); }
.split__line { margin: var(--space-3) 0 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-ink-soft); text-wrap: balance; }
.band--navy .split__line { color: var(--c-on-navy-soft); }
.split .cta-line { margin-top: var(--space-5); }
.stage:not([data-scene] *) { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 10; border-radius: var(--radius-l); box-shadow: var(--shadow-l); background: var(--c-navy-deep); }
.stage__media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage__scene { position: absolute; inset: 0; z-index: 1; }
@media (max-width: 899px) {
  .split__grid { grid-template-columns: minmax(0, 1fr); }
  .split__stage { order: -1; }
}
@media (max-width: 599px) { .stage:not([data-scene] *) { aspect-ratio: 4 / 5; } }

/* ---------- the showcase: tabs and one stage ---------- */
.showcase__head { max-width: 760px; margin-bottom: var(--space-5); }
.showcase__title { font-size: var(--fs-h2); }
.showcase__line { margin: var(--space-3) 0 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-ink-soft); text-wrap: balance; }
.showcase__body { display: grid; grid-template-columns: 30% minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.showcase__tabs { position: relative; display: grid; gap: var(--space-2); }
.tab {
  position: relative; display: grid; gap: 6px; box-sizing: border-box; width: 100%; margin: 0; padding: 20px 20px 26px 28px; overflow: hidden;
  border: 0; border-radius: var(--radius-m); background: transparent; color: var(--c-ink); text-align: left; cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.tab::before { content: ''; position: absolute; left: 0; top: 18px; bottom: 18px; width: 4px; border-radius: 0 4px 4px 0; background: var(--c-brand); transform: scaleY(0); transition: transform var(--dur-med) var(--ease-out); }
@media (hover: hover) { .tab:hover { background: var(--c-paper-alt); } }
.tab[aria-selected="true"] { background: var(--c-paper); box-shadow: var(--shadow-m); }
.tab[aria-selected="true"]::before { transform: none; }
.tab:focus-visible { outline: none; box-shadow: var(--ring); }
.tab[aria-selected="true"]:focus-visible { box-shadow: var(--shadow-m), var(--ring); }
.tab__name { font: var(--fw-display) 1.5rem/var(--lh-tight) var(--font-display); letter-spacing: var(--ls-display); }
.tab__line { font: 400 var(--fs-ui)/var(--lh-snug) var(--font-text); color: var(--c-ink-soft); }
/* the active tab's thin progress line fills over its scene's length while the tabs advance by themselves */
.tab__progress { position: absolute; left: 28px; right: 20px; bottom: 12px; height: 2px; overflow: hidden; border-radius: 1px; background: var(--c-line); opacity: 0; transition: opacity var(--dur-fast) var(--ease-out); }
.tab__progress::after { content: ''; position: absolute; inset: 0; background: var(--c-brand); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
.showcase[data-auto] .tab[aria-selected="true"] .tab__progress { opacity: 1; }
.showcase__stage { position: relative; min-width: 0; }
/* the stage is a size container, so a photo zoomed past cover keeps its place in it at every width (--pw, --px, --py:
   the photo's width and offset as shares of the stage, from the scenes' Stage tables) */
.showcase__media { position: relative; overflow: hidden; isolation: isolate; aspect-ratio: 880 / 580; border-radius: var(--radius-l); box-shadow: var(--shadow-l); background: var(--c-paper-alt); container-type: size; }
.showcase__photo { position: absolute; inset: 0; margin: 0; }
.showcase__photo > img { position: absolute; left: calc(100cqw * var(--px, 0)); top: calc(100cqh * var(--py, 0)); width: calc(100cqw * var(--pw, 1)); height: auto; max-width: none; }
.showcase__photo .screen { background: var(--c-paper); }
.showcase__screen-scene { position: absolute; inset: 0; }
.showcase__card { display: none; position: absolute; z-index: 3; overflow: hidden; border-radius: var(--sc-radius); box-shadow: var(--sc-card-shadow); }
.showcase__card-scene { position: absolute; inset: 0; }
.showcase__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase__clip-scene { position: absolute; inset: 0; z-index: 1; }
.stop.showcase__stop { z-index: 7; }
.showcase__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-4); margin-top: var(--space-3); }
.showcase__about { display: none; margin: 0; }
.showcase__more { display: inline-flex; align-items: center; gap: 6px; font: 600 var(--fs-ui)/var(--lh-snug) var(--font-ui); color: var(--c-brand); text-decoration: none; }
.showcase__more:not([data-planned]):hover { color: var(--c-brand-dark); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 899px) {
  .showcase__body { grid-template-columns: minmax(0, 1fr); gap: var(--space-3); }
  /* the tabs: a row of pills that scrolls sideways inside its own row only */
  .showcase__tabs { display: flex; gap: var(--space-2); margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter) 6px; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; scroll-padding-inline: var(--gutter); }
  .showcase__tabs::-webkit-scrollbar { display: none; }
  .tab { flex: none; display: block; width: auto; height: 44px; padding: 0 18px; border-radius: var(--radius-pill); background: var(--c-paper); box-shadow: inset 0 0 0 1.5px var(--c-line); }
  .tab::before, .tab__line { display: none; }
  .tab__name { font: 600 var(--fs-ui)/44px var(--font-ui); letter-spacing: 0; white-space: nowrap; }
  .tab[aria-selected="true"] { background: var(--c-ink); color: var(--c-on-navy); box-shadow: none; }
  .tab[aria-selected="true"]:focus-visible { box-shadow: var(--ring); }
  .tab__progress { left: 18px; right: 18px; bottom: 7px; background: color-mix(in srgb, var(--c-on-navy) 25%, transparent); }
  .tab__progress::after { background: var(--c-accent); }
  .showcase__about { display: block; flex: 1 1 100%; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-soft); }
}
@media (prefers-reduced-motion: reduce) { .tab, .tab::before, .tab__progress { transition: none; } }

/* ---------- the video feature ---------- */
.video-feature__head { max-width: 760px; margin: 0 auto var(--space-5); text-align: center; }
.video-feature__title { font-size: var(--fs-h2); }
.video-feature__line { margin: var(--space-3) 0 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-ink-soft); text-wrap: balance; }
.video-feature__frame { position: relative; max-width: 1080px; margin-inline: auto; overflow: hidden; isolation: isolate; aspect-ratio: 16 / 9; border-radius: var(--radius-l); box-shadow: var(--shadow-l); background: var(--c-navy-deep); }
.video-feature__video { display: block; width: 100%; height: 100%; object-fit: cover; }
.video-feature__play {
  position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; gap: var(--space-3);
  width: 100%; margin: 0; padding: 0; border: 0; background: color-mix(in srgb, var(--c-navy-deep) 18%, transparent); color: var(--c-paper); cursor: pointer;
}
.video-feature__icon { display: grid; place-items: center; flex: none; width: 88px; height: 88px; border-radius: 50%; background: var(--c-brand); box-shadow: var(--shadow-l); transition: transform var(--dur-fast) var(--ease-out), background-color var(--dur-fast) var(--ease-out); }
.video-feature__icon::before { content: ''; width: 28px; height: 32px; margin-left: 6px; background: var(--c-on-brand); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.video-feature__play:hover .video-feature__icon { transform: scale(1.05); background: var(--c-brand-dark); }
/* the focus inside the frame (its overflow would cut an outline outside it), and a white ring round the icon */
.video-feature__play:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -8px; border-radius: var(--radius-l); }
.video-feature__play:focus-visible .video-feature__icon { box-shadow: 0 0 0 4px var(--c-paper), var(--shadow-l); }
.video-feature__len { padding: 10px 16px; border-radius: var(--radius-pill); background: color-mix(in srgb, var(--c-navy-deep) 55%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); font: 600 var(--fs-ui)/1 var(--font-ui); white-space: nowrap; }
.video-feature[data-playing] .video-feature__play { display: none; }
@media (prefers-reduced-motion: reduce) { .video-feature__icon { transition: none; } }

/* ---------- the FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 760px); justify-content: space-between; gap: var(--space-4) var(--space-5); align-items: start; }
.faq__title { font-size: var(--fs-h2); }
.faq__list { max-width: 860px; border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); background: var(--c-paper); }
.faq__item > summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: 22px 0; font: 600 1.125rem/1.4 var(--font-text); color: var(--c-ink); cursor: pointer; list-style: none; }
.faq__item > summary::-webkit-details-marker { display: none; }
/* the teal plus that turns into a minus */
.faq__item > summary::after {
  content: ''; flex: none; width: 32px; height: 32px; border-radius: 50%;
  background: linear-gradient(var(--c-brand), var(--c-brand)) center / 14px 2px no-repeat, linear-gradient(var(--c-brand), var(--c-brand)) center / 2px 14px no-repeat, var(--c-brand-light);
  transition: background-size var(--dur-med) var(--ease-out);
}
.faq__item[open] > summary::after { background-size: 14px 2px, 2px 0; }
@media (hover: hover) { .faq__item > summary:hover { color: var(--c-brand-dark); } }
.faq__item > summary:focus-visible { outline: none; border-radius: var(--radius-s); box-shadow: var(--ring); }
.faq__a { padding: 0 56px 24px 0; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--c-ink-soft); }
.faq__a p { margin: 0; }
@media (max-width: 899px) {
  .faq__grid { grid-template-columns: minmax(0, 1fr); }
  .faq__a { padding-right: 0; }
}
@media (prefers-reduced-motion: reduce) { .faq__item > summary::after { transition: none; } }

/* ---------- the CTA band: full-bleed footage under a navy gradient, the form box at the right ---------- */
.cta-band { position: relative; overflow: hidden; isolation: isolate; background: var(--c-navy); color: var(--c-on-navy); }
.cta-band__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; container-type: size; }
.cta-band__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, color-mix(in srgb, var(--c-navy) 90%, transparent), color-mix(in srgb, var(--c-navy) 0%, transparent) 60%); }
.cta-band__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cta-band__grid { display: grid; grid-template-columns: 46% minmax(0, 1fr); align-items: center; }
.cta-band__title { font-size: var(--fs-h2); color: var(--c-on-navy); }
.cta-band__line { margin: var(--space-3) 0 0; font-size: var(--fs-lead); line-height: var(--lh-body); color: var(--c-on-navy-soft); text-wrap: balance; }
.cta-band__form { justify-self: end; width: min(100%, 480px); }
@media (max-width: 899px) {
  .cta-band { padding-top: 0; }
  .cta-band__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; }
  .cta-band__media::after { display: none; }
  .cta-band__grid { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); padding-top: var(--space-5); }
  .cta-band__form { justify-self: stretch; width: auto; }
}