/* The home page: places and sizes its parts, with the tokens of system.css (design\components.md for the patterns). */

/* ---------- hero: a split with an arc (the kit's rotate) ---------- */
.hero { --r: 66vw; --media-left: 45%; --words-left: max(var(--gutter), calc((100% - 1400px) / 2)); --hero-fs: min(4.6rem, calc((45vw - max(var(--gutter), (100vw - 1400px) / 2) - 2.75rem) / 8.1)); position: relative; display: grid; align-items: center; min-height: clamp(640px, calc(100svh - 76px), 860px); overflow: hidden; background: var(--c-paper); isolation: isolate; }
.hero__media { position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: var(--media-left); overflow: hidden; background: var(--c-night); clip-path: circle(var(--r) at var(--r) 50%); }
.hero__rings { position: absolute; z-index: 0; left: calc(var(--media-left) - 33vw); top: calc(50% - 99vw); width: 198vw; height: 198vw; max-width: none; fill: none; stroke: var(--c-accent); stroke-width: 1.4; pointer-events: none; }
.hero__rings circle { vector-effect: non-scaling-stroke; opacity: calc(.62 - var(--k) * .07); }
.hero__words { position: relative; z-index: 2; width: min(calc(var(--media-left) - var(--words-left) - 2.75rem), 620px); margin-left: var(--words-left); padding-block: clamp(2rem, 5vh, 3.5rem); }
.hero__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: var(--hero-fs); line-height: .98; letter-spacing: -0.042em; color: var(--c-ink); }
.hero__lines > span { display: block; }
.hero__line2 { white-space: nowrap; }
.hero__word { display: inline-block; font-size: 1.03em; letter-spacing: -0.02em; opacity: calc(1 - var(--kit-swap, 0) * .8); filter: blur(calc(var(--kit-swap, 0) * 5px)); transform: translateY(calc(var(--kit-swap, 0) * .14em)); }
.hero__lead { max-width: 33em; margin: 1.35rem 0 1.6rem; font-size: clamp(1.0625rem, .95rem + .42vw, 1.3rem); line-height: 1.5; color: var(--c-ink-soft); text-wrap: pretty; }
.hero__lead b { color: var(--c-ink); font-weight: 700; }
.hero__picker { max-width: 520px; }

/* the kit's header CSS (kit.md, "The header that changes its field"), kept 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); }

/* each field's card, where its footage has no face */
.hero__card { position: absolute; z-index: 4; bottom: clamp(1.75rem, 6vh, 3.75rem); display: flex; align-items: center; gap: .85rem; max-width: min(360px, 72%); padding: .85rem 1.15rem .85rem .85rem; border-radius: 18px; background: var(--c-card); box-shadow: var(--shadow-l); opacity: min(1, calc(var(--kit-in, 1) * 2.4)); transform: translateY(calc((1 - var(--kit-in, 1)) * 18px)); }
.hero__card--left { left: 15%; }
.hero__card--right { right: 7%; }
.hero__card-icon { position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: var(--c-accent); color: var(--c-ink); }
.hero__ping { position: absolute; left: .85rem; top: 50%; width: 42px; height: 42px; translate: 0 -50%; pointer-events: none; }
.hero__ping i { position: absolute; inset: 0; border: 2px solid var(--c-accent); border-radius: 50%; opacity: calc(1 - var(--kit-in, 1)); transform: scale(calc(1 + var(--kit-in, 1) * 1.7)); }
.hero__ping i + i { opacity: calc((1 - var(--kit-in, 1)) * .6); transform: scale(calc(1 + var(--kit-in, 1) * 2.8)); }
.hero__card-text b { display: block; font: 750 1.0625rem/1.2 var(--font-ui); color: var(--c-ink); }
.hero__card-text span { display: block; margin-top: .15rem; font: 500 .9375rem/1.3 var(--font-ui); color: var(--c-ink-soft); }
.hero__stop { position: absolute; top: 1.25rem; right: 1.25rem; }
/* under reduced motion the header rests on its first slide: its card shows whole */
@media (prefers-reduced-motion: reduce) { .hero__card { opacity: 1; transform: none; } .hero__ping { display: none; } }

