/* home.css: the home page's own placing and sizing, with the tokens of system.css only. */

/* ---------- #hero: full-bleed footage, one field at a time (the kit's rotate) ---------- */
.hero { position: relative; isolation: isolate; display: grid; align-items: center; min-height: max(660px, min(100svh, 980px)); overflow: hidden; background: var(--c-ink); }
.hero__stage { position: absolute; inset: 0; z-index: 0; }

/* the kit's rotate, as kit.md gives it */
[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(var(--kit-glide, 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); max-width: none; clip-path: inset(2px); }
[data-kit-scene="rotate"] [data-kit-slide] video[data-kit-shown] { clip-path: none; }
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { opacity: clamp(0, (1 - var(--kit-move, 0)) * 1000, 1); }

.hero__clip { position: absolute; inset: 0; overflow: hidden; }
.hero__slide video { object-position: var(--pos, 50% 50%); }

/* the one still grade, over the stage: navy from the words' side, the deep at the foot, a violet glow low on the left;
   clear at the lower right, where each slide's card sits */
.hero__stage::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    radial-gradient(70% 60% at 6% 92%, rgb(91 41 248 / 0.28), transparent 70%),
    linear-gradient(90deg, rgb(2 11 25 / 0.94) 0%, rgb(2 11 25 / 0.86) 25%, rgb(3 14 32 / 0.68) 42%, rgb(4 18 40 / 0.36) 56%, rgb(4 18 40 / 0.12) 68%, rgb(4 18 40 / 0) 78%),
    linear-gradient(0deg, rgb(2 11 25 / 0.92) 0%, rgb(2 11 25 / 0.35) 13%, rgb(2 11 25 / 0) 26%),
    linear-gradient(180deg, rgb(2 11 25 / 0.6) 0%, rgb(2 11 25 / 0) 20%);
}

/* the motif along the foot, rising at the right into the arrow */
.hero__rise { position: absolute; z-index: 4; right: 0; bottom: 0; width: 100%; height: 260px; pointer-events: none; filter: drop-shadow(0 0 7px rgb(5 187 252 / 0.6)); }

/* the words */
.hero__words { position: relative; z-index: 5; padding: calc(var(--header-h) + clamp(2rem, 6vh, 4.5rem)) 0 clamp(7rem, 15vh, 9.5rem); }
.hero__title { max-width: 12.6em; font-size: var(--fs-display); font-weight: 650; letter-spacing: -0.03em; line-height: 1.04; }
.hero__field { display: block; color: var(--c-brand-on-ink); text-shadow: 0 0 34px rgb(5 187 252 / 0.5); white-space: nowrap; }
.hero__field [data-kit-word], .hero [data-noun-word] { display: inline-block; opacity: calc(1 - var(--kit-swap, 0)); filter: blur(calc(var(--kit-swap, 0) * 7px)); transform: translateY(calc(var(--kit-swap, 0) * 0.12em)); }
.hero__quiet { display: block; color: var(--c-on-ink); }
.hero__keep { white-space: nowrap; } /* "coming in" on one line where the headline wraps (F2) */
.hero__line { max-width: 34em; margin-top: clamp(1.1rem, 2.4vh, 1.6rem); color: var(--c-on-ink-soft); font-size: clamp(1.0625rem, 0.98rem + 0.35vw, 1.25rem); line-height: 1.55; }
.hero__picker { margin-top: clamp(1.6rem, 4vh, 2.5rem); }

