/* home.css: the home page's own layout. It only places and sizes its parts, with the tokens of system.css; every
   component's look is in components.css. */

/* ---------- hero: the field clips fill from the right and fade into night blue under the words ---------- */
.hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: clamp(700px, 100svh, 940px); padding: 96px 0 64px; overflow: hidden; background: var(--c-brand-dark); color: var(--c-on-brand); }
.hero__stage { position: absolute; inset: 0 0 0 26%; z-index: 0; }
[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::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(90deg, rgba(7, 42, 115, 1) 0%, rgba(7, 42, 115, 1) 5%, rgba(7, 42, 115, .9) 16%, rgba(7, 42, 115, .74) 32%, rgba(7, 42, 115, .42) 46%, rgba(7, 42, 115, .12) 62%, rgba(7, 42, 115, 0) 74%),
  linear-gradient(0deg, rgba(7, 42, 115, .45) 0%, rgba(7, 42, 115, 0) 26%); }
.hero__win { right: 4%; bottom: 13%; }
.hero__slide[data-prev] .hero__win { opacity: clamp(0, calc(1 - var(--kit-move, 1) * 3), 1); }
.hero__inner { position: relative; z-index: 3; }
.hero__copy { width: min(640px, 54vw); }
.hero__title { font-size: var(--fs-display); line-height: 1.04; }
.hero__title > span[aria-hidden] { display: block; }
.hero__word::after { content: "."; color: var(--c-on-brand); }
.hero__word { display: block; color: var(--c-accent); opacity: calc(1 - var(--kit-swap, 0) * .85); transform: translateY(calc(var(--kit-swap, 0) * 8px)); }
.hero__line { margin-top: 22px; max-width: 54ch; font-size: var(--fs-lead); line-height: 1.55; color: color-mix(in srgb, var(--c-on-brand) 90%, transparent); }
.hero__line strong { color: var(--c-on-brand); font-weight: 800; }
.hero .picker { margin-top: 30px; max-width: 520px; }
.hero__stop { right: 24px; bottom: 24px; }

@media (max-width: 1100px) {
  .hero__stage { left: 20%; }
  .hero__copy { width: min(600px, 60vw); }
}
@media (max-width: 899px) {
  .hero { display: block; min-height: 0; padding: 0 0 40px; }
  .hero__stage { position: relative; inset: auto; height: clamp(230px, 34svh, 340px); }
  .hero__slide::after { background: linear-gradient(0deg, rgba(7, 42, 115, 1) 0%, rgba(7, 42, 115, .55) 30%, rgba(7, 42, 115, 0) 62%), linear-gradient(180deg, rgba(7, 42, 115, .6) 0%, rgba(7, 42, 115, 0) 34%); }
  .hero__win { left: 16px; right: auto; bottom: 10px; max-width: calc(100% - 32px); padding: 10px 14px 10px 10px; }
  .hero__win .win__icon { width: 38px; height: 38px; }
  .hero__inner { padding-top: 14px; }
  .hero__copy { width: 100%; }
  .hero__line { margin-top: 14px; font-size: 16px; }
  .hero .picker { margin-top: 20px; max-width: none; }
  .hero__stop { top: 76px; right: 12px; bottom: auto; }
}

/* ---------- plan: the tour over aerial footage ---------- */
.tour__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; max-width: 1040px; margin: 0 auto 18px; }
.tour__tabs [role="tab"] { position: relative; display: grid; gap: 4px; padding: 14px 18px 16px; overflow: hidden; border: 1.5px solid transparent; border-radius: var(--radius-l); background: var(--c-paper-alt);
  text-align: left; cursor: pointer; transition: background var(--dur-fast), border-color var(--dur-fast), box-shadow var(--dur-fast); }
