/* Figma Layouts — APPS pack (2000×2500 1:1 from layouts/figma-layouts.html) */
.slide.layout-apps,
.slide.layout-apps-left,
.slide.layout-apps-crop,
.slide.layout-apps-right {
  background: #fff;
  color: #000;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Rounded', 'SF Pro Text', system-ui, sans-serif;
}
.slide.layout-apps .grad,
.slide.layout-apps-left .grad,
.slide.layout-apps-crop .grad,
.slide.layout-apps-right .grad { display: none; }






  /* ── Canvas: 2000×2500 @ Figma 1:1 ── */

  /* Preview scale — set --scale: 1 for true 1:1 */

  /* ══════════════════════════════════════
     Screen 7 — GRID (node 1:4)
     ══════════════════════════════════════ */
  .s7-title {
    position: absolute;
    left: 120px;
    top: 1880px;
    width: 1760px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 220px;
    line-height: 0.96;
    letter-spacing: -4.4px;
    color: #000;
    text-align: center;
    text-transform: uppercase;
  }

  .s7-icon {
    position: absolute;
    width: 580px;
    height: 580px;
    border-radius: 62px;
    background: #d9d9d9;
    overflow: hidden;
  }
  .s7-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  /* 2×3 grid — centered, ~29% of 2000w per tile */
  .s7-icon.r1c1 { left: 90px; top: 580px; }
  .s7-icon.r1c2 { left: 710px; top: 580px; }
  .s7-icon.r1c3 { left: 1330px; top: 580px; }
  .s7-icon.r2c1 { left: 90px; top: 1220px; }
  .s7-icon.r2c2 { left: 710px; top: 1220px; }
  .s7-icon.r2c3 { left: 1330px; top: 1220px; }

  /* ══════════════════════════════════════
     Shared: app meta (icon + name + body)
     ══════════════════════════════════════ */
  .app-icon {
    width: 415px;
    height: 415px;
    border-radius: 48px;
    background: #d9d9d9;
    overflow: hidden;
    flex-shrink: 0;
  }
  .app-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  .app-name {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 96px;
    line-height: 192px;
    letter-spacing: -1.92px;
    color: #000;
    text-transform: uppercase;
    width: 725px;
  }

  .app-body {
    font-family: 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 500;
    font-size: 64px;
    line-height: 96px;
    letter-spacing: -1.28px;
    color: #879194;
    width: 725px;
  }

  .meta-col {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 96px;
    width: 725px;
  }

  .meta-row {
    display: flex;
    align-items: center;
    gap: 96px;
  }

  .meta-row .meta-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 96px;
    width: 725px;
  }

  /* ══════════════════════════════════════
     iPhone 16 Plus — small (818×1686)
     Screens 8 + 10
     ══════════════════════════════════════ */
  .iphone-s {
    position: relative;
    width: 818px;
    height: 1686px;
    flex-shrink: 0;
  }

  .iphone-s .side-buttons {
    position: absolute;
    left: -6px;
    top: 298px;
    width: 830px;
    height: 1338px;
  }

  .iphone-s .btn {
    position: absolute;
    overflow: hidden;
    border-radius: 4px 0 0 4px;
  }
  .iphone-s .btn .base {
    position: absolute;
    inset: 0;
    background: #f0ece3;
    border-radius: inherit;
  }
  .iphone-s .btn .shadow-t {
    position: absolute;
    inset: 0;
    opacity: 0.76;
    background: linear-gradient(to bottom, #000, transparent 8%);
    border-radius: inherit;
  }
  .iphone-s .btn .shadow-b {
    position: absolute;
    inset: 0;
    opacity: 0.48;
    background: linear-gradient(to bottom, transparent 90%, #000);
    border-radius: inherit;
  }
  .iphone-s .btn .frame-shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg, #000 0%, rgba(174,174,174,0) 70%);
    border-radius: inherit;
  }
  .iphone-s .btn .hi-1 {
    position: absolute;
    left: 2px;
    width: 2px;
    background: #fff;
    filter: blur(1px);
    border-radius: 2px 2px 0 0;
  }
  .iphone-s .btn .hi-2 {
    position: absolute;
    left: 2px;
    width: 2px;
    background: rgba(255,255,255,0.8);
    filter: blur(1px);
    border-radius: 0 0 2px 2px;
  }
  .iphone-s .btn .side-shadow {
    position: absolute;
    left: 0;
    width: 2px;
    background: #61605d;
    filter: blur(2px);
    border-radius: 0 0 2px 2px;
  }

  /* left: silent */
  .iphone-s .btn-silent { left: 0; top: 0; width: 10px; height: 62px; }
  .iphone-s .btn-silent .hi-1 { top: 2px; height: 12px; }
  .iphone-s .btn-silent .hi-2 { top: 6px; height: 52px; }
  .iphone-s .btn-silent .side-shadow { top: -2px; height: 68px; }

  /* left: vol up */
  .iphone-s .btn-vol-up { left: 0; top: 120px; width: 10px; height: 112px; }
  .iphone-s .btn-vol-up .hi-1 { top: 4px; height: 22px; }
  .iphone-s .btn-vol-up .hi-2 { top: 6px; height: 104px; }
  .iphone-s .btn-vol-up .side-shadow { top: 0; height: 116px; }

  /* left: vol down */
  .iphone-s .btn-vol-down { left: 0; top: 266px; width: 10px; height: 112px; }
  .iphone-s .btn-vol-down .hi-1 { top: 4px; height: 22px; }
  .iphone-s .btn-vol-down .hi-2 { top: 6px; height: 104px; }
  .iphone-s .btn-vol-down .side-shadow { top: 0; height: 116px; }

  /* right: power (rotated) */
  .iphone-s .btn-power-wrap {
    position: absolute;
    left: 820px;
    top: 394px;
    width: 10px;
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .iphone-s .btn-power {
    width: 10px;
    height: 200px;
    transform: rotate(180deg);
    overflow: hidden;
    border-radius: 4px 0 0 4px;
    position: relative;
  }
  .iphone-s .btn-power .base {
    position: absolute;
    left: 0; top: 2px;
    width: 10px; height: 198px;
    background: #f0ece3;
    border-radius: 4px 0 0 4px;
  }
  .iphone-s .btn-power .shadow-t {
    position: absolute;
    left: 0; top: 2px;
    width: 10px; height: 198px;
    opacity: 0.76;
    background: linear-gradient(to bottom, #000, transparent 4.545%);
    border-radius: 4px 0 0 4px;
  }
  .iphone-s .btn-power .shadow-b {
    position: absolute;
    left: 0; top: 2px;
    width: 10px; height: 198px;
    opacity: 0.48;
    background: linear-gradient(to bottom, transparent 95.455%, #000);
    border-radius: 4px 0 0 4px;
  }
  .iphone-s .btn-power .frame-shadow {
    position: absolute;
    left: 0; top: 2px;
    width: 10px; height: 198px;
    background: linear-gradient(270deg, #000 0%, rgba(174,174,174,0) 70%);
    border-radius: 4px 0 0 4px;
  }
  .iphone-s .btn-power .hi-1 {
    position: absolute;
    left: 2px; top: 158px;
    width: 2px; height: 38px;
    background: #fff;
    filter: blur(1px);
    border-radius: 2px 2px 0 0;
  }
  .iphone-s .btn-power .hi-2 {
    position: absolute;
    left: 2px; top: 14px;
    width: 2px; height: 182px;
    background: rgba(255,255,255,0.8);
    filter: blur(1px);
    border-radius: 0 0 2px 2px;
  }
  .iphone-s .btn-power .side-shadow {
    position: absolute;
    left: 0; top: 10px;
    width: 2px; height: 190px;
    background: #61605d;
    filter: blur(2px);
    border-radius: 0 0 2px 2px;
  }

  .iphone-s .titanium {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 124px;
  }
  .iphone-s .titanium .highlight {
    position: absolute;
    inset: 0;
    background: #e7e3bf;
    border-radius: 124px;
  }
  .iphone-s .titanium .shadow-outer-1 {
    position: absolute;
    inset: 0;
    border: 6px solid #c3c3c3;
    border-radius: 124px;
    filter: blur(4px);
  }
  .iphone-s .titanium .shadow-outer-2 {
    position: absolute;
    inset: 0;
    border: 2px solid #524b40;
    border-radius: 124px;
    filter: blur(2px);
  }
  .iphone-s .titanium .shadow-inner {
    position: absolute;
    left: 10px; top: 10px;
    width: 798px; height: 1664px;
    border: 2px solid #fff;
    border-radius: 124px;
    filter: blur(2px);
  }
  .iphone-s .titanium .highlight-inner {
    position: absolute;
    left: 12px; top: 12px;
    width: 794px; height: 1660px;
    border: 0.8px solid #fff;
    border-radius: 124px;
  }
  .iphone-s .cutout {
    position: absolute;
    background: linear-gradient(to bottom, #817e73, #c3beac);
  }
  .iphone-s .cutout.top { left: 636px; top: 0; width: 12px; height: 8px; }
  .iphone-s .cutout.left-mid {
    left: 0; top: 174px; width: 8px; height: 12px;
    background: linear-gradient(to right, #817e73, #c3beac);
  }
  .iphone-s .cutout.left-bot {
    left: 0; top: 1512px; width: 8px; height: 12px;
    background: linear-gradient(to right, #817e73, #c3beac);
  }
  .iphone-s .cutout.bot { left: 126px; top: 1678px; width: 10px; height: 8px; background: linear-gradient(to top, #817e73, #c3beac); }
  .iphone-s .cutout.right-bot {
    left: 810px; top: 1512px; width: 8px; height: 12px;
    background: linear-gradient(to left, #817e73, #c3beac);
  }

  .iphone-s .screen-frame {
    position: absolute;
    left: 8px; top: 8px;
    width: 802px; height: 1670px;
    overflow: hidden;
    border-radius: 116px;
  }
  .iphone-s .screen-frame .border-fill {
    position: absolute;
    inset: 0;
    background: #000100;
    border-radius: 116px;
  }
  .iphone-s .screen-frame .border-glow {
    position: absolute;
    inset: 0;
    border: 8px solid #879194;
    border-radius: 116px;
    filter: blur(7px);
  }

  .iphone-s .screen-here {
    position: absolute;
    left: 24px; top: 24px;
    width: 770px; height: 1638px;
    overflow: hidden;
    border-radius: 104px;
  }
  .iphone-s .screen-here .screen {
    position: absolute;
    left: 0; top: 0;
    width: 740px; height: 1610px;
    border-radius: 100px;
    background: #dae2d3;
  }
  .iphone-s .screen-here .wallpaper {
    position: absolute;
    inset: 0;
    background: #b2b2b2;
  }
  .iphone-s .screen-here .wallpaper img,
  .iphone-s .screen-here .screen-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }

  /* Real App Store shots already include status bar — hide fake chrome. */
  .iphone-s.has-shot .ui-icons,
  .iphone-s.has-shot .island,
  .iphone-l.has-shot .ui-icons,
  .iphone-l.has-shot .island {
    display: none;
  }

  .iphone-s.has-shot .screen-here .screen,
  .iphone-l.has-shot .screen-here .screen {
    background: #000;
  }

  .iphone-s .island {
    position: absolute;
    left: 298px; top: 48px;
    width: 222px; height: 62px;
  }
  .iphone-s .island img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .iphone-s .ui-icons {
    position: absolute;
    left: 136px; top: 58px;
    width: 584.802px;
    height: 44px;
  }
  .iphone-s .ui-icons .time {
    position: absolute;
    left: 0; top: 0;
    width: 70px;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 600;
    font-size: 34px;
    line-height: 44px;
    letter-spacing: -0.8px;
    color: #fff;
    text-align: center;
  }
  .iphone-s .ui-icons .icons-right {
    position: absolute;
    right: 0; top: 8px;
    width: 150.802px;
    height: 26px;
  }
  .iphone-s .ui-icons .icons-right img {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ══════════════════════════════════════
     iPhone 16 Plus — large (1636×3372)
     Screen 9 (cropped)
     ══════════════════════════════════════ */
  .iphone-l {
    position: absolute;
    left: 182px;
    top: 814px;
    width: 1636px;
    height: 3372px;
  }

  .iphone-l .side-buttons {
    position: absolute;
    left: -12px;
    top: 596px;
    width: 1660px;
    height: 2676px;
  }

  .iphone-l .btn {
    position: absolute;
    overflow: hidden;
    border-radius: 8px 0 0 8px;
  }
  .iphone-l .btn .base {
    position: absolute;
    inset: 0;
    background: #f0ece3;
    border-radius: inherit;
  }
  .iphone-l .btn .shadow-t {
    position: absolute;
    inset: 0;
    opacity: 0.76;
    background: linear-gradient(to bottom, #000, transparent 8%);
    border-radius: inherit;
  }
  .iphone-l .btn .shadow-b {
    position: absolute;
    inset: 0;
    opacity: 0.48;
    background: linear-gradient(to bottom, transparent 90%, #000);
    border-radius: inherit;
  }
  .iphone-l .btn .frame-shadow {
    position: absolute;
    inset: 0;
    background: linear-gradient(270deg, #000 0%, rgba(174,174,174,0) 70%);
    border-radius: inherit;
  }
  .iphone-l .btn .hi-1 {
    position: absolute;
    left: 4px;
    width: 4px;
    background: #fff;
    filter: blur(2px);
    border-radius: 4px 4px 0 0;
  }
  .iphone-l .btn .hi-2 {
    position: absolute;
    left: 4px;
    width: 4px;
    background: rgba(255,255,255,0.8);
    filter: blur(2px);
    border-radius: 0 0 4px 4px;
  }
  .iphone-l .btn .side-shadow {
    position: absolute;
    left: 0;
    width: 4px;
    background: #61605d;
    filter: blur(4px);
    border-radius: 0 0 4px 4px;
  }

  .iphone-l .btn-silent { left: 0; top: 0; width: 20px; height: 124px; }
  .iphone-l .btn-silent .hi-1 { top: 4px; height: 24px; }
  .iphone-l .btn-silent .hi-2 { top: 12px; height: 104px; }
  .iphone-l .btn-silent .side-shadow { top: -4px; height: 136px; }

  .iphone-l .btn-vol-up { left: 0; top: 240px; width: 20px; height: 224px; }
  .iphone-l .btn-vol-up .hi-1 { top: 8px; height: 44px; }
  .iphone-l .btn-vol-up .hi-2 { top: 12px; height: 208px; }
  .iphone-l .btn-vol-up .side-shadow { top: 0; height: 232px; }

  .iphone-l .btn-vol-down { left: 0; top: 532px; width: 20px; height: 224px; }
  .iphone-l .btn-vol-down .hi-1 { top: 8px; height: 44px; }
  .iphone-l .btn-vol-down .hi-2 { top: 12px; height: 208px; }
  .iphone-l .btn-vol-down .side-shadow { top: 0; height: 232px; }

  .iphone-l .btn-power-wrap {
    position: absolute;
    left: 1640px;
    top: 788px;
    width: 20px;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .iphone-l .btn-power {
    width: 20px;
    height: 400px;
    transform: rotate(180deg);
    overflow: hidden;
    border-radius: 8px 0 0 8px;
    position: relative;
  }
  .iphone-l .btn-power .base {
    position: absolute;
    left: 0; top: 4px;
    width: 20px; height: 396px;
    background: #f0ece3;
    border-radius: 8px 0 0 8px;
  }
  .iphone-l .btn-power .shadow-t {
    position: absolute;
    left: 0; top: 4px;
    width: 20px; height: 396px;
    opacity: 0.76;
    background: linear-gradient(to bottom, #000, transparent 4.545%);
    border-radius: 8px 0 0 8px;
  }
  .iphone-l .btn-power .shadow-b {
    position: absolute;
    left: 0; top: 4px;
    width: 20px; height: 396px;
    opacity: 0.48;
    background: linear-gradient(to bottom, transparent 95.455%, #000);
    border-radius: 8px 0 0 8px;
  }
  .iphone-l .btn-power .frame-shadow {
    position: absolute;
    left: 0; top: 4px;
    width: 20px; height: 396px;
    background: linear-gradient(270deg, #000 0%, rgba(174,174,174,0) 70%);
    border-radius: 8px 0 0 8px;
  }
  .iphone-l .btn-power .hi-1 {
    position: absolute;
    left: 4px; top: 316px;
    width: 4px; height: 76px;
    background: #fff;
    filter: blur(2px);
    border-radius: 4px 4px 0 0;
  }
  .iphone-l .btn-power .hi-2 {
    position: absolute;
    left: 4px; top: 28px;
    width: 4px; height: 364px;
    background: rgba(255,255,255,0.8);
    filter: blur(2px);
    border-radius: 0 0 4px 4px;
  }
  .iphone-l .btn-power .side-shadow {
    position: absolute;
    left: 0; top: 20px;
    width: 4px; height: 380px;
    background: #61605d;
    filter: blur(4px);
    border-radius: 0 0 4px 4px;
  }

  .iphone-l .titanium {
    position: absolute;
    inset: 0;
    overflow: hidden;
    border-radius: 248px;
  }
  .iphone-l .titanium .highlight {
    position: absolute;
    inset: 0;
    background: #e7e3bf;
    border-radius: 248px;
  }
  .iphone-l .titanium .shadow-outer-1 {
    position: absolute;
    inset: 0;
    border: 12px solid #c3c3c3;
    border-radius: 248px;
    filter: blur(8px);
  }
  .iphone-l .titanium .shadow-outer-2 {
    position: absolute;
    inset: 0;
    border: 4px solid #524b40;
    border-radius: 248px;
    filter: blur(4px);
  }
  .iphone-l .titanium .shadow-inner {
    position: absolute;
    left: 20px; top: 20px;
    width: 1596px; height: 3328px;
    border: 4px solid #fff;
    border-radius: 248px;
    filter: blur(4px);
  }
  .iphone-l .titanium .highlight-inner {
    position: absolute;
    left: 24px; top: 24px;
    width: 1588px; height: 3320px;
    border: 1.6px solid #fff;
    border-radius: 248px;
  }
  .iphone-l .cutout {
    position: absolute;
    background: linear-gradient(to bottom, #817e73, #c3beac);
  }
  .iphone-l .cutout.top { left: 1272px; top: 0; width: 24px; height: 16px; }
  .iphone-l .cutout.left-mid {
    left: 0; top: 348px; width: 16px; height: 24px;
    background: linear-gradient(to right, #817e73, #c3beac);
  }
  .iphone-l .cutout.left-bot {
    left: 0; top: 3024px; width: 16px; height: 24px;
    background: linear-gradient(to right, #817e73, #c3beac);
  }
  .iphone-l .cutout.bot { left: 252px; top: 3356px; width: 20px; height: 16px; background: linear-gradient(to top, #817e73, #c3beac); }
  .iphone-l .cutout.right-bot {
    left: 1620px; top: 3024px; width: 16px; height: 24px;
    background: linear-gradient(to left, #817e73, #c3beac);
  }

  .iphone-l .screen-frame {
    position: absolute;
    left: 16px; top: 16px;
    width: 1604px; height: 3340px;
    overflow: hidden;
    border-radius: 232px;
  }
  .iphone-l .screen-frame .border-fill {
    position: absolute;
    inset: 0;
    background: #000100;
    border-radius: 232px;
  }
  .iphone-l .screen-frame .border-glow {
    position: absolute;
    inset: 0;
    border: 16px solid #879194;
    border-radius: 232px;
    filter: blur(14px);
  }

  .iphone-l .screen-here {
    position: absolute;
    left: 48px; top: 48px;
    width: 1540px; height: 3276px;
    overflow: hidden;
    border-radius: 208px;
  }
  .iphone-l .screen-here .screen {
    position: absolute;
    left: 0; top: 0;
    width: 1480px; height: 3220px;
    border-radius: 200px;
    background: #dae2d3;
  }
  .iphone-l .screen-here .wallpaper {
    position: absolute;
    inset: 0;
    background: #b2b2b2;
  }
  .iphone-l .screen-here .wallpaper img,
  .iphone-l .screen-here .screen-content {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
  }

  .iphone-l .island {
    position: absolute;
    left: 596px; top: 96px;
    width: 444px; height: 124px;
  }
  .iphone-l .island img {
    width: 100%;
    height: 100%;
    display: block;
  }

  .iphone-l .ui-icons {
    position: absolute;
    left: 272px; top: 116px;
    width: 1169.605px;
    height: 88px;
  }
  .iphone-l .ui-icons .time {
    position: absolute;
    left: 0; top: 0;
    width: 140px;
    font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
    font-weight: 600;
    font-size: 68px;
    line-height: 88px;
    letter-spacing: -0.8px;
    color: #fff;
    text-align: center;
  }
  .iphone-l .ui-icons .icons-right {
    position: absolute;
    right: 0; top: 16px;
    width: 301.605px;
    height: 52px;
  }
  .iphone-l .ui-icons .icons-right img {
    width: 100%;
    height: 100%;
    display: block;
  }

  /* ══════════════════════════════════════
     Screen 8 — phone left + meta right (1:14)
     ══════════════════════════════════════ */
  .s8-row {
    position: absolute;
    left: 96px;
    top: 407px;
    display: flex;
    align-items: center;
    gap: 181px;
  }

  /* ══════════════════════════════════════
     Screen 9 — meta top + phone crop (3:125)
     ══════════════════════════════════════ */
  .s9-meta {
    position: absolute;
    left: 382px;
    top: 200px;
    width: 1236px;
  }

  /* ══════════════════════════════════════
     Screen 10 — meta left + phone right (3:283)
     ══════════════════════════════════════ */
  .s10-row {
    position: absolute;
    right: 96px;
    top: 407px;
    display: flex;
    align-items: center;
    gap: 181px;
  }