/* The home page's own styles (plan.md "Home"), tokens only. */

/* ---------- hero: full-bleed footage, the field changing (kit rotate) ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; display: flex; align-items: center; min-height: clamp(640px, calc(100svh - 76px), 860px); background: var(--c-ink); color: var(--c-on-ink); }
.hero__media { position: absolute; inset: 0; z-index: 0; }
[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%))); } /* the kit gives the glide in whole device pixels */
[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); } /* each clip reaches 1 px past its frame, so no still picture shows beside it; until it has shown its first frames, its first paint is cut 1 px inside the frame, so the first picture stays the largest paint */
[data-kit-scene="rotate"] [data-kit-slide] video[data-kit-shown] { clip-path: none; } /* the kit marks a clip once it has shown its first frames */
[data-kit-scene="rotate"] [data-kit-slide][data-prev] { opacity: clamp(0, (1 - var(--kit-move, 0)) * 1000, 1); } /* the picture that left goes once the new one covers it whole */
[data-kit-scene="rotate"] [data-kit-slide] img.kit-first { inset: -1px !important; width: calc(100% + 2px) !important; height: calc(100% + 2px) !important; max-width: none; } /* the first picture laid like its clip */
.hero__slide img.kit-first { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__slide--hero-general video, .hero__slide--hero-general img { object-position: 50% 50%; }
.hero__slide--hero-law video { object-position: 62% 40%; }
.hero__slide--hero-practice video { object-position: 70% 40%; }
.hero__slide--hero-medspa video { object-position: 70% 40%; }
.hero__slide--hero-advisor video { object-position: 62% 40%; }
.hero__shade { position: absolute; inset: 0; z-index: 1; pointer-events: none; background:
  linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 94%, transparent) 0%, color-mix(in srgb, var(--c-ink) 84%, transparent) 36%, color-mix(in srgb, var(--c-ink) 30%, transparent) 64%, transparent 82%),
  linear-gradient(0deg, color-mix(in srgb, var(--c-ink) 55%, transparent) 0%, transparent 30%); }
.hero__in { position: relative; z-index: 3; padding-block: clamp(3rem, 7vh, 5rem); }
.hero__title { margin: 0; max-width: 46rem; font: 400 clamp(2.1rem, 1.05rem + 2.75vw, 3.25rem) / 1.12 var(--font-display); letter-spacing: var(--tracking-display); }
.hero__ask { display: block; }
.hero__title { font-size: clamp(2.15rem, 1rem + 3.1vw, 3.55rem); }
.hero__answer { display: block; margin-top: .12em; color: var(--c-brand-on-ink); white-space: nowrap; }
.hero__answer [data-kit-word] { display: inline-block; opacity: calc(1 - var(--kit-swap, 0)); transform: translateY(calc(var(--kit-swap, 0) * .22em)); }
.hero__line { max-width: 38rem; margin: 1.3rem 0 1.8rem; font-size: calc(var(--fs-body) * 1.06); color: var(--c-on-ink-soft); }
.hero__line strong { color: var(--c-on-ink); font-weight: 700; }
.picker--hero { max-width: 34rem; padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: var(--radius-l); background: color-mix(in srgb, var(--c-ink) 72%, transparent); border: 1px solid var(--c-line-ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow-l); }
.hero__card { position: absolute; z-index: 3; right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); bottom: 14%; display: flex; align-items: center; gap: .8rem; max-width: 20rem; padding: .85rem 1.1rem .85rem .85rem; border-radius: var(--radius-m); background: color-mix(in srgb, var(--c-ink) 52%, transparent); border: 1px solid color-mix(in srgb, var(--c-on-ink) 20%, transparent); box-shadow: var(--shadow-l), inset 0 1px 0 color-mix(in srgb, var(--c-on-ink) 22%, transparent); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 16px)); }
.hero__tick { flex: none; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); }
.hero__tick svg { width: 16px; height: 16px; }
.hero__card-text { display: grid; gap: .2rem; }
.hero__card-text b { font: 700 1.04rem/1.2 var(--font-ui); color: var(--c-on-ink); }
.hero__card-text span { font-size: .95rem; line-height: 1.25; color: var(--c-on-ink-soft); }
.stop--hero { right: max(var(--gutter), calc((100% - var(--max-w)) / 2)); top: 1.5rem; }
@media (max-width: 899px) {
  .hero { display: grid; align-items: start; min-height: 0; }
  .hero__in { order: 1; padding-block: 2rem 1.5rem; }
  .hero__media { position: relative; order: 2; inset: auto; height: clamp(260px, 62vw, 420px); }
  .hero__shade { display: none; }
  .hero__answer { white-space: normal; min-height: 2.24em; }
  .hero__line { margin: 1rem 0 1.4rem; }
  .picker--hero { max-width: none; background: var(--c-ink-2); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; }
  .hero__card { right: auto; left: var(--gutter); bottom: 1rem; max-width: calc(100% - 2 * var(--gutter)); }
  .stop--hero { top: auto; bottom: calc(clamp(260px, 62vw, 420px) - 52px); right: var(--gutter); }
}
@media (max-width: 899px) and (min-width: 560px) { .hero__answer { min-height: 0; } }