/* each slide's card: deep glass at the lower right, clear of every face, arriving with its picture */
.hero-card { position: absolute; z-index: 4; right: clamp(13.5rem, 17vw, 19rem); bottom: clamp(8.5rem, 17vh, 11rem); width: 300px; padding: 1rem 1.15rem 1.1rem; display: grid; gap: 0.3rem; opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 18px)); }
.hero-card__top { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.2rem; }
.hero-card__top .label { color: var(--c-accent-on-ink); }
.hero-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px rgb(24 224 194 / 0.16), 0 0 14px rgb(24 224 194 / 0.9); }
.hero-card__time { margin-left: auto; color: var(--c-on-ink-soft); font: 500 var(--fs-small)/1 var(--font-ui); font-variant-numeric: tabular-nums; }
.hero-card__title { font: 600 1.1875rem/1.25 var(--font-display); letter-spacing: -0.015em; color: var(--c-on-ink); }
.hero-card__meta { color: var(--c-on-ink-soft); font-size: var(--fs-ui); }
.hero-card__chip { display: inline-flex; align-items: center; gap: 0.45rem; justify-self: start; margin-top: 0.55rem; padding: 0.35rem 0.7rem 0.35rem 0.55rem; border-radius: 999px; background: rgb(5 187 252 / 0.12); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.3); color: var(--c-brand-on-ink); font: 500 var(--fs-small)/1.2 var(--font-ui); }
.hero-card__chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.hero__stop { position: absolute; z-index: 6; left: max(var(--gutter), calc((100% - var(--max-w)) / 2)); bottom: 3.6rem; }

@media (max-width: 1180px) {
  .hero-card { right: clamp(9rem, 15vw, 13rem); }
}
@media (max-width: 960px) {
  .hero__stage::after { background:
    linear-gradient(90deg, rgb(2 11 25 / 0.9) 0%, rgb(2 11 25 / 0.72) 40%, rgb(4 18 40 / 0.2) 75%, rgb(4 18 40 / 0) 100%),
    linear-gradient(0deg, rgb(2 11 25 / 0.92) 0%, rgb(2 11 25 / 0) 28%),
    linear-gradient(180deg, rgb(2 11 25 / 0.6) 0%, rgb(2 11 25 / 0) 20%); }
  .hero-card { right: var(--gutter); bottom: 7.5rem; width: 270px; }
}
/* the phone: the footage above, the words at the foot over the deep (faces stay in the open top) */
@media (max-width: 760px) {
  .hero { align-items: end; min-height: max(760px, 100svh); }
  .hero__slide { --pos: var(--pos-phone, 50% 50%); }
  .hero__stage::after { background:
    linear-gradient(0deg, rgb(2 11 25 / 0.97) 0%, rgb(2 11 25 / 0.9) 46%, rgb(2 11 25 / 0.45) 62%, rgb(2 11 25 / 0) 76%),
    linear-gradient(180deg, rgb(2 11 25 / 0.55) 0%, rgb(2 11 25 / 0) 16%); }
  .hero__words { padding: 0 0 4.5rem; }
  .hero__title { font-size: clamp(2rem, 1.2rem + 3.6vw, 2.6rem); }
  .hero__field { white-space: normal; }
  .hero__field [data-kit-word] { display: inline; transform: none; }
  .hero [data-noun-word] { transform: none; }
  /* each phone crop puts its faces in the right half of the open top, so the card keeps the left half */
  .hero-card { left: var(--gutter); right: auto; top: calc(var(--header-h) + 0.75rem); bottom: auto; width: 200px; padding: 0.7rem 0.85rem 0.8rem; gap: 0.2rem; }
  .hero-card__time { font-size: 0.8125rem; }
  .hero-card__title { font-size: 1.0625rem; }
  .hero-card__chip { display: none; }
  .hero__rise { height: 150px; }
  .hero__stop { left: auto; right: var(--gutter); bottom: auto; top: calc(var(--header-h) + 0.75rem); }
}
/* a narrow phone (F2): the headline runs as one sentence, so the field's own words ("New customers for your
   landscaping business") keep it to three or four lines, and the words keep close together (fixed gaps, not the
   screen's height, which Safari measures with its bars hidden), and the header keeps 780 px at least where the
   browser's bars take the screen (800 px at 340 px and under), so every slide's headline stays clear of its card at
   the top, the tallest (roofing) included */
@media (max-width: 560px) {
  .hero { min-height: max(780px, 100svh); }
  .hero__field, .hero__quiet { display: inline; }
  .hero__line { margin-top: 0.85rem; }
  .hero__picker { margin-top: 1.25rem; }
}
@media (max-width: 340px) {
  .hero { min-height: max(800px, 100svh); }
  .hero__keep { white-space: normal; }
}

