/* «How we work» — the block of the plan pages (new-home/src/how-we-work.mjs).
   Moved from the High-End page (high-end.css, .he-process*) with the same
   numbers, Alexa, 19.10.2026. Sits inside the Local Website UI: colours,
   rules, the white panel and the type multipliers come from website-plan.css. */
.wp-how {
  --wp-card-pad: 40px;
  --how-aside: 320px;
  --how-stage-gap: 72px;
  --how-stage-title: clamp(24px, 2.2vw, calc(36px * var(--wp-k, 1)));
  overflow-wrap: break-word;
}
.wp-how-grid { display: grid; grid-template-columns: minmax(200px, var(--how-aside)) minmax(0, 1fr); gap: clamp(48px, 7vw, 128px); align-items: start; }
/* Sticks below the compact logo (12 + 44), on the site's anchor line. */
.wp-how-aside { position: sticky; top: var(--clear, 72px); }
.wp-how-aside .wp-body { margin-top: 24px; max-width: 36ch; font-size: calc(16px * var(--wp-k, 1)); line-height: calc(25px * var(--wp-k, 1)); }
.wp-how-nav { display: flex; flex-direction: column; margin-top: 36px; }
.wp-how-nav a { display: grid; grid-template-columns: 28px minmax(0,1fr); align-items: center; gap: 8px; min-height: 46px; padding: 8px 0; border-bottom: 1px solid var(--wp-rule); color: var(--wp-mute); text-decoration: none; font: 400 calc(14px * var(--wp-k, 1)) / calc(20px * var(--wp-k, 1)) "Inter",sans-serif; font-variant-numeric: tabular-nums; transition: color var(--lab-out,240ms); }
.wp-how-nav a span { font-size: calc(12px * var(--wp-k, 1)); }
.wp-how-nav a:hover, .wp-how-nav a:focus-visible, .wp-how-nav a[aria-current="step"] { color: var(--wp-ink); }
.wp-how-nav a[aria-current="step"] { font-weight: 600; }
.wp-how-nav a:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
.wp-how-stage { padding: 0 0 var(--how-stage-gap); scroll-margin-top: 40px; }
.wp-how-stage + .wp-how-stage { padding-top: var(--how-stage-gap); border-top: 1px solid var(--wp-rule-strong); }
.wp-how-stage:last-child { padding-bottom: 0; }
.wp-how-heading { display: grid; grid-template-columns: 44px minmax(0,1fr); gap: 20px; align-items: baseline; margin-bottom: 28px; }
.wp-how-stage h3, .wp-how-heading .wp-process-number { margin: 0; font: 400 var(--how-stage-title) / 1.18 "Inter",sans-serif; letter-spacing: -.04em; text-wrap: balance; }
.wp-how-stage > p { margin: 0 0 20px; max-width: 70ch; font: 300 calc(18px * var(--wp-k, 1)) / calc(28px * var(--wp-k, 1)) "Inter",sans-serif; color: var(--wp-ink-2); }
.wp-how-stage > p:last-child { margin-bottom: 0; }
.wp-how-stage > .wp-how-outcome { color: var(--wp-ink); font-weight: 400; }
.wp-how-list { margin: 28px 0; padding: 0; }
.wp-how-list > div { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr); gap: 24px; padding: 20px 0; border-top: 1px solid var(--wp-rule); }
.wp-how-list dt { font: 500 calc(15px * var(--wp-k, 1)) / calc(23px * var(--wp-k, 1)) "Inter",sans-serif; color: var(--wp-ink); }
.wp-how-list dd { margin: 0; font: 300 calc(15px * var(--wp-k, 1)) / calc(24px * var(--wp-k, 1)) "Inter",sans-serif; color: var(--wp-ink-2); }
.wp-how ::selection { background: #171719; color: #f7f7f7; }
@media (min-width: 1920px) { .wp-how { --how-aside: 360px; } }
@media (max-width: 1199.98px) {
  .wp-how { --how-aside: 250px; }
  .wp-how-grid { gap: 48px; }
}
@media (max-width: 1024px) {
  .wp-how-grid { grid-template-columns: minmax(0,1fr); gap: 56px; }
  .wp-how-aside { position: static; }
  .wp-how-aside .wp-body { max-width: 70ch; }
  .wp-how-nav { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 32px; margin-top: 24px; }
  .wp-how-stage { scroll-margin-top: 30px; }
}
@media (max-width: 719.98px) {
  .wp-how { --wp-card-pad: 20px; --how-stage-gap: 44px; --how-stage-title: calc(24px * var(--wp-k, 1)); }
  .wp-how-grid { gap: 40px; }
  .wp-how-nav { column-gap: 16px; }
  .wp-how-nav a { font-size: calc(12px * var(--wp-k, 1)); line-height: calc(18px * var(--wp-k, 1)); grid-template-columns: 20px minmax(0,1fr); gap: 4px; min-height: 48px; }
  .wp-how-heading { gap: 12px; grid-template-columns: 28px minmax(0,1fr); margin-bottom: 24px; }
  .wp-how-stage > p { font-size: calc(16px * var(--wp-k, 1)); line-height: calc(25px * var(--wp-k, 1)); }
  .wp-how-list > div { grid-template-columns: minmax(0,1fr); gap: 8px; padding-block: 18px; }
  .wp-how-list dd { font-size: calc(15px * var(--wp-k, 1)); }
}
@media (prefers-reduced-motion: reduce) { .wp-how-nav a { transition: none; } }
@media (min-width: 1537px) {
  .wp-how-heading { grid-template-columns: calc(44px * var(--wp-k, 1)) minmax(0, 1fr); }
  .wp-how-nav a { grid-template-columns: calc(28px * var(--wp-k, 1)) minmax(0, 1fr); }
  .wp-how-list { max-width: calc(720px * var(--wp-k, 1)); }
}