/* ══ ON A PHONE OR AN UPRIGHT iPAD ══════════════════════════════════════
   Linked only under 1100 points wide (index.html), so the laptop never
   reads a line of it.

   Each section has its heading (the laptop's: display type, tight, a
   black line then a grey one, as wide as the screen allows), then its
   scenes, each a picture of the app with its numbered points.

   A scene's motion follows the scroll. phone.js gives each a progress
   from 0 to 1 from where it is on the screen (one passive scroll listener
   and requestAnimationFrame) and draws it at that progress, so it moves
   exactly with the finger, back as well as on; nothing plays on a timer.
   Some scenes are pinned (.m-pin): a stage 100svh tall, sticky, held for
   about a screen of scroll to each step (--pin), its picture and its
   point clear of Safari's bars. The others play as they come up to the
   middle of the screen. Only headings and points fade in on their own
   (.m-rv), as they arrive.

   What is written plainly below is how each scene ends, so with no
   script, or with less motion asked for, each is simply there, unpinned. */

/* The laptop's sections give way to the phone's (each right after its
   section, index.html): no height, nothing in them drawn, but still where
   they stand, so points.js, which keeps the place as the phone turns by
   where each part of the page starts, never takes the page to be in one.
   The phone's sections, empty on a laptop (page.css), and the footer's X
   account, hidden there, show. */
.hero,.plans,.deck,.cmds,.srch,.logb,.priv,.safe,.close{height:0;overflow:clip;visibility:hidden;content-visibility:hidden}
.m-ch{height:auto;overflow:visible;overflow-x:clip;visibility:visible;content-visibility:visible}
/* The footer's X account: "@TerminalAero" in its row of links, as they
   are (the laptop's link says X). */
.foot-links .fx-l{display:none}
.foot-links .fx-m[hidden]{display:inline}

/* ── The system ─────────────────────────────────────────────────────────
   Apple's own system font on an Apple device, Inter elsewhere, as the
   laptop's stages; the laptop's monospace for codes, numbers and labels. */
:root{
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",sans-serif;
  --m-ease:cubic-bezier(.22,1,.36,1);
  --m-fast:600ms;
  --m-med:800ms;
  --m-slow:900ms;
  --m-rise:28px;
  /* The page's edges: 24 points in, or the screen's safe area; on an iPad
     a column at most 820 wide. */
  --m-l:max(24px,env(safe-area-inset-left),calc((100% - 820px) / 2));
  --m-r:max(24px,env(safe-area-inset-right),calc((100% - 820px) / 2));
  --m-sec:136px;
  --m-fig:64px;
  --m-fig2:104px;
  /* A phone picture: 67% of the screen Safari leaves with its bars out. */
  --ph:min(67svh,calc(72vw * 2.0927),880px);
  /* A pinned stage's room above and below, clear of Safari's bars and the
     screen's corners. Apple's spring, for the one thing that plays on its
     own: the hero's notification. */
  --m-spring:cubic-bezier(.34,1.45,.64,1);
  --m-st:calc(env(safe-area-inset-top) + 24px);
  --m-sb:calc(env(safe-area-inset-bottom) + 64px);
}
body{font-family:var(--text)}

/* ── Headings and points come in as they arrive (40% on the screen): a
   fade and a small rise; back again once scrolled back up past. */
.m-rv{transition:opacity var(--m-med) var(--m-ease),transform var(--m-med) var(--m-ease)}
html.m-on .m-rv:not(.in){opacity:0;transform:translateY(var(--m-rise));transition-delay:0s !important}
/* While phone.js sets the start (one frame), nothing moves. */
html.m-init *,html.m-init *::before,html.m-init *::after{transition:none !important;animation-play-state:paused !important}

/* ── A section ── */
/* (The space between two sections is --m-sec, part of it inside each, so
   a card's soft shadow stays in its own section.) */
.m-sec{position:relative;padding:calc(var(--m-sec) - 56px) var(--m-r) 56px var(--m-l);container-type:inline-size;font-family:var(--text)}
.m-hero{font-family:var(--text)}

/* Its heading: the laptop's, as large as the column allows (--fit, from
   its longest line; at most 13% of the column), the black line, then the
   grey. */