/* ---------- #plan: the free plan tour over the town at blue hour ---------- */
.plan { padding-block: var(--section-y); }
.plan .band__media video { object-position: 50% 60%; }
.plan__shade { background:
  linear-gradient(90deg, rgb(2 11 25 / 0.9) 0%, rgb(2 11 25 / 0.74) 36%, rgb(2 11 25 / 0.38) 66%, rgb(2 11 25 / 0.3) 100%),
  linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 18%, rgb(2 11 25 / 0) 82%, var(--c-ink) 100%); }
.plan__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(2rem, 4vw, 4.5rem); align-items: center; }
.plan__tabs { margin-top: clamp(1.5rem, 3vw, 2.25rem); padding: 0.45rem; display: grid; gap: 0.2rem; }
.plan__tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.9rem; row-gap: 0.15rem; padding: 0.95rem 1.05rem 1.15rem; border: 0; border-radius: var(--radius-m); background: transparent; color: var(--c-on-ink); font: inherit; text-align: left; cursor: pointer; transition: background-color var(--dur-fast); }
.plan__tab:hover { background: rgb(12 36 72 / 0.45); }
.plan__tab[aria-selected="true"] { background: rgb(12 36 72 / 0.82); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.plan__tab-num { grid-row: span 2; padding-top: 0.15rem; font: 600 0.875rem/1.4 var(--font-display); color: var(--c-on-ink-soft); font-variant-numeric: tabular-nums; }
.plan__tab[aria-selected="true"] .plan__tab-num { color: var(--c-brand-on-ink); }
.plan__tab-title { font: 600 1.0625rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.plan__tab-line { color: var(--c-on-ink-soft); font-size: var(--fs-small); line-height: 1.45; }
.plan__tab-bar { position: absolute; left: 1.05rem; right: 1.05rem; bottom: 0.45rem; height: 2px; border-radius: 2px; background: rgb(163 184 214 / 0.16); overflow: hidden; opacity: 0; }
.plan__tab-bar::after { content: ""; position: absolute; inset: 0; transform-origin: left; transform: scaleX(var(--kit-fill, 0)); background: var(--grad-light); }
.plan__tabs[data-kit-on] .plan__tab[aria-selected="true"] .plan__tab-bar { opacity: 1; }
.plan__cta { margin-top: clamp(1.5rem, 3vw, 2rem); }
.plan__panels { position: relative; display: grid; place-items: center; min-height: clamp(460px, 40vw, 530px); }
.plan__panel { width: 100%; display: grid; place-items: center; }
.plan__panel[hidden] { display: none; }
.plan__panel .scene { width: 100%; }
.plan__stop { position: absolute; right: 0; bottom: 0; }
[data-kit-tabs-stop] .stop__play { display: none; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__play { display: inline; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__pause { display: none; }

/* ---------- #how: the route over hands on a phone at dusk ---------- */
.how { padding-block: var(--section-y); }
.how .band__media video { object-position: 50% 45%; }
.how__shade { background: linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0.62) 20%, rgb(2 11 25 / 0.52) 80%, var(--c-ink) 100%); }
.how__map { position: relative; margin-top: clamp(3.5rem, 5vw, 4.25rem); }
.how__map .scene { width: 100%; height: clamp(410px, 33vw, 470px); }
.how__stop { position: absolute; right: 0; top: -52px; }

/* ---------- #worth: the calculator on one glass panel ---------- */
.worth__box { position: relative; margin-top: clamp(2rem, 4vw, 3.25rem); padding: clamp(1.25rem, 1rem + 2vw, 2.75rem);
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "sliders total" "sliders picture" "figures picture" "note note"; grid-template-rows: auto auto 1fr auto; column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 1.25rem;
  --calc-ink: var(--c-on-ink); --calc-ink-soft: var(--c-on-ink-soft); --calc-track: rgb(163 184 214 / 0.2); --calc-fill: var(--c-brand); --calc-thumb: var(--c-paper); --calc-thumb-edge: var(--c-brand);
  --calc-thumb-shadow: 0 0 0 6px rgb(5 187 252 / 0.16), 0 4px 14px rgb(0 3 10 / 0.6); --calc-focus: var(--c-brand); --calc-surface: var(--c-trench); --calc-font: var(--font-ui); --calc-font-figure: var(--font-display);
  --calc-value-size: 1.375rem; --calc-total-size: clamp(2.5rem, 1.6rem + 3vw, 4.25rem); --calc-figure-size: clamp(1.5rem, 1.2rem + 1vw, 2.05rem); --calc-gap: 1.6rem; }
.worth__box .calc-sliders { grid-area: sliders; align-content: start; padding-top: 0.4rem; }
.worth__box .calc-slider__label { color: var(--c-on-ink); font-weight: 500; }
.worth__box .calc-slider__value { font-family: var(--font-display); font-weight: 600; color: var(--c-brand-on-ink); }
.worth__box .calc-scale { color: var(--c-on-ink-soft); }
.worth__box .calc-total { grid-area: total; display: grid; gap: 0.3rem; }
.worth__box .calc-total__value { font-weight: 650; letter-spacing: -0.03em; color: var(--c-on-ink); text-shadow: 0 0 40px rgb(5 187 252 / 0.35); }
.worth__box .calc-total__label { color: var(--c-on-ink-soft); font-size: var(--fs-ui); }
.worth__box .calc-figures { grid-area: figures; align-self: end; display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; padding-top: 1.25rem; border-top: 1px solid rgb(5 187 252 / 0.14); }
.worth__box .calc-figure { display: grid; gap: 0.2rem; }
.worth__box .calc-figure__value { font-weight: 600; letter-spacing: -0.02em; }
.worth__box .calc-figure[data-calc-figure="clients-year"] .calc-figure__value { color: var(--c-accent-on-ink); }
.worth__box .calc-figure__label { color: var(--c-on-ink-soft); font-size: var(--fs-small); }
.worth__box .calc-note { grid-area: note; color: var(--c-on-ink-soft); font-size: var(--fs-small); }
.worth__picture { grid-area: picture; position: relative; align-self: center; width: 100%; aspect-ratio: 640 / 330; }
.yr { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 8px rgb(5 187 252 / 0.55)); }
.yr-area { opacity: 1; }
.yr-track { fill: none; stroke: rgb(163 184 214 / 0.26); stroke-width: 2.5; stroke-dasharray: 1 9; stroke-linecap: round; }
.yr-base { fill: none; stroke: var(--c-brand); stroke-width: 7; stroke-linecap: round; }
.yr-seg { fill: none; stroke-width: 10; stroke-linecap: round; opacity: 0.12; }
.yr-seg[data-kit-on] { opacity: 1; }
.yr-head { fill: none; stroke-width: 10; stroke-linecap: round; stroke-linejoin: round; opacity: 0.12; }
.worth__picture[data-whole] .yr-head { opacity: 1; }
.yr-dot { fill: var(--c-accent); stroke: var(--c-ink); stroke-width: 2.2; }
.yr-label { position: absolute; transform: translate(0, 0); color: var(--c-on-ink-soft); font: 500 0.8125rem/1.2 var(--font-ui); white-space: nowrap; }
.yr-label--end { transform: translateX(-100%); }
.yr-key { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 0.45rem; color: var(--c-on-ink-soft); font: 500 0.8125rem/1.2 var(--font-ui); }
.yr-key i { width: 10px; height: 10px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 8px rgb(24 224 194 / 0.9); }
.worth__stop { position: absolute; right: clamp(1rem, 0.8rem + 1vw, 1.75rem); top: clamp(1rem, 0.8rem + 1vw, 1.75rem); }
@media (max-width: 420px) { .worth__box .calc-scale__mark { display: none; } }

/* ---------- #outcomes: four large cards, a clip and a scene each above, the job's words and the services that do it below (F3) ---------- */
.outcomes__grid { position: relative; margin-top: clamp(3.5rem, 5vw, 4.5rem); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 1.6vw, 1.5rem); }
.outcome { position: relative; isolation: isolate; display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-l); background: var(--c-deep); box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-m); }
.outcome__media { position: relative; z-index: -2; flex: none; height: clamp(360px, 27vw, 390px); overflow: hidden; border-radius: var(--radius-l) var(--radius-l) 0 0; }
.outcome__media video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: var(--pos, 50% 50%); }
/* the clip fades into the card's deep ground, where its words stand */
.outcome__media::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(0deg, var(--c-deep) 0%, rgb(7 24 51 / 0.5) 18%, rgb(7 24 51 / 0) 40%), linear-gradient(180deg, rgb(2 11 25 / 0.3), rgb(2 11 25 / 0) 26%); }
.outcome__scene { position: absolute; top: 1.25rem; width: min(330px, calc(100% - 2.5rem)); }
.outcome--found .outcome__scene { right: 1.25rem; }
.outcome--found { --pos: 40% 50%; }
.outcome--answer .outcome__scene { left: 1.25rem; top: 140px; width: min(300px, calc(100% - 2.5rem)); }
.outcome--answer { --pos: 50% 30%; }
.outcome--reviews .outcome__scene { left: 1.25rem; width: min(300px, calc(100% - 2.5rem)); }
.outcome--reviews { --pos: 70% 40%; }
.outcome--work .outcome__scene { left: 1.25rem; width: min(290px, calc(100% - 2.5rem)); }
.outcome--work { --pos: 62% 50%; }
.outcome__words { position: relative; flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 0.45rem; padding: 0.35rem 1.6rem 1.6rem; }
.outcome__words h3 { font-size: var(--fs-h3); }
.outcome__words p { max-width: 38ch; color: var(--c-on-ink-soft); font-size: var(--fs-ui); }
/* the services under each job: its name, then what it gives the owner (the Services page's lists) */
.outcome__words .outcome__label { margin-top: 0.8rem; color: var(--c-brand-on-ink); font: 600 var(--fs-label)/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.outcome__list { align-self: stretch; margin: 0 0 0.55rem; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 22px; }
.outcome__list li { display: grid; align-content: start; gap: 3px; padding-top: 10px; border-top: 1px solid rgb(5 187 252 / 0.16); }
.outcome__list b { color: var(--c-on-ink); font: 600 1rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.outcome__list span { color: var(--c-on-ink-soft); font-size: var(--fs-small); line-height: 1.45; }
.outcome__link { display: inline-flex; align-items: center; gap: 0.4rem; margin-top: auto; padding-top: 0.3rem; color: var(--c-brand-on-ink); font: 600 var(--fs-ui)/1.2 var(--font-ui); text-decoration: none; }
.outcome__link svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.outcomes__stop { position: absolute; right: 0; top: -54px; }
/* F4.1: uSPO, the premium service on top of the four jobs, one row under the cards, linking to its part of Services */
.outcomes__premium { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1.25rem; margin-top: clamp(1rem, 1.6vw, 1.5rem); padding: 1.15rem 1.6rem; }
.outcomes__premium-mark { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: rgb(5 187 252 / 0.12); box-shadow: inset 0 0 0 1px rgb(5 187 252 / 0.35), 0 0 22px rgb(5 187 252 / 0.18); color: var(--c-brand-on-ink); }
.outcomes__premium-mark svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.outcomes__premium-words { display: grid; gap: 0.3rem; }
.outcomes__premium .outcome__label { color: var(--c-brand-on-ink); font: 600 var(--fs-label)/1.2 var(--font-ui); letter-spacing: 0.12em; text-transform: uppercase; }
.outcomes__premium-line { color: var(--c-on-ink-soft); font-size: var(--fs-ui); line-height: 1.45; }
.outcomes__premium-line b { margin-right: 0.4rem; color: var(--c-on-ink); font: 600 1.125rem/1.3 var(--font-display); letter-spacing: -0.01em; }
.outcomes__premium-link { margin-top: 0; padding-top: 0; white-space: nowrap; }
@media (max-width: 760px) {
  .outcomes__premium { grid-template-columns: auto minmax(0, 1fr); padding: 1rem 1.15rem 1.1rem; }
  .outcomes__premium-link { grid-column: 2; }
}
/* one service a row where the cards are narrow */
@media (max-width: 960px) { .outcome__list { grid-template-columns: 1fr; gap: 10px; } }
/* out-answer's booked card: its title over its line, like the cards above it (the base scene sets them side by side) */
.outcome [data-scene="out-answer"] .booked > span:last-child { display: block; }

/* ---------- #compare: drag the line ---------- */
.compare__box { position: relative; margin-top: clamp(2rem, 4vw, 3rem); height: clamp(480px, 42vw, 580px); overflow: hidden; border-radius: var(--radius-l); background: var(--c-deep); box-shadow: inset 0 0 0 1px var(--glass-edge), var(--shadow-l); --kit-v: 0.46; }
.compare__side { position: absolute; inset: 0; overflow: hidden; }
.compare__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.before .compare__photo { object-position: 30% 50%; filter: grayscale(0.9) brightness(0.72) contrast(0.92); }
.before::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(2 11 25 / 0.55), rgb(2 11 25 / 0.15) 50%); }
.after { clip-path: inset(0 0 0 calc(var(--kit-v) * 100%)); }
/* the café owner a little larger, so her face sits right of the line at rest, clear of the knob and the cards */
.after .compare__photo { width: calc(108% + 2px); object-position: 50% 22%; }
.after::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgb(2 11 25 / 0.6), rgb(2 11 25 / 0) 40%); }
.compare__tag { position: absolute; z-index: 2; top: 1.25rem; margin: 0; padding: 0.45rem 0.85rem; border-radius: 999px; font: 600 var(--fs-small)/1.2 var(--font-ui); letter-spacing: 0.01em; }
.before .compare__tag { left: 1.25rem; background: rgb(2 11 25 / 0.72); color: var(--c-on-ink-soft); box-shadow: inset 0 0 0 1px rgb(163 184 214 / 0.25); }
.after .compare__tag { right: 1.25rem; background: var(--glass-strong); color: var(--c-brand-on-ink); box-shadow: inset 0 0 0 1px var(--glass-edge); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }
.compare__cards { position: absolute; z-index: 2; bottom: 1.25rem; display: grid; gap: 0.65rem; width: min(270px, 34%); }
.before .compare__cards { left: 1.25rem; }
.after .compare__cards { right: 1.25rem; }
.compare-card { padding: 0.8rem 0.95rem 0.9rem; border-radius: var(--radius-m); background: rgb(2 11 25 / 0.74); box-shadow: inset 0 0 0 1px rgb(163 184 214 / 0.2); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.compare-card--ours { background: var(--glass-strong); box-shadow: inset 0 0 0 1px var(--glass-edge); }
.compare-card__top { display: flex; align-items: center; gap: 0.45rem; }
.compare-card__top svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--c-on-ink-soft); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.compare-card--ours .compare-card__top svg { stroke: var(--c-accent-on-ink); }
.compare-card__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 10px rgb(24 224 194 / 0.9); }
.compare-card__big { margin-top: 0.35rem; font: 600 1.5rem/1.1 var(--font-display); letter-spacing: -0.02em; color: var(--c-on-ink); }
.compare-card__big span { font: 500 var(--fs-small)/1 var(--font-ui); letter-spacing: 0; color: var(--c-on-ink-soft); }
.compare-card__title { margin-top: 0.3rem; font: 600 1.0625rem/1.25 var(--font-display); color: var(--c-on-ink); }
.compare-card__sub { margin-top: 0.15rem; color: var(--c-on-ink-soft); font-size: var(--fs-small); }
.compare-card__bars { display: flex; align-items: flex-end; gap: 6px; height: 56px; margin-top: 0.65rem; }
.compare-card__bars i { flex: 1; height: var(--h); border-radius: 4px 4px 1px 1px; background: linear-gradient(0deg, var(--c-brand-dark), var(--c-brand)); box-shadow: 0 0 10px -2px rgb(5 187 252 / 0.6); }
[data-kit-compare] [data-kit-whole] { transition: opacity 0.2s, visibility 0s; }
[data-kit-compare] [data-kit-under] { opacity: 0; transition: opacity 0.2s, visibility 0s 0.2s; }
.compare__range { position: absolute; z-index: 5; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.handle { position: absolute; z-index: 4; top: 0; bottom: 0; left: calc(var(--kit-v) * 100%); width: 0; pointer-events: none; opacity: clamp(0, calc((min(var(--kit-v), 1 - var(--kit-v)) - 0.03) * 14), 1); }
.compare__range:focus-visible + .handle { opacity: 1; }
.compare__range:focus-visible + .handle .handle__knob { outline: 2px solid var(--c-paper); outline-offset: 3px; }
.handle__line { position: absolute; top: 0; bottom: 0; left: -1px; width: 2px; background: linear-gradient(180deg, var(--c-brand), var(--c-indigo)); box-shadow: 0 0 14px rgb(5 187 252 / 0.8); }
.handle__knob { position: absolute; top: 22%; left: 0; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; transform: translate(-50%, -50%); background: var(--c-brand); color: var(--c-on-brand); box-shadow: var(--glow-strong); }
.handle__knob svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.handle__hint { position: absolute; top: calc(22% + 38px); left: 0; transform: translateX(-50%); padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--glass-strong); color: var(--c-on-ink); font: 600 0.8125rem/1.2 var(--font-ui); transition: opacity var(--dur-fast); }
[data-kit-touched] .handle__hint { opacity: 0; }

