/* ============================================================
   Digital Marketing — Lecture Deck system
   Complements the workbook. Same editorial language, tuned
   for projection at 1920×1080.
   ============================================================ */

@import url('../shared/tokens.css');

* { box-sizing: border-box; }

deck-stage:not(:defined) { visibility: hidden; }

html, body { margin: 0; background: #0d0a07; }

deck-stage {
  --pad: 104px;
  --ts: 1.0;    /* global text scale — classroom readability; Tweaks panel can raise it */
  font-family: var(--f-body);
  color: var(--ink);
}

/* Each slotted <section> is positioned by the component to fill the
   1920×1080 canvas. We style an inner .slide to own layout + padding. */
.slide {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pad) var(--pad) 134px;
  background: var(--paper);
  overflow: hidden;
}
.slide--center { justify-content: center; }

/* ---- paper grain / hairline frame for editorial feel ---- */
.slide::after {
  content: '';
  position: absolute;
  inset: 40px;
  border: 1px solid var(--rule-soft);
  pointer-events: none;
}
.slide--bleed::after { display: none; }

/* ---------- shared chrome ---------- */
.kicker {
  font-family: var(--f-mono);
  font-size: calc(24px * var(--ts));
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 18px;
}
.kicker::before {
  content: '';
  width: 54px;
  height: 2px;
  background: var(--red);
  flex: none;
}
.kicker--plain::before { display: none; }

.slide__foot {
  position: absolute;
  left: var(--pad);
  right: var(--pad);
  bottom: 56px;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--f-mono);
  font-size: 15px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ash);
  border-top: 1px solid var(--rule);
  padding-top: 14px;
}
.slide__foot .pg { color: var(--ink-2); }
.slide__foot em { font-style: italic; font-family: var(--f-display); text-transform: none; letter-spacing: 0; font-size: 18px; color: var(--ink-2); }

/* ---------- type ---------- */
.eyebrow {
  font-family: var(--f-mono);
  font-size: calc(24px * var(--ts));
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}
h1.headline {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 120px;
  line-height: 0.94;
  letter-spacing: -0.035em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.rule-blk { width: 96px; height: 8px; background: var(--red); margin: 8px 0; flex: none; }
.slide--dark .rule-blk { background: var(--red-bright); }
h2.title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: calc(70px * var(--ts));
  line-height: 1.02;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.lead {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 400;
  font-size: calc(43px * var(--ts));
  line-height: 1.3;
  color: var(--ink-2);
  margin: 0;
  max-width: 26ch;
  text-wrap: pretty;
}
.body {
  font-family: var(--f-body);
  font-size: calc(40px * var(--ts));
  line-height: 1.46;
  color: var(--ink);
  margin: 0;
  text-wrap: pretty;
}
.body strong { font-weight: 700; color: var(--ink); }
.slide--dark .body strong { color: var(--white); }
.red { color: var(--red); }
.hl {
  background: linear-gradient(transparent 58%, var(--red-tint) 58%);
  padding: 0 0.06em;
  color: var(--ink);
  font-weight: 600;
}

/* ---------- dark variant ---------- */
.slide--dark { background: var(--ink); }
.slide--dark::after { border-color: rgba(255,255,255,0.12); }
/* oxblood cover field — B's projection muscle, used for the cover + rare punctuation */
.slide--oxblood { background: #5a0e0b; }
.slide--oxblood::after { border-color: rgba(255,255,255,0.15); }
.slide--dark h1.headline,
.slide--dark h2.title,
.slide--dark .statement { color: var(--white); }
.slide--dark .lead { color: var(--on-dark-1); }
.slide--dark .body { color: var(--on-dark-1); }
.slide--dark .eyebrow { color: var(--on-dark-2); }
.slide--dark .slide__foot { color: var(--on-dark-3); border-color: rgba(255,255,255,0.16); }
.slide--dark .slide__foot .pg { color: var(--on-dark-2); }
.slide--dark .slide__foot em { color: var(--on-dark-2); }
.slide--dark .kicker { color: var(--red-bright); }
.slide--dark .kicker::before { background: var(--red-bright); }
.slide--dark .hl { background: linear-gradient(transparent 58%, rgba(200,48,42,0.42) 58%); color: var(--white); }

/* ---------- layout helpers ---------- */
.stack { display: flex; flex-direction: column; gap: 32px; }
.grow { flex: 1; min-height: 0; }
.row { display: flex; gap: 40px; }
.center-block { max-width: 30ch; }

/* two-column split: text left, figure right */
.split {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  min-height: 0;
}
.split--40 { grid-template-columns: 0.8fr 1.2fr; }
.split--60 { grid-template-columns: 1.2fr 0.8fr; }

/* numbered/bulleted points */
.points { display: flex; flex-direction: column; gap: 26px; margin: 0; padding: 0; list-style: none; }
.points li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: start;
  font-family: var(--f-body);
  font-size: calc(39px * var(--ts));
  line-height: 1.4;
  color: var(--ink);
}
.points li .mk {
  font-family: var(--f-display);
  font-style: italic;
  font-weight: 700;
  font-size: calc(40px * var(--ts));
  color: var(--red);
  line-height: 1.3;
  min-width: 1.4ch;
}
.points li strong { font-weight: 700; }
.slide--dark .points li { color: var(--on-dark-1); }
.slide--dark .points li .mk { color: var(--red-bright); }
.points li strong { color: var(--ink); font-weight: 600; }
.slide--dark .points li strong { color: var(--white); }

/* compare cards (two-up) */
.cards2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.cards2 > .card { background: var(--paper); padding: 44px 46px; display: flex; flex-direction: column; gap: 18px; }
.card__tag {
  font-family: var(--f-mono);
  font-size: 20px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ash);
  font-weight: 500;
}
.card__tag.is-red { color: var(--red); }
.card h3 { font-family: var(--f-display); font-weight: 700; font-size: calc(42px * var(--ts)); letter-spacing: -0.015em; margin: 0; color: var(--ink); }
.card p { font-family: var(--f-body); font-size: calc(30px * var(--ts)); line-height: 1.45; color: var(--ink); margin: 0; }
.card ul { margin: 0; padding-left: 1.1em; }
.card ul li { font-family: var(--f-body); font-size: calc(29px * var(--ts)); line-height: 1.5; color: var(--ink); }
.card--accent { background: var(--red-tint) !important; }

