/* home.css: the home page's parts, placed and sized with the tokens of system.css (design\components.md for the shared
   pieces). Parts: hero, plan (the tour), how, worth, outcomes, compare, who, faq, close. */

/* =================== hero: full-bleed footage, the headline and the quiz at the left =================== */
.hero { position: relative; isolation: isolate; display: flex; align-items: flex-end; min-height: max(780px, 100svh); overflow: hidden; background: var(--c-ink); }
.hero__media { position: absolute; inset: 0; z-index: -3; }
/* the kit's header that changes its field (kit.md): 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); }
/* our grade: each clip drawn toward the navy, an ink shade on the side of the words, under the field's card */
.hero__slide video { object-position: var(--pos, 50% 50%); }
.hero__slide::after {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 96%, transparent) 0%, color-mix(in srgb, var(--c-ink) 90%, transparent) 30%, color-mix(in srgb, var(--c-ink) 56%, transparent) 50%, color-mix(in srgb, var(--c-ink) 10%, transparent) 70%, color-mix(in srgb, var(--c-ink) 4%, transparent) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 72%, transparent) 0%, transparent 24%, transparent 80%, color-mix(in srgb, var(--c-ink) 90%, transparent) 100%),
    linear-gradient(0deg, color-mix(in srgb, var(--c-brand) 26%, transparent), color-mix(in srgb, var(--c-brand) 26%, transparent));
}
.hero__card { position: absolute; z-index: 2; right: clamp(28px, 6.5vw, 130px); bottom: clamp(150px, 24vh, 250px); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 18px)); }
.hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(34% 40% at 16% 92%, var(--c-glow-red) 0%, transparent 70%),
    radial-gradient(26% 30% at 38% 100%, var(--c-glow-gold) 0%, transparent 70%),
    radial-gradient(30% 40% at 4% 60%, var(--c-glow-blue) 0%, transparent 72%);
  opacity: .55;
}
.hero__ribbon { position: absolute; z-index: -1; left: -6%; bottom: -4%; width: min(62vw, 880px); opacity: .22; filter: drop-shadow(0 30px 60px color-mix(in srgb, var(--c-red) 35%, transparent)); pointer-events: none; }
.hero__in { position: relative; width: min(100% - 2 * var(--gutter), 1380px); margin-inline: auto; padding: 172px 0 clamp(36px, 6vh, 64px); }
.hero__copy { max-width: 690px; }
.hero__title { max-width: 13.5ch; text-shadow: 0 2px 30px color-mix(in srgb, var(--c-ink) 50%, transparent); }
.hero__word { display: block; color: var(--c-accent); transform: translateY(calc(var(--kit-swap, 0) * -.14em)); opacity: calc(1 - var(--kit-swap, 0)); }
.hero__lead { max-width: 52ch; margin: 20px 0 26px; color: var(--c-soft-on-ink); font-size: clamp(17px, 1.3vw, 20px); line-height: 1.5; }
.hero__quiz { width: min(100%, 600px); }
.hero__stop { right: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); }

@media (max-width: 1080px) {
  .hero__in { padding-top: 140px; }
  .hero__slide::after {
    background:
      linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 95%, transparent) 0%, color-mix(in srgb, var(--c-ink) 86%, transparent) 45%, color-mix(in srgb, var(--c-ink) 40%, transparent) 75%, color-mix(in srgb, var(--c-ink) 20%, transparent) 100%),
      linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 70%, transparent) 0%, transparent 22%, color-mix(in srgb, var(--c-ink) 20%, transparent) 70%, color-mix(in srgb, var(--c-ink) 95%, transparent) 100%),
      linear-gradient(0deg, color-mix(in srgb, var(--c-brand) 26%, transparent), color-mix(in srgb, var(--c-brand) 26%, transparent));
  }
  .hero__card { bottom: auto; top: 128px; right: var(--gutter); }
}
/* the phone: the footage as a band at the top (under the header), the field's card on its lower edge, then the words and the quiz on the ink */
@media (max-width: 760px) {
  .hero { display: block; min-height: 0; }
  .hero__media { bottom: auto; height: 300px; }
  .hero__slide::after {
    background:
      linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 74%, transparent) 0%, color-mix(in srgb, var(--c-ink) 10%, transparent) 38%, color-mix(in srgb, var(--c-ink) 25%, transparent) 70%, var(--c-ink) 100%),
      linear-gradient(0deg, color-mix(in srgb, var(--c-brand) 22%, transparent), color-mix(in srgb, var(--c-brand) 22%, transparent));
  }
  .hero__card { top: auto; bottom: 4px; right: 12px; max-width: calc(100% - 24px); padding: 10px 14px 10px 10px; grid-template-columns: 38px minmax(0, 1fr); gap: 10px; }
  .hero__card .fcard__icon { width: 38px; height: 38px; border-radius: 10px; }
  .hero__card .fcard__title { font-size: 15px; }
  .hero__card .fcard__sub { font-size: 13px; }
  .hero__ribbon { left: auto; right: -20%; bottom: auto; top: 250px; width: 110vw; opacity: .14; }
  .hero__shade { opacity: .35; }
  .hero__in { padding: 318px 0 30px; }
  .hero__title { font-size: clamp(34px, 9.6vw, 44px); max-width: none; }
  .hero__lead { margin: 14px 0 20px; font-size: 16.5px; }
  .hero__stop { top: 104px; bottom: auto; right: 12px; width: 38px; height: 38px; }
}

