/* home.css: places and sizes the home page's parts (plan.md, Home), with the tokens of system.css. */

/* ---------- #hero: words and picker beside the field clips in a glass sphere with an orbit ---------- */
.hero { position: relative; overflow: hidden; padding: clamp(24px, 3.4vw, 52px) 0 clamp(52px, 6vw, 92px); }
.hero__glow i { position: absolute; border-radius: 50%; pointer-events: none; }
.hero__glow i:nth-child(1) { width: 640px; height: 640px; right: -140px; top: -140px; background: radial-gradient(circle, color-mix(in srgb, var(--c-brand) 22%, transparent), transparent 66%); }
.hero__glow i:nth-child(2) { width: 520px; height: 520px; right: 26%; bottom: -60px; background: radial-gradient(circle, color-mix(in srgb, var(--c-purple) 14%, transparent), transparent 66%); }
.hero__grid { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .94fr); gap: clamp(28px, 4.2vw, 76px); align-items: center; }
.hero__copy { container-type: inline-size; min-width: 0; }
.hero__title { font: 900 min(3.3rem, 10.2cqi) / .98 var(--font-display); text-transform: uppercase; letter-spacing: .003em; color: var(--c-teal-head); }
.hero__line, .hero__field { display: block; }
.hero__field {
  white-space: nowrap; color: var(--c-purple);
  opacity: calc(1 - var(--kit-swap, 0)); transform: translateY(calc(var(--kit-swap, 0) * .14em)); filter: blur(calc(var(--kit-swap, 0) * 4px));
}
.hero__idea { margin-top: clamp(14px, 1.6vw, 20px); font: 800 clamp(1.08rem, .98rem + .5vw, 1.32rem) / 1.35 var(--font-ui); color: var(--c-purple); }
.hero__lead { margin-top: 12px; max-width: 34em; color: var(--c-ink-soft); }
.hero__lead strong { color: var(--c-ink); }
.hero__picker { margin-top: clamp(20px, 2.4vw, 28px); max-width: 540px; }

.hero__stage { position: relative; width: 100%; max-width: 580px; aspect-ratio: 1; justify-self: end; }
.hero__stop { top: 5%; right: 5%; }
.orbit { position: absolute; inset: 0; pointer-events: none; }
.orbit__ring { position: absolute; inset: 3.5%; border-radius: 50%; border: 1.5px solid color-mix(in srgb, var(--c-brand) 34%, transparent); transform: rotate(var(--turn, 0deg)); transition: transform 1.4s var(--ease-in-out); }
.orbit__ring::before { content: ''; position: absolute; inset: -3.4%; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--c-purple) 20%, transparent); }
.orbit__arm { position: absolute; inset: 0; transform: rotate(var(--a)); }
.orbit__s {
  --s: 20px; position: absolute; left: 50%; top: 0; margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  transform: rotate(calc(-1 * (var(--a) + var(--turn, 0deg)))); transition: transform 1.4s var(--ease-in-out), width .7s var(--ease-out), height .7s var(--ease-out), margin .7s var(--ease-out);
}
.hero:has(.hero__slide:nth-of-type(1)[data-kit-on]) .orbit__arm:nth-child(1) .orbit__s,
.hero:has(.hero__slide:nth-of-type(2)[data-kit-on]) .orbit__arm:nth-child(2) .orbit__s,
.hero:has(.hero__slide:nth-of-type(3)[data-kit-on]) .orbit__arm:nth-child(3) .orbit__s,
.hero:has(.hero__slide:nth-of-type(4)[data-kit-on]) .orbit__arm:nth-child(4) .orbit__s,
.hero:has(.hero__slide:nth-of-type(5)[data-kit-on]) .orbit__arm:nth-child(5) .orbit__s,
.hero:not(:has([data-kit-on])) .orbit__arm:nth-child(1) .orbit__s { --s: 34px; }

