/* Планшет (761–1100) і ПК (> 1100): розмітка [data-layout=d] */
.D { --pad: clamp(24px, 5vw, 72px); }
.D .d-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 1360px; margin: 0 auto; padding: 14px var(--pad); }
.D .brand { font: 650 15px/1 var(--mono); letter-spacing: .02em; }
.D .d-top-r { display: inline-flex; align-items: center; gap: 12px; }
.D .d-top-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 10px; border: 1.5px solid var(--ink);
  font: 600 14.5px/1 var(--font); text-decoration: none; }
.D .d-top-cta:hover { background: var(--ink); color: var(--bg); }
.D section { max-width: 1360px; margin: 0 auto; padding: clamp(56px, 8vw, 120px) var(--pad); }
.D h2 { font: 700 clamp(30px, 3.4vw, 46px)/1.08 var(--display); letter-spacing: -.02em; }
.D .d-head { max-width: 760px; margin: 0 0 36px; }
.D .d-sub { margin-top: 16px; font-size: 18px; color: var(--ink-2); max-width: 640px; }
.D .d-cap { margin-top: 14px; font-size: 13.5px; color: var(--ink-2); max-width: 560px; }

/* Перший екран */
.D .d-hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); gap: clamp(32px, 4vw, 72px); align-items: center; padding-top: clamp(16px, 2.4vw, 40px); padding-bottom: clamp(48px, 6vw, 96px); }
.D .d-h1 { font: 760 clamp(40px, 4.6vw, 68px)/1.02 var(--display); letter-spacing: -.03em; }
.D .d-lead { margin-top: 22px; font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 560px; }
.D .d-act { margin-top: 30px; }
.D .d-shop { margin: 0; position: relative; }
.D .d-card { padding: 18px 18px 34px; }
.D .d-slot { height: clamp(330px, 27vw, 420px); }
.D .d-pinfo { display: grid; grid-template-columns: minmax(0, 1fr) 180px; grid-template-rows: auto auto; column-gap: 20px; row-gap: 4px; align-items: center; padding: 16px 4px 4px; }
.D .d-pinfo .p-meta { grid-column: 1; }
.D .d-pinfo .p-name { grid-column: 1; }
.D .d-pinfo .p-dims { grid-column: 1; }
.D .d-pinfo .sk { display: none; }
.D .d-pinfo .p-buy { grid-column: 2; grid-row: 1 / span 3; }
.D .d-hero-code { position: relative; z-index: 2; margin: -20px 22px 0 auto; max-width: 600px; }
.D .d-hero-code pre { font-size: 13px; }

/* Живий приклад */
.D .d-live-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(28px, 3.5vw, 56px); align-items: start; }
.D .d-conf .code { margin-top: 6px; }
.D .d-page-body { display: flex; flex-direction: column; gap: 12px; padding: 22px; }
.D .d-host { position: relative; min-height: 520px; border-radius: 12px; background: radial-gradient(110% 90% at 40% 20%, #f7f5f0, #ebe7df); display: flex; flex-direction: column; justify-content: center; }
.D .d-host.btn-mode { min-height: 0; padding: 18px; background: var(--bg-2); justify-content: flex-start; }
.D .d-host-wait { text-align: center; color: #565b6c; font-size: 14px; }
.D .d-host [data-showgen-button] { align-self: flex-start; min-height: 48px; padding: 0 20px; border-radius: 10px; border: 0; background: var(--ink); color: var(--bg);
  font: 600 15px/1 var(--font); cursor: pointer; }
.D .d-host [data-showgen] { width: 100%; }
.D [data-only][hidden] { display: none; }

/* Куди вставити */
.D .d-plats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; counter-reset: p; }
.D .d-plats li { counter-increment: p; position: relative; padding: 22px 20px 24px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.D .d-plats li::before { content: "0" counter(p); display: block; font: 600 12px/1 var(--mono); color: var(--accent); margin-bottom: 18px; }
.D .d-plats b { display: block; font: 700 21px/1.2 var(--display); margin-bottom: 8px; }
.D .d-plats span { color: var(--ink-2); font-size: 15px; }

/* AR */
.D .d-ar { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: center; }
.D .d-ar-pc { margin-top: 18px; display: inline-block; padding: 8px 14px; border-radius: 10px; background: var(--card); border: 1px dashed var(--line); font-size: 14.5px; }
.D .d-ar-cards { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.D .d-ar-cards li { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 16px; padding: 18px 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.D .d-ar-cards b { font: 650 14px/1.35 var(--mono); color: var(--accent); }
.D .d-ar-cards span { color: var(--ink-2); font-size: 15px; }

/* Ролик */
.D .d-film-box { position: relative; border-radius: 18px; overflow: hidden; background: #14151d; aspect-ratio: 16 / 9; box-shadow: 0 30px 60px -30px var(--shade); }
.D .d-film-box video { width: 100%; height: 100%; object-fit: cover; }

/* Під капотом */
.D .d-fact-list { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.D .d-fact-list li { padding: 20px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); }
.D .d-fact-list code { display: inline-block; margin-bottom: 12px; padding: 4px 8px; border-radius: 6px; background: var(--code-bg); color: var(--c-str); font: 500 12.5px/1.3 var(--mono); }
.D .d-fact-list span { display: block; color: var(--ink-2); font-size: 15px; }
.D .d-styles { margin-top: 20px; font-size: 16px; }

/* Виробникам */
.D .d-pro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); border-top: 1px solid var(--line); }
.D .d-pro-text p { font-size: 17px; color: var(--ink-2); }
.D .d-pro-text p + p { margin-top: 14px; }
.D .d-pro-text a { color: var(--accent); font-weight: 600; text-underline-offset: 3px; }

/* Фінал */
.D .d-final { text-align: center; padding-bottom: clamp(64px, 8vw, 120px); }
.D .d-final-h { font: 760 clamp(34px, 4vw, 56px)/1.05 var(--display); letter-spacing: -.025em; }
.D .d-final .d-sub { margin: 16px auto 28px; }
.D .d-foot { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; max-width: 1360px; margin: 0 auto; padding: 24px var(--pad) 36px;
  border-top: 1px solid var(--line); color: var(--ink-2); font-size: 13px; }

/* Планшет: ті самі блоки однією колонкою, без hover-залежностей */
@media (max-width: 1100px) {
  .D .d-hero, .D .d-live-grid, .D .d-ar, .D .d-pro { grid-template-columns: minmax(0, 1fr); }
  .D .d-copy { max-width: 680px; }
  .D .d-plats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .D .d-fact-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .D .d-hero-code { margin: -20px 14px 0 auto; }
  .D .d-host { min-height: 520px; }
}
@media (max-width: 860px) {
  .D .d-pinfo { grid-template-columns: minmax(0, 1fr) 120px; }
  .D .d-ar-cards li { grid-template-columns: minmax(0, 1fr); gap: 6px; }
}