/* home.css: the home page's own parts (design\components.md), from the tokens only. */

/* ---------- the header: the split ---------- */
.hero { position: relative; display: grid; isolation: isolate; }
.hero__words { position: relative; z-index: 3; padding: clamp(2rem, 1.2rem + 3vw, 3rem) var(--gutter) 2rem; }
.hero__title { font-size: clamp(1.75rem, 1.05rem + 4.2vw, 2.75rem); line-height: 1.05; letter-spacing: -0.018em; }
.hero__wordline { display: block; white-space: nowrap; }
.hero__word { position: relative; display: inline-block; font-style: italic; font-weight: 500; color: var(--c-brand); z-index: 0; }
.hero__word::after {
  content: ""; position: absolute; z-index: -1; left: -.05em; right: -.08em; bottom: .06em; height: .34em; border-radius: .08em;
  background: color-mix(in srgb, var(--c-accent) 58%, var(--c-paper));
  transform-origin: left center; transform: scaleX(calc(1 - var(--kit-swap, 0)));
}
.hero__line { margin: 1.15rem 0 1.6rem; font-size: clamp(1.06rem, 1rem + .35vw, 1.24rem); line-height: 1.55; color: var(--c-ink-soft); max-width: 33rem; }
.hero__picker { max-width: 31rem; }

.hero__stage { position: relative; aspect-ratio: 4 / 5; max-height: 78svh; width: 100%; overflow: hidden; }
.hero__media { position: absolute; inset: 0; overflow: hidden; }
.hero__media video { object-position: var(--pos, 50% 50%); filter: saturate(1.04) sepia(.06); }
.hero__media .kit-first { filter: saturate(1.04) sepia(.06); }
.hero__card {
  position: absolute; z-index: 2; left: 12px; bottom: 54px; max-width: min(300px, calc(100% - 24px));
  display: flex; align-items: center; gap: .8rem; padding: .8rem 1.05rem .8rem .8rem; border-radius: var(--radius-m);
  background: var(--c-card); box-shadow: var(--shadow-l);
  opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 12px));
}
.hero__slide:not([data-kit-on]) .hero__card { opacity: 0; }
.hero:not(:has([data-kit-slide][data-kit-on])) .hero__slide:first-of-type .hero__card { opacity: 1; }
.hero__check { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); }
.hero__check svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.hero__card-text { display: grid; gap: .1rem; }
.hero__card b { font: 600 1rem/1.25 var(--font-text); color: var(--c-brand); }
.hero__card small { font-size: .875rem; color: var(--c-ink-soft); }
.hero__bars { position: absolute; z-index: 4; right: 18px; bottom: 18px; margin: 0; padding: 7px 9px; list-style: none; display: flex; align-items: flex-end; gap: 4px; border-radius: 10px; background: color-mix(in srgb, var(--c-brand) 55%, transparent); }
.hero__bars li { width: 7px; border-radius: 2px; background: color-mix(in srgb, var(--c-paper) 70%, transparent); transition: background-color var(--dur-med) var(--ease-out); }
.hero__bars li:nth-child(1) { height: 9px; } .hero__bars li:nth-child(2) { height: 14px; } .hero__bars li:nth-child(3) { height: 19px; } .hero__bars li:nth-child(4) { height: 24px; } .hero__bars li:nth-child(5) { height: 29px; }
.hero:not(:has([data-kit-slide][data-kit-on])) .hero__bars li:nth-child(1),
.hero:has(.hero__slide:nth-of-type(1)[data-kit-on]) .hero__bars li:nth-child(1),
.hero:has(.hero__slide:nth-of-type(2)[data-kit-on]) .hero__bars li:nth-child(2),
.hero:has(.hero__slide:nth-of-type(3)[data-kit-on]) .hero__bars li:nth-child(3),
.hero:has(.hero__slide:nth-of-type(4)[data-kit-on]) .hero__bars li:nth-child(4),
.hero:has(.hero__slide:nth-of-type(5)[data-kit-on]) .hero__bars li:nth-child(5) { background: var(--c-accent); }

