/* STEP-181 §11, §21: the photorealistic phone (made for AVA in ChatGPT: assets/content/phone-mockup-cutout.png, cropped to the phone,
   578 × 1195: phone-mockup-tight.webp) with a live HTML screen mapped onto its measured screen area (left 5.71 %, top 2.76 %,
   87.89 % × 93.39 % of the crop, i.e. 26.52 / 11.12 / 46.78 / 77.07 % of the original; corners about 6 % of its width;
   the front camera at the top centre, so the first 5 % of the height stays clear). Everything inside sizes in --u (a hundredth of the screen's width; the phone is the container),
   so the app reads the same at any size. Used by the home's 03 and 07, the Overview's slide 11, the plan and /glance */
.pmock { position: relative; aspect-ratio: 578 / 1195; width: 100%; container-type: inline-size; }
.pmock > img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; filter: drop-shadow(0 30px 50px rgba(0, 0, 0, .35)); }
.pmock-screen { position: absolute; left: 5.71%; top: 2.76%; width: 87.89%; height: 93.39%; box-sizing: border-box; overflow: hidden; border-radius: calc(6.4 * var(--u)); --u: .8789cqw; background: #F5F7FA; color: #0F1A26; padding: calc(13 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); display: flex; flex-direction: column; gap: calc(3.2 * var(--u)); font-family: var(--sans, "Instrument Sans", system-ui, sans-serif); text-align: left; }
.pmock-screen p { margin: 0; }
/* the family app's week (07) */
.app7 .a-k { font: 500 calc(3.6 * var(--u))/1.2 var(--mono, "Geist Mono", monospace); letter-spacing: .08em; text-transform: uppercase; color: #5B6B7D; }
.app7 .a-t { font: 700 calc(8.4 * var(--u))/1.05 var(--title, "Mona Sans", system-ui, sans-serif); font-stretch: 110%; letter-spacing: -.01em; margin-top: calc(-1 * var(--u)) !important; }
.app7 .a-c { background: #fff; border-radius: calc(4 * var(--u)); padding: calc(3.4 * var(--u)) calc(4 * var(--u)) calc(2.4 * var(--u)); box-shadow: 0 calc(.6 * var(--u)) calc(2 * var(--u)) rgba(15, 26, 38, .06); display: grid; gap: calc(1.4 * var(--u)); }
.app7 .a-c > p:first-child { display: flex; justify-content: space-between; align-items: baseline; gap: calc(2 * var(--u)); }
.app7 .a-c b { font: 650 calc(4.6 * var(--u))/1.2 var(--title, "Mona Sans", system-ui, sans-serif); }
.app7 .a-c span { font-size: calc(3.6 * var(--u)); color: #5B6B7D; white-space: nowrap; }
.app7 .a-c svg { width: 100%; height: calc(11 * var(--u)); display: block; overflow: visible; }
.app7 .a-c polyline { fill: none; stroke: #1A5FD6; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.app7 .heart polyline { stroke: #E2604E; }
.app7 .bp polyline { stroke: #7C6FD8; stroke-dasharray: 3 3; }
.app7 .a-c rect { fill: rgba(26, 95, 214, .28); }
.app7 .a-c rect.t { fill: #1A5FD6; }
.app7 .sleep rect { fill: rgba(124, 111, 216, .3); }
.app7 .sleep rect.t { fill: #7C6FD8; }
.app7 .d7 { display: grid; grid-template-columns: repeat(7, 1fr); font: 500 calc(2.8 * var(--u))/1 var(--mono, "Geist Mono", monospace); color: #8494A6; text-align: center; padding: 0 calc(1 * var(--u)); }
.app7 .a-n { margin-top: auto !important; font-size: calc(3.4 * var(--u)); line-height: 1.35; color: #5B6B7D; text-align: center; }
/* the AVA app on Overview 11: the day at a glance, and the settings */
.app11 { gap: calc(3.4 * var(--u)); padding-top: calc(12 * var(--u)); background: #FBFAF7; }
.app11 .a-k { font: 500 calc(3.4 * var(--u))/1.2 var(--mono, "Geist Mono", monospace); letter-spacing: .1em; text-transform: uppercase; color: #6B7A8C; }
.app11 .a-k.c { color: #1A5FD6; }
.app11 .a-t { font: 700 calc(9 * var(--u))/1.05 var(--title, "Mona Sans", system-ui, sans-serif); font-stretch: 105%; letter-spacing: -.01em; color: #0F1A26; }
.app11 .a-p { font-size: calc(4.4 * var(--u)); line-height: 1.35; color: #4A5A6C; }
.app11 .a-n3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(2.4 * var(--u)); }
.app11 .a-n3 div { display: grid; gap: calc(.8 * var(--u)); padding: calc(3 * var(--u)); border: 1px solid #DDE3EA; border-radius: calc(3 * var(--u)); }
.app11 .a-n3 b { font: 500 calc(7 * var(--u))/1 var(--mono, "Geist Mono", monospace); color: #0F1A26; }
.app11 .a-n3 span { font-size: calc(3.8 * var(--u)); color: #4A5A6C; }
.app11 .a-call { display: grid; gap: calc(1.4 * var(--u)); padding: calc(3.6 * var(--u)) calc(4 * var(--u)); border-radius: calc(3.4 * var(--u)); background: #E4EDF8; font-size: calc(4.2 * var(--u)); line-height: 1.35; color: #0F1A26; }
.app11 .a-msg { margin-top: auto; display: flex; align-items: center; justify-content: space-between; padding: calc(3 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u)) calc(4.4 * var(--u)); border: 1px solid #DDE3EA; border-radius: 999px; font-size: calc(4 * var(--u)); color: #8494A6; }
.app11 .a-msg i { display: grid; place-items: center; width: calc(8 * var(--u)); height: calc(8 * var(--u)); border-radius: 50%; background: #1A5FD6; color: #fff; }
.app11 .a-msg svg { width: 55%; height: 55%; }
.app11 .a-set { display: grid; gap: calc(1 * var(--u)); padding-bottom: calc(3 * var(--u)); border-bottom: 1px solid #E3E8EE; }
/* STEP-183 §12 (Ivana, 22:38): a whole app page filling each screen, never a short list in a tall empty screen: the status bar, the
   content spread over the height (the day's lines, the five settings as rows that share the room), the tab bar at the foot */
.app11 { padding-top: calc(5 * var(--u)); padding-bottom: calc(3 * var(--u)); }
.app11 .a-sb { display: flex; justify-content: space-between; align-items: center; margin-bottom: calc(3 * var(--u)); font: 600 calc(3.8 * var(--u))/1 var(--sans, "Instrument Sans", system-ui, sans-serif); color: #0F1A26; }
.app11 .a-sb i { width: calc(6.4 * var(--u)); height: calc(3.2 * var(--u)); border: 1px solid #0F1A26; border-radius: calc(.9 * var(--u)); box-sizing: border-box; background: linear-gradient(90deg, #0F1A26 64%, transparent 64%) content-box; padding: 1px; }
.app11 .a-day { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: space-evenly; gap: calc(1.6 * var(--u)); }
.app11 .a-day p:not(.a-k) { display: flex; gap: calc(3 * var(--u)); padding: calc(1.6 * var(--u)) 0; border-top: 1px solid #E3E8EE; font-size: calc(4 * var(--u)); line-height: 1.3; color: #0F1A26; }
.app11 .a-day b { flex: none; width: calc(10 * var(--u)); font: 500 calc(3.6 * var(--u))/1.45 var(--mono, "Geist Mono", monospace); color: #6B7A8C; }
.app11 .a-msg { margin-top: 0; }
.app11.a-sets .a-set { flex: 1 1 0; align-content: center; padding: 0 calc(1 * var(--u)); border-bottom: 1px solid #E3E8EE; }
.app11.a-sets .a-set p:last-child { font-size: calc(4.8 * var(--u)); }
.app11 .a-tabs { display: grid; grid-template-columns: repeat(4, 1fr); padding-top: calc(3 * var(--u)); border-top: 1px solid #E3E8EE; font: 500 calc(3 * var(--u))/1.2 var(--sans, "Instrument Sans", system-ui, sans-serif); color: #8494A6; text-align: center; }
.app11 .a-tabs span { display: grid; justify-items: center; gap: calc(1.2 * var(--u)); }
.app11 .a-tabs i { width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: calc(1.6 * var(--u)); border: 1.5px solid currentColor; box-sizing: border-box; }
.app11 .a-tabs .on { color: #1A5FD6; }
.app11 .a-tabs .on i { background: currentColor; }
.app11 .a-set p:last-child { font-size: calc(4.4 * var(--u)); line-height: 1.3; color: #0F1A26; }
/* Overview 11's two phones side by side */
.pphones { flex: none; }
.pitch-site .pphones .pmock { width: min(250px, 15vw, calc((var(--screen, 100dvh) - 360px) * 578 / 1195)); }
.pitch-book .pphones .pmock { width: 272px; } /* STEP-183 §12: the fuller screens; 32 px clear of the wave */
/* STEP-183 §12: on a phone the two side by side, centred, each about 44 % of the width, a little overlapping, the second a little lower,
   like a product shot; nothing behind them */
@media (max-width: 720px) {
  .pitch-site #app .pphones { align-self: center; display: flex; flex-direction: row; flex-wrap: nowrap; align-items: flex-start; justify-content: center; gap: 0; width: 100%; padding-bottom: 10vw; background: none; }
  .pitch-site .pphones .pmock { width: 44vw; flex: none; }
  .pitch-site .pphones .pmock + .pmock { margin-left: -4vw; margin-top: 10vw; z-index: 1; }
}
/* STEP-189 §4: the Overview's app slide: one big phone, its screens stacked in the mock-up's screen area, the point's own one on top,
   cross-fading in 0.4 s (never the whole phone). .big: the type for a phone at about 80 % of the slide's height, readable at a glance
   (the main line about 35 px, the text about 18 px on a 1920 screen) */
.app-phone .pmock-screen { transition: opacity .4s ease; }
.app-phone .pmock-screen:not(.on) { opacity: 0; }
@media (prefers-reduced-motion: reduce) { .app-phone .pmock-screen { transition: none; } }
.app11.big { gap: calc(3.6 * var(--u)); }
.app11.big .a-k { font-size: calc(3.8 * var(--u)); }
.app11.big .a-t { font-size: calc(10.5 * var(--u)); }
.app11.big .a-p { font-size: calc(5.2 * var(--u)); }
.app11.big .a-n3 b { font-size: calc(8 * var(--u)); }
.app11.big .a-n3 span { font-size: calc(4.2 * var(--u)); }
.app11.big .a-call { font-size: calc(5 * var(--u)); }
.app11.big .a-day p:not(.a-k) { font-size: calc(4.8 * var(--u)); }
.app11.big .a-day b { font-size: calc(4 * var(--u)); width: calc(12 * var(--u)); }
.app11.big .a-msg { font-size: calc(4.6 * var(--u)); }
.app11.big .a-tabs { font-size: calc(3.4 * var(--u)); }
/* a message, written and sent: the thread with AVA's note between, the answer brought back */
.app11 .a-th { flex: 1 1 auto; display: flex; flex-direction: column; justify-content: center; gap: calc(4 * var(--u)); }
.app11 .a-b { max-width: 82%; padding: calc(3.6 * var(--u)) calc(4.4 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(5.2 * var(--u)); line-height: 1.32; display: grid; gap: calc(1.4 * var(--u)); }
.app11 .a-b span { font: 500 calc(3.2 * var(--u))/1.2 var(--mono, "Geist Mono", monospace); letter-spacing: .04em; opacity: .75; }
.app11 .a-b.me { align-self: flex-end; background: #1A5FD6; color: #fff; border-bottom-right-radius: calc(1.4 * var(--u)); }
.app11 .a-b.her { align-self: flex-start; background: #fff; color: #0F1A26; border: 1px solid #DDE3EA; border-bottom-left-radius: calc(1.4 * var(--u)); }
.app11 .a-note { align-self: center; text-align: center; max-width: 86%; font-size: calc(3.8 * var(--u)); line-height: 1.35; color: #5B6B7D; }
/* the topics, and a wish passed on */
.app11.a-topics .a-set { flex: 1 1 0; align-content: center; }
.app11.a-topics .a-set p:last-child { font-size: calc(5.4 * var(--u)); }
.app11 .a-wish { display: grid; gap: calc(1.6 * var(--u)); padding: calc(4 * var(--u)); border-radius: calc(3.4 * var(--u)); background: #E4EDF8; font-size: calc(5 * var(--u)); line-height: 1.35; color: #0F1A26; }
/* STEP-189 §0: the watch, everywhere: the photo of the real watch facing the viewer (the intro film's last frame), still, its screen a
   canvas laid on the photo's screen (assets/access/watch-photo.js). The photo is placed in the watch's square box so its blue ring
   lies where the 3D watch's did (centre 49.9 % / 49.9 %, radius 23.41 % of the box's width: the film's ring is at .5146 / .4929,
   radius .1881 of the frame); the straps run past the box. The canvas: the painted face's ring (87 % of its radius) on that ring */
.watch-photo { position: absolute; left: -14.14%; top: -11.44%; width: 124.46%; height: auto; max-width: none; display: block; pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }
/* STEP-196 §2: the hero holds the film's own last frame (.watch-film) under the sharp master (.watch-master): the intro ends on the
   frame, then at the arrival the master fades in over 0.4 s and the frame goes; the ring is in the same place in both, so the watch
   only sharpens. Reduced motion: the master at once */
.watch-master { opacity: 0; transition: opacity .4s ease; }
.sharp > .watch-master { opacity: 1; }
.sharp > .watch-film { opacity: 0; transition: opacity 0s .4s; }
@media (prefers-reduced-motion: reduce) { .watch-master { opacity: 1; transition: none; } .watch-film { opacity: 0; } }
.watch-screen { position: absolute; left: 23%; top: 23%; width: 53.8%; height: 53.8%; border-radius: 50%; pointer-events: none; }