/* example chips (real-world) */
.exlabel {
  font-family: var(--f-mono);
  font-size: 20px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.exlabel::before { content: ''; width: 10px; height: 10px; background: var(--red); border-radius: 50%; }

/* big statement slide */
.statement {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: calc(104px * var(--ts));
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 20ch;
  text-wrap: balance;
}
.statement .light { font-style: italic; font-weight: 400; color: var(--on-dark-1); }

/* figure caption under hero diagrams */
.figcap {
  font-family: var(--f-body);
  font-style: italic;
  font-size: calc(31px * var(--ts));
  line-height: 1.38;
  color: var(--ash);
  margin: 0;
  max-width: 46ch;
}
.figcap strong { font-style: normal; font-weight: 600; color: var(--ink-2); }
.slide--dark .figcap { color: var(--on-dark-2); }
.slide--dark .figcap strong { color: var(--white); }

.diagram { width: 100%; height: auto; display: block; }

/* cover meta strip */
.cover-meta { display: flex; gap: 0; border: 1px solid var(--rule); }
.cover-meta > div { padding: 22px 30px; border-right: 1px solid var(--rule); }
.cover-meta > div:last-child { border-right: none; }
.cover-meta .n { font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--red); margin-bottom: 8px; }
.cover-meta .v { font-family: var(--f-display); font-weight: 700; font-size: 30px; color: var(--ink); line-height: 1; }

/* entrance — TRANSFORM ONLY so any frozen/print/export/reduced-motion frame
   still shows content. Opacity is never animated (a paused t=0 frame would
   otherwise blank the slide in screenshots, PDF, and PPTX export). */
@media (prefers-reduced-motion: no-preference) {
  [data-deck-active] .anim {
    animation: rise 0.5s var(--ease) backwards;
  }
  [data-deck-active] .anim-2 { animation-delay: 0.08s; }
  [data-deck-active] .anim-3 { animation-delay: 0.16s; }
  [data-deck-active] .anim-4 { animation-delay: 0.24s; }
}
@media print {
  .anim { animation: none !important; transform: none !important; }
}
@keyframes rise {
  from { transform: translateY(16px); }
  to { transform: none; }
}

/* ============================================================
   SHARED DECK COMPONENTS (used across all chapter decks)
   ============================================================ */
.cover-credit { display: flex; gap: 26px; align-items: center; font-family: var(--f-mono); font-size: 24px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-dark-2); }
.cover-credit b { color: var(--white); font-weight: 600; }
.cover-credit span.sep { width: 1px; height: 22px; background: rgba(255,255,255,0.28); }

