/* Industry landing v4 — docs/copy/landings/handwerk-v4-ui.md. Home tokens and components only:
   neutral, warm (the circle), sky (icons, terms), green (the gain), red (only the «what it costs» mark). */

.v4 { --v4-max: 1180px; }
.v4 .icon, .v4 .icon svg, .v4-ic svg, .v4-chip__ic svg { display: block; }
.v4 .icon svg, .v4-ic svg, .v4-chip__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.v4-sec { scroll-margin-top: 76px; }
.v4 .wd__head h2 { font-size: clamp(34px, 5vw, 72px); max-width: 16ch; }
.v4 .wd__intro { max-width: 46ch; }
.v4-center { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 48px); }
.v4-card { border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); }

/* ---------- 1 · hero: fact chips and the note under the button ---------- */
.v4-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: calc(28 * var(--k, 1px)) 0 0; padding: 0; list-style: none; pointer-events: auto; }
.v4-chip { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; background: rgba(255, 255, 255, .72);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), 0 4px 12px -8px rgba(var(--shade), .35); font: 500 14px/1 var(--font); color: var(--ink); white-space: nowrap; }
.v4-chip__ic { width: 16px; height: 16px; color: var(--sky-ink); }
.v4-chip__short { display: none; }
.v4-ctanote { position: absolute; z-index: 10; left: var(--bx, 75%); top: calc(var(--by, 50%) - var(--bh, 76px) / 2 - 12px); width: min(280px, 80vw); margin: 0;
  transform: translate(-50%, -100%); text-align: center; font-size: 14px; line-height: 1.4; color: var(--text-2); pointer-events: none; }
@media (max-width: 899px), (max-aspect-ratio: 4/5) {
  .v4-chip { height: 32px; font-size: 13px; }
  .v4-chip__long { display: none; }
  .v4-chip__short { display: inline; }
  .v4-chips { margin-top: 14px; gap: 6px; }
  .v4-ctanote { font-size: 13px; }
}

