/* =====================================================================
   live-mockups.css
   Overrides for v3 mockup components when ported into the live landing
   page. Strips showcase chrome (BoardHead, V3Note), undoes the fixed
   1500×900 artboard sizing, and lets the section's own background show.
   ===================================================================== */

/* Mount wraps each section's interior. .container-wide widens slightly
   past --container for the laptop / proof-pack stages. */
.live-mount {
  width: 100%;
}
.live-mount .container,
.live-mount .container-wide {
  margin: 0 auto;
  padding: 0 var(--gutter);
  box-sizing: border-box;
}
.live-mount .container       { max-width: var(--container); }
.live-mount .container-wide  { max-width: 1440px; }

/* ---------- KILL showcase chrome ---------- */
.live-mount .mk-board-header,
.live-mount .mk-note {
  display: none !important;
}

/* ---------- UNDO artboard sizing on mk-board ---------- */
.live-mount .mk-board {
  width: 100%;
  height: auto;
  min-height: 0;
  padding: 0;
  gap: 48px;
  overflow: visible;
  background: transparent;
  display: block;            /* page flow, not artboard flex */
}

/* Inner roots in v3.* mockups all use `flex: 1` to fill the artboard.
   In live mode they need to size to their content. */
.live-mount .v3-hero-tl,
.live-mount .v3-em-lap,
.live-mount .v3-em-lap .el-stage,
.live-mount .v3-rescue-dip,
.live-mount .v3-rescue-dip .rd-stage,
.live-mount .v3b-pack {
  flex: initial;
  min-height: 0;
}

/* Most stage children are constrained by min-height: 0 inside fixed-height
   parents. Make sure they can grow naturally. */
.live-mount .v3-rescue-dip .rd-img-wrap,
.live-mount .v3-rescue-dip .rd-side {
  min-height: 0;
}
.live-mount .v3-rescue-dip .rd-img-wrap {
  aspect-ratio: 4 / 3;
}

/* The hero stage uses `height: 100%` figure wrappers. Lock to an
   intrinsic height so the phones display properly. */
.live-mount .v3-hero-tl .htl-stage {
  align-items: center;
}
.live-mount .v3-hero-tl .htl-phone {
  display: flex; justify-content: center;
}

/* The proof pack `mk-board` had height 100% which is what put the phone
   in the middle column. With auto height, set an explicit min-height on
   the stage so the alternating callouts get room to lay out. */
.live-mount .v3b-pack .pk-stage {
  min-height: 740px;
  grid-template-rows: 92px repeat(7, 1fr) 14px;
  column-gap: 24px;
}
.live-mount .v3b-pack .pk-phone-wrap .v3-phone {
  max-height: 520px !important;
}
.live-mount .v3b-pack .pk-head h2 {
  font-size: 26px !important;
}
.live-mount .v3b-pack .pk-callout .lbl { font-size: 14px; }
.live-mount .v3b-pack .pk-callout .desc { font-size: 9.5px; line-height: 1.35; }
.live-mount .v3b-pack .pk-callout .thumb { width: 52px; height: 38px; }
.live-mount .v3b-pack .pk-l { grid-template-columns: 1fr 24px 22px; }
.live-mount .v3b-pack .pk-r { grid-template-columns: 22px 24px 1fr; }

/* Tighten the section that hosts the proof pack so the whole thing
   fits in a typical laptop viewport without scrolling. */
#system.solution.section-pad { padding: 56px 0; }

/* The laptop frame in EmailsLaptopAnnotated also needs an intrinsic
   height since flex: 1 inside an auto parent does nothing. Constrain via
   max-width + aspect, not fixed height. */
.live-mount .v3-em-lap .el-laptop {
  width: min(1080px, 100%);
}

/* On phones, drop callout absolute positioning gracefully (already
   covered by the original CSS, but ensure paddings are sane). */
@media (max-width: 900px) {
  .live-mount .mk-board { gap: 32px; }
  .live-mount .v3b-pack .pk-stage { min-height: 0; }
}

/* Mobile live-page rescue pass. The Claude mockups were built as wide
   artboards; these rules make the mounted sections behave like page content. */