/* the kit's header (kit\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); }

/* each slide: the clip in a glass sphere, its card hanging at the sphere's lower left */
.hero__disc {
  position: absolute; inset: 9.5%; border-radius: 50%; overflow: hidden; isolation: isolate; background: var(--c-paper-alt);
  clip-path: circle(50% at 50% 50%);
}
/* the sphere's rim and its shadow, shared by every slide (the clip-path above cuts anything drawn outside the disc) */
.orbit::after {
  content: ''; position: absolute; inset: 9.5%; border-radius: 50%;
  box-shadow: 0 0 0 7px color-mix(in srgb, var(--c-paper) 85%, transparent), 0 0 0 8px color-mix(in srgb, var(--c-brand) 18%, transparent), 0 44px 80px -30px color-mix(in srgb, var(--c-ink) 55%, transparent);
}
.hero__disc::after {
  content: ''; position: absolute; inset: 0; z-index: 2; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--c-paper) 30%, transparent), transparent 34%), radial-gradient(circle at 72% 88%, color-mix(in srgb, var(--c-brand) 22%, transparent), transparent 46%);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c-paper) 50%, transparent), inset -18px -24px 60px color-mix(in srgb, var(--c-ink) 22%, transparent);
}
.hero__slide video { object-position: var(--pos, 50% 50%); }
/* the kit paints each slide's poster behind its frame; here the frame is the square around the sphere, so only the
   sphere shows a picture (the first slide's poster is its img.kit-first, inside the sphere) */
.hero__slide { background-image: none !important; }
/* the sphere clips its own clip, so the slide may let its card's shadow fall outside it (the kit hides a slide's overflow) */
.hero [data-kit-slide].hero__slide { overflow: visible; }
/* while the next field moves in, the last field's card leaves at once, so two cards never show their words together */
.hero__slide[data-prev] .hero__card { opacity: 0; }
.hero__card {
  position: absolute; left: 0; bottom: 11%; z-index: 3; max-width: min(78%, 340px);
  opacity: var(--kit-in, 1); transform: translateY(calc((1 - var(--kit-in, 1)) * 16px));
}

@media (max-width: 899px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); }
  .hero__stage { justify-self: center; max-width: 440px; }
  .hero__picker { max-width: none; }
}

/* ---------- #plan: the free plan tour over a British town ---------- */
.tour__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.tour__tab {
  position: relative; display: flex; align-items: flex-start; gap: 14px; overflow: hidden; padding: 16px 18px 20px; text-align: left; cursor: pointer;
  border-radius: var(--radius-m); border: 1px solid var(--c-line); background: var(--c-paper); color: var(--c-ink); font: inherit;
  transition: box-shadow var(--dur-fast), border-color var(--dur-fast);
}
.tour__tab:hover { border-color: color-mix(in srgb, var(--c-brand) 50%, transparent); }
.tour__tab[aria-selected="true"] { border-color: transparent; box-shadow: var(--shadow-m), inset 0 0 0 2px var(--c-brand); }
.tour__num { --s: 34px; }
.tour__words b { display: block; font: 900 .98rem / 1.2 var(--font-display); text-transform: uppercase; letter-spacing: .04em; }
.tour__words > span { display: block; margin-top: 4px; font-size: var(--fs-small); line-height: 1.4; color: var(--c-ink-soft); }
.tour__bar { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--c-brand); transform-origin: 0 50%; transform: scaleX(0); }
.tour__tab[aria-selected="true"] .tour__bar { transform: scaleX(var(--kit-fill, 1)); }
.tour__stage { position: relative; height: clamp(470px, 40vw, 540px); border-radius: 28px; overflow: hidden; isolation: isolate; background: var(--c-ink); }
.tour__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.tour__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 60% 70% at 50% 50%, color-mix(in srgb, var(--c-ink) 34%, transparent), color-mix(in srgb, var(--c-ink) 12%, transparent)); }
.tour__panel { position: absolute; inset: 0; display: grid; place-items: center; padding: 28px 24px; }
.tour__panel:focus-visible { outline-offset: -6px; }
.tour__panel [data-scene] { width: 100%; }
/* yourpart's phone writes in --c-on-brand on ink; this site's on-brand is the dark ink that teal fills take, so inside
   the phone it is paper, and the chosen chip keeps dark words on its teal */
