/* PLAN ABC — Home "Deliverables" mosaic (scoped: every class is prefixed dl-).
   Desktop: a fixed 1440x800 stage scaled to the frame width by js/main.js (initDeliverables).
   <=1024px: the headline plus four key tiles stacked, each scaled down to fit.
   Motion: tiles rise in as they enter, charts fill, and inner elements drift slightly with scroll
   (disabled under prefers-reduced-motion). */

.dl { --dl-ink: #101418; --dl-ink2: #171c22; --dl-paper: #F5F3EF; --dl-white: #fff;
      --dl-ga: #9BE2C4; --dl-gb: #5FC9A2; --dl-gc: #2FA88A; --dl-gm: #2A7D62; --dl-gd: #14543F;
      --dl-line: rgba(16,20,24,.09); }
.dl-stage *, .dl-stage *::before, .dl-stage *::after { box-sizing: border-box; margin: 0; padding: 0; }
.dl { position: relative; padding: 0; font-family: 'Pretendard', 'Archivo', sans-serif; }
.dl-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.dl-frame { max-width: var(--max, 1600px); margin: 0 auto; padding: 0 48px; }   /* same width + gutters as .wrap */
.dl-fit { position: relative; aspect-ratio: 1440 / 800; }
.dl-stage {
  position: absolute; left: 0; top: 0; width: 1440px; height: 800px;
  transform-origin: 0 0; transform: scale(var(--dl-s, 1));
  display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: repeat(3, minmax(0, 1fr)); gap: 10px;
  opacity: 0; transition: opacity .3s ease;
}
.dl-stage.is-ready { opacity: 1; }

/* tiles */
.dl-t { position: relative; border-radius: 22px; overflow: hidden; background: var(--dl-paper); color: var(--dl-ink); }
.dl-stage [data-d] { translate: 0 calc(var(--py, 0) * 1px); }

