:root {
  --paper:#f5f3ef; --ink:#24212a; --muted:#554f5e; --purple:#703bd6; --line:#d6d0dd; --max:1240px;
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  color:var(--ink); background:var(--paper); font-synthesis:none;
}
* { box-sizing:border-box }
html { scroll-behavior:smooth; scroll-padding-top:35px }
body { margin:0; font-size:1.125rem; line-height:1.65 }
a { color:inherit; text-underline-offset:.2em }
button { font:inherit }
img { max-width:100%; height:auto }
button,a,summary { -webkit-tap-highlight-color:transparent }
a:focus-visible,button:focus-visible,summary:focus-visible { outline:3px solid var(--purple); outline-offset:5px }
p { margin:0 0 1em }
h1,h2,h3 { margin:0; font-weight:700; line-height:1.12; letter-spacing:-.035em }
h1 { font-size:clamp(3.25rem,5.8vw,4.75rem); margin:24px 0 }
h2 { font-size:clamp(2.1rem,3.5vw,3rem) }
h3 { font-size:1.5rem; line-height:1.3; letter-spacing:-.025em }
.wrap { width:min(var(--max),calc(100% - 96px)); margin-inline:auto }

/* Readable navigation with comfortable keyboard and touch targets. */
.site-header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding-block:26px }
.brand { display:flex; align-items:center; gap:12px; text-decoration:none; font-weight:750; font-size:1.5rem; letter-spacing:-.04em }
.brand img { border-radius:10px; flex-shrink:0 }
.site-header nav,.site-footer nav { display:flex; flex-wrap:wrap; gap:12px 28px }
.site-header nav a { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:1rem; font-weight:600; text-decoration:none }
.site-header nav a:hover,.site-footer a:hover { color:var(--purple) }
.eyebrow { font-size:.875rem; letter-spacing:.08em; font-weight:700; line-height:1.6 }
.status-dot,.purple-dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--purple); margin-right:8px; vertical-align:middle }
.hero { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr); gap:40px; align-items:center; padding-block:48px 72px }
.hero>* { min-width:0 }
.hero .eyebrow { color:var(--muted) }
h1 em { font-style:normal; color:var(--purple) }
.intro { font-size:1.375rem; line-height:1.55; margin-bottom:20px }
.intro strong { color:var(--purple); font-size:1.12em; font-weight:750 }
.hero-detail { font-size:1.25rem; max-width:44ch; color:var(--muted); margin-bottom:28px }
.hero-actions { display:flex; align-items:center; flex-wrap:wrap; gap:18px 24px }
.button { display:inline-flex; justify-content:center; align-items:center; gap:22px; min-height:52px; padding:14px 22px; border-radius:8px; font-size:1.125rem; line-height:1.4; font-weight:650; text-decoration:none; transition:background .15s }
.primary { background:var(--purple); color:white }
.primary:hover { background:#5925b8 }
.text-link { display:inline-flex; align-items:center; min-height:44px; font-size:1rem; font-weight:600 }
.availability { font-size:1rem; line-height:1.6; color:var(--muted); margin:20px 0 0 }

/* The PNG already has transparent margins and its native window shadow. */
.app-showcase { min-width:0; margin:0 }
.screenshot-link { display:block; cursor:zoom-in; background:transparent; border:0; border-radius:12px; box-shadow:none }
.screenshot-link img { display:block; width:100%; height:auto }
.app-showcase figcaption { text-align:center; margin-top:8px; font-size:.875rem; line-height:1.6; color:var(--muted) }
.app-showcase figcaption span { font-weight:600; letter-spacing:.045em }
.spec-strip { border-block:1px solid var(--line) }
.spec-strip>.wrap { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; padding-block:26px; font-size:1rem; color:var(--muted) }
.spec-strip b { color:var(--ink); font-weight:650 }
.section { padding-block:88px }
.section-heading>.eyebrow,.demo-copy>.eyebrow,.faq-section .eyebrow { color:var(--purple); margin-bottom:18px }
.section-heading>p:last-child:not(.eyebrow) { color:var(--muted); font-size:1.25rem; margin:22px 0 0 }
.steps,.features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:40px; margin-top:42px }
.step-number { display:block; border-top:1px solid var(--line); padding-top:20px; margin-bottom:22px; font-size:.875rem; font-weight:700; color:var(--purple); letter-spacing:.075em }
.steps p,.features p { font-size:1.125rem; color:var(--muted); margin:14px 0 0; max-width:56ch }