#plan [data-scene="yourpart"] .yp-phone { --c-on-brand: var(--c-paper); }
#plan [data-scene="yourpart"] .yp-chips span.is-on { color: var(--c-ink); }
.tour__stop { top: 16px; right: 16px; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 22px; margin-top: var(--space-4); }
.cta-row .picker__note { margin: 0; }
@media (max-width: 799px) {
  .tour__tabs { gap: 8px; }
  .tour__tab { flex-direction: column; gap: 8px; padding: 12px 10px 16px; }
  .tour__num { --s: 28px; }
  .tour__words b { font-size: .8rem; letter-spacing: .02em; }
  .tour__words > span { display: none; }
  .tour__stage { height: 560px; border-radius: 22px; }
  .tour__panel { padding: 18px 12px; }
}

/* ---------- #how: three steps over a lunch break ---------- */
.steps { position: relative; isolation: isolate; overflow: hidden; min-height: 600px; border-radius: 28px; background: var(--c-ink); }
.steps__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; z-index: -2; transform: scale(1.36); }
.steps__shade { position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 34% 80% at 50% 58%, color-mix(in srgb, var(--c-ink) 52%, transparent), transparent 80%), linear-gradient(180deg, transparent 55%, color-mix(in srgb, var(--c-ink) 40%, transparent)); }
.steps__stop { top: 16px; right: 16px; }
/* the clip is drawn 1.36 times larger so the two men sit wider apart, and the column stands in the gap between their
   faces (the left face reaches 300 px left of the clip's centre, the right one 165 px right of it when he leans in to
   eat), about 60 px clear of each, so no card ever covers a face */
.steps__seq { position: relative; display: grid; justify-items: stretch; width: min(310px, calc(100% - 32px)); margin: 0 auto 0 calc(50% - 236px); padding: 44px 0; list-style: none; opacity: calc(1 - var(--kit-out, 0)); }
.step { align-items: flex-start; gap: 14px; padding: 16px 18px 16px 14px; opacity: 0; transform: translateY(14px) scale(.98); }
.step[data-kit-on] { opacity: var(--kit-in); transform: translateY(calc((1 - var(--kit-in)) * 14px)) scale(calc(.98 + var(--kit-in) * .02)); }
.step__dot { --s: 38px; font-size: 17px; }
.step__body { min-width: 0; flex: 1; }
.step__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font: 900 1.05rem / 1.2 var(--font-display); text-transform: uppercase; letter-spacing: .02em; }
.step__time { font: 700 .8125rem / 1.2 var(--font-ui); text-transform: none; letter-spacing: 0; color: var(--c-brand-text); }
.step__ask { margin-top: 10px; display: inline-block; padding: 8px 12px; border-radius: 12px 12px 12px 4px; background: var(--c-paper-alt); font: 700 .9rem / 1.3 var(--font-ui); }
.step__chips { display: flex; gap: 6px; margin-top: 8px; }
.step__chips span { display: grid; place-items: center; min-width: 40px; height: 34px; padding: 0 8px; border-radius: 10px; border: 1.5px solid var(--c-line); background: var(--c-paper); font: 900 .95rem / 1 var(--font-display); }
.step__chips .step__pick[data-kit-on] { border-color: var(--c-brand); background: var(--c-brand); color: var(--c-on-brand); transform: scale(calc(1 + (1 - var(--kit-in)) * .12)); }
.step__ready { margin-top: 10px; font: 800 .95rem / 1.3 var(--font-ui); color: var(--c-ink); }
.step__ticks { display: grid; gap: 4px; margin: 8px 0 0; padding: 0; list-style: none; }
.step__ticks li { display: flex; align-items: center; gap: 8px; font: 600 .875rem / 1.3 var(--font-ui); color: var(--c-ink-soft); opacity: .3; }
.step__ticks li[data-kit-on] { opacity: calc(.3 + var(--kit-in) * .7); }
.step__ticks svg { flex: none; width: 16px; height: 16px; color: var(--c-brand-text); }
.step__booking { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 10px; padding: 10px 12px; border-radius: 12px; background: color-mix(in srgb, var(--c-accent) 16%, var(--c-paper)); font: 600 .875rem / 1.3 var(--font-ui); color: var(--c-ink); opacity: 0; }
.step__booking[data-kit-on] { opacity: var(--kit-in); transform: translateY(calc((1 - var(--kit-in)) * 8px)); }
.step__booking b { font-weight: 800; }
.step__new { width: 10px; height: 10px; border-radius: 50%; background: var(--c-red); box-shadow: 0 0 0 calc((1 - var(--kit-in, 1)) * 8px) color-mix(in srgb, var(--c-red) 30%, transparent); }
.step__rod { justify-self: start; width: 4px; height: 26px; margin-left: 31px; border-radius: 2px; background: color-mix(in srgb, var(--c-paper) 60%, transparent); transform-origin: 50% 0; transform: scaleY(0); }
.step__rod[data-kit-on] { transform: scaleY(var(--kit-in)); background: linear-gradient(var(--c-brand), var(--c-blue)); }
.step__rod + .step + .step__rod[data-kit-on] { background: linear-gradient(var(--c-blue), var(--c-accent)); }
@media (max-width: 699px) {
  .steps { min-height: 0; padding-top: 230px; border-radius: 22px; }
  .steps__bg { height: 280px; bottom: auto; object-position: 50% 20%; transform: none; }
  .steps__shade { background: linear-gradient(180deg, transparent 0 150px, var(--c-ink) 280px); }
  .steps__seq { width: min(410px, calc(100% - 32px)); margin: 0 auto; padding: 0 0 24px; opacity: calc(1 - var(--kit-out, 0) * .7); }
  /* on the phone the three steps stand whole under the clip from the start; inside them the pick, the ticks and the
     rods still play in turn */
  .step, .step[data-kit-on] { opacity: 1; transform: none; }
  .step__booking, .step__booking[data-kit-on] { opacity: 1; transform: none; }
}