@media (max-width: 760px) {
  .live-mount .container,
  .live-mount .container-wide {
    padding: 0 22px;
  }

  .hero.ls-hero,
  .problem.section-pad,
  .rescue.section-pad,
  #system.solution.section-pad {
    padding: 52px 0;
  }

  .live-mount .mk-board {
    display: block;
    overflow: hidden;
  }

  .live-mount .v3-hero-tl {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .live-mount .v3-hero-tl .htl-copy {
    gap: 12px;
  }

  .live-mount .v3-hero-tl .htl-copy h1 {
    font-size: 42px;
    line-height: 1.03;
    max-width: 10ch;
    letter-spacing: 0;
  }

  .live-mount .v3-hero-tl .htl-copy .htl-lead {
    font-size: 13px;
    line-height: 1.5;
    max-width: 31ch;
  }

  .live-mount .v3-hero-tl .htl-actions {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 8px;
  }

  .live-mount .v3-hero-tl .htl-actions .btn-primary {
    justify-content: center;
  }

  .live-mount .v3-hero-tl .htl-stage {
    justify-content: center;
    gap: 6px;
    width: 100%;
  }

  .live-mount .v3-hero-tl .htl-phone .v3-phone {
    width: 145px !important;
  }

  .live-mount .v3-hero-tl .htl-axis .ax-arr {
    font-size: 22px;
  }

  .live-mount .v3-hero-tl .htl-axis .ax-d {
    font-size: 7px;
    letter-spacing: 0.14em;
  }

  .live-mount .v3-em-lap {
    gap: 26px;
  }

  .live-mount .v3-em-lap .el-head {
    display: grid;
    grid-template-columns: 1fr;
    gap: 14px;
    align-items: start;
  }

  .live-mount .v3-em-lap .el-head h2 {
    font-size: 34px;
    line-height: 1.06;
    letter-spacing: 0;
    max-width: 14ch;
  }

  .live-mount .v3-em-lap .el-head .el-lead {
    font-size: 12px;
    line-height: 1.5;
    max-width: 30ch;
  }

  .live-mount .v3-em-lap .el-stage {
    display: block;
  }

  .live-mount .v3-em-lap .el-anno {
    display: none;
  }

  .live-mount .v3-em-lap .el-laptop {
    width: 100%;
    max-width: 100%;
  }

  .live-mount .v3-em-lap .el-screen {
    padding: 6px;
  }

  .live-mount .v3-em-lap .el-topbar {
    grid-template-columns: 1fr;
    padding: 6px;
  }

  .live-mount .v3-em-lap .el-lights,
  .live-mount .v3-em-lap .el-actions,
  .live-mount .v3-em-lap .el-sb {
    display: none;
  }

  .live-mount .v3-em-lap .el-body {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  .live-mount .v3-em-lap .el-r {
    grid-template-columns: 12px minmax(0, 1fr) 42px;
    gap: 8px;
    padding: 9px 10px;
  }

  .live-mount .v3-em-lap .el-r .star,
  .live-mount .v3-em-lap .el-r .from,
  .live-mount .v3-em-lap .el-r .when {
    display: none;
  }

  .live-mount .v3-em-lap .el-r .subj {
    font-size: 10px;
  }

  .live-mount .v3-em-lap .el-r-atts {
    display: none;
  }

  .live-mount .v3-em-lap .el-base {
    display: none;
  }

  .live-mount .v3-rescue-dip {
    gap: 30px;
  }

  .live-mount .v3-rescue-dip header h2 {
    font-size: 34px;
    line-height: 1.06;
    letter-spacing: 0;
    max-width: 16ch;
  }

  .live-mount .v3-rescue-dip .rd-stage {
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
  }

  .live-mount .v3-rescue-dip .rd-img-wrap {
    aspect-ratio: 4 / 3;
  }

  .live-mount .v3-rescue-dip .rd-arrow {
    min-height: 0;
    transform: rotate(90deg);
  }

  .live-mount .v3-rescue-dip .rd-arr-label {
    display: none;
  }

  .live-mount .v3-rescue-dip .annot {
    font-size: 14px;
  }

  .live-mount .v3b-pack {
    display: block;
  }

  .live-mount .v3b-pack .pk-stage {
    display: flex;
    flex-direction: column;
    gap: 18px;
    min-height: 0;
  }

  .live-mount .v3b-pack .pk-head,
  .live-mount .v3b-pack .pk-foot,
  .live-mount .v3b-pack .pk-phone-wrap,
  .live-mount .v3b-pack .pk-callout {
    grid-column: auto;
    grid-row: auto;
  }

  .live-mount .v3b-pack .pk-head {
    padding: 0 0 16px;
    border-bottom: 1px solid var(--pl-line);
  }

  .live-mount .v3b-pack .pk-head h2 {
    font-size: 34px !important;
    line-height: 1.06;
    letter-spacing: 0;
    max-width: 15ch;
  }

  .live-mount .v3b-pack .pk-head .pk-lead {
    font-size: 12px;
    line-height: 1.5;
    max-width: 30ch;
  }

  .live-mount .v3b-pack .pk-phone-wrap {
    order: 2;
    min-height: 0;
  }

  .live-mount .v3b-pack .pk-phone-wrap .v3-phone {
    width: 210px !important;
    max-width: 210px !important;
    height: 455px !important;
    max-height: 455px !important;
  }

  .live-mount .v3b-pack .pk-foot {
    order: 3;
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 0;
    border: 0;
  }

  .live-mount .v3b-pack .pk-foot .f-cell {
    border: 1px solid var(--pl-line);
    padding: 12px;
  }

  .live-mount .v3b-pack .pk-callout {
    order: 4;
    display: block;
    text-align: left;
    padding: 12px 0;
    border-bottom: 1px solid var(--pl-line-soft);
  }

  .live-mount .v3b-pack .pk-callout .num,
  .live-mount .v3b-pack .pk-callout .ln,
  .live-mount .v3b-pack .pk-callout .thumb {
    display: none;
  }

  .live-mount .v3b-pack .pk-callout .lbl {
    font-size: 13px;
  }

  .live-mount .v3b-pack .pk-callout .desc {
    font-size: 11px;
    line-height: 1.45;
  }
}

/* ---------- Section background variants ---------- */
.bg-paper { background: var(--pl-paper); }
.bg-ivory { background: var(--pl-ivory); }
.bg-ivory-deep { background: var(--pl-ivory-deep); }