/* A reading page (privacy.html): the home page's top bar, footer, colours,
   fonts and mark, and one column to read in. Nothing moves with the scroll.

   The bar and the footer are the home page's (page.css), copied here so
   this page doesn't carry the sections' styles: the bar's sizes are a share
   of the window's width, as the home page's are of its stage's (cqw there,
   vw here: the same on a laptop), with a floor so they still read on a
   phone, below what any laptop width gives. Keep the two in step. */

@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/inter-symbols.woff2) format('woff2');unicode-range:U+2192,U+25B4,U+25BE}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 700;font-display:swap;src:url(/assets/fonts/jetbrains-mono-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  --bg:#f9f9f6;
  --ink:#141413;
  --ink2:rgb(20 20 19/.62);
  --ink3:rgb(20 20 19/.46);
  --line:rgb(20 20 19/.09);
  --green:#16a34a;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* Apple's own system font, on an Apple device; Inter elsewhere. */
  --display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Inter",sans-serif;
  --text:-apple-system,BlinkMacSystemFont,"SF Pro Text","Inter",sans-serif;
  --side:max(48px,calc((100vw - 1376px) / 2 + 48px));
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-width:none}
html::-webkit-scrollbar{display:none}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip}
a{color:inherit;-webkit-tap-highlight-color:transparent}
img{display:block}
/* Selecting and dragging (Jay, 19 Oct 2026): the reading text and the
   support address can be selected and copied; the bar, the footer, the
   headings and labels, buttons and images can't, and a long press on them
   brings up no iOS callout or magnifier. */