/* =================== plan: the free plan tour =================== */
.tour { background: radial-gradient(60% 55% at 88% 40%, color-mix(in srgb, var(--c-brand-light) 20%, transparent), transparent 70%), var(--c-ink); }
.tour__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 76px); align-items: center; }
.tour__side .sec-head { margin-bottom: 30px; }
.tour__tabs { display: grid; gap: 10px; margin-bottom: 30px; }
.tour__tab {
  position: relative; display: grid; grid-template-columns: 62px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 8px; align-items: start;
  padding: 16px 20px 16px 16px; border: 0; border-radius: 16px; overflow: hidden; text-align: left; cursor: pointer;
  background: color-mix(in srgb, var(--c-brand) 22%, transparent); color: var(--c-on-ink); box-shadow: inset 0 0 0 1.5px var(--c-line-on-ink);
  transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.tour__tab:hover { background: color-mix(in srgb, var(--c-brand) 45%, transparent); }
.tour__tab[aria-selected="true"] { background: var(--c-brand); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-on-ink) 18%, transparent), var(--shadow-glow); }
.tour__num { grid-row: 1 / span 2; font: 900 34px/1 var(--font-display); font-stretch: 114%; color: color-mix(in srgb, var(--c-on-ink) 45%, transparent); padding-top: 2px; }
.tour__tab[aria-selected="true"] .tour__num { color: var(--c-accent); }
.tour__tt { font: 820 18px/1.22 var(--font-display); font-stretch: var(--wide-ui); }
.tour__tl { margin-top: 5px; color: var(--c-soft-on-ink); font-size: 15px; line-height: 1.45; }
.tour__fill { position: absolute; left: 0; bottom: 0; height: 4px; width: calc(var(--kit-fill, 0) * 100%); background: var(--c-accent); }
.tour__tab[aria-selected="false"] .tour__fill { visibility: hidden; }
.tour__stage { position: relative; height: clamp(470px, 40vw, 540px); border-radius: 26px; overflow: hidden; background: var(--c-night); box-shadow: var(--shadow-l), inset 0 0 0 1px var(--c-line-on-ink); }
.tour__media video { filter: saturate(1.2) brightness(.78); }
.tour__stage::after { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 20%, transparent), color-mix(in srgb, var(--c-ink) 55%, transparent)); pointer-events: none; }
.tour__panel { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 26px; }
.tour__panel:focus-visible { outline-offset: -6px; }
.tour__scene { width: min(100%, 580px); }
.tour__scene--scan { width: min(100%, 520px); box-shadow: var(--shadow-l); }
.tour__stop { top: 16px; right: 16px; z-index: 4; }
@media (max-width: 960px) {
  .tour__in { grid-template-columns: 1fr; }
  .tour__side { display: contents; }
  .tour__side .sec-head { order: 1; margin-bottom: 0; }
  .tour__tabs { order: 2; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; }
  .tour__tab { grid-template-columns: 1fr; padding: 12px; }
  .tour__num { grid-row: auto; font-size: 24px; }
  .tour__tt { font-size: 15px; margin-top: 4px; }
  .tour__tl { display: none; }
  .tour__stage { order: 3; height: auto; min-height: 480px; }
  .tour__cta { order: 4; }
  .tour__panel { position: relative; inset: auto; min-height: 480px; padding: 56px 12px 16px; }
  .tour__panel[hidden] { display: none; }
}