/* the kit's header that changes its picture (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); }

/* the phone: the footage sits between the promise and the picker, so the first screen shows the field and its people */
@media (max-width: 699.98px) {
  .hero__words { display: contents; }
  .hero__title { order: 1; padding: 1.6rem var(--gutter) 0; }
  .hero__line { order: 2; margin: .95rem var(--gutter) 1.35rem; }
  .hero__stage { order: 3; aspect-ratio: 16 / 10; max-height: none; }
  .hero__picker { order: 4; margin: 1.15rem var(--gutter) 2rem; }
  .hero__card { left: 10px; bottom: 10px; padding: .55rem .85rem .55rem .55rem; gap: .6rem; max-width: calc(100% - 92px); }
  .hero__card b { font-size: .9375rem; }
  .hero__card small { font-size: .8125rem; }
  .hero__check { width: 28px; height: 28px; }
  .hero__bars { right: 12px; bottom: 12px; }
}

@media (min-width: 700px) and (max-width: 1079.98px) {
  .hero__words { padding-top: 3rem; }
  .hero__title { font-size: clamp(2.6rem, 1rem + 4.4vw, 3.3rem); }
  .hero__stage { aspect-ratio: 16 / 10; }
  .hero__card { left: 20px; bottom: 24px; }
}

@media (min-width: 1080px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); min-height: clamp(640px, calc(100svh - var(--header-h) - var(--chapters-h)), 860px); }
  .hero__words { grid-column: 1; align-self: center; padding: 3rem clamp(2.5rem, 4vw, 4.75rem) 3.5rem max(var(--gutter), calc((100vw - var(--max-w)) / 2)); }
  .hero__title { font-size: clamp(2.4rem, 4vw, 3.7rem); }
  .hero__stage { --seam: 64px; position: absolute; top: 0; bottom: 0; right: 0; left: calc(50% - var(--seam)); aspect-ratio: auto; max-height: none; width: auto; overflow: visible; }
  .hero__slide { overflow: visible; }
  /* the slide covers the footage only (the kit paints its poster behind it), and its card reaches back over the seam */
  [data-kit-scene="rotate"] .hero__slide { overflow: visible; left: var(--seam); border-bottom-left-radius: 44px; }
  .hero__media { border-bottom-left-radius: 44px; }
  .hero__card { left: calc(-1 * var(--seam)); bottom: auto; top: var(--at, 66%); max-width: 310px; transform: translate(calc((1 - var(--kit-in, 1)) * -14px), -50%); }
  .hero__bars { right: clamp(20px, 2.4vw, 36px); bottom: clamp(20px, 2.4vw, 32px); }
  .hero__stop { top: 18px; right: 18px; }
}

/* ---------- the chapter bar sits right after the header ---------- */
.page-home .chapters { margin-top: 0; }

