/* pages/home.css: the home page's parts (plan.md, Home), placed and sized with the tokens of system.css only. */

/* ---------- hero: a split on the ink, the field clips edge to edge on the right ---------- */
.hero { position: relative; display: grid; grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr); min-height: clamp(660px, calc(100svh - 72px), 880px); background: var(--c-ink); color: var(--c-on-ink); overflow: hidden; isolation: isolate; }
.lattice--hero { left: 0; top: 0; width: 52%; height: 100%; opacity: 0.1; -webkit-mask-image: radial-gradient(110% 90% at 0% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(110% 90% at 0% 0%, #000 0%, transparent 70%); }
.hero__words { position: relative; z-index: 4; align-self: center; box-sizing: border-box; padding: clamp(48px, 6vw, 88px) clamp(28px, 3.4vw, 56px) clamp(48px, 6vw, 88px) max(var(--gutter), calc((100vw - var(--max-w)) / 2)); }
/* the headline keeps its line count while the field word changes: three set lines on the computer, four on the phone */
.hero__title { font-size: clamp(2.5rem, 4.3vw, 3.5rem); }
@media (min-width: 961px) { .hero__br--n { display: none; } }
@media (max-width: 960px) { .hero__br--w { display: none; } }
/* on a wide screen the words' column keeps its width while the page's margin grows */
@media (min-width: 1680px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .hero__words { padding-right: 32px; } }
.hero__word { color: var(--c-brand-on-ink); opacity: calc(1 - 0.78 * var(--kit-swap, 0)); }
.hero__line { margin-top: var(--space-4); max-width: 46ch; font-size: 1.1875rem; line-height: 1.55; color: var(--c-on-ink-soft); }
.picker--hero { margin-top: var(--space-5); max-width: 540px; }

.hero__stage { position: relative; z-index: 1; min-height: 100%; }
[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__slide video { object-position: var(--pos, 50% 50%); filter: saturate(0.88) contrast(1.04); }
.hero__slide .kit-first { filter: saturate(0.88) contrast(1.04); }
/* the grade: one still layer over the slides, from the page's ink at the stage's left edge into the clear */
.hero__stage::after { content: ""; position: absolute; inset: 0 0 0 -2px; z-index: 3; pointer-events: none; background: linear-gradient(90deg, var(--c-ink) 0%, color-mix(in srgb, var(--c-ink) 62%, transparent) 12%, color-mix(in srgb, var(--c-ink) 18%, transparent) 26%, transparent 36%); }
.hero__stop { right: 20px; top: 20px; }

/* each field's card: it lands with its slide, where the frame has no face and the grade is clear */
.hero__card { position: absolute; z-index: 4; display: flex; align-items: center; gap: 13px; box-sizing: border-box; padding: 13px 18px 13px 13px; min-width: 268px; border-radius: 14px; background: color-mix(in srgb, var(--c-ink) 70%, transparent); -webkit-backdrop-filter: blur(16px) saturate(1.2); backdrop-filter: blur(16px) saturate(1.2); border: 1px solid color-mix(in srgb, var(--c-paper) 18%, transparent); box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-paper) 16%, transparent), var(--shadow-l); color: var(--c-on-ink); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 16px)); }
.hero__card--tr { top: 15%; right: 7%; }
.hero__card--br { bottom: 10%; right: 7%; }
.hero__card--bl { bottom: 10%; left: 38%; }
.hero__tick { position: relative; flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--c-brand); }
.hero__tick::after { content: ""; position: absolute; left: 13px; top: 8px; width: 8px; height: 15px; border: solid var(--c-on-brand); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.hero__card-words { display: grid; gap: 2px; }
.hero__card-words b { font: 700 1rem/1.25 var(--font-ui); }
.hero__card-words span { font-size: 0.9375rem; line-height: 1.3; color: var(--c-on-ink-soft); }
.hero__card-words .hero__card-from { font-size: 0.875rem; color: var(--c-brand-on-ink); }

@media (max-width: 960px) {
  .hero { grid-template-columns: 1fr; min-height: 0; }
  .lattice--hero { width: 100%; height: 60%; }
  .hero__words { padding: 40px var(--gutter) 28px; }
  .hero__title { font-size: clamp(2.5rem, 1.6rem + 3vw, 3.5rem); }
  .picker--hero { max-width: none; }
  .hero__stage { position: relative; margin: 0 var(--gutter) 36px; aspect-ratio: 4 / 3; min-height: 0; border-radius: var(--radius-l); overflow: hidden; }
  .hero__stage::after { inset: 0; background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 24%, transparent), transparent 40%); }
  .hero__card, .hero__card--tr, .hero__card--br, .hero__card--bl { top: auto; right: auto; left: 12px; bottom: 12px; min-width: 0; max-width: calc(100% - 24px); padding: 10px 14px 10px 10px; gap: 10px; }
  .hero__tick { width: 30px; height: 30px; border-radius: 8px; }
  .hero__tick::after { left: 11px; top: 6px; width: 7px; height: 13px; }
  .hero__stop { right: 12px; top: 12px; }
}
@media (max-width: 480px) {
  .hero__line { font-size: 1.0625rem; }
  .picker { padding: 16px; }
  .picker__choice span { height: 48px; font-size: 1rem; }
  .hero__card-words b { font-size: 0.9375rem; }
  .hero__card-words span { font-size: 0.875rem; }
  .hero__card-words .hero__card-from { font-size: 0.8125rem; }
}