/* ---------- 2 · problem: three cards ---------- */
.v4-grid3 { display: grid; gap: 20px; max-width: var(--v4-max); margin: 0 auto; }
@media (min-width: 600px) and (max-width: 1023px) { .v4-grid3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .v4-grid3 > :last-child { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .v4-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 599px) { .v4-grid3 { gap: 12px; } }
.v4-pain { position: relative; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 32px; transition: transform var(--d-micro) var(--e-out), box-shadow var(--d-micro); }
@media (hover: hover) { .v4-pain:hover { transform: translateY(-4px); box-shadow: var(--shadow-2); } }
@media (max-width: 599px) { .v4-pain { padding: 24px; } }
.v4-ic { display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; border-radius: 50%; background: var(--sky-tint); color: var(--sky-ink); }
.v4-pain__n { position: absolute; top: 32px; right: 32px; font: 600 15px/1 var(--font); color: var(--text-3); font-variant-numeric: tabular-nums; }
.v4-pain h3 { margin: 8px 0 0; font: 600 clamp(20px, 1.8vw, 24px)/1.25 var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.v4-pain p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.v4-pain .v4-pain__cost { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding-top: 16px; border-top: 1px solid rgba(var(--shade), .08); font: 600 16px/1.4 var(--font); color: var(--ink); }
.v4-pain__x { display: grid; place-items: center; flex: none; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: var(--negative); color: #fff; }

/* ---------- 3 · solution: 2 × 2 cards of the home page, two new objects ---------- */
.v4-solve { max-width: 1376px; margin: 0 auto; }
.v4-solve .wd-card__title { font-size: clamp(23px, 2.2vw, 28px); }
.v4-solve__text { margin: 0; font-size: 16px; line-height: 1.55; color: rgba(33, 33, 33, .78); max-width: 52ch; }
/* desktop (owner 18.10: «квадратные карточки, идут с поворотом, чуть со смещением»): four square cards in two columns,
   each one slightly tilted (left and right in turn) and the right column set lower, so the grid is loose, not strict.
   Separate white cards, the colour only in the frame: sky · warm on the diagonal. The tilt sits on the card wrapper,
   the entrance animates the card inside it */
@media (min-width: 900px) {
  .v4-solve { --off: clamp(56px, 6vw, 96px); max-width: 1180px; column-gap: clamp(32px, 4vw, 64px); row-gap: clamp(32px, 3.4vw, 52px); padding-bottom: var(--off); }
  .v4-solve .wd-card { rotate: -1.6deg; }
  .v4-solve .wd-card:nth-child(2) { rotate: 1.4deg; translate: 0 var(--off); }
  .v4-solve .wd-card:nth-child(3) { rotate: 1.1deg; }
  .v4-solve .wd-card:nth-child(4) { rotate: -1.3deg; translate: 0 var(--off); }
  .v4-solve .wd-card__in { aspect-ratio: 1 / 1; min-height: 0; height: auto; padding: 10px; background: #fff; border: 1px solid rgba(var(--shade), .07); box-shadow: var(--shadow-2); }   /* square, taller only when the text needs it */
  .v4-solve .wd-vis { flex: 1; min-height: 200px; place-items: center; padding: clamp(16px, 2vw, 28px); border-radius: calc(var(--r-xl) - 10px); overflow: hidden;
    background: radial-gradient(110% 90% at 100% 0%, rgba(244, 180, 140, .55), rgba(244, 180, 140, 0) 66%), linear-gradient(160deg, #fff, var(--paper)); }
  .v4-solve .wd-card:nth-child(1) .wd-vis, .v4-solve .wd-card:nth-child(4) .wd-vis {
    background: radial-gradient(110% 90% at 0% 100%, rgba(191, 211, 234, .95), rgba(191, 211, 234, 0) 70%), linear-gradient(160deg, #fff, var(--paper)); }
  .v4-solve .wd-panel { width: min(100%, 440px); }
  .v4-solve .wd-card__text { flex: none; gap: 10px; padding: 22px clamp(14px, 1.8vw, 26px) 24px; }
  .v4-solve .wd-card__ic { background: var(--acc-tint); }
  .v4-solve .wd-card__title { font-size: clamp(21px, 1.9vw, 27px); }
  .v4-solve .v4-solve__text { font-size: 15.5px; }
}
/* squares under 1200 px: the chat keeps one question and one answer, so it fits its frame */
@media (min-width: 900px) and (max-width: 1199px) { .v4-solve .wd-chat__list > :nth-child(n+3) { display: none; } .v4-solve .wd-vis { flex: none; min-height: 256px; } .v4-solve .wd-card__in { aspect-ratio: auto; } }
.v4-sms { width: min(100%, 360px); padding: 16px 18px; }
.v4-sms__top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.v4-sms__top small { color: var(--text-3); font-size: 12.5px; }
.v4-sms__app { display: grid; place-items: center; width: 30px; height: 30px; padding: 7px; border-radius: 9px; background: var(--positive); color: #fff; }
.v4-sms__kind { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 5px 10px 5px 8px; border-radius: 999px; background: var(--warm-tint); color: var(--warm-ink); font: 600 13px/1 var(--font); }
.v4-sms__kind .icon { width: 15px; height: 15px; }
.v4-sms__line { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.v4-sms__line:first-of-type { font-weight: 600; }
/* object library (18.10): status, approval, reminder, waiting list, review, documents — same panel, chips and tones as the home objects */
.v4-status, .v4-approve, .v4-remind, .v4-wait, .v4-review, .v4-docs { width: min(100%, 380px); padding: 16px 18px; }
.v4-status__steps, .v4-wait__list, .v4-docs__list { display: grid; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.v4-status__steps li, .v4-docs__list li, .v4-wait__list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); align-items: center; gap: 10px; font-size: 15px; line-height: 1.3; }
.v4-status__steps i, .v4-docs__list i, .v4-wait__list i { box-sizing: border-box; display: grid; place-items: center; width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: rgba(var(--shade), .07); color: var(--text-3); }
.v4-status__steps li.is-on i, .v4-docs__list li.is-on i { background: var(--positive); color: #fff; }
.v4-msg { display: flex; align-items: flex-start; gap: 8px; margin: 12px 0 0; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: var(--acc-tint); color: var(--acc-ink); font: 600 14px/1.35 var(--font); }
.v4-msg .icon { flex: none; width: 18px; height: 18px; margin-top: 1px; }
.v4-done { margin-top: 12px; }
.v4-approve__row { display: flex; justify-content: space-between; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(var(--shade), .08); font-size: 15px; }
.v4-approve__row b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.v4-approve__btn, .v4-remind__yes, .v4-remind__no { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; margin-top: 12px; padding: 0 16px; border-radius: 999px; font: 600 14px/1 var(--font); }
.v4-approve__btn, .v4-remind__yes { background: var(--ink); color: #fff; }
.v4-remind__no { background: rgba(var(--shade), .07); color: var(--ink); }
.v4-remind__msg { margin: 4px 0 0; padding: 10px 12px; border-radius: 14px 14px 14px 4px; background: rgba(var(--shade), .05); font-size: 15px; line-height: 1.4; }
.v4-remind__acts { display: flex; flex-wrap: wrap; gap: 8px; }
.v4-wait__slot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 10px; padding: 10px 12px; border-radius: 12px; background: rgba(var(--shade), .05); font: 600 14px/1.2 var(--font); }
.v4-wait__free { padding: 4px 9px; border-radius: 999px; background: var(--warm-tint); color: var(--warm-ink); font-size: 12.5px; white-space: nowrap; }
.v4-review__ask { margin: 4px 0 0; font-size: 15px; line-height: 1.4; }
.v4-review__stars { display: flex; gap: 6px; margin: 12px 0 0; }
.v4-review__stars i { display: block; width: 26px; height: 26px; color: var(--warm); }
.wd .v4-review__stars svg, .wd .v4-review__stars svg * { fill: currentColor; }
.v4-status__steps i .icon, .v4-docs__list i .icon, .v4-wait__list i .icon { width: 14px; height: 14px; }
.v4-week { width: min(100%, 380px); padding: 16px; }
.v4-week__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; margin-top: 12px; }
.v4-week__day { position: relative; display: grid; align-content: start; gap: 5px; min-height: 120px; padding: 8px 6px; border-radius: 12px; background: rgba(var(--shade), .04); font: 600 12px/1 var(--font); color: var(--text-2); text-align: center; }
.v4-week__busy { display: block; height: 18px; border-radius: 6px; background: rgba(var(--shade), .12); transform-origin: left; }
.v4-week__busy--s { width: 70%; }
.v4-week__slot { display: grid; gap: 3px; padding: 7px 4px; border-radius: 8px; background: var(--sky); color: #fff; font: 600 11.5px/1.15 var(--font); box-shadow: 0 6px 14px -6px rgba(var(--sky-rgb), .8); }
.v4-week__slot small { font-weight: 500; font-size: 10.5px; opacity: .9; }

/* ---------- 4 · example: the common headline above, the scheme's own head hidden ---------- */
.v4-flow .fa-head { display: none; }
.v4-flow .fa { margin-top: clamp(16px, 2vw, 24px); }
/* the Kaia cards inside a section (after the solution cards, after the calculator): the home card, a gap above it */
.v4-kcta-end .kcta { margin: clamp(40px, 5vw, 72px) 0 0; }

/* ---------- 5 · calculator ---------- */
.v4-calc { display: grid; gap: clamp(24px, 4vw, 56px); max-width: var(--v4-max); margin: 0 auto; padding: clamp(22px, 3.4vw, 48px); border-radius: var(--r-xl); background: var(--card); box-shadow: var(--shadow-2); }
@media (min-width: 900px) { .v4-calc { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; } .v4-gain { position: sticky; top: 96px; } }
.v4-calc__fields { display: grid; gap: 30px; align-content: start; }
.v4-field label { display: block; margin-bottom: 12px; font: 600 18px/1.35 var(--font); }
.v4-field__row { display: grid; grid-template-columns: minmax(0, 1fr) 64px; align-items: center; gap: 16px; }
.v4-num { display: grid; place-items: center; height: 56px; border-radius: var(--r-m); background: var(--fill); }
.v4-num:focus-within { box-shadow: 0 0 0 2px var(--focus); background: #fff; }
.v4-num input { width: 100%; border: 0; background: none; font: 600 24px/1 var(--font); text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); -moz-appearance: textfield; }
.v4-num input:focus { outline: none; }
.v4-num input::-webkit-inner-spin-button, .v4-num input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.v4-calc__assume { margin: 0; font-size: 14px; line-height: 1.5; color: var(--text-2); }
.v4-range { --p: 50%; width: 100%; height: var(--hit); margin: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; touch-action: pan-y; }
.v4-range::-webkit-slider-runnable-track { height: 6px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--p), rgba(200, 201, 210, .75) var(--p)); }
.v4-range::-moz-range-track { height: 6px; border-radius: 3px; background: rgba(200, 201, 210, .75); }
.v4-range::-moz-range-progress { height: 6px; border-radius: 3px; background: var(--ink); }
.v4-range::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -12px; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .2), 0 1px 1px rgba(0, 0, 0, .12); }
.v4-range::-moz-range-thumb { width: 30px; height: 30px; border: 0; border-radius: 50%; background: #fff; box-shadow: 0 3px 8px rgba(0, 0, 0, .2); }
.v4-range:focus-visible { outline: none; }
.v4-range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--focus), 0 3px 8px rgba(0, 0, 0, .2); }
.v4-gain { container-type: inline-size; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; padding: clamp(22px, 3vw, 36px); border-radius: var(--r-l); background: var(--positive-tint); }
.v4-gain__k { font: 600 13px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--positive-ink); }
.v4-gain__big { margin-top: 6px; font: 600 clamp(40px, 16cqi, 84px)/1 var(--font); letter-spacing: -0.04em; color: var(--positive-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }
.v4-gain__hours { margin: 6px 0 0; font: 600 clamp(18px, 1.6vw, 21px)/1.35 var(--font); color: var(--ink); }
.v4-gain__low { margin: 6px 0 0; font: 600 20px/1.4 var(--font); color: var(--ink); }
.v4-gain.is-low { background: var(--grey-2); }
.v4-gain.is-low .v4-gain__k { color: var(--text-2); }
.v4-gain__fine { display: grid; gap: 6px; margin: 16px 0 0; padding: 16px 0 0; list-style: none; border-top: 1px solid rgba(var(--green-rgb), .2); font-size: 14px; line-height: 1.45; color: var(--text-2); }

/* ---------- 6 · launch: four steps, the progress line, the price ---------- */
.v4-steps-wrap { position: relative; max-width: var(--v4-max); margin: 0 auto; }
.v4-steps { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
@media (min-width: 600px) and (max-width: 1023px) { .v4-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v4-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.v4-step { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; padding: 26px; }
.v4-step__n { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: #fff; font: 600 18px/1 var(--font); }
.v4-step h3 { margin: 6px 0 0; font: 600 21px/1.25 var(--font); }
.v4-step p { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
.v4-step__time { justify-self: start; padding: 6px 12px; border-radius: 999px; background: var(--sky-tint); color: var(--sky-ink); font: 600 13.5px/1.2 var(--font); }
.v4-steps__line { display: block; height: 2px; margin: 18px 22px 0; border-radius: 2px; background: rgba(var(--shade), .1); overflow: hidden; }
.v4-steps__line i { display: block; height: 100%; background: var(--ink); transform-origin: left; transform: scaleX(0); }
@media (max-width: 599px) {
  .v4-steps { padding-left: 22px; }
  .v4-steps__line { position: absolute; left: 0; top: 22px; bottom: 22px; width: 2px; height: auto; margin: 0; }
  .v4-steps__line i { transform-origin: top; }
}
.v4-price { display: grid; gap: 16px; max-width: var(--v4-max); margin: 24px auto 0; }
@media (min-width: 900px) { .v4-price { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.v4-price__dark { padding: clamp(26px, 3vw, 40px); border-radius: var(--r-l); color: #fff; background: radial-gradient(120% 90% at 80% 100%, #3a3a40, #212121 60%); box-shadow: 0 30px 60px -30px rgba(33, 33, 33, .6); }
.v4-price__name { margin: 0; font: 600 13px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .62); }
.v4-price__line { margin: 14px 0 0; font: 600 clamp(19px, calc(10px + 2.9vw), 32px)/1.2 var(--font); letter-spacing: -0.025em; text-wrap: balance; font-variant-numeric: tabular-nums; }
.v4-price__more { margin: 18px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, .75); }
.v4-price__care { padding: clamp(26px, 3vw, 40px); }
.v4-price__care h3 { margin: 0 0 16px; font: 600 19px/1.3 var(--font); }
.v4-price__care ul { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.v4-price__care li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; font-size: 16px; line-height: 1.45; }
.v4-price__care .icon { width: 20px; height: 20px; color: var(--positive); }

/* ---------- 7 · terms ---------- */
.v4-terms { display: grid; max-width: var(--v4-max); margin: 0 auto; border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); overflow: hidden; }
.v4-terms__row { display: grid; gap: 6px; padding: 20px 26px; border-bottom: 1px solid rgba(var(--shade), .08); }
.v4-terms dt { font: 600 12.5px/1.3 var(--font); letter-spacing: .08em; text-transform: uppercase; color: var(--sky-ink); }
.v4-terms dd { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink); }
.v4-terms__row:last-child { border-bottom: 0; }
@media (min-width: 760px) {
  .v4-terms { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v4-terms__row:nth-child(odd):not(.v4-terms__row--wide) { border-right: 1px solid rgba(var(--shade), .08); }
  .v4-terms__row--wide { grid-column: 1 / -1; }
}
.v4-terms__date { max-width: var(--v4-max); margin: 12px auto 0; font-size: 13.5px; color: var(--text-3); }

/* ---------- 8 · Kaia and 9 · questions: the shared components (design/css/kaia-cta.css, design/css/faq-block.css) ---------- */

/* hero headline of this page is longer than the home slogan: two to three lines at every width (UI spec §1) */
.v4-stage .copy__h1 { font-size: calc(54 * var(--k)); }
.v4-stage .copy { width: min(calc(680 * var(--k)), calc(50vw - var(--gutter) - 24px)); }
@media (max-width: 899px), (max-aspect-ratio: 4/5) { .v4-stage .copy__h1 { font-size: clamp(25px, 7.4vw, 36px); } .v4-stage .copy { width: auto; } }
}

/* ---------- the section headline is its own screen (home, research 66): pinned while the warm circle lands in its
   "o" and the words fly in, then the view flies through it and the section comes up ---------- */
.v4 .v4-scene { margin-top: 0; padding-bottom: clamp(72px, 9vw, 128px); }
/* capped as on the home page (min(76svh, 640px)): on tall screens 72svh left 400 px of nothing under the headline (QA 20.10) */
/* the headline sits at the bottom of its screen: under it always the same gap of the design system (--head-gap), the air
   is above it, where the warm circle flies in (QA 20.10: centred, the gap under it was 170–290 px and different per section) */
.v4-title { display: grid; place-items: end center; min-height: min(56svh, 480px); padding: 64px 0 var(--head-gap); }
@media (max-width: 599px) { .v4-title { min-height: min(46svh, 380px); } }   /* the air between sections as on the home page (≈ 220–320 px) */
.v4-title .wd__head { margin: 0 auto; will-change: transform, opacity; }
.v4-body { position: relative; }
.v4-scene--open { padding-bottom: 0; }
@media (prefers-reduced-motion: reduce) {
  .v4-title { height: auto; padding: clamp(72px, 10vw, 128px) 0 clamp(32px, 4vw, 48px); }
}

/* ---------- 7 · terms as tiles (the home industry tiles), no table ---------- */
.v4-tiles { display: grid; gap: 16px; max-width: var(--v4-max); margin: 0 auto; }
@media (min-width: 600px) { .v4-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .v4-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.v4-tile { display: grid; align-content: start; gap: 10px; min-height: 230px; padding: 28px; border-radius: var(--r-l); }
.v4-tile--white { background: var(--card); box-shadow: var(--shadow-1); }
.v4-tile--sky { background: var(--sky-tint); }
.v4-tile--warm { background: var(--warm-tint); }
.v4-tile__ic { display: grid; place-items: center; width: 48px; height: 48px; padding: 12px; margin-bottom: 14px; border-radius: 50%; background: #fff; color: var(--sky-ink); box-shadow: 0 4px 12px -6px rgba(var(--shade), .3); }
.v4-tile--warm .v4-tile__ic { color: var(--warm-ink); }
.v4-tile__ic svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.v4-tile__k { margin: 0; font: 600 12.5px/1.3 var(--font); letter-spacing: .1em; text-transform: uppercase; color: var(--text-2); }
.v4-tile h3 { margin: 0; font: 600 clamp(24px, 2.2vw, 28px)/1.15 var(--font); letter-spacing: -0.025em; text-wrap: balance; }
.v4-tile__t { margin: 0; font-size: 16px; line-height: 1.5; color: var(--text-2); }
@media (max-width: 599px) { .v4-tile { min-height: 0; padding: 24px; } .v4-tile__ic { margin-bottom: 6px; } }
.v4-anchor { display: block; width: 44px; height: 44px; margin: 32px auto 0; border-radius: 50%; opacity: 0; pointer-events: none; }
.v4-anchor.hs-kaia__dot { width: 44px; height: 44px; padding: 0; background: none; }   /* only a start point: the circle leaves warm, as from a Kaia dot */

/* ---------- headlines without stray line breaks, every width (owner 18.10) ---------- */
.v4 h2, .v4 h3, .v4 .wd-card__title, .v4-price__line, .v4-stage .copy__h1, .v4-stage .copy__sub { text-wrap: balance; }
/* hero: the text column may use the room left of the button (its left edge is at 75 % − half its width) */
.v4-stage .copy { width: min(calc(680 * var(--k)), calc(60vw - var(--gutter) - 24px)); }
@media (max-width: 899px), (max-aspect-ratio: 4/5) { .v4-stage .copy { width: auto; } }

/* phones: card titles a step smaller so every title fits in two lines (owner 18.10) */
@media (max-width: 599px) { .v4-solve .wd-card__title { font-size: clamp(20px, 6vw, 23px); } }
.v4-price__line > span { display: block; }

/* ---------- 4b · the example as a message thread (niches without a phone agent, 18.10) ---------- */
.v4-flow--chat { padding-block: 8px clamp(48px, 6vw, 88px); }
.v4-thread { display: grid; gap: clamp(20px, 3vw, 40px); max-width: 1080px; margin: 0 auto; padding-inline: 16px;
  grid-template-areas: "phone" "side" "steps"; }
@media (min-width: 900px) { .v4-thread { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "phone side" "steps steps"; align-items: center; } }
.v4-thread__phone { grid-area: phone; justify-self: center; width: min(100%, 420px); padding: 14px; border-radius: var(--r-xl); background: #fff;
  border: 1px solid rgba(var(--shade), .07); box-shadow: var(--shadow-2); }
.v4-thread__head { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 6px 6px 14px; border-bottom: 1px solid rgba(var(--shade), .07); }
.v4-thread__head b { font: 600 16px/1.2 var(--font); }
.v4-thread__head small { grid-column: 2; color: var(--positive); font: 500 13px/1.2 var(--font); }
.v4-thread__ava { grid-row: span 2; display: grid; place-items: center; box-sizing: border-box; width: 40px; height: 40px; padding: 10px; border-radius: 50%; background: var(--positive); color: #fff; }
.v4-thread__kind { margin: 14px 4px 4px; font: 600 14px/1.35 var(--font); color: var(--ink); }
.v4-thread__kind span { display: block; margin-bottom: 2px; color: var(--text-3); font: 600 11.5px/1.2 var(--font); letter-spacing: .08em; text-transform: uppercase; }
.v4-thread__msgs { display: grid; gap: 8px; margin: 10px 0 0; padding: 10px; border-radius: calc(var(--r-xl) - 14px); background: var(--paper); list-style: none; min-height: 260px; align-content: start; }
.v4-bub { position: relative; max-width: 86%; padding: 9px 12px; border-radius: 16px; font: 400 15px/1.4 var(--font); }
.v4-bub--in { justify-self: start; background: #fff; border-top-left-radius: 4px; box-shadow: var(--shadow-1); }
.v4-bub--out { justify-self: end; background: var(--warm-ink); color: #fff; border-top-right-radius: 4px; }
/* the dots lie over the bubble's own text (which stays in the flow, hidden): the bubble keeps its height while the agent «types» — no layout shift (perf 21.10) */
.v4-typing { position: absolute; inset: 0 auto 0 12px; display: inline-flex; align-items: center; gap: 4px; visibility: hidden; }
.v4-typing i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .6; animation: v4-typing 1s infinite ease-in-out; }
.v4-typing i:nth-child(2) { animation-delay: .15s; } .v4-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes v4-typing { 0%, 100% { transform: translateY(0); opacity: .4; } 50% { transform: translateY(-3px); opacity: 1; } }
.v4-thread__side { grid-area: side; display: grid; gap: 14px; }
.v4-thread__doing { margin: 0; font: 600 clamp(20px, 2vw, 26px)/1.2 var(--font); letter-spacing: -0.02em; text-wrap: balance; }
.v4-thread__out { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.v4-thread__out li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 12px; align-items: start; padding: 14px 16px; border-radius: var(--r-l); background: #fff;
  border: 1px solid rgba(var(--shade), .07); box-shadow: var(--shadow-1); }
.v4-thread__out i { display: grid; place-items: center; box-sizing: border-box; width: 32px; height: 32px; padding: 8px; border-radius: 50%; background: var(--positive); color: #fff; }
.v4-thread__out i .icon, .v4-thread__ava .icon { display: block; width: 100%; height: 100%; color: #fff; }
.wd .v4-thread__out i svg, .v4-thread__out i svg, .v4-thread__ava svg { width: 100%; height: 100%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.v4-thread__out b { display: block; font: 600 16px/1.3 var(--font); }
.v4-thread__out span, .v4-thread__out small { display: block; margin-top: 2px; color: var(--text-2); font-size: 15px; line-height: 1.4; }
.v4-thread__out small { color: var(--text-3); font-size: 14px; }
.v4-thread__steps { grid-area: steps; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.v4-thread__steps li { display: grid; gap: 8px; color: var(--text-3); font: 600 14px/1.3 var(--font); transition: color .3s; }
.v4-thread__steps li.is-on { color: var(--ink); }
.v4-thread__steps i { display: block; height: 4px; border-radius: 4px; background: rgba(var(--shade), .1); overflow: hidden; }
.v4-thread__steps b { display: block; height: 100%; background: var(--warm); transform-origin: left; }
.v4-thread.is-static .v4-typing { display: none; }
@media (max-width: 599px) { .v4-thread__steps { grid-template-columns: 1fr 1fr; } .v4-thread__msgs { min-height: 0; } }