/* ---- tiles (ported from the approved mosaic) ---- */
.dl-t { position: relative; border-radius: 22px; overflow: hidden; background: var(--dl-paper); color: var(--dl-ink);}
.dl-t2 { grid-column: 5 / 10; grid-row: 1 / 3; background: linear-gradient(160deg, #DCEBE3 0%, #EEF1EA 55%, #F5F3EF 100%);}
.dl-t3 { grid-column: 10 / 13; grid-row: 1;}
.dl-t4 { grid-column: 1 / 5; grid-row: 2; background: #E9EEE9;}
.dl-t5 { grid-column: 10 / 13; grid-row: 2;}
.dl-t6 { grid-column: 1 / 6; grid-row: 3;}
.dl-t7 { grid-column: 6 / 9; grid-row: 3; background: radial-gradient(300px 220px at 30% 20%, #1E6B52 0%, var(--dl-gd) 70%); color: #fff;}
.dl-t8 { grid-column: 9 / 11; grid-row: 3; background: #E4EDE8;}
.dl-t9 { grid-column: 11 / 13; grid-row: 3; background: var(--dl-ink2); color: #fff;}
 .dl-chip {
  position: absolute; left: 14px; bottom: 13px; z-index: 5;
  display: flex; align-items: center; gap: 7px; padding: 4px 11px 4px 4px;
  background: rgba(255,255,255,.94); border-radius: 999px; color: var(--dl-ink);
  font: 800 8.5px 'Archivo', sans-serif; letter-spacing: .1em; text-transform: uppercase;
  box-shadow: 0 3px 10px rgba(0,0,0,.14);}
.dl-chip b { width: 17px; height: 17px; border-radius: 50%; display: grid; place-items: center; font: 900 9px 'Archivo', sans-serif; color: #fff; letter-spacing: 0;}
.dl-chip .dl-a { background: var(--dl-ga); color: var(--dl-gd);}
.dl-chip .dl-b { background: var(--dl-gb);}
.dl-chip .dl-c { background: var(--dl-gc);}
 .dl-laptop { position: absolute; left: 44px; top: 62px; width: 500px;}
.dl-screen { background: #0e1216; border-radius: 14px 14px 4px 4px; padding: 9px 9px 11px; box-shadow: 0 22px 44px rgba(16,20,24,.26), 0 4px 10px rgba(16,20,24,.16);}
.dl-site { background: #fff; border-radius: 6px; height: 312px; overflow: hidden; position: relative;}
.dl-base { width: 572px; height: 13px; margin: 0 -36px; background: linear-gradient(#cfd4d2, #aab0ae); border-radius: 0 0 16px 16px; position: relative; box-shadow: 0 10px 18px rgba(16,20,24,.18);}
.dl-base::after { content: ''; position: absolute; left: 50%; top: 0; width: 70px; height: 5px; transform: translateX(-50%); background: #9aa19f; border-radius: 0 0 6px 6px;}
.dl-nav { display: flex; align-items: center; height: 32px; padding: 0 16px; border-bottom: 1px solid #eef0ee; gap: 14px;}
.dl-logo { display: flex; align-items: center; gap: 6px; font: 800 12px 'Archivo'; letter-spacing: -.01em;}
.dl-logo i { width: 12px; height: 12px; border-radius: 50% 50% 50% 0; background: var(--dl-gc); transform: rotate(-45deg);}
.dl-nav .dl-links { display: flex; gap: 12px; margin-left: auto;}
.dl-nav .dl-links s { display: block; width: 26px; height: 4px; border-radius: 2px; background: #d9dedb;}
.dl-nav .dl-btn { padding: 5px 10px; border-radius: 999px; background: var(--dl-ink); color: #fff; font: 700 8px 'Archivo';}
.dl-hero { display: grid; grid-template-columns: 1.2fr 1fr; gap: 4px; padding: 20px 14px 0 24px; align-items: center;}
.dl-hero .dl-k { font: 800 7.5px 'Archivo'; letter-spacing: .14em; color: var(--dl-gc);}
.dl-hero .dl-title { margin-top: 9px; font: 800 22px/1.1 'Archivo'; letter-spacing: -.02em; white-space: nowrap;}
.dl-hero .dl-title em { font-style: normal; color: var(--dl-gc);}
.dl-hero p { margin-top: 9px; font: 400 9.5px/1.5 'Pretendard'; color: #5b6360;}
.dl-hero .dl-cta { display: inline-block; margin-top: 12px; padding: 7px 14px; border-radius: 999px; background: var(--dl-gc); color: #fff; font: 800 9px 'Archivo';}
.dl-hero .dl-art { position: relative; height: 158px;}
.dl-hero .dl-art .dl-disc { position: absolute; right: -4px; top: 2px; width: 150px; height: 150px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #DDF5EA, #B7E8D2);}
.dl-hero .dl-art svg { position: absolute;}
.dl-feat { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 10px 18px 0 24px;}
.dl-feat div { border: 1px solid #edf0ee; border-radius: 8px; padding: 7px 9px; font: 700 8px/1.3 'Archivo';}
.dl-feat div span { display: block; margin-top: 2px; font: 400 7.5px 'Pretendard'; color: #7a827f;}
.dl-feat div i { display: block; width: 10px; height: 10px; border-radius: 3px; background: var(--dl-ga); margin-bottom: 5px;}
.dl-tags { position: absolute; left: 44px; bottom: 60px; display: flex; gap: 6px;}
.dl-tags span { padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.86); border: 1px solid rgba(16,20,24,.08); font: 800 8px 'Archivo'; letter-spacing: .08em; text-transform: uppercase; color: #3b4340;}
.dl-tags span:first-child { background: var(--dl-ink); color: #fff;}
.dl-phone { position: absolute; right: 24px; bottom: 58px; width: 122px; height: 246px; background: #0e1216; border-radius: 24px; padding: 7px; box-shadow: 0 22px 40px rgba(16,20,24,.32);}
.dl-phone .dl-in { height: 100%; background: #fff; border-radius: 18px; overflow: hidden; position: relative; padding: 16px 10px 0;}
.dl-phone .dl-in::before { content: ''; position: absolute; top: 5px; left: 50%; width: 34px; height: 9px; transform: translateX(-50%); background: #0e1216; border-radius: 6px;}
.dl-phone .dl-pl { display: flex; align-items: center; gap: 4px; font: 800 8px 'Archivo'; margin-top: 4px;}
.dl-phone .dl-pl i { width: 8px; height: 8px; border-radius: 50% 50% 50% 0; background: var(--dl-gc); transform: rotate(-45deg);}
.dl-phone .dl-pimg { margin-top: 8px; height: 82px; border-radius: 10px; background: radial-gradient(circle at 40% 30%, #DDF5EA, #B7E8D2); position: relative;}
.dl-phone .dl-pimg svg { position: absolute; left: 14px; top: 12px; width: 74px;}
.dl-phone h4 { margin-top: 9px; font: 800 12px/1.15 'Archivo'; letter-spacing: -.01em;}
.dl-phone p { margin-top: 3px; font: 400 7px/1.4 'Pretendard'; color: #6a726f;}
.dl-phone .dl-pb { margin-top: 8px; padding: 5px 0; border-radius: 999px; background: var(--dl-gc); color: #fff; text-align: center; font: 800 7.5px 'Archivo';}
.dl-phone .dl-row { margin-top: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 5px;}
.dl-phone .dl-row s { display: block; height: 30px; border-radius: 7px; background: #eef3f0;}
 .dl-card-pad { padding: 18px 20px;}
.dl-hd { display: flex; justify-content: space-between; align-items: center; font: 800 9px 'Archivo'; letter-spacing: .14em; text-transform: uppercase; color: #5b6360;}
.dl-hd em { font-style: normal; padding: 3px 8px; border-radius: 999px; background: #E3F3EC; color: var(--dl-gm); letter-spacing: .08em;}
.dl-big { display: flex; align-items: flex-end; gap: 12px; margin-top: 12px;}
.dl-big strong { font: 900 54px/0.9 'Archivo'; letter-spacing: -.03em; color: var(--dl-gc);}
.dl-big span { padding-bottom: 4px; font: 700 11px/1.35 'Archivo'; color: var(--dl-ink);}
.dl-big span small { display: block; font: 400 10px 'Pretendard'; color: #6a726f; margin-top: 2px;}
.dl-gap { margin-top: 16px; display: grid; gap: 10px;}
.dl-gap .dl-r { display: grid; grid-template-columns: 74px 1fr 22px; align-items: center; gap: 8px; font: 700 8.5px 'Archivo'; color: #3b4340;}
.dl-gap .dl-tr { position: relative; height: 10px; border-radius: 5px; background: #ECEFEC;}
.dl-gap .dl-tr::before { content: ''; position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: #b9c0bc;}
.dl-gap .dl-bar { position: absolute; top: 0; height: 10px; border-radius: 5px;}
.dl-gap .dl-pos { left: 50%; background: linear-gradient(90deg, var(--dl-gb), var(--dl-gc));}
.dl-gap .dl-neg { right: 50%; background: #8a928e;}
.dl-gap .dl-v { text-align: right; color: var(--dl-gm);}
.dl-gap .dl-v.dl-n { color: #6a726f;}
.dl-note { position: absolute; left: 20px; right: 20px; bottom: 52px; display: flex; align-items: center; gap: 6px; font: 700 8.5px 'Archivo'; color: #3b4340;}
.dl-note b { padding: 3px 8px; border-radius: 999px; background: var(--dl-gc); color: #fff; letter-spacing: .06em; font-weight: 800;}
.dl-note i { font-style: normal; color: #9aa19d;}
 .dl-posts { position: absolute; left: 22px; right: 22px; top: 38px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;}
.dl-post { aspect-ratio: 1; border-radius: 14px; padding: 12px; position: relative; overflow: hidden; box-shadow: 0 8px 18px rgba(16,20,24,.12);}
.dl-post .dl-h { display: flex; align-items: center; gap: 5px; font: 700 7px 'Archivo'; opacity: .85;}
.dl-post .dl-h i { width: 10px; height: 10px; border-radius: 50%; background: currentColor; opacity: .9;}
.dl-p1 { background: linear-gradient(150deg, var(--dl-gc), var(--dl-gd)); color: #fff;}
.dl-p1 h5 { margin-top: 12px; font: 800 19px/1.05 'Archivo'; letter-spacing: -.02em;}
.dl-p1 svg { position: absolute; right: 4px; bottom: 2px; width: 70px;}
.dl-p2 { background: #fff;}
.dl-p2 .dl-q { margin-top: 8px; font: 900 34px/0.7 'Archivo'; color: var(--dl-gc);}
.dl-p2 h5 { margin-top: 6px; font: 800 11.5px/1.3 'Pretendard'; letter-spacing: -.02em; word-break: keep-all;}
.dl-p2 p { position: absolute; left: 12px; bottom: 10px; font: 700 7px 'Archivo'; color: #7a827f; letter-spacing: .06em;}
.dl-p3 { background: var(--dl-ink); color: #fff;}
.dl-p3 h5 { margin-top: 10px; font: 800 12px/1.1 'Archivo';}
.dl-p3 ul { list-style: none; margin-top: 8px; display: grid; gap: 5px;}
.dl-p3 li { display: flex; align-items: center; gap: 6px; font: 400 8px 'Pretendard'; color: rgba(255,255,255,.8);}
.dl-p3 li::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: var(--dl-gb);}
.dl-postbar { position: absolute; left: 22px; right: 22px; top: 12px; display: flex; justify-content: space-between; font: 700 8.5px 'Archivo'; letter-spacing: .1em; text-transform: uppercase; color: #6a726f;}
 .dl-t5 h3 { margin-top: 14px; font: 900 34px/1 'Archivo'; letter-spacing: -.03em;}
.dl-t5 .dl-kr { margin-top: 8px; font: 500 11.5px/1.5 'Pretendard'; color: #3b4340; word-break: keep-all;}
.dl-steps { margin-top: 12px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px;}
.dl-steps div { border-radius: 8px; padding: 6px 8px; background: #EEF3F0; font: 700 8px/1.3 'Archivo'; color: #3b4340;}
.dl-steps div b { display: block; font: 900 9px 'Archivo'; color: var(--dl-gc); margin-bottom: 2px;}
.dl-steps .dl-on { background: var(--dl-gc); color: #fff;}
.dl-steps .dl-on b { color: #fff;}
 .dl-cal { margin-top: 12px; display: grid; grid-template-columns: 78px repeat(4, 1fr); gap: 6px;}
.dl-cal .dl-col { font: 800 8px 'Archivo'; letter-spacing: .12em; color: #6a726f; text-align: center; text-transform: uppercase; padding-bottom: 2px;}
.dl-cal .dl-ch { display: flex; align-items: center; font: 800 9px 'Archivo'; color: var(--dl-ink);}
.dl-cal .dl-c { min-height: 28px; border-radius: 7px; display: flex; align-items: center; padding: 0 8px; font: 700 8px/1.15 'Archivo';}
.dl-c.dl-a { background: #DDF4EA; color: var(--dl-gd);}
.dl-c.dl-b { background: #BFECD9; color: var(--dl-gd);}
.dl-c.dl-c { background: var(--dl-gc); color: #fff;}
.dl-c.dl-d { background: var(--dl-ink); color: #fff;}
.dl-c.dl-e { background: #ECEFEC; color: #5b6360;}
 .dl-story { position: absolute; left: 24px; top: 22px; width: 104px; height: 180px; border-radius: 16px; background: var(--dl-paper); color: var(--dl-ink); padding: 12px 11px; box-shadow: 0 18px 34px rgba(0,0,0,.34); overflow: hidden;}
.dl-story .dl-k { font: 800 6.5px 'Archivo'; letter-spacing: .14em; color: var(--dl-gm);}
.dl-story h5 { margin-top: 8px; font: 900 22px/0.98 'Archivo'; letter-spacing: -.03em;}
.dl-story .dl-s2 { margin-top: 4px; font: 800 10px/1.1 'Archivo'; color: var(--dl-gc);}
.dl-story h5 em { font-style: normal; color: var(--dl-gc);}
.dl-story svg { position: absolute; left: 14px; bottom: 32px; width: 76px;}
.dl-story .dl-b { position: absolute; left: 11px; right: 11px; bottom: 10px; padding: 5px 0; text-align: center; border-radius: 999px; background: var(--dl-ink); color: #fff; font: 800 7px 'Archivo';}
.dl-sq { position: absolute; right: 24px; top: 22px; width: 172px; height: 138px; border-radius: 16px; background: linear-gradient(150deg, #E8F8F1, #BDEBD8); color: var(--dl-gd); padding: 14px; box-shadow: 0 18px 34px rgba(0,0,0,.3); overflow: hidden;}
.dl-sq h5 { font: 800 15px/1.12 'Archivo'; letter-spacing: -.02em;}
.dl-sq p { margin-top: 5px; font: 500 8px/1.4 'Pretendard'; color: #2f6e58; word-break: keep-all;}
.dl-sq svg { position: absolute; right: -4px; bottom: -2px; width: 74px;}
.dl-sq .dl-b { position: absolute; left: 14px; bottom: 14px; padding: 5px 11px; border-radius: 999px; background: var(--dl-gd); color: #fff; font: 800 7px 'Archivo';}
.dl-ban { position: absolute; left: 144px; right: 24px; bottom: 50px; height: 40px; border-radius: 10px; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; font: 800 10px 'Archivo';}
.dl-ban span { padding: 4px 9px; border-radius: 999px; background: var(--dl-ga); color: var(--dl-gd); font-size: 7px;}
 .dl-mail { position: absolute; left: 20px; right: 20px; top: 18px; bottom: 50px; background: #fff; border-radius: 10px; box-shadow: 0 12px 24px rgba(16,20,24,.14); overflow: hidden; padding: 10px 11px;}
.dl-mail .dl-top { display: flex; justify-content: space-between; align-items: center; font: 800 8px 'Archivo';}
.dl-mail .dl-top s { display: block; width: 18px; height: 3px; border-radius: 2px; background: #d9dedb;}
.dl-mail .dl-img { margin-top: 8px; height: 54px; border-radius: 7px; background: radial-gradient(circle at 40% 30%, #DDF5EA, #B7E8D2); position: relative;}
.dl-mail .dl-img svg { position: absolute; left: 50%; top: 8px; width: 52px; transform: translateX(-50%);}
.dl-mail h5 { margin-top: 9px; font: 800 12px/1.15 'Archivo'; letter-spacing: -.02em;}
.dl-mail p { margin-top: 3px; font: 400 7.5px/1.4 'Pretendard'; color: #6a726f;}
.dl-mail .dl-b { margin-top: 8px; display: inline-block; padding: 4px 10px; border-radius: 999px; background: var(--dl-gc); color: #fff; font: 800 7px 'Archivo';}
.dl-mail .dl-l { margin-top: 9px; display: grid; gap: 4px;}
.dl-mail .dl-l s { display: block; height: 4px; border-radius: 2px; background: #eef1ef;}
.dl-mail .dl-l s:nth-child(2) { width: 80%;}
.dl-mail .dl-l s:nth-child(3) { width: 60%;}
 .dl-t9 .dl-hd { color: rgba(255,255,255,.6);}
.dl-donut { position: absolute; left: 50%; top: 46px; width: 112px; height: 112px; transform: translateX(-50%);}
.dl-donut .dl-ctr { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; font: 900 20px/1 'Archivo';}
.dl-donut .dl-ctr small { display: block; margin-top: 3px; font: 700 6.5px 'Archivo'; letter-spacing: .12em; color: rgba(255,255,255,.55); text-transform: uppercase;}
.dl-lg { position: absolute; left: 20px; right: 20px; top: 172px; display: grid; gap: 5px; font: 700 8.5px 'Archivo'; color: rgba(255,255,255,.82);}
.dl-lg div { display: flex; align-items: center; gap: 7px;}
.dl-lg i { width: 8px; height: 8px; border-radius: 2px;}
.dl-lg em { margin-left: auto; font-style: normal; color: #fff;}

/* ---------- scroll motion ---------- */
.dl-t { opacity: 0; translate: 0 26px; scale: .975;
        transition: opacity .8s ease, translate .9s cubic-bezier(.2,.7,.2,1), scale .9s cubic-bezier(.2,.7,.2,1), transform .3s ease-out, box-shadow .4s ease; }
.dl-t.is-in { opacity: 1; translate: 0 0; scale: 1; }
.dl-t .dl-bar { transform: scaleX(0); transition: transform .9s cubic-bezier(.2,.7,.2,1) .45s; }
.dl-t .dl-pos { transform-origin: left center; }
.dl-t .dl-neg { transform-origin: right center; }
.dl-t.is-in .dl-bar { transform: scaleX(1); }
.dl-t .dl-seg { stroke-dasharray: 0 88; transition: stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1) .4s; }
.dl-t.is-in .dl-seg { stroke-dasharray: var(--d); }
.dl-t .dl-cal .dl-c { opacity: 0; transform: scale(.85); transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.2,1); transition-delay: calc(.35s + var(--k, 0) * 35ms); }
.dl-t.is-in .dl-cal .dl-c { opacity: 1; transform: none; }
.dl-t .dl-phone { transform: translateY(34px); transition: transform 1s cubic-bezier(.2,.7,.2,1) .35s; }
.dl-t.is-in .dl-phone { transform: none; }
.dl-t .dl-post, .dl-t .dl-story, .dl-t .dl-sq { transform: translateY(18px); transition: transform .9s cubic-bezier(.2,.7,.2,1) .3s; }
.dl-t.is-in .dl-post, .dl-t.is-in .dl-story, .dl-t.is-in .dl-sq { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .dl-t { opacity: 1; translate: none; scale: none; transition: none; }
  .dl-t .dl-bar, .dl-t .dl-cal .dl-c, .dl-t .dl-phone, .dl-t .dl-post, .dl-t .dl-story, .dl-t .dl-sq { opacity: 1; transform: none; transition: none; }
  .dl-t .dl-seg { stroke-dasharray: var(--d); transition: none; }
  .dl-stage [data-d] { translate: none; }
  .dl-core, .dl-stage * { animation: none !important; }
}

/* ---------- hover motion (mouse only, off under reduced motion) ---------- */
@keyframes dlGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes dlPop { 0% { transform: scale(.82); } 55% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes dlBounce { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-9px); } 70% { transform: translateY(2px); } }
@keyframes dlWave { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px) scale(1.05); } }
@keyframes dlPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(47,168,138,.5); } 50% { transform: scale(1.08); box-shadow: 0 0 0 6px rgba(47,168,138,0); } }
@keyframes dlSpin { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@keyframes dlStepBg { 0%, 30% { background: var(--dl-gc); color: #fff; } 34%, 100% { background: #EEF3F0; color: #3b4340; } }
@keyframes dlStepNum { 0%, 30% { color: #fff; } 34%, 100% { color: var(--dl-gc); } }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  /* every tile: lift, deeper shadow (a gentle pointer tilt is added by js/main.js) */
  .dl-t:not(.dl-t1).is-in:hover { translate: 0 -8px; z-index: 3; box-shadow: 0 30px 52px rgba(0, 0, 0, .42); }

  /* 2 · detail page: the page scrolls inside the laptop, the phone lifts, the bowls bounce */
  .dl-hero, .dl-feat { transition: translate .9s cubic-bezier(.2,.7,.2,1); }
  .dl-t2 .dl-nav { position: relative; z-index: 2; background: #fff; }  /* stays put while the page scrolls under it */
  .dl-t2:hover .dl-hero, .dl-t2:hover .dl-feat { translate: 0 -52px; }
  .dl-t2:hover .dl-phone { transform: translateY(-16px) rotate(-2.5deg); transition-delay: 0s; }
  .dl-t2:hover .dl-art svg, .dl-t2:hover .dl-pimg svg { animation: dlBounce .8s ease; }
  .dl-t2:hover .dl-art svg:nth-of-type(2) { animation-delay: .12s; }

  /* 3 · diagnosis report: bars refill, the number pops */
  .dl-t3:hover .dl-bar { animation: dlGrow .9s cubic-bezier(.2,.7,.2,1); }
  .dl-t3:hover .dl-big strong { display: inline-block; animation: dlPop .6s cubic-bezier(.2,.7,.2,1); }

  /* 4 · social: the three posts fan out, the hovered one comes forward */
  .dl-t4 .dl-post { transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
  .dl-t4:hover .dl-p1 { transform: translateX(-12px) rotate(-5deg); }
  .dl-t4:hover .dl-p2 { transform: translateY(-10px); }
  .dl-t4:hover .dl-p3 { transform: translateX(12px) rotate(5deg); }
  .dl-t4 .dl-post:hover { transform: translateY(-18px) scale(1.07) rotate(0deg); z-index: 4; box-shadow: 0 22px 34px rgba(16,20,24,.28); }

  /* 5 · strategy card: the highlight walks 01 → 02 → 03 */
  .dl-t5:hover .dl-steps div { animation: dlStepBg 2.7s infinite; }
  .dl-t5:hover .dl-steps div:nth-child(2) { animation-delay: .9s; }
  .dl-t5:hover .dl-steps div:nth-child(3) { animation-delay: 1.8s; }
  .dl-t5:hover .dl-steps div b { animation: dlStepNum 2.7s infinite; }
  .dl-t5:hover .dl-steps div:nth-child(2) b { animation-delay: .9s; }
  .dl-t5:hover .dl-steps div:nth-child(3) b { animation-delay: 1.8s; }

  /* 6 · calendar: a wave runs across the chips, each chip lifts on its own */
  .dl-t6:hover .dl-cal .dl-c { animation: dlWave .8s ease; animation-delay: calc(var(--k, 0) * 40ms); }
  .dl-t6 .dl-cal .dl-c { transition: transform .3s cubic-bezier(.2,.7,.2,1), box-shadow .3s ease; }
  .dl-t6 .dl-cal .dl-c:hover { transform: translateY(-4px) scale(1.06); box-shadow: 0 8px 16px rgba(16,20,24,.22); animation: none; }

  /* 7 · ads: the two creatives drift apart, the banner strip slides out */
  .dl-t7 .dl-story, .dl-t7 .dl-sq, .dl-t7 .dl-ban { transition: transform .6s cubic-bezier(.2,.7,.2,1), background .3s ease; }
  .dl-t7:hover .dl-story { transform: translate(-8px, -8px) rotate(-5deg); }
  .dl-t7:hover .dl-sq { transform: translate(8px, -6px) rotate(3deg); }
  .dl-t7:hover .dl-ban { transform: translateX(10px); background: rgba(255,255,255,.18); }

  /* 8 · email: the message lifts, the button pulses */
  .dl-t8 .dl-mail { transition: transform .6s cubic-bezier(.2,.7,.2,1), box-shadow .4s ease; }
  .dl-t8:hover .dl-mail { transform: translateY(-12px) rotate(-1.5deg); box-shadow: 0 22px 34px rgba(16,20,24,.24); }
  .dl-t8:hover .dl-mail .dl-b { animation: dlPulse 1s ease infinite; }

  /* 9 · budget: the donut turns, a hovered segment swells, legend rows react */
  .dl-t9:hover .dl-donut svg { animation: dlSpin 9s linear infinite; }
  .dl-t9 .dl-seg { transition: stroke-dasharray 1.1s cubic-bezier(.2,.7,.2,1) .4s, stroke-width .3s ease; }
  .dl-t9 .dl-seg:hover { stroke-width: 6.6; }
  .dl-lg div { transition: transform .3s cubic-bezier(.2,.7,.2,1); }
  .dl-lg div:hover { transform: translateX(6px); }
  .dl-lg div:hover em { color: var(--dl-ga); }
}

/* ---------- stacked layout (tablet / phone): headline + the four key tiles ---------- */
@media (max-width: 1024px) {
  .dl-frame { max-width: none; padding: 0 32px; }
  .dl-fit { aspect-ratio: auto; }
  .dl-stage { position: static; width: auto; height: auto; transform: none; display: flex; flex-direction: column; align-items: center; gap: 14px; opacity: 1; }
  .dl-t { display: none; }
  .dl-t2, .dl-t3, .dl-t4, .dl-t7 { display: block; flex: none; }
    .dl-t2 { order: 1; width: 594px; height: 530px; }
  .dl-t7 { order: 2; width: 352px; height: 260px; }
  .dl-t4 { order: 3; width: 473px; height: 530px; }
  .dl-t3 { order: 4; width: 352px; height: 260px; }
}
@media (max-width: 720px) { .dl-frame { padding: 0 24px; } }

/* ---------- Instagram tile: three posts in a row on desktop; tall 2x2 (plus a Reels post) when stacked ---------- */
.dl-p4 { display: none; }
@media (max-width: 1024px) {
  .dl-t4 .dl-posts { top: 46px; left: 22px; right: 22px; grid-template-columns: repeat(2, 1fr); gap: 14px; }
  .dl-t4 .dl-post { padding: 16px; border-radius: 18px; }
  .dl-t4 .dl-h { font-size: 9.5px; gap: 6px; }
  .dl-t4 .dl-h i { width: 13px; height: 13px; }
  .dl-t4 .dl-p1 h5 { margin-top: 16px; font-size: 27px; line-height: 1.05; }
  .dl-t4 .dl-p1 svg { right: 8px; bottom: 6px; width: 100px; }
  .dl-t4 .dl-q { margin-top: 12px; font-size: 46px; }
  .dl-t4 .dl-p2 h5 { margin-top: 8px; font-size: 15px; line-height: 1.3; }
  .dl-t4 .dl-p2 p { left: 16px; bottom: 14px; font-size: 9px; }
  .dl-t4 .dl-p3 h5 { margin-top: 14px; font-size: 16px; }
  .dl-t4 .dl-p3 ul { margin-top: 12px; gap: 7px; }
  .dl-t4 .dl-p3 li { font-size: 10.5px; gap: 8px; }
  .dl-t4 .dl-p3 li::before { width: 6px; height: 6px; }
  .dl-p4 { display: block; background: linear-gradient(160deg, #1E6B52, #0d3a2c); color: #fff; }
  .dl-p4 h5 { position: absolute; left: 16px; bottom: 34px; font: 800 17px/1.1 'Archivo', sans-serif; letter-spacing: -.02em; }
  .dl-p4 em { position: absolute; left: 16px; bottom: 15px; font: 700 8.5px 'Archivo', sans-serif; font-style: normal; letter-spacing: .12em; color: rgba(255,255,255,.7); }
  .dl-play { position: absolute; right: 16px; top: 16px; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.92); }
  .dl-play::after { content: ''; position: absolute; left: 16px; top: 12px; border-left: 12px solid var(--dl-gd); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
}
@media (max-width: 1024px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dl-t4:hover .dl-p1 { transform: translate(-6px, -6px) rotate(-4deg); }
  .dl-t4:hover .dl-p2 { transform: translate(6px, -6px) rotate(4deg); }
  .dl-t4:hover .dl-p3 { transform: translate(-6px, 6px) rotate(3deg); }
  .dl-t4:hover .dl-p4 { transform: translate(6px, 6px) rotate(-3deg); }
}

/* ---------- desktop: the headline sits in the top-left cell of the mosaic (same type as every section head) ---------- */
@media (min-width: 1025px) {
  .dl > .wrap { position: absolute; left: 0; right: 0; top: 0; z-index: 2; }
  .dl .section-head { width: calc((33.333% - 7px) / var(--dl-hk, 1)); max-width: none; margin: 0; scale: var(--dl-hk, 1); transform-origin: 0 0; }   /* --dl-hk (js): shrink only when the cell is shorter than the headline */
}