/* ---------- problem: the lit band, two sourced figures, the AI answer over footage ---------- */
.problem__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.02fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.stats { display: grid; gap: 1.4rem; }
.stat { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 1.25rem; margin: 0; padding-top: 1.25rem; border-top: 1px solid var(--c-line-ink); }
.stat__fig { font: 400 var(--fs-figure) / 1 var(--font-display); color: var(--c-brand-on-ink); letter-spacing: -.02em; min-width: 3.1ch; }
.stat__what { font-size: 1.05rem; line-height: 1.45; color: var(--c-on-ink); max-width: 22rem; }
.stat__ref { margin-left: .15em; font: 700 .78rem/1 var(--font-ui); }
.stat__ref a { color: var(--c-accent-on-ink) !important; text-decoration: none; }
.problem__frame { position: relative; height: clamp(560px, 46vw, 660px); border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink-2); box-shadow: var(--shadow-l); }
.problem__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; object-position: 26% 50%; }
.problem__frame::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent 30%, color-mix(in srgb, var(--c-ink) 28%, transparent) 100%); }
.problem__scene { position: absolute; z-index: 2; top: 6%; right: 5%; width: min(380px, 64%); }
.stop--frame { left: 1rem; top: 1rem; }
@media (max-width: 960px) {
  .problem__in { grid-template-columns: 1fr; }
  .problem__frame { height: auto; overflow: visible; background: transparent; box-shadow: none; }
  .problem__frame .problem__video { position: relative; inset: auto; display: block; width: 100%; height: clamp(260px, 56vw, 420px); border-radius: var(--radius-l); object-position: 28% 40%; }
  .problem__frame::after { display: none; }
  .problem__scene { position: relative; top: auto; right: auto; width: min(380px, calc(100% - 1.5rem)); margin: -72px auto 0; }
}