/* =================== how: three steps lit by the chat =================== */
.how { overflow: hidden; isolation: isolate; }
.how__media { z-index: -2; }
.how__media video { filter: brightness(.6) saturate(1.1); }
.how__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 55%, transparent) 0%, color-mix(in srgb, var(--c-ink) 82%, transparent) 45%, color-mix(in srgb, var(--c-ink) 95%, transparent) 100%), radial-gradient(36% 55% at 22% 55%, var(--c-glow-gold), transparent 72%); }
.how__stop { top: 22px; right: 22px; }
.how__in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "phone head" "phone steps" "phone cta"; column-gap: clamp(32px, 6vw, 100px); align-items: start; }
.how__head { grid-area: head; margin-bottom: 30px; }
.how__phone { grid-area: phone; align-self: center; justify-self: center; }
.how__steps { grid-area: steps; display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.how__cta { grid-area: cta; margin-top: 30px; }
.step {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 20px 22px 20px 18px; border-radius: 18px;
  background: color-mix(in srgb, var(--c-night) 70%, transparent); box-shadow: inset 0 0 0 1.5px var(--c-line-on-ink);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background-color var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out);
}
.step[aria-current="step"] { background: var(--c-brand); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--c-on-ink) 18%, transparent), var(--shadow-glow); }
.step__num { font: 900 56px/.86 var(--font-display); font-stretch: 112%; color: color-mix(in srgb, var(--c-on-ink) 34%, transparent); transition: color var(--dur-med) linear; }
.step[aria-current="step"] .step__num { color: var(--c-accent); }
.step__body .card-title { display: block; }
.step__body em { display: inline-block; margin-left: 8px; padding: 5px 10px; border-radius: 999px; vertical-align: 3px; background: color-mix(in srgb, var(--c-accent) 16%, transparent); color: var(--c-accent); font: 750 13px/1 var(--font-display); font-style: normal; font-stretch: var(--wide-ui); letter-spacing: 0; }
.step__body > span { display: block; margin-top: 6px; color: var(--c-soft-on-ink); font-size: 16px; line-height: 1.5; }
/* the phone and its chat (the kit's chat) */
.phone { position: relative; width: 322px; height: 660px; padding: 11px; border-radius: 48px; background: var(--c-phone); box-shadow: 0 0 0 2px var(--c-phone-edge), 0 44px 90px -34px rgba(0, 0, 0, .95), 0 0 110px -30px var(--c-glow-blue); }
.phone::before { content: ''; position: absolute; top: 20px; left: 50%; z-index: 3; width: 92px; height: 24px; border-radius: 14px; background: var(--c-phone); transform: translateX(-50%); }
.phone__bar { display: flex; align-items: center; gap: 10px; height: 98px; padding: 44px 18px 12px; border-radius: 38px 38px 0 0; background: var(--c-paper); box-shadow: inset 0 -1px 0 var(--c-line); }
.phone__bar img { width: 36px; height: 36px; padding: 5px; border-radius: 11px; background: var(--c-ink); }
.phone__bar b { display: block; font: 800 15px/1.15 var(--font-display); font-stretch: var(--wide-ui); color: var(--c-ink); }
.phone__bar span span { display: block; font: 500 13px/1.3 var(--font-text); color: var(--c-ink-soft); }
.phone__chat { display: flex; flex-direction: column; justify-content: flex-start; gap: 7px; height: calc(100% - 98px); padding: 12px 12px 14px; overflow: hidden; border-radius: 0 0 38px 38px; background: #F2F2FC; }
.msg { margin: 0; max-width: 86%; padding: 10px 13px; border-radius: 16px; font: 500 14.5px/1.4 var(--font-text); color: var(--c-ink); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.msg--in { align-self: flex-start; background: var(--c-paper); border-bottom-left-radius: 6px; box-shadow: 0 2px 8px color-mix(in srgb, var(--c-ink) 8%, transparent); }
.msg--out { align-self: flex-end; background: var(--c-brand); color: var(--c-on-brand); border-bottom-right-radius: 6px; font-weight: 600; }
.msg--chips { display: flex; flex-wrap: wrap; gap: 6px; max-width: 100%; padding: 0; background: none; }
.msg--chips span { padding: 8px 13px; border-radius: 999px; background: var(--c-paper); box-shadow: inset 0 0 0 1.5px var(--c-line); font: 800 14px/1 var(--font-display); font-stretch: var(--wide-ui); color: var(--c-ink); transition: background-color .25s linear, box-shadow .25s linear; }
.msg--chips span[data-kit-on] { background: var(--c-accent); box-shadow: inset 0 0 0 1.5px var(--c-accent); color: var(--c-on-gold); }
.msg--typing { display: flex; gap: 4px; padding: 13px 14px; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink-soft); animation: how-dot 1s ease-in-out infinite; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes how-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }
.msg--check { display: grid; gap: 8px; font-weight: 600; }
.msg__bar { display: block; height: 6px; border-radius: 6px; background: var(--c-line); overflow: hidden; }
.msg__bar [data-kit-bar] { display: block; height: 100%; width: calc(var(--kit-fill, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--c-brand), var(--c-brand-light)); }
.msg--card { display: grid; gap: 2px; width: 100%; max-width: 100%; padding: 14px 14px 12px; background: var(--c-ink); color: var(--c-on-ink); }
.msg__k { font: 600 13px/1.35 var(--font-text); color: var(--c-soft-on-ink); }
.msg__big { font: 900 23px/1.1 var(--font-display); font-stretch: var(--wide-ui); color: var(--c-accent); }
.msg__bars { display: flex; align-items: flex-end; gap: 3px; height: 46px; margin-top: 10px; }
.msg__bars i { flex: 1; height: calc(var(--v) * 100%); min-height: 4px; border-radius: 3px 3px 2px 2px; background: linear-gradient(180deg, var(--c-brand-light), var(--c-brand)); }
.msg__bars i.setup { background: color-mix(in srgb, var(--c-on-ink) 22%, transparent); height: 6px; }
@media (max-width: 960px) {
  .how__in { grid-template-columns: 1fr; grid-template-areas: "head" "phone" "steps" "cta"; }
  .how__phone { margin: 6px 0 30px; }
  .how__shade { background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 90%, transparent), color-mix(in srgb, var(--c-ink) 70%, transparent) 40%, color-mix(in srgb, var(--c-ink) 95%, transparent)); }
}
@media (max-width: 400px) { .phone { width: 300px; height: 600px; } }