/* ---------- #worth: the calculator ---------- */
.worth__frame { position: relative; }
/* nothing in the calculator's frame is blurred live (filters, backdrop blur): its picture must look the same each time it comes back */
.worth__stop { top: 16px; right: 16px; background: var(--c-paper); border-color: var(--c-line); backdrop-filter: none; -webkit-backdrop-filter: none; }
.worth__box {
  display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); overflow: hidden; border-radius: 28px; background: var(--c-paper); border: 1px solid var(--c-line); box-shadow: var(--shadow-l);
  --calc-fill: var(--c-brand); --calc-thumb-edge: var(--c-brand); --calc-track: color-mix(in srgb, var(--c-ink) 12%, transparent); --calc-focus: var(--c-brand-text);
  --calc-value-size: 1.5rem; --calc-total-size: 3.3rem; --calc-figure-size: 1.7rem; --calc-font-figure: var(--font-display); --calc-gap: 30px; --calc-thumb-size: 30px; --calc-track-size: 8px;
}
.worth__controls { display: grid; align-content: center; padding: 44px 38px; background: var(--c-paper-alt); }
.worth__box .calc-slider__label { font-weight: 800; }
.worth__box .calc-slider__value { font-family: var(--font-display); font-weight: 900; color: var(--c-brand-text); }
.worth__box .calc-scale { color: var(--c-ink-soft); }
.worth__result { position: relative; display: grid; align-content: center; gap: 10px; padding: 40px 42px 34px; background: radial-gradient(circle at 92% 8%, color-mix(in srgb, var(--c-accent) 12%, transparent), transparent 42%), var(--c-paper); }
.worth__box .calc-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; }
.worth__box .calc-total__value { font-weight: 900; color: var(--c-ink); }
.worth__box .calc-total__label { font: 800 1.05rem / 1.3 var(--font-ui); color: var(--c-purple); }
.worth__picture { margin: 4px 0 6px; }
.worth__box .calc-figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.worth__box .calc-figure { padding: 14px 16px; border-radius: var(--radius-m); background: var(--c-paper-alt); }
.worth__box .calc-figure__value { font-weight: 900; color: var(--c-brand-text); }
.worth__box .calc-figure__label { display: block; margin-top: 2px; font: 700 var(--fs-small) / 1.3 var(--font-ui); color: var(--c-ink-soft); }
.worth__box .calc-note { font-size: var(--fs-small); color: var(--c-ink-soft); }
.year { display: block; width: 100%; overflow: visible; }
.year__base { fill: none; stroke: color-mix(in srgb, var(--c-brand) 36%, transparent); stroke-width: 4; stroke-dasharray: 0 11; stroke-linecap: round; }
.year__rod { fill: none; stroke: var(--c-brand); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 100 100; stroke-dashoffset: calc(100 - var(--rod, 100)); }
.year__ball { fill: var(--c-paper); stroke: color-mix(in srgb, var(--c-brand) 62%, transparent); stroke-width: 2; }
.year__m[data-kit-on] .year__ball { fill: url(#year-glass); stroke: none; }
.year__halo { fill: none; stroke: var(--c-brand); stroke-width: 2; opacity: 0; transform-box: fill-box; transform-origin: center; }
.year__m[data-kit-on] .year__halo { opacity: calc((1 - var(--kit-in, 1)) * .8); transform: scale(calc(1 + var(--kit-in, 1) * .9)); }
.year__big { fill: url(#year-gold); }
.year__glow { fill: url(#year-halo); }
.year__end { opacity: var(--end, 1); transition: opacity .6s var(--ease-out); }
.year__big-label { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: .06em; fill: var(--c-on-brand); }
.year__tag { font-family: var(--font-ui); font-weight: 800; fill: var(--c-ink); }
@media (max-width: 899px) {
  .worth__box { grid-template-columns: minmax(0, 1fr); --calc-total-size: 2.6rem; --calc-figure-size: 1.45rem; }
  /* the stop icon keeps the frame's top right corner: the first slider's row starts under it */
  .worth__controls { padding: 66px 22px 30px; }
  .worth__result { padding: 28px 22px; }
}
@media (max-width: 359px) {
  .worth__box .calc-scale__mark:nth-child(3) { display: none; }
}

/* ---------- #outcomes: four large cards over footage, each in its own color ---------- */
.ocards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ocards__stop { top: 14px; right: 14px; }
.ocard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; min-height: 560px; border-radius: 28px; background: var(--c-ink); color: var(--c-paper); }
.ocard--blue { --c-brand: var(--c-blue); --c-brand-dark: var(--c-blue-dark); --c-brand-text: var(--c-blue-text); --c-brand-light: color-mix(in srgb, var(--c-blue) 14%, var(--c-paper)); }
.ocard--orange { --c-brand: var(--c-accent); --c-brand-dark: var(--c-orange-dark); --c-brand-text: var(--c-accent-text); --c-brand-light: color-mix(in srgb, var(--c-accent) 14%, var(--c-paper)); }
.ocard--purple { --c-brand: var(--c-purple); --c-brand-dark: var(--c-purple-deep); --c-brand-text: var(--c-purple); --c-brand-light: color-mix(in srgb, var(--c-purple) 12%, var(--c-paper)); --c-on-brand: var(--c-paper); }
.ocard__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.ocard--blue .ocard__bg { object-position: 0% 40%; }
.ocard--purple .ocard__bg { object-position: 50% 50%; }
.ocard__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, color-mix(in srgb, var(--c-ink) 10%, transparent) 0%, transparent 34%, color-mix(in srgb, var(--c-ink) 90%, transparent) 88%); }
.ocard__scene { position: absolute; top: 24px; width: min(340px, calc(100% - 48px)); }
.ocard__scene--left { left: 24px; }
.ocard__scene--right { right: 24px; }
.ocard__scene [data-scene] { width: 100%; }
.ocard__text { position: relative; padding: 26px 30px 30px; }
.ocard__text::before { content: ''; display: block; width: 46px; height: 5px; margin-bottom: 16px; border-radius: 3px; background: var(--c-brand); box-shadow: 0 0 18px color-mix(in srgb, var(--c-brand) 70%, transparent); }
.ocard__title { font: 900 clamp(1.4rem, 1.2rem + .6vw, 1.75rem) / 1.05 var(--font-display); text-transform: uppercase; }
.ocard__text p { margin-top: 10px; max-width: 44ch; color: color-mix(in srgb, var(--c-paper) 88%, transparent); }
.ocard__link { display: inline-flex; align-items: center; gap: 10px; margin-top: 16px; padding: 6px 0; color: var(--c-paper); font: 900 .8125rem / 1 var(--font-display); letter-spacing: var(--track-caps); text-transform: uppercase; text-decoration: none; }
.ocard__link::after { content: ''; width: 7px; height: 7px; border-top: 2.5px solid currentColor; border-right: 2.5px solid currentColor; transform: rotate(45deg); }
@media (max-width: 899px) {
  .ocards { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .ocard { min-height: 600px; border-radius: 22px; }
  .ocard__scene { top: 16px; left: 16px; right: 16px; width: auto; max-width: 360px; }
  .ocard__text { padding: 22px 22px 24px; }
  .ocard--purple .ocard__bg { object-position: 100% 50%; }
}

/* ---------- #values: the technology at work, and the promises on paper ---------- */
.values__band { position: relative; isolation: isolate; display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); min-height: 580px; border-radius: 28px; overflow: hidden; box-shadow: var(--shadow-l); background: var(--c-purple-deep); }
.values__stop { top: 16px; right: 16px; }
.values__tech { position: relative; isolation: isolate; min-height: 420px; }
.values__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 30% 50%; z-index: -2; }
.values__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--c-purple-deep) 30%, transparent), color-mix(in srgb, var(--c-purple-deep) 72%, transparent)); }
/* the scene's own style sets position: relative on its host; the band's box wins here */
.values__tech > .values__wyw { position: absolute; inset: 0 34px 54px 26px; }
.values__paper {
  position: relative; display: grid; align-content: center; gap: 24px; margin-left: -26px; padding: 48px 46px 44px 70px;
  background: var(--c-paper-warm) url('../../img/paper-1920.webp') center / cover;
  clip-path: polygon(26px 0, 100% 0, 100% 100%, 26px 100%, 14px 97%, 24px 93%, 9px 89%, 20px 85%, 6px 80%, 18px 76%, 4px 71%, 16px 66%, 7px 61%, 22px 56%, 10px 51%, 19px 46%, 3px 41%, 15px 36%, 8px 31%, 21px 26%, 5px 21%, 17px 16%, 9px 11%, 23px 7%, 12px 3%);
}
.promises { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; opacity: calc(1 - var(--kit-out, 0) * .6); }
.promise { display: flex; align-items: flex-start; gap: 14px; font: 800 clamp(1.05rem, .98rem + .35vw, 1.2rem) / 1.35 var(--font-ui); color: var(--c-ink); }
.promise__tick { flex: none; width: 30px; height: 26px; margin-top: -1px; }
.promise__tick path { fill: none; stroke: var(--c-brand-text); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 30 30; stroke-dashoffset: 30; }
.promise[data-kit-on] .promise__tick path { stroke-dashoffset: calc(30 * (1 - var(--kit-in, 1))); }
.promise span { padding: 0 2px; background: linear-gradient(transparent 60%, color-mix(in srgb, var(--c-accent) 34%, transparent) 60%) no-repeat 0 0 / 0 100%; }
.promise[data-kit-on] span { background-size: calc(var(--kit-in, 1) * 100%) 100%; }
.review { margin: 6px 0 0; padding: 18px 20px 16px; max-width: 460px; border-radius: var(--radius-m); background: var(--c-paper); box-shadow: var(--shadow-m); transform: rotate(-1.2deg); }
.review__stars { display: flex; gap: 3px; }
.review__stars i { width: 18px; height: 18px; background: var(--c-accent); clip-path: polygon(50% 0, 61.8% 35.4%, 100% 35.4%, 69.1% 57.3%, 80.9% 92.7%, 50% 70.8%, 19.1% 92.7%, 30.9% 57.3%, 0 35.4%, 38.2% 35.4%); }
.review__quote { margin: 8px 0 0; }
.review__quote p { font: 700 1.02rem / 1.45 var(--font-text); color: var(--c-ink); }
.review__by { margin-top: 8px; font-size: var(--fs-small); color: var(--c-ink-soft); }
.review__by b { color: var(--c-ink); }
@media (max-width: 899px) {
  .values__band { grid-template-columns: minmax(0, 1fr); border-radius: 22px; }
  .values__tech { min-height: 440px; }
  .values__paper { margin: -22px 0 0; padding: 50px 24px 30px;
    clip-path: polygon(0 16px, 4% 7px, 9% 15px, 14% 4px, 19% 13px, 25% 6px, 30% 16px, 36% 3px, 41% 11px, 47% 6px, 52% 17px, 58% 5px, 63% 12px, 69% 2px, 74% 14px, 80% 7px, 85% 17px, 91% 4px, 96% 12px, 100% 6px, 100% 100%, 0 100%); }
  .values__tech > .values__wyw { inset: 0 16px 66px 16px; }
}