/* ---------- sides: the three faces of the cube ---------- */
.lattice--sides { right: 0; top: 0; width: 55%; height: 75%; -webkit-mask-image: radial-gradient(100% 90% at 100% 0%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 90% at 100% 0%, #000 0%, transparent 70%); }
.sides { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 1.8vw, 24px); }
.sides__stop { right: 12px; top: 18px; }
.side { position: relative; display: flex; flex-direction: column; }
.side--top { --tone: var(--c-cube-top); }
.side--left { --tone: var(--c-cube-light); }
.side--right { --tone: var(--c-cube-dark); }
.side__media { position: relative; overflow: hidden; aspect-ratio: 4 / 5; border-radius: var(--radius-l); background: var(--c-ink-2); }
.side__media::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; z-index: 3; background: var(--tone); }
.side__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 10%, transparent), color-mix(in srgb, var(--c-ink) 40%, transparent)); }
.side__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%); filter: saturate(0.88) contrast(1.04); }
.side__scene { position: absolute !important; z-index: 2; left: 16px; right: 16px; bottom: 18px; }
.side__title { margin-top: 22px; font-size: clamp(2.1rem, 1.5rem + 1.7vw, 2.9rem); }
.side__line { margin-top: 10px; color: var(--c-on-ink-soft); max-width: 36ch; }
.side__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; color: var(--c-brand-on-ink); font: 700 var(--fs-ui)/1.3 var(--font-ui); text-decoration: none; }
.side__arrow { position: relative; width: 14px; height: 2px; background: currentColor; border-radius: 2px; }
.side__arrow::after { content: ""; position: absolute; right: -1px; top: -3px; width: 7px; height: 7px; border: solid currentColor; border-width: 2px 2px 0 0; transform: rotate(45deg); }
.side__link[data-planned] { opacity: 0.9; }
@media (max-width: 1080px) { .side__scene { left: 10px; right: 10px; } }
@media (max-width: 900px) {
  .sides { grid-template-columns: 1fr; gap: 44px; max-width: 520px; margin: 0 auto; }
  .sides__stop { top: 14px; right: 14px; }
  .side__media { aspect-ratio: 4 / 4.4; }
}