/* ---------- #who: the reel ---------- */
.who { overflow: hidden; }
.who__top { position: relative; }
.who__reel { position: relative; display: block; margin-top: clamp(3.5rem, 5vw, 4.25rem); color: inherit; text-decoration: none; border-radius: var(--radius-l); container-type: inline-size; }
.who__reel:focus-visible { outline-offset: 8px; }
/* centered: the reel's window is the page's column, the row fading to the ground just outside it on both sides; at rest
   four whole cards fill it (three from 761 to 1099 px), the first at the heading's edge, the last at the stop icon's */
.reel { width: 100%; --reel-gap: 20px; --reel-inset: max(var(--gutter), calc((100cqw - var(--max-w)) / 2)); --reel-card: calc((100cqw - 2 * var(--reel-inset) - 3 * var(--reel-gap)) / 4); --reel-start: var(--reel-inset); }
@media (max-width: 1099px) { .reel { --reel-card: calc((100cqw - 2 * var(--reel-inset) - 2 * var(--reel-gap)) / 3); } }
.who__stop { position: absolute; right: 0; bottom: -56px; }

/* ---------- #faq ---------- */
.faq__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__head { position: sticky; top: calc(var(--header-h) + 2rem); }

/* ---------- #close: the idea's question over an owner's good news ---------- */
.close { display: grid; align-items: center; min-height: clamp(580px, 72vh, 780px); padding-block: var(--section-y); }
.close .band__media video { object-position: 38% 30%; }
.close__shade { background:
  linear-gradient(270deg, rgb(2 11 25 / 0.95) 0%, rgb(2 11 25 / 0.84) 34%, rgb(3 14 32 / 0.45) 56%, rgb(4 18 40 / 0.1) 74%, rgb(4 18 40 / 0) 86%),
  linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 20%, rgb(2 11 25 / 0) 78%, var(--c-ink) 100%); }
