/* ============================================================
   SP-001 — Local website plan. Local draft, not for publication.
   The page sits on the Apps shell (header, mini logo, dock, legal line,
   footer) and styles only its own <main>. Chrome geometry is not touched
   (COMPONENTS.md, law 2).

   Language: the SKARR site itself — dark ground #171719, light plates
   #eaeaea / #f7f7f7 with dark type, Inter, gutter --g, radii 20 / 14,
   motion 300 / 240 ms. Alexa: «в нашем визуальном стиле… просто черно-белую»;
   the light ground of the first pass was taken from the task file, not from
   her, and is gone («кто тебе сказал белым делать весь сайт?», 19.10.2026).
   Dark is the default scope; .wp-card and the white
   sections (.wp-light) switch the same tokens to dark-on-light.
   Black and white play (Alexa, 19.10.2026): a white section first stands as a
   rounded plate inside the page gutter and opens to the screen edges as it
   comes up — the aperture of the old home's Improving stage (js/scene.js:
   clip-path inset from the page field and a radius, both to 0; the box itself
   never changes size).
   Composition updated to Alexa’s 19.10 instructions: real case cards,
   the existing SKARR Stages treatment for scope, a full-width studio CTA,
   and a separate client process with the AI-first approach.
   Every layout number is a token below, so it can go on Core/ui/tuner knobs.
   ============================================================ */

.lab--website-plan {
  --wp-ground: var(--ground);
  --wp-panel: var(--panel);
  --wp-plate: var(--plate);
  --wp-plate-grad: var(--plate);
  --wp-paper: var(--ww);
  --wp-field-bg: var(--silver-field);
  --wp-ink: var(--ink);
  --wp-ink-2: var(--ink-dim);
  --wp-mute: #a2a2aa;            /* 7.1:1 on --wp-ground */
  --wp-rule: rgba(234, 234, 234, 0.14);
  --wp-rule-strong: rgba(234, 234, 234, 0.28);
  --wp-dark: #171719;
  --wp-dark-ink: var(--ink);
  --wp-dark-mute: #a4a4aa;

  /* type ladder, Inter only */
  --wp-h1: 400 clamp(46px, 5.2vw, calc(80px * var(--wp-kh, 1))) / 1.08 "Inter", sans-serif;
  --wp-h1-track: -0.06em;
  --wp-h2: 400 clamp(34px, 3.2vw, calc(48px * var(--wp-k, 1))) / 1.12 "Inter", sans-serif;
  --wp-h2-track: -0.06em;
  --wp-h3: 600 calc(20px * var(--wp-k, 1)) / calc(26px * var(--wp-k, 1)) "Inter", sans-serif;
  --wp-lead: 300 calc(18px * var(--wp-k, 1)) / calc(27px * var(--wp-k, 1)) "Inter", sans-serif;
  --wp-body: 300 calc(15px * var(--wp-k, 1)) / calc(24px * var(--wp-k, 1)) "Inter", sans-serif;
  --wp-small: 300 calc(14px * var(--wp-k, 1)) / calc(20px * var(--wp-k, 1)) "Inter", sans-serif;
  --wp-eyebrow: 500 calc(12px * var(--wp-k, 1)) / calc(16px * var(--wp-k, 1)) "Inter", sans-serif;
  --wp-amount: 500 calc(52px * var(--wp-kc, 1)) / 1.1 "Inter", sans-serif;

  /* rhythm */
  --wp-sec-y: 96px;              /* section padding, top and bottom */
  --wp-hero-top: 84.8px;         /* above the hero, under the header (as .hero--center) */
  --wp-head-gap: 40px;           /* heading → content */
  --wp-col-gap: 48px;
  --wp-cell-gap: 40px 32px;
  --wp-measure: none;            /* no cap: the site frame is the 24px gutter at any width (see «Большой экран» below) */
  --wp-radius: 20px;
  --wp-radius-in: 14px;
  --wp-aperture-radius: 20px;
  --wp-card-pad: 32px;
  --wp-field-h: 52px;
}
@media (max-width: 1024px) {
  .lab--website-plan { --wp-sec-y: 72px; --wp-hero-top: 54.4px; --wp-head-gap: 32px; --wp-col-gap: 32px; --wp-lead: 300 calc(17px * var(--wp-k, 1)) / calc(25px * var(--wp-k, 1)) "Inter", sans-serif; }
}
@media (max-width: 719.98px) {
  .lab--website-plan {
    --wp-sec-y: 56px; --wp-hero-top: 34.4px; --wp-head-gap: 24px; --wp-col-gap: 24px;
    --wp-h1: 400 clamp(32px, 9.4vw, calc(46px * var(--wp-kh, 1))) / 1.1 "Inter", sans-serif;
    --wp-h2: 400 clamp(26px, 7.2vw, calc(34px * var(--wp-k, 1))) / 1.15 "Inter", sans-serif;
    --wp-h3: 600 calc(18px * var(--wp-k, 1)) / calc(24px * var(--wp-k, 1)) "Inter", sans-serif;
    --wp-lead: 300 calc(16px * var(--wp-k, 1)) / calc(24px * var(--wp-k, 1)) "Inter", sans-serif;
    --wp-aperture-radius: 20px;
    --wp-card-pad: 24px;
    --wp-cell-gap: 32px;
  }
}

