/* the finale (Rob 2026-10-08, A2): on the last screen the camera pulls back out of the black screen and the device
   settles in the upper part (main.js, applyFinale fits it between the topbar and the heading); the price, the button
   and the footer sit under it, at the bottom. A horizontal drag turns the device; pan-y leaves the vertical scroll to
   the browser */
.ch-buy { touch-action: pan-y; }
.buy-pin { box-sizing: border-box; justify-content: flex-end; padding-bottom: calc(20px + env(safe-area-inset-bottom)); } /* border-box: the padding stays inside the one last screen */
/* short landscape screens: the heading follows the height too, so the device keeps room above it */
.ch-buy h2 { font-size: clamp(34px, min(6.4vw, calc(7.4 * var(--svh, 1svh))), 72px); }
/* Rob 2026-10-11: the pre-order button and, beside it, the way to the simulator (one row, so the screen keeps its height) */
.buy-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; margin-top: 1.1em; }
.ch-buy .buy-cta .btn { margin-top: 0; }
@media (max-width: 420px) { .ch-buy .buy-cta { gap: 10px; } .ch-buy .buy-cta .btn { padding-left: 22px; padding-right: 22px; } } /* one row from 375 px up */
.ch-buy .foot { position: static; margin-top: calc(4 * var(--svh, 1svh)); }
/* only a drag that starts on the device turns it (main.js finOnDevice): the copy stays normal page, selectable text
   and the normal cursor; the grab cursor only over the device (fin-grab), grabbing while it turns (fin-drag) */
.fin .ch-buy.fin-grab { cursor: grab; }
.fin .ch-buy.fin-drag { cursor: grabbing; -webkit-user-select: none; user-select: none; }
/* Rob 2026-10-10: the copy comes in with the page under the revealed device, as the chapters' text does (beat-in),
   fully in once it is wholly on screen, so it is at rest when the page ends */
@supports (animation-timeline: view()) {
  .buy-pin > h2, .buy-pin > p, .buy-pin > .buy-cta { animation: beat-in linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
}
/* short landscape screens (a phone on its side): no room above the copy, so the copy stands right of the device
   (main.js reads --fin-beside and fits the device into the part left of the heading) */
@media (orientation: landscape) and (max-height: 520px) {
  .story { --fin-run: calc(75 * var(--svh, 1svh)); } /* the heading stands high there: it comes up as the specs' last line leaves */
  .ch-buy { --fin-beside: 1; text-align: left; }
  .ch-buy h2, .ch-buy p, .ch-buy .foot p { margin-left: 0; }
  .ch-buy .buy-cta { justify-content: flex-start; }
  /* Rob 2026-10-10: the column is taller than the view there and its heading sat under the topbar (out of sight): the column starts under the topbar's pill (64 px; safe: an
     overflow runs off the bottom, not the top) and its type follows the height */
  .buy-pin { align-items: flex-start; justify-content: safe center; padding: 64px 0 calc(12px + env(safe-area-inset-bottom)) 52%; }
  .ch-buy h2 { font-size: clamp(26px, calc(7.4 * var(--svh, 1svh)), 44px); }
  .ch-buy .buy-pin > p { font-size: clamp(15px, calc(4.2 * var(--svh, 1svh)), 18px); line-height: 1.4; }
  .ch-buy .buy-cta { margin-top: .8em; }
  .ch-buy .foot { margin-top: calc(3 * var(--svh, 1svh)); }
}
/* the topbar's scrim runs 56 px below its pill: there a drag must still reach the device (main.js sets the topbar's
   pointer-events inline, hence !important); its two links stay live */
.fin .topbar { pointer-events: none !important; }
.fin .topbar a { pointer-events: auto; }
/* static mode (no 3D, html.no-gl): there is no device and no reveal, so .ch-buy is simply the last screen, the copy in
   its middle */
.no-gl .ch-buy { padding-top: 0; }
.no-gl .buy-pin { height: auto; min-height: calc(100 * var(--svh, 1svh)); justify-content: center; }