/* Sectional Night, carried from the app so the site and the product read as
   one thing. Magenta and cyan are the airspace colours on a VFR sectional. */
:root{
  --bg-top:#0B1220; --bg-bot:#111C2C; --surface:#182334; --hair:#2A3A50;
  --ink:#EAF0F8; --muted:#8B9AAF; --magenta:#E0479E; --cyan:#4FC3F7; --ready:#5FD9A8;

  /* Depth is declared per theme rather than tinted once and reused: a navy
     shadow that reads as depth at night reads as dirt on the paper theme. */
  --sh-card:0 24px 48px -26px #000, 0 4px 12px -6px rgba(0,0,0,.66);
  --sh-card-hi:0 34px 60px -26px #000, 0 6px 16px -8px rgba(0,0,0,.7);
  --sh-panel:0 14px 30px -24px #000;
  --sh-badge:0 8px 18px -12px #000;
  --sh-tile:0 26px 46px -22px #000, 0 4px 10px -6px rgba(0,0,0,.6);
  --sh-band:0 16px 34px -26px #000;
  --sh-inset:inset 0 1px 0 rgba(255,255,255,.06);
  --sheen:rgba(255,255,255,.05);
  --glow-m:rgba(224,71,158,.28);
  --glow-c:rgba(79,195,247,.21);
  --chart-line:rgba(255,255,255,.035);
}
@media (prefers-color-scheme: light){
  :root{
    --bg-top:#F7F3EA; --bg-bot:#EDE6D6; --surface:#FFFFFF; --hair:#C9BDA2;
    --ink:#16202F; --muted:#5C6577; --magenta:#B81C6F; --cyan:#0A6491; --ready:#17805A;

    --sh-card:0 22px 44px -28px #4A3F28, 0 3px 10px -6px rgba(74,63,40,.28);
    --sh-card-hi:0 32px 56px -28px #4A3F28, 0 5px 14px -8px rgba(74,63,40,.3);
    --sh-panel:0 12px 26px -24px #4A3F28;
    --sh-badge:0 6px 14px -10px rgba(74,63,40,.5);
    --sh-tile:0 24px 42px -24px #4A3F28, 0 3px 8px -5px rgba(74,63,40,.3);
    --sh-band:0 14px 30px -26px #4A3F28;
    --sh-inset:inset 0 1px 0 rgba(255,255,255,.9);
    --sheen:rgba(255,255,255,.55);
    --glow-m:rgba(184,28,111,.14);
    --glow-c:rgba(10,100,145,.13);
    --chart-line:rgba(74,63,40,.06);
  }
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{overflow-x:clip}
body{
  background:linear-gradient(170deg,var(--bg-top),var(--bg-bot)) fixed;
  color:var(--ink);
  font:400 16px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Inter,sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:720px;margin:0 auto;padding:48px 22px 80px;position:relative}
header{display:flex;align-items:center;gap:12px;margin-bottom:40px}
.mark{width:34px;height:34px;flex:none}
.brand{font-weight:600;font-size:19px;letter-spacing:-.02em}
h1{font-size:clamp(28px,6vw,40px);line-height:1.12;letter-spacing:-.025em;font-weight:600;margin-bottom:14px;text-wrap:balance}
h2{font-size:20px;font-weight:600;letter-spacing:-.015em;margin:34px 0 10px}
h3{font-size:15px;font-weight:600;margin:22px 0 6px}
p,li{color:var(--ink);margin-bottom:12px}
.lead{font-size:18px;color:var(--muted);margin-bottom:26px}
ul{padding-left:20px}
li{margin-bottom:7px}
a{color:var(--cyan);text-underline-offset:3px}
.eyebrow{
  font:500 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.2em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}

/* Every H2 carries a hairline that fades the way an airspace band fades on the
   chart, so the sections separate without a hard rule cutting the page up. */
h2::after{
  content:"";display:block;height:1px;margin-top:9px;
  background:linear-gradient(90deg,var(--magenta),color-mix(in srgb,var(--cyan) 60%,transparent) 38%,transparent 82%);
}

.panel{
  background:
    linear-gradient(180deg,var(--sheen),transparent 42%),
    linear-gradient(180deg,color-mix(in srgb,var(--surface) 78%,transparent),color-mix(in srgb,var(--surface) 58%,transparent));
  border:1px solid var(--hair);border-radius:16px;padding:20px;margin:22px 0;
  box-shadow:var(--sh-panel),var(--sh-inset);
}
.panel p:last-child,.panel ul:last-child{margin-bottom:0}
.cta{
  display:inline-block;background:var(--magenta);color:#fff;text-decoration:none;
  font-weight:600;padding:13px 24px;border-radius:13px;
  box-shadow:0 4px 0 color-mix(in srgb,var(--magenta) 55%,#000),0 8px 24px -8px var(--magenta);
}
.grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));margin:26px 0}
.grid .panel{margin:0}