.roadmap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.roadmap > div { background: var(--paper); padding: 34px 30px; display: flex; flex-direction: column; gap: 14px; }
.roadmap .rtop { display: flex; align-items: center; justify-content: space-between; }
.roadmap .rn { font-family: var(--f-display); font-style: italic; font-weight: 700; font-size: 36px; color: var(--red); line-height: 1; }
.roadmap h4 { font-family: var(--f-display); font-weight: 700; font-size: calc(33px * var(--ts)); margin: 0; letter-spacing: -0.015em; color: var(--ink); }
.roadmap p { font-family: var(--f-body); font-size: calc(28px * var(--ts)); line-height: 1.42; color: var(--ash); margin: 0; }

.hook-art { display: flex; flex-direction: column; gap: 26px; align-items: center; justify-content: center; }

.notlist { display: flex; flex-wrap: wrap; gap: 20px 30px; }
.notlist span { font-family: var(--f-display); font-weight: 700; font-size: 52px; letter-spacing: -0.02em; color: var(--on-dark-3); position: relative; line-height: 1.1; }
.notlist span::after { content: ''; position: absolute; left: -4px; right: -4px; top: 52%; height: 3px; background: var(--red-bright); transform: rotate(-4deg); }

/* icons */
.kicon { width: 40px; height: 40px; flex: none; }
.kicker:has(.kicon)::before { display: none; }
.feat { width: 74px; height: 74px; flex: none; color: var(--red); display: block; margin-bottom: 4px; }
.slide--dark .feat { color: var(--red-bright); }
.cardico { width: 64px; height: 64px; flex: none; color: var(--red); }
.card-feat { display: flex; align-items: center; gap: 16px; }
.card-feat svg { width: 58px; height: 58px; color: var(--red); flex: none; }

/* ---- stamped icon kit (PAE-style strong markers) ----
   .ibadge  round filled badge — high-contrast topic marker, reads from the back row
   .iflag   small ringed good/bad inline marker
   .iwm     large faint corner watermark glyph for sparse / dark slides
   Additive: nothing references these until a deck opts in. */