/* =================== worth: the calculator and its climbing arrow =================== */
/* its own layer: clips loading or playing elsewhere never re-raster it, so once built it holds still to the pixel */
.worth { overflow: hidden; background: var(--c-night); will-change: transform; }
.worth__glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(40% 50% at 78% 40%, color-mix(in srgb, var(--c-red) 26%, transparent), transparent 70%), radial-gradient(30% 40% at 62% 85%, color-mix(in srgb, var(--c-accent) 16%, transparent), transparent 70%), radial-gradient(40% 60% at 8% 15%, color-mix(in srgb, var(--c-brand-light) 26%, transparent), transparent 70%); }
.worth__stop { top: 22px; right: 22px; }
.worth__box {
  position: relative; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(30px, 5vw, 76px); align-items: center;
  /* whole pixels: a card edge at a fraction of a pixel repaints its antialiasing a shade differently each time (the
     calculator test then sees a still picture change); round() where the browser has it, the line above where not */
  --worth-gap: round(clamp(30px, 5vw, 76px), 1px);
  gap: var(--worth-gap); grid-template-columns: round(down, calc((100% - var(--worth-gap)) * 5 / 11), 1px) minmax(0, 1fr);
  --calc-ink: var(--c-on-ink); --calc-ink-soft: var(--c-soft-on-ink); --calc-track: color-mix(in srgb, var(--c-on-ink) 18%, transparent); --calc-fill: var(--c-accent);
  --calc-thumb: var(--c-paper); --calc-thumb-edge: var(--c-accent); --calc-focus: var(--c-accent); --calc-surface: var(--c-night);
  --calc-font: var(--font-text); --calc-font-figure: var(--font-display); --calc-label-size: 16px; --calc-value-size: 26px; --calc-total-size: clamp(46px, 5.2vw, 76px); --calc-figure-size: clamp(26px, 2.4vw, 34px);
}
.worth__side .sec-head { margin-bottom: 26px; }
.worth__controls { padding: 24px 24px 18px; border-radius: 22px; background: color-mix(in srgb, var(--c-brand) 46%, transparent); box-shadow: inset 0 0 0 1.5px var(--c-line-on-ink); --calc-surface: var(--c-brand); }
.worth__controls .calc-sliders { gap: 22px; }
.worth__controls .calc-slider__label { font-weight: 650; }
.worth__controls .calc-slider__value { font-family: var(--font-display); font-weight: 850; font-stretch: var(--wide-ui); color: var(--c-accent); }
.worth__controls .calc-scale { color: var(--c-soft-on-ink); }
.worth__result { padding: 26px 28px 22px; border-radius: 26px; background: linear-gradient(180deg, var(--c-brand) 0%, var(--c-brand-dark) 100%); box-shadow: var(--shadow-l), inset 0 0 0 1px color-mix(in srgb, var(--c-on-ink) 14%, transparent), var(--shadow-glow); --calc-surface: var(--c-brand); }
.worth__result .calc-total__value { font-weight: 900; font-stretch: var(--wide); color: var(--c-accent); letter-spacing: -.01em; }
.worth__result .calc-total__label { margin-top: 4px; color: var(--c-soft-on-ink); font: 600 16px/1.3 var(--font-text); }
.worth__picture { margin: 14px -6px 6px; }
.worth__figures { padding-top: 14px; box-shadow: inset 0 1px 0 var(--c-line-on-ink); }
.worth__figures .calc-figure__value { font-weight: 880; font-stretch: var(--wide-ui); color: var(--c-on-ink); }
.worth__figures .calc-figure__label { margin-top: 4px; color: var(--c-soft-on-ink); font: 600 14.5px/1.3 var(--font-text); }
.worth__result .calc-note { margin-top: 14px; color: var(--c-soft-on-ink); font-size: 14px; }
/* the picture */
.climb__stage { position: relative; }
.climb { display: block; width: 100%; height: auto; overflow: visible; }
.climb__ladder line { stroke: var(--c-accent); stroke-width: 1.5; stroke-dasharray: 3 7; opacity: .55; }
/* the rungs' words in the drawing's right margin (566 to 680 of its 680), the months under its base */
.climb__tag { position: absolute; top: var(--y); right: 0; transform: translateY(-50%); color: var(--c-accent); font: 750 14px/1 var(--font-display); font-stretch: var(--wide-ui); white-space: nowrap; }
.climb__axis { display: flex; justify-content: space-between; margin: 10px 0 0; padding: 0 calc(114 / 680 * 100%) 0 calc(24 / 680 * 100%); color: var(--c-soft-on-ink); font: 600 13px/1.2 var(--font-text); }
.climb__ladder g, .climb__tag { transition: opacity .3s linear; }
.climb__base { stroke: var(--c-line-on-ink); stroke-width: 2; }
.climb__body { fill: none; stroke: url(#climb-g); stroke-width: 26; stroke-linejoin: miter; stroke-miterlimit: 8; stroke-dasharray: 100; stroke-dashoffset: calc(100 - var(--climb-p, 1) * 100); }
.climb__fold { fill: none; stroke: #000; stroke-width: 26; opacity: .16; }
.climb__head { fill: var(--c-red); }
.climb__months circle { fill: var(--c-on-ink); stroke: var(--c-brand); stroke-width: 3; opacity: .28; }
.climb__months circle[data-kit-on] { fill: var(--c-accent); opacity: 1; }
.climb__glow { opacity: .9; }
@media (max-width: 960px) {
  .worth__box { grid-template-columns: 1fr; }
  .worth__result { padding: 22px 18px 18px; }
}
/* the phone: the whole calculator within a screen and a third */
@media (max-width: 760px) {
  .worth__box { gap: 18px; }
  .worth__side .sec-head { margin-bottom: 16px; }
  .worth__controls { padding: 18px 18px 12px; }
  .worth__controls .calc-sliders { gap: 14px; }
  .worth__result { padding: 18px 16px 14px; }
  .worth__picture { margin: 8px -4px 2px; }
  .climb__axis { margin-top: 6px; }
  .worth__figures { padding-top: 10px; }
  .worth__result .calc-note { margin-top: 10px; }
}

/* =================== outcomes: four cards, each a clip with its scene =================== */
.outcomes { background: var(--c-ink); }
.outcomes__stop { top: 22px; right: 22px; }
.outcomes__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 18px; }
.ocard { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; min-height: 520px; padding: 26px; border-radius: 24px; overflow: hidden; background: var(--c-night); box-shadow: var(--shadow-m), inset 0 0 0 1px var(--c-line-on-ink); }
.ocard--found { grid-column: span 5; }
.ocard--answer { grid-column: span 7; }
.ocard--reviews { grid-column: span 7; }
.ocard--work { grid-column: span 5; }
.ocard__media { z-index: -2; }
.ocard__media video { filter: saturate(1.05); }
.ocard::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 96%, transparent) 0%, color-mix(in srgb, var(--c-ink) 82%, transparent) 30%, color-mix(in srgb, var(--c-ink) 10%, transparent) 62%, color-mix(in srgb, var(--c-ink) 30%, transparent) 100%), linear-gradient(0deg, color-mix(in srgb, var(--c-brand) 20%, transparent), color-mix(in srgb, var(--c-brand) 20%, transparent)); }
.ocard--answer .ocard__media { --pos: 100% 40%; }
.ocard--reviews .ocard__media { --pos: 100% 30%; }
.ocard--work .ocard__media { --pos: 30% 50%; }
.ocard__scene { position: absolute; top: 24px; left: 24px; width: min(330px, calc(100% - 48px)); }
.ocard--work .ocard__scene { width: min(300px, calc(100% - 48px)); }
.ocard__text { position: relative; max-width: 46ch; }
.ocard__text p { margin: 10px 0 16px; color: var(--c-soft-on-ink); font-size: 16px; line-height: 1.5; }
@media (max-width: 960px) {
  .ocard--found, .ocard--answer, .ocard--reviews, .ocard--work { grid-column: 1 / -1; }
  .ocard { min-height: 560px; padding: 20px; }
  .ocard__scene { top: 18px; left: 18px; width: min(330px, calc(100% - 36px)); }
  .ocard--answer .ocard__media { --pos: 82% 30%; }
  .ocard--reviews .ocard__media { --pos: 88% 30%; }
  .ocard--work .ocard__media { --pos: 62% 45%; }
}

