/* home.css: the home page's parts, placed and sized with the tokens of system.css. */

/* ================= hero: full-bleed footage, one field at a time (kit rotate) ================= */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: clamp(640px, calc(100svh - var(--header-h)), 900px); overflow: hidden; background: var(--c-paper); }
.hero__media { position: absolute; inset: 0; z-index: 0; }

/* the kit's header CSS (kit\kit.md), 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; }
[data-kit-scene="rotate"]:not(:has([data-kit-slide][data-kit-on])) [data-kit-slide]:not([data-kit-slide] ~ [data-kit-slide]) { visibility: visible; }
[data-kit-scene="rotate"] [data-kit-slide] video { inset: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }

/* this site's grade, its shade behind the words, and each field's card */
.hero__slide video { object-position: var(--pos, 50% 50%); filter: saturate(.94) contrast(1.04); }
.hero__slide::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgb(0 0 0 / .95) 0%, rgb(0 0 0 / .88) 24%, rgb(0 0 0 / .6) 44%, rgb(0 0 0 / .18) 64%, rgb(0 0 0 / 0) 80%),
    linear-gradient(0deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / 0) 32%),
    linear-gradient(180deg, rgb(0 0 0 / .35) 0%, rgb(0 0 0 / 0) 16%); }
.hero__card { position: absolute; z-index: 2; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); bottom: clamp(88px, 15%, 150px); opacity: clamp(0, var(--kit-in, 1), 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 16px)); }