/* the line rises behind the picker, under the words: its arrow ends below the close's line, never through it */
.close__rise { position: absolute; z-index: 0; right: 0; bottom: 0; width: min(700px, 50%); height: 100%; pointer-events: none; opacity: 0.85; filter: drop-shadow(0 0 8px rgb(5 187 252 / 0.6)); }
.close__in { position: relative; z-index: 1; display: flex; justify-content: flex-end; }
.close__words { width: min(600px, 100%); }
.close__title { font-size: clamp(2.4rem, 1.4rem + 3.4vw, 4.25rem); letter-spacing: -0.03em; }
.close__line { max-width: 30rem; margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.close__stop { position: absolute; z-index: 2; left: max(var(--gutter), calc((100% - var(--max-w)) / 2)); bottom: calc(var(--section-y) - 3rem); }

/* ---------- the narrower screens ---------- */
@media (max-width: 1000px) {
  .plan__in { grid-template-columns: 1fr; }
  .plan__panels { min-height: 470px; }
  .worth__box { grid-template-columns: 1fr; grid-template-areas: "total" "picture" "sliders" "figures" "note"; grid-template-rows: none; }
  .faq__in { grid-template-columns: 1fr; }
  .faq__head { position: static; }
}
@media (max-width: 760px) {
  .how__map .scene { height: 720px; }
  /* the phone: each card's clip fills a tall box with its faces in the upper half; its scene stands on the clip's
     lower half, below every face; the words follow under the clip */
  .outcomes__grid { grid-template-columns: 1fr; }
  .outcome { display: block; min-height: 0; }
  .outcome::after { display: none; }
  .outcome__media { position: relative; inset: auto; height: 580px; border-radius: var(--radius-l) var(--radius-l) 0 0; }
  .outcome__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, var(--c-deep) 0%, rgb(7 24 51 / 0.5) 24%, rgb(7 24 51 / 0) 50%); }
  .outcome--found { --pos: 40% 50%; }
  .outcome--answer { --pos: 46% 30%; }
  .outcome--reviews { --pos: 78% 40%; }
  .outcome--work { --pos: 62% 50%; }
  .outcome__scene, .outcome--found .outcome__scene, .outcome--answer .outcome__scene, .outcome--reviews .outcome__scene, .outcome--work .outcome__scene { top: 312px; left: 0.9rem; right: 0.9rem; width: auto; }
  .outcome__words { padding: 1rem 1.25rem 1.35rem; }
  /* the found card's "New call" card hangs below its list, past the clip's foot: its words start below it */
  .outcome--found .outcome__words { padding-top: 3.5rem; }
  .plan__words { display: contents; }
  .plan__words .part__head { order: 1; }
  .plan__panels { order: 2; min-height: 0; align-items: start; }
  .plan__tabs { order: 3; margin-top: 0; }
  .plan__cta { order: 4; margin-top: 0; }
  .plan__in { row-gap: 1.5rem; }
  .compare__box { height: 640px; }
  .after .compare__photo { width: calc(100% + 2px); object-position: 46% 30%; }
  .compare__cards { bottom: 0.75rem; gap: 0.5rem; }
  .before .compare__cards { left: 0.75rem; width: calc(var(--rest, 46%) - 1.5rem); }
  .after .compare__cards { right: 0.75rem; width: calc(100% - var(--rest, 46%) - 1.5rem); }
  .compare-card { padding: 0.6rem 0.7rem 0.7rem; }
  .compare-card__big { font-size: 1.2rem; }
  .compare-card__big span, .compare-card__sub { font-size: 0.8125rem; }
  .compare-card__title { font-size: 0.9375rem; }
  .compare-card__top .label { font-size: 0.6875rem; letter-spacing: 0.08em; }
  .compare-card__bars { height: 40px; gap: 4px; }
  .compare__tag { top: 0.75rem; padding: 0.35rem 0.6rem; font-size: 0.75rem; }
  .before .compare__tag { left: 0.75rem; }
  /* the tag keeps to its own side of the line at rest */
  .after .compare__tag { right: 0.75rem; max-width: calc(54% - 1.75rem); text-align: right; }
  /* the knob between the owner's face (above) and the cards (below) */
  .handle__knob { top: 47%; }
  .handle__hint { top: calc(47% + 36px); }
  /* on the phone one card stands in the middle, the edges of its neighbors on both sides */
  .reel { --reel-card: 240px; --reel-gap: 14px; --reel-inset: var(--gutter); --reel-start: calc((100cqw - var(--reel-card)) / 2); }
  .close { align-items: end; min-height: 760px; }
  .close .band__media video { object-position: 36% 30%; }
  .close__shade { background:
    linear-gradient(0deg, rgb(2 11 25 / 0.97) 0%, rgb(2 11 25 / 0.9) 50%, rgb(2 11 25 / 0.35) 68%, rgb(2 11 25 / 0) 82%),
    linear-gradient(180deg, var(--c-ink) 0%, rgb(2 11 25 / 0) 18%); }
  .close__rise { width: 100%; height: 70%; opacity: 0.6; }
  .close__stop { left: auto; right: var(--gutter); bottom: auto; top: calc(var(--section-y) + 0.5rem); }
}