.ibadge { display: inline-flex; align-items: center; justify-content: center;
  width: 84px; height: 84px; border-radius: 50%; flex: none;
  background: var(--red); color: #fff; box-shadow: 0 3px 0 rgba(122,22,18,0.32); }
.ibadge svg { width: 46px; height: 46px; flex: none; }
.ibadge.ink    { background: var(--ink);  box-shadow: 0 3px 0 rgba(0,0,0,0.22); }
.ibadge.gold   { background: var(--gold); box-shadow: 0 3px 0 rgba(120,88,20,0.32); }
.ibadge.green  { background: #5c6536;     box-shadow: 0 3px 0 rgba(40,46,20,0.32); }
.ibadge.outline{ background: transparent; color: var(--red); border: 3px solid var(--red); box-shadow: none; }
.ibadge.sm { width: 60px; height: 60px; } .ibadge.sm svg { width: 33px; height: 33px; }
.slide--dark .ibadge { box-shadow: 0 3px 0 rgba(0,0,0,0.30); }
.slide--dark .ibadge.outline { color: var(--red-bright); border-color: var(--red-bright); }
/* roadmap cards are tall — stamp a large badge in the rtop */
.roadmap .rtop .ibadge { width: 100px; height: 100px; }
.roadmap .rtop .ibadge svg { width: 56px; height: 56px; }

.iflag { display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%; flex: none; border: 2.5px solid currentColor; }
.iflag svg { width: 26px; height: 26px; }
.iflag.good { color: #1f7a44; } .iflag.bad { color: var(--red); }

.iwm { position: absolute; pointer-events: none; color: var(--red); opacity: 0.06; z-index: 0; }
.iwm svg { width: 100%; height: 100%; display: block; }
.slide--dark .iwm { color: var(--red-bright); opacity: 0.10; }
/* keep all real content above a watermark glyph, regardless of anim/transform state */
.slide:has(.iwm) > :not(.iwm) { position: relative; z-index: 1; }

/* brand cases */
.proof { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); height: 100%; }
.proof > div { background: var(--paper); padding: 40px 42px; display: flex; flex-direction: column; gap: 16px; overflow: hidden; }
.proof .pimg { margin: -40px -42px 6px; height: 250px; position: relative; background: var(--paper-3); border-bottom: 1px solid var(--rule); overflow: hidden; flex: none; }
.proof .pimg image-slot, .proof .pimg > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proof .pimg figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.04em; color: #fff; background: linear-gradient(transparent, rgba(13,10,7,0.6)); padding: 24px 14px 9px; }
.proof p { font-family: var(--f-body); font-size: calc(29px * var(--ts)); line-height: 1.42; color: var(--ink); margin: 0; }
.proof p strong, .proof p b { font-weight: 700; color: var(--ink); }
.proof .take { font-family: var(--f-body); font-size: calc(29px * var(--ts)); line-height: 1.38; color: var(--ink); margin-top: auto; }
.proof .take b { color: var(--red); font-weight: 600; }
.brandmark { display: flex; align-items: center; gap: 20px; }
.brandmark .meta { display: flex; flex-direction: column; gap: 5px; }
.brandmark .nm2 { font-family: var(--f-display); font-weight: 700; font-size: 38px; letter-spacing: -0.015em; color: var(--ink); line-height: 1; }
.brandmark .nm2 a { color: var(--ink); text-decoration: none; border-bottom: 2px solid var(--red); }
.brandmark .where { font-family: var(--f-mono); font-size: 18px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ash); }
.brand-cite { font-family: var(--f-mono); font-size: 13px; line-height: 1.3; letter-spacing: 0.02em; color: var(--ash-2); margin: 10px 0 0; opacity: 0.78; }
.brand-cite a { color: var(--ash); }
/* keep attributions tiny even inside components whose own p-rules are larger */
.proof .brand-cite, .bstages .brand-cite, .cards2 .card .brand-cite,
.triad .brand-cite, .split .brand-cite, .stack .brand-cite { font-size: 13px; line-height: 1.3; margin-top: 12px; }
.logoplate { background: #fff; border: 1px solid var(--rule); padding: 12px 18px; display: flex; align-items: center; justify-content: center; height: 78px; min-width: 168px; flex: none; }
.logoplate img { max-height: 48px; max-width: 220px; display: block; }

/* photo bands */
.cardphoto { position: relative; height: 200px; margin: -44px -46px 8px; overflow: hidden; border-bottom: 1px solid var(--rule); }
.cardphoto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cardphoto .cr { position: absolute; right: 8px; bottom: 7px; font-family: var(--f-mono); font-size: 12px; letter-spacing: 0.03em; color: #fff; background: rgba(13,10,7,0.5); padding: 2px 8px; }

/* references / credits slide */
.reflist { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--rule); border: 1px solid var(--rule); width: 100%; height: 100%; align-content: stretch; }
.reflist > div { background: var(--paper); padding: 38px 42px; display: flex; flex-direction: column; }
.reflist h4 { font-family: var(--f-mono); font-size: 19px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--red); margin: 0 0 20px; display: flex; align-items: center; gap: 12px; }
.reflist h4 svg { width: 26px; height: 26px; }
.reflist ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 16px; }
.reflist li { font-family: var(--f-body); font-size: calc(27px * var(--ts)); line-height: 1.42; color: var(--ink-2); }
.reflist li b { color: var(--ink); font-weight: 600; }
.reflist a { color: var(--red); text-decoration: none; border-bottom: 1px solid var(--rule); word-break: break-word; }
.reflist .note { font-family: var(--f-body); font-style: italic; font-size: 21px; color: var(--ash); margin: 18px 0 0; }

/* tweak: disable entrance animation (driven by shared deck-tweaks panel) */
deck-stage.no-anim .anim { animation: none !important; transform: none !important; opacity: 1 !important; }

/* ============================================================
   BRAND CASE — canonical (shared across all chapter decks).
   RULE: brand-case content FILLS the slide height (no centered
   island with dead margins) and uses classroom-scale type that
   responds to --ts. Do not redefine .bcase/.bstages locally.
   ============================================================ */
.bcase { display: flex; flex-direction: column; gap: 26px; height: 100%; flex: 1 1 auto; min-height: 0; }
.bcase .brandmark .nm2 { font-size: calc(52px * var(--ts)); }
.bcase .brandmark .where { font-size: calc(20px * var(--ts)); }
.bcase .logoplate { height: 118px; min-width: 220px; padding: 14px 26px; }
.bcase .logoplate img { max-height: 80px; max-width: 280px; }

/* image-led case: a band of example images (one per stage) over the text band */
.bband { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); flex: 1 1 50%; min-height: 0; }
.bband > figure { margin: 0; position: relative; background: var(--paper-3); overflow: hidden; display: flex; }
.bband image-slot, .bband > figure > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bband figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.04em; color: #fff; background: linear-gradient(transparent, rgba(13,10,7,0.62)); padding: 22px 14px 8px; }