/* ---------- outcomes: four cards, each real footage with its scene ---------- */
.outcomes__grid { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); }
.stop--outcomes { right: 1rem; top: -3.6rem; border-color: var(--c-line); background: var(--c-card); color: var(--c-ink); }
.stop--outcomes:hover { background: var(--c-paper-alt); }
.out { position: relative; isolation: isolate; min-height: 580px; border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink); color: var(--c-on-ink); box-shadow: var(--shadow-m); }
.out__media { position: absolute; inset: 0; z-index: 0; }
.out__media video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.out--found .out__media video { object-position: 80% 45%; }
.out--answer .out__media video { object-position: 75% 40%; }
.out--reviews .out__media video { object-position: 72% 40%; }
.out--work .out__media video { object-position: 80% 40%; }
.out::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 18%, transparent) 0%, transparent 34%, color-mix(in srgb, var(--c-ink) 82%, transparent) 76%, color-mix(in srgb, var(--c-ink) 94%, transparent) 100%); }
:where(.out) .out__scene { position: absolute; z-index: 2; top: 1.5rem; width: min(340px, 56%); }
.out--found .out__scene { right: 1.5rem; }
.out--answer .out__scene, .out--reviews .out__scene, .out--work .out__scene { left: 1.5rem; }
.out__text { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 clamp(1.4rem, 2.4vw, 2rem) clamp(1.4rem, 2.4vw, 1.9rem); }
.out__title { margin: 0; font: 400 var(--fs-h3) / 1.2 var(--font-display); color: var(--c-on-ink); }
.out__text p { margin: .55rem 0 .9rem; max-width: 30rem; color: var(--c-on-ink-soft); }
.out__link { color: var(--c-brand-on-ink) !important; }
@media (max-width: 1100px) {
  .outcomes__grid { grid-template-columns: 1fr; }
  .out { min-height: 540px; }
  .out .out__media video { object-position: 50% 40%; }
  :where(.out) .out__scene { width: min(340px, 44%); }
}
@media (max-width: 720px) {
  .stop--outcomes { top: -3.2rem; right: 0; }
  /* --on: how far the picture runs behind its card, at least half the card: the page keeps its height, the picture grows under the card */
  .out { --on: 150px; min-height: 0; display: grid; }
  .out--found { --on: 170px; }
  .out--answer { --on: 90px; }
  .out__media { position: relative; inset: auto; height: calc(clamp(220px, 60vw, 320px) - 48px + var(--on)); }
  .out .out__media video { object-position: 60% 35%; }
  .out--found .out__media { overflow: clip; }
  .out--found .out__media video { top: -15%; bottom: auto; height: calc(115% + 2px); } /* her face stays above the card */
  .out::after { display: none; }
  :where(.out) .out__scene { position: relative; top: auto; left: auto !important; right: auto !important; width: min(340px, calc(100% - 1.5rem)); margin: calc(-1 * var(--on)) auto 0; }
  .out__text { position: relative; padding-top: 1.4rem; }
}

/* ---------- plan: the tour over the town at dusk ---------- */
.plan__tour { display: grid; gap: 1rem; }
.plan__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .75rem; }
.plan__tab { position: relative; display: grid; gap: .3rem; align-content: start; min-height: 96px; padding: 1rem 1.15rem 1.2rem; border: 1px solid var(--c-line-ink); border-radius: var(--radius-m); background: transparent; color: var(--c-on-ink); text-align: left; cursor: pointer; overflow: hidden; transition: background-color var(--dur-fast), border-color var(--dur-fast); }
.plan__tab b { font: 400 1.05rem/1.25 var(--font-display); }
.plan__tab span { font-size: .98rem; line-height: 1.35; color: var(--c-on-ink-soft); }
.plan__tab:hover { border-color: color-mix(in srgb, var(--c-on-ink) 34%, transparent); }
.plan__tab[aria-selected="true"] { background: var(--c-ink-3); border-color: color-mix(in srgb, var(--c-brand) 60%, transparent); }
.plan__fill { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--c-brand); transform-origin: 0 50%; transform: scaleX(0); }
.plan__tab[aria-selected="true"] .plan__fill { transform: scaleX(1); }
.plan__tabs[data-kit-on] .plan__tab[aria-selected="true"] .plan__fill { transform: scaleX(var(--kit-fill, 0)); }
.plan__stage { position: relative; height: clamp(470px, 40vw, 540px); border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink-2); box-shadow: var(--shadow-l); }
.plan__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.plan__stage::before { content: ""; position: absolute; inset: 0; z-index: 1; background: color-mix(in srgb, var(--c-ink) 40%, transparent); pointer-events: none; }
.plan__panel { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; padding: 1.5rem; }
.plan__panel:focus-visible { outline-offset: -4px; }
.plan__scene { width: min(780px, 100%); }
.stop--plan { right: 1rem; top: 1rem; }
@media (max-width: 760px) {
  .plan__tabs { grid-template-columns: 1fr; gap: .5rem; }
  .plan__tab { min-height: 0; padding: .85rem 1rem 1rem; }
  .plan__stage { height: auto; min-height: 520px; }
  .plan__panel { position: relative; inset: auto; min-height: 520px; padding: 3.75rem .75rem 1.25rem; }
  .plan__panel[hidden] { display: none; }
}