/* light plates and white sections: the same tokens, dark on light */
.wp-card, .wp-light {
  --wp-ink: #171719;
  --wp-ink-2: #3a3a3e;
  --wp-mute: #5f5f64;            /* 5.9:1 on #eeeef0 */
  --wp-rule: rgba(23, 23, 25, 0.16);
  --wp-rule-strong: rgba(23, 23, 25, 0.32);
  color: var(--wp-ink);
}

html:has(body.lab--website-plan) { scroll-padding-top: var(--clear, 72px); scroll-padding-bottom: 88px; }
.lab--website-plan .mini:focus-visible { outline-color: #171719; box-shadow: 0 0 0 5px #eaeaea; }
.wp-nw { white-space: nowrap; }

/* ---------- ground and frame ---------- */
.wp {
  position: relative;
  z-index: 5;
  background: var(--wp-ground);
  color: var(--wp-ink);
}
.wp-sec { padding: var(--wp-sec-y) var(--g); }
.wp-sec + .wp-sec { padding-top: 0; }
.wp-sec.wp-light, .wp-sec.wp-light + .wp-sec { padding-top: var(--wp-sec-y); }
/* the white section keeps its own field inside the plate: the plate stands on
   the page gutter, the copy one card-pad further in, in both states */
.wp-sec.wp-light { padding-inline: calc(var(--g) + var(--wp-card-pad)); background: var(--ww); }
.wp-in { max-width: var(--wp-measure); margin-inline: auto; }

/* White sections remain rounded at every scroll position (Alexa, 19.10). */
.wp-aperture {
  --wp-ap-x: var(--g);
  --wp-ap-r: var(--wp-aperture-radius);
  clip-path: inset(0 var(--wp-ap-x) 0 var(--wp-ap-x) round var(--wp-ap-r));
}

/* ---------- type ---------- */
.wp-eyebrow {
  margin: 0 0 16px;
  font: var(--wp-eyebrow);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--wp-mute);
}
.wp-h1, .wp-h2 { margin: 0; text-transform: none; text-wrap: balance; }
.wp-heading-secondary { display: block; color: var(--wp-mute); }
.wp-h1 { font: var(--wp-h1); letter-spacing: var(--wp-h1-track); color: var(--wp-mute); }
.wp-h1 .wp-heading-secondary { color: var(--wp-ink); }
@media (min-width: 1025px) {
  .wp-h1 .wp-heading-secondary { display: inline; }
}
.wp-h2 { font: var(--wp-h2); letter-spacing: var(--wp-h2-track); }
.wp-h3 { margin: 0; font: var(--wp-h3); letter-spacing: -0.06em; text-wrap: balance; }
.wp-lead { margin: 20px 0 0; max-width: 58ch; font: var(--wp-lead); color: var(--wp-ink-2); text-wrap: pretty; }
.wp-body { margin: 10px 0 0; font: var(--wp-body); color: var(--wp-ink-2); text-wrap: pretty; }
.wp-small { margin: 0; font: var(--wp-small); color: var(--wp-ink-2); }
.wp-mute { color: var(--wp-mute); }

/* text link: the site law for links — underline drawn left → right */
.wp-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font: 500 calc(16px * var(--wp-k, 1)) / calc(24px * var(--wp-k, 1)) "Inter", sans-serif;
  color: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.wp-link::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--lab-out, 240ms) var(--lab-ease, ease);
}
.wp-link::before {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 10px;
  height: 1px;
  background: currentColor;
  opacity: 0.32;
}
.wp-link:hover::after, .wp-link:focus-visible::after { transform: scaleX(1); transition-duration: var(--lab-in, 300ms); }
.wp-link:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }

/* buttons: .lab-btn (type B) from lab.css; the block only sets height and size */
.wp-btn { --btn-focus: var(--wp-ink); }
.wp-btn--small { height: 48px; min-height: 48px; max-height: 48px; padding: 0 24px; font-size: 14px; line-height: 18px; }
@media (max-width: 419.98px) {
  .wp-btn { height: 48px; min-height: 48px; max-height: 48px; padding: 0 20px; font-size: 14px; line-height: 18px; }
}

/* ---------- 1. hero ---------- */
.wp-hero { min-height: 100svh; padding-top: calc(var(--hdr-h) + var(--wp-hero-top)); }
.wp-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--wp-col-gap);
  align-items: start;
}
.wp-hero-copy { max-width: 760px; }
.wp-hero-copy .wp-lead { max-width: 50ch; }
.wp-offer { min-width: 0; }
.wp-price-line { margin: 40px 0 0; font: 500 calc(22px * var(--wp-k, 1)) / calc(28px * var(--wp-k, 1)) "Inter", sans-serif; letter-spacing: -0.06em; }
.wp-hero-action { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }
.wp-note { margin: 0; font: var(--wp-small); color: var(--wp-mute); }