/* ---------- plan: the free plan tour, results first ---------- */
.tour { display: grid; grid-template-columns: minmax(250px, 330px) minmax(0, 1fr); gap: 20px; align-items: stretch; }
.tour__tabs { display: grid; gap: 10px; align-content: start; }
.tour__tab { position: relative; overflow: hidden; display: grid; gap: 6px; text-align: left; padding: 20px 22px 22px; border-radius: var(--radius-m); background: var(--c-paper); border: 1px solid var(--c-line); color: var(--c-ink); cursor: pointer; font: inherit; transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.tour__tab b { font: var(--display-weight) 1.375rem/1.1 var(--font-display); font-stretch: var(--display-stretch); }
.tour__tab span { font-size: var(--fs-small); color: var(--c-ink-soft); }
.tour__tab:hover { border-color: var(--c-ink); }
.tour__tab[aria-selected="true"] { background: var(--c-ink); color: var(--c-on-ink); border-color: var(--c-ink); }
.tour__tab[aria-selected="true"] span { color: var(--c-on-ink-soft); }
.tour__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-brand); transform: scaleX(var(--kit-fill, 0)); transform-origin: 0 50%; }
.tour__tab[aria-selected="false"] .tour__bar { display: none; }
.tour__stage { position: relative; overflow: hidden; min-height: clamp(470px, 40vw, 540px); border-radius: var(--radius-l); background: var(--c-ink); }
.tour__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; filter: saturate(0.85); }
.tour__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--c-ink) 42%, transparent); pointer-events: none; }
.tour__panel { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; box-sizing: border-box; padding: 40px 32px; }
.tour__panel:focus-visible { outline-offset: -6px; }
.tour__scene { width: 100%; }
.tour__stop { right: 16px; top: 16px; z-index: 4; }
@media (max-width: 900px) {
  .tour { grid-template-columns: 1fr; }
  .tour__tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .tour__tab { padding: 14px 12px 16px; }
  .tour__tab b { font-size: 1.0625rem; }
  .tour__tab span { display: none; }
  .tour__stage { min-height: 500px; }
  .tour__panel { padding: 56px 14px 24px; }
}

/* ---------- how: three steps lit by the chat ---------- */
.how-part { overflow: hidden; }
.how__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.how__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 70% 50%; opacity: 0.9; }
.how__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--c-ink) 0%, color-mix(in srgb, var(--c-ink) 88%, transparent) 42%, color-mix(in srgb, var(--c-ink) 30%, transparent) 100%); }
.how { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); gap: clamp(32px, 6vw, 88px); align-items: center; }
.steps { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: grid; gap: 12px; }
.step { display: flex; gap: 18px; padding: 20px 22px; border-radius: var(--radius-m); border: 1px solid var(--c-ink-line); background: color-mix(in srgb, var(--c-ink-2) 76%, transparent); transition: background var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.step[aria-current="step"] { background: color-mix(in srgb, var(--c-ink-3) 94%, transparent); border-color: color-mix(in srgb, var(--c-brand) 65%, transparent); }
.step__num { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; background: var(--c-ink-3); font: var(--display-weight) 1.25rem/1 var(--font-display); font-stretch: var(--display-stretch); color: var(--c-on-ink); transition: background var(--dur-med) var(--ease-out), color var(--dur-med) var(--ease-out); }
.step[aria-current="step"] .step__num { background: var(--c-brand); color: var(--c-on-brand); }
.step__title { font-size: 1.4375rem; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.step__tag { font: 600 0.8125rem/1 var(--font-ui); letter-spacing: 0; padding: 6px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-on-ink) 10%, transparent); color: var(--c-on-ink-soft); }
.step__text p { margin-top: 6px; color: var(--c-on-ink-soft); }