.tour__tabs [role="tab"] b { font: 800 17px/1.25 var(--font-ui); color: var(--c-ink); }
.tour__tabs [role="tab"] span { font: 600 14px/1.35 var(--font-ui); color: var(--c-ink-soft); }
.tour__tabs [role="tab"]:hover { border-color: var(--c-line); }
.tour__tabs [role="tab"][aria-selected="true"] { background: var(--c-paper); border-color: var(--c-line); box-shadow: var(--shadow-m); }
.tour__tabs [role="tab"]::after { content: ""; position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--c-accent); transform: scaleX(0); transform-origin: 0 50%; }
.tour__tabs[data-kit-on] [role="tab"][aria-selected="true"]::after { transform: scaleX(var(--kit-fill, 0)); }
.tour__tabs:not([data-kit-on]) [role="tab"][aria-selected="true"]::after { transform: scaleX(1); background: var(--c-brand); }
#plan { padding-top: clamp(72px, 7vw, 96px); }
#plan .head { margin-bottom: 28px; }
.tour__stage { position: relative; height: clamp(470px, 36vw, 500px); overflow: hidden; border-radius: var(--radius-l); background: var(--c-brand-dark); box-shadow: var(--shadow-l); }
.tour__bg { position: absolute; inset: 0; }
.tour__bg video { width: 100%; height: 100%; object-fit: cover; }
.tour__bg::after { content: ""; position: absolute; inset: 0; background: rgba(7, 42, 115, .22); }
.tour__panel { position: absolute; inset: 0; display: grid; place-items: center; outline-offset: -4px; }
.tour__scene { width: min(640px, 100%); }
.tour__scene--radar { width: min(760px, 100%); height: 100%; }
.tour__stop { top: 14px; right: 14px; }
.tour__cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px 32px; max-width: 1040px; margin: 22px auto 0; padding: 20px 24px; border-radius: var(--radius-l); background: var(--c-paper-alt); }
.tour__cta > p { max-width: 46ch; font-size: 17px; }
.tour__cta .cta { justify-items: center; }
@media (max-width: 760px) {
  .tour__tabs { grid-template-columns: 1fr; }
  .tour__tabs [role="tab"] { padding: 12px 14px 14px; }
  .tour__stage { height: 520px; }
  .tour__cta { padding: 18px; }
  .tour__cta .cta { justify-items: stretch; width: 100%; }
}

/* ---------- how: three steps lit by the chat ---------- */
.how__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(40px, 6vw, 84px); align-items: center; }
.how__steps { display: grid; gap: 12px; margin: 34px 0 32px; }
.how__step { display: grid; grid-template-columns: 46px minmax(0, 1fr); gap: 16px; align-items: start; padding: 16px 18px; border: 1px solid color-mix(in srgb, var(--c-on-brand) 22%, transparent); border-radius: var(--radius-l);
  background: color-mix(in srgb, var(--c-on-brand) 7%, transparent); transition: background var(--dur-med) var(--ease-out), color var(--dur-med), border-color var(--dur-med); }
.how__num { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: color-mix(in srgb, var(--c-on-brand) 16%, transparent); font: 800 20px/1 var(--font-display); }
.how__title { font: 800 18px/1.3 var(--font-ui); }
.how__chip { display: inline-block; margin-left: 6px; padding: 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--c-on-brand) 16%, transparent); font: 700 13px/1.2 var(--font-ui); vertical-align: 2px; }
.how__step p { margin-top: 4px; color: color-mix(in srgb, var(--c-on-brand) 86%, transparent); }
.how__step[aria-current="step"] { background: var(--c-paper); border-color: var(--c-paper); color: var(--c-ink); }
.how__step[aria-current="step"] .how__num { background: var(--c-accent); color: var(--c-ink); }
.how__step[aria-current="step"] .how__chip { background: var(--c-brand-light); color: var(--c-brand-text); }
.how__step[aria-current="step"] p { color: var(--c-ink-soft); }
.how__media { position: relative; padding-bottom: 8%; }
.how__frame { width: min(100%, 470px); margin-left: auto; aspect-ratio: 4 / 5; box-shadow: var(--shadow-l); }
.how__video { object-position: 9% 50%; }
.how__stop { right: 24px; bottom: 24px; }

.chat { position: absolute; left: 0; bottom: 0; z-index: 2; width: min(330px, 74%); overflow: hidden; border-radius: var(--radius-l); background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l);
  opacity: calc(1 - var(--kit-out, 0)); }