/* The table scrolls inside its own box, so a narrow phone never pushes the
   page sideways and the box edge shows where the scroll is. */
.table-wrap{
  border:1px solid var(--hair);border-radius:14px;overflow:hidden;
  box-shadow:var(--sh-panel);margin:16px 0;
  background:linear-gradient(180deg,var(--sheen),transparent 30%);
}
table{width:100%;border-collapse:collapse;font-size:14.5px;margin:16px 0;display:block;overflow-x:auto}
.table-wrap table{margin:0}
th,td{text-align:left;padding:9px 12px;border-bottom:1px solid var(--hair);vertical-align:top}
tr:last-child td{border-bottom:0}
th{font-weight:600;color:var(--muted);font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
code{font:500 13.5px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--cyan)}
footer{
  margin-top:56px;padding-top:22px;border-top:1px solid var(--hair);
  color:var(--muted);font-size:13.5px;display:flex;flex-wrap:wrap;gap:8px 18px;
}
footer a{color:var(--muted)}
.updated{font:500 12px ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);margin-bottom:26px}
.stores{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin:0 0 12px}
.store{
  display:inline-flex;align-items:center;gap:10px;text-decoration:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 100%,transparent),color-mix(in srgb,var(--surface) 82%,transparent));
  border:1px solid var(--hair);border-radius:12px;
  padding:9px 16px 9px 13px;color:var(--ink);
  box-shadow:var(--sh-badge),var(--sh-inset);
  transition:transform .18s ease,box-shadow .18s ease;
}
.store:hover{transform:translateY(-2px);box-shadow:var(--sh-card),var(--sh-inset)}
.store svg{width:24px;height:24px;flex:none}
.store-apple path{fill:var(--ink)}
.store-text{display:flex;flex-direction:column;line-height:1.15}
.store-top{font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.store-bot{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.store-note{font-size:13.5px;color:var(--muted);margin:0 0 34px}

/* The hero. A faint chart grid and two airspace glows sit behind the copy at a
   weight the body text does not notice, which is why the text keeps its own
   flat background instead of sitting on artwork. */
.hero{position:relative;display:grid;gap:26px;grid-template-columns:1fr;margin-bottom:38px}
.hero::before{
  content:"";position:absolute;inset:-280px calc(50% - 50vw) -40px;z-index:-2;pointer-events:none;
  background:
    radial-gradient(46% 30% at 80% 44%,var(--glow-m),transparent 72%),
    radial-gradient(40% 26% at 6% 68%,var(--glow-c),transparent 76%);
  mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 14%,#000 86%,transparent);
}
.hero::after{
  content:"";position:absolute;inset:-280px calc(50% - 50vw) -40px;z-index:-1;pointer-events:none;
  background:
    repeating-linear-gradient(0deg,var(--chart-line) 0 1px,transparent 1px 62px),
    repeating-linear-gradient(90deg,var(--chart-line) 0 1px,transparent 1px 62px);
  mask-image:radial-gradient(46% 34% at 50% 66%,#000,transparent 82%);
  -webkit-mask-image:radial-gradient(46% 34% at 50% 66%,#000,transparent 82%);
}
.hero-copy{min-width:0}
.hero-art{position:relative;display:flex;justify-content:center;padding-left:16px}

/* The app icon, at the size it is on a homescreen, resting on the corner of the
   screen it opens. */
.icon-tile{
  position:absolute;left:0;bottom:22px;width:78px;height:78px;border-radius:20px;
  border:1px solid var(--hair);box-shadow:var(--sh-tile);
  display:block;
}
.device{
  position:relative;width:212px;max-width:100%;
  transform:rotate(-3.2deg);transition:transform .25s ease;
}
.device:hover{transform:rotate(0)}
.device img{
  display:block;width:100%;height:auto;border-radius:17px;
  border:1px solid var(--hair);background:var(--surface);
  box-shadow:var(--sh-card);
}
@media (min-width:700px){
  .hero{grid-template-columns:minmax(0,1fr) 236px;gap:18px;align-items:start}
  .hero-art{padding-top:6px}
}
@media (max-width:420px){
  .icon-tile{width:62px;height:62px;left:2px;bottom:16px}
  .device{width:190px}
}

/* The proof band. Four facts about the product that do not move when a
   regulation does. */
.stat-band{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(132px,100%),1fr));gap:1px;
  background:var(--hair);border:1px solid var(--hair);border-radius:16px;
  overflow:hidden;margin:0 0 34px;box-shadow:var(--sh-band),var(--sh-inset);
}
.stat{
  background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 92%,transparent),color-mix(in srgb,var(--surface) 66%,transparent));
  padding:15px 14px;
}
.stat-n{display:block;font-size:22px;font-weight:600;letter-spacing:-.02em;color:var(--magenta)}
.stat-l{display:block;font-size:12.5px;line-height:1.35;color:var(--muted);margin-top:3px}