.phone { position: relative; justify-self: center; width: min(370px, 100%); }
.how__stop { right: -12px; top: -12px; }
.phone__body { border-radius: 38px; padding: 12px; background: var(--c-ink-2); border: 1px solid var(--c-ink-line); box-shadow: inset 0 0 0 5px var(--c-ink), var(--shadow-l); }
.phone__head { display: flex; align-items: center; gap: 12px; padding: 14px 14px 12px; border-bottom: 1px solid var(--c-ink-line); }
.phone__avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--c-paper); }
.phone__avatar img { width: 30px; height: auto; }
.phone__who b { display: block; font: 700 0.9375rem/1.25 var(--font-ui); color: var(--c-on-ink); }
.phone__who span { display: block; font-size: 0.8125rem; color: var(--c-on-ink-soft); }
.phone__screen { box-sizing: border-box; height: 486px; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 8px 10px; }
.msg { max-width: 86%; padding: 10px 14px; border-radius: 16px; font: 500 0.9375rem/1.4 var(--font-ui); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.msg--in { align-self: flex-start; background: var(--c-ink-3); color: var(--c-on-ink); border-bottom-left-radius: 4px; }
.msg--out { align-self: flex-end; background: var(--c-brand); color: var(--c-on-brand); font-weight: 700; border-bottom-right-radius: 4px; }
.msg--chips { align-self: flex-start; display: flex; gap: 6px; padding: 0; background: none; }
.msg--chips span { padding: 9px 15px; border-radius: 999px; border: 1px solid var(--c-ink-line); color: var(--c-on-ink); font-weight: 700; }
.msg--chips [data-kit-on] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.msg--typing { align-self: flex-start; display: flex; gap: 5px; padding: 14px 16px; background: var(--c-ink-3); border-bottom-left-radius: 4px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-on-ink-soft); animation: how-dot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: 0.15s; }
.msg--typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes how-dot { 0%, 60%, 100% { transform: translateY(0); opacity: 0.5; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg--typing i { animation: none; } }
.msg--work { display: grid; gap: 8px; min-width: 76%; }
.msg__bar { display: block; position: relative; height: 5px; border-radius: 5px; overflow: hidden; background: color-mix(in srgb, var(--c-on-ink) 14%, transparent); }
.msg__bar::after { content: ""; position: absolute; inset: 0; background: var(--c-brand); transform: scaleX(var(--kit-fill, 0)); transform-origin: 0 50%; }
.msg--card { align-self: stretch; max-width: none; padding: 16px; border-radius: 16px; background: var(--c-paper); color: var(--c-ink); }
.msg__card-title { display: block; font: var(--display-weight) 1.375rem/1.1 var(--font-display); font-stretch: var(--display-stretch); }
.msg__card-sub { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--c-ink-soft); }
.msg__bars { display: flex; align-items: flex-end; gap: 4px; height: 62px; margin-top: 12px; }
.msg__bars i { flex: 1; height: var(--v); border-radius: 3px 3px 0 0; background: var(--c-ink); }
.msg__bars i:last-child { background: var(--c-brand); }
.msg__bars i.is-setup { background: var(--c-line); }
.msg__axis { display: flex; justify-content: space-between; margin-top: 6px; font-size: 0.8125rem; color: var(--c-ink-soft); }
@media (max-width: 900px) {
  .how { grid-template-columns: 1fr; }
  .how__media::after { background: color-mix(in srgb, var(--c-ink) 72%, transparent); }
  /* the part's clip fills the screen first, so its stop stands above the headline, in the part's top padding */
  .how { position: relative; }
  .phone { position: static; }
  .how__stop { top: -52px; right: var(--gutter); }
}
@media (max-width: 420px) { .phone__screen { height: 470px; } .msg { font-size: 0.875rem; } }

/* ---------- worth: the calculator, a dark instrument on the paper ---------- */
.worth-part .part__head { margin-inline: auto; text-align: center; }
.worth-part .part__line { margin-inline: auto; }
.worth__box { position: relative; display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(28px, 4vw, 56px); padding: clamp(28px, 4vw, 48px); border-radius: 24px; background: var(--c-ink); color: var(--c-on-ink); box-shadow: var(--shadow-l);
  --calc-ink: var(--c-on-ink); --calc-ink-soft: var(--c-on-ink-soft); --calc-track: var(--c-ink-3); --calc-fill: var(--c-brand); --calc-thumb: var(--c-paper); --calc-thumb-edge: var(--c-brand); --calc-focus: var(--c-brand-on-ink); --calc-surface: var(--c-ink); --calc-font: var(--font-ui); --calc-font-figure: var(--font-display); --calc-track-radius: 6px; --calc-value-size: 1.5rem; --calc-total-size: clamp(2.6rem, 1.8rem + 2.4vw, 3.8rem); --calc-figure-size: clamp(1.6rem, 1.2rem + 1vw, 2rem); --calc-gap: 30px; }