.chat__head { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-bottom: 1px solid var(--c-line); }
.chat__avatar { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--c-brand-dark); }
.chat__avatar img { width: 26px; height: 26px; }
.chat__head b { display: block; font: 800 15px/1.2 var(--font-ui); }
.chat__head small { display: block; font: 600 13px/1.3 var(--font-ui); color: var(--c-ink-soft); }
.chat__body { display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; max-height: 352px; padding: 14px; overflow: hidden; }
.msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font: 600 14px/1.4 var(--font-ui); opacity: clamp(0, var(--kit-in, 1), 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.msg--bot { align-self: flex-start; background: var(--c-paper-alt); border-bottom-left-radius: 4px; }
.msg--you { align-self: flex-end; background: var(--c-brand); color: var(--c-on-brand); border-bottom-right-radius: 4px; }
.msg--go { background: var(--c-accent); color: var(--c-ink); font-weight: 800; }
.msg--chips { display: flex; gap: 6px; padding: 0; max-width: none; }
.msg--chips span { display: grid; place-items: center; min-width: 40px; height: 34px; padding: 0 8px; border: 1.5px solid var(--c-line); border-radius: var(--radius-m); font: 800 14px/1 var(--font-display); transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast); }
.msg--chips span[data-kit-on] { background: var(--c-ink); border-color: var(--c-ink); color: var(--c-on-brand); }
.msg--typing { display: flex; gap: 5px; align-items: center; height: 36px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink-soft); animation: dot 1s infinite ease-in-out; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg--typing i { animation: none; } }
.msg--check { display: grid; gap: 8px; min-width: 76%; }
.msg__bar { display: block; height: 6px; border-radius: 6px; background: var(--c-line); overflow: hidden; position: relative; }
.msg__bar::after { content: ""; position: absolute; inset: 0; background: var(--c-brand); transform: scaleX(var(--kit-fill, 0)); transform-origin: 0 50%; }
.msg--result { align-self: stretch; max-width: none; display: grid; gap: 2px; padding: 14px; background: var(--c-brand-dark); color: var(--c-on-brand); border-radius: var(--radius-l); }
.msg--result small { font: 700 13px/1.2 var(--font-ui); color: color-mix(in srgb, var(--c-on-brand) 78%, transparent); }
.msg--result b { font: 800 21px/1.15 var(--font-display); font-stretch: var(--stretch-display); }
.msg__by { font: 600 13px/1.3 var(--font-ui); color: var(--c-accent); }
.msg__bars { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 3px; height: 46px; margin: 8px 0 4px; }
.msg__bars i { height: calc(var(--h) * 100%); border-radius: 3px 3px 1px 1px; background: color-mix(in srgb, var(--c-electric) 82%, var(--c-on-brand)); transform-origin: bottom; transform: scaleY(clamp(0, var(--kit-in, 1), 1.05)); }
.msg__bars i:last-child { background: var(--c-accent); }
.msg__from { font: 600 13px/1.3 var(--font-ui); color: color-mix(in srgb, var(--c-on-brand) 80%, transparent); }
@media (max-width: 899px) {
  .how__grid { grid-template-columns: 1fr; }
  .how__media { padding-bottom: 0; }
  .how__frame { width: 100%; aspect-ratio: 4 / 3; }
  .chat { position: relative; width: calc(100% - 24px); margin: -120px auto 0; }
  .how__stop { top: 16px; right: 16px; bottom: auto; }
}

/* ---------- worth: the calculator. The three sliders on a white card; beside it, on the night sky, the year's new
   clients burst as a firework: one petal per new client (leads and conversion add petals), each as long as what one
   client is worth (the value slider stretches them), its glow as big as the year's revenue (the kit's --kit-size).
   It blooms once, month by month, on the kit's year (--kit-year); after that only a slider changes it. ---------- */