.hero__slide--hero-business { --pos: 70% 50%; }
.hero__slide--hero-business video { object-position: 70% 50%; }
@media (max-width: 1100px) and (min-width: 961px) { .hero { --media-left: 50%; --hero-fs: calc((50vw - var(--gutter) - 2.5rem) / 8.3); } }
@media (max-width: 960px) {
  .hero { --hero-fs: clamp(2.3rem, 10.2vw, 3.6rem); display: block; min-height: 0; padding-bottom: 0; }
  .hero__words { width: auto; margin: 0 var(--gutter); padding: 1.75rem 0 1.75rem; }
  .hero__picker { max-width: none; }
  .hero__media { position: relative; left: auto; height: clamp(360px, 100vw, 560px); clip-path: circle(150vw at 50% 150vw); }
  .hero__rings { display: none; }
  .hero__card { bottom: 1.25rem; max-width: calc(100% - 2.5rem); }
  .hero__card--left, .hero__card--right { left: 1.25rem; right: auto; }
  .hero__stop { top: 2.5rem; right: 1rem; }
}

/* ---------- plan: the tour beside a night stage ---------- */
.tour { display: grid; grid-template-columns: minmax(290px, 370px) minmax(0, 1fr); gap: clamp(1rem, 2.4vw, 2rem); align-items: stretch; }
.tour__tabs { display: flex; flex-direction: column; gap: .75rem; }
.tour__tab { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; overflow: hidden; padding: 1.25rem 1.25rem 1.4rem; border: 1px solid var(--c-line); border-radius: var(--radius-m); background: var(--c-card); color: var(--c-ink); font: inherit; text-align: left; cursor: pointer; transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med), box-shadow var(--dur-med); }
.tour__tab:hover { border-color: var(--c-accent); }
.tour__tab[aria-selected="true"] { border-color: var(--c-night); background: var(--c-night); color: var(--c-on-brand); box-shadow: var(--shadow-m); }
.tour__tab:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; }
.tour__num { font-size: 2.1rem; line-height: 1; color: var(--c-brand-text); }
.tour__tab[aria-selected="true"] .tour__num { color: var(--c-accent); }
.tour__text b { display: block; font: 750 1.1875rem/1.22 var(--font-display); letter-spacing: -0.012em; }
.tour__text span { display: block; margin-top: .35rem; font-size: .9375rem; line-height: 1.45; color: var(--c-ink-soft); }
.tour__tab[aria-selected="true"] .tour__text span { color: var(--c-on-night-soft); }
.tour__fill { position: absolute; left: 0; bottom: 0; width: calc(var(--kit-fill, 0) * 100%); height: 3px; background: var(--c-accent); }
.tour__tab:not([aria-selected="true"]) .tour__fill { display: none; }
.tour__stage { position: relative; min-height: clamp(460px, 40vw, 530px); overflow: hidden; border-radius: var(--radius-l); background: var(--c-night); isolation: isolate; }
.tour__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.tour__shade { position: absolute; inset: 0; z-index: 1; background: radial-gradient(110% 85% at 50% 52%, color-mix(in srgb, var(--c-night) 48%, transparent), color-mix(in srgb, var(--c-night) 84%, transparent)); }
.tour__panel { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: clamp(1rem, 3vw, 2.25rem); }
.tour__panel:focus-visible { outline: 3px solid var(--c-accent); outline-offset: -6px; border-radius: var(--radius-l); }
.tour__scene { width: 100%; }
.tour__scene--scan { max-width: 560px; }
.tour__scene--fillcal { max-width: 680px; }
.tour__scene--yourpart { max-width: 780px; }
.tour__scene--estimate { max-width: 520px; }
.tour__stage [data-scene="scan"] .sn-val { font-variant-numeric: lining-nums proportional-nums; } /* "1.6%", not "1 . 6%" */
.tour__stage [data-scene="scan"][data-look~="dark"] { --sn-soft: var(--c-on-night-soft); } /* its values read clearly on the dark card */
@media (max-width: 480px) { .tour__stage [data-scene="scan"] .sn-val { font-size: 14px; } }
.tour__stop { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 960px) {
  .tour { grid-template-columns: 1fr; }
  .tour__tabs { gap: .5rem; }
  .tour__tab { padding: .9rem 1rem; gap: .8rem; align-items: center; }
  .tour__num { font-size: 1.6rem; }
  .tour__text span { display: none; }
  /* the stop icon gets a strip of its own over the scenes */
  .tour__stage { min-height: 522px; }
  .tour__panel { inset: 52px 0 0; padding: 0 .75rem .75rem; }
  .tour__stop { top: 6px; right: .75rem; }
}