.worth__stop { right: 16px; top: 16px; }
.worth__controls { align-self: center; }
.worth__box .calc-slider__label { font-weight: 600; }
.worth__box .calc-slider__value { font-family: var(--font-display); font-stretch: var(--display-stretch); font-weight: var(--display-weight); color: var(--c-on-ink); }
.worth__box .calc-total__value { font-stretch: var(--display-stretch); font-weight: var(--display-weight); color: var(--c-brand-on-ink); }
.worth__box .calc-total__label { color: var(--c-on-ink-soft); }
.worth__box .calc-figures { border-top: 1px solid var(--c-ink-line); padding-top: 18px; }
.worth__box .calc-note { color: var(--c-on-ink-soft); font-size: var(--fs-small); }
.worth__result { display: grid; gap: 14px; align-content: start; }
.worth__picture { position: relative; }
.tower { display: block; width: 100%; height: auto; overflow: visible; }
.tower__axis, .tower__tick { stroke: var(--c-ink-line); stroke-width: 1.5; }
.tower__label { fill: var(--c-on-ink-soft); font: 600 15px/1 var(--font-ui); }
@media (max-width: 400px) { .tower__label { font: 700 20px/1 var(--font-display); font-stretch: var(--display-stretch); } }
.tower__floor { fill: color-mix(in srgb, var(--c-paper) 6%, transparent); stroke: var(--c-ink-line); stroke-width: 1; }
.tower__top { fill: var(--c-cube-top); }
.tower__left { fill: var(--c-cube-light); }
.tower__right { fill: var(--c-cube-dark); }
.tower__block path { stroke: var(--c-ink); stroke-width: 1; stroke-linejoin: round; }
.tower__block:not([data-kit-on]) { opacity: 0; }
.tower__block[data-new] .tower__top { fill: var(--c-brand); }
.tower__block[data-new] .tower__left { fill: color-mix(in srgb, var(--c-brand) 78%, var(--c-ink)); }
.tower__block[data-new] .tower__right { fill: color-mix(in srgb, var(--c-brand) 58%, var(--c-ink)); }
.tower__block[data-kit-on] { transform: translateY(calc((1 - var(--kit-in, 1)) * -26px)); }
.tower__level { stroke: var(--c-brand); stroke-width: 2; stroke-dasharray: 5 5; }
/* in one column the stop stands on the tower's empty top right corner, next to its moving picture (it covered the first
   slider's "10" at the box's corner) */
@media (max-width: 900px) { .worth__box { grid-template-columns: 1fr; } .worth__pic { position: relative; } .worth__stop { top: 0; right: 0; } }