.hero__in { position: relative; z-index: 4; width: min(100% - 2 * var(--gutter), var(--max-w)); padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(5rem, 3rem + 5vw, 7.5rem); }
.hero__copy { display: grid; gap: var(--space-3); max-width: 680px; }
.hero__title { font-size: clamp(1.9rem, calc((100vw - 2 * var(--gutter)) / 10.8), 4rem); line-height: 1; letter-spacing: -.015em; }
.hero__lines, .hero__l { display: block; }
.hero__l { white-space: nowrap; }
/* the word changes in a quick focus pull, never gone: at the turn it is a soft orange blur, so the line never reads "Your booked solid." */
.hero__word { display: inline-block; color: var(--c-brand-text); opacity: calc(1 - .55 * var(--kit-swap, 0)); transform: translateY(calc(var(--kit-swap, 0) * .05em)); filter: blur(calc(var(--kit-swap, 0) * 7px)); }
.hero__lead { max-width: 48ch; color: #DCDCDC; font-size: var(--fs-lead); text-shadow: 0 1px 14px rgb(0 0 0 / .7); }
.hero__picker { max-width: 540px; margin-top: var(--space-1); }
.hero > .stop { top: var(--space-3); }
@media (min-width: 1100px) {
  .hero__card { padding: 1rem 1.4rem 1rem 1rem; column-gap: 1rem; }
  .hero__card .note-card__icon { width: 44px; height: 44px; }
  .hero__card .note-card__title { font-size: 1.1rem; }
  .hero__card .note-card__sub { font-size: .9375rem; }
}

@media (max-width: 760px) {
  .hero { display: block; min-height: 0; }
  .hero__media { bottom: auto; height: min(54svh, 430px); }
  .hero__slide::after { background: linear-gradient(180deg, rgb(0 0 0 / .3) 0%, rgb(0 0 0 / 0) 24%, rgb(0 0 0 / .08) 46%, rgb(0 0 0 / .8) 80%, #000 100%); }
  .hero__card { top: 12px; right: auto; bottom: auto; left: var(--gutter); max-width: calc(100% - 2 * var(--gutter) - 56px); padding: .6rem .9rem .6rem .65rem; transform: translateY(calc((1 - var(--kit-in, 1)) * -12px)); }
  .hero__card .note-card__icon { width: 32px; height: 32px; }
  .hero__card .note-card__title { font-size: .94rem; }
  .hero__in { padding-top: calc(min(54svh, 430px) - 7rem); padding-bottom: 4.25rem; }
  .hero__copy { gap: var(--space-2); }
  .hero__lead { font-size: 1rem; }
  .hero > .stop { top: 12px; right: var(--gutter); }
}

/* ================= plan: the free plan tour over dusk footage ================= */
.tour__stage { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: #050505; }
.tour__media { position: absolute; inset: 0; z-index: -1; }
.tour__media video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9); }
.tour__media::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 70% at 50% 62%, rgb(0 0 0 / .2), rgb(0 0 0 / .62)), linear-gradient(180deg, rgb(0 0 0 / .55), rgb(0 0 0 / 0) 34%); }
.tour__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-right: 72px; border-bottom: 1px solid var(--c-glass-line); background: rgb(0 0 0 / .58); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.tour__tab { position: relative; display: grid; align-content: start; gap: .3rem; padding: 1.1rem 1.4rem 1.3rem; border: 0; background: none; color: var(--c-ink-soft); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-fast); }
.tour__tab + .tour__tab { border-left: 1px solid var(--c-glass-line); }
.tour__tab:hover { background: rgb(255 255 255 / .04); }
.tour__num { color: var(--c-brand-text); font-family: var(--font-ui); font-stretch: var(--stretch-ui); font-weight: 700; font-size: .8125rem; letter-spacing: .08em; }
.tour__name { color: var(--c-ink-soft); font-family: var(--font-display); font-stretch: 112%; font-weight: 700; font-size: 1.15rem; line-height: 1.2; transition: color var(--dur-fast); }
.tour__line { color: var(--c-ink-soft); font-size: .875rem; }
.tour__tab[aria-selected="true"] .tour__name { color: var(--c-ink); }
.tour__fill { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); transform: scaleX(0); transform-origin: left; }
.tour__tab[aria-selected="true"] .tour__fill { transform: scaleX(var(--kit-fill, 1)); }
.tour__tabs:not([data-kit-on]) .tour__tab[aria-selected="true"] .tour__fill { transform: scaleX(1); }
.tour__panel { display: grid; place-items: center; min-height: clamp(470px, 40vw, 540px); padding: clamp(1rem, .5rem + 2vw, 2.2rem); }
.tour__scene { width: min(100%, 580px); }
.tour__scene--scan { width: min(100%, 560px); }
.tour__stop { top: 14px; right: 14px; }
.tour__stop .stop__play, .tour__stop[aria-pressed="true"] .stop__pause { display: none; }
.tour__stop[aria-pressed="true"] .stop__play { display: inline; }
.tour__cta { margin-top: var(--space-4); }
@media (max-width: 760px) {
  .tour__tabs { padding-right: 58px; }
  .tour__tab { padding: .85rem .6rem 1rem; gap: .2rem; }
  .tour__name { font-size: .92rem; font-stretch: 104%; }
  .tour__line { display: none; }
  .tour__stop { top: 10px; right: 8px; }
  .tour__panel { min-height: 440px; padding: .75rem; }
}

/* ================= how: three steps lit by the chat, over dark footage ================= */
.how { isolation: isolate; overflow: hidden; }
.how__media { position: absolute; inset: 0; z-index: -1; }
.how__media video { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.72); }
.how__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(0 0 0 / .93) 0%, rgb(0 0 0 / .8) 42%, rgb(0 0 0 / .4) 100%), linear-gradient(0deg, #000 0%, rgb(0 0 0 / 0) 16%), linear-gradient(180deg, #000 0%, rgb(0 0 0 / 0) 16%); }
.how > .stop { top: var(--space-4); right: var(--gutter); }
.how__in { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); align-items: center; gap: clamp(2rem, 5vw, 5.5rem); }
.how .section__head { margin-bottom: var(--space-4); }
.steps { display: grid; gap: .7rem; margin: 0 0 var(--space-4); padding: 0; list-style: none; }
.steps__item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; padding: 1.05rem 1.2rem; border: 1px solid var(--c-glass-line); border-radius: var(--radius-m); background: rgb(10 10 10 / .6); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: border-color var(--dur-med), background-color var(--dur-med); }
.steps__item[aria-current="step"] { border-color: rgb(255 153 0 / .6); background: rgb(26 17 4 / .78); }
.steps__num { display: grid; place-items: center; width: 42px; height: 42px; border-radius: var(--radius-s); background: var(--c-raised); color: var(--c-ink); font-family: var(--font-display); font-stretch: 118%; font-weight: 800; font-size: 1.15rem; transition: background-color var(--dur-med), color var(--dur-med); }
.steps__item[aria-current="step"] .steps__num { background: var(--c-brand); color: var(--c-on-brand); }
.steps__title { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .7rem; margin-bottom: .3rem; font-size: 1.2rem; }
.steps__body p { color: var(--c-ink-soft); font-size: .98rem; }