.wp-card {
  display: flex;
  flex-direction: column;
  min-height: 560px;
  padding: 4px;
  border-radius: var(--wp-radius);
  background: var(--wp-plate);
}
.wp-card-intro { padding: 28px 28px 36px; }
.wp-card-title { margin: 0; font: 500 calc(16px * var(--wp-kc, 1)) / calc(22px * var(--wp-kc, 1)) "Inter", sans-serif; letter-spacing: -0.06em; color: var(--wp-ink-2); }
.wp-card-billing { margin: 20px 0 12px; }
.wp-card-price { display: flex; align-items: baseline; gap: 6px; margin: 0; white-space: nowrap; }
.wp-card-amount { font: var(--wp-amount); letter-spacing: -0.06em; font-variant-numeric: proportional-nums; }
.wp-card-per { font: 400 calc(15px * var(--wp-kc, 1)) / calc(22px * var(--wp-kc, 1)) "Inter", sans-serif; color: var(--wp-ink-2); }
.wp-card-term { margin: 0; font: var(--wp-small); color: var(--wp-ink-2); }
.wp-card-terms { margin: 4px 0 0; font: var(--wp-small); color: var(--wp-ink-2); }
.wp-card-specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex: 1; gap: 4px; margin: 0; }
.wp-card-specs > div { display: flex; flex-direction: column; gap: 16px; min-width: 0; padding: 24px; border-radius: 16px; background: var(--wp-ground); color: var(--wp-dark-ink); }
.wp-card-specs dt { font: 500 calc(15px * var(--wp-kc, 1)) / calc(21px * var(--wp-kc, 1)) "Inter", sans-serif; }
.wp-card-specs dd { margin: auto 0 0; font: var(--wp-small); color: #c6c6cc; text-wrap: pretty; }
.wp-card-links { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 12px 0 0; }

@media (max-width: 899.98px) {
  .wp-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .wp-offer { max-width: 640px; }
}
@media (max-width: 719.98px) {
  .wp-card { min-height: 520px; }
  .wp-card-intro { padding: 20px 20px 32px; }
  .wp-card-billing { margin-top: 16px; }
  .wp-card-specs > div { padding: 20px 16px; }
  .wp-hero-action { flex-direction: column; align-items: stretch; }
  .wp-hero-action .wp-btn { width: 100%; }
}

/* ---------- section heads ---------- */
.wp-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 16px var(--wp-col-gap);
  align-items: end;
  margin-bottom: var(--wp-head-gap);
}
.wp-head-copy { max-width: 62ch; }
.wp-head-copy > .wp-body:first-child { margin-top: 0; }
.wp-head-copy p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .wp-head { grid-template-columns: minmax(0, 1fr); align-items: start; } }