/* ---------- reviews: the agency's real reviews, crossing the footage strip ---------- */
.reviews { padding-top: 0; overflow: hidden; }
.reviews__strip { position: absolute; left: 0; right: 0; top: 0; height: clamp(420px, 36vw, 500px); overflow: hidden; background: var(--c-ink); }
.reviews__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.reviews__strip::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 88%, transparent) 0%, color-mix(in srgb, var(--c-ink) 55%, transparent) 70%, color-mix(in srgb, var(--c-ink) 35%, transparent) 100%); }
.stop--strip { right: var(--gutter); top: 1.25rem; }
.reviews__in { position: relative; z-index: 2; padding-top: var(--section-y); }
.head--on-strip .head__title { color: var(--c-on-ink); }
.head--on-strip .head__line { color: var(--c-on-ink-soft); }
.reviews__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 2vw, 1.5rem); align-items: stretch; }
.review { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 1rem; margin: 0; padding: clamp(1.5rem, 2.4vw, 2rem); border-radius: var(--radius-l); background: var(--c-card); color: var(--c-ink); border: 1px solid var(--c-line); box-shadow: var(--shadow-m); }
.review::before { content: "\201C"; position: absolute; right: 1.25rem; top: .4rem; font: 400 4.5rem/1 var(--font-display); color: color-mix(in srgb, var(--c-brand) 30%, transparent); }
.review__stars { display: flex; gap: 3px; margin: 0; }
.review__stars svg { width: 20px; height: 20px; fill: var(--c-star-on-paper); }
.review__rec { display: inline-flex; align-items: center; gap: .45rem; margin: 0; font: 700 .98rem/1.2 var(--font-ui); color: var(--c-accent-text); }
.review__rec svg { width: 18px; height: 18px; padding: 3px; border-radius: 50%; background: var(--c-blue); color: var(--c-on-ink); }
.review__text { margin: 0; }
.review__text p { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.review__by { display: grid; gap: .15rem; padding-top: 1rem; border-top: 1px solid var(--c-line); }
.review__by b { font-weight: 700; }
.review__by span { font-size: var(--fs-small); color: var(--c-ink-soft); }
@media (max-width: 980px) { .reviews__grid { grid-template-columns: 1fr; max-width: 40rem; } }

/* ---------- how: three steps lit by the chat ---------- */
.how { overflow: hidden; }
.how__bg { position: absolute; inset: 0; z-index: 0; }
.how__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; opacity: .9; }
.how__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 94%, transparent) 0%, color-mix(in srgb, var(--c-ink) 82%, transparent) 46%, color-mix(in srgb, var(--c-ink) 42%, transparent) 100%); }
/* on one column the words run the full width: the shade stays even under them */
@media (max-width: 960px) { .how__bg::after { background: color-mix(in srgb, var(--c-ink) 86%, transparent); } }
.how__in { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: center; }
.steps { display: grid; gap: .75rem; margin: 0; padding: 0; list-style: none; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 1rem; padding: 1.15rem 1.25rem; border-radius: var(--radius-m); border: 1px solid var(--c-line-ink); background: color-mix(in srgb, var(--c-ink-2) 70%, transparent); transition: background-color var(--dur-med) var(--ease-out), border-color var(--dur-med) var(--ease-out); }
.step__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-s); border: 1px solid var(--c-line-ink); font: 400 1.05rem/1 var(--font-display); color: var(--c-on-ink); transition: background-color var(--dur-med), color var(--dur-med); }
.step__text { display: grid; gap: .3rem; }
.step__text b { font: 400 1.08rem/1.3 var(--font-display); }
.step__text b em { display: inline-block; margin-left: .5rem; padding: .2rem .5rem; border-radius: var(--radius-s); background: color-mix(in srgb, var(--c-on-ink) 10%, transparent); font: 700 .82rem/1 var(--font-ui); font-style: normal; vertical-align: .15em; color: var(--c-on-ink-soft); }
.step__text > span { color: var(--c-on-ink-soft); }
.step[aria-current="step"] { background: var(--c-ink-3); border-color: color-mix(in srgb, var(--c-brand) 55%, transparent); }
.step[aria-current="step"] .step__n { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.how__phone { display: grid; justify-items: center; }
.phone { position: relative; display: grid; grid-template-rows: auto 1fr; width: min(350px, 100%); height: 690px; padding: 14px; border-radius: 40px; background: var(--c-paper); color: var(--c-ink); box-shadow: var(--shadow-l), 0 0 0 9px var(--c-ink-3), 0 0 0 10px var(--c-line-ink); opacity: calc(1 - var(--kit-out, 0) * .35); }
.phone__head { display: flex; align-items: center; gap: .7rem; padding: .5rem .5rem .9rem; border-bottom: 1px solid var(--c-line); }
.phone__head img { width: 36px; height: 36px; padding: 3px; border-radius: 10px; background: var(--c-card); border: 1px solid var(--c-line); }
.phone__head span { display: grid; gap: .1rem; }
.phone__head b { font: 700 1rem/1.15 var(--font-ui); }
.phone__head span span { font-size: .9rem; color: var(--c-ink-soft); }
/* the messages start at the top; once the phone is full, the oldest slide up out of it, as in a real chat (the spacer takes the free room, and flex-end sends any overflow over the top) */
.phone__msgs { display: flex; flex-direction: column; justify-content: flex-end; gap: .55rem; overflow: hidden; padding: .75rem .25rem .25rem; }
.phone__msgs::after { content: ''; flex: 1 1 0; min-height: 0; }
.msg { margin: 0; max-width: 86%; padding: .7rem .9rem; border-radius: 16px; font-size: 1rem; line-height: 1.35; opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px)); }
.msg--them { align-self: flex-start; background: var(--c-paper-alt); border-bottom-left-radius: 5px; }
.msg--me { align-self: flex-end; background: var(--c-blue); color: var(--c-on-ink); border-bottom-right-radius: 5px; font-weight: 600; }
.msg--chips { align-self: flex-start; display: flex; gap: .4rem; padding: 0; background: none; }
.msg--chips span { display: grid; place-items: center; min-width: 46px; height: 40px; border-radius: var(--radius-m); border: 1px solid var(--c-line); background: var(--c-card); font: 400 1rem/1 var(--font-display); transition: background-color var(--dur-fast), color var(--dur-fast); }
.msg--chips span[data-kit-on] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.msg--typing { display: inline-flex; gap: 5px; padding: .85rem 1rem; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink-soft); animation: dots 1s infinite ease-in-out; }
.msg--typing i:nth-child(2) { animation-delay: .15s; }
.msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes dots { 0%, 100% { transform: translateY(0); opacity: .45; } 40% { transform: translateY(-4px); opacity: 1; } }
.msg--check { display: grid; gap: .5rem; min-width: 70%; font-weight: 600; }
.msg__bar { display: block; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--c-ink) 10%, transparent); overflow: hidden; }
.msg__bar i { display: block; height: 100%; border-radius: 3px; background: var(--c-brand); transform-origin: 0 50%; transform: scaleX(var(--kit-fill, 0)); }
.msg--result { align-self: stretch; max-width: none; display: grid; gap: .35rem; padding: 1rem; border-radius: var(--radius-m); background: var(--c-ink); color: var(--c-on-ink); }
.result__k { font-size: .92rem; color: var(--c-on-ink-soft); }
.result__v { font: 400 1.6rem/1.1 var(--font-display); color: var(--c-on-ink); }
.result__v small { font: 500 .95rem/1 var(--font-ui); color: var(--c-on-ink-soft); margin-left: .3rem; }
.result__bars { display: grid; grid-template-columns: repeat(12, 1fr); align-items: end; gap: 3px; height: 64px; margin-top: .4rem; }
.result__bars i { display: block; height: var(--h); border-radius: 2px 2px 0 0; background: var(--c-brand); transform-origin: 50% 100%; transform: scaleY(var(--kit-in, 1)); }
.result__bars i.is-setup { background: color-mix(in srgb, var(--c-on-ink) 22%, transparent); }
.result__from { display: flex; justify-content: space-between; gap: .5rem; margin-top: .4rem; padding-top: .5rem; border-top: 1px solid var(--c-line-ink); font-size: .88rem; color: var(--c-on-ink-soft); }
.result__from b { font-weight: 700; color: var(--c-on-ink); text-align: right; }
.stop--how { right: var(--gutter); top: 1.25rem; }
@media (max-width: 960px) {
  .how__in { grid-template-columns: 1fr; }
  .phone { height: 540px; }
}