/* ---------- compare: drag the line ---------- */
.compare { position: relative; overflow: hidden; aspect-ratio: 2.1 / 1; min-height: 460px; border-radius: var(--radius-l); background: var(--c-ink); user-select: none; -webkit-user-select: none; }
.compare .before, .compare .after { position: absolute; inset: 0; }
.compare .after { clip-path: inset(0 0 0 calc(var(--kit-v, 0.5) * 100%)); }
.compare__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.before .compare__photo { filter: grayscale(1) contrast(0.9) brightness(0.62); }
.after .compare__photo { filter: saturate(0.95) contrast(1.03); }
.before::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--c-ink) 22%, transparent); pointer-events: none; }
.compare__tag { position: absolute; top: 20px; z-index: 2; padding: 9px 14px; border-radius: 999px; font: 700 var(--fs-small)/1 var(--font-ui); }
.before .compare__tag { left: 20px; background: color-mix(in srgb, var(--c-ink) 74%, transparent); color: var(--c-on-ink); border: 1px solid color-mix(in srgb, var(--c-paper) 22%, transparent); }
.compare__tag--us { right: 20px; background: var(--c-brand); color: var(--c-on-brand); }
.compare__cards { position: absolute; top: 72px; z-index: 2; display: grid; gap: 10px; width: min(250px, 30%); }
.before .compare__cards { left: 20px; }
.after .compare__cards { right: 20px; }
.compare__card { display: grid; gap: 3px; padding: 12px 14px; border-radius: 12px; }
.before .compare__card { background: color-mix(in srgb, var(--c-ink-2) 86%, transparent); border: 1px solid var(--c-ink-line); color: var(--c-on-ink); }
.after .compare__card { background: color-mix(in srgb, var(--c-paper) 95%, transparent); color: var(--c-ink); box-shadow: var(--shadow-m); }
.compare__label { font-size: 0.8125rem; font-weight: 600; }
.before .compare__label, .before .compare__sub { color: var(--c-on-ink-soft); }
.after .compare__label, .after .compare__sub { color: var(--c-ink-soft); }
.compare__card b { font: var(--display-weight) 1.3125rem/1.15 var(--font-display); font-stretch: var(--display-stretch); }
.compare__sub { font-size: 0.875rem; }
.compare__sub em { font-style: normal; color: var(--c-brand-on-ink); font-weight: 700; }
.compare__strike { text-decoration: line-through; text-decoration-color: var(--c-brand); text-decoration-thickness: 3px; }
.compare__card--bars b { font-size: 2rem; color: var(--c-brand-text); }
.compare__bars { display: flex; align-items: flex-end; gap: 3px; height: 34px; margin-top: 4px; }
.compare__bars i { flex: 1; height: var(--v); border-radius: 2px 2px 0 0; background: var(--c-ink); }
.compare__bars i:last-child { background: var(--c-brand); }
.compare [data-kit-whole] { transition: opacity 0.2s, visibility 0s; }
.compare [data-kit-under] { opacity: 0; visibility: hidden; transition: opacity 0.2s, visibility 0s 0.2s; }
.compare input[type="range"] { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; -webkit-appearance: none; appearance: none; }
.compare__handle { position: absolute; top: 0; bottom: 0; left: calc(var(--kit-v, 0.5) * 100%); z-index: 4; width: 0; pointer-events: none; opacity: clamp(0, calc((min(var(--kit-v, 0.5), 1 - var(--kit-v, 0.5)) - 0.03) * 14), 1); }
.compare__handle::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--c-paper); box-shadow: 0 0 12px color-mix(in srgb, var(--c-ink) 40%, transparent); }
.compare__knob { position: absolute; left: -26px; bottom: 54px; width: 52px; height: 52px; border-radius: 50%; background: var(--c-paper); box-shadow: var(--shadow-m); }
.compare__knob::before, .compare__knob::after { content: ""; position: absolute; top: 50%; width: 9px; height: 9px; margin-top: -5px; border: solid var(--c-ink); border-width: 0 0 2.5px 2.5px; }
.compare__knob::before { left: 13px; transform: rotate(45deg); }
.compare__knob::after { right: 13px; transform: rotate(-135deg); }
.compare__hint { position: absolute; left: 50%; bottom: 20px; transform: translateX(-50%); padding: 4px 10px; border-radius: 999px; background: color-mix(in srgb, var(--c-ink) 72%, transparent); color: var(--c-on-ink); font: 700 0.8125rem/1.2 var(--font-ui); white-space: nowrap; }
.compare[data-kit-touched] .compare__hint { opacity: 0; }
.compare input[type="range"]:focus-visible + .compare__handle { opacity: 1; }
.compare input[type="range"]:focus-visible + .compare__handle .compare__knob { outline: 3px solid var(--c-brand); outline-offset: 3px; }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px 24px; list-style: none; margin: var(--space-5) 0 0; padding: 0; }
.promises li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.promises li::before { content: ""; flex: none; width: 10px; height: 6px; margin-top: 7px; border: solid var(--c-brand-text); border-width: 0 0 2.5px 2.5px; transform: rotate(-45deg); }
/* up to 1050 px (was 900): from 901 px the ratio's min-height made the box 966 px wide, past the column and cut off at
   the window's edge; this narrower layout keeps it in its column, its cards clear of the face */