.bcase .bstages { flex: 1 1 50%; }
.bstages { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); counter-reset: bstage; }
.bstages > div { background: var(--paper); padding: 30px 34px; display: flex; flex-direction: column; justify-content: center; gap: 12px; position: relative; }
.bstages .st { font-family: var(--f-mono); font-size: calc(22px * var(--ts)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); font-weight: 500; }
.bstages .sh { font-family: var(--f-display); font-weight: 700; font-size: calc(40px * var(--ts)); letter-spacing: -0.015em; color: var(--ink); line-height: 1.02; }
.bstages p { font-family: var(--f-body); font-size: calc(30px * var(--ts)); line-height: 1.34; color: var(--ink); margin: 0; }
.bstages p strong, .bstages p b { font-weight: 700; color: var(--ink); }

/* TRIAD — three-column concept cards; fills its grow row, classroom type */
.triad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); width: 100%; height: 100%; }
.triad > div { background: var(--paper); padding: 40px 36px; display: flex; flex-direction: column; justify-content: center; gap: 16px; }
.triad .ti { width: 60px; height: 60px; color: var(--red); }
.triad .tl { font-family: var(--f-mono); font-size: calc(20px * var(--ts)); letter-spacing: 0.14em; text-transform: uppercase; color: var(--red); }
.triad .tt { font-family: var(--f-display); font-weight: 700; font-size: calc(40px * var(--ts)); letter-spacing: -0.015em; color: var(--ink); line-height: 1.04; }
.triad p { font-family: var(--f-body); font-size: calc(28px * var(--ts)); line-height: 1.38; color: var(--ink); margin: 0; }

/* ============================================================
   REUSABLE IMAGE AFFORDANCES (shared across all decks)
   Use these to drop real example imagery into any slide. Default
   fill is an <image-slot> the instructor completes; pre-fill src
   with a real Commons CC photo where one legitimately exists.
   ============================================================ */

/* EXFIG — a framed example image with a caption. Use in a split or
   beside text. Give it a height (or let a flex/grid row size it). */
.exfig { position: relative; background: var(--paper-3); border: 1px solid var(--rule); overflow: hidden; display: flex; }
.exfig image-slot, .exfig > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exfig figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--f-mono); font-size: 15px; letter-spacing: 0.04em; color: #fff; background: linear-gradient(transparent, rgba(13,10,7,0.62)); padding: 26px 16px 10px; }
.slide--dark .exfig { background: #14110d; border-color: rgba(255,255,255,0.16); }

/* EXSTRIP — a row of example images (one per point); fills a grow row */
.exstrip { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); width: 100%; height: 100%; grid-auto-flow: column; grid-auto-columns: 1fr; }
.exstrip > figure { margin: 0; position: relative; background: var(--paper-3); overflow: hidden; display: flex; }
.exstrip image-slot, .exstrip > figure > img { width: 100%; height: 100%; object-fit: cover; display: block; }
.exstrip figcaption { position: absolute; left: 0; right: 0; bottom: 0; font-family: var(--f-mono); font-size: 15px; letter-spacing: 0.04em; color: #fff; background: linear-gradient(transparent, rgba(13,10,7,0.62)); padding: 24px 14px 9px; }

/* PHONE — vertical device mock for app / short-form / feed screenshots.
   Put an <image-slot> inside .scr; optional .plabel caption. */
.phonewrap { display: flex; gap: 26px; align-items: center; justify-content: center; flex: none; }
.phone { width: 252px; height: 524px; border-radius: 40px; background: #050505; border: 2px solid rgba(0,0,0,0.22); padding: 11px; position: relative; flex: none; box-shadow: 0 30px 64px rgba(13,10,7,0.30); }
.slide--dark .phone { border-color: rgba(255,255,255,0.20); box-shadow: 0 34px 70px rgba(0,0,0,0.55); }
.phone::before { content: ''; position: absolute; top: 18px; left: 50%; transform: translateX(-50%); width: 104px; height: 24px; background: #050505; border: 2px solid rgba(255,255,255,0.18); border-radius: 14px; z-index: 2; }
.phone .scr { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: var(--paper-3); position: relative; }
.phone .scr image-slot { width: 100%; height: 100%; }
.phone .plabel { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; font-family: var(--f-mono); font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; color: #fff; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 26px 12px 12px; text-align: center; pointer-events: none; }