/* yourpart's small phone takes --c-on-brand as its light text, and here the text on orange is navy: the phone gets the light text, its lit choice keeps navy on orange */
#plan [data-scene="yourpart"] .yp-phone { --c-on-brand: var(--c-on-ink); }
#plan [data-scene="yourpart"] .yp-chips span.is-on { color: var(--c-ink); }
/* estimate's stamp was see-through, so the paper's corner showed inside its ring like a cut-out: a solid stamp lies whole over the corner */
#plan [data-scene="estimate"] { overflow: visible; }
#plan [data-scene="estimate"] .es-stamp { background: var(--c-paper); }
/* on a narrow card the stamp would sit on the last line: it hangs below the paper, the words clear */
@container (width < 460px) {
  #plan [data-scene="estimate"] .es-wrap { padding-bottom: 100px; }
  #plan [data-scene="estimate"] .es-stamp { bottom: -104px; }
}

/* ---------- worth: the calculator and the year adding up ---------- */
.worth__in { position: relative; }
.worth__box { --calc-ink: var(--c-on-ink); --calc-ink-soft: var(--c-on-ink-soft); --calc-track: color-mix(in srgb, var(--c-on-ink) 16%, transparent); --calc-fill: var(--c-brand); --calc-thumb: var(--c-brand); --calc-thumb-edge: var(--c-ink); --calc-focus: var(--c-brand); --calc-font: var(--font-ui); --calc-font-figure: var(--font-display); display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 0; border-radius: var(--radius-l); overflow: hidden; background: var(--c-ink); color: var(--c-on-ink); box-shadow: var(--shadow-l); }
.worth__controls { display: grid; align-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); border-right: 1px solid var(--c-line-ink); }
.worth__result { position: relative; display: grid; align-content: start; gap: 1.1rem; padding: clamp(1.5rem, 3vw, 2.5rem); background: radial-gradient(90% 80% at 70% 30%, var(--c-blue) 0%, var(--c-ink-2) 70%); }
.worth__result .calc-note { margin: 0; font-size: var(--fs-small); color: var(--c-on-ink-soft); }
.stop--worth { right: 1rem; top: 1rem; }
@media (max-width: 900px) {
  .worth__box { grid-template-columns: 1fr; }
  .worth__controls { border-right: 0; border-bottom: 1px solid var(--c-line-ink); }
}
/* the picture: the year adding up, one rising line over twelve month points; its height is the year's new revenue (home.js) */
.worth__picture { display: grid; }
.rise { display: grid; gap: .35rem; }
.rise__svg { display: block; width: 100%; height: auto; overflow: visible; }
.rise__stop-a { stop-color: var(--c-brand); stop-opacity: .55; }
.rise__stop-b { stop-color: var(--c-brand); stop-opacity: .04; }
.rise__grid { stroke: color-mix(in srgb, var(--c-on-ink) 9%, transparent); stroke-width: 1; }
.rise__base { stroke: color-mix(in srgb, var(--c-on-ink) 30%, transparent); stroke-width: 1.5; }
.rise__area { transition: all var(--dur-fast) var(--ease-out); }
.rise__line { fill: none; stroke: var(--c-brand); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.rise__ahead { fill: none; stroke: color-mix(in srgb, var(--c-on-ink) 38%, transparent); stroke-width: 2; stroke-dasharray: 3 7; stroke-linecap: round; }
.rise__pt { fill: var(--c-ink-2); stroke: var(--c-brand); stroke-width: 2.5; opacity: 0; }
.rise__pt[data-kit-on] { opacity: var(--kit-in, 1); }
.rise__pt.is-top { r: 7.5px; fill: var(--c-brand); stroke: var(--c-on-ink); stroke-width: 2.5; filter: drop-shadow(0 0 8px color-mix(in srgb, var(--c-brand) 70%, transparent)); }
.rise__axis { display: flex; justify-content: space-between; margin: 0; padding: 0 1.2%; font: 600 .875rem/1 var(--font-ui); color: var(--c-on-ink-soft); }
.worth__figures .calc-figure { margin: 0; }

/* ---------- compare: drag the line ---------- */
.cmp { position: relative; height: clamp(480px, 42vw, 560px); border-radius: var(--radius-l); overflow: hidden; touch-action: pan-y; background: var(--c-ink-2); box-shadow: var(--shadow-l); }
.cmp__side { position: absolute; inset: 0; }
.cmp__photo, .cmp__side picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.cmp__side img { width: 100%; height: 100%; object-fit: cover; }
.before img { filter: grayscale(1) contrast(.9) brightness(.82); }
.before::after { content: ""; position: absolute; inset: 0; background: color-mix(in srgb, var(--c-ink) 38%, transparent); }
.after { clip-path: inset(0 0 0 calc(var(--kit-v, .5) * 100%)); }
.after img { object-position: 50% 30%; }
.after::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--c-ink) 55%, transparent) 100%); }
.cmp__tag { position: absolute; z-index: 2; top: 1.25rem; padding: .5rem .85rem; border-radius: var(--radius-s); font: 400 .95rem/1 var(--font-display); background: color-mix(in srgb, var(--c-ink) 78%, transparent); color: var(--c-on-ink); }
.before .cmp__tag { left: 1.25rem; }
.cmp__tag--us { right: 1.25rem; background: var(--c-brand); color: var(--c-on-brand); }
.cmp__cards { position: absolute; z-index: 2; bottom: 1.25rem; display: grid; gap: .6rem; width: min(260px, calc(50% - 2.5rem)); }
.before .cmp__cards { left: 1.25rem; }
.after .cmp__cards { right: 1.25rem; }
.cmp__card { display: grid; gap: .2rem; margin: 0; padding: .75rem .9rem; border-radius: var(--radius-m); background: color-mix(in srgb, var(--c-card) 94%, transparent); color: var(--c-ink); box-shadow: var(--shadow-m); }
.cmp__card b { font: 700 1rem/1.2 var(--font-ui); }
.cmp__card span { font-size: .92rem; color: var(--c-ink-soft); }
.before .cmp__card { background: color-mix(in srgb, var(--c-paper-alt) 90%, transparent); }
.cmp__card--bad b { text-decoration: line-through; text-decoration-color: var(--c-brand-text); text-decoration-thickness: 2px; }
.cmp__card--good b { color: var(--c-accent-text); }
.cmp__bars { display: grid; grid-template-columns: repeat(7, 1fr); align-items: end; gap: 3px; height: 34px; margin-top: .3rem; }
.cmp__bars i { display: block; height: max(2px, var(--h)); border-radius: 2px 2px 0 0; background: var(--c-brand); }
[data-kit-whole] { transition: opacity .2s, visibility 0s; }
[data-kit-under] { opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.cmp__range { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; }
.cmp__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)) - .03) * 14), 1); }
.cmp__range:focus-visible + .cmp__handle { opacity: 1; }
.cmp__line { position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; background: var(--c-card); box-shadow: 0 0 0 1px color-mix(in srgb, var(--c-ink) 30%, transparent); }
.cmp__knob { position: absolute; top: 38%; left: -26px; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--c-brand); color: var(--c-on-brand); box-shadow: var(--shadow-l); }
.cmp__knob svg { width: 24px; height: 24px; }
.cmp__hint { position: absolute; top: calc(38% + 62px); left: -30px; width: 60px; text-align: center; font: 700 .9rem/1 var(--font-ui); color: var(--c-on-ink); text-shadow: 0 1px 6px color-mix(in srgb, var(--c-ink) 80%, transparent); }
.cmp[data-kit-touched] .cmp__hint { display: none; }
.cmp__range:focus-visible ~ .cmp__handle .cmp__knob { outline: 3px solid var(--c-card); outline-offset: 3px; }
.promises { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 0; padding: 0; list-style: none; }
.promises li { position: relative; padding: 1rem 1rem 1rem 2.6rem; border-radius: var(--radius-m); border: 1px solid var(--c-line-ink); font-weight: 600; color: var(--c-on-ink); }
.promises li::before { content: ""; position: absolute; left: 1rem; top: 1.25rem; width: 14px; height: 8px; border-left: 2.5px solid var(--c-brand); border-bottom: 2.5px solid var(--c-brand); transform: rotate(-45deg); }
@media (max-width: 900px) {
  .promises { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .cmp { height: 520px; }
  .cmp__tag { top: .9rem; font-size: .82rem; padding: .45rem .6rem; }
  .before .cmp__tag { left: .75rem; }
  .cmp__tag--us { right: .75rem; }
  .cmp__cards { bottom: .9rem; width: calc(50% - 1.5rem); gap: .45rem; }
  .before .cmp__cards { left: .75rem; }
  .after .cmp__cards { right: .75rem; }
  .cmp__card { padding: .6rem .65rem; }
  .cmp__card b { font-size: .92rem; }
  .cmp__card span { font-size: .85rem; }
  .cmp__knob { top: 26%; }
  .cmp__hint { top: calc(26% + 62px); }
  .promises { grid-template-columns: 1fr; }
}

/* ---------- who: a wall of workplaces ---------- */
.who__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.9rem, 1.8vw, 1.25rem); }
.tile { position: relative; isolation: isolate; display: grid; align-content: end; min-height: 320px; border-radius: var(--radius-l); overflow: hidden; color: var(--c-on-ink); text-decoration: none; background: var(--c-ink); box-shadow: var(--shadow-m); }
.tile__photo, .tile picture { position: absolute; inset: 0; z-index: -2; display: block; width: 100%; height: 100%; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease-out); }
.tile:hover img { transform: scale(1.04); }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 30%, color-mix(in srgb, var(--c-ink) 88%, transparent) 100%); }
.tile__text { display: grid; gap: .35rem; padding: 1.4rem; }
.tile__text b { font: 400 1.25rem/1.2 var(--font-display); }
.tile__text b::after { content: ""; display: block; width: 36px; height: 3px; margin-top: .55rem; border-radius: 2px; background: var(--c-brand); }
.tile__text > span { color: var(--c-on-ink-soft); font-size: 1rem; }
.tile--more { grid-column: 1 / -1; min-height: 0; background: var(--c-blue); }
.tile--more::after { display: none; }
.tile--more .tile__text { grid-template-columns: minmax(0, auto) 1fr auto; align-items: center; gap: .5rem 1.5rem; padding: 1.6rem 1.75rem; }
.tile--more .tile__text b::after { display: none; }
.tile--more .link { color: var(--c-brand-on-ink); }
@media (max-width: 960px) { .who__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) {
  .who__grid { grid-template-columns: 1fr; }
  .tile { min-height: 260px; }
  .tile--more .tile__text { grid-template-columns: 1fr; }
}