/* ---------- how: three steps lit by the chat ---------- */
.how__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.steps { display: grid; gap: .65rem; margin: 2.25rem 0 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: .9rem; padding: 1.1rem 1.25rem 1.2rem 1rem; border: 1px solid transparent; border-radius: var(--radius-m); transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med), box-shadow var(--dur-med); }
.step[aria-current="step"] { border-color: var(--c-line); background: var(--c-card); box-shadow: var(--shadow-m); }
.step__num { font-size: 3rem; line-height: .9; color: var(--c-ink-soft); transition: color var(--dur-med); }
.step[aria-current="step"] .step__num { color: var(--c-brand-text); }
.step__title { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem .65rem; margin: 0; font: 750 1.375rem/1.2 var(--font-display); letter-spacing: -0.015em; }
.step__tag { padding: .42rem .65rem; border-radius: 999px; background: var(--c-brand-light); font: 700 .8125rem/1 var(--font-ui); letter-spacing: 0; color: var(--c-brand-dark); }
.step__text p { margin: .45rem 0 0; color: var(--c-ink-soft); }
.how .cta-row { margin-top: 2rem; }
.how__visual { position: relative; padding-left: clamp(3.5rem, 9vw, 8rem); }
.how__photo { position: relative; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-l); box-shadow: var(--shadow-l); background: var(--c-night); }
.how__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 64% 50%; }
.how__stop { position: absolute; top: 1rem; right: 1rem; }
.phone { position: absolute; z-index: 2; left: 0; top: 50%; display: flex; flex-direction: column; width: clamp(250px, 22vw, 296px); height: clamp(500px, 41vw, 570px); overflow: hidden; border: 10px solid var(--c-night); border-radius: 42px; background: var(--c-paper); box-shadow: var(--shadow-l); translate: 0 -50%; }
.phone__top { display: flex; align-items: center; gap: .6rem; padding: .85rem .9rem .75rem; border-bottom: 1px solid var(--c-line); background: var(--c-card); }
.phone__top img { width: 34px; height: 34px; border-radius: 9px; }
.phone__top b { display: block; font: 750 .9375rem/1.2 var(--font-ui); }
.phone__top small { display: block; font: 500 .8125rem/1.25 var(--font-ui); color: var(--c-ink-soft); }
.chat { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: .5rem; min-height: 0; padding: .85rem; overflow: hidden; opacity: calc(1 - var(--kit-out, 0)); }
.msg { flex: none; max-width: 86%; margin: 0; padding: .6rem .8rem; border-radius: 16px; font: 500 .875rem/1.38 var(--font-ui); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px)); }
.msg--bot { align-self: flex-start; border: 1px solid var(--c-line); border-bottom-left-radius: 6px; background: var(--c-card); 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: 650; }
.msg--chips { display: flex; gap: .35rem; max-width: 100%; padding: 0; }
.msg--chips span { padding: .48rem .62rem; border: 1.5px solid var(--c-line); border-radius: 10px; background: var(--c-card); font-weight: 750; }
.msg--chips [data-kit-on] { border-color: var(--c-ink); background: var(--c-ink); color: var(--c-on-brand); }
.msg--typing { align-self: flex-start; display: flex; gap: 4px; padding: .75rem .85rem; border: 1px solid var(--c-line); background: var(--c-card); }
.msg--typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-ink-soft); animation: how-dot 1s var(--ease-in-out) infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes how-dot { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(-3px); opacity: 1; } }
.msg--reading { display: grid; gap: .45rem; min-width: 70%; }
.msg__bar { position: relative; display: block; height: 5px; overflow: hidden; border-radius: 3px; background: var(--c-line); }
.msg__bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--kit-fill, 0) * 100%); border-radius: inherit; background: var(--c-accent); }
.msg--result { align-self: stretch; display: grid; gap: .15rem; max-width: none; padding: .85rem .95rem .8rem; border-radius: 16px; background: var(--c-night); color: var(--c-on-brand); }
.msg__kicker { font: 700 .8125rem/1.2 var(--font-ui); color: var(--c-accent); }
.msg--result b { font: 800 1.2rem/1.15 var(--font-display); letter-spacing: -0.01em; }
.msg--result > span:not(.msg__kicker):not(.msg__bars), .msg--result small { font-size: .8125rem; color: var(--c-on-night-soft); }
.msg__bars { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 3px; height: 40px; margin: .45rem 0 .25rem; }
.msg__bars i { height: var(--v); border-radius: 3px 3px 1px 1px; background: var(--c-accent); }
@media (max-width: 960px) {
  .how__grid { grid-template-columns: 1fr; }
  .how__visual { display: grid; justify-items: center; padding-left: 0; }
  .how__photo { width: 100%; aspect-ratio: 16 / 11; }
  .phone { position: relative; left: auto; top: auto; width: min(300px, 86vw); height: 520px; margin-top: -96px; translate: none; }
}