.top,.foot,.skip,.read .eyebrow,.read .meta,.read h1,.read h2{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
img,svg{-webkit-user-drag:none}
.top a,.foot a{-webkit-user-drag:none}
.bp-addr{-webkit-user-select:all;user-select:all;-webkit-touch-callout:default}
/* Zoom (Jay, 19 Oct 2026): a double tap never zooms (pinching still does),
   and a text field, should one come, is never under 16px, so tapping it
   never zooms the page in. */
html{touch-action:manipulation}
input,textarea,select{font-size:max(16px,1em)}
:focus-visible{outline:2px solid currentColor;outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:var(--side);top:-60px;background:var(--ink);color:var(--bg);padding:8px 12px;border-radius:6px;font-weight:600;text-decoration:none;z-index:60}
.skip:focus{top:12px}

/* ── THE BAR ── As the home page's: the mark and the name 5% in from the
   left, Follow and Join the beta 5% in from the right, 3.5% down. */
.top{position:relative;z-index:5;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 2vw;padding:3.5vh 5vw 0;font-family:var(--text)}
.brand{display:inline-flex;align-items:center;gap:max(8px,.75vw);font-size:max(18px,1.85vw);font-weight:600;line-height:1.2;letter-spacing:-.015em;text-decoration:none}
.brand img{width:max(30px,3.1vw);height:max(22.5px,2.33vw);flex-shrink:0}
.brand span{font-family:var(--mono);font-weight:500}
.brand:active{opacity:.6}
.top-r{display:flex;align-items:center;gap:max(8px,.7vw)}
.follow{display:inline-flex;align-items:center;padding:max(6px,.48vw) max(12px,1.05vw);border:1px solid rgb(20 20 19/.16);border-radius:999px;font-size:max(12px,.97vw);font-weight:400;line-height:1.2;text-decoration:none;white-space:nowrap}
.beta-wrap{position:relative}
.beta{display:inline-flex;align-items:center;padding:max(6px,.48vw) max(12px,1.1vw);border:1px solid #141413;border-radius:999px;background:#141413;color:#fff;font-size:max(12px,.97vw);font-weight:500;line-height:1.2;text-decoration:none;white-space:nowrap}
.beta-pop{position:absolute;z-index:30;right:0;top:calc(100% + max(8px,.7vw));width:max(240px,19.5vw);padding:max(14px,1.1vw) max(14px,1.15vw) max(14px,1.15vw);border-radius:max(14px,1.25vw);background:#fff;color:var(--ink);
  box-shadow:0 0 0 1px rgba(20,20,19,.07),0 24px 48px -20px rgba(20,20,19,.35);opacity:0;transform:translateY(-.4vw) scale(.97);transform-origin:88% 0;transition:opacity .18s ease,transform .18s cubic-bezier(.2,.8,.2,1)}
.beta-pop.on{opacity:1;transform:none}
.beta-pop[hidden]{display:none}
.bp-lead{font-size:max(11px,.92vw);line-height:1.3;color:var(--ink2)}
.bp-addr{margin-top:max(4px,.35vw);font:500 max(15px,1.25vw)/1.3 var(--mono);letter-spacing:-.01em;color:var(--ink);user-select:all}
.bp-row{display:flex;gap:max(6px,.5vw);margin-top:max(11px,.9vw)}
.bp-btn{flex:1;display:inline-flex;justify-content:center;align-items:center;padding:max(6px,.45vw) max(9px,.7vw);border:1px solid #dddcd5;border-radius:999px;background:#fff;color:var(--ink);font:400 max(11px,.92vw)/1.2 var(--text);text-decoration:none;white-space:nowrap;cursor:pointer;-webkit-appearance:none;appearance:none}
.bp-mail{border-color:#141413;background:#141413;color:#fff}
.bp-copy.done{border-color:#a9dcba;background:#eef8f1;color:var(--green)}
.bp-hold{position:fixed;left:-9999px;top:0;opacity:0}

/* ── THE COLUMN ── One column to read, 680px at most: the system's text
   face at a relaxed size and line height, headings in its display face;
   mono and green only for the small labels (what the page is and when
   it was last changed). */
.read{max-width:calc(680px + 48px);margin:0 auto;padding:clamp(72px,11vh,120px) 24px clamp(96px,14vh,160px);font-family:var(--text);color:rgb(20 20 19/.8)}
.read .eyebrow,.read .meta{display:block;font:500 13px/1.4 var(--mono);letter-spacing:.02em;color:var(--green)}
.read .eyebrow{text-transform:uppercase;letter-spacing:.08em}
.read h1{margin-top:14px;font:600 clamp(36px,4.6vw,52px)/1.04 var(--display);letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.read .meta{margin-top:18px}
.read .lede{margin-top:40px;font-size:21px;line-height:1.55;letter-spacing:-.01em;color:var(--ink)}
.read h2{margin-top:72px;font:600 28px/1.2 var(--display);letter-spacing:-.025em;color:var(--ink);scroll-margin-top:24px}
.read p,.read li{font-size:18px;line-height:1.7}
.read h2+p,.read h2+ul{margin-top:18px}
.read p+p,.read ul+p,.read p+ul{margin-top:18px}
.read ul{list-style:none}
.read li{position:relative;padding-left:22px}
.read li+li{margin-top:14px}
.read li::before{content:"";position:absolute;left:2px;top:.78em;width:6px;height:6px;border-radius:50%;background:rgb(20 20 19/.28)}
.read strong{font-weight:600;color:var(--ink)}
.read a.in{color:var(--ink);text-decoration:underline;text-decoration-color:rgb(20 20 19/.28);text-decoration-thickness:1px;text-underline-offset:3px;transition:text-decoration-color .2s ease}
@media(hover:hover){.read a.in:hover{text-decoration-color:var(--ink)}}
.read a.in:focus-visible{outline:2px solid var(--green);outline-offset:2px}
/* A table (Support's check times): each row under a hairline, what it is
   on the left, the answer on the right, in the column's own text. */
.read table{width:100%;margin-top:18px;border-collapse:collapse}
.read th,.read td{padding:13px 0;border-top:1px solid var(--line);font-size:18px;line-height:1.5;text-align:left;vertical-align:baseline}
.read tr:last-child th,.read tr:last-child td{border-bottom:1px solid var(--line)}
.read th{padding-right:24px;font-weight:400}
.read td{font-weight:600;color:var(--ink);text-align:right;white-space:nowrap}

/* ── THE FOOTER ── As the home page's: the small print and where to go,
   under a hairline, every link a 44px-tall target; behind it, huge and
   faded, the mark and the name, dissolving into the page at its foot. */
.foot{position:relative;overflow:hidden;padding:0 var(--side) 15vw}
.foot-mark{position:absolute;z-index:0;left:0;right:0;bottom:-3.3vw;display:flex;align-items:center;justify-content:center;gap:2.6vw;
  font:500 15.5vw/1 var(--mono);letter-spacing:-.03em;color:#e3e2db;white-space:nowrap;pointer-events:none;user-select:none;
  -webkit-mask-image:linear-gradient(180deg,#000 22%,rgba(0,0,0,.55) 52%,rgba(0,0,0,0) 86%);mask-image:linear-gradient(180deg,#000 22%,rgba(0,0,0,.55) 52%,rgba(0,0,0,0) 86%)}
.foot-mark i{flex:none;width:.98em;height:.74em;background:currentColor;-webkit-mask:url(/assets/mark.svg) center/contain no-repeat;mask:url(/assets/mark.svg) center/contain no-repeat}
.foot-row{position:relative;z-index:1;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:4px 24px;padding-top:16px;padding-bottom:36px;border-top:1px solid var(--line)}
.foot-copy{font-size:.8125rem;color:var(--ink2)}
.foot-l{display:flex;flex-wrap:wrap;align-items:center;column-gap:18px}
.foot-by{color:var(--ink3)}
.foot-by a{position:relative;display:inline-flex;align-items:center;min-height:44px;margin:-12px 0;color:var(--ink2);text-decoration:none;transition:color .2s ease}
.foot-by a:hover{color:var(--ink)}
.foot-by a:active{opacity:.6}
.foot-links{display:flex;flex-wrap:wrap;column-gap:28px}
.foot-links a{position:relative;display:inline-flex;align-items:center;min-height:44px;font-size:.9375rem;color:var(--ink2);text-decoration:none;transition:color .2s ease}
.foot-links a:hover,.foot-links a[aria-current="page"]{color:var(--ink)}
.foot-links a:active{opacity:.6}
/* On a phone or an upright iPad (as the home page's, under 1100 wide) the
   bar keeps only Join the beta, and the X account is here, in the bar's
   pill, in place of the footer's X. */
.foot-follow{display:none;position:relative;z-index:1;padding:28px 0 4px}
.foot-follow .follow{min-height:44px;padding:0 18px;font-size:15px;font-family:var(--text)}
@media(max-width:1099px){
  .foot{padding-left:24px;padding-right:24px}
  .brand{min-height:44px}
  .top .beta{position:relative;padding:8px 16px;font-size:15px}
  .top .beta::before{content:"";position:absolute;inset:-6px -2px}
  .top .follow{display:none}
  .foot-follow{display:block}
  .foot-links a[href="https://x.com/TerminalAero"]{display:none}
}

/* Very narrow (a small phone, or any phone at 200% zoom): nothing wider
   than the screen. The address breaks where it must, the check times sit
   under what they're for, and the X pill's words wrap. */
.read a.in{overflow-wrap:anywhere}
/* A link in a sentence: its tap area a finger tall (padding on a line's
   words grows the area, not the line). */
.read a.in{padding:12px 0;-webkit-box-decoration-break:clone;box-decoration-break:clone}
@media(max-width:340px){
  .read tr{display:block;padding:13px 0;border-top:1px solid var(--line)}
  .read tr:last-child{border-bottom:1px solid var(--line)}
  .read th,.read td,.read tr:last-child th,.read tr:last-child td{display:block;padding:0;border:0;text-align:left;white-space:normal}
  .read th{padding-right:0}
  .follow{white-space:normal;text-align:center}
  .foot-row{row-gap:14px}
  .foot-links{row-gap:6px}
}
/* ── BUTTONS AND LINKS ── As the home page's: a fill deepens a little
   under the pointer, a press gives and springs back, a footer link's
   underline slides in from its left; the focus ring is the site's green.
   With less motion asked for, colour only. */
.beta,.follow,.bp-btn{transition:background-color .2s ease,border-color .2s ease,color .2s ease,transform .3s cubic-bezier(.25,.1,.25,1)}
@media(hover:hover){
  .beta:hover{background:#2f2f2d;border-color:#2f2f2d}
  .follow:hover{background:rgb(20 20 19/.05);border-color:rgb(20 20 19/.3)}
  .bp-btn:hover{background:#f3f3f0}
  .bp-mail:hover{background:#2f2f2d;border-color:#2f2f2d}
  .foot-links a:hover::after,.foot-by a:hover::after{transform:scaleX(1);transform-origin:0 50%}
}
.beta:active,.follow:active,.bp-btn:active{transform:scale(.96);transition-duration:.08s}
.foot-links a::after,.foot-by a::after{content:"";position:absolute;left:0;right:0;bottom:12px;height:1px;background:currentColor;transform:scaleX(0);transform-origin:100% 50%;transition:transform .3s cubic-bezier(.25,.1,.25,1)}
/* Each footer link a finger's width at least ("Jay" is narrower): an
   invisible area 44 wide around it. */
.foot-links a::before,.foot-by a::before{content:"";position:absolute;top:0;bottom:0;left:50%;width:max(100%,44px);transform:translateX(-50%)}
.beta:focus-visible,.follow:focus-visible,.bp-btn:focus-visible,.brand:focus-visible,.foot-links a:focus-visible,.foot-by a:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(prefers-reduced-motion:reduce){
  .beta,.follow,.bp-btn,.beta-pop{transition:background-color .2s ease,border-color .2s ease,color .2s ease}
  .beta:active,.follow:active,.bp-btn:active{transform:none}
  .beta-pop{transform:none}
  .foot-links a::after,.foot-by a::after{transform:none;opacity:0;transition:opacity .2s ease}
  .foot-links a:hover::after,.foot-by a:hover::after{opacity:1}
}