.worth__box { display: grid; grid-template-columns: minmax(0, 410px) minmax(0, 1fr); padding: 14px; border-radius: var(--radius-l); background: var(--c-brand-dark); color: var(--c-on-brand); box-shadow: var(--shadow-l); }
.worth__ctl { display: flex; flex-direction: column; padding: 8px 28px; border-radius: var(--radius-m); background: var(--c-paper); color: var(--c-ink); }
.worth__in { flex: 1 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; align-content: center; gap: 4px 16px; padding: 22px 0 20px; }
.worth__in + .worth__in { border-top: 1px solid var(--c-line); }
.worth__in label { font: 800 16px/1.3 var(--font-ui); }
.worth__in output { font: 800 28px/1 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-align: right; }
/* the slider: a blue fill up to the thumb (the kit's --kit-fill), a yellow thumb; the whole 36 px row takes the hand */
.worth__in input[type="range"] { grid-column: 1 / -1; display: block; width: 100%; height: 36px; margin: 8px 0 0; padding: 0; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.worth__in input[type="range"]::-webkit-slider-runnable-track { height: 10px; border-radius: 10px; background: linear-gradient(90deg, var(--c-brand) var(--kit-fill, 50%), var(--c-line) var(--kit-fill, 50%)); }
.worth__in input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; box-sizing: border-box; width: 30px; height: 30px; margin-top: -10px; border: 4px solid var(--c-paper); border-radius: 50%; background: var(--c-accent);
  box-shadow: 0 0 0 1.5px var(--c-accent-deep), 0 6px 14px -4px rgba(3, 22, 54, .55); transition: transform var(--dur-fast) var(--ease-out); }
.worth__in input[type="range"]::-moz-range-track { height: 10px; border-radius: 10px; background: var(--c-line); }
.worth__in input[type="range"]::-moz-range-progress { height: 10px; border-radius: 10px; background: var(--c-brand); }
.worth__in input[type="range"]::-moz-range-thumb { box-sizing: border-box; width: 30px; height: 30px; border: 4px solid var(--c-paper); border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 1.5px var(--c-accent-deep), 0 6px 14px -4px rgba(3, 22, 54, .55); }
.worth__in input[type="range"]:hover::-webkit-slider-thumb, .worth__in input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.1); }
.worth__scale { grid-column: 1 / -1; display: flex; justify-content: space-between; margin-top: 8px; font: 700 13px/1 var(--font-ui); color: var(--c-ink-soft); }
.worth__hint { grid-column: 1 / -1; margin-top: 12px; font-size: 14px; line-height: 1.45; color: var(--c-ink-soft); }

.worth__sky { display: grid; align-content: end; padding: 26px 28px 18px 40px; }
.worth__burst { justify-self: center; width: min(440px, 100%); aspect-ratio: 1; }
.worth__burst svg { display: block; width: 100%; height: 100%; overflow: visible; }
.worth__glow { fill: var(--c-electric); opacity: .36; transform-box: view-box; transform-origin: 0 0;
  transform: scale(calc((.4 + var(--kit-size, .6) * .75) * (.3 + .7 * var(--kit-year, 1)))); }
.worth__tier--pink { fill: var(--c-pink); }
.worth__tier--yellow { fill: var(--c-accent); }
.worth__tier--cyan { fill: var(--c-cyan); }
/* each petal flies out from the core when the year reaches it (--k of --n), then stays */
.worth__petals use { --a: clamp(0, calc(var(--kit-year, 1) * var(--n, 1) - var(--k, 0)), 1);
  transform-box: view-box; transform-origin: 0 0; transform: rotate(var(--r, 0deg)) scale(calc(var(--a) * var(--j, 1))); opacity: clamp(0, calc(var(--a) * 3), 1); }
.worth__total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; margin-top: 8px; }
.worth__total b { font: 800 60px/1.02 var(--font-display); font-stretch: var(--stretch-display); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.worth__total > span { font: 700 17px/1.3 var(--font-ui); color: color-mix(in srgb, var(--c-on-brand) 86%, transparent); }
.worth__facts { display: flex; flex-wrap: wrap; gap: 6px 26px; margin-top: 12px; font: 700 15px/1.4 var(--font-ui); color: color-mix(in srgb, var(--c-on-brand) 86%, transparent); }
.worth__facts b { font-weight: 800; color: var(--c-on-brand); }
.worth__key { display: inline-block; width: 15px; height: 23px; margin-right: 6px; vertical-align: -5px; fill: var(--c-pink); }
.worth__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 22px; }
.worth__note { flex: 1 1 220px; font: 600 14px/1.4 var(--font-ui); color: color-mix(in srgb, var(--c-on-brand) 78%, transparent); }
@media (max-width: 1080px) {
  .worth__box { grid-template-columns: minmax(0, 360px) minmax(0, 1fr); }
  .worth__ctl { padding: 6px 22px; }
  .worth__sky { padding: 24px 22px 16px 28px; }
  .worth__total b { font-size: 48px; }
}
@media (max-width: 860px) {
  .worth__box { grid-template-columns: minmax(0, 1fr); padding: 10px; }
  .worth__ctl { padding: 2px 18px; }
  .worth__sky { display: flex; flex-direction: column; padding: 22px 10px 12px; }
  .worth__burst { order: 3; align-self: center; width: min(360px, 100%); margin: 14px 0 4px; }
  .worth__total { order: 1; margin-top: 0; }
  .worth__facts { order: 2; flex-direction: column; gap: 4px; }
  .worth__foot { order: 4; margin-top: 14px; }
  .worth__total b { font-size: 42px; }
}
@media (max-width: 560px) { .worth__foot .btn { width: 100%; } }