/* ---------- 01 paths ---------- */
.paths { position: relative; display: grid; gap: 2.25rem 1.25rem; grid-template-columns: minmax(0, 1fr); }
.path { display: flex; flex-direction: column; gap: .55rem; }
.path__photo { position: relative; margin-bottom: 1.6rem; }
.path__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 11; object-fit: cover; border-radius: var(--radius-l); }
.path:nth-of-type(1) .path__photo img { object-position: 50% 35%; }
.path:nth-of-type(2) .path__photo img { object-position: 42% 30%; }
.path:nth-of-type(3) .path__photo img { object-position: 50% 25%; }
.path__chip {
  position: absolute; left: 14px; right: 14px; bottom: -1.35rem; display: flex; align-items: center; gap: .7rem; padding: .65rem .85rem; border-radius: var(--radius-m);
  background: var(--c-card); box-shadow: var(--shadow-m); border: 1px solid var(--c-line);
  opacity: calc(var(--kit-in, 1) * (1 - var(--kit-out, 0))); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px));
}
.path__tick { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--c-accent); color: var(--c-on-accent); }
.path__tick svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.path__chip b { display: block; font: 600 .95rem/1.25 var(--font-text); color: var(--c-brand); }
.path__chip small { display: block; font-size: .85rem; color: var(--c-ink-soft); }
.path__name { font-size: clamp(1.4rem, 1.2rem + .6vw, 1.65rem); }
.path__line { color: var(--c-ink-soft); }
.path .more { align-self: flex-start; margin-top: .2rem; }
.path--other { justify-content: flex-end; gap: .8rem; padding: clamp(1.5rem, 1rem + 2vw, 2.1rem); border-radius: var(--radius-l); background: var(--c-brand); color: var(--c-on-ink); min-height: 280px; }
.path--other .path__name { color: var(--c-on-ink); }
.path--other .path__line { color: var(--c-brand-on-ink); margin-bottom: .5rem; }
.path--other .button { align-self: stretch; }
.more--on-ink { color: var(--c-on-ink); }
.more--on-ink:focus-visible { outline-color: var(--c-on-ink); }
.paths > .stop { top: auto; bottom: 14px; right: 14px; }
@media (min-width: 700px) { .paths { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1080px) {
  .paths { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .path__photo img { aspect-ratio: 4 / 5; }
  .path--other { min-height: 0; }
  .paths > .stop { top: 14px; bottom: auto; }
}

/* ---------- 02 the free plan over footage ---------- */
.plan__band { position: relative; isolation: isolate; overflow: hidden; border-radius: var(--radius-l); background: var(--c-brand); padding: clamp(.75rem, .2rem + 2.4vw, 2.25rem) clamp(.5rem, .1rem + 2vw, 2rem) clamp(1rem, .5rem + 1.6vw, 1.75rem); box-shadow: var(--shadow-l); }
.plan__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; z-index: -2; filter: blur(1.5px) saturate(1.05); transform: scale(1.03); }
.plan__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-paper) 18%, transparent) 0%, color-mix(in srgb, var(--c-paper) 30%, transparent) 60%, color-mix(in srgb, var(--c-brand) 30%, transparent) 100%); }
#plan [data-scene="plancards"] { --pc-stage: transparent; --pc-tint: transparent; background: transparent; }
#plan [data-scene="plancards"] .pc-stage { background: transparent; border-color: transparent; box-shadow: none; }
/* a card fading to the front (or out with the rest) fades as a blank card and shows its words once whole, so no words
   ever sit on the words of the cards behind it (the scene writes each card's z-index and opacity on the card) */
#plan [data-scene="plancards"] .pc-card[style*="z-index: 5"][style*="opacity: 0."] > * { visibility: hidden; }
@media (max-width: 699.98px) {
  #plan [data-scene="plancards"] .pc-stage { height: 500px; }
  #plan [data-scene="plancards"] .pc-row { grid-template-columns: 26px minmax(0, 1fr) auto; }
  #plan [data-scene="plancards"] .pc-bars { display: none; }
}
#plan [data-scene="plancards"] .pc-stage::before { background: none; }
.plan__band > .stop { z-index: 6; }
.plan__cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .75rem 1.5rem; }
.plan__note { color: var(--c-ink-soft); font-size: .95rem; }

/* ---------- 03 three steps lit by the chat ---------- */
.how { position: relative; overflow: hidden; isolation: isolate; background: var(--c-brand); color: var(--c-on-ink); padding-block: var(--section-y); }
.how__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.how__veil { position: absolute; inset: 0; z-index: -1; background: linear-gradient(100deg, color-mix(in srgb, var(--c-brand) 95%, transparent) 0%, color-mix(in srgb, var(--c-brand) 88%, transparent) 52%, color-mix(in srgb, var(--c-brand) 72%, transparent) 100%); }
.how__in { display: grid; gap: clamp(2.5rem, 1.5rem + 4vw, 5rem); align-items: center; }
.how .head { margin-bottom: 2rem; }
.how__steps { list-style: none; margin: 0 0 1.6rem; padding: 0; display: grid; gap: .75rem; }
.how__step {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 1rem; padding: 1.05rem 1.25rem 1.15rem; border-radius: var(--radius-m);
  background: color-mix(in srgb, var(--c-navy-lifted) 45%, transparent); border: 1px solid color-mix(in srgb, var(--c-on-ink) 10%, transparent);
  transition: background-color .5s var(--ease-out), border-color .5s var(--ease-out), box-shadow .5s var(--ease-out);
}
.how__step[aria-current="step"] { background: var(--c-navy-lifted); border-color: color-mix(in srgb, var(--c-accent) 75%, transparent); box-shadow: 0 18px 36px -24px rgba(0, 0, 0, .6); }
.how__num { font: 600 2.1rem/1 var(--font-display); color: var(--c-accent-on-ink); padding-top: .1rem; }
.how__title { font-size: 1.3rem; color: var(--c-on-ink); }
.how__text { margin-top: .35rem; color: var(--c-brand-on-ink); font-size: 1rem; line-height: 1.55; }
.how__tag { display: inline-block; margin-top: .65rem; padding: .3rem .6rem; border-radius: 999px; font: 500 .8125rem/1.2 var(--font-ui); letter-spacing: .06em; text-transform: uppercase; color: var(--c-on-ink); background: color-mix(in srgb, var(--c-on-ink) 10%, transparent); }
@media (min-width: 960px) { .how__in { grid-template-columns: minmax(0, 1.12fr) minmax(330px, .88fr); } }