.m-hd{font:600 min(13cqw,var(--fit,13cqw))/.98 var(--display);letter-spacing:-.05em;color:#0b0b0b;white-space:nowrap}
.m-hd span{display:block}
.m-hd span+span{color:#8a8a83}
/* (Each heading's longest line, in widths of its letters' size, measured
   in Safari, with a little room kept for other systems' spacing.) */
.m-plans .m-hd{--fit:calc(100cqw / 9.57)}
.m-srch .m-hd{--fit:calc(100cqw / 8.73)}
.m-logb .m-hd{--fit:calc(100cqw / 11.13)}
.m-imp .m-hd{--fit:calc(100cqw / 10.23)}
.m-safe .m-hd{--fit:calc(100cqw / 11.75)}
.m-deck .m-hd{--fit:calc(100cqw / 10.6)}

/* ── A figure: the picture, then its points. ── */
.m-fig{margin-top:var(--m-fig)}
.m-fig+.m-fig,.m-pin+.m-fig,.m-fig+.m-pin{margin-top:var(--m-fig2)}
/* The picture: its own size (--vw by --vh), in the middle of the column
   even when a little wider than it. */
.m-vis{position:relative;width:var(--vw,100%);height:var(--vh,auto);margin-left:calc(50% - var(--vw,100%) / 2)}
.m-caps{max-width:34em;margin-top:36px}
/* A point: its number, the laptop's green tag, then its title and line. */
.m-cap{display:flex;gap:14px;align-items:flex-start}
.m-cap+.m-cap{margin-top:24px}
.m-n{flex:none;margin-top:1px;padding:1px 7px;border:1px solid #cfe9d8;border-radius:7px;background:#eef8f1;color:#16a34a;font:500 13px/1.5 var(--mono)}
.m-ct{font:600 20px/1.25 var(--text);letter-spacing:-.016em;color:#141413}
.m-cl{margin-top:5px;font:400 17px/1.47 var(--text);letter-spacing:-.008em;color:#6a6a64;text-wrap:pretty}
.m-cap code{font:500 .9em var(--mono);letter-spacing:0;color:#16a34a}
/* Each point's number is a button, as on the laptop: a tap takes the page
   to its moment (phone.js); its title too. The tap's area is at least 44
   points tall. */
.m-n.m-go{position:relative;-webkit-appearance:none;appearance:none;cursor:pointer;-webkit-tap-highlight-color:transparent}
.m-n.m-go::after{content:"";position:absolute;left:-10px;right:-10px;top:-12px;bottom:-12px}
/* Each button's invisible tap area above the words beside it, so a finger
   44pt across always lands on it (the area was under its neighbours). */
.m-n.m-go,.m-sb,.m-top .beta{z-index:1}
.m-cap:has(.m-go) .m-ct{cursor:pointer}
.m-go:focus{outline:none}
.m-go:focus-visible{outline:2px solid #16a34a;outline-offset:3px}
.m-cap+.m-cap.m-rv{transition-delay:90ms}
.m-cap+.m-cap+.m-cap.m-rv{transition-delay:180ms}

/* ── A pinned scene: the stage, 100svh (the screen with Safari's bars
   out, so it never jumps as they go), held while the page scrolls through
   its steps; its picture and point in the middle of it, clear of the bars.
   A scene with steps has its points one over the other, each in as its
   step comes (phone.js). Pinned only with motion and a script. */
.m-pin{position:relative;margin-top:24px}
html.m-on:not(.m-still) .m-pin{height:calc(100svh + var(--pin))}
html.m-on:not(.m-still) .m-stage{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;justify-content:center;justify-content:safe center;padding:var(--m-st) 0 calc(var(--m-sb) + var(--m-vx,0px))}
/* (phone.js reads the screen's svh and the room kept clear from this.) */
.m-probe{position:fixed;left:0;top:0;width:0;height:100svh;box-sizing:border-box;padding:var(--m-st) 0 var(--m-sb);visibility:hidden;pointer-events:none}
html.m-on:not(.m-still) .m-steps{display:grid}
html.m-on:not(.m-still) .m-steps>.m-cap{grid-area:1/1;margin-top:0}
.m-stage .m-caps{margin-top:24px}
/* A pinned scene's steps, listed under its picture, as the laptop lists
   its points: the step playing with its number, title and sentence at full
   strength; the others, number and title only, dimmed. Each row a button
   to its step. With script and motion, phone.js stands each row where it
   goes (the list one height for the whole scene, its tallest) and moves
   the highlight and the sentence with the scroll; otherwise every row is
   shown in full, one under the other. */
.m-list{max-width:34em;margin-top:20px;list-style:none}
.m-step+.m-step{margin-top:4px}
.m-sb{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:40px;padding:0;border:0;background:none;text-align:left;color:inherit;font:inherit;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
/* The options sheet over the diverted card is a picture: it never takes a
   tap (unseen, it lay over 2A's tap area on an upright iPad). */
.m-ch .pl-dr{pointer-events:none}
/* 40 tall, 6 apart: each row's tap area 46 tall, touching its neighbours'
   and never under them. */
.m-sb::after{content:"";position:absolute;left:0;right:0;top:-3px;bottom:-3px}
.m-sb .m-n{min-width:38px;margin:0;text-align:center}
.m-sb .m-ct{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.m-step .m-cl{margin:0 0 4px 50px}
.m-list.m-listed{position:relative}
/* (Nothing on a stage is squeezed: each keeps its own height.) */
html.m-on:not(.m-still) .m-stage>*{flex:none}
.m-list.m-listed>.m-step{position:absolute;left:0;right:0;top:0;margin:0}
.m-cset>.m-list{margin-top:14px}
/* (How long each is held is phone.js's: for each step, its point's
   crossfade, its motion, then a hold of a third of a screen where nothing
   moves; set as --pin.) */
.m-pin{--pin:100svh}
/* What is drawn on a stage is sized to its room (phone.js sets each
   scene's --room: the visible area with Safari's bars out, the least it
   has been, less the room kept clear of the bars and the scene's words),
   so the picture and its point always fit between the bars. */
.m-stage .m-pfig{--ph:min(var(--room,60svh),calc(72vw * 2.0927),880px)}

/* ══ THE HERO ════════════════════════════════════════════════════════════
   The bar (the mark and the name, and Join the beta, each a 44pt target),
   the headline as the laptop's, and the phone with My Flights, its foot
   under the screen's. As the page opens the headline comes up and the
   phone rises; as it is scrolled a notification drops in (phone.js). */
.m-hero{position:relative;padding:0 var(--m-r) 56px var(--m-l)}
.m-top{position:relative;z-index:5;display:flex;align-items:center;justify-content:space-between;height:calc(56px + env(safe-area-inset-top));padding-top:env(safe-area-inset-top)}
.m-top .brand{gap:8px;min-height:44px;font-size:20px}
.m-top .brand img{width:31px;height:23px}
.m-top .beta{position:relative;height:36px;padding:0 16px;font-size:15px}
.m-top .beta::before{content:"";position:absolute;inset:-6px 0}
/* Very narrow (a small phone, or any phone at 200% zoom): the mark alone,
   so Join the beta stays on the screen. */
/* (safe center, above: when a stage's picture and words are taller than the
   screen, as at 200% zoom, they start at its top rather than spilling up
   over the heading.) */
@media(max-width:340px){.m-sb .m-ct{white-space:normal}.m-top .brand span{display:none}.m-top .brand{min-width:46px;min-height:48px;justify-content:center}.m-top .beta{padding:0 12px}}
.m-top .beta-pop{top:calc(100% + 8px);width:min(280px,calc(100vw - 32px));padding:14px 16px 16px;border-radius:16px;transform:translateY(-4px) scale(.97)}
.m-top .beta-pop.on{transform:none}
:is(.m-top,.m-join) .bp-lead{font-size:15px}
:is(.m-top,.m-join) .bp-addr{margin-top:4px;font-size:17px}
:is(.m-top,.m-join) .bp-row{gap:8px;margin-top:12px}
:is(.m-top,.m-join) .bp-btn{min-height:44px;padding:0 12px;font-size:15px}
.m-big{margin-top:10px;font:600 min(20vw,180px)/.98 var(--display);letter-spacing:-.05em;text-align:center;color:#0b0b0b}
.m-big span{display:block}
.m-big span:last-child{color:#8a8a83}
.m-hph{position:relative;width:calc(var(--ph) / 2.0927);height:calc(var(--ph) * .57);margin:32px auto 0}
/* The hero's phone cut a little below its second flight (the trip's card
   ends at 49% of the shot), its foot fading out; its buttons, past its
   sides, kept. */
.m-hph .m-phone{left:-12px;right:-12px;bottom:auto;height:100%;padding:0 12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 80%,transparent);mask-image:linear-gradient(#000 80%,transparent)}
.m-phone{position:absolute;inset:0}
/* Every phone's screen clipped to its own rounded shape: what moves in it
   (on its own layer) never shows past its corners. */
.m-ch .screen{clip-path:inset(0 round calc(var(--w) * .1433));isolation:isolate}
.m-phone .iphone{--w:calc(var(--ph) / 2.0927)}
.m-s{position:absolute;inset:0}
.m-s0 .nobar{top:90.1602%}
/* As the page opens (a small intro, on its own). */
.m-top{animation:m-fade var(--m-med) var(--m-ease) both}
.m-big span{animation:m-up var(--m-med) var(--m-ease) both}
.m-big span:nth-child(2){animation-delay:90ms}
.m-big span:nth-child(3){animation-delay:360ms}
.m-hph{animation:m-rise var(--m-slow) var(--m-ease) .3s both}
@keyframes m-fade{from{opacity:0}}
@keyframes m-up{from{opacity:0;transform:translateY(var(--m-rise))}}
@keyframes m-rise{from{opacity:0;transform:translateY(72px)}}
/* The notification, as an iPhone in dark mode draws one, at the top of
   the phone's screen, a little larger than the phone's own scale so it
   can be read; it drops in on its own a second after the page opens, on
   Apple's spring, and stays. */
.m-note{position:absolute;z-index:6;left:50%;top:calc(var(--ph) * .065);display:flex;align-items:center;gap:10px;width:min(max(118%,250px),calc(100vw - 32px));padding:10px 14px 10px 10px;border-radius:20px;
  background:rgba(44,44,46,.97);
  box-shadow:inset 0 .5px 0 rgba(255,255,255,.18),0 12px 30px -12px rgba(0,0,0,.55);
  color:#fff;font-size:14px;line-height:1.25;transform:translate(-50%,0);pointer-events:none;
  animation:m-note .75s var(--m-spring) 1s both}
@keyframes m-note{from{opacity:0;transform:translate(-50%,-22px) scale(.94)}35%{opacity:1}}
.m-note img{width:32px;height:32px;border-radius:23%;flex:none}
.m-note div{flex:1;min-width:0}
.m-note .note-top{gap:8px}
.m-note b{font-weight:600}
.m-note .note-top span{font-size:13px;color:rgba(235,235,245,.6)}

/* ══ PHONE PICTURES ══════════════════════════════════════════════════════ */
.m-pfig{--vw:calc(var(--ph) / 2.0927);--vh:var(--ph)}

/* My Flights: the opened card (its tab bar laid over with the shot's own
   black). As it comes up the screen: landed, at its top (1A); it scrolls
   to the next flight, as the hero's does (its foot 40 rows above the
   screen's: 1506.5 of the picture's 3938.5 rows), the small header coming
   (1B); then its + sends a ring out, where flights are imported (1C). */
.m-s1{background:#050505}
.m-s1 .r-strip,.m-s1 .r-plus,.m-s1 .r-bar{opacity:1}
.m-s1 .r-strip img{transform:translateY(-38.251%)}
.m-s1 .r-nav,.m-s1 .r-bar2{opacity:1}

/* Search: a copy of the laptop's phone in each picture (phone.js), which
   search.js draws, each size a share of its screen's width (--pt). */
.m-sfig{--green:#4ade80;--i1:rgb(226 226 226);--i2:rgb(226 226 226/.75);--i3:rgb(226 226 226/.6);--i4:rgb(226 226 226/.54);--l2:rgb(235 235 245/.6);--l3:rgb(235 235 245/.3)}
.m-sfig .sr-phone{left:0;top:0;width:100%}
.m-sfig .sr-phone .iphone{--w:var(--vw)}
.m-sfig .sr-screen{--pt:calc(var(--vw) * .9306 / 402)}
/* (Its glass buttons without a live blur of the map, which would be drawn
   again each frame the map moves: the same tint, a little denser.) */
.m-sfig :is(.sr-glass,.sr-gb){-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(58,74,104,.78)}

/* ══ WHEN PLANS CHANGE ═══════════════════════════════════════════════════
   The laptop's cards (page.css's .pl- pieces), their colours and inks. */
.m-cfig{--card:#121214;--page:#f9f9f6;--green:#4ade80;--amber:#e8b54a;
  --i1:rgb(226 226 226);--i2:rgb(226 226 226/.75);--i3:rgb(226 226 226/.6);--i4:rgb(226 226 226/.54)}
.m-cfig .g{color:var(--green)}
.m-cfig .a{color:var(--amber)}
.m-cfig code{font-family:var(--mono);font-size:.94em}
.m-cfig em{font-style:normal;font-family:var(--mono);font-size:.94em}
.m-cfig .pl-tc em{font:inherit}
/* The trip, the column's width, or as tall as 64% of the screen allows
   (--dp, the laptop's 1440 plan). */
.m-cfig{--dp:min(min(92vw,100cqw) / 460,64svh / 484);--vw:calc(var(--dp) * 460);--hole:calc(var(--dp) * 11)}
.m-tripfig{--vh:calc(var(--dp) * 330)}

/* 2A, pinned: the laptop's card, full size, and its drawer, as the
   Routes card and its Random facts drawer: the drawer a little wider than
   the card, over its lower part from just under its third line, so the
   card's top (Diverted to Lyon, In Lyon) shows above it. The drawer ends
   on a clean edge just under its first flight. Plan pixels: the card 460
   wide, 20 in; the drawer 500, from the card's 150 to 570. Scrolled: on
   time to Paris; it diverts, lands in Lyon, its next flight under the
   tear line; then the drawer rises. Here: how it ends. */
.m-divfig{--dp:min(min(92vw,100cqw) / 500,var(--room,60svh) / 570,1.3px);--vw:calc(var(--dp) * 500);--vh:calc(var(--dp) * 570)}
.m-divfig .pl-l{left:calc(var(--dp) * 20);top:0}
.m-divfig .pl-dtxt,.m-divfig :is(.pl-t3,.pl-s3,.pl-23,.pl-32,.pl-pill-2,.pl-tile-down,.pl-draw,.pl-lys2,.pl-note2,.pl-way,.pl-vd-l,.sh-mf,.sh-b0,.sh-bs-w){opacity:1}
.m-divfig :is(.pl-t1,.pl-t2,.pl-s1,.pl-s2,.pl-21,.pl-22,.pl-31,.pl-pill-1,.pl-tile-air,.pl-tile-amb,.pl-lys1,.pl-note1,.pl-vd-s,.sh-m,.sh-b:not(.sh-b0),.sh-bs:not(.sh-bs-p):not(.sh-bs-w),.sh-bs-p){opacity:0}
.m-divfig :is(.sh-b0,.sh-bs-w){transform:translateY(calc(var(--dp) * 358))}
.m-ddr{z-index:7;left:0;top:calc(var(--dp) * 150);width:calc(var(--dp) * 500);height:calc(var(--dp) * 420);opacity:1;border-radius:calc(var(--dp) * 28)}
.m-ddr .pl-seg{left:calc(var(--dp) * 125)}

/* The trip, as the laptop ends it: its first flight cancelled, stamped and
   inked; the connection broken, the next at risk. As it comes up the
   screen, the stamp comes down, then the connection breaks (phone.js). */
.m-trip{left:0;top:0}
.m-trip .pl-leg1f{opacity:.32}
.m-trip :is(.pl-tile-l1,.pl-s-l1,.pl-l1a,.pl-w1){opacity:0}
.m-trip :is(.pl-tile-c,.pl-l1b,.pl-tcx,.pl-w2){opacity:1}
.m-trip .pl-strike{transform:none}
.m-trip .pl-stamp{opacity:.92;transform:rotate(-10deg)}
.m-trip .pl-risk{opacity:1;transform:none}

/* ══ COMMANDS ════════════════════════════════════════════════════════════
   Pinned. No frame: the app's search field the column's width and its
   list of commands under it, their words at about the app's size (--dp,
   the laptop's 1440 plan). Scrolled: the slash opens the list, /return
   types in and becomes its token, its row lit; then /mine. Here: how it
   ends. */
.m-cmfig{--dp:min(min(92vw,100cqw) / 560,var(--room,60svh) / 470,1.6px);--vw:min(92vw,100cqw)}
/* Its heading on the stage, over the field, so nothing stands empty. */
.m-stage>.m-sh{margin-bottom:24px}
/* The list, there from the start, its rows dimmed until each command is
   set in the field; then its row lit, at full strength. */
.m-cmfig .cm-menu li>span{opacity:calc(.42 + .58 * var(--hi,0))}
.m-cmfig .cm-menu li:is(.m-r1,.m-r2)>span{opacity:calc(.42 + .58 * var(--on,1))}
.m-cm{position:relative}
.m-cmfig .cm-bar{position:relative;left:auto;top:auto;width:100%;margin:0}
.m-cmfig .cm-tok{--sink:.06em}
.m-cmfig .cm-menu{position:relative;left:auto;top:auto;width:100%;margin:calc(var(--dp) * 18) 0 0;transform-origin:50% 0;isolation:isolate}
.m-cmfig .cm-menu li{height:auto;min-height:calc(var(--dp) * 66);padding:calc(var(--dp) * 10) calc(var(--dp) * 24)}
.m-cmfig .cm-menu li+li::before{left:calc(var(--dp) * 24)}
.m-cmfig .cm-menu li::after{content:"";position:absolute;z-index:-1;inset:0;background:rgba(74,222,128,.16);opacity:var(--hi,0)}
.m-cmfig .cm-menu li:first-child::after{border-radius:calc(var(--dp) * 20) calc(var(--dp) * 20) 0 0}
.m-cmfig .cm-menu li:last-child::after{border-radius:0 0 calc(var(--dp) * 20) calc(var(--dp) * 20)}
.m-cmfig .cm-menu span+span{font-size:calc(var(--dp) * 20)}
.m-cmfig .m-r2{--hi:1}
.m-ty{white-space:pre}

/* ══ LOGBOOK ════════════════════════════════════════════════════════════
   The laptop's pieces (page.css's .lb- pieces), in the app's points
   (--pt): the cards 90% of the screen's width, or as tall as 64% of the
   screen allows; the drawers a little wider, as a sheet is. As each card
   comes up the screen its numbers count up (or its routes draw), and its
   drawer rises, all the way once the card is in the middle (phone.js). */
.m-lbfig.lb-art{position:relative;inset:auto;pointer-events:none;
  --pt:min(min(90vw,100cqw) / 369,96vw / 402,64svh / 516.6);--dp:calc(var(--pt) / 1.05);--green:#4ade80;
  --vw:calc(var(--pt) * 402);--vh:calc(var(--pt) * 516.6)}
.m-lbfig .lb-rcard,.m-lbfig .lb-routes{left:calc(var(--pt) * 16.5);top:0}
.m-lbfig .lb-sheet{left:0;width:calc(var(--pt) * 402);opacity:1}
/* The Flights drawer covers the card from just under its top edge (over
   the card's ring), its own ring under its header, as the app opens it. */
.m-lbfig .m-ls1{top:calc(var(--pt) * 16);height:calc(var(--pt) * 500.6)}
.m-lbfig .m-ls2{top:calc(var(--pt) * 196);height:calc(var(--pt) * 320.6)}
.m-lbfig .m-rc{transform-origin:50% 0;transform:scale(.97)}
.m-dimo{position:absolute;z-index:20;inset:0;border-radius:inherit;background:#000;opacity:.45;pointer-events:none}

/* ══ SKIP THE TYPING ══════════════════════════════════════════════════════
   Two pinned scenes, the same shape: the source (two weeks of a calendar;
   then the forwarded booking) the column's width, My Flights in a phone
   over its lower right (only over the source's own empty foot), its top
   half shown, its foot fading; the point under them, the full
   width. The phone's visible height is its room (--room, phone.js): the
   band less the source and the point. As each card lands, the phone's list
   scrolls up as the app's would, so the new card is all in view. */
.m-cset{--pw:min(52vw,300px);--ppt:calc(var(--pw) * .9306 / 402);--green:#4ade80;position:relative}
/* The picture (the source, the phone over it, what flies between them) is
   one: scaled as one (--k, phone.js) so it and the steps fit the room,
   laid out the column's width over k so it is the column's width scaled. */
.m-cpicw{position:relative}
.m-cpic{position:relative;display:grid;grid-template-columns:minmax(0,1fr) var(--pw);width:calc(100% / var(--k,1));transform:scale(var(--k,1));transform-origin:0 0}
.m-cbox{grid-column:1/-1;grid-row:1;position:relative}
.m-cphw{grid-column:2;grid-row:2;position:relative;z-index:2;width:var(--pw);height:calc(var(--pw) * 2.0927 * .42);margin-top:-38px}
.m-cphw .pv-phone{left:-12px;right:-12px;width:auto;height:100%;padding:0 12px;overflow:hidden;
  -webkit-mask-image:linear-gradient(#000 84%,transparent);mask-image:linear-gradient(#000 84%,transparent)}
.m-cset>.m-caps{margin-top:18px}
.m-cph .iphone{--w:var(--pw)}
/* The status bar over the list as it scrolls under it. */
.m-cph .pv-bar{z-index:3;background:#050505}
.m-calpin .pv-n3{opacity:1}
/* Two weeks of October, as the laptop's month (its days and events), at
   a size to read: every event grey but the flights, which light up. */
.m-c2{padding:14px 10px 50px;border-radius:18px;background:#fff;box-shadow:0 0 0 1px rgba(20,20,19,.05),0 24px 48px -28px rgba(20,20,19,.28)}
.m-c2h{padding:0 4px;font:600 19px/1 var(--display);letter-spacing:-.02em;color:#0b0b0b}
.m-c2h span{font-weight:500;color:#a3a39b}
.m-c2w{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:12px;font:600 9.5px/1 var(--text);letter-spacing:.06em;text-transform:uppercase;text-align:center;color:#a3a39b}
.m-c2g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:7px}
.m-c2d{min-width:0;height:58px;padding:6px 2px 0;border-top:1px solid #efefe9}
.m-c2d b{display:block;margin-bottom:5px;font:600 12.5px/1 var(--text);text-align:center;color:#3a3a36}
.m-c2o b{color:#c8c8c0}
.m-ev{position:relative;display:block;height:16px;margin-top:3px;padding:0 3px;border-left:2px solid #cfcfc8;border-radius:4px;background:#f1f1ee;overflow:hidden;white-space:nowrap;font:500 9px/16px var(--text);font-style:normal}
.m-ev>i{font-style:normal;color:transparent;text-shadow:0 0 3px rgba(40,40,60,.45)}
.m-lit{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;border-radius:4px;background:#e3f6ea;box-shadow:inset 0 0 0 1.5px #4ade80;font:600 9.5px/1 var(--mono);color:#0b5d2a}
/* What flies into the phone, over everything (phone.js puts each on its
   card's place and moves it from where it lifts off): each flight as its
   lit event, the booking as its lit block, and each card it turns into. */
.m-flyl{position:absolute;inset:0;z-index:4;pointer-events:none}
.m-flyl>*{position:absolute;left:0;top:0;opacity:0;transform-origin:50% 50%}
.m-fchip{display:flex;align-items:center;justify-content:center;border-radius:4px;background:#e3f6ea;box-shadow:inset 0 0 0 1.5px #4ade80,0 8px 16px -8px rgba(22,101,52,.5);font:600 9.5px/1 var(--mono);color:#0b5d2a;white-space:nowrap}
.m-fcard::before{content:"";position:absolute;left:calc(var(--ppt) * -45);top:calc(var(--ppt) * -30);width:calc(var(--ppt) * 476);height:calc(var(--ppt) * 205);background:url(/assets/ticket-shadow-mf.png) 0 0/100% 100% no-repeat}
.m-mailpin .m-flyl{--dp:min(calc(100cqw / 280),1px)}
.m-fbkfly{margin:0;isolation:isolate;box-shadow:0 12px 24px -12px rgba(20,20,19,.4)}
/* The booking, forwarded To Terminal (page.css's .pv-fwd), the column's
   width; the flight in it lit. */
.m-mailc{--dp:min(calc(100cqw / 280),1px);position:relative;z-index:1;left:auto;top:auto;width:100%;padding-bottom:38px;opacity:1;transform:none}
.m-fbk{position:relative;isolation:isolate}
.m-blit{position:absolute;z-index:-1;inset:-2px;border-radius:calc(var(--dp) * 12);background:#e3f6ea;box-shadow:inset 0 0 0 1.5px #4ade80}

/* ══ YOUR DATA ═══════════════════════════════════════════════════════════
   The lock, large, closed, its keyhole lit; as it comes up the screen its
   shackle drops in, the keyhole lights, a ring goes out (phone.js). */
.m-lockfig{--dp:min(34svh / 236,46vw / 180);--vw:100%;--vh:calc(var(--dp) * 236 + 48px)}
.m-lockfig .sf-lockg{transform:none}
.m-lockfig .sf-halo{width:calc(var(--dp) * 360);height:calc(var(--dp) * 360);margin:calc(var(--dp) * -180) 0 0 calc(var(--dp) * -180);opacity:.5}

/* ══ GET TERMINAL ════════════════════════════════════════════════════════
   The app's icon, the heading as large as the width allows (its widest
   line, "On your iPhone.", 6.2 of its letters' size), the question, and
   Join the beta, a 44pt button; each comes in as it reaches the screen. */
.m-close{text-align:center;padding-bottom:72px}
.m-icon{width:88px;height:88px;margin:0 auto;border-radius:20px;box-shadow:0 18px 36px -16px rgba(0,0,0,.45)}
.m-close .m-hd{margin-top:28px;font-size:min(15vw,calc(100cqw / 6.6))}
.m-want{margin-top:28px;font:400 17px/1.47 var(--text);color:#6a6a64}
.m-join{margin-top:14px}
.m-join .beta{position:relative;display:inline-flex;align-items:center;height:44px;padding:0 24px;font-size:17px}
.m-join .beta-pop{top:auto;bottom:calc(100% + 10px);right:50%;width:min(300px,calc(100vw - 32px));margin-right:calc(min(300px,calc(100vw - 32px)) / -2);padding:14px 16px 16px;border-radius:16px;text-align:left;transform-origin:50% 100%;transform:translateY(4px) scale(.97)}
.m-join .beta-pop.on{transform:none}
.m-close .m-hd.m-rv{transition-delay:90ms}
.m-want.m-rv{transition-delay:180ms}
.m-join.m-rv{transition-delay:270ms}

/* ── The footer: in line with the sections' edges. */
.foot{padding-left:var(--m-l);padding-right:var(--m-r)}
/* Room between the small print and the links under it, so "Jay"'s tap
   area and theirs don't overlap. */
.foot-row{row-gap:14px}
.foot-links{row-gap:6px}
.foot-links{column-gap:22px}

/* ── A phone on its side: each picture on the left and its points on the
   right; the hero's headline beside its phone; sizes by the screen's
   height. */
@media (orientation:landscape) and (max-height:560px){
  :root{--ph:min(84svh,880px);--m-sec:104px;--m-fig:48px;--m-fig2:72px;
    --m-l:max(32px,env(safe-area-inset-left));--m-r:max(32px,env(safe-area-inset-right));
    --m-st:calc(env(safe-area-inset-top) + 12px);--m-sb:calc(env(safe-area-inset-bottom) + 12px)}
  .m-hd{font-size:min(var(--fit,13cqw),11svh)}
  .m-fig,html.m-on:not(.m-still) .m-stage{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);column-gap:5vw;align-items:center;align-content:center}
  .m-fig .m-vis{margin-left:calc(50% - var(--vw,100%) / 2)}
  .m-caps,.m-stage .m-caps{margin-top:0}
  .m-stage .m-pfig{--ph:min(var(--room,80svh),880px)}
  /* Commands on its side: the heading and the words at the left, the field
     and its list at the right. */
  .m-cmpin .m-stage>.m-sh{grid-column:1;grid-row:1;align-self:end;margin:0 0 12px}
  .m-cmpin .m-stage>.m-cmfig{grid-column:2;grid-row:1/3;align-self:center}
  .m-cmpin .m-stage>.m-caps{grid-column:1;grid-row:2;align-self:start}
  .m-cmfig{--dp:min(50vw / 560,var(--room,80svh) / 440,1.4px);--vw:50vw}
  .m-cfig.m-divfig{--dp:min(48vw / 500,var(--room,80svh) / 572,1.3px)}
  .m-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto 1fr;column-gap:4vw}
  .m-top{grid-column:1/-1}
  .m-main{display:contents}
  .m-big{align-self:center;margin:0;font-size:min(9vw,24svh)}
  .m-hph{margin:12px 4vw 0 0}
  .m-cfig{--dp:min(48vw / 460,80svh / 484)}
  .m-lbfig.lb-art{--pt:min(48vw / 402,80svh / 516.6)}
  /* The calendar and the booking at the left, the phone beside them (over
     them it would hide the week's last days), the point at the right. */
  .m-cset{--pw:min(24vw,300px);grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);column-gap:4vw;align-items:center}
  .m-cpic{grid-template-columns:minmax(0,1fr) var(--pw);align-items:center}
  .m-cbox{grid-column:1;grid-row:1}
  .m-cphw{grid-column:2;grid-row:1;margin:0 0 0 14px;height:calc(var(--pw) * 2.0927 * .62)}
  .m-cset>.m-caps,.m-cset>.m-list{margin-top:0}
  .m-stage>.m-list{margin-top:0}
  .m-c2,.m-mailc{padding-bottom:14px}
  .m-lockfig{--dp:min(60svh / 236,40vw / 180)}
  .m-close .m-hd{font-size:min(8vw,12svh)}
  .m-icon{width:64px;height:64px;border-radius:15px}
}

/* With no script: everything as it ends, there, nothing pinned. Search's
   phones are copied in and drawn by script, so without it only their
   points show. */
@media (scripting:none){
  .m-sfig{display:none}
}

/* Less motion asked for: nothing pinned; each scene as it ends, its
   points one after another; headings and points simply fade in. */
html.m-still .m-rv:not(.in){transform:none}
html.m-still .m-rv{transition:opacity var(--m-fast) var(--m-ease)}
@media (prefers-reduced-motion:reduce){
  .m-top,.m-big span,.m-hph{animation:m-fade var(--m-fast) var(--m-ease) both}
  .sr-caret::before,.cm-caret{animation:none}
}

/* ══ THE DECK ════════════════════════════════════════════════════════════
   Pinned: the phone with the Deck (the placeholder picture), its pieces
   over its sides (--u: the laptop's plan pixel, for this phone's size),
   and the steps listed under it as Search's, each tag a small picture.
   deck.js draws it at the step's time (phone.js). The pieces float as on
   the laptop; where they stand here is where they end. */
.m-dkfig{--u:calc(var(--vw) / 340 * .9);--green:#4ade80}
.m-dkfig .dk-phone{position:absolute;left:0;top:0;width:100%}
.m-dkfig .dk-phone .iphone{--w:var(--vw)}
.m-dkfig .dk-pc{position:absolute;z-index:2}
/* Every card stays once it is out, and none meets another: the walk at
   the top right, the floor under it, the way at the left. */
.m-dkfig .dk-tm{right:calc(var(--vw) * -.13);top:6%}
.m-dkfig .dk-lv{right:calc(var(--vw) * -.18);top:18%}
.m-dkfig .dk-rt{left:calc(var(--vw) * -.2);top:31%}
.dk-n{display:inline-flex;align-items:center;justify-content:center}
.dk-n svg{width:16px;height:16px}
/* Under the scene, a quiet line with an (i): it opens every airport the
   Deck supports in the sheet. The whole line is the button, 44pt tall,
   above the pinned steps' boxes (the last one reaches down under it). */
.m-dkports{position:relative;z-index:3;margin-top:-38px}
.m-dkpl{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0;border:0;background:none;color:#8a8a83;font:500 15px/1.4 var(--text);cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.m-dkpli{display:block;width:20px;height:20px;color:#a3a39c}
.m-dkpli svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.m-dkpli .dk-idot{fill:currentColor;stroke:none}
.m-dkpl[aria-expanded="true"] .m-dkpli{color:#16a34a}
.m-dkpl:focus{outline:none}
.m-dkpl:focus-visible{outline:2px solid #16a34a;outline-offset:2px;border-radius:8px}
/* Each step's (i), at the end of its row, a 44pt target of its own over
   the row's button; the row's title stops short of it. */
.m-dkpin .m-sb{padding-right:44px}
/* (Its titles wrap rather than lose their end to the (i).) */
.m-dkpin .m-sb .m-ct{white-space:normal;overflow:visible;text-overflow:clip}
.m-dki{position:absolute;z-index:2;right:0;top:-2px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;background:none;color:#a3a39c;cursor:pointer;
  -webkit-appearance:none;appearance:none;-webkit-tap-highlight-color:transparent}
.m-dki svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round}
.m-dki .dk-idot{fill:currentColor;stroke:none}
.m-dki[aria-expanded="true"]{color:#16a34a}
.m-dki:focus{outline:none}
.m-dki:focus-visible{outline:2px solid #16a34a;outline-offset:-6px;border-radius:50%}
.m-step{position:relative}
/* The sheet: from the screen's foot, the cards' dark, its grabber and a
   close button; the page dimmed a little behind it. A tap outside, the
   close button or Esc puts it away. */
.m-dksheet{position:fixed;inset:0;z-index:80}
.m-dksheet[hidden]{display:none}
.m-dkback{position:absolute;inset:0;background:rgba(20,20,19,.28);opacity:0;transition:opacity .3s ease;touch-action:none}
.m-dksh{position:absolute;left:max(8px,env(safe-area-inset-left));right:max(8px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));max-width:520px;margin:0 auto;
  padding:22px 56px 24px 22px;border-radius:28px;background:linear-gradient(180deg,#1d1d1f,#131314);color:#e6e6e6;font:400 17px/1.45 var(--text);-webkit-font-smoothing:antialiased;
  box-shadow:0 -10px 40px -12px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.1);transform:translateY(calc(100% + 24px));transition:transform .42s cubic-bezier(.22,1,.36,1);touch-action:none}
.m-dksheet.on .m-dkback{opacity:1}
.m-dksheet.on .m-dksh{transform:none}
.m-dkgrab{position:absolute;left:50%;top:7px;width:36px;height:5px;margin-left:-18px;border-radius:3px;background:rgba(235,235,245,.3)}
.m-dkx{position:absolute;right:8px;top:8px;display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:none;color:rgba(235,235,245,.6);cursor:pointer;-webkit-appearance:none;appearance:none}
.m-dkx svg{width:30px;height:30px;padding:7px;border-radius:50%;background:rgba(120,120,128,.32);fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.m-dkx:focus-visible{outline:2px solid #4ade80;outline-offset:-4px}
.m-dkinfo[hidden]{display:none}
.m-dkst{margin-bottom:8px;font:600 17px/1.3 var(--text);letter-spacing:-.01em;color:#fff}
.m-dkinfo p+p{margin-top:6px}
.m-dkinfo p{color:rgba(235,235,245,.78)}
/* The airports in the sheet: a name and its code to a row, the list the
   sheet's whole width under its title (the close button is above it). */
.m-dkapi .dk-ap{list-style:none;margin:2px -34px 0 0}
.m-dkapi .dk-ap li{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:8px 0;font-size:15px;line-height:1.4;color:rgba(235,235,245,.85)}
.m-dkapi .dk-ap li+li{border-top:1px solid rgba(255,255,255,.08)}
.m-dkapi .dk-apn{min-width:0}
.m-dkapi .dk-apc{flex:none;font:500 14px/1.4 var(--mono);letter-spacing:.04em;color:#a1a1a6}
/* A sheet taller than a small screen scrolls inside itself. */
.m-dksh{max-height:calc(100% - 16px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
@media(prefers-reduced-motion:reduce){.m-dksh{transition:opacity .2s ease;transform:none;opacity:0}.m-dksheet.on .m-dksh{opacity:1}}