/* =================== compare: drag the line =================== */
.compare { background: linear-gradient(180deg, var(--c-ink), var(--c-night)); }
.cmp { position: relative; height: clamp(480px, 44vw, 600px); border-radius: 26px; overflow: hidden; box-shadow: var(--shadow-l), inset 0 0 0 1px var(--c-line-on-ink); touch-action: pan-y; }
.cmp__side { position: absolute; inset: 0; }
.cmp__side--before .fill img { filter: grayscale(1) contrast(.9) brightness(.62); }
.cmp__side--before::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-dull-deep) 70%, transparent), color-mix(in srgb, var(--c-dull-deep) 25%, transparent) 55%); }
.cmp__side--after { clip-path: inset(0 0 0 calc(var(--kit-v, .5) * 100%)); }
.cmp__side--after .fill img { filter: saturate(1.15) contrast(1.02); --pos: 60% 40%; }
.cmp__side--after::after { content: ''; position: absolute; inset: 0; background: linear-gradient(270deg, color-mix(in srgb, var(--c-ink) 55%, transparent), transparent 40%); }
.cmp__tag {
  position: absolute; z-index: 2; top: 22px; padding: 9px 14px; border-radius: 10px; font: 850 15px/1 var(--font-display); font-stretch: var(--wide-ui);
  background: color-mix(in srgb, var(--c-dull-deep) 88%, transparent); color: var(--c-dull-tag); left: 22px;
}
.cmp__tag--us { left: auto; right: 22px; background: var(--c-red); color: var(--c-on-ink); box-shadow: 0 10px 26px -10px var(--c-glow-red); }
.cmp__cards { position: absolute; z-index: 2; bottom: 22px; display: grid; gap: 10px; width: min(280px, 40%); margin: 0; padding: 0; list-style: none; }
.cmp__side--before .cmp__cards { left: 22px; }
.cmp__side--after .cmp__cards { right: 22px; }
.cmp__card { display: grid; grid-template-columns: 36px minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 14px 12px 12px; border-radius: 14px; font: 500 14px/1.3 var(--font-text); }
.cmp__card b { display: block; font: 820 16px/1.2 var(--font-display); font-stretch: var(--wide-ui); }
.cmp__side--before .cmp__card { background: color-mix(in srgb, var(--c-dull) 92%, transparent); color: var(--c-dull-text); }
.cmp__side--before .cmp__card b { color: var(--c-dull-strong); }
.cmp__side--after .cmp__card { background: var(--c-paper); color: var(--c-ink-soft); box-shadow: 0 16px 34px -16px rgba(2, 2, 24, .8); }
.cmp__side--after .cmp__card b { color: var(--c-ink); }
.cmp__x, .cmp__ok { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; }
.cmp__x { background: color-mix(in srgb, var(--c-red) 18%, transparent); color: var(--c-red-on-ink); }
.cmp__ok { background: var(--c-accent); color: var(--c-on-gold); }
.cmp__x svg, .cmp__ok svg { width: 18px; height: 18px; }
.cmp__card--bars { grid-template-columns: minmax(0, 1fr) 96px; }
.cmp__bars { display: flex; align-items: flex-end; gap: 2px; height: 38px; }
.cmp__bars i { flex: 1; height: calc(var(--v) * 100%); border-radius: 2px; background: linear-gradient(180deg, var(--c-brand-light), var(--c-brand)); }
[data-kit-whole] { transition: opacity .2s, visibility 0s; }
[data-kit-under] { opacity: 0; transition: opacity .2s, visibility 0s .2s; }
.cmp__range { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp__handle { position: absolute; z-index: 3; 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)) - .03) * 14), 1); }
.cmp__range:focus-visible + .cmp__handle { opacity: 1; }
.cmp__line { position: absolute; top: 0; bottom: 0; left: -2px; width: 4px; background: var(--c-red); box-shadow: 0 0 18px var(--c-glow-red); }
.cmp__knob { position: absolute; top: 50%; left: 0; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-gold); transform: translate(-50%, -50%); box-shadow: 0 10px 26px -8px rgba(0, 0, 0, .7), 0 0 0 6px color-mix(in srgb, var(--c-accent) 25%, transparent); }
.cmp__knob svg { width: 26px; height: 26px; }
.cmp__hint { position: absolute; top: calc(50% + 40px); left: 0; padding: 6px 12px; border-radius: 999px; background: var(--c-ink); color: var(--c-on-ink); font: 800 13px/1 var(--font-display); font-stretch: var(--wide-ui); transform: translateX(-50%); white-space: nowrap; }
.cmp[data-kit-touched] .cmp__hint { opacity: 0; }
.cmp__range:focus-visible ~ .cmp__handle .cmp__knob { box-shadow: 0 0 0 4px var(--c-ink), 0 0 0 7px var(--c-accent); }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 28px 0 0; padding: 0; list-style: none; }
.promises li { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; background: color-mix(in srgb, var(--c-brand) 40%, transparent); box-shadow: inset 0 0 0 1.5px var(--c-line-on-ink); font: 750 16px/1.3 var(--font-display); font-stretch: var(--wide-ui); }
.promises svg { flex: none; width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--c-accent); color: var(--c-on-gold); }
@media (max-width: 960px) { .promises { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .cmp { height: 600px; }
  .cmp__tag { top: 16px; font-size: 13.5px; padding: 8px 11px; }
  .cmp__side--before .cmp__tag { left: 12px; }
  .cmp__tag--us { right: 12px; }
  .cmp__cards { bottom: 14px; width: calc(50% - 26px); gap: 8px; }
  .cmp__side--before .cmp__cards { left: 10px; }
  .cmp__side--after .cmp__cards { right: 10px; }
  .cmp__card { grid-template-columns: 1fr; gap: 6px; padding: 10px; font-size: 13px; }
  .cmp__card b { font-size: 14.5px; }
  .cmp__x, .cmp__ok { width: 28px; height: 28px; }
  .cmp__card--bars { grid-template-columns: 1fr; }
  .cmp__bars { height: 28px; }
  .cmp__knob { top: 34%; width: 48px; height: 48px; }
  .cmp__hint { top: calc(34% + 34px); }
  .promises { grid-template-columns: 1fr; gap: 10px; }
}

/* =================== who: the six categories and many more =================== */
.who { background: var(--c-night); }
.who__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 300px; gap: 16px; }
.tile { position: relative; isolation: isolate; display: flex; flex-direction: column; justify-content: flex-end; padding: 22px; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--c-on-ink); box-shadow: var(--shadow-m), inset 0 0 0 1px var(--c-line-on-ink); transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.tile--wide { grid-column: span 2; }
.tile__media { z-index: -2; }
.tile__media img { transition: transform .8s var(--ease-out), filter .4s linear; filter: saturate(1.05) brightness(.92); }
.tile::before { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 95%, transparent) 0%, color-mix(in srgb, var(--c-ink) 62%, transparent) 38%, transparent 72%); }
.tile__text { display: grid; gap: 6px; padding-right: 44px; }
.tile__fields { color: var(--c-accent); font: 650 14.5px/1.4 var(--font-text); }
.tile__go { position: absolute; right: 18px; bottom: 20px; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: color-mix(in srgb, var(--c-on-ink) 14%, transparent); color: var(--c-on-ink); transition: background-color var(--dur-fast) linear, transform var(--dur-med) var(--ease-out); }
.tile__go svg { width: 20px; height: 20px; }
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-l), var(--shadow-glow); }
.tile:hover .tile__media img { transform: scale(1.04); filter: saturate(1.15) brightness(1); }
.tile:hover .tile__go { background: var(--c-red); transform: translateX(3px); }
.tile--more { background: radial-gradient(120% 90% at 100% 0%, color-mix(in srgb, var(--c-red-hot) 60%, transparent), transparent 60%), var(--c-red-dark); }
.tile--more::before { display: none; }
.tile--more .tile__fields { color: var(--c-on-ink); }
.tile__ribbon { position: absolute; top: 18px; right: -30px; width: 74%; opacity: .32; pointer-events: none; }
.tile--more .tile__ribbon .ribbon__body, .tile--more .tile__ribbon .ribbon__head { stroke: var(--c-on-ink); fill: var(--c-on-ink); }
@media (max-width: 1080px) { .who__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 260px; } }
@media (max-width: 560px) { .who__grid { grid-template-columns: 1fr; grid-auto-rows: 220px; gap: 12px; } .tile--wide { grid-column: auto; } }

