/* Screenshot Device Mockup landing page only (/tools/screenshot-device-mockup). */

.tp-dm{--dm-ink:#071b35;--dm-muted:#4d5f77;--dm-line:#d7e1ee;--dm-blue:#1f5cf0;--dm-soft:#f4f7fc}
.tp-dm.mt-public{padding-top:clamp(18px,3vw,44px)}

/* hero: copy + drop zone, then the real exports */
.tp-dm-hero{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
@media (min-width:980px){
  .tp-dm-hero{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);column-gap:clamp(32px,4vw,60px)}
}
.tp-dm-copy{min-width:0}
.tp-dm-copy h1{margin:10px 0 0;color:var(--dm-ink);font-size:clamp(1.9rem,4vw,3.3rem);line-height:1.04;letter-spacing:-.045em;overflow-wrap:anywhere}
.tp-dm-lede{margin:14px 0 0;color:var(--dm-muted);font-size:1.06rem;line-height:1.6}
.tp-dm-copy .wt-drop{max-width:none;margin-top:20px}
.tp-dm-copy .wt-drop-meta b{font-weight:800}
.tp-dm-copy .wt-drop-alt a{display:inline-flex;align-items:center;min-height:40px}
.tp-dm-facts{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:8px}
.tp-dm-facts li{position:relative;padding-left:22px;color:var(--dm-ink);font-size:.95rem;line-height:1.5}
.tp-dm-facts li::before{content:"";position:absolute;left:4px;top:.55em;width:8px;height:8px;border-radius:2px;background:var(--dm-blue)}

/* the exports */
.tp-dm-show{min-width:0;margin:0;padding:clamp(14px,2vw,22px);border:1px solid var(--dm-line);border-radius:20px;background:#fff;box-shadow:0 22px 56px -34px rgba(7,27,53,.5)}
.tp-dm-show-head{display:grid;gap:4px;margin:0 0 14px}
.tp-dm-show-head span{color:#2d55b4;font-size:.76rem;font-weight:850;letter-spacing:.08em;text-transform:uppercase}
.tp-dm-show-head strong{color:var(--dm-ink);font-size:clamp(1.08rem,1.8vw,1.3rem);letter-spacing:-.02em}

/* checkerboard shows that the phone PNG really is transparent */
.tp-dm-stage{position:relative;padding-bottom:12%;border-radius:14px;background-color:#fff;background-image:linear-gradient(45deg,#eef2f8 25%,transparent 25%,transparent 75%,#eef2f8 75%),linear-gradient(45deg,#eef2f8 25%,transparent 25%,transparent 75%,#eef2f8 75%);background-size:20px 20px;background-position:0 0,10px 10px}
.tp-dm-stage img{display:block;height:auto}
.tp-dm-browser{width:86%;border-radius:12px}
.tp-dm-phone{position:absolute;right:0;bottom:0;width:33%}

/* before / after */
.tp-dm-ba{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-top:14px}
@media (min-width:600px){.tp-dm-ba{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tp-dm-ba-item{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;row-gap:6px;align-items:center;padding:10px 12px;border:1px solid var(--dm-line);border-radius:12px;background:var(--dm-soft)}
.tp-dm-thumb{grid-row:1/3;display:block;height:auto;border:1px solid var(--dm-line);border-radius:6px;background:#fff}
.tp-dm-thumb--d{width:96px}
.tp-dm-thumb--m{width:40px}
.tp-dm-ba-item p{margin:0;color:var(--dm-muted);font-size:.84rem;line-height:1.4}
.tp-dm-ba-item b{display:block;color:var(--dm-ink);font-size:.72rem;font-weight:850;letter-spacing:.07em;text-transform:uppercase}
.tp-dm-ba-item .tp-dm-after b{color:#1d4fc4}
.tp-dm-ba-item .tp-dm-after b::before{content:"\2192\00a0"}
.tp-dm-note{margin:12px 0 0;color:var(--dm-muted);font-size:.84rem;line-height:1.5}

/* frames table */
.tp-dm-intro{max-width:760px;margin:0 0 16px;color:var(--dm-muted);line-height:1.6}
.tp-dm-table{max-width:100%;overflow-x:auto;border:1px solid var(--dm-line);border-radius:14px;background:#fff}
.tp-dm-table:focus-visible{outline:3px solid var(--dm-blue);outline-offset:2px}
.tp-dm-table table{width:100%;min-width:560px;border-collapse:collapse;font-size:.92rem}
.tp-dm-table th,.tp-dm-table td{padding:12px 14px;border-bottom:1px solid var(--dm-line);text-align:left;vertical-align:top;line-height:1.45}
.tp-dm-table thead th{background:var(--dm-soft);color:var(--dm-muted);font-size:.74rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.tp-dm-table tbody th{color:var(--dm-ink);font-weight:800;white-space:nowrap}
.tp-dm-table td:first-of-type,.tp-dm-table td:last-child{white-space:nowrap}
.tp-dm-table tbody tr:last-child th,.tp-dm-table tbody tr:last-child td{border-bottom:0}
.tp-dm-small{max-width:760px;margin:12px 0 0;color:var(--dm-muted);font-size:.88rem;line-height:1.55}

.tp-dm code{padding:1px 5px;border-radius:5px;background:var(--dm-soft);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.9em}
.tp-dm a:focus-visible{outline:3px solid var(--dm-blue);outline-offset:2px}

@media (max-width:420px){
  .tp-dm-thumb--d{width:80px}
  .tp-dm-show{padding:12px}
}

.tp-dm-copy .wt-drop-alt{margin:0;gap:0 18px}

/* small screens: drop zone first, then the exports, then the short fact list; the table becomes stacked rows */
@media (max-width:979px){
  .tp-dm-hero{gap:0}
  .tp-dm-copy{display:contents}
  .tp-dm-show{order:1;margin-top:24px}
  .tp-dm-facts{order:2;margin-top:22px}
}
@media (max-width:639px){
  .tp-dm-table{overflow:visible}
  .tp-dm-table table{min-width:0}
  .tp-dm-table table,.tp-dm-table tbody,.tp-dm-table tr,.tp-dm-table th,.tp-dm-table td{display:block}
  .tp-dm-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .tp-dm-table tr{padding:12px 14px;border-bottom:1px solid var(--dm-line)}
  .tp-dm-table tbody tr:last-child{border-bottom:0}
  .tp-dm-table tbody th{padding:0 0 6px;border:0;font-size:1rem}
  .tp-dm-table td,.tp-dm-table td:first-of-type,.tp-dm-table td:last-child{display:grid;grid-template-columns:7.2em minmax(0,1fr);gap:10px;padding:3px 0;border:0;white-space:normal}
  .tp-dm-table td::before{content:attr(data-label);color:var(--dm-muted);font-size:.8rem;font-weight:700;line-height:1.6}
}