.phone { justify-self: center; width: min(100%, 340px); aspect-ratio: 340 / 660; padding: 10px; border-radius: 46px; background: linear-gradient(160deg, #2c2c2c, #0d0d0d 42%, #1b1b1b); box-shadow: 0 0 0 1px #343434, var(--shadow-l), 0 0 90px rgb(255 153 0 / .14); }
.phone__screen { position: relative; display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 36px; background: #0A0A0A; }
.chat-head { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .7rem; padding: 1.35rem 1.1rem .9rem; border-bottom: 1px solid var(--c-line); }
.chat-head__mark { grid-row: span 2; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--c-line-strong); }
.chat-head__name { font-family: var(--font-ui); font-stretch: var(--stretch-ui); font-weight: 700; font-size: 1rem; line-height: 1.2; }
.chat-head__sub { color: var(--c-ink-soft); font-size: .8125rem; line-height: 1.3; }
.chat { flex: 1; min-height: 0; padding: 1rem .9rem 1.15rem; overflow: hidden; opacity: calc(1 - var(--kit-out, 0)); }
.chat__list { display: flex; flex-direction: column; gap: .55rem; transition: transform .5s var(--ease-out); }
.msg { flex: none; max-width: 86%; margin: 0; padding: .62rem .85rem; border-radius: 16px; font-size: .9375rem; line-height: 1.35; opacity: clamp(0, var(--kit-in, 1), 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.msg--bot { align-self: flex-start; border-bottom-left-radius: 6px; background: var(--c-raised); color: var(--c-ink); }
.msg--me { align-self: flex-end; border-bottom-right-radius: 6px; background: var(--c-brand); color: var(--c-on-brand); font-weight: 600; }
.msg--chips { align-self: flex-end; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .4rem; max-width: 100%; padding: 0; background: none; }
.msg--chips span { display: grid; place-items: center; min-width: 42px; height: 36px; padding: 0 .6rem; border: 1px solid var(--c-line-strong); border-radius: 999px; font-family: var(--font-ui); font-weight: 700; font-size: .95rem; transition: background-color .25s, border-color .25s, color .25s; }
.msg--chips span[data-kit-on] { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); }
.msg--typing { display: flex; align-items: center; gap: 5px; background: var(--c-raised); }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink-soft); animation: chat-dot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes chat-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg--bar { display: grid; gap: .5rem; min-width: 72%; }
.msg__bar { display: block; height: 5px; border-radius: 3px; background: linear-gradient(90deg, var(--c-brand) calc(var(--kit-fill, 0) * 100%), var(--c-line-strong) 0); }
.msg--result { align-self: stretch; display: grid; gap: .2rem; max-width: none; padding: .95rem 1rem; border: 1px solid rgb(255 153 0 / .45); background: linear-gradient(180deg, #1C1306, #0F0F0F); }
.result__k { color: var(--c-brand-text); font-family: var(--font-ui); font-weight: 700; font-size: .8125rem; letter-spacing: .06em; text-transform: uppercase; }
.result__v { font-family: var(--font-ui); font-stretch: var(--stretch-ui); font-weight: 700; font-size: 1.02rem; line-height: 1.2; }
.result__v b { margin-right: .3rem; font-family: var(--font-display); font-stretch: 118%; font-weight: 800; font-size: 1.95rem; line-height: 1; }
.result__by { color: var(--c-ink-soft); font-size: .875rem; }
.result__bars { display: flex; align-items: flex-end; gap: 4px; height: 54px; margin: .45rem 0 .3rem; }
.result__bars i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: linear-gradient(180deg, var(--c-brand), var(--c-brand-dark)); transform: scaleY(clamp(0, calc(var(--kit-in, 1) * 1.7 - var(--d) * .06), 1)); transform-origin: bottom; }
.result__from { color: var(--c-ink-soft); font-size: .8125rem; }
@media (max-width: 900px) {
  .how__in { grid-template-columns: 1fr; }
  .how__media::after { background: linear-gradient(180deg, #000 0%, rgb(0 0 0 / .78) 14%, rgb(0 0 0 / .7) 60%, #000 100%); }
  .phone { width: min(100%, 320px); }
}

/* ================= worth: the calculator and its climb ================= */
.worth > .stop { top: var(--space-4); right: var(--gutter); }
.worth__box { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr); align-items: center; gap: clamp(1.5rem, 4vw, 4rem); padding: clamp(1.2rem, .8rem + 2.2vw, 2.8rem); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: radial-gradient(ellipse 60% 70% at 88% 0%, rgb(255 153 0 / .09), rgb(255 153 0 / 0) 70%), var(--c-paper-alt);
  --calc-ink: var(--c-ink); --calc-ink-soft: var(--c-ink-soft); --calc-track: var(--c-line-strong); --calc-fill: var(--c-brand); --calc-thumb: var(--c-ink); --calc-thumb-edge: var(--c-brand); --calc-focus: var(--c-brand); --calc-surface: var(--c-paper-alt); --calc-font: var(--font-ui); --calc-font-figure: var(--font-display);
  /* each number's size follows its own box (cqi), a little under the frame's fit (Saira wide: the total's widest is
     about 6.9 em, a month's 6.0 em), so the fit never has to shrink it and never re-fits it by a pixel, over and over */
  --calc-total-size: min(var(--fs-display), 13.5cqi); --calc-figure-size: min(var(--fs-h2), 15.5cqi);
  /* its own layer: painted inside the long shared layer that starts with the "how" footage, it was drawn a shade apart
     from frame to frame, so it never looked still */
  will-change: transform; }
.worth__controls { display: grid; align-content: center; }
.worth__result { display: grid; gap: var(--space-3); align-content: start; padding: clamp(1rem, .6rem + 1.4vw, 1.6rem); border: 1px solid var(--c-line); border-radius: var(--radius-m); background: #0A0A0A; }
.worth .calc-total__value { color: var(--c-brand-text); font-stretch: 116%; }
.worth .calc-figure__value { font-stretch: 112%; }
.worth .calc-note { color: var(--c-ink-soft); font-size: var(--fs-small); }
.worth__picture { position: relative; }
.climb { display: block; width: 100%; height: auto; overflow: visible; }
.climb__grid line { stroke: rgb(255 255 255 / .06); stroke-width: 1; }
.climb__summit { fill: none; stroke: rgb(255 255 255 / .26); stroke-width: 2; stroke-dasharray: 4 7; stroke-linejoin: miter; }
.climb__apex { fill: var(--c-paper-alt); stroke: rgb(255 255 255 / .45); stroke-width: 2; }
/* a flat tint, not a gradient: the gradient came out a shade or two apart from one paint to the next (2 of 8 runs) */
.climb__area { fill: rgb(255 153 0 / .16); }
.climb__base { stroke: rgb(255 255 255 / .24); stroke-width: 2; }
.climb__seg { stroke: rgb(255 255 255 / .08); stroke-width: 14; stroke-linecap: butt; }
.climb__seg[data-kit-on] { stroke: var(--c-brand); stroke-dasharray: 100; stroke-dashoffset: calc((1 - clamp(0, var(--kit-in, 1), 1)) * 100); }
.climb__drop { stroke: rgb(255 255 255 / .55); stroke-width: 1.5; stroke-dasharray: 2 4; }
.climb__dot { fill: var(--c-ink); stroke: var(--c-brand); stroke-width: 4; }
.climb__labels { position: relative; height: 1.4em; margin-top: .35rem; color: var(--c-ink-soft); font-size: .8125rem; }
.climb__labels span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }
@media (max-width: 900px) { .worth__box { grid-template-columns: 1fr; } }

/* ================= outcomes: four clips, each with its scene ================= */
.outcomes { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(.9rem, 1.6vw, 1.5rem); }
.outcomes > .stop { top: -62px; right: 0; }
.outcome { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); min-height: clamp(540px, 45vw, 620px); padding: clamp(1rem, .7rem + 1.2vw, 1.6rem); overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: #0B0B0B; }
.outcome__media { position: absolute; inset: 0; z-index: -1; }
.outcome__media video { display: block; width: 100%; height: 100%; object-fit: cover; }
.outcome__media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgb(0 0 0 / .94) 0%, rgb(0 0 0 / .62) 30%, rgb(0 0 0 / 0) 58%), linear-gradient(180deg, rgb(0 0 0 / .3), rgb(0 0 0 / 0) 26%); }
.outcome__scene { width: min(100%, 372px); }
/* the scenes' glass cards blur the footage: inside a box that clips (the runtime's overflow: hidden) Chrome drew that blur
   over the whole box, a square frosted panel behind the rounded cards */
.outcome__scene > [data-scene] { overflow: visible; }
.outcome--found .outcome__scene { align-self: flex-end; }
.outcome--found .outcome__clip { object-position: 40% 50%; }
.outcome__body { display: grid; justify-items: start; gap: .5rem; max-width: 46ch; }
.outcome__body h3 { font-size: clamp(1.45rem, 1.1rem + 1.1vw, 1.95rem); }
.outcome__body p { color: #D4D4D4; }
@media (max-width: 860px) {
  /* the phone: the whole clip on top, its scene rising over its foot, the words under it */
  .outcomes { grid-template-columns: 1fr; }
  .outcomes > .stop { top: -58px; }
  .outcome { display: block; min-height: 0; padding: 0; }
  .outcome__media { position: relative; inset: auto; z-index: 0; aspect-ratio: 16 / 10; }
  .outcome__media::after { background: linear-gradient(0deg, #0B0B0B 0%, rgb(11 11 11 / 0) 42%); }
  .outcome--found .outcome__clip { object-position: 50% 50%; }
  .outcome__scene { position: relative; z-index: 1; width: auto; max-width: 390px; margin: -24% .9rem 0; }
  .outcome__body { padding: 1.1rem 1.1rem 1.35rem; }
}

/* ================= compare: the usual agency against this one (kit compare) ================= */
.compare { position: relative; isolation: isolate; height: clamp(540px, 46vw, 640px); overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-l); user-select: none; -webkit-user-select: none; touch-action: pan-y; }
.compare .before, .compare .after { position: absolute; inset: 0; }
.compare .after { clip-path: inset(0 0 0 calc(var(--kit-v, .5) * 100%)); }
.compare__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.before .compare__photo { filter: grayscale(1) contrast(1.05) brightness(.58); }
.after .compare__photo { object-position: 58% 35%; filter: saturate(1.04) brightness(.95); }
.before::after, .after::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.before::after { background: linear-gradient(90deg, rgb(0 0 0 / .62) 0%, rgb(0 0 0 / .1) 55%), linear-gradient(0deg, rgb(0 0 0 / .45), rgb(0 0 0 / 0) 50%); }
.after::after { background: linear-gradient(270deg, rgb(0 0 0 / .55) 0%, rgb(0 0 0 / 0) 50%), linear-gradient(0deg, rgb(0 0 0 / .4), rgb(0 0 0 / 0) 50%); }
.compare__tag { position: absolute; top: 20px; left: 20px; z-index: 2; margin: 0; padding: .5rem .85rem; border: 1px solid var(--c-line-strong); border-radius: 999px; background: rgb(0 0 0 / .72); color: #D0D0D0; font-family: var(--font-ui); font-stretch: var(--stretch-ui); font-weight: 700; font-size: .9rem; line-height: 1; }
.compare__tag--us { left: auto; right: 20px; border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); }
.compare__cards { position: absolute; bottom: 22px; z-index: 2; display: grid; gap: .55rem; width: min(290px, 38%); }
.before .compare__cards { left: 22px; }
.after .compare__cards { right: 22px; }
.compare__card { display: grid; gap: .12rem; padding: .8rem 1rem; border: 1px solid var(--c-glass-line); border-radius: var(--radius-m); background: var(--c-glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.before .compare__card { background: rgb(28 28 28 / .82); }
.compare__k { color: var(--c-ink-soft); font-family: var(--font-ui); font-weight: 600; font-size: .8125rem; line-height: 1.2; }
.compare__card b { color: var(--c-ink); font-family: var(--font-display); font-stretch: 110%; font-weight: 800; font-size: 1.2rem; line-height: 1.15; }
.before .compare__card b { color: #CFCFCF; }
.compare__card s { text-decoration-thickness: 2px; text-decoration-color: rgb(255 255 255 / .55); }
.compare__s { color: var(--c-ink-soft); font-size: .875rem; }
.compare__s--good { color: var(--c-accent-text); }
.compare__bars { display: flex; align-items: flex-end; gap: 3px; height: 30px; margin-top: .3rem; }
.compare__bars i { flex: 1; height: var(--h); border-radius: 2px 2px 0 0; background: var(--c-brand); }
.compare [data-kit-whole] { transition: opacity .2s, visibility 0s; }
.compare [data-kit-under] { opacity: 0; transition: opacity .2s, visibility 0s .2s; }
.compare__range { position: absolute; inset: 0; z-index: 6; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.handle { position: absolute; top: 0; bottom: 0; left: calc(var(--kit-v, .5) * 100%); z-index: 5; width: 0; pointer-events: none; opacity: clamp(0, calc((min(var(--kit-v, .5), 1 - var(--kit-v, .5)) - .03) * 14), 1); }
.compare__range:focus-visible + .handle { opacity: 1; }
.handle__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: var(--c-brand); box-shadow: 0 0 18px rgb(255 153 0 / .65); }
.handle__knob { position: absolute; top: 26%; left: -25px; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 50%; background: var(--c-ink); color: var(--c-on-brand); box-shadow: 0 0 0 5px rgb(255 153 0 / .35), var(--shadow-m); }
.handle__hint { position: absolute; top: calc(26% + 60px); left: 0; transform: translateX(-50%); padding: .35rem .7rem; border-radius: 999px; background: rgb(0 0 0 / .78); color: var(--c-ink); font-family: var(--font-ui); font-weight: 700; font-size: .8125rem; line-height: 1; white-space: nowrap; }
.compare[data-kit-touched] .handle__hint { display: none; }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .9rem; margin: var(--space-4) 0 0; padding: 0; list-style: none; }
.promises li { display: flex; align-items: center; gap: .7rem; padding: 1rem 1.1rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-paper-alt); font-family: var(--font-ui); font-stretch: 104%; font-weight: 600; font-size: 1rem; line-height: 1.3; }
.promises svg { flex: none; width: 24px; height: 24px; padding: 4px; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); }
@media (max-width: 900px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .compare { height: 640px; }
  .compare__tag { top: 14px; left: 14px; font-size: .8125rem; }
  .compare__tag--us { left: auto; right: 14px; }
  .compare__cards { bottom: 14px; width: calc(50% - 22px); gap: .45rem; }
  .before .compare__cards { left: 12px; }
  .after .compare__cards { right: 12px; }
  .compare__card { padding: .65rem .7rem; }
  .compare__card b { font-size: 1rem; font-stretch: 100%; }
  .compare__s { font-size: .8125rem; }
  .handle__knob { top: 18%; }
  .handle__hint { top: calc(18% + 58px); }
  .after .compare__photo { object-position: 64% 30%; }
  .promises { grid-template-columns: 1fr; }
}

/* ================= who: six categories and many more ================= */
.who { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-auto-rows: clamp(250px, 24vw, 330px); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.who__tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; gap: .4rem; padding: 1.25rem 4.25rem 1.3rem 1.35rem; overflow: hidden; border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-raised); color: var(--c-ink); text-decoration: none; }
.who__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; filter: saturate(.92) brightness(.86); transition: transform 1.2s var(--ease-out), filter .6s; }
.who__tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, rgb(0 0 0 / .92) 0%, rgb(0 0 0 / .5) 38%, rgb(0 0 0 / .04) 68%); }
.who__tile:hover .who__photo { transform: scale(1.04); filter: saturate(1) brightness(.95); }
.who__body { display: grid; gap: .3rem; }
.who__name { font-family: var(--font-display); font-stretch: 114%; font-weight: 800; font-size: clamp(1.25rem, 1.05rem + .6vw, 1.5rem); line-height: 1.1; }
.who__name::after { content: ''; display: block; width: 34px; height: 2px; margin-top: .55rem; background: var(--c-brand); transition: width var(--dur-med) var(--ease-out); }
.who__tile:hover .who__name::after { width: 74px; }
.who__fields { color: #D2D2D2; font-size: .95rem; line-height: 1.45; }
.who__go { position: absolute; right: 1.1rem; bottom: 1.2rem; display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid var(--c-glass-line); border-radius: 50%; background: rgb(0 0 0 / .55); color: var(--c-ink); transition: background-color .2s, color .2s, border-color .2s; }
.who__tile:hover .who__go { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); }
.who__tile--a { grid-column: span 5; }
.who__tile--b { grid-column: span 4; }
.who__tile--c { grid-column: span 3; }
.who__tile--d, .who__tile--e, .who__tile--f, .who__tile--more { grid-column: span 3; }
.who__tile--more { justify-content: space-between; padding-right: 1.35rem; background: radial-gradient(ellipse 90% 70% at 85% 0%, rgb(255 153 0 / .18), rgb(255 153 0 / 0) 65%), var(--c-raised); }
.who__tile--more::before { display: none; }
.who__more-peak { position: relative; display: block; width: 120px; height: 46px; }
.who__more-peak .peak { position: absolute; inset: 0; height: 100%; }
.who__more-peak .peak__ground { fill: none; }
.who__tile--more .link { min-height: 0; color: var(--c-brand-text); }
@media (max-width: 1100px) {
  .who { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: clamp(240px, 34vw, 300px); }
  .who__tile--a, .who__tile--b, .who__tile--c, .who__tile--d, .who__tile--e, .who__tile--f { grid-column: span 1; }
  .who__tile--more { grid-column: span 2; }
}
@media (max-width: 640px) {
  .who { grid-template-columns: 1fr; grid-auto-rows: 240px; }
  .who__tile--more { grid-column: auto; }
}

/* ================= faq ================= */
.faq-part__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: start; gap: clamp(2rem, 5vw, 5rem); }
.faq-part .section__head { position: sticky; top: calc(var(--header-h) + 2rem); margin-bottom: 0; }
@media (max-width: 900px) { .faq-part__in { grid-template-columns: 1fr; gap: 0; } .faq-part .section__head { position: static; margin-bottom: var(--space-4); } }

/* ================= close: the last push over the town at dusk ================= */
.close__clip { filter: saturate(.95) brightness(.85); }