/* Homepage "sneak peek": wordless outlines of the app on iPhone and iPad. */
.peek { padding-block: clamp(56px, 8vw, 96px); }
.peek + .peek { border-top: 1px solid var(--line); }
.peek-note { color: var(--muted, #5b6660); max-width: 60ch; margin-top: 8px; }

.devices {
  display: flex; justify-content: center; align-items: flex-end;
  padding: 16px 0 8px; max-width: 980px; margin: 0 auto;
}
.device { margin: 0; flex: 0 0 auto; }
.device.tablet { width: min(72%, 720px); position: relative; z-index: 1; }
.device.phone { width: min(22%, 210px); position: relative; z-index: 2; margin-bottom: -18px; }
.device.left { margin-right: -9%; }
.device.right { margin-left: -9%; }
.tablet .frame { aspect-ratio: 2420 / 1668; border-radius: 34px; padding: 12px; }
.tablet .frame::before { width: 7px; height: 7px; top: 3px; }
.tablet .screen { border-radius: 23px; }
.sk.wide { padding: 9% 4% 0; display: grid; grid-template-columns: 1.15fr 1fr; gap: 3.5%; align-content: start; }
.sk.wide > .tabs.top { grid-column: 1 / -1; }
.ipad-col { display: grid; gap: 14px; align-content: start; min-width: 0; }
.sk.wide .sk-card { padding: 12px 14px; gap: 9px; border-radius: 16px; }
.sk.wide .avatar { width: 40px; height: 40px; }
.sk.wide .pill { width: 22%; height: 13px; }
.sk.wide .sk-btn { height: 28px; }
.sk.wide .bar.lbl { width: 22%; }
.tabs.top { top: 3%; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: 30%; height: 5.5%; }

.frame {
  position: relative; width: 100%; aspect-ratio: 402 / 874; max-width: 100%;
  border-radius: 40px; padding: 9px; background: #1b211e;
  box-shadow: 0 2px 4px rgba(23,32,27,.12), 0 24px 48px rgba(23,32,27,.18);
}
.frame::before { /* camera island */
  content: ""; position: absolute; z-index: 2; top: 17px; left: 50%; transform: translateX(-50%);
  width: 30%; height: 20px; border-radius: 999px; background: #1b211e;
}
.screen {
  position: relative; width: 100%; height: 100%; overflow: hidden; border-radius: 31px;
  background: #F2F3F1; color: #17201B;
}

/* ---------- Skeleton screens (fixed app colors so they look like the app in any theme) ---------- */
.sk { display: grid; gap: 8%; align-content: start; height: 100%; padding: 22% 6% 0; font-size: 0; }
.sk-row { display: flex; align-items: center; gap: 6px; }
.sk-col { display: grid; gap: 5px; flex: 1; min-width: 0; }
.sk-card { background: #fff; border-radius: 14px; padding: 9px; display: grid; gap: 7px; box-shadow: 0 1px 2px rgba(0,0,0,.04); }
.bar { height: 7px; border-radius: 999px; background: #DCE0DD; }
.bar.t { height: 12px; background: #2a312d; opacity: .85; }
.bar.s { height: 5px; background: #E2E5E3; }
.bar.lbl { height: 5px; width: 40%; background: #B9C0BB; }
.w30 { width: 30%; } .w45 { width: 45%; } .w55 { width: 55%; } .w70 { width: 70%; } .w85 { width: 85%; } .w100 { width: 100%; }
.sk-logo { width: 18px; height: 18px; border-radius: 5px; background: #1E6F4C; flex: 0 0 auto; }
.avatar { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #1E6F4C; background: #F2E9D6; flex: 0 0 auto; }
.pill { height: 11px; width: 38%; border-radius: 999px; background: #DDEBE2; }
.sk-btn { height: 22px; border-radius: 999px; background: #DDEBE2; display: grid; place-items: center; }
.sk-btn > b, .clue { font: 600 10px/1 var(--sans); color: #1E6F4C; }
.clue.dark { color: #17201B; font-size: 11px; }
.sk-dot { width: 14px; height: 14px; border-radius: 50%; flex: 0 0 auto; background: #F3DFC4; }
.sk-dot.g { background: #D4E7DA; } .sk-dot.r { background: #F2D3D0; } .sk-dot.grey { background: #E3E5E4; }
.ring { width: 9px; height: 9px; border-radius: 50%; border: 1.5px solid #8A938E; background: #fff; flex: 0 0 auto; }
.line { flex: 1; height: 1.5px; background: #C9CFCB; }
.tl { display: flex; align-items: center; }
.tabs {
  position: absolute; left: 6%; right: 6%; bottom: 3%; height: 7%;
  border-radius: 999px; background: rgba(255,255,255,.92); box-shadow: 0 2px 10px rgba(0,0,0,.08);
  display: flex; justify-content: space-around; align-items: center;
}
.tabs i { width: 14px; height: 14px; border-radius: 4px; background: #9AA39E; }
.tabs i.on { background: #1E6F4C; }
.sk.photo { background: linear-gradient(160deg, #6f5a48, #3d342c 55%, #2b2723); }
.sk.photo .sk-card { background: rgba(255,255,255,.88); }

@media (max-width: 640px) {
  .frame { border-radius: 20px; padding: 4px; }
  .sk { padding: 24% 7% 0; gap: 6%; }
  .tabs { height: 6%; }
  .frame::before { top: 9px; height: 10px; }
  .screen { border-radius: 18px; }
  .tablet .frame { border-radius: 18px; padding: 6px; }
  .tablet .frame::before { top: 1px; width: 4px; height: 4px; }
  .tablet .screen { border-radius: 13px; }
  .device.phone { width: 22%; margin-bottom: -10px; }
  .device.left { margin-right: -5%; } .device.right { margin-left: -5%; }
  .phone .sk-card { gap: 3px; } .phone .sk-btn { height: 8px; }
  .device.tablet { width: 74%; }
  .ipad-col { gap: 5px; }
  .sk-card, .sk.wide .sk-card { padding: 5px; gap: 4px; border-radius: 8px; }
  .bar { height: 4px; } .bar.t { height: 7px; } .bar.s, .bar.lbl { height: 3px; }
  .avatar, .sk.wide .avatar { width: 16px; height: 16px; border-width: 1.5px; }
  .pill, .sk.wide .pill { height: 6px; } .sk-btn, .sk.wide .sk-btn { height: 9px; }
  .sk-logo { width: 10px; height: 10px; border-radius: 3px; }
  .sk-dot { width: 8px; height: 8px; } .ring { width: 6px; height: 6px; border-width: 1px; }
  .tabs i { width: 7px; height: 7px; border-radius: 2px; }
  .sk-row { gap: 4px; }
}