/* from lab/app-part.css */
@media (max-width: 600px) {
  .store-badges { --badge: 44px; gap: 10px; justify-content: center; }
}
/* from lab/get-final.css */
.gf { display: grid; gap: var(--lead); }
.gf-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 16px; }
.gf-icon .app-icon { --icon: clamp(72px, 7vw, 88px); margin-bottom: 6px; }
.gf-head .display-2 { text-wrap: balance; }
.gf-head .section-lede { max-width: 44ch; }
.gf-head .section-lede b { color: var(--ink); font-weight: 500; }
.gf-badges { justify-content: center; margin-top: 10px; }
@media (max-width: 760px) {
  .gf-head { gap: 12px; }
}
.g2-reasons { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: calc(16px - var(--lead)); }
@media (max-width: 760px) {
  .g2-reasons { display: flex; gap: 12px; margin: calc(12px - var(--lead)) calc(-1 * var(--gutter)) 0; padding: 0 var(--gutter) 4px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .g2-reasons::-webkit-scrollbar { display: none; }
}
/* from lab/get-cards.css */
.gk-feature > header strong em, .gk-card figcaption em { font-style: italic; }
.gk-card { min-height: 330px; }
.gk-card figcaption b { font: 400 28px/1.06 var(--f-serif); letter-spacing: -.012em; }
.gk-pic { align-self: stretch; display: flex; flex-direction: column; justify-content: flex-end; gap: 16px; flex: 1; margin-top: 24px; padding: 0 24px 24px; min-height: 0; }
.gk-row { display: flex; align-items: center; gap: 12px; padding: 8px 16px 8px 8px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); text-align: left; }
.gk-t b { display: block; font-weight: 500; font-size: 15px; line-height: 1.3; }
.gk-t small { display: block; color: var(--ink-3); font-size: 13px; line-height: 1.3; }
.gk-ic { display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--ink) 8%, transparent); color: var(--ink); }
.gk-ic svg, .gk-big svg, .gk-dev i svg, .gk-dl svg, .gk-doc svg, .gk-hold svg, .gk-drop svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.gk-ic svg { width: 20px; height: 20px; }
.gk-devices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.gk-dev { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 16px 8px 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.gk-dev i svg { width: 30px; height: 30px; display: block; stroke-width: 1.5; }
.gk-dev b { font-weight: 500; font-size: 13px; }
.gk-dev em { position: absolute; top: 8px; right: 8px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #34C759; }
.gk-dev em { color: #fff; }
.gk-dev em svg { width: 13px; height: 13px; }
.gk-price { display: flex; align-items: baseline; justify-content: center; gap: 8px; padding: 12px 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); }
.gk-price b { font: 400 30px/1 var(--f-serif); letter-spacing: -.02em; }
.gk-price span { color: var(--ink-3); font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .gk-card * { animation: none !important; }
}
@media (max-width: 760px) {
  .gk-card { min-height: 310px; border-radius: 26px; padding-top: 24px; }
  .gk-card figcaption b { font-size: 25px; }
  .gk-pic { padding: 0 20px 20px; }
}
.gk-proc { position: relative; height: 136px; }
.gk-splitc { display: block; width: 100%; height: 100%; }
.gk-incl { list-style: none; margin: 0; padding: 0 4px; display: grid; gap: 6px; font-size: 15px; }
.gk-incl li { display: flex; align-items: baseline; gap: 8px; }
.gk-incl li span { color: var(--ink-2); }
.gk-incl li i { flex: 1; border-bottom: 1px dotted var(--line-2); transform: translateY(-4px); }
.gk-incl li b { font-weight: 500; }
.once .gk-dev em, .once .gk-incl li, .once .gk-price, .once .gk-receipt li { opacity: 0; }
.played .once .gk-dev em { animation: gk-pop1 .5s var(--spring) both; }
.played .once .gk-dev:nth-child(1) em { animation-delay: .25s; }
.played .once .gk-dev:nth-child(2) em { animation-delay: .5s; }
.played .once .gk-dev:nth-child(3) em { animation-delay: .75s; }
.played .once .gk-incl li, .played .once .gk-receipt li { animation: gk-line .6s var(--ease) both; }
.played .once .gk-incl li:nth-child(1) { animation-delay: 1.05s; }
.played .once .gk-incl li:nth-child(2) { animation-delay: 1.25s; }
.played .once .gk-price { animation: gk-line .7s var(--ease) 1.5s both; }
@media (prefers-reduced-motion: reduce) {
  .once .gk-dev em, .once .gk-incl li, .once .gk-price, .once .gk-receipt li { opacity: 1; }
}
/* stays private (lab/private-five.css, C): a status row, then a privacy label as tall as the split in Works offline
   (136 px); once in view, the row and the label come in and Apple's shield (checkmark.shield.fill) pops in */
.gk-label { height: 136px; box-sizing: border-box; display: flex; align-items: center; gap: 16px; padding: 0 20px; border-radius: 16px; border: 1px solid var(--line); background: var(--paper); text-align: left; }
.gk-shield { color: #34C759; }
.gk-shield svg { width: 56px; height: 56px; display: block; }
.gk-label b { display: block; font: 400 24px/1.1 var(--f-serif); letter-spacing: -.01em; }
.gk-label small { display: block; margin-top: 4px; color: var(--ink-2); font-size: 13px; line-height: 1.4; }
.gk-private .gk-row, .gk-private .gk-label { opacity: 0; }
.gk-private.played .gk-row { animation: gk-line .6s var(--ease) .1s both; }
.gk-private.played .gk-label { animation: gk-line .6s var(--ease) .35s both; }
.gk-private .gk-shield svg { opacity: 0; }
.gk-private.played .gk-shield svg { animation: gk-pop1 .5s var(--spring) .8s both; }   /* Apple's shield pops in */
@media (prefers-reduced-motion: reduce) { .gk-private .gk-row, .gk-private .gk-label, .gk-private .gk-shield svg { opacity: 1; animation: none; } }
@media (max-width: 760px) {
  .g2-reasons.stack { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin: calc(12px - var(--lead)) 0 0; padding: 0; overflow: visible; }
  .g2-reasons.stack > .gk-card { min-height: 0; padding-bottom: 0; }
}
/* motion */
@keyframes gk-pop1 { from { opacity: 0; transform: scale(0); } to { opacity: 1; transform: scale(1); } }
@keyframes gk-line { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* the picture's words keep their second half together (a phone breaks before it, not inside it) */
/* a tablet: three cards side by side would squeeze their words, so they stand one under another, as on a phone, no
   wider than a phone's two */
@media (min-width: 761px) and (max-width: 1060px) {
  .g2-reasons.stack { grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 560px; margin-inline: auto; }
}

/* ---------- the app film (home/appfilm.js): the card's picture, 16:9 at every size. The frame is a container, so what is
   drawn round its edge grows with it; behind, a calm glow in the song's colours; the camera at its middle, the three
   devices standing round it in its world (the perspective is set from the frame's width) ---------- */
.get-card.af { padding: 0; background: #121110; }
.af-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; container-type: inline-size; perspective: 2400px; perspective-origin: 50% 50%; }
.af-glow { position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 56%, rgba(226, 182, 48, .2), transparent 72%), radial-gradient(42% 48% at 18% 82%, rgba(170, 84, 196, .26), transparent 72%),
    radial-gradient(40% 44% at 84% 18%, rgba(222, 104, 170, .16), transparent 72%), radial-gradient(70% 60% at 50% 110%, rgba(214, 120, 40, .16), transparent 70%); }
.af-glow::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 12.5cqw 3.1cqw rgba(0, 0, 0, .55); }
.af-cam { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.af-dev { position: absolute; left: 0; top: 0; transform-origin: 50% 50%; transform-style: preserve-3d; will-change: transform; backface-visibility: hidden; container-type: inline-size; }
.af-dev > .device { width: 100%; }
/* the iPad's and the iPhone's dark rim, their shadows soft and long; the Mac's window its own shadow */
.af .pd-in { border-radius: calc(18 * var(--pt)); box-shadow: 0 0 0 calc(30 * var(--pt)) #0B0B0C, 0 0 0 calc(30 * var(--pt) + 1px) rgba(255, 255, 255, .16), 0 calc(50 * var(--pt)) calc(120 * var(--pt)) calc(-10 * var(--pt)) rgba(0, 0, 0, .6); }
.af .ph-in { box-shadow: 0 0 0 calc(16 * var(--pt)) #0B0B0C, 0 0 0 calc(16 * var(--pt) + 1px) rgba(255, 255, 255, .16), 0 calc(50 * var(--pt)) calc(120 * var(--pt)) calc(-10 * var(--pt)) rgba(0, 0, 0, .65); }
.af .mw-in { box-shadow: 0 0 0 1px rgba(0, 0, 0, .5), 0 3cqw 8cqw -2cqw rgba(0, 0, 0, .6); }
/* the Mac's pointer (about 17 points), pressing in a little as it taps and holds */
.af-hand { position: absolute; left: 0; top: 0; z-index: 9; width: 1.9cqw; height: 1.9cqw; margin: -.26cqw 0 0 -.39cqw; opacity: 0; pointer-events: none; will-change: translate, opacity; }
.af-hand svg { display: block; width: 100%; height: 100%; fill: var(--ink); stroke: var(--paper); stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .35)); transform-origin: 20% 14%; transition: transform .1s var(--ease); }
.af-hand.press svg { transform: scale(.84); }