.phone { position: relative; width: min(100%, 344px); margin-inline: auto; border-radius: 44px; padding: 10px; background: var(--c-ink); box-shadow: 0 50px 90px -40px rgba(0, 0, 0, .75), inset 0 0 0 1px color-mix(in srgb, var(--c-on-ink) 14%, transparent); }
.phone__top { display: flex; align-items: center; gap: .7rem; padding: 16px 16px 12px; background: var(--c-card); border-radius: 34px 34px 0 0; border-bottom: 1px solid var(--c-line); color: var(--c-ink); }
.phone__avatar { width: 40px; height: 40px; border-radius: 12px; }
.phone__top b { display: block; font: 600 .98rem/1.2 var(--font-text); color: var(--c-brand); }
.phone__top small { display: block; font-size: .84rem; color: var(--c-ink-soft); }
.phone__screen { height: clamp(390px, 100svh - 360px, 470px); display: flex; flex-direction: column; justify-content: flex-end; gap: 8px; padding: 14px 12px 16px; overflow: hidden; background: var(--c-paper); border-radius: 0 0 34px 34px; color: var(--c-ink); }
.msg {
  max-width: 86%; align-self: flex-start; padding: .62rem .85rem; border-radius: 16px 16px 16px 5px; background: var(--c-card); box-shadow: var(--shadow-s);
  font-size: .95rem; line-height: 1.4; color: var(--c-ink);
  opacity: calc(var(--kit-in, 1) * (1 - var(--kit-out, 0))); transform: translateY(calc((1 - var(--kit-in, 1)) * 10px));
}
.msg--me { align-self: flex-end; border-radius: 16px 16px 5px 16px; background: var(--c-brand); color: var(--c-on-brand); }
.msg--chips { display: flex; gap: 6px; padding: 0; background: none; box-shadow: none; }
.msg--chips span { display: grid; place-items: center; min-width: 44px; height: 36px; padding: 0 .7rem; border-radius: 999px; background: var(--c-card); border: 1.5px solid var(--c-line); font-weight: 600; color: var(--c-brand); transition: background-color .3s, color .3s, border-color .3s; }
.msg--chips [data-kit-on] { background: var(--c-brand); border-color: var(--c-brand); color: var(--c-on-brand); }
.msg--typing { display: flex; gap: 5px; padding: .75rem .9rem; }
.msg--typing i { width: 7px; height: 7px; border-radius: 50%; background: var(--c-ink-soft); animation: msg-dot 1.1s infinite ease-in-out; }
.msg--typing i:nth-child(2) { animation-delay: .15s; } .msg--typing i:nth-child(3) { animation-delay: .3s; }
@keyframes msg-dot { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-4px); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .msg--typing i { animation: none; } }
.msg--bar { display: grid; gap: .55rem; width: 86%; }
.msg--bar span { font-weight: 600; color: var(--c-brand); }
.msg--bar i { display: block; height: 6px; border-radius: 6px; background: linear-gradient(90deg, var(--c-accent) calc(var(--kit-fill, 0) * 100%), var(--c-paper-alt) 0); }
.msg--plan { width: 92%; max-width: 92%; display: grid; gap: .35rem; padding: .85rem .95rem; border: 1px solid var(--c-line); }
.msg__label { font: 500 .8125rem/1 var(--font-ui); letter-spacing: .08em; text-transform: uppercase; color: var(--c-accent-text); }
.msg__big { font: 600 1.45rem/1.1 var(--font-display); color: var(--c-brand); }
.msg__big small { font: 400 .9rem var(--font-text); color: var(--c-ink-soft); }
.msg__bars { display: flex; align-items: flex-end; gap: 4px; height: 46px; margin-top: .25rem; }
.msg__bars i { flex: 1; height: max(3px, calc(var(--v) * .46px)); border-radius: 3px 3px 1px 1px; background: var(--c-brand); }
.msg__bars i:nth-child(n+9) { background: var(--c-accent); }
.msg__from { font-size: .86rem; color: var(--c-ink-soft); border-top: 1px solid var(--c-line); padding-top: .45rem; margin-top: .2rem; }