/* ---------- outcomes: four rows of the owner's day ---------- */
.outcomes__rows { display: grid; gap: clamp(64px, 8vw, 112px); }
.outcome { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(36px, 6vw, 96px); align-items: center; }
.outcome--right { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); }
.outcome--right .outcome__media { order: 2; }
.outcome__media { position: relative; }
.outcome__frame { aspect-ratio: 16 / 10; box-shadow: 0 30px 70px -30px rgba(0, 0, 0, .6); }
.outcome__media .outcome__scene { position: absolute; top: 8%; z-index: 2; width: 384px; max-width: 72%; }
.outcome--left .outcome__media .outcome__scene { right: -48px; }
.outcome--right .outcome__media .outcome__scene { left: -48px; }
.outcome__copy .h3 { font-size: clamp(26px, 2.4vw, 34px); }
.outcome__copy p { margin-top: 14px; max-width: 44ch; font-size: 17.5px; color: color-mix(in srgb, var(--c-on-brand) 86%, transparent); }
.outcome__copy .link-arrow { margin-top: 18px; }
#outcome-answer .outcome__media .outcome__scene { width: 300px; top: 6%; }
/* the "Month 6" card overhangs the chart card's foot: room under the legend so it never covers it */
#outcome-work [data-scene="out-work"] .card { padding-bottom: 32px; }
.outcomes__stop { right: 24px; top: 24px; }
@media (max-width: 899px) {
  .outcome, .outcome--right { grid-template-columns: 1fr; gap: 22px; }
  .outcome--right .outcome__media { order: 0; }
  .outcome__media .outcome__scene, .outcome--left .outcome__media .outcome__scene, .outcome--right .outcome__media .outcome__scene, #outcome-answer .outcome__media .outcome__scene { position: relative; top: auto; left: auto; right: auto; width: calc(100% - 20px); max-width: 384px; margin: -84px 0 0 10px; }
}

