/* Real screenshots of the app at work. */
.show { position: relative; max-width: 1080px; margin: 0 auto; padding-right: clamp(0px, 9vw, 110px); }
.show::before { content: ''; position: absolute; inset: 12% 8% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, var(--aura-blue), transparent); filter: blur(80px); opacity: 0.55; }
.shot { position: relative; margin: 0; border-radius: var(--r-lg); padding: 8px; }
.shot img { width: 100%; height: auto; border-radius: calc(var(--r-lg) - 8px); }
.shot figcaption { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 14px 12px 8px; font-size: 14px; color: var(--dim); }
.shot figcaption b { color: var(--text); font-weight: 600; font-size: 15px; }
.shot-main { box-shadow: var(--shadow-deep); }
.shot-phone { position: absolute; right: 0; bottom: -28px; width: clamp(110px, 19vw, 214px); padding: clamp(4px, 0.6vw, 7px); border-radius: clamp(20px, 3vw, 36px); box-shadow: var(--shadow-deep); }
.shot-phone img { border-radius: clamp(16px, 2.5vw, 30px); }
.show-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: clamp(56px, 6vw, 80px); }
.show-sub { margin: clamp(56px, 7vw, 96px) 0 24px; display: grid; gap: 8px; text-align: center; justify-items: center; }
.show-sub p { color: var(--dim); font-size: 16px; }
.show-sub + .show-row { margin-top: 0; }
.show-note { margin-top: 28px; text-align: center; font-size: 13px; color: var(--faint); }
@media (max-width: 860px) {
  .show-row { grid-template-columns: 1fr; }
  .show { padding-right: 0; }
  .shot-phone { right: 10px; bottom: -22px; }
}

/* Photographs of real rooms: a mosaic in glass frames, each with its line of words over the picture's foot. */
.life { display: grid; grid-template-columns: 1.15fr 1fr 1fr; grid-template-rows: repeat(2, clamp(230px, 27vw, 372px)); grid-template-areas: 'setup setup squat' 'mat laptop together'; gap: 20px; margin-top: clamp(40px, 5vw, 64px); }
.pic { position: relative; margin: 0; padding: 7px; border-radius: var(--r-lg); overflow: hidden; }
.pic img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--r-lg) - 7px); filter: saturate(0.88) brightness(0.9); transition: transform 900ms var(--curve), filter 600ms; }
.pic:hover img { transform: scale(1.03); filter: saturate(1) brightness(0.96); }
.pic::after { content: ''; position: absolute; inset: 7px; border-radius: calc(var(--r-lg) - 7px); background: linear-gradient(180deg, transparent 45%, var(--scrim) 100%); pointer-events: none; }
.pic figcaption { position: absolute; z-index: 1; left: 26px; right: 26px; bottom: 22px; display: grid; gap: 2px; }
.pic figcaption b { font-size: clamp(17px, 1.5vw, 21px); font-weight: 600; letter-spacing: -0.03em; }
.pic figcaption span { font-size: 14px; color: var(--dim); }
.pic-setup { grid-area: setup; }
.pic-squat { grid-area: squat; }
.pic-mat { grid-area: mat; }
.pic-laptop { grid-area: laptop; }
.pic-together { grid-area: together; }
.pic-setup img { object-position: 50% 30%; }
@media (max-width: 900px) {
  .life { grid-template-columns: 1fr 1fr; grid-template-rows: none; grid-auto-rows: clamp(200px, 44vw, 340px); grid-template-areas: 'setup setup' 'squat mat' 'laptop together'; gap: 14px; }
}
@media (max-width: 560px) {
  .life { grid-template-columns: 1fr; grid-auto-rows: 240px; grid-template-areas: 'setup' 'squat' 'mat' 'laptop' 'together'; }
  .pic figcaption { left: 20px; right: 20px; bottom: 18px; }
}
/* The laptop sits at the picture's foot, so this one carries its words at the top. */
.pic-laptop img { object-position: 0% 100%; }
.pic-laptop::after { background: linear-gradient(0deg, transparent 50%, var(--scrim) 100%); }
.pic-laptop figcaption { bottom: auto; top: 22px; }