/* ---------- faq ---------- */
.faq__in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
.faq__list { display: grid; border-top: 1px solid var(--c-line); }
.faq__item { border-bottom: 1px solid var(--c-line); }
.faq__item summary { position: relative; display: block; padding: 1.25rem 3rem 1.25rem 0; font: 700 1.12rem/1.35 var(--font-ui); cursor: pointer; list-style: none; }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: ""; position: absolute; right: .4rem; top: 50%; width: 12px; height: 12px; margin-top: -8px; border-right: 2.5px solid var(--c-brand-text); border-bottom: 2.5px solid var(--c-brand-text); transform: rotate(45deg); transition: transform var(--dur-fast); }
.faq__item[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__item p { margin: 0 0 1.4rem; max-width: 40rem; color: var(--c-ink-soft); }
@media (max-width: 860px) { .faq__in { grid-template-columns: 1fr; } }

/* ---------- close: the last push over footage ---------- */
.close { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(5rem, 10vw, 8rem); color: var(--c-on-ink); background: var(--c-ink); }
.close__bg { position: absolute; inset: 0; z-index: -1; }
.close__video { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); max-width: none; object-fit: cover; }
.close__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, color-mix(in srgb, var(--c-ink) 92%, transparent) 0%, color-mix(in srgb, var(--c-ink) 72%, transparent) 48%, color-mix(in srgb, var(--c-ink) 30%, transparent) 100%); }
.close__in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 30rem); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.close__title { margin: 0; font: 400 var(--fs-h1) / var(--lh-tight) var(--font-display); letter-spacing: var(--tracking-display); }
.close__title::after { content: ""; display: block; width: 56px; height: 3px; margin-top: .5em; border-radius: 2px; background: var(--c-brand); }
.picker--close { padding: clamp(1.1rem, 2vw, 1.5rem); border-radius: var(--radius-l); background: color-mix(in srgb, var(--c-ink) 76%, transparent); border: 1px solid var(--c-line-ink); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.stop--close { right: var(--gutter); top: 1.25rem; }
@media (max-width: 900px) { .close__in { grid-template-columns: 1fr; } }