/* Screenshots. Phone frames that wrap instead of scrolling sideways, tilted the
   way they sit on a desk and straightening when you point at one. */
.shots{
  display:grid;gap:20px 16px;margin:0 0 34px;
  grid-template-columns:repeat(auto-fit,minmax(148px,1fr));
}
.shot{margin:0}
.shot-card{display:block;transition:transform .25s ease}
.shot-card.tilt{transform:rotate(-2.4deg)}
.shot-card.tilt-r{transform:rotate(2.4deg)}
.shot-card:hover{transform:rotate(0) translateY(-4px)}
.shot img{
  display:block;width:100%;height:auto;border-radius:15px;
  border:1px solid var(--hair);background:var(--surface);
  box-shadow:var(--sh-card);
  transition:box-shadow .25s ease;
}
.shot-card:hover img{box-shadow:var(--sh-card-hi)}
.shot figcaption{
  color:var(--muted);font-size:12.5px;line-height:1.4;margin-top:11px;
}

/* Free against paid, side by side, because the one payment is the only thing
   on this page a reader has to decide about. */
.compare{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(268px,100%),1fr));margin:20px 0 8px}
.col{
  border:1px solid var(--hair);border-radius:16px;padding:18px 20px;
  background:linear-gradient(180deg,var(--sheen),transparent 40%),color-mix(in srgb,var(--surface) 62%,transparent);
  box-shadow:var(--sh-panel),var(--sh-inset);
}
.col.paid{
  border-color:color-mix(in srgb,var(--magenta) 45%,var(--hair));
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--magenta) 12%,transparent),transparent 46%),
    color-mix(in srgb,var(--surface) 72%,transparent);
  box-shadow:var(--sh-card),var(--sh-inset);
}
.col-tag{
  font:600 11px/1 ui-monospace,SFMono-Regular,Menlo,monospace;
  letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:12px;
}
.col.paid .col-tag{color:var(--magenta)}
.col ul{padding-left:18px;margin:0}
.col li{font-size:14.5px;margin-bottom:8px}
.col li:last-child{margin-bottom:0}

@media (max-width:520px){
  .shots{grid-template-columns:repeat(2,1fr)}
  .shot figcaption{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .device,.shot-card,.store{transition:none}
  .device,.shot-card.tilt,.shot-card.tilt-r{transform:none}
}