/* ---------- 2. existing SKARR cases ---------- */
.wp-cases { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 12px; margin: 0; padding: 0; list-style: none; }
.wp-case { min-width: 0; }
.wp-case-link { display: block; padding: 4px 4px 16px; border-radius: var(--wp-radius); color: inherit; text-decoration: none; }
.wp-case-media { aspect-ratio: 16 / 10; overflow: hidden; border-radius: 16px; background: var(--wp-panel); }
.wp-case-media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.wp-case-info { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 20px 12px 0; }
.wp-case-title { margin: 0; font: 500 clamp(24px, 2.1vw, calc(32px * var(--wp-k, 1))) / 1.12 "Inter", sans-serif; letter-spacing: -0.06em; }
.wp-case-kind { margin: 8px 0 0; font: var(--wp-body); color: var(--wp-ink-2); }
.wp-case-arrow { flex: none; width: 28px; height: 28px; transition: transform var(--lab-out, 240ms) var(--lab-ease, ease); }
.wp-case-status { margin: 12px 12px 0; font: var(--wp-small); color: var(--wp-mute); }
.wp-case-note { margin-top: 24px; color: var(--wp-mute); }
.wp-case-link:hover .wp-case-arrow { transform: translateX(4px); }
.wp-case-link:hover .wp-case-title { text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.wp-case-link:focus-visible { outline: 2px solid var(--wp-ink); outline-offset: 3px; }
@media (max-width: 719.98px) {
  .wp-cases { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .wp-case-info { padding: 16px 4px 0; }
  .wp-case-status { margin-inline: 4px; }
}

/* ---------- 3. six inclusions, adapted from css/06-stages.css ---------- */
.wp-sec.wp-included { padding: 48px calc(var(--g) + 8px) 8px; background: var(--wp-plate); }
.wp-included .wp-h2 { max-width: 1120px; margin: 0 24px 64px; font-size: clamp(36px, 4.4vw, calc(64px * var(--wp-k, 1))); }
.wp-scope-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.wp-scope-card { position: relative; display: flex; flex-direction: column; gap: 48px; min-width: 0; padding: 72px 24px 24px; border-radius: 24px; background: var(--ww); }
.wp-scope-card .wp-h3 { font: 400 clamp(22px, 1.8vw, calc(28px * var(--wp-kc, 1))) / 1.23 "Inter", sans-serif; letter-spacing: -0.06em; text-wrap: pretty; }
.wp-scope-card .wp-body { margin: auto 0 0; font-size: calc(18px * var(--wp-kc, 1)); line-height: calc(26px * var(--wp-kc, 1)); }
.wp-scope-number { position: absolute; inset: 0 auto auto 0; display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--wp-ground); color: var(--wp-plate); font: 500 calc(18px * var(--wp-kc, 1)) / 1 "Inter", sans-serif; font-variant-numeric: tabular-nums; }
.wp-scope-card--dark { --wp-ink: #eaeaea; --wp-ink-2: #d9d9d9; background: var(--wp-ground); color: var(--wp-ink); }
.wp-scope-card--dark .wp-scope-number { background: var(--wp-plate); color: var(--wp-ground); border: 2px solid var(--wp-ground); }
.wp-more { --wp-ink: #eaeaea; --wp-ink-2: #d9d9d9; display: grid; grid-template-columns: minmax(0, 2fr) minmax(240px, 1fr); gap: 40px; align-items: center; margin-top: 8px; padding: 32px; border-radius: 24px; background: var(--wp-ground); color: var(--wp-ink); }
.wp-included .wp-more {
  border-bottom-left-radius: max(0px, calc(var(--wp-ap-r) - 8px));
  border-bottom-right-radius: max(0px, calc(var(--wp-ap-r) - 8px));
}
.wp-more .wp-body { margin-top: 20px; max-width: 74ch; font-size: calc(18px * var(--wp-kc, 1)); line-height: calc(26px * var(--wp-kc, 1)); }
.wp-more .wp-h3 { font-size: calc(24px * var(--wp-kc, 1)); line-height: calc(30px * var(--wp-kc, 1)); }
.wp-more-action { display: flex; align-items: center; justify-content: flex-end; min-width: 0; }
.wp-more-cta { --btn-radius: 50%; width: 208px; height: 208px; min-height: 208px; max-height: 208px; padding: 28px; font-size: 16px; line-height: 20px; white-space: normal; text-align: center; }
.wp-cells { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--wp-cell-gap); margin: 0; padding: 0; list-style: none; }
.wp-cell { padding-top: 20px; border-top: 1px solid var(--wp-rule-strong); }
@media (max-width: 1023.98px) {
  .wp-scope-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .wp-more { grid-template-columns: minmax(0, 3fr) minmax(180px, 2fr); gap: 24px; padding: 24px; }
}
@media (max-width: 719.98px) {
  .wp-sec.wp-included { padding-top: 32px; }
  .wp-included .wp-h2 { margin: 0 16px 40px; font-size: clamp(28px, 7.5vw, calc(42px * var(--wp-k, 1))); }
  .wp-scope-grid, .wp-cells, .wp-more { grid-template-columns: minmax(0, 1fr); }
  .wp-scope-card { padding: 64px 20px 24px; gap: 32px; }
  .wp-scope-card .wp-h3 { font-size: calc(24px * var(--wp-kc, 1)); }
  .wp-scope-card .wp-body, .wp-more .wp-body { font-size: calc(16px * var(--wp-kc, 1)); line-height: calc(24px * var(--wp-kc, 1)); }
  .wp-more { padding: 24px 20px 20px; gap: 24px; }
}

/* ---------- 4. the studio ---------- */
.wp-studio-card {
  padding: 8px;
  border-radius: var(--wp-radius);
  /* Alexa, 19.10.2026: the same corner gradient as the product card, mirrored —
     lighter grey at the top-left by «Built around», easing into the card's own
     shade, which stays the colour of most of the card. */
  background: radial-gradient(ellipse farthest-corner at 0% 0%, #3d3d40 0%, #2e2e31 30%, var(--wp-panel) 62%);
}
.wp-studio-content { padding: 48px 40px 0; }
.wp-studio-cta { --btn-radius: 12px; width: 100%; margin-top: 128px; }
.wp-studio .wp-h2 { text-wrap: initial; font-size: clamp(28px, 3.3vw, calc(52px * var(--wp-kc, 1))); }
.wp-studio .wp-lead { max-width: 47ch; color: var(--wp-ink); }
.wp-studio .wp-lead + .wp-lead { margin-top: 16px; }
@media (max-width: 719.98px) { .wp-studio-content { padding: 24px 16px 0; } }
.wp-split {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--wp-col-gap);
  align-items: start;
}
.wp-split-copy .wp-lead:first-child { margin-top: 0; }
.wp-split-copy p:last-child { margin-bottom: 0; }
@media (max-width: 1024px) { .wp-split { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 5. terms ---------- */
.wp-terms .wp-h2 { margin-bottom: var(--wp-head-gap); }
.wp-cells--three .wp-h3 { font-variant-numeric: tabular-nums; }

/* ---------- 6. fit and steps ---------- */
.wp-sec.wp-fit { padding-top: var(--wp-sec-y); padding-bottom: calc(2 * var(--wp-sec-y)); }
.wp-steps { margin: 0; padding: 0; list-style: none; }
.wp-step {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 16px;
  padding: 24px 0;
  border-top: 1px solid var(--wp-rule-strong);
  transition: background-color 160ms ease-out;
}
@media (hover: hover) and (pointer: fine) {
  .wp-step:hover { background-color: rgba(255, 255, 255, 0.04); }
}
.wp-step:first-child { padding-top: 20px; }
.wp-step .wp-body { max-width: 50ch; }
.wp-step:nth-child(1) .wp-body { max-width: 38ch; }
.wp-step:nth-child(2) .wp-body { max-width: 44ch; }
.wp-fit-line-break { display: none; }
@media (min-width: 1025px) { .wp-fit-line-break { display: initial; } }
.wp-step-n { font: 600 calc(20px * var(--wp-k, 1)) / calc(26px * var(--wp-k, 1)) "Inter", sans-serif; font-variant-numeric: tabular-nums; color: var(--wp-mute); }

/* ---------- 7. development: ordered milestones, distinct from scope cards ---------- */
.wp-process-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--wp-col-gap); align-items: start; margin-bottom: 56px; }
.wp-process-approach .wp-h3 { font-size: calc(24px * var(--wp-k, 1)); line-height: calc(30px * var(--wp-k, 1)); }
.wp-process-approach .wp-body { max-width: 56ch; }
.wp-process-list { list-style: none; padding: 0; margin: 0; }
.wp-process-stage { display: grid; grid-template-columns: 64px minmax(0, 5fr) minmax(0, 6fr); gap: 32px; align-items: baseline; padding: 32px 0; border-top: 1px solid var(--wp-rule-strong); }
.wp-process-stage:last-child { border-bottom: 1px solid var(--wp-rule-strong); }
.wp-process-number { font: 400 calc(24px * var(--wp-k, 1)) / calc(30px * var(--wp-k, 1)) "Inter", sans-serif; font-variant-numeric: tabular-nums; color: var(--wp-mute); }
.wp-process-stage .wp-h3 { font-size: calc(24px * var(--wp-k, 1)); line-height: calc(30px * var(--wp-k, 1)); font-weight: 400; }
.wp-process-stage .wp-body { margin: 0; max-width: 54ch; font-size: calc(18px * var(--wp-k, 1)); line-height: calc(26px * var(--wp-k, 1)); }
@media (max-width: 1023.98px) {
  .wp-process-intro { grid-template-columns: minmax(0, 1fr); }
  .wp-process-stage { grid-template-columns: 40px minmax(0, 4fr) minmax(0, 5fr); gap: 24px; }
}
@media (max-width: 719.98px) {
  .wp-process-intro { margin-bottom: 32px; }
  .wp-process-stage { grid-template-columns: 32px minmax(0, 1fr); gap: 16px; padding: 24px 0; }
  .wp-process-stage .wp-body { grid-column: 2; font-size: calc(16px * var(--wp-k, 1)); line-height: calc(24px * var(--wp-k, 1)); }
  .wp-process-stage .wp-h3, .wp-process-number { font-size: calc(20px * var(--wp-k, 1)); line-height: calc(26px * var(--wp-k, 1)); }
  .wp-studio-cta { margin-top: 104px; }
}

/* ---------- 8. inquiry ---------- */
/* the form sits on the white section itself, fields as in the Let's talk card */
/* Form column 20% wider (Alexa, 19.10.2026: «форму сделать чуть шире… процентов на двадцать»): 520 → 624, 560 → 672.
   On big monitors the whole form — column, labels, fields, type, gaps — is 20% larger again through --wp-kf
   (block «Большой экран»): «увеличить … эту справа на 20 процентов» — 624 → 749 on 2560. Below 1537 --wp-kf is unset = 1. */
.wp-split--form { grid-template-columns: minmax(0, 1fr) minmax(0, calc(624px * var(--wp-kf, 1))); gap: clamp(40px, 6vw, 96px); }
.wp-inquiry-copy .wp-h2 { max-width: 18ch; }
.wp-inquiry-copy .wp-lead { max-width: 43ch; }
/* Project briefs follow the homepage footer rows, anchored to the column bottom. */
.wp-inquiry-copy { display: flex; flex-direction: column; align-self: stretch; }
.wp-brief-briefs { margin-top: auto; padding-top: 48px; }
.wp-brief-eyebrow { margin: 0 0 20px; font: 500 calc(12px * var(--wp-k, 1)) / calc(20px * var(--wp-k, 1)) "Inter", sans-serif; letter-spacing: .24em; text-transform: uppercase; }
.wp-brief-rows { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(23,23,25,.18); }
.wp-brief-rows > li { border-top: 1px solid rgba(23,23,25,.18); }
.wp-brief-row { display: grid; grid-template-columns: 48px minmax(0,1fr) auto; align-items: center; gap: 20px; padding: 20px 0; color: var(--wp-ink); text-decoration: none; }
.wp-brief-row-icon { display: grid; place-items: center; width: 48px; height: 48px; border: 1px solid rgba(23,23,25,.12); border-radius: 12px; background: var(--wp-field-bg); }
.wp-brief-row-icon svg, .wp-brief-arrow { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.wp-brief-row-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wp-brief-row-title { font: 400 calc(20px * var(--wp-k, 1)) / calc(26px * var(--wp-k, 1)) "Inter", sans-serif; }
.wp-brief-row-desc { font: 300 calc(14px * var(--wp-k, 1)) / calc(20px * var(--wp-k, 1)) "Inter", sans-serif; color: var(--wp-mute); }
.wp-brief-row-action { display: flex; align-items: center; gap: 16px; font: 500 calc(11px * var(--wp-k, 1)) / calc(16px * var(--wp-k, 1)) "Inter", sans-serif; letter-spacing: .16em; text-transform: uppercase; white-space: nowrap; }
.wp-brief-row:hover .wp-brief-row-title { text-decoration: underline; text-underline-offset: 4px; }
.wp-brief-row:focus-visible { outline: 2px solid var(--wp-ink); outline-offset: 4px; }
@media (max-width: 1199.98px) { .wp-brief-row-label { display: none; } }
@media (max-width: 719.98px) {
  .wp-brief-row { gap: 14px; padding: 16px 0; }
  .wp-brief-row-title { font-size: calc(18px * var(--wp-k, 1)); }
  .wp-brief-briefs { padding-top: 40px; }
}
.wp-direction-mobile { display: none; }
@media (max-width: 1024px) {
  .wp-split--form { grid-template-columns: minmax(0, 1fr); }
  .wp-direction-desktop { display: none; }
  .wp-direction-mobile { display: inline; }
  .wp-form { width: 100%; max-width: 672px; }
}

.wp-form { display: flex; flex-direction: column; gap: calc(12px * var(--wp-kf, 1)); }
.wp-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(12px * var(--wp-kf, 1)); }
.wp-field { display: flex; flex-direction: column; gap: calc(6px * var(--wp-kf, 1)); min-width: 0; }
.wp-field--wide { grid-column: 1 / -1; }
.wp-label { font: 500 calc(14px * var(--wp-k, 1) * var(--wp-kf, 1)) / calc(20px * var(--wp-k, 1) * var(--wp-kf, 1)) "Inter", sans-serif; color: var(--wp-ink); }
.wp-input {
  width: 100%;
  height: calc(58px * var(--wp-kf, 1));
  padding: 0 calc(14px * var(--wp-kf, 1));
  border: 1px solid rgba(23, 23, 25, 0.08);
  border-radius: calc(12px * var(--wp-kf, 1));
  background: var(--wp-field-bg);
  font: 400 calc(16px * var(--wp-k, 1) * var(--wp-kf, 1)) / calc(24px * var(--wp-k, 1) * var(--wp-kf, 1)) "Inter", sans-serif;   /* 16 keeps iOS from zooming */
  color: var(--wp-ink);
  caret-color: var(--wp-ink);
  transition: border-color var(--lab-out, 240ms) var(--lab-ease, ease);
}
.wp-input::placeholder { color: #66666d; opacity: 1; }
.wp-input:hover { border-color: rgba(23, 23, 25, 0.18); }
.wp-input:focus { background-color: #f1f1f3; }
.wp-input:focus-visible { outline: 2px solid var(--wp-ink); outline-offset: 2px; border-color: var(--wp-ink); }
.wp-textarea { height: auto; min-height: calc(104px * var(--wp-kf, 1)); padding: calc(12px * var(--wp-kf, 1)) calc(14px * var(--wp-kf, 1)); resize: vertical; }
.wp-input[aria-invalid="true"] { border-width: 2px; border-color: var(--wp-ink); }
.wp-err {
  display: flex;
  gap: calc(8px * var(--wp-kf, 1));
  align-items: flex-start;
  margin: 0;
  font: 500 calc(14px * var(--wp-k, 1) * var(--wp-kf, 1)) / calc(20px * var(--wp-k, 1) * var(--wp-kf, 1)) "Inter", sans-serif;
  color: var(--wp-ink);
}
.wp-err[hidden] { display: none; }
.wp-err::before {
  content: "!" / "";
  flex: none;
  display: grid;
  place-items: center;
  width: calc(18px * var(--wp-kf, 1));
  height: calc(18px * var(--wp-kf, 1));
  margin-top: calc(1px * var(--wp-kf, 1));
  border-radius: 50%;
  background: var(--wp-ink);
  font: 600 calc(12px * var(--wp-k, 1) * var(--wp-kf, 1)) / 1 "Inter", sans-serif;
  color: var(--wp-dark-ink);
}
.wp-form .wp-btn { align-self: stretch; width: 100%; margin-top: calc(8px * var(--wp-kf, 1)); }
.wp-form > .wp-small { font-size: calc(14px * var(--wp-k, 1) * var(--wp-kf, 1)); line-height: calc(20px * var(--wp-k, 1) * var(--wp-kf, 1)); }
.wp-status {
  margin-top: calc(4px * var(--wp-kf, 1));
  padding: calc(16px * var(--wp-kf, 1)) calc(20px * var(--wp-kf, 1));
  border-radius: var(--wp-radius-in);
  background: var(--wp-dark);
  font: var(--wp-body);
  font-size: calc(15px * var(--wp-k, 1) * var(--wp-kf, 1));
  line-height: calc(24px * var(--wp-k, 1) * var(--wp-kf, 1));
  color: var(--wp-dark-ink);
}
.wp-status:empty { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); padding: 0; margin: -1px; white-space: nowrap; }
.wp-status-tag { display: block; margin-bottom: calc(4px * var(--wp-kf, 1)); font: var(--wp-eyebrow); font-size: calc(12px * var(--wp-k, 1) * var(--wp-kf, 1)); line-height: calc(16px * var(--wp-k, 1) * var(--wp-kf, 1)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp-dark-mute); }
@media (max-width: 719.98px) {
  .wp-fields { grid-template-columns: minmax(0, 1fr); }
  .wp-form .wp-btn { align-self: stretch; }
}

/* ---------- 8b. the form on a dark plate ----------
   Alexa, 19.10.2026: «на белом фоне черную подложку под формой с отступом … 4 пикселя … от края, как вот
   на дилер веб-сайт» + «справа … занимает 820, например, в ширину и по всей высоте … форма, конечно, имеет
   большие внутренние отступы». The plate is the form itself: negative margins carry it out to 4px from the
   white plate's top, right and bottom edges (radius = plate − 4, the 4px rim of the Dealer case cards);
   the inner top padding returns the same distance, so the first field stays level with the heading.
   On it the form turns light: white fields, light labels, light button. One column (≤1024): the plate
   runs the full white width under the copy, 4px from the sides and the bottom. */
.wp-inquiry {
  --wp-fp-in: 4px;                                         /* plate → white edge */
  --wp-fp-pad: var(--wp-form-plate-pad, 64px);             /* inner side padding */
  --wp-fp-w: calc(624px + 2 * var(--wp-fp-pad));           /* plate width */
}
@media (min-width: 1025px) {
  .wp-inquiry .wp-split--form { grid-template-columns: minmax(min(340px, 100%), 1fr) minmax(0, calc(var(--wp-fp-w) - var(--wp-card-pad) + var(--wp-fp-in))); }
}
.wp-inquiry .wp-form {
  --wp-ink: #eaeaea;
  --wp-ink-2: #d9d9d9;
  --wp-mute: #a2a2aa;
  --wp-field-bg: var(--ww);
  justify-content: center;
  margin: calc(var(--wp-fp-in) - var(--wp-sec-y)) calc(var(--wp-fp-in) - var(--wp-card-pad)) calc(var(--wp-fp-in) - var(--wp-sec-y)) 0;
  padding: calc(var(--wp-sec-y) - var(--wp-fp-in)) var(--wp-fp-pad);
  border-radius: calc(var(--wp-aperture-radius) - var(--wp-fp-in));
  background: var(--wp-dark);
  color: var(--wp-ink);
}
@media (max-width: 1024px) {
  .wp-inquiry { --wp-fp-pad: var(--wp-form-plate-pad, 40px); }
  .wp-inquiry .wp-form {
    width: auto;
    max-width: none;
    margin: 0 calc(var(--wp-fp-in) - var(--wp-card-pad)) calc(var(--wp-fp-in) - var(--wp-sec-y));
    padding: var(--wp-fp-pad);
  }
}
@media (max-width: 719.98px) {
  .wp-inquiry { --wp-fp-pad: var(--wp-form-plate-pad, 20px); }
}
.wp-inquiry .wp-input { border-color: transparent; color: #171719; caret-color: #171719; }
.wp-inquiry .wp-input:hover { border-color: rgba(23, 23, 25, 0.18); }
.wp-inquiry .wp-input:focus { background-color: #fff; }
.wp-inquiry .wp-input:focus-visible { outline-color: #eaeaea; border-color: #171719; }
.wp-inquiry .wp-input[aria-invalid="true"] { border-color: #171719; }
.wp-inquiry .wp-err::before { color: #171719; }
.wp-inquiry .wp-status { background: rgba(234, 234, 234, 0.08); }
.wp-inquiry .wp-form .wp-btn { --btn-bg: var(--ww); --btn-ink: #171719; --btn-fill: #171719; --btn-fill-ink: #eaeaea; --btn-focus: #eaeaea; }

/* ---------- local draft marker, outside the blocks ---------- */
.wp-draft {
  position: fixed;
  left: 12px;
  bottom: 12px;
  z-index: 40;
  margin: 0;
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--wp-plate);
  font: 500 11px / 16px "Inter", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #171719;
  pointer-events: none;
}
.wp-draft { transition: opacity var(--lab-out, 240ms) var(--lab-ease, ease); }
.wp-draft.is-away { opacity: 0; }
.wp-draft-short { display: none; }
@media (max-width: 519.98px) {
  .wp-draft-long { display: none; }
  .wp-draft-short { display: inline; }
}

@media (prefers-reduced-motion: reduce) {
  .wp-case-arrow, .wp-link::after, .wp-input, .wp-step { transition: none; }
}


/* ============================================================
   Большой экран (≥1537) — Alexa, 19.10.2026: «хуярь эти страницы… чтобы они
   стали соответствовать» → «единственная типографика, которую надо было
   увеличить, — в рамках этих блоков [плашки Considered]. Она до сих пор
   мелкая. А всё остальное орёт — How we work, Analyses & Researches…».
   Кадр. Весь сайт живёт в одном кадре — 24px от края на любой ширине
   (главная, кейсы, Special Offers). Четыре страницы плана были
   единственными с колонкой 1680, а белые плашки внутри них шли до края:
   две концепции на одной странице. Теперь --wp-measure: none — плашки,
   сетки и медиа идут до кадра, текст держит меру (ch и px, здесь и в
   dealer.css / high-end.css / product.css).
   Типографика. Три множителя без единицы из ширины окна
   (tan(atan2(100vw − 1536px, 1px)) — число px сверх 1536):
     --wp-kc — текст внутри плашек (.wp-card, .wp-scope-card, .wp-more,
               .wp-studio-card, .pd-detail, подписи на фото героя):
               0.5 на 1000px → ×1.51 на 2560;
     --wp-kh — заголовок и лид первого экрана, закон титула главной
               (15px на 1000px у 80 → ×1.19 на 2560, lab.css «Первый экран
               главной»);
     --wp-k  — остальной текст страницы (заголовки разделов, леды, списки
               процесса, формы): НЕ растёт — её слово; ручка оставлена.
   Каждый кегль и интерлиньяж в этих четырёх файлах записан как
   calc(Npx * var(--wp-k|kc|kh, 1)), у clamp() растёт только потолок; кнопки
   — по закону кнопок, не растут. На 1536 и ниже все три множителя = 1.
   Первый экран на большом мониторе — её слова: «на MacBook пускай будет, на
   больших экранах пускай сразу идёт… сверху сделай побольше от хедера
   отступ». 100svh остаётся до 1536; с 1537 высоты окна нет, отступ от
   шапки растёт на --wp-hero-top-grow за 1000px (90 → 177 на 2560).
   Числа — ручки localhost …/?tune=hero (new-home/preview/plan-fold.js,
   Core/ui/tuner).
   ============================================================ */
@media (min-width: 1537px) {
  .lab--website-plan {
    --wp-vw: tan(atan2(100vw - 1536px, 1px));
    --wp-kc: min(calc(1 + var(--wp-vw) * var(--wp-kc-slope, 0.5) / 1000), var(--wp-kc-max, 2.2));
    --wp-kh: min(calc(1 + var(--wp-vw) * var(--wp-kh-slope, 0.1875) / 1000), var(--wp-kh-max, 1.42));
    --wp-k: min(calc(1 + var(--wp-vw) * var(--wp-k-slope, 0) / 1000), var(--wp-k-max, 1.6));
    --wp-hero-top: min(calc(84.8px + (100vw - 1536px) * var(--wp-hero-top-grow, 90) / 1000), var(--wp-hero-top-max, 200px));
    /* inquiry form 20% larger — Alexa 19.10.2026, 2560 snapshot: «увеличить … эту справа на 20 процентов» */
    --wp-kf: var(--wp-form-k, 1.2);
  }
  /* the dark form plate on a big monitor: 820 wide (her number for 2560); inside left and right the same
     as above the first field — Alexa 19.10.2026: «внутренний отступ у формы слева-справа-то увеличь» (64 → 92) */
  .wp-inquiry { --wp-fp-pad: var(--wp-form-plate-pad, calc(var(--wp-sec-y) - var(--wp-fp-in))); --wp-fp-w: var(--wp-form-plate-w, 820px); }
  /* 2K and wider: the plate 960 — Alexa 19.10.2026: «на 2К делай 960… на 2К и выше» (from 2400, so a 2560 window with chrome still counts) */
  @media (min-width: 2400px) { .wp-inquiry { --wp-fp-w: var(--wp-form-plate-w, 960px); } }
  /* the form's button takes the grid step of a 1.2 form (Core/ui/buttons: кегль = высота / 4 + 2): 56 → 68, 16 → 19 */
  .wp-form .wp-btn { height: 68px; min-height: 68px; max-height: 68px; font-size: 19px; line-height: 24px; }
  .wp-hero { min-height: 0; }
  .wp-hero-copy { max-width: calc(760px * var(--wp-kh, 1)); }
  .wp-hero .wp-lead { font-size: calc(18px * var(--wp-kh, 1)); line-height: calc(27px * var(--wp-kh, 1)); }
  /* text set by the shared tokens inside the plates follows the plate multiplier */
  .wp-card-term, .wp-card-terms, .wp-card-specs dd { font-size: calc(14px * var(--wp-kc, 1)); line-height: calc(20px * var(--wp-kc, 1)); }
  .wp-studio-card .wp-lead { font-size: calc(18px * var(--wp-kc, 1)); line-height: calc(27px * var(--wp-kc, 1)); }
  .wp-scope-card { padding-top: calc(72px * var(--wp-kc, 1)); }
  .wp-scope-number { width: calc(48px * var(--wp-kc, 1)); height: calc(48px * var(--wp-kc, 1)); }
  /* number columns follow the type they hold */
  .wp-step { grid-template-columns: calc(40px * var(--wp-k, 1)) minmax(0, 1fr); }
  .wp-process-stage { grid-template-columns: calc(64px * var(--wp-k, 1)) minmax(0, 5fr) minmax(0, 6fr); }
  /* text-only cells keep a reading measure when the grid runs to the frame */
  .wp-scope-card .wp-body, .wp-cell .wp-body { max-width: 44ch; }
}