/* ---------- worth: the calculator and its town ---------- */
.worth__box { --calc-ink: var(--c-ink); --calc-ink-soft: var(--c-ink-soft); --calc-track: var(--c-line); --calc-fill: var(--c-accent); --calc-thumb: var(--c-card); --calc-thumb-edge: var(--c-brand); --calc-thumb-shadow: var(--shadow-m); --calc-focus: var(--c-brand); --calc-surface: var(--c-card); --calc-font: var(--font-ui); --calc-font-figure: var(--font-display); --calc-track-radius: 4px; --calc-thumb-radius: 50%; --calc-track-size: 8px; --calc-thumb-size: 30px; --calc-value-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); --calc-total-size: clamp(2.4rem, 1.5rem + 3vw, 3.75rem); --calc-figure-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); --calc-gap: 1.6rem;
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; padding: clamp(1.25rem, 3vw, 2.5rem); border: 1px solid var(--c-line); border-radius: var(--radius-l); background: var(--c-card); box-shadow: var(--shadow-m); }
/* Computer: the sliders at the top of the left column and the year's sums at its foot, level with the picture's foot;
   the total and the picture at the right. Phone: one column, in the order sliders, total, picture, sums. */
.worth__controls { display: flex; flex-direction: column; align-self: stretch; padding-top: .5rem; min-width: 0; }
.worth__controls .calc-slider__label { font-weight: 650; }
.worth__controls .calc-slider__value { font-weight: 800; color: var(--c-brand-text); }
.worth__sums { display: grid; gap: .9rem; margin-top: auto; padding-top: 2rem; }
.worth__result { display: grid; gap: 1rem; min-width: 0; }
.worth__box .calc-total { margin: 0; }
.worth__box .calc-total__value { font-weight: var(--w-display); letter-spacing: -0.03em; }
.worth__box .calc-total__label { color: var(--c-ink-soft); font-weight: 600; }
.worth__box .calc-figures { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
.worth__box .calc-figure { margin: 0; padding: .85rem 1rem; border-radius: var(--radius-s); background: var(--c-paper); }
.worth__box .calc-figure__value { font-weight: 800; letter-spacing: -0.02em; }
.worth__box .calc-figure__label { display: block; color: var(--c-ink-soft); font-size: var(--fs-small); font-weight: 600; }
.worth__box .calc-note { margin: 0; color: var(--c-ink-soft); font-size: var(--fs-small); }
/* Schibsted's tabular figures give the comma a digit's width ("$23 , 700"): proportional figures read as one number. */
.worth__box .calc-num, .worth__box .calc-fit, .worth__box .calc-scale { font-variant-numeric: lining-nums proportional-nums; }
@media (max-width: 520px) { .worth__box .calc-scale__mark + .calc-scale__mark { display: none; } }
.worth .wrap { position: relative; }
.worth__stop { position: absolute; top: 0; right: var(--gutter); }

.town { position: relative; margin: 0; }
.town__photo { display: block; width: 100%; aspect-ratio: 4 / 3; height: auto; border-radius: var(--radius-m); object-fit: cover; filter: brightness(.42) saturate(.55) sepia(.25) hue-rotate(-12deg) contrast(1.05); }
.town__map { position: absolute; inset: 0 0 auto 0; width: 100%; aspect-ratio: 4 / 3; height: auto; overflow: visible; border-radius: var(--radius-m); }
.town__g0 { stop-color: var(--c-gold); stop-opacity: .95; }
.town__g1 { stop-color: var(--c-accent); stop-opacity: .5; }
.town__g2 { stop-color: var(--c-accent); stop-opacity: 0; }
.town__reach { fill: url(#town-glow); opacity: .32; }
.town__ring { fill: none; stroke: var(--c-accent); stroke-width: 1.5; opacity: 0; }
.town__ring[data-kit-on] { opacity: .55; }
.town__ring.is-last { stroke-width: 2.6; opacity: 1; }
.town__home { fill: var(--c-gold); opacity: 0; }
.town__home.is-lit { opacity: 1; filter: drop-shadow(0 0 4px var(--c-accent)); }
.town__pin circle { fill: var(--c-night); stroke: var(--c-accent); stroke-width: 2; }
.town__tag rect { fill: var(--c-card); }
.town__tag text { font: 800 22px/1 var(--font-ui); fill: var(--c-ink); }
.town__more { font: 700 22px/1 var(--font-ui); fill: var(--c-on-brand); text-anchor: middle; }
.town__key { display: flex; flex-wrap: wrap; gap: .4rem 1.25rem; margin: .7rem 0 0; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--c-ink-soft); }
.town__key span { display: inline-flex; align-items: center; gap: .45em; }
.town__key-home::before { content: ""; width: 11px; height: 11px; border-radius: 50%; background: var(--c-gold); box-shadow: 0 0 0 2px var(--c-brand-light), 0 0 6px var(--c-accent); }
.town__key-ring::before { content: ""; width: 14px; height: 14px; border: 2px solid var(--c-accent); border-radius: 50%; }
@media (max-width: 960px) {
  .worth__box { grid-template-columns: 1fr; }
  .worth__controls, .worth__result { display: contents; }
  .worth__box .calc-sliders { order: 1; }
  .worth__box .calc-total { order: 2; }
  .worth__box .worth__picture { order: 3; }
  .worth__sums { order: 4; padding-top: 0; }
  .worth__stop { top: -3.25rem; }
}
/* The picture's labels keep at least 12 px when the drawing is small. */
@media (max-width: 440px) { .town__tag text, .town__more { font-size: 31px; } }

/* ---------- outcomes: four rows, each a clip and its scene ---------- */
.rows { display: grid; gap: clamp(3.5rem, 7vw, 6.5rem); }
.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.row--flip { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
.row--flip .row__words { order: 2; }
.row__title { margin: 0; font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(1.9rem, 1.2rem + 2.1vw, 2.9rem); line-height: 1.04; letter-spacing: var(--ls-display); text-wrap: balance; }
.row__words p { max-width: 34em; margin: 1rem 0 0; font-size: 1.125rem; color: var(--c-ink-soft); }
.row__media { position: relative; aspect-ratio: 16 / 11; border-radius: var(--radius-l); background: var(--c-night); box-shadow: var(--shadow-l); isolation: isolate; }
.row__clip { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.row__scene { position: absolute; z-index: 2; top: 6%; width: min(380px, 64%); }
.row__scene--tl { left: 5%; }
.row__scene--tr { right: 5%; }
.row__scene--narrow { width: min(300px, 46%); }
/* The reviews card hangs off the clip's inner edge, so the customer at its middle stays clear. */
.row__scene--hl { left: -6%; width: min(360px, 52%); }
.row__clip--out-reviews { object-position: 0% 50%; }
.outcomes__stop, .row__stop { position: absolute; top: 1rem; right: 1rem; }
@media (min-width: 961px) { .row__stop--br { top: auto; bottom: 1rem; } } /* the call card holds the top right */
@media (max-width: 960px) {
  .row, .row--flip { grid-template-columns: 1fr; gap: 1.5rem; }
  .row--flip .row__words { order: 0; }
  /* On the phone each card hangs under its clip, overlapping only its lower edge: no face is covered. */
  .row__media { display: grid; aspect-ratio: auto; background: none; box-shadow: none; }
  .row__clip { position: relative; inset: auto; height: auto; aspect-ratio: 1; background: var(--c-night); box-shadow: var(--shadow-l); }
  .row__scene, .row__scene--narrow, .row__scene--hl { position: relative; top: auto; left: auto; right: auto; width: auto; margin: -2.5rem 4% 0; }
  .row__clip--out-reviews { object-position: 50% 50%; }
  .row__clip--out-work { object-position: 100% 50%; }
}

/* ---------- compare: the line between the two ---------- */
.compare { position: relative; aspect-ratio: 16 / 8; overflow: hidden; border-radius: var(--radius-l); background: var(--c-night); box-shadow: var(--shadow-l); isolation: isolate; }
.compare .before, .compare .after { position: absolute; inset: 0; }
.compare .after { clip-path: inset(0 0 0 calc(var(--kit-v, .5) * 100%)); }
.compare__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.before .compare__img { filter: grayscale(.9) contrast(.9) brightness(.92); }
.compare__tag { position: absolute; top: 1.25rem; left: 1.25rem; display: inline-flex; align-items: center; gap: .55rem; padding: .6rem .95rem; border-radius: 999px; background: var(--c-card); color: var(--c-ink-soft); font: 750 1rem/1 var(--font-ui); box-shadow: var(--shadow-s); }
.compare__tag--us { left: auto; right: 1.25rem; background: var(--c-night); color: var(--c-on-brand); }
.compare__tag--us img { width: 24px; height: 24px; border-radius: 6px; }
.compare__cards { position: absolute; left: 1.25rem; bottom: 1.25rem; display: grid; gap: .55rem; width: min(300px, 38%); margin: 0; padding: 0; list-style: none; }
.after .compare__cards { left: auto; right: 1.25rem; }
.ccard { padding: .8rem .95rem; border-radius: 14px; background: var(--c-card); box-shadow: var(--shadow-m); }
.before .ccard { background: color-mix(in srgb, var(--c-card) 88%, var(--c-ink-soft)); }
.ccard b { display: block; font: 750 1rem/1.25 var(--font-ui); color: var(--c-ink); }
.ccard span { font-size: .875rem; color: var(--c-ink-soft); }
.ccard--bad s { text-decoration-color: var(--c-brand); text-decoration-thickness: 2px; }
.ccard--good b { color: var(--c-brand-text); }
.ccard__bars { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end; gap: 3px; height: 34px; margin-top: .5rem; }
.ccard__bars i { height: var(--v); border-radius: 2px; background: var(--c-accent); }
[data-kit-whole] { transition: opacity .2s, visibility 0s; }
[data-kit-under] { opacity: 0; transition: opacity .2s, visibility 0s .2s; }
.compare input[type="range"] { position: absolute; inset: 0; z-index: 5; 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, .5) * 100%); width: 0; pointer-events: none; opacity: clamp(0, calc((min(var(--kit-v, .5), 1 - var(--kit-v, .5)) - 0.03) * 14), 1); }
.handle__line { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--c-accent); box-shadow: 0 0 14px color-mix(in srgb, var(--c-accent) 70%, transparent); }
.handle__knob { position: absolute; top: 40%; left: 0; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 50%; background: var(--c-accent); color: var(--c-ink); box-shadow: var(--shadow-l); translate: -50% -50%; }
.handle__hint { position: absolute; top: calc(40% + 38px); left: 0; padding: .35rem .65rem; border-radius: 999px; background: var(--c-night); color: var(--c-on-brand); font: 700 .8125rem/1 var(--font-ui); translate: -50% 0; transition: opacity var(--dur-med); }
.compare[data-kit-touched] .handle__hint { opacity: 0; }
.compare input:focus-visible + .handle { opacity: 1; }
.compare input:focus-visible + .handle .handle__knob { outline: 3px solid var(--c-on-brand); outline-offset: 3px; }
.promises { display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; margin: clamp(1.75rem, 3vw, 2.5rem) 0 0; padding: 0; list-style: none; }
.promises li { display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.05rem; border: 1px solid var(--c-line); border-radius: 999px; background: var(--c-card); font: 650 .9375rem/1.2 var(--font-ui); }
.promises li::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c-accent); box-shadow: 0 0 0 4px var(--c-brand-light); }
@media (max-width: 760px) {
  .compare { aspect-ratio: 3 / 4.4; }
  .compare__tag { top: .85rem; left: .6rem; padding: .5rem .75rem; font-size: .875rem; }
  /* the tags fit inside their own side where the line rests (50%), down to 360 px */
  .compare__tag--us { right: .6rem; left: auto; padding: .45rem .6rem; font-size: .8125rem; }
  .compare__tag--us img { display: none; }
  .compare__cards { left: .6rem; bottom: .75rem; width: calc(47% - .6rem); gap: .4rem; }
  .after .compare__cards { right: .6rem; }
  .ccard { padding: .6rem .65rem; border-radius: 12px; }
  .ccard b { font-size: .875rem; }
  .ccard span { font-size: .8125rem; }
  .handle__knob { top: 25%; width: 48px; height: 48px; }
  .handle__hint { top: calc(25% + 32px); } /* above the cards at rest, down to 360 px */
}