/* ---------- #who: six kinds of business and many more ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 290px; gap: 16px; }
.tile { position: relative; isolation: isolate; display: block; overflow: hidden; border-radius: 22px; background: var(--c-ink); color: var(--c-paper); text-decoration: none; }
.tile--wide { grid-column: span 2; }
.tile__img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out); }
.tile:hover .tile__img { transform: scale(1.045); }
.tile__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, transparent 32%, color-mix(in srgb, var(--c-ink) 88%, transparent) 100%); }
.tile::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(300px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--c-brand) 34%, transparent), transparent 62%); }
.tile:hover::after { opacity: 1; }
.tile__body { position: absolute; left: 22px; right: 76px; bottom: 20px; }
.tile__title { display: block; font: 900 clamp(1.15rem, 1rem + .5vw, 1.4rem) / 1.08 var(--font-display); text-transform: uppercase; }
.tile__fields { display: block; margin-top: 6px; font: 600 .9rem / 1.4 var(--font-ui); color: color-mix(in srgb, var(--c-paper) 90%, transparent); }
.tile__go { --s: 42px; position: absolute; right: 18px; bottom: 18px; }
.tile__go::before { content: ''; width: 8px; height: 8px; border-top: 2.5px solid var(--c-on-brand); border-right: 2.5px solid var(--c-on-brand); transform: translateX(-2px) rotate(45deg); }
.tile--more { grid-column: 1 / -1; display: flex; align-items: center; gap: 22px; padding: 22px 26px; background: var(--c-brand-light); color: var(--c-ink); }
.tile--more .tile__body { position: static; flex: 1; }
.tile--more .tile__fields { color: var(--c-ink-soft); font-size: 1rem; }
.tile__more-spheres { display: flex; flex: none; }
.tile__more-spheres .sphere { --s: 30px; margin-left: -8px; }
.tile__more-spheres .sphere:first-child { margin-left: 0; }
.tile__btn { flex: none; }
.tiles:has(.tile--more) { grid-template-rows: 290px 290px auto; }
@media (max-width: 899px) {
  .tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 240px; }
  .tiles:has(.tile--more) { grid-template-rows: none; }
}
@media (max-width: 559px) {
  .tiles { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
  .tile--wide { grid-column: auto; }
  .tile--more { flex-wrap: wrap; }
  .tile__btn { width: 100%; }
}

/* ---------- #faq ---------- */
.faqpart__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: clamp(28px, 5vw, 64px); align-items: start; }
.faqpart__head { position: sticky; top: 110px; }
.faqpart__head .lede a { color: var(--c-purple); font-weight: 800; }
@media (max-width: 899px) { .faqpart__grid { grid-template-columns: minmax(0, 1fr); } .faqpart__head { position: static; text-align: center; } }

/* ---------- #close: the last push, over a warm welcome at the door ---------- */
.closeband { position: relative; isolation: isolate; overflow: hidden; padding: clamp(84px, 10vw, 140px) 0 clamp(110px, 12vw, 170px); color: var(--c-paper); background: var(--c-purple-deep); }
.closeband__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 75% 35%; }
.closeband__shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, color-mix(in srgb, var(--c-purple-deep) 94%, transparent) 0%, color-mix(in srgb, var(--c-purple-deep) 82%, transparent) 40%, color-mix(in srgb, var(--c-purple-deep) 10%, transparent) 70%); }
.closeband__stop { top: 20px; right: 20px; }
.closeband__copy { max-width: 540px; }
.closeband__title { text-align: left; color: var(--c-paper); font-size: clamp(2rem, 1.3rem + 2.4vw, 3.1rem); }
.closeband__lede { color: var(--c-on-purple-soft); font-weight: 700; }
.picker--close { margin-top: 26px; }
@media (max-width: 699px) {
  .closeband { padding-top: 290px; }
  .closeband__bg { height: 330px; bottom: auto; object-position: 80% 30%; }
  .closeband__shade { background: linear-gradient(180deg, transparent 0 170px, var(--c-purple-deep) 320px); }
}