/* Product Design, Alexa's reference-led composition. All page rules stay in .pd.
   Existing header, contact, CTA and live phone components keep their sources. */
.lab--product-design { --pd-gap: 12px; --pd-radius: 16px; --pd-silver: #d9dcde; }
.pd { overflow-wrap: break-word; }
.pd ::selection { color: #171719; background: #d9dcde; }
.pd .wp-light ::selection { color: #fff; background: #313439; }
.pd .wp-h1, .pd .wp-h2, .pd .wp-h3 { letter-spacing: -.04em; }
.pd a, .pd button { -webkit-tap-highlight-color: transparent; }
.pd :focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
.pd-hero { padding: calc(var(--hdr-h) + 32px) var(--g) 80px; }
.pd-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: var(--pd-gap); }
.pd-hero-product { grid-row: 1 / 3; position: relative; margin: 0; min-height: 736px; background: var(--plate); border-radius: var(--pd-radius); display: flex; flex-direction: column; justify-content: center; padding: 44px; overflow: hidden; }
.pd-hero-device { position: relative; min-height: 610px; flex: 1; --demo-scale: .65; }
/* Fixed phone proportions belong to product-demo.css. Here we place its static view. */
.pd .pd-hero-device .product-demo-phone { top: 50%; left: 50%; transform: translate(-50%, -50%) scale(var(--demo-scale)); }
/* The hero phone is the live app (same /demos/subscription as the scenario phone below); it sits under the status bar like .product-demo iframe. */
.pd-hero-device iframe { position: absolute; top: 54px; left: 0; width: 100%; height: calc(100% - 54px); border: 0; background: #fff; }
.pd-static-screen { position: absolute; top: 54px; left: 0; width: 393px; height: 798px; max-width: none; object-fit: cover; }
.pd-hero-product figcaption { display: flex; justify-content: space-between; gap: 16px; color: #303438; font: 400 calc(13px * var(--wp-kc, 1))/1.5 "Inter", sans-serif; }
.pd-hero-product figcaption span:first-child { font-weight: 600; }
.pd-hero-copy { padding: clamp(28px, 3.2vw, 56px); background: var(--plate); border-radius: var(--pd-radius); display: flex; flex-direction: column; justify-content: space-between; }
.pd-hero-copy h1 { margin: 0; color: #171719; font: 500 clamp(42px, 4.25vw, calc(72px * var(--wp-kh, 1)))/1.04 "Inter", sans-serif; letter-spacing: -.04em; }
.pd-hero-copy h1 span { color: #686e72; font-weight: 300; }
.pd-hero-copy > p { margin: 30px 0 0; font: 400 calc(16px * var(--wp-k, 1))/1.5 "Inter", sans-serif; color: #45474b; }
.pd-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 28px; }
.pd-actions .wp-btn { height: 52px; min-height: 52px; max-height: 52px; font-size: 14px; padding-inline: 20px; }
.pd-hero-notes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--pd-gap); min-width: 0; }
.pd-picture { position: relative; margin: 0; border-radius: var(--pd-radius); overflow: hidden; min-height: 244px; color: #fff; }
.pd-picture img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.pd-picture::after { content: ''; position: absolute; inset: 35% 0 0; background: linear-gradient(0deg, rgba(7,12,16,.85), transparent); }
.pd-picture--portrait img { object-position: 50% 35%; }
.pd-picture figcaption { position: absolute; z-index: 1; bottom: 24px; left: 24px; right: 16px; font: 500 clamp(24px, 2.7vw, calc(40px * var(--wp-kc, 1)))/1.04 "Inter", sans-serif; letter-spacing: -.035em; }
.pd-picture em { font-style: normal; font-weight: 300; }

/* The white panel opens to the viewport. Phone and shadows remain inside it. */
.pd-playground { --pd-ap-inset: var(--g); --pd-ap-radius: 24px; padding: 72px calc(var(--g) + var(--wp-card-pad)) 64px; background: #fff; min-height: 100svh; clip-path: inset(0 var(--pd-ap-inset) round var(--pd-ap-radius)); }
.pd-playground-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 36px; }
.pd-playground-head h2 { margin: 0; font: 400 clamp(32px, 3.5vw, calc(56px * var(--wp-k, 1)))/1.08 "Inter",sans-serif; letter-spacing: -.04em; }
.pd-playground-head h2 span { color: #777d82; }
.pd-playground-head > p { margin: 0; color: #555a60; font: 400 calc(15px * var(--wp-k, 1))/1.6 "Inter",sans-serif; }
.pd-demo { display: grid; grid-template-columns: minmax(180px, 1fr) minmax(270px, 430px) minmax(180px, 1fr); gap: 40px; max-width: 1360px; margin: 24px auto 0; min-height: 710px; color: #171719; }
.pd-demo .product-demo-stage { min-height: 710px; }
.pd .pd-demo .product-demo-phone { left: 50%; }
.pd-callouts { display: flex; flex-direction: column; justify-content: center; gap: 88px; min-width: 0; }
.pd-callout { position: relative; padding: 22px 28px 22px 0; color: #373c41; background: transparent; border: 0; border-bottom: 1px solid #cdd1d3; text-align: left; cursor: pointer; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; transition: color 180ms ease, background-color 180ms ease; }
.pd-callout strong { display: block; font: 500 clamp(20px, 1.7vw, calc(27px * var(--wp-k, 1)))/1.2 "Inter",sans-serif; letter-spacing: -.035em; }
.pd-callout span { display: block; margin-top: 12px; max-width: 28ch; font: 400 calc(14px * var(--wp-k, 1))/1.6 "Inter",sans-serif; color: #5b6268; }
.pd-callout svg { width: 20px; height: 20px; position: absolute; top: 24px; right: 0; stroke: currentColor; stroke-width: 1.5; }
.pd-callout[aria-pressed="true"] { color: #101214; border-bottom-color: #171719; }
.pd-callout[aria-pressed="true"] strong { text-decoration: underline; text-underline-offset: 7px; text-decoration-thickness: 1px; }
.pd-callout:hover, .pd-callout:focus-visible { color: #000; background: #f1f3f4; }
.pd-callouts--left .pd-callout::after, .pd-callouts--right > .pd-callout::after { content: ''; height: 1px; width: 28px; background: #aeb4b8; position: absolute; top: 50%; right: -34px; }
.pd-callouts--right > .pd-callout::after { left: -34px; right: auto; }
.pd-demo-footer p { margin: 16px 0 0; color: #686e73; font: 400 calc(12px * var(--wp-k, 1))/1.6 "Inter",sans-serif; }
.pd-reset { width: min(100%, 180px); height: 48px; min-height: 48px; max-height: 48px; padding-inline: 18px; font-size: 14px; }
.pd-interlude { padding: 120px var(--g); text-align: center; }
.pd-interlude > p { margin: 0; font: 400 clamp(30px, 4.1vw, calc(64px * var(--wp-k, 1)))/1.12 "Inter",sans-serif; letter-spacing: -.04em; }
.pd-interlude > p > span { color: #92989d; }
.pd-interlude-note { display: block; margin-top: 28px; color: #b6babd; font: 300 calc(15px * var(--wp-k, 1))/1.5 "Inter",sans-serif; }
.pd-section-head { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: end; margin-bottom: 44px; }
.pd-section-head .wp-lead { margin: 0; max-width: 48ch; }
.pd-dashboard-shell { border-radius: var(--pd-radius); overflow: hidden; background: var(--plate); padding: 14px; }
.pd-dashboard-shell iframe { display: block; width: 100%; height: 840px; border: 0; border-radius: 9px; background: #f4f5f6; }
.pd-dashboard-caption { display: flex; justify-content: space-between; gap: 24px; margin-top: 16px; color: #b5b9bd; font: 300 calc(13px * var(--wp-k, 1))/1.5 "Inter",sans-serif; }
.pd-dashboard-caption p { margin: 0; }

/* Editorial narrative grid: imagery, live-product evidence and product principles. */
.pd-details { padding-top: 40px; }
.pd-detail-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: 270px 270px 320px; gap: var(--pd-gap); }
.pd-detail { position: relative; border-radius: var(--pd-radius); min-width: 0; overflow: hidden; padding: 30px; color: #171719; background: var(--plate); display: flex; flex-direction: column; }
.pd-detail h3 { position: relative; z-index: 1; margin: 0; font: 400 clamp(26px, 2.7vw, calc(42px * var(--wp-kc, 1)))/1.07 "Inter",sans-serif; letter-spacing: -.04em; }
.pd-detail p { position: relative; z-index: 1; font: 400 calc(14px * var(--wp-kc, 1))/1.5 "Inter",sans-serif; margin: 20px 0 0; max-width: 35ch; }
.pd-detail--logic { grid-column: 1 / 3; justify-content: space-between; }
.pd-path { display: flex; align-items: center; gap: 10px; margin-top: 22px; font: 500 calc(13px * var(--wp-kc, 1))/1.4 "Inter",sans-serif; }
.pd-path svg { width: 40px; height: 16px; stroke: #747b80; fill: none; flex: 0 1 40px; }
.pd-detail--human { grid-column: 3; grid-row: 1 / 3; justify-content: end; color: #fff; }
.pd-detail--human img, .pd-detail--system img { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; }
.pd-detail--human img { object-position: 43% center; }
.pd-detail--human::after, .pd-detail--system::after { content: ''; position: absolute; inset: 20% 0 0; background: linear-gradient(0deg, rgba(9,15,20,.92), transparent); }
.pd-detail--human > div, .pd-detail--system > div { position: relative; z-index: 1; }
.pd-detail--human h3, .pd-detail--system h3 { font-size: clamp(26px, 2.2vw, calc(35px * var(--wp-kc, 1))); }
.pd-detail--system { grid-column: 4; grid-row: 1 / 3; justify-content: end; color: #fff; }
.pd-detail--system img { object-position: 60%; }
.pd-detail--type { grid-column: 1 / 3; flex-direction: row; flex-wrap: wrap; align-content: center; column-gap: 32px; background: #20272b; color: #e1e5e7; }
.pd-detail--type > span { font: 300 clamp(80px, 9vw, calc(140px * var(--wp-kc, 1)))/1 "Inter",sans-serif; letter-spacing: -.04em; }
.pd-detail--type h3 { align-self: center; }
.pd-detail--type p { max-width: none; flex-basis: 100%; }
.pd-detail--interaction { grid-column: 1 / 4; flex-direction: row; justify-content: space-between; gap: 24px; background: var(--plate); padding-right: 44px; }
.pd-detail--interaction > div { display: flex; flex-direction: column; align-items: start; justify-content: center; min-width: 0; }
.pd-detail--interaction > img { width: 248px; height: 504px; object-fit: cover; flex-shrink: 0; border-radius: 18px; margin-top: 0; transform: translateY(-185px); align-self: start; }
.pd-detail--interaction .wp-link { margin-top: 24px; gap: 18px; font-size: calc(14px * var(--wp-kc, 1)); }
.pd-detail--interaction .wp-link svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 1.5; }
.pd-detail--states { grid-column: 4; background: var(--plate); justify-content: space-between; }
.pd-detail--states h3 { font-size: clamp(25px, 2vw, calc(32px * var(--wp-kc, 1))); }
.pd-empty-state { display: flex; flex-direction: column; gap: 6px; align-items: start; margin: 20px 0 0; }
.pd-empty-state svg { width: 32px; height: 32px; stroke: #465159; stroke-width: 1.5; margin-bottom: 4px; }
.pd-empty-state span { font: 500 calc(13px * var(--wp-kc, 1))/1.4 "Inter",sans-serif; }
.pd-empty-state small { font: 400 calc(12px * var(--wp-kc, 1))/1.4 "Inter",sans-serif; color: #475159; }
.pd-detail--states p { font-size: calc(12px * var(--wp-kc, 1)); }
.pd-process-section { padding-top: 48px; }
.pd-process-section .wp-split { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); }
.pd-process { list-style: none; padding: 0; margin: 0; }
.pd-process li { border-top: 1px solid var(--wp-rule-strong); padding: 28px 0; }
.pd-process li > div { display: grid; grid-template-columns: 48px 1fr; gap: 16px; }
.pd-process h3, .pd-process li > div > span { margin: 0; font: 400 clamp(22px, 2vw, calc(30px * var(--wp-k, 1)))/1.2 "Inter",sans-serif; letter-spacing: -.035em; }
.pd-process li > div > span { color: var(--wp-mute); font-variant-numeric: tabular-nums; }
.pd-process li > p { margin: 16px 0 0 64px; max-width: 65ch; font: var(--wp-lead); color: var(--wp-ink-2); }
.pd-outcome { border-top: 1px solid var(--wp-rule); }
.pd .pd-outcome { padding-top: 80px; }
.pd-outcome .wp-lead { margin: 0; }
.pd-outcome .wp-body { margin-top: 24px; }
.pd #wp-inquiry-title { max-width: 14ch; }
@media (min-width: 1600px) {
  .pd-demo { min-height: 800px; }
  .pd-demo .product-demo-stage { min-height: 800px; }
}
@media (max-width: 1100px) {
  .pd-hero-copy { padding: 28px; }
  .pd-hero-copy h1 { font-size: clamp(36px, 4.6vw, calc(50px * var(--wp-kh, 1))); }
  .pd-actions { flex-direction: column; align-items: stretch; }
  .pd-hero-product { padding: 28px; min-height: 736px; }
  .pd-hero-device { --demo-scale: .63; }
  .pd-demo { gap: 24px; grid-template-columns: minmax(160px, 1fr) minmax(260px, 340px) minmax(160px, 1fr); }
  .pd-callouts { gap: 64px; }
  .pd-callouts .pd-callout::after { display: none; }
  .pd-playground { padding-inline: 32px; }
  .pd-detail-grid { grid-template-rows: 260px 260px 340px; }
  .pd-detail { padding: 24px; }
  .pd-detail--interaction > img { width: 215px; height: auto; }
  .pd-detail--type { column-gap: 18px; }
}
@media (max-width: 899.98px) {
  .pd-hero-grid { grid-template-rows: auto 220px; }
  .pd-hero-product { min-height: 690px; padding: 24px 16px; }
  .pd-hero-device { min-height: 550px; --demo-scale: .59; }
  .pd-hero-copy h1 { font-size: clamp(33px, 4.7vw, calc(43px * var(--wp-kh, 1))); }
  .pd-hero-copy > p { font-size: calc(14px * var(--wp-k, 1)); }
  .pd-picture { min-height: 220px; }
  .pd-picture figcaption { font-size: calc(25px * var(--wp-kc, 1)); left: 18px; bottom: 18px; }
  .pd-playground-head { align-items: start; }
  .pd-playground-head > p { max-width: 25ch; }
  .pd-demo { grid-template-columns: minmax(0, 1fr) minmax(280px, 1fr); gap: 28px; }
  .pd-demo .product-demo-stage { grid-column: 2; grid-row: 1 / 3; min-height: 690px; }
  .pd-callouts--left { grid-column: 1; grid-row: 1; align-self: end; gap: 24px; }
  .pd-callouts--right { grid-column: 1; grid-row: 2; justify-content: start; gap: 28px; }
  .pd-section-head { gap: 30px; }
  .pd-detail-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .pd-detail--logic, .pd-detail--type { grid-column: 1; min-height: 290px; }
  .pd-detail--human { grid-column: 2; grid-row: 1 / 3; }
  .pd-detail--system { grid-column: 1; grid-row: 3; min-height: 370px; }
  .pd-detail--states { grid-column: 2; grid-row: 3; }
  .pd-detail--interaction { grid-column: 1 / 3; grid-row: 4; height: 360px; }
  .pd-detail--type { flex-direction: column; flex-wrap: nowrap; align-items: start; justify-content: center; }
  .pd-detail--type h3 { align-self: start; margin-top: 16px; }
  .pd-detail--type p { flex-basis: auto; }
  .pd-process-section .wp-split { grid-template-columns: 1fr; }
}
@media (min-width: 600px) and (max-width: 719.98px) {
  .pd .product-demo-phone { inset: auto; top: 50%; left: 50%; width: 417px; height: 876px; padding: 12px; border-radius: 62px; box-shadow: 0 0 0 2px #2b2b2f, 0 0 0 3px #4a4a50, 0 0 0 5px #2b2b2f, 0 24px 48px rgba(20,20,30,.2); transform: translate(-50%,-50%) scale(var(--demo-scale,.6)); }
  .pd .product-demo-screen { --demo-screen-radius: 50px; width: 393px; height: 852px; }
  .pd .product-demo-status { display: flex; }
  .pd .product-demo-island, .pd .product-demo-home { display: block; }
  .pd .product-demo iframe { top: 54px; height: calc(100% - 54px); }
  .pd .product-demo-message { inset: 54px 0 0; }
}
@media (max-width: 599.98px) {
  .pd-hero { padding-top: calc(var(--hdr-h) + 24px); padding-bottom: 48px; }
  .pd-hero-grid { grid-template-columns: 1fr; grid-template-rows: auto; gap: 10px; }
  .pd-hero-copy { grid-row: 1; padding: 28px 24px; }
  .pd-hero-copy h1 { font-size: clamp(39px, 9.6vw, calc(55px * var(--wp-kh, 1))); }
  .pd-hero-copy > p { font-size: calc(15px * var(--wp-k, 1)); margin-top: 24px; }
  .pd-hero-product { grid-row: 2; min-height: 640px; padding: 20px; }
  .pd-hero-device { min-height: 570px; --demo-scale: .61; }
  .pd-hero-product figcaption { font-size: calc(11px * var(--wp-kc, 1)); }
  .pd-hero-notes { grid-row: 3; gap: 10px; }
  .pd-picture { min-height: 230px; }
  .pd-picture figcaption { font-size: clamp(22px, 5.7vw, calc(30px * var(--wp-kc, 1))); left: 16px; right: 12px; bottom: 18px; }
  /* Keep the shared full device frame on this page, including on phones. */
  .pd .product-demo-phone { inset: auto; top: 50%; left: 50%; width: 417px; height: 876px; padding: 12px; border-radius: 62px; box-shadow: 0 0 0 2px #2b2b2f, 0 0 0 3px #4a4a50, 0 0 0 5px #2b2b2f, 0 24px 48px rgba(20,20,30,.2); transform: translate(-50%,-50%) scale(var(--demo-scale,.6)); }
  .pd .product-demo-screen { --demo-screen-radius: 50px; width: 393px; height: 852px; }
  .pd .product-demo-status { display: flex; }
  .pd .product-demo-island, .pd .product-demo-home { display: block; }
  .pd .product-demo iframe { top: 54px; height: calc(100% - 54px); }
  .pd .product-demo-message { inset: 54px 0 0; }
  .pd-playground { padding: 44px 24px 48px; }
  .pd-playground-head { flex-direction: column; gap: 18px; }
  .pd-playground-head h2 { font-size: calc(34px * var(--wp-k, 1)); }
  .pd-playground-head > p { max-width: none; font-size: calc(14px * var(--wp-k, 1)); }
  .pd-demo { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; min-height: 0; }
  .pd-demo .product-demo-stage { grid-column: 1; grid-row: 1; min-height: 640px; }
  .pd-callouts--left, .pd-callouts--right { grid-column: 1; grid-row: auto; gap: 0; }
  .pd-callout { padding-block: 20px; }
  .pd-callout span { max-width: 38ch; font-size: calc(14px * var(--wp-k, 1)); margin-top: 8px; }
  .pd-demo-footer { display: flex; justify-content: space-between; gap: 16px; align-items: center; margin-top: 28px; }
  .pd-reset { flex-shrink: 0; width: 134px; }
  .pd-demo-footer p { margin: 0; font-size: calc(10px * var(--wp-k, 1)); }
  .pd-interlude { padding: 72px 24px; }
  .pd-interlude > p { font-size: calc(32px * var(--wp-k, 1)); }
  .pd-interlude-note { font-size: calc(13px * var(--wp-k, 1)); margin-top: 20px; }
  .pd-section-head { grid-template-columns: 1fr; gap: 22px; margin-bottom: 28px; }
  .pd-dashboard-shell { padding: 6px; border-radius: 12px; }
  .pd-dashboard-shell iframe { height: 900px; }
  .pd-dashboard-caption { flex-direction: column; gap: 6px; font-size: calc(12px * var(--wp-k, 1)); }
  .pd-detail-grid { gap: 10px; }
  .pd-detail { padding: 24px; }
  .pd-detail--logic { grid-column: 1 / 3; grid-row: 1; min-height: 270px; }
  .pd-detail--human { grid-column: 1; grid-row: 2; min-height: 370px; padding: 18px; }
  .pd-detail--system { grid-column: 2; grid-row: 2; min-height: 370px; padding: 18px; }
  .pd-detail--human h3, .pd-detail--system h3 { font-size: calc(24px * var(--wp-kc, 1)); }
  .pd-detail--human p, .pd-detail--system p { font-size: calc(12px * var(--wp-kc, 1)); }
  .pd-detail--type { grid-column: 1 / 3; grid-row: 3; min-height: 260px; flex-direction: row; flex-wrap: wrap; gap: 0 24px; align-content: center; }
  .pd-detail--type > span { font-size: calc(88px * var(--wp-kc, 1)); }
  .pd-detail--type h3 { align-self: center; font-size: calc(30px * var(--wp-kc, 1)); margin: 0; }
  .pd-detail--type p { flex-basis: 100%; }
  .pd-detail--interaction { grid-column: 1 / 3; grid-row: 4; height: 610px; flex-direction: column; gap: 32px; }
  .pd-detail--interaction > div { min-height: 210px; }
  .pd-detail--interaction > img { width: min(260px, 100%); height: 320px; object-fit: cover; object-position: bottom; transform: none; align-self: center; margin-top: 0; }
  .pd-detail--states { grid-column: 1 / 3; grid-row: 5; min-height: 285px; }
  .pd-detail--states p { font-size: calc(14px * var(--wp-kc, 1)); }
  .pd-empty-state { margin-top: 24px; }
  .pd-process li > div { grid-template-columns: 34px 1fr; gap: 12px; }
  .pd-process h3, .pd-process li > div > span { font-size: calc(23px * var(--wp-k, 1)); }
  .pd-process li > p { margin-left: 46px; font-size: calc(15px * var(--wp-k, 1)); line-height: 1.6; }
  .pd .pd-outcome { padding-top: 48px; }
}
@media (max-width: 359.98px) {
  .pd-hero-copy { padding: 24px 20px; }
  .pd-hero-copy h1 { font-size: calc(37px * var(--wp-kh, 1)); }
  .pd-hero-device { --demo-scale: .54; min-height: 520px; }
  .pd-hero-product { min-height: 580px; padding-inline: 16px; }
  .pd-playground { padding-inline: 20px; }
  .pd-playground-head h2 { font-size: calc(30px * var(--wp-k, 1)); }
  .pd-demo .product-demo-stage { min-height: 570px; }
  .pd-detail--human, .pd-detail--system { grid-column: 1 / 3; grid-row: auto; min-height: 370px; }
  .pd-detail--type, .pd-detail--interaction, .pd-detail--states { grid-row: auto; }
}
@media (prefers-reduced-motion: reduce) { .pd-callout { transition: none; } }
@media (forced-colors: active) { .pd-picture figcaption, .pd-detail--human > div, .pd-detail--system > div { background: Canvas; color: CanvasText; } }


/* Большой экран (≥1537): кадр сайта, множители --wp-kc/kh/k и первый экран — website-plan.css, блок «Большой экран».
   Герой и шапка белой сцены идут до кадра (.pd-hero-grid без потолка 1680, .pd-playground-head без 1500);
   сама сцена с телефоном остаётся композицией по центру (.pd-demo 1360). Ряды сетки Considered растут
   вместе с текстом плашек (--wp-kc), колонка номеров процесса — с остальным текстом (--wp-k). */
@media (min-width: 1537px) {
  .pd-playground { min-height: 0; }
  .pd-hero-copy > p { font-size: calc(16px * var(--wp-kh, 1)); }
  .pd-detail-grid { grid-template-rows: calc(270px * var(--wp-kc, 1)) calc(270px * var(--wp-kc, 1)) calc(320px * var(--wp-kc, 1)); }
  .pd-detail--interaction > img { width: calc(248px * var(--wp-kc, 1)); height: calc(504px * var(--wp-kc, 1)); transform: translateY(calc(-185px * var(--wp-kc, 1))); }
  .pd-process li > div { grid-template-columns: calc(48px * var(--wp-k, 1)) 1fr; }
  .pd-process li > p { margin-left: calc(64px * var(--wp-k, 1)); }
}

/* Первый экран по высоте окна (≥1101) — Alexa, 19.10.2026, снимки 2560 и MacBook: на 2К карточки «квадратность свою
   потеряли… растянулись, а высоту нихуя»; на MacBook «на 12 пикселей чуть квадратики вверх приподняла, чтобы у них
   отступ был»; «и на моём, и на более большом» — так же, как на MacBook.
   Снизу от карточек до края окна — столько же, сколько слева и справа (--g; её слово 19.10: «чтобы снизу такой же отступ, как слева и справа»), верх — прежний, под шапкой. Квадраты держат
   пропорцию MacBook 7/5, карточка с заголовком забирает остаток высоты: подзаголовок остаётся под заголовком, кнопки
   уходят вниз, зазор между ними растёт с окном. Телефон занимает ту же долю своей карточки, что на MacBook (.925 высоты
   поля под ним): масштаб считается от той же высоты, без контейнера — общий product-demo.css отвечает на @container.
   Окно ниже содержимого — герой растёт содержимым, как раньше. Высокое узкое окно держит потолок: карточка телефона
   не выше --pd-fold-tall своей ширины. Числа — ручки localhost …/?tune=hero (plan-fold.js). */
@media (min-width: 1101px) {
  .lab--product-design {
    --pd-hero-h: min(
      100svh - var(--hdr-h) - 32px - var(--pd-fold-gap, var(--g)),
      (100vw - 2 * var(--g) - var(--pd-gap)) / 2 * var(--pd-fold-tall, 1.15)
    );
  }
  .pd-hero-grid { grid-template-rows: 1fr auto; min-height: var(--pd-hero-h); }
  .pd-hero-product { min-height: 0; }
  .pd-hero-device { --demo-scale: tan(atan2(max(610px, var(--pd-hero-h) - 88px - 19.5px * var(--wp-kc, 1)) * var(--pd-phone-fill, .925), 876px)); }
  .pd-hero-copy { justify-content: flex-start; }
  .pd-hero-copy > p { margin-bottom: 28px; }
  .pd-actions { margin-top: auto; }
  .pd-picture { aspect-ratio: var(--pd-notes-ratio, 1.4); }
}