.demo-section { background:#26232e; color:#f7f3fc; padding-block:76px }
.demo-layout { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); align-items:center; gap:60px }
.demo-copy>.eyebrow { color:#c59eff }
.demo-copy>p:not(.eyebrow) { font-size:1.125rem; color:#e1dbe9; margin-top:24px }
.demo-copy .fine-print { font-size:1rem!important; color:#cbc2d6!important }
.switcher { background:#16141b; border:1px solid #655975; border-radius:12px; padding:16px; box-shadow:0 18px 45px #0003 }
.switcher-bar { display:flex; justify-content:space-between; flex-wrap:wrap; gap:8px; padding:2px 2px 16px; font-size:.875rem; letter-spacing:.045em; color:#e1dbe9 }
.purple-dot { background:#b383f7 }
.scene { display:block; position:relative; overflow:hidden; background-color:#bed2de; background-image:url('/assets/flight-illustration.svg'); background-repeat:no-repeat; background-size:400% 100% }
.scene.front { background-position:0% 50% }
.scene.wing { background-position:33.333% 50% }
.scene.cabin { background-position:66.666% 50% }
.scene.rear { background-position:100% 50% }
.program-frame { aspect-ratio:16/9; border-radius:5px }
.view-label { position:absolute; bottom:13px; left:13px; padding:6px 10px; background:#171420e6; border-radius:4px; font-size:1rem; font-weight:650; color:#fff }
.frame-crosshair { position:absolute; width:26px; height:26px; left:calc(50% - 13px); top:calc(50% - 13px); opacity:.55 }
.frame-crosshair:before,.frame-crosshair:after { content:''; position:absolute; background:white }
.frame-crosshair:before { width:26px; height:1px; top:13px }
.frame-crosshair:after { height:26px; width:1px; left:13px }
.angle-buttons { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin-top:12px }
.angle-buttons button { background:#24202c; color:#e1dbe9; border:2px solid transparent; border-radius:6px; padding:4px; cursor:pointer; overflow:hidden; min-width:0 }
.angle-buttons button[aria-pressed=true] { border-color:#b583fd; background:#423053; color:white }
.angle-buttons button:focus-visible { outline-color:#d4b5ff }
.angle-buttons .scene { aspect-ratio:16/9; border-radius:2px }
.angle-buttons button>span:last-child { display:flex; flex-wrap:wrap; gap:6px; align-items:center; justify-content:center; padding:9px 2px 4px; font-size:1rem; line-height:1.5 }
kbd { font:inherit; display:inline-block; border:1px solid #a293ae; border-radius:4px; padding:0 5px }
.features { grid-template-columns:repeat(2,minmax(0,1fr)); gap:38px 60px; margin-top:34px }
.features article { border-top:1px solid var(--line); padding-top:26px }
.feature-symbol,.format-symbol { height:42px; margin-bottom:20px; color:var(--purple); font-size:2rem; line-height:1.3 }
.format-symbol { display:flex; align-items:center; gap:8px }
.format-symbol i { display:block; width:44px; height:26px; border:2px solid var(--purple); border-radius:3px }
.format-symbol i+i { width:20px; height:35px }
.faq-section { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.35fr); gap:64px; padding-bottom:88px }
.faq-list { border-top:1px solid var(--line) }
details { border-bottom:1px solid var(--line); padding:24px 0 }
summary { font-size:1.125rem; font-weight:650; cursor:pointer; line-height:1.5 }
details p { color:var(--muted); font-size:1.125rem; margin:16px 0 0 }
.closing { display:flex; align-items:center; flex-wrap:wrap; gap:28px; padding:42px; background:#e9e2f0; border-radius:12px; margin-bottom:48px }
.closing img { border-radius:18px }
.closing .eyebrow { color:var(--purple); margin-bottom:10px }
.closing h2 { font-size:clamp(1.875rem,3vw,2.375rem) }
.closing .button { margin-left:auto }
.site-footer { border-top:1px solid var(--line); padding-block:26px 32px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; font-size:1rem; color:var(--muted) }
.site-footer p { margin:0 }
.site-footer nav a { display:inline-flex; align-items:center; min-height:44px }
.trademark-note { width:100%; font-size:.875rem }
.skip { position:absolute; top:-100px; left:16px; z-index:20; background:white; padding:12px }
.skip:focus { top:10px }
.sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0 }

/* Reading pages share a comfortable line length and generous type. */
.guide { max-width:800px; padding-block:54px 80px }
.guide h1 { font-size:clamp(2.5rem,5vw,3.5rem); line-height:1.15 }
.guide h2 { font-size:1.875rem; margin:42px 0 18px; line-height:1.3 }
.guide h3 { margin-top:28px }
.guide p,.guide li { font-size:1.25rem; line-height:1.75; color:var(--muted) }
.guide .eyebrow { font-size:.875rem; color:var(--purple) }
.guide li { padding-left:5px; margin-bottom:16px }
.guide ol,.guide ul { padding-left:28px }
.guide a { color:var(--purple) }
.notice { background:#ebe4f3; padding:24px; border-left:3px solid var(--purple); border-radius:0 6px 6px 0; margin:28px 0 }
.notice p { margin:0 }
.guide table { border-collapse:collapse; width:100%; font-size:1.125rem; margin-block:24px; line-height:1.6 }
.guide th,.guide td { text-align:left; padding:14px 10px; border-bottom:1px solid var(--line); vertical-align:top }
.guide code { overflow-wrap:anywhere; font-size:.9em }
.download-card { background:white; border:1px solid var(--line); border-radius:12px; padding:28px; margin-block:30px }
.download-card>div { display:flex; align-items:center; gap:18px; margin-bottom:24px }
.download-card img { border-radius:14px; flex-shrink:0 }
.download-card strong { display:block; font-size:1.75rem; letter-spacing:-.03em; line-height:1.3 }
.download-card span { display:block; font-size:1rem; color:var(--muted); margin-top:8px }
.download-card .button { color:white }
.download-card .button span { color:inherit; margin:0; font-size:inherit }
.download-card>p { font-size:1rem; margin:16px 0 0 }
.checksum { margin-top:32px; border-top:1px solid var(--line) }
.download-page .release-note { font-size:1.125rem; margin-top:28px }

@media(max-width:1100px) {
  .wrap { width:calc(100% - 64px) }
  .hero { grid-template-columns:minmax(0,1fr); gap:30px }
  .hero-copy { max-width:700px }
  .app-showcase { width:min(740px,100%); margin-inline:auto }
  .demo-layout { grid-template-columns:minmax(0,1fr); gap:32px }
  .demo-copy { max-width:62ch }
  .demo-copy h2 br { display:none }
  .switcher { width:min(700px,100%); margin-inline:auto }
  .steps { gap:28px }
  .faq-section { gap:40px }
}
@media(max-width:760px) {
  .wrap { width:calc(100% - 40px) }
  .site-header { flex-wrap:wrap; gap:10px 20px; padding-block:18px }
  .brand { font-size:1.375rem }
  .brand img { width:36px }
  .site-header nav { gap:8px 20px }
  .site-header nav a[href="#how-it-works"],.site-header nav a[href="/#how-it-works"] { display:none }
  .hero { padding-block:30px 44px; gap:28px }
  h1 { font-size:clamp(2.75rem,9vw,4rem) }
  .hero-detail { font-size:1.125rem }
  .spec-strip>.wrap { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
  .spec-strip b { display:block }
  .section { padding-block:60px }
  .steps,.features { grid-template-columns:minmax(0,1fr); gap:30px; margin-top:32px }
  .step-number { margin-bottom:16px }
  .demo-section { padding-block:56px }
  .features article { padding-top:22px }
  .feature-symbol,.format-symbol { margin-bottom:12px }
  .faq-section { grid-template-columns:minmax(0,1fr); gap:28px; padding-bottom:56px }
  .faq-section h2 br { display:none }
  .closing { padding:28px; gap:22px; margin-bottom:32px }
  .closing .button { margin-left:0 }
  .closing img { width:56px }
  .guide { padding-block:30px 56px }
  .guide p,.guide li { font-size:1.125rem }
  .guide .eyebrow { font-size:.875rem }
  .guide table { font-size:1rem }
  .guide th,.guide td { padding-inline:5px }
  .notice { padding:20px }
  .download-card { padding:22px }
  .download-card>div { flex-wrap:wrap; gap:16px }
  .download-card strong { font-size:1.5rem }
  .download-card img { width:52px }
}
@media(max-width:480px) {
  .angle-buttons { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px }
  .angle-buttons .scene { display:none }
  .angle-buttons button { min-height:48px }
  .angle-buttons button>span:last-child { padding:6px }
  .switcher { padding:12px }
  .closing { padding:24px }
  .download-card .button { width:100% }
}
@media(prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto }
  * { transition:none!important }
}