@media (max-width: 1050px) {
  .compare { aspect-ratio: auto; height: 560px; min-height: 0; }
  .compare__cards { top: auto; bottom: 18px; width: calc(50% - 22px); gap: 8px; }
  .before .compare__cards { left: 10px; }
  .after .compare__cards { right: 10px; }
  .compare__card { padding: 10px 11px; }
  .compare__card b { font-size: 1.0625rem; }
  .compare__card--bars b { font-size: 1.5rem; }
  .compare__label { font-size: 0.8125rem; }
  .compare__sub { font-size: 0.8125rem; }
  .compare__knob { bottom: auto; top: 76px; }
  .compare__hint { bottom: auto; top: 136px; }
  .compare__tag { top: 14px; box-sizing: border-box; max-width: calc(50% - 22px); font-size: 0.8125rem; line-height: 1.2; padding: 8px 11px; border-radius: 12px; text-align: center; }
  .before .compare__tag { left: 10px; }
  .compare__tag--us { right: 10px; }
}
@media (max-width: 900px) { .promises { grid-template-columns: 1fr 1fr; } }
@media (max-width: 420px) { .promises { grid-template-columns: 1fr; } }

/* ---------- who: the category index over one big photo ---------- */
.index { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(20px, 3vw, 40px); align-items: stretch; }
.index__tabs { display: grid; align-content: start; border-top: 1px solid var(--c-line); }
.index__tab { position: relative; display: grid; gap: 4px; text-align: left; padding: 16px 8px 16px 0; border: 0; border-bottom: 1px solid var(--c-line); background: none; color: var(--c-ink); cursor: pointer; font: inherit; }
.index__name { font: var(--display-weight) clamp(1.4rem, 1.1rem + 0.9vw, 1.85rem)/1.1 var(--font-display); font-stretch: var(--display-stretch); color: var(--c-ink-soft); transition: color var(--dur-fast) var(--ease-out); }
.index__fields { display: none; font-size: var(--fs-small); color: var(--c-ink-soft); }
.index__tab:hover .index__name { color: var(--c-ink); }
.index__tab[aria-selected="true"] .index__name { color: var(--c-ink); }
.index__tab[aria-selected="true"] .index__fields { display: block; }
.index__tab[aria-selected="true"]::before { content: ""; position: absolute; left: -18px; top: 22px; width: 8px; height: 8px; border-radius: 2px; background: var(--c-brand); transform: rotate(45deg); }
.index__bar { position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--c-brand); transform: scaleX(var(--kit-fill, 0)); transform-origin: 0 50%; }
.index__tab[aria-selected="false"] .index__bar { display: none; }
.index__stage { position: relative; min-height: 520px; border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink); }
.who__stop { right: 16px; top: 16px; z-index: 4; }
.index__panel { position: absolute; inset: 0; }
.index__photo { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; filter: saturate(0.9) contrast(1.03); }
.index__panel::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 78%, transparent), transparent); pointer-events: none; }
.index__caption { position: absolute; left: 24px; right: 24px; bottom: 22px; z-index: 1; display: grid; gap: 4px; color: var(--c-on-ink); font-size: 1.0625rem; }
.index__caption b { font-weight: 700; color: var(--c-brand-on-ink); }
.index__caption-fields { display: none; font-weight: 700; }
@media (max-width: 900px) {
  .index { grid-template-columns: 1fr; }
  .index__tabs { display: flex; gap: 8px; overflow-x: auto; border: 0; padding-bottom: 4px; scrollbar-width: none; }
  .index__tab { flex: none; padding: 10px 14px; border: 1px solid var(--c-line); border-radius: 999px; }
  .index__name { font-size: 1.0625rem; }
  .index__tab[aria-selected="true"] { background: var(--c-ink); border-color: var(--c-ink); }
  .index__tab[aria-selected="true"] .index__name { color: var(--c-on-ink); }
  .index__tab[aria-selected="true"] .index__fields, .index__tab[aria-selected="true"]::before { display: none; }
  .index__bar { left: 14px; right: 14px; bottom: 4px; }
  .index__stage { min-height: 0; aspect-ratio: 4 / 4.2; }
  .index__caption-fields { display: block; }
}