/* =================== faq =================== */
.faq { background: var(--c-ink); }
.faq__in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(30px, 6vw, 90px); align-items: start; }
.faq__side { position: sticky; top: 110px; }
.faq__list { display: grid; gap: 12px; }
.faq__list details { border-radius: 16px; background: color-mix(in srgb, var(--c-brand) 32%, transparent); box-shadow: inset 0 0 0 1.5px var(--c-line-on-ink); transition: background-color var(--dur-med) linear; }
.faq__list details[open] { background: var(--c-brand); }
.faq__list summary { position: relative; padding: 20px 62px 20px 22px; list-style: none; cursor: pointer; font: 820 clamp(17px, 1.35vw, 20px)/1.3 var(--font-display); font-stretch: var(--wide-ui); }
.faq__list summary::-webkit-details-marker { display: none; }
.faq__list summary::after { content: ''; position: absolute; right: 22px; top: 50%; width: 24px; height: 24px; margin-top: -12px; border-radius: 50%; background: var(--c-accent) center / 12px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23070726' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); transition: transform var(--dur-med) var(--ease-out); }
.faq__list details[open] summary::after { transform: rotate(45deg); }
.faq__list summary:focus-visible { outline-offset: -3px; border-radius: 16px; }
.faq__list details p { margin: 0; padding: 0 22px 22px; color: var(--c-soft-on-ink); font-size: 16.5px; line-height: 1.6; }
@media (max-width: 960px) { .faq__in { grid-template-columns: 1fr; } .faq__side { position: static; } }

/* =================== close: the last push =================== */
.close { padding-block: clamp(120px, 14vw, 200px); text-align: center; }
.close__stop { top: 22px; right: 22px; }
.close .band__media video { filter: saturate(1.3) brightness(.95); }
/* the shade sits behind the words; the dusk shows at the sides */
.close__shade { background: radial-gradient(42% 56% at 50% 50%, color-mix(in srgb, var(--c-ink) 76%, transparent), color-mix(in srgb, var(--c-ink) 30%, transparent) 100%), linear-gradient(180deg, var(--c-ink) 0%, transparent 24%, transparent 76%, var(--c-ink) 100%); }
/* the closing burst (request 5): red, gold and blue light from the band's corners */
.close__burst { position: absolute; inset: 0; z-index: -1; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(30% 48% at 10% 86%, var(--c-glow-red), transparent 72%), radial-gradient(28% 42% at 90% 14%, var(--c-glow-gold), transparent 72%), radial-gradient(32% 46% at 6% 10%, var(--c-glow-blue), transparent 72%), radial-gradient(30% 44% at 94% 92%, var(--c-glow-red), transparent 72%); }
/* the ribbon rises at the lower right, clear of the words, and draws itself as the band comes in */
.close__ribbon { position: absolute; z-index: -1; right: max(16px, calc(50% - 700px)); bottom: -24px; width: clamp(300px, 34vw, 540px); filter: drop-shadow(0 24px 50px var(--c-glow-red)); pointer-events: none; animation: rib-draw linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
@media (prefers-reduced-motion: reduce) { .close__ribbon { animation: none; } }
.close__in { position: relative; display: grid; justify-items: center; gap: 0; }
.close__title { max-width: 16ch; }
.close__line { margin: 20px auto 32px; text-align: center; }
.close__quiz { margin-top: 26px; }
@media (max-width: 760px) {
  .close { padding-bottom: calc(clamp(120px, 14vw, 200px) + 20vw); }
  .close__ribbon { right: 4vw; bottom: -10px; width: 70vw; }
}