/* ---------- who: the wall of seven tiles ---------- */
.wall { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.75rem, 1.4vw, 1.25rem); }
.tile { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--radius-m); background: var(--c-night); color: var(--c-on-brand); text-decoration: none; isolation: isolate; }
.tile__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease-out); }
.tile:hover .tile__img { transform: scale(1.04); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--c-night) 90%, transparent) 100%); }
.tile__text { position: absolute; z-index: 2; left: 1.1rem; right: 1.1rem; bottom: 1.1rem; }
.tile__name { display: block; font: 800 1.375rem/1.15 var(--font-display); letter-spacing: -0.015em; }
.tile__fields { display: block; margin-top: .35rem; font: 500 .9375rem/1.4 var(--font-ui); color: var(--c-on-night-soft); }
.tile:focus-visible { outline: 3px solid var(--c-brand); outline-offset: 3px; }
.tile--more { grid-column: span 2; aspect-ratio: auto; min-height: 260px; }
.tile--more::after { display: none; }
.tile__rings { position: absolute; right: -70px; bottom: -70px; width: 440px; height: 440px; fill: none; stroke: var(--c-accent); stroke-width: 1.3; opacity: .34; }
.tile--more .tile__text { left: clamp(1.25rem, 3vw, 2.25rem); bottom: clamp(1.25rem, 3vw, 2.25rem); max-width: 30rem; }
.tile--more .tile__name { font-family: var(--font-display); font-weight: var(--w-display); font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.6rem); letter-spacing: var(--ls-display); }
.tile--more .tile__fields { font-size: 1rem; }
.tile__go { display: inline-flex; align-items: center; gap: .5em; margin-top: 1.1rem; padding: .85rem 1.2rem; border-radius: 999px; background: var(--c-accent); color: var(--c-ink); font: 700 1rem/1 var(--font-ui); }
@media (max-width: 1000px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .tile__name { font-size: 1.125rem; } .tile__fields { font-size: .8125rem; } .tile__text { left: .8rem; right: .8rem; bottom: .8rem; } .tile--more { min-height: 300px; } }

