/*! Devices.css v0.2.0 | MIT License | github.com/picturepan2/devices.css */
/* Copyright (c) 2017 Yan Zhu. Licensed under the MIT License; the full
   text is at github.com/picturepan2/devices.css/blob/master/LICENSE.

   TRIMMED VENDOR COPY, not the published bundle. Taken from
   dist/devices.min.css of v0.2.0 (package.json 0.2.0, the last commit
   on master, 2022-09-18; the repo carries no git tag for it), which is
   50,506 bytes for sixteen devices. The landing's booking demo needs one
   phone, so this file keeps only:

     the shared base (.device and its frame and screen rules), and
     the iPhone 14 Pro in its default finish (the deep purple: #010101
     body, #342c3f ring, #c0b7cd highlight) with every part it draws,
     the frame, screen, stripe, header (the island), sensors, buttons,
     power key and home marks.

   Dropped: the other fifteen devices, and this model's .device-silver,
   .device-black and .device-gold finishes, none of which the page uses.
   Declarations are the upstream ones verbatim, reflowed one rule per
   line, with TWO edits. The first: the base rule's `.device *` is
   narrowed to `.device > *`. Upstream blockifies every descendant of the device so
   that an <img> or <iframe> screen sits flush; here the screen holds a
   hand-built CSS poster with inline text (an <em> mid-headline, a
   <br>), which a universal display:block would break line by line. The
   device's own parts are still covered, and every pseudo-element still
   is, which is what upstream relies on for the sensors and the antenna
   marks.

   The second edit (2026-09-08): every rule sits inside one @supports
   gate. The device is fixed-pixel by design (428 by 868 outside, a 390
   by 830 screen behind 19px of bezel) and expects to be scaled as a
   whole, and the landing scales it with the CSS length division
   tan(atan2(<length>, 428px)), the only way a stylesheet can turn a
   fluid width into the number `scale` wants. A browser without trig
   over lengths drops that one declaration and nothing else, which
   would leave a 428px phone in a 150px cell; the gate makes the sheet
   stand or fall with the division, so where the scale cannot be
   computed no bezel is drawn either and the page's own screen-only
   shell shows instead. The rule lines themselves are unindented so
   they stay byte-for-byte what upstream wrote. How the landing scales
   the device and what it draws without it lives beside its markup in
   landing.html, not here. Nothing in this file is themed: a phone is
   the same object on any page, so its colours are its own and stay
   hardcoded. */
@supports (scale: tan(atan2(100cqw, 428px))) {
.device, .device::before, .device::after, .device > *, .device ::before, .device ::after { box-sizing: border-box; display: block }
.device { position: relative; transform: scale(1); z-index: 1 }
.device .device-frame { z-index: 1 }
.device .device-screen { background-color: #000; background-position: center center; background-size: cover; object-fit: cover; position: relative }
.device-iphone-14-pro { height: 868px; width: 428px }
.device-iphone-14-pro .device-frame { background: #010101; border: 1px solid #1b1721; border-radius: 68px; box-shadow: inset 0 0 4px 2px #c0b7cd, inset 0 0 0 6px #342c3f; height: 868px; padding: 19px; width: 428px }
.device-iphone-14-pro .device-screen { border-radius: 49px; height: 830px; width: 390px }
.device-iphone-14-pro .device-stripe::after, .device-iphone-14-pro .device-stripe::before { border: solid rgba(1,1,1,.25); border-width: 0 7px; content: ""; height: 7px; left: 0; position: absolute; width: 100%; z-index: 9 }
.device-iphone-14-pro .device-stripe::after { top: 85px }
.device-iphone-14-pro .device-stripe::before { bottom: 85px }
.device-iphone-14-pro .device-header { background: #010101; border-radius: 20px; height: 35px; left: 50%; margin-left: -60px; position: absolute; top: 29px; width: 120px }
.device-iphone-14-pro .device-sensors::after, .device-iphone-14-pro .device-sensors::before { content: ""; position: absolute }
.device-iphone-14-pro .device-sensors::after { background: #010101; border-radius: 17px; height: 33px; left: 50%; margin-left: -60px; top: 30px; width: 74px }
.device-iphone-14-pro .device-sensors::before { background: radial-gradient(farthest-corner at 20% 20%, #6074bf 0, transparent 40%), radial-gradient(farthest-corner at 80% 80%, #513785 0, #24555e 20%, transparent 50%); border-radius: 50%; box-shadow: 0 0 1px 1px rgba(255,255,255,.05); height: 9px; left: 50%; margin-left: 36px; top: 42px; width: 9px }
.device-iphone-14-pro .device-btns { background: #1b1721; border-radius: 2px; height: 32px; left: -2px; position: absolute; top: 115px; width: 3px }
.device-iphone-14-pro .device-btns::after, .device-iphone-14-pro .device-btns::before { background: #1b1721; border-radius: 2px; content: ""; height: 62px; left: 0; position: absolute; width: 3px }
.device-iphone-14-pro .device-btns::after { top: 60px }
.device-iphone-14-pro .device-btns::before { top: 140px }
.device-iphone-14-pro .device-power { background: #1b1721; border-radius: 2px; height: 100px; position: absolute; right: -2px; top: 200px; width: 3px }
.device-iphone-14-pro .device-home::after, .device-iphone-14-pro .device-home::before { border: solid rgba(1,1,1,.25); border-width: 6px 0; content: ""; height: 6px; position: absolute; width: 6px; z-index: 9 }
.device-iphone-14-pro .device-home::after { right: 86px; top: 0 }
.device-iphone-14-pro .device-home::before { bottom: 0; left: 86px }
}