/* zakordon — ПК (> 1100) і планшет (761–1100, своя сітка нижче): аркуші кольорового паперу з жорсткими тінями */
.D { --g: clamp(24px, 4vw, 64px); --max: 1280px; }
.D > * { max-width: var(--max); margin-left: auto; margin-right: auto; }
.D .d-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px var(--g); }
.D .brand { font: 900 16px/1 var(--heavy); letter-spacing: -.01em; }
.D .brand::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 8px; vertical-align: -1px; background: var(--red); box-shadow: 2px 2px 0 var(--hard); }
.D .d-top-r { display: flex; align-items: center; gap: 14px; }
.D .d-top-cta { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border: 2px solid var(--ink); font-weight: 700; text-decoration: none; box-shadow: 3px 3px 0 var(--hard); }
.D .d-top-cta:hover { background: var(--ink); color: var(--paper); }

.D .d-hero { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 64px); align-items: start; padding: 24px var(--g) 56px; }
.D .d-h1 { font: 900 clamp(44px, 4.9vw, 74px)/1.02 var(--heavy); letter-spacing: -.035em; margin: 0 0 24px; }
.D .d-h1 .strip + .strip { margin-top: .08em; }
.D .d-h1 .strip:last-child { font-size: .56em; line-height: 1.15; letter-spacing: -.02em; margin-top: .45em; max-width: 22ch; }
.D .d-lead { font-size: 18px; line-height: 1.6; margin: 0 0 26px; max-width: 54ch; }
.D .pick { margin-bottom: 26px; }
.D .opt { flex: 1 1 220px; max-width: 300px; }
.D .d-act { display: block; }
.D .d-stage { margin: 0; position: sticky; top: 16px; }
.D .d-frame { height: min(68vh, 620px); min-height: 420px; }

.D .d-h2 { font: 900 clamp(30px, 3.2vw, 46px)/1.08 var(--heavy); letter-spacing: -.03em; margin: 0 0 28px; max-width: 24ch; }
.D .cutline { margin: 0 var(--g); }

.D .d-three { padding: 56px var(--g) 64px; }
.D .d-three-grid { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 28px; align-items: start; }
.leaf { position: relative; padding: 26px 24px 28px; border: 2px solid var(--ink); box-shadow: 8px 8px 0 var(--hard); }
.leaf h3 { font: 900 22px/1.15 var(--heavy); letter-spacing: -.02em; margin: 0 0 10px; }
.leaf p { margin: 0 0 14px; line-height: 1.55; }
.leaf .leaf-k { display: inline-block; font: 700 12px/1 var(--font); letter-spacing: .12em; text-transform: uppercase; padding: 6px 8px; margin: 0 0 14px; background: var(--paper); color: var(--ink); border: 2px solid var(--ink); }
.leaf-red { background: var(--red); color: var(--red-ink); transform: rotate(-.6deg); }
.leaf-blue { background: var(--blue); color: var(--blue-ink); transform: rotate(.5deg); margin-top: 26px; }
.leaf-kraft { background: var(--kraft-2); color: var(--ink); transform: rotate(-.3deg); margin-top: 8px; }
.leaf .sheet { margin-top: 6px; }
.leaf .legend { width: fit-content; margin-top: 0; padding: 6px 10px; background: #fff; color: #17140f; border: 2px solid var(--ink); border-top: 0; }
.ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ticks li { padding-left: 26px; position: relative; line-height: 1.45; }
.ticks li::before { content: ""; position: absolute; left: 0; top: .35em; width: 12px; height: 12px; background: var(--blue-ink); box-shadow: 2px 2px 0 var(--hard); }
.nums { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 4px 0 0; }
.nums dt { color: var(--ink-2); }
.nums dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }

.D .d-board { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: center; padding: 40px var(--g) 64px; }
.D .d-board-copy p { font-size: 17px; line-height: 1.6; margin: 0; max-width: 50ch; }

.D .d-film { padding: 56px var(--g); }
.D .d-film-box { position: relative; aspect-ratio: 16 / 9; background: var(--paper-2); border: 2px solid var(--ink); box-shadow: 10px 10px 0 var(--hard); overflow: hidden; }
.D .d-film-box video { width: 100%; height: 100%; object-fit: cover; }

.D .d-steps { padding: 40px var(--g) 56px; }
.D .d-steps-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.D .d-steps-list li { padding: 22px 22px 24px; background: var(--paper); border: 2px solid var(--ink); box-shadow: 6px 6px 0 var(--hard); }
.D .d-steps-list b { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: 14px; background: var(--ink); color: var(--paper); font: 900 22px/1 var(--heavy); }
.D .d-steps-list h3 { font: 900 20px/1.2 var(--heavy); margin: 0 0 8px; }
.D .d-steps-list p { margin: 0; color: var(--ink-2); line-height: 1.55; }

.D .d-final { padding: 64px var(--g) 80px; text-align: center; }
.D .d-final-h { font: 900 clamp(34px, 4vw, 58px)/1.05 var(--heavy); letter-spacing: -.035em; margin: 0 auto 28px; max-width: 20ch; }
.D .d-final .note { margin-left: auto; margin-right: auto; max-width: 60ch; }
.D .d-foot { display: flex; justify-content: space-between; gap: 24px; padding: 22px var(--g) 30px; border-top: 2px dashed var(--line); color: var(--ink-2); font-size: 13.5px; }

/* ---------- Планшет 761–1100: своя сітка (дотик, без ховерів) ---------- */
html[data-layout=tablet] .D { --g: 32px; }
html[data-layout=tablet] .D .d-hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; padding-bottom: 40px; }
html[data-layout=tablet] .D .d-h1 { font-size: clamp(34px, 4.9vw, 52px); }
html[data-layout=tablet] .D .d-lead { font-size: 16px; margin-bottom: 20px; }
html[data-layout=tablet] .D .pick { flex-direction: column; }
html[data-layout=tablet] .D .opt { max-width: none; flex: none; }
html[data-layout=tablet] .D .d-stage { top: 12px; }
html[data-layout=tablet] .D .d-frame { height: min(60vh, 560px); min-height: 380px; }
html[data-layout=tablet] .D .d-three-grid { grid-template-columns: 1fr 1fr; }
html[data-layout=tablet] .D .leaf-red { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; transform: none; }
html[data-layout=tablet] .D .leaf-red > .leaf-k, html[data-layout=tablet] .D .leaf-red > h3, html[data-layout=tablet] .D .leaf-red > p { grid-column: 1; }
html[data-layout=tablet] .D .leaf-red > .sheet { grid-column: 2; grid-row: 1 / span 4; align-self: start; }
html[data-layout=tablet] .D .leaf-red > .legend { grid-column: 1; }
html[data-layout=tablet] .D .leaf-red > .leaf-k, html[data-layout=tablet] .D .leaf-red > .legend { justify-self: start; align-self: start; }
html[data-layout=tablet] .D .leaf-blue, html[data-layout=tablet] .D .leaf-kraft { margin-top: 0; transform: none; }
html[data-layout=tablet] .D .d-board { grid-template-columns: 1fr; gap: 24px; }
html[data-layout=tablet] .D .d-steps-list { grid-template-columns: 1fr; }
html[data-layout=tablet] .D .d-steps-list li { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; }
html[data-layout=tablet] .D .d-steps-list b { grid-row: 1 / span 2; margin: 0; }
html[data-layout=tablet] .D .d-foot { flex-direction: column; gap: 6px; }