/* ---------- ai: be there when customers ask AI ---------- */
.ai-part { overflow: hidden; }
.ai { display: grid; grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: clamp(28px, 5vw, 72px); align-items: center; }
.ai__copy .btn { margin-top: var(--space-5); }
.ai__media { position: relative; overflow: hidden; aspect-ratio: 7 / 5; border-radius: var(--radius-l); background: var(--c-ink-2); }
/* the person sits in the clip's middle: the crop keeps her in the right half, the card in the left half */
.ai__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 0% 40%; filter: saturate(0.88) contrast(1.03); }
.ai__media::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(270deg, transparent 30%, color-mix(in srgb, var(--c-ink) 38%, transparent)); }
.ai__scene { position: absolute !important; z-index: 2; left: 4%; top: 4%; width: min(386px, 51%); aspect-ratio: 400 / 500; }
.ai__stop { right: 14px; bottom: 14px; }
/* the card keeps its words at full size: under 1160 px the clip goes under the words, full width */
@media (min-width: 901px) and (max-width: 1160px) { .ai { grid-template-columns: 1fr; } .ai__media { aspect-ratio: 16 / 10; } }
@media (max-width: 900px) {
  .ai { grid-template-columns: 1fr; }
  /* the clip 588 px tall with her face in its upper half; the card in the flow under her chin, more than half of it on
     the clip at every width (Tomer's rule) */
  .ai__media { aspect-ratio: auto; height: auto; padding: 336px 0 14px; }
  .ai__video { object-position: 52% 0%; height: 588px; }
  .ai__media::after { background: linear-gradient(180deg, transparent 0, transparent 508px, var(--c-ink-2) 588px); }
  .ai__media .ai__scene { position: relative !important; left: auto; right: auto; top: auto; bottom: auto; margin: 0 auto; width: min(386px, calc(100% - 16px)); transform: none; }
  .ai__stop { top: 12px; right: 12px; bottom: auto; }
}

/* ---------- faq: straight answers, with Walter beside them ---------- */
.faq { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 0.7fr); gap: clamp(32px, 6vw, 96px); align-items: start; }
.faq__list { margin-top: var(--space-5); }
.faq__ask { position: sticky; top: 104px; display: grid; gap: 14px; justify-items: start; padding: 28px; border-radius: var(--radius-l); background: var(--c-paper-alt); border: 1px solid var(--c-line); }
.faq__photo { width: 128px; height: 128px; border-radius: 50%; object-fit: cover; object-position: 50% 30%; box-shadow: 0 0 0 4px var(--c-paper), 0 0 0 5px var(--c-line); }
.faq__who b { display: block; font: var(--display-weight) 1.5rem/1.1 var(--font-display); font-stretch: var(--display-stretch); }
.faq__who span { display: block; margin-top: 2px; font-size: var(--fs-small); color: var(--c-ink-soft); }
.faq__note { color: var(--c-ink-soft); }
@media (max-width: 900px) { .faq { grid-template-columns: 1fr; } .faq__ask { position: static; } }

/* ---------- close: the idea's line over the town at dusk ---------- */
.close { overflow: hidden; padding: clamp(96px, 12vw, 168px) 0; }
.close__media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.close__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 50% 60%; }
.close__media::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 80% at 30% 50%, color-mix(in srgb, var(--c-ink) 74%, transparent), color-mix(in srgb, var(--c-ink) 30%, transparent)); }
.lattice--close { left: 0; bottom: 0; width: 50%; height: 80%; z-index: 0; -webkit-mask-image: radial-gradient(100% 100% at 0% 100%, #000 0%, transparent 70%); mask-image: radial-gradient(100% 100% at 0% 100%, #000 0%, transparent 70%); }
.close__stop { right: 20px; top: 20px; }
.close__in { display: grid; justify-items: start; }
.close__title { max-width: 15ch; font-size: clamp(2.4rem, 1.4rem + 3.6vw, 4.4rem); }
.close__line { margin-top: var(--space-4); font-size: 1.25rem; color: var(--c-on-ink-soft); }
.picker--close { margin-top: var(--space-5); width: min(540px, 100%); background: color-mix(in srgb, var(--c-ink-2) 88%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); }
@media (max-width: 600px) { .close__media::after { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 62%, transparent), color-mix(in srgb, var(--c-ink) 84%, transparent)); } .close__line { color: var(--c-on-ink); } }