/* ---------- 04 one stage, four chapters ---------- */
.stage4__frame { position: relative; isolation: isolate; aspect-ratio: 2 / 3; border-radius: var(--radius-l); overflow: hidden; background: var(--c-brand); box-shadow: var(--shadow-l); }
.stage4__panel { position: absolute; inset: 0; background: var(--c-brand) 50% 50% / cover no-repeat; }
/* each panel's still behind its clip, so a panel reached at once (a tab, a key) never shows bare navy while its clip loads */
.stage4__panel--found { background-image: url("../../img/out-found-poster-960.webp"); background-position: 30% 50%; }
.stage4__panel--answer { background-image: url("../../img/out-answer-poster-960.webp"); background-position: 68% 50%; }
.stage4__panel--reviews { background-image: url("../../img/out-reviews-poster-960.webp"); background-position: 55% 50%; }
.stage4__panel--work { background-image: url("../../img/out-work-poster-960.webp"); }
@media (min-width: 700px) { .stage4__panel { background-position: 50% 50%; } }
.stage4__panel:focus-visible { outline-offset: -4px; }
.stage4__clip { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.stage4__panel::after { content: ""; position: absolute; inset: auto 0 0 0; height: 34%; background: linear-gradient(180deg, transparent, color-mix(in srgb, var(--c-brand) 55%, transparent)); pointer-events: none; }
.stage4__scene { position: absolute; z-index: 2; left: 14px; right: 14px; bottom: 70px; }
.stage4__more { position: absolute; z-index: 3; left: 14px; bottom: 16px; display: inline-flex; align-items: center; gap: .4em; min-height: 40px; padding: 0 1rem; border-radius: 999px; background: var(--c-card); color: var(--c-brand); font-weight: 600; font-size: .95rem; text-decoration: none; box-shadow: var(--shadow-m); }
.stage4__more[data-planned] { opacity: .96; }
.stage4__panel--found .stage4__clip { object-position: 30% 50%; }
.stage4__panel--answer .stage4__clip { object-position: 68% 50%; }
.stage4__panel--reviews .stage4__clip { object-position: 55% 50%; }
.stage4__panel--work .stage4__clip { object-position: 50% 50%; }
.stage4__tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .9rem; }
.stage4__tab {
  position: relative; overflow: hidden; display: grid; gap: .3rem; align-content: start; text-align: left; padding: .9rem 1rem 1.05rem;
  border-radius: var(--radius-m); border: 1px solid var(--c-line); background: var(--c-card); cursor: pointer; font: inherit; color: var(--c-ink);
  transition: border-color var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.stage4__tab b { font: 600 1.05rem/1.2 var(--font-display); color: var(--c-brand); }
.stage4__tab span { display: none; font-size: .93rem; line-height: 1.45; color: var(--c-ink-soft); }
.stage4__tab:hover { border-color: color-mix(in srgb, var(--c-brand) 35%, var(--c-line)); }
.stage4__tab[aria-selected="true"] { border-color: var(--c-brand); box-shadow: var(--shadow-m); }
.stage4__fill { position: absolute; left: 0; bottom: 0; height: 3px; width: calc(var(--kit-fill, 0) * 100%); background: var(--c-accent); }
.stage4__tab[aria-selected="true"] .stage4__fill { width: max(18%, calc(var(--kit-fill, 1) * 100%)); }
[data-kit-tabs-stop] .stop__play { display: none; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__play { display: inline; }
[data-kit-tabs-stop][aria-pressed="true"] .stop__pause { display: none; }
@media (min-width: 700px) {
  .stage4__frame { aspect-ratio: 16 / 10; }
  .stage4__scene { left: auto; right: auto; bottom: auto; top: 6%; width: min(360px, 42%); }
  .stage4__panel--found .stage4__scene { right: 4%; }
  .stage4__panel--answer .stage4__scene { left: 4%; }
  .stage4__panel--reviews .stage4__scene { left: 37%; top: 5%; }
  .stage4__panel--work .stage4__scene { left: 4%; }
  .stage4__panel--found .stage4__clip, .stage4__panel--answer .stage4__clip, .stage4__panel--reviews .stage4__clip, .stage4__panel--work .stage4__clip { object-position: 50% 50%; }
  .stage4__more { left: 22px; bottom: 20px; }
}
@media (min-width: 1080px) {
  .stage4__frame { aspect-ratio: 16 / 9; }
  .stage4__tabs { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .85rem; margin-top: 1rem; }
  .stage4__tab { padding: 1.05rem 1.15rem 1.25rem; }
  .stage4__tab span { display: block; }
}

/* ---------- 05 the calculator ---------- */
.worth__box {
  --calc-ink: var(--c-ink); --calc-ink-soft: var(--c-ink-soft); --calc-track: var(--c-paper-alt); --calc-fill: var(--c-accent);
  --calc-thumb: var(--c-card); --calc-thumb-edge: var(--c-brand); --calc-focus: var(--c-brand); --calc-surface: var(--c-card);
  --calc-font: var(--font-text); --calc-font-figure: var(--font-text); --calc-label-size: 1rem; --calc-value-size: 1.35rem;
  --calc-total-size: clamp(2.5rem, 1.4rem + 3.6vw, 3.9rem); --calc-figure-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); --calc-gap: 1.6rem; --calc-track-size: 8px;
  display: grid; gap: 1.75rem; padding: clamp(1.25rem, .8rem + 2vw, 2.25rem); border-radius: var(--radius-l); background: var(--c-card); border: 1px solid var(--c-line); box-shadow: var(--shadow-m);
}
.worth__controls { display: grid; align-content: center; }
.worth__controls .calc-slider__label { font-weight: 500; color: var(--c-ink); }
/* the numbers in Plex Sans: Fraunces draws its 3 with a flat top, and a small $3,200 reads as $5,200 */
.worth__controls .calc-slider__value { font-family: var(--font-text); font-weight: 600; font-variant-numeric: tabular-nums lining-nums; color: var(--c-brand); }
.worth__result { position: relative; display: grid; gap: 1rem; align-content: start; }
.worth__result .calc-total { color: var(--c-brand); }
.worth__result .calc-total b, .worth__result .calc-total strong { font-weight: 600; }
.worth__picture { position: relative; border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--c-line); }
.worth__picture .climb { display: block; width: 100%; height: auto; }
.worth__result .calc-figures { color: var(--c-brand); }
.worth__result .calc-note { font-size: .9rem; color: var(--c-ink-soft); }
.worth__stop { top: 0; right: 0; }
.worth__result .calc-total { padding-right: 52px; }
@media (max-width: 419.98px) { .worth__box { --calc-scale-size: .75rem; } }
@media (min-width: 960px) {
  .worth__box { grid-template-columns: minmax(300px, .8fr) minmax(0, 1.3fr); gap: clamp(2rem, 4vw, 3.5rem); }
  .worth__controls { padding-right: clamp(.5rem, 2vw, 2rem); border-right: 1px solid var(--c-line); }
}

/* the climb: the year's new business as a trail climbing to its summit */
.climb__sky-top { stop-color: var(--c-card); }
.climb__sky-low { stop-color: var(--c-paper); }
.climb__sky { fill: url(#climb-sky); }
.climb__far { fill: color-mix(in srgb, var(--c-brand) 12%, var(--c-paper)); }
.climb__hill { fill: var(--c-brand); }
.climb__trail-bed { fill: none; stroke: color-mix(in srgb, var(--c-accent) 45%, var(--c-brand)); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 1 8; }
.climb__trail { fill: none; stroke: var(--c-accent); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
.climb__mark { fill: var(--c-card); stroke: var(--c-accent); stroke-width: 2.5; transition: fill .25s var(--ease-out); }
.climb__mark[data-kit-on] { fill: var(--c-accent); stroke: var(--c-card); }
.climb__flag line { stroke: var(--c-brand); stroke-width: 3; stroke-linecap: round; }
.climb__flag path { fill: var(--c-accent); }
.climb__flag { opacity: 0; transition: opacity .35s var(--ease-out); }
.climb[data-built] .climb__flag { opacity: 1; }