/* Demo launcher — quiet editorial page; the screens are the show. */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* mirrors base.css (the launcher loads standalone — keep in sync) */
  --ink:    #111827;
  --ink-2:  #6B7280;
  --ink-3:  #6A7180;
  --accent: #6366F1;
}

body {
  font-family: Lato, "Segoe UI", system-ui, sans-serif;
  background: #FAFAF7;
  color: var(--ink);
  padding: clamp(28px, 5vw, 72px) clamp(20px, 6vw, 96px) 64px;
}

.masthead { max-width: 720px; }
.kicker { font-size: 12px; font-weight: 700; letter-spacing: .28em; color: var(--ink-3); }
.masthead h1 {
  font-size: clamp(48px, 8vw, 96px); font-weight: 900; letter-spacing: -.02em;
  line-height: .95; margin: 6px 0 14px;
}
.tag { font-size: clamp(15px, 1.6vw, 18px); color: var(--ink-2); line-height: 1.55; }

/* alternating asymmetric units */
.unit {
  display: grid; grid-template-columns: minmax(260px, 1fr) 2.2fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: start;
  margin-top: clamp(48px, 7vw, 96px);
}
.unit:nth-child(even) { grid-template-columns: 2.2fr minmax(260px, 1fr); }
.unit:nth-child(even) .blurb { order: 2; }
@media (max-width: 900px) {
  .unit, .unit:nth-child(even) { grid-template-columns: 1fr; }
  .unit:nth-child(even) .blurb { order: 0; }
}

.blurb h2 { font-size: clamp(22px, 2.6vw, 32px); font-weight: 900; letter-spacing: -.01em; }
.blurb p  { margin-top: 10px; color: var(--ink-2); line-height: 1.6; font-size: 15px; }
.blurb ul { margin: 14px 0 0 18px; color: #374151; line-height: 1.7; font-size: 14.5px; }
.blurb b  { font-weight: 700; }

/* live preview tiles — scaled iframes of the real pages */
.previews { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 26px); }

.shot {
  position: relative; display: block;
  border-radius: 14px; overflow: hidden;
  background: #0B0B0D;
  padding: 7px;
  box-shadow: 0 10px 30px rgba(17, 24, 39, .14);
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease;
}
.shot:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(17, 24, 39, .2); }

/* the link is a sibling of the iframe (an iframe may not live inside <a>),
   stretched over the whole tile */
.shot .go { text-decoration: none; }
.shot .go::after { content: ""; position: absolute; inset: 0; border-radius: 14px; }
.shot:has(.go:focus-visible) { outline: 3px solid var(--accent); outline-offset: 3px; }

.shot iframe {
  border: 0; border-radius: 8px; background: #fff;
  pointer-events: none;            /* the tile is one big link */
  transform-origin: top left;
  display: block;
}
/* landscape room tablet: 1280×800 scaled */
.shot.land          { width: calc(1280px * .22 + 14px); }
.shot.land iframe   { width: 1280px; height: 800px; transform: scale(.22); }
.shot.land::after   { content: ""; display: block; padding-top: calc(800 * .22 * 1px - 4px); }
/* portrait executive screen: 800×1280 scaled */
.shot.port          { width: calc(800px * .22 + 14px); }
.shot.port iframe   { width: 800px; height: 1280px; transform: scale(.22); }
.shot.port::after   { content: ""; display: block; padding-top: calc(1280 * .22 * 1px - 4px); }
/* wide status board: 1600×900 scaled */
.shot.wide          { width: calc(1600px * .28 + 14px); }
.shot.wide iframe   { width: 1600px; height: 900px; transform: scale(.28); }
.shot.wide::after   { content: ""; display: block; padding-top: calc(900 * .28 * 1px - 4px); }

.shot .cap {
  position: absolute; left: 12px; bottom: 8px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .03em;
  color: #E5E7EB;
  background: rgba(11, 11, 13, .72);
  padding: 4px 10px; border-radius: 99px;
}

/* hack: iframes are taller than the scaled box — clip them */
.shot { line-height: 0; }
.shot iframe { position: absolute; top: 7px; left: 7px; }

.howto {
  margin-top: clamp(56px, 8vw, 110px);
  max-width: 680px;
  border-top: 2px solid #ECEBE6;
  padding-top: 28px;
}
.howto h2 { font-size: 18px; font-weight: 900; letter-spacing: .01em; }
.howto ol { margin: 12px 0 0 20px; color: #374151; line-height: 1.8; font-size: 14.5px; }
.howto a  { color: var(--ink); }
.howto code, .howto kbd {
  font-family: Consolas, monospace; font-size: .92em;
  background: #EFEEE9; padding: 1px 7px; border-radius: 6px;
}