/* ---------- compare: what they report, what we give ---------- */
.compare__box { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.side { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 480px; overflow: hidden; border-radius: var(--radius-l); box-shadow: var(--shadow-m); }
.side__photo { position: absolute; inset: 0 0 auto 0; height: 62%; z-index: -2; }
.side__photo img { width: 100%; height: 100%; object-fit: cover; }
.side--before { background: #E9EDF3; color: var(--c-ink); }
.side--before .side__photo img { filter: grayscale(1) contrast(.92) brightness(1.02); }
.side--before::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, #E9EDF3 46%, rgba(233, 237, 243, .6) 64%, rgba(233, 237, 243, .1) 100%); }
.side--after { background: var(--c-brand); color: var(--c-on-brand); }
.side--after::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, var(--c-brand) 46%, rgba(14, 111, 232, .55) 66%, rgba(14, 111, 232, .05) 100%); }
.side__body { padding: 26px 28px 24px; }
.side__tag { display: inline-flex; align-items: center; gap: 8px; margin-bottom: 8px; font: 800 14px/1 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; }
.side__tag img { width: 22px; height: 22px; }
.side--before .side__tag { color: var(--c-ink-soft); }
.side__list li { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-top: 1px solid color-mix(in srgb, currentColor 18%, transparent); font: 700 17px/1.35 var(--font-ui); }
.side__mark { position: relative; flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; }
.side__mark svg { position: relative; z-index: 1; }
.side--before .side__mark { background: #D3D9E3; color: var(--c-accent-text); }
.side--before .side__mark svg { opacity: calc(var(--kit-in, 1) * (1 - var(--kit-out, 0))); transform: scale(calc(.4 + var(--kit-in, 1) * .6)); }
.side--before .side__text { position: relative; opacity: calc(1 - min(1, var(--kit-in, 1)) * .4 * (1 - var(--kit-out, 0))); }
.side--before .side__text::after { content: ""; position: absolute; left: -2px; right: -2px; top: 54%; height: 2.5px; border-radius: 2px; background: var(--c-accent-text);
  transform: scaleX(calc(min(1, var(--kit-in, 1)) * (1 - var(--kit-out, 0)))); transform-origin: 0 50%; }
.side--after .side__mark { background: color-mix(in srgb, var(--c-on-brand) 18%, transparent); color: var(--c-ink); }
.side--after .side__mark::before { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: 50%; background: var(--c-accent); transform: scale(calc(min(1, var(--kit-in, 1)) * (1 - var(--kit-out, 0)))); }
.side--after .side__mark svg { z-index: 2; opacity: calc(min(1, var(--kit-in, 1)) * (1 - var(--kit-out, 0))); }
.side--after .side__mark .burst { z-index: 0; }
.side--after .side__text { opacity: calc(.62 + min(1, var(--kit-in, 1)) * .38 * (1 - var(--kit-out, 0))); }
.compare__stop { right: 24px; top: 24px; }
@media (max-width: 860px) {
  .compare__box { grid-template-columns: 1fr; }
  .side { min-height: 420px; }
}

/* ---------- leader: Cynthia ---------- */
.leader { overflow: clip; }
.leader__grid { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(40px, 7vw, 104px); align-items: center; }
.leader__photo { position: relative; max-width: 440px; }
.leader__photo .petals { --size: 230px; right: -84px; top: -86px; z-index: 0; }
.leader__img { position: relative; z-index: 1; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 26%; border-radius: var(--radius-l); box-shadow: var(--shadow-l); }
.leader__copy .lead { margin-top: 18px; }
.leader__name { display: grid; gap: 2px; margin-top: 26px; padding-left: 16px; border-left: 4px solid var(--c-accent); }
.leader__name b { font: 800 21px/1.2 var(--font-display); font-stretch: var(--stretch-display); }
.leader__name span { font: 600 15px/1.3 var(--font-ui); color: var(--c-ink-soft); }
.leader__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 30px; }
@media (max-width: 860px) {
  .leader__grid { grid-template-columns: 1fr; }
  .leader__photo { width: min(78%, 360px); margin: 24px auto 0; }
  .leader__photo .petals { --size: 170px; right: -56px; top: -60px; }
}

/* ---------- who ---------- */
.who .head { max-width: 760px; }

/* ---------- FAQ on the home page ---------- */
.home-faq__grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.home-faq__grid .faq { max-width: none; }
@media (max-width: 860px) { .home-faq__grid { grid-template-columns: 1fr; gap: 0; } }

/* ---------- close: the last push over a main street at dusk ---------- */
.close { position: relative; isolation: isolate; overflow: hidden; padding: clamp(104px, 13vw, 176px) 0; background: var(--c-brand-dark); color: var(--c-on-brand); text-align: center; }
.close__bg { position: absolute; inset: 0; z-index: -3; }
.close__bg video { width: 100%; height: 100%; object-fit: cover; }
.close__shade { position: absolute; inset: 0; z-index: -2; background:
  radial-gradient(ellipse 46% 52% at 50% 48%, rgba(7, 42, 115, .88) 0%, rgba(7, 42, 115, .66) 55%, rgba(7, 42, 115, .14) 100%),
  linear-gradient(180deg, rgba(7, 42, 115, .5) 0%, rgba(7, 42, 115, 0) 38%); }
.close__inner { position: relative; display: grid; justify-items: center; gap: 16px; }
.close__petals { --size: 380px; left: 50%; top: -150px; margin-left: -190px; --o: .2; z-index: -1; }
.close__title { font-size: clamp(42px, 6vw, 84px); }
.close__line { font-size: clamp(18px, 1.6vw, 22px); }
.close .picker { width: min(560px, 100%); margin-top: 14px; text-align: left; }
.close .picker legend { text-align: center; width: 100%; }
.close__stop { right: 24px; bottom: 24px; }