/* ---------- faq ---------- */
.faq { display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__head { position: sticky; top: 100px; }
.faq__cta { margin-top: 1.6rem; }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq__head { position: static; } }

/* ---------- close: the night slab ---------- */
.close { padding-top: clamp(2rem, 4vw, 3rem); }
.close__slab { position: relative; display: grid; align-items: center; min-height: 560px; overflow: hidden; border-radius: var(--radius-l); background: var(--c-night); color: var(--c-on-brand); isolation: isolate; }
.close__bg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.close__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, color-mix(in srgb, var(--c-night) 94%, transparent) 0%, color-mix(in srgb, var(--c-night) 82%, transparent) 42%, color-mix(in srgb, var(--c-night) 30%, transparent) 100%); }
.close__rings { position: absolute; z-index: 1; right: -240px; top: 50%; width: 1000px; height: 1000px; max-width: none; fill: none; stroke: var(--c-accent); stroke-width: 1.3; translate: 0 -50%; pointer-events: none; }
.close__rings circle { opacity: calc(.5 - var(--k) * .055); }
.close__body { position: relative; z-index: 2; max-width: 620px; padding: clamp(1.75rem, 5vw, 4.5rem); }
.close__line { margin: 1rem 0 1.75rem; font-size: 1.125rem; color: var(--c-on-night-soft); }
.close__picker { max-width: 520px; }
.close__stop { position: absolute; top: 1rem; right: 1rem; }
@media (max-width: 760px) {
  .close__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-night) 86%, transparent), color-mix(in srgb, var(--c-night) 94%, transparent)); }
  .close__body { padding: 2.25rem 1.1rem 1.5rem; }
}