/* EFB Wallpaper Manager - self-hosted typography */
@font-face{
  font-family:"Inter";
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url("/assets/fonts/font.php?family=inter") format("woff2");
}
@font-face{
  font-family:"Michroma";
  font-style:normal;
  font-weight:400;
  font-display:swap;
  src:url("/assets/fonts/font.php?family=michroma") format("woff2");
}

:root {
  color-scheme: light;
  --brand:#3938c4;
  --brand-2:#5553df;
  --brand-soft:rgba(57,56,196,.11);
  --success:#25b57b;
  --bg:#f4f6fb;
  --surface:#ffffff;
  --surface-2:#edf0f7;
  --surface-3:#e5e9f2;
  --text:#171b26;
  --muted:#626b7b;
  --border:#d5dae5;
  --header:rgba(247,248,252,.86);
  --shadow:0 18px 54px rgba(31,39,58,.10);
  --shadow-soft:0 8px 26px rgba(31,39,58,.075);
  --max:1480px;
  --band-hero:#f5f6fc;
  --band-1:#eef1fa;
  --band-2:#f8f9fd;
  --band-3:#edf1f9;
  --band-4:#f7f8fc;
  --band-footer:#e9edf6;
  --scroll-track:#dfe4ee;
  --scroll-thumb:#8589e5;
  --hover-text:#2f2ec0;
  --hover-bg:rgba(57,56,196,.08);
}
html[data-theme="dark"] {
  color-scheme: dark;
  --bg:#0c1020;
  --surface:#151a2c;
  --surface-2:#1b2137;
  --surface-3:#232a43;
  --text:#f5f7fb;
  --muted:#aab2c5;
  --border:#2a314c;
  --header:rgba(12,16,32,.86);
  --shadow:0 18px 58px rgba(0,0,0,.28);
  --shadow-soft:0 9px 30px rgba(0,0,0,.20);
  --brand-soft:rgba(85,83,223,.16);
  --band-hero:#0e1326;
  --band-1:#12182c;
  --band-2:#0e1427;
  --band-3:#11192e;
  --band-4:#0e1425;
  --band-footer:#0a1020;
  --scroll-track:#171d31;
  --scroll-thumb:#5958d8;
  --hover-text:#b9b8ff;
  --hover-bg:rgba(185,184,255,.08);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-width:thin}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;transition:background .25s ease,color .25s ease}
body::-webkit-scrollbar,.scrollable-row::-webkit-scrollbar{width:11px;height:10px}
body::-webkit-scrollbar-track,.scrollable-row::-webkit-scrollbar-track{background:var(--scroll-track)}
body::-webkit-scrollbar-thumb,.scrollable-row::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--scroll-thumb),var(--brand));border:2px solid var(--scroll-track);border-radius:999px}
body::-webkit-scrollbar-thumb:hover,.scrollable-row::-webkit-scrollbar-thumb:hover{background:linear-gradient(180deg,var(--brand-2),var(--brand))}
img{max-width:100%;display:block}a{color:inherit}button{font:inherit}.container{width:min(var(--max),calc(100% - 48px));margin-inline:auto}

.site-header{position:sticky;top:0;z-index:50;background:var(--header);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border-bottom:1px solid var(--border)}
.navbar{min-height:78px;display:flex;align-items:center;gap:22px}.brand{display:flex;align-items:center;gap:12px;text-decoration:none;white-space:nowrap}.brand img{width:46px;height:46px;border-radius:13px}.brand-name{font-family:Michroma,sans-serif;font-size:16px;letter-spacing:-.02em}.nav-links{display:flex;align-items:center;gap:22px;margin-left:auto}.nav-links a{text-decoration:none;color:var(--muted);font-size:14px;font-weight:700;transition:.2s ease}.nav-links a:hover{color:var(--hover-text);transform:translateY(-1px)}
.header-actions{display:flex;align-items:center;gap:9px}.lang-switch,.theme-switch{border:1px solid var(--border);background:var(--surface);box-shadow:var(--shadow-soft)}.lang-switch{display:flex;align-items:center;height:40px;border-radius:999px;padding:2px}.lang-switch button{height:34px;min-width:42px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-weight:800;font-size:12px;cursor:pointer}.lang-switch button.active{background:var(--brand);color:#fff}.theme-switch{position:relative;width:80px;height:40px;padding:4px;border-radius:999px;cursor:pointer;display:flex;align-items:center}.theme-knob{position:absolute;left:5px;top:5px;width:28px;height:28px;border-radius:50%;background:var(--brand);transition:transform .28s cubic-bezier(.2,.8,.2,1)}html[data-theme="dark"] .theme-knob{transform:translateX(40px)}.theme-icons{display:flex;width:100%;align-items:center;justify-content:space-between;padding:0 7px;position:relative;z-index:2;pointer-events:none}.theme-icons span{width:20px;height:20px;display:grid;place-items:center;line-height:1;transition:color .2s ease,opacity .2s ease,transform .2s ease}.theme-icons svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:2.15;stroke-linecap:round;stroke-linejoin:round}.theme-icons .moon svg{fill:currentColor;stroke:none}.theme-icons .sun{color:#fff;opacity:1}.theme-icons .moon{color:#596273;opacity:.92}html[data-theme="dark"] .theme-icons .sun{color:#aab2c5;opacity:.9}html[data-theme="dark"] .theme-icons .moon{color:#fff;opacity:1}.theme-switch:hover .theme-icons .sun,.theme-switch:hover .theme-icons .moon{transform:scale(1.06)}.theme-switch:focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 34%,transparent);outline-offset:3px}

.section-band{width:100%;position:relative;border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent)}.band-hero{background:radial-gradient(circle at 8% 0%,rgba(57,56,196,.13),transparent 34rem),var(--band-hero)}.band-features{background:var(--band-1)}.band-how{background:var(--band-2)}.band-aircraft{background:var(--band-3)}.band-safety{background:var(--band-4)}
.hero{padding:108px 0 82px}.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:58px;align-items:center}.eyebrow{display:inline-flex;padding:8px 13px;border:1px solid var(--border);background:color-mix(in srgb,var(--surface) 84%,transparent);border-radius:999px;color:var(--muted);font-size:12px;font-weight:800;letter-spacing:.03em}.hero h1{font-size:clamp(42px,5.6vw,76px);line-height:1.02;letter-spacing:-.055em;margin:22px 0 22px;font-weight:800}.hero h1 span{color:var(--brand)}.hero p{width:100%;max-width:none;font-size:18px;line-height:1.75;color:var(--muted);margin:0}.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
.btn{appearance:none;border:1px solid var(--border);background:var(--surface);color:var(--text);min-height:48px;padding:0 19px;border-radius:14px;display:inline-flex;align-items:center;justify-content:center;text-decoration:none;font-weight:800;cursor:pointer;position:relative;overflow:hidden;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 22%,rgba(255,255,255,.22),transparent 72%);transform:translateX(-125%);transition:transform .55s ease}.btn:hover:after{transform:translateX(125%)}.btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-soft);border-color:color-mix(in srgb,var(--hover-text) 55%,var(--border));color:var(--hover-text);background:var(--hover-bg)}.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}

.hero-card{border:1px solid var(--border);background:linear-gradient(145deg,var(--surface),var(--surface-2));border-radius:30px;padding:20px;box-shadow:var(--shadow)}.mock-window{border:1px solid #2a314c;background:#0d1020;border-radius:22px;padding:14px;color:#fff}.mock-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}.mock-brand{display:flex;align-items:center;gap:10px}.mock-brand img{width:30px;height:30px;border-radius:8px}.mock-brand span{font-family:Michroma,sans-serif;font-size:11px}.mock-pills{display:flex;gap:6px}.mock-pill{width:58px;height:18px;border-radius:999px;background:#1b2035;border:1px solid #292f49}.mock-main{display:grid;grid-template-columns:130px 1fr;gap:10px}.mock-side,.mock-preview,.mock-bottom{border:1px solid #292f49;background:#15192b;border-radius:16px}.mock-side{min-height:290px;padding:10px}.mock-air{height:45px;border-radius:10px;background:#1b2035;margin-bottom:8px;position:relative;overflow:hidden}.mock-air:before{content:"";position:absolute;width:70%;height:10px;border-radius:999px;background:linear-gradient(90deg,#f3f5fb,#9299b3);top:17px;left:8px}.mock-preview{min-height:290px;display:grid;place-items:center}.mock-tablet{width:72%;aspect-ratio:1.55;border:4px solid #313955;border-radius:22px;background:linear-gradient(145deg,#132441,#0a3b4a);position:relative;overflow:hidden}.mock-tablet:before,.mock-tablet:after{content:"";position:absolute;width:120%;height:32%;background:#3938c4;opacity:.46;transform:rotate(-10deg);left:-10%;top:38%}.mock-tablet:after{background:#168b82;transform:rotate(10deg)}.mock-bottom{grid-column:1/-1;height:72px;margin-top:10px}

.section{padding:90px 0;scroll-margin-top:86px}.section-head{width:100%;max-width:none;margin-bottom:38px}.section-kicker{color:var(--brand);font-size:13px;font-weight:800;letter-spacing:.075em;text-transform:uppercase}.section h2{font-size:clamp(31px,4vw,48px);line-height:1.08;letter-spacing:-.04em;margin:10px 0 14px;font-weight:800}.section-head p,.lead{width:100%;max-width:none;margin:0;color:var(--muted);font-size:17px;line-height:1.75}
.grid-3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:24px;box-shadow:var(--shadow-soft);transition:.22s ease}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.card h3{margin:0 0 10px;font-size:18px}.card p{margin:0;color:var(--muted);line-height:1.68}.icon-box{width:46px;height:46px;border-radius:14px;display:grid;place-items:center;background:var(--brand-soft);color:var(--brand);font-weight:800;margin-bottom:16px}
.steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.step{display:grid;grid-template-columns:52px 1fr;gap:16px;padding:21px;border:1px solid var(--border);border-radius:19px;background:var(--surface);box-shadow:var(--shadow-soft)}.step-num{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800}.step h3{margin:3px 0 7px}.step p{margin:0;color:var(--muted);line-height:1.68}

.aircraft-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.aircraft-card{position:relative;min-height:186px;overflow:hidden;border:1px solid var(--border);border-radius:22px;background:linear-gradient(155deg,var(--surface),var(--surface-2));box-shadow:var(--shadow-soft);isolation:isolate;transition:.22s ease}.aircraft-card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}.aircraft-card:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 45%,color-mix(in srgb,var(--brand) 12%,transparent));z-index:0}.aircraft-silhouette{position:absolute;left:-4px;right:auto;bottom:8px;width:92%;height:112px;object-fit:contain;object-position:left center;opacity:.23;filter:grayscale(1) contrast(.75);z-index:0;mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 96%);-webkit-mask-image:linear-gradient(90deg,#000 0%,#000 62%,transparent 96%)}html[data-theme="dark"] .aircraft-silhouette{opacity:.35;filter:grayscale(1) brightness(1.25) contrast(.85)}.aircraft-content{position:relative;z-index:2;padding:20px;height:100%;display:flex;flex-direction:column;align-items:flex-start}.aircraft-content small{color:var(--muted);font-size:14px;margin-bottom:10px}.aircraft-content strong{font-size:18px;line-height:1.2;max-width:75%;margin-bottom:14px}.badge{margin-top:auto;display:inline-flex;width:max-content;padding:6px 10px;border-radius:999px;background:rgba(37,181,123,.15);color:#087b54;font-size:11px;font-weight:800}html[data-theme="dark"] .badge{color:#62e3b0;background:rgba(37,181,123,.16)}
.more-soon{margin-top:18px;padding:18px 22px;border:1px dashed color-mix(in srgb,var(--brand) 52%,var(--border));border-radius:18px;background:linear-gradient(110deg,var(--brand-soft),transparent 75%);color:var(--brand);text-align:center;font-weight:800;letter-spacing:.08em}
.compatibility-panel{margin-top:18px;display:grid;grid-template-columns:54px 1fr;gap:18px;align-items:start;padding:22px;border:1px solid color-mix(in srgb,var(--brand) 48%,var(--border));border-radius:20px;background:linear-gradient(135deg,var(--brand-soft),color-mix(in srgb,var(--surface) 88%,transparent));box-shadow:var(--shadow-soft)}.compatibility-icon{width:54px;height:54px;border-radius:15px;display:grid;place-items:center;background:var(--brand);color:#fff;font-weight:800}.compatibility-panel h3{font-size:21px;margin:1px 0 7px}.compatibility-panel p{margin:0;line-height:1.7;color:var(--muted)}

.footer{background:var(--band-footer);border-top:1px solid var(--border);padding:46px 0 52px;color:var(--muted)}.footer-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:44px;align-items:start}.footer-brand{display:flex;align-items:center;gap:13px;margin-bottom:14px}.footer-brand img{width:42px;height:42px;border-radius:12px}.footer-brand span{font-family:Michroma,sans-serif;color:var(--text);font-size:14px}.footer p{margin:6px 0;font-size:13px;line-height:1.62}.footer-right{display:grid;gap:22px}.liverylab-wrap{width:190px}.logo-dark,.logo-light{display:none}html[data-theme="dark"] .logo-dark{display:block}html[data-theme="light"] .logo-light{display:block}.footer-legal-links{
      display:flex;
      align-items:center;
      gap:0;
      flex-wrap:nowrap;
      white-space:nowrap;
      overflow-x:auto;
      padding-bottom:6px;
      scrollbar-width:thin;
      scrollbar-color:var(--scroll-thumb) transparent
    }
    .footer-legal-links::-webkit-scrollbar{height:6px}
    .footer-legal-links::-webkit-scrollbar-track{background:transparent}
    .footer-legal-links::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:999px}
    .footer-legal-links a{
      position:relative;
      flex:0 0 auto;
      text-decoration:none;
      color:var(--muted);
      font-size:13px;
      font-weight:700;
      padding:2px 16px 2px 0;
      margin-right:16px;
      transition:color .2s ease,transform .2s ease
    }
    .footer-legal-links a:not(:last-child)::after{
      content:"·";
      position:absolute;
      right:-1px;
      color:var(--border)
    }
    .footer-legal-links a:hover{
      color:var(--hover-text);
      transform:translateY(-1px)
    }
.to-top{position:fixed;right:24px;bottom:24px;width:50px;height:50px;border-radius:15px;border:1px solid var(--border);background:var(--surface);color:var(--text);box-shadow:var(--shadow);display:grid;place-items:center;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(12px);transition:.24s ease;z-index:45}.to-top.show{opacity:1;visibility:visible;transform:none}.to-top:hover{background:var(--brand);border-color:var(--brand);color:#fff;transform:translateY(-2px)}
.reveal{opacity:0;transform:translateY(16px);transition:opacity .55s ease,transform .55s ease}.reveal.visible{opacity:1;transform:none}

/* Legal pages: Inter everywhere except the EFBWM logo in the header. */
.legal-page{padding:80px 0;background:var(--bg)}.legal-shell{max-width:980px;margin:auto;background:var(--surface);border:1px solid var(--border);border-radius:26px;padding:clamp(24px,4vw,48px);box-shadow:var(--shadow)}.legal-shell h1{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-weight:800;font-size:clamp(32px,4vw,50px);letter-spacing:-.04em;margin:0 0 14px}.legal-shell h2{font-size:22px;margin-top:34px}.legal-shell p,.legal-shell li{color:var(--muted);line-height:1.75}.notice{border-left:4px solid var(--brand);background:var(--brand-soft);padding:16px 18px;border-radius:0 14px 14px 0;margin:20px 0}

@media(max-width:1220px){.aircraft-grid{grid-template-columns:repeat(3,minmax(250px,1fr))}.scrollable-row{overflow-x:auto;padding-bottom:10px;scrollbar-color:var(--scroll-thumb) var(--scroll-track);scrollbar-width:thin}.hero-grid{grid-template-columns:1fr 1fr}}
@media(max-width:980px){.nav-links{display:none}.hero-grid{grid-template-columns:1fr}.grid-3,.steps{grid-template-columns:1fr 1fr}.footer-grid{grid-template-columns:1fr}.aircraft-grid{display:flex;gap:14px;overflow-x:auto;padding:0 0 12px}.aircraft-card{flex:0 0 280px}.footer-right{grid-template-columns:auto 1fr;align-items:start}}
@media(max-width:680px){.container{width:min(var(--max),calc(100% - 26px))}.navbar{min-height:70px;gap:10px}.brand-name{font-size:11px}.brand img{width:40px;height:40px}.header-actions{margin-left:auto}.hero{padding:72px 0 58px}.hero h1{font-size:38px}.grid-3,.steps{grid-template-columns:1fr}.section{padding:66px 0}.mock-main{grid-template-columns:92px 1fr}.compatibility-panel{grid-template-columns:1fr}.footer-right{grid-template-columns:1fr}.footer-legal-links{display:flex;overflow-x:auto}.footer-legal-links a{text-align:left}.to-top{right:14px;bottom:14px}}

.btn.primary:hover{color:#fff;background:var(--brand-2);border-color:var(--brand-2)}

.lang-switch button:hover:not(.active){color:var(--hover-text);background:var(--hover-bg)}
.footer a:hover{color:var(--hover-text)}
.legal-shell a:hover{color:var(--hover-text)}
.card a:hover,.step a:hover{color:var(--hover-text)}


/* FAQ */
.band-faq{background:var(--band-faq,rgba(57,56,196,.055));border-top:1px solid var(--border)}
html[data-theme="dark"] .band-faq{--band-faq:rgba(85,83,223,.065)}
.faq-teaser{display:grid;grid-template-columns:1fr auto;gap:28px;align-items:center}
.faq-teaser .section-head{margin:0}
.faq-teaser .btn{min-width:220px}
.faq-topbar{display:flex;align-items:center;gap:16px;margin-bottom:34px}
.back-link{display:inline-flex;align-items:center;gap:9px;text-decoration:none;font-weight:700;color:var(--text);padding:10px 14px;border:1px solid var(--border);border-radius:14px;background:var(--surface);transition:.2s}
.back-link:hover{color:var(--hover-text);border-color:var(--brand);transform:translateX(-2px)}
.faq-hero{padding:64px 0 34px}
.faq-hero h1{font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;font-size:clamp(34px,5vw,58px);letter-spacing:-.04em;margin:10px 0 14px}
.faq-search-wrap{position:relative;margin:28px 0 8px}
.faq-search{width:100%;height:54px;padding:0 18px 0 48px;border:1px solid var(--border);border-radius:16px;background:var(--surface);color:var(--text);outline:none;transition:.2s}
.faq-search:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft)}
.faq-search-icon{position:absolute;left:17px;top:50%;transform:translateY(-50%);color:var(--muted);font-size:18px}
.faq-layout{display:grid;grid-template-columns:220px 1fr;gap:28px;align-items:start}
.faq-nav{position:sticky;top:102px;display:grid;gap:8px}
.faq-nav a{text-decoration:none;color:var(--muted);padding:10px 12px;border-radius:12px;font-weight:700;font-size:14px;transition:.2s}
.faq-nav a:hover{color:var(--hover-text);background:var(--hover-bg)}
.faq-group{scroll-margin-top:104px;margin-bottom:36px}
.faq-group h2{font-size:24px;margin:0 0 14px}
.faq-list{display:grid;gap:10px}
.faq-item{border:1px solid var(--border);border-radius:16px;background:var(--surface);overflow:hidden;box-shadow:var(--shadow-soft)}
.faq-question{width:100%;border:0;background:transparent;color:var(--text);padding:18px 20px;display:flex;align-items:center;justify-content:space-between;gap:18px;text-align:left;font-weight:750;cursor:pointer}
.faq-question:hover{color:var(--hover-text);background:var(--hover-bg)}
.faq-chevron{font-size:18px;transition:transform .22s ease;color:var(--muted)}
.faq-item.open .faq-chevron{transform:rotate(180deg)}
.faq-answer{display:grid;grid-template-rows:0fr;transition:grid-template-rows .25s ease}
.faq-answer>div{overflow:hidden}
.faq-answer p{margin:0;padding:0 20px 18px;color:var(--muted);line-height:1.72}
.faq-item.open .faq-answer{grid-template-rows:1fr}
.faq-no-results{display:none;margin:26px 0;padding:18px;border:1px dashed var(--border);border-radius:16px;color:var(--muted);text-align:center}
.faq-no-results.show{display:block}
@media(max-width:900px){.faq-teaser{grid-template-columns:1fr}.faq-teaser .btn{width:max-content}.faq-layout{grid-template-columns:1fr}.faq-nav{position:static;display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;scrollbar-width:thin}.faq-nav a{white-space:nowrap;background:var(--surface);border:1px solid var(--border)}}
@media(max-width:640px){.faq-hero{padding-top:42px}.faq-topbar{margin-bottom:24px}.faq-question{padding:16px}.faq-answer p{padding:0 16px 16px}}


/* V3.3 cache-safe FAQ/footer hardening */
.band-faq{
  background:var(--band-2);
  border-top:1px solid color-mix(in srgb,var(--border) 82%,transparent);
  border-bottom:1px solid color-mix(in srgb,var(--border) 82%,transparent)
}
html[data-theme="dark"] .band-faq{background:#10172a}

.faq-teaser{
  min-height:210px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:36px;
  align-items:center
}
.faq-teaser .section-head{margin:0;max-width:none}
.faq-teaser .section-head p{max-width:none}
.faq-teaser .btn{min-width:230px}

.footer-legal-links{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:center;
  gap:0;
  white-space:nowrap;
  overflow-x:auto
}
.footer-legal-links a{
  text-decoration:none !important;
  color:var(--muted) !important;
  background:transparent !important;
  border:0 !important;
  box-shadow:none !important;
  padding:2px 16px 2px 0 !important;
  margin-right:16px !important
}
.footer-legal-links a:not(:last-child)::after{
  content:"·";
  position:absolute;
  right:-1px;
  color:var(--border)
}
.footer-legal-links a:hover{
  color:var(--hover-text) !important;
  text-decoration:none !important
}


/* =========================================================
   V3.4 — MOBILE LAYOUT FIX
   These rules must remain at the end of the stylesheet.
   ========================================================= */

html, body {
  max-width: 100%;
  overflow-x: clip;
}

.site-header,
main,
footer,
.section-band,
.footer {
  max-width: 100%;
  overflow-x: clip;
}

.navbar > *,
.hero-grid > *,
.footer-grid > *,
.footer-right > *,
.faq-teaser > *,
.faq-layout > * {
  min-width: 0;
}

@media (max-width: 760px) {
  .container {
    width: calc(100% - 28px);
    max-width: none;
  }

  /* Header: two clean rows instead of squeezing logo + switches together. */
  .navbar {
    min-height: 0;
    padding: 13px 0 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    align-items: center;
  }

  .brand {
    width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .brand img {
    flex: 0 0 42px;
    width: 42px;
    height: 42px;
  }

  .brand-name {
    min-width: 0;
    max-width: 100%;
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-links {
    display: none !important;
  }

  .header-actions {
    width: 100%;
    min-width: 0;
    margin-left: 0;
    display: flex;
    justify-content: space-between;
    gap: 10px;
  }

  .lang-switch {
    flex: 0 0 auto;
  }

  .lang-switch button {
    min-width: 48px;
    height: 36px;
    font-size: 13px;
  }

  .theme-switch {
    flex: 0 0 82px;
    width: 82px;
  }

  /* Hero */
  .hero {
    padding: 58px 0 50px;
  }

  .hero-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 34px;
  }

  .eyebrow {
    max-width: 100%;
    white-space: normal;
    line-height: 1.35;
  }

  .hero h1 {
    font-size: clamp(34px, 11vw, 46px);
    line-height: 1.04;
    letter-spacing: -.045em;
    margin: 18px 0;
  }

  .hero p {
    font-size: 16px;
    line-height: 1.65;
  }

  .hero-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    margin-top: 26px;
  }

  .hero-actions .btn {
    width: 100%;
    min-width: 0;
  }

  .hero-card {
    padding: 12px;
    border-radius: 22px;
  }

  .mock-main {
    grid-template-columns: 74px minmax(0,1fr);
  }

  .mock-side,
  .mock-preview {
    min-height: 220px;
  }

  .mock-tablet {
    width: 82%;
  }

  .mock-brand span {
    font-size: 8px;
  }

  .mock-pill {
    width: 32px;
  }

  /* Sections */
  .section {
    padding: 58px 0;
  }

  .section-head {
    margin-bottom: 26px;
  }

  .section h2 {
    font-size: clamp(28px, 9vw, 38px);
  }

  .section-head p,
  .lead {
    font-size: 15.5px;
    line-height: 1.68;
  }

  .grid-3,
  .steps {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .card,
  .step {
    min-width: 0;
  }

  /* Aircraft carousel remains horizontal but may never widen the page. */
  .aircraft-grid,
  .scrollable-row {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding-bottom: 12px;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x proximity;
  }

  .aircraft-card {
    flex: 0 0 min(82vw, 300px);
    scroll-snap-align: start;
  }

  .more-soon {
    width: 100%;
  }

  .compatibility-panel {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 14px;
  }

  /* FAQ teaser: V3.3 had a late desktop grid declaration that caused
     the button to live outside the viewport on mobile. */
  .faq-teaser {
    width: 100%;
    min-height: 0;
    display: grid !important;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 22px;
    align-items: start;
  }

  .faq-teaser .section-head {
    width: 100%;
    min-width: 0;
  }

  .faq-teaser .btn {
    width: 100%;
    max-width: 100%;
    min-width: 0 !important;
  }

  /* FAQ page */
  .faq-hero {
    padding: 42px 0 30px;
  }

  .faq-hero h1 {
    font-size: clamp(32px, 10vw, 44px);
  }

  .faq-layout {
    grid-template-columns: minmax(0,1fr) !important;
    gap: 22px;
  }

  .faq-nav {
    position: static;
    width: 100%;
    max-width: 100%;
    display: flex;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 8px;
    overscroll-behavior-inline: contain;
  }

  .faq-nav a {
    flex: 0 0 auto;
    white-space: nowrap;
  }

  .faq-search {
    min-width: 0;
  }

  /* Footer */
  .footer {
    padding: 36px 0 84px;
  }

  .footer-grid {
    width: 100%;
    grid-template-columns: minmax(0,1fr) !important;
    gap: 30px;
  }

  .footer-about,
  .footer-right,
  .footer-legal,
  .footer-legal-links {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }

  .footer-right {
    grid-template-columns: minmax(0,1fr) !important;
  }

  .liverylab-wrap {
    width: min(190px, 58vw);
  }

  .footer p {
    overflow-wrap: anywhere;
  }

  /* Keep the requested one-row legal links, but scroll INSIDE their own
     strip instead of widening the document. */
  .footer-legal {
    overflow: hidden;
  }

  .footer-legal-links {
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap;
    overflow-x: auto !important;
    overflow-y: hidden;
    overscroll-behavior-inline: contain;
    padding: 4px 0 10px;
  }

  .footer-legal-links a {
    flex: 0 0 auto;
    font-size: 12.5px;
  }

  .to-top {
    right: 14px;
    bottom: 14px;
    width: 48px;
    height: 48px;
  }

  /* Legal documents */
  .legal-page {
    padding: 42px 0;
  }

  .legal-shell {
    padding: 22px 18px;
    border-radius: 20px;
  }

  .legal-shell h1 {
    font-size: clamp(29px, 9vw, 40px);
    overflow-wrap: anywhere;
  }
}

@media (max-width: 390px) {
  .container {
    width: calc(100% - 22px);
  }

  .brand-name {
    font-size: 11.5px;
  }

  .hero h1 {
    font-size: 33px;
  }

  .theme-switch {
    flex-basis: 78px;
    width: 78px;
  }

  .lang-switch button {
    min-width: 44px;
  }

  .mock-main {
    grid-template-columns: 62px minmax(0,1fr);
  }
}


/* =========================================================
   V3.5 — MOBILE HEADER REDESIGN
   ========================================================= */

@media (max-width: 760px) {
  .navbar {
    min-height: 0;
    padding: 14px 0 13px;
    display: grid;
    grid-template-columns: minmax(0,1fr);
    gap: 11px;
  }

  /* Brand gets visual priority. */
  .brand {
    width: 100%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    overflow: visible;
  }

  .brand img {
    flex: 0 0 58px;
    width: 58px;
    height: 58px;
    border-radius: 16px;
  }

  .brand-name {
    min-width: 0;
    max-width: calc(100% - 70px);
    font-size: 14px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Compact controls grouped together instead of stretched to both edges. */
  .header-actions {
    width: auto;
    min-width: 0;
    margin-left: 70px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
  }

  .lang-switch {
    height: 34px;
    padding: 2px;
    box-shadow: none;
  }

  .lang-switch button {
    min-width: 40px;
    height: 28px;
    padding: 0 8px;
    font-size: 11.5px;
  }

  .theme-switch {
    flex: 0 0 64px;
    width: 64px;
    height: 34px;
    padding: 3px;
    box-shadow: none;
  }

  .theme-knob {
    left: 4px;
    top: 4px;
    width: 26px;
    height: 26px;
  }

  html[data-theme="dark"] .theme-knob {
    transform: translateX(30px);
  }

  .theme-icons {
    padding: 0 6px;
  }

  .theme-icons span {
    width: 16px;
    height: 16px;
    font-size: 12px;
  }
}

@media (max-width: 430px) {
  .brand img {
    flex-basis: 54px;
    width: 54px;
    height: 54px;
    border-radius: 15px;
  }

  .brand-name {
    max-width: calc(100% - 66px);
    font-size: 12.5px;
  }

  .header-actions {
    margin-left: 66px;
    gap: 7px;
  }

  .lang-switch button {
    min-width: 37px;
    padding: 0 6px;
  }

  .theme-switch {
    flex-basis: 60px;
    width: 60px;
  }

  html[data-theme="dark"] .theme-knob {
    transform: translateX(26px);
  }
}

@media (max-width: 360px) {
  .brand img {
    flex-basis: 50px;
    width: 50px;
    height: 50px;
  }

  .brand-name {
    font-size: 11.5px;
    max-width: calc(100% - 62px);
  }

  .header-actions {
    margin-left: 62px;
  }
}


/* =========================================================
   V3.6 — MOBILE HEADER BALANCE
   Removes the artificial left offset that caused the empty
   area on the right side of the second header row.
   ========================================================= */

@media (max-width: 760px) {
  .navbar {
    gap: 8px;
    padding-bottom: 12px;
  }

  .brand {
    justify-content: center;
    gap: 13px;
  }

  .brand img {
    flex: 0 0 60px;
    width: 60px;
    height: 60px;
  }

  .brand-name {
    max-width: calc(100% - 78px);
    font-size: 14px;
  }

  .header-actions {
    margin-left: 0 !important;
    width: 100%;
    display: grid;
    grid-template-columns: auto auto;
    justify-content: center;
    align-items: center;
    gap: 10px;
  }

  .lang-switch,
  .theme-switch {
    margin: 0;
  }
}

@media (max-width: 430px) {
  .brand img {
    flex-basis: 56px;
    width: 56px;
    height: 56px;
  }

  .brand-name {
    max-width: calc(100% - 72px);
    font-size: 12.5px;
  }

  .header-actions {
    margin-left: 0 !important;
    justify-content: center;
    gap: 8px;
  }
}


/* =========================================================
   V3.7 — AIRCRAFT SILHOUETTES FILL THE WHOLE CARD
   ========================================================= */

.aircraft-card{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  min-height:186px;
  padding:0;
  background:var(--surface);
}

.aircraft-silhouette{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
  opacity:.48 !important;
  filter:grayscale(1) brightness(1.02) contrast(.92) !important;
  mask-image:none !important;
  -webkit-mask-image:none !important;
  z-index:0 !important;
  transform:none !important;
}

html[data-theme="light"] .aircraft-silhouette{
  opacity:.26 !important;
  filter:grayscale(1) brightness(1.45) contrast(.76) !important;
}

.aircraft-card::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(180deg,
      color-mix(in srgb,var(--surface) 94%,transparent) 0%,
      color-mix(in srgb,var(--surface) 78%,transparent) 34%,
      transparent 62%,
      color-mix(in srgb,var(--brand) 12%,transparent) 100%),
    linear-gradient(90deg,
      color-mix(in srgb,var(--surface) 50%,transparent) 0%,
      transparent 54%);
}

html[data-theme="dark"] .aircraft-card::after{
  background:
    linear-gradient(180deg,
      rgba(21,25,43,.95) 0%,
      rgba(21,25,43,.72) 34%,
      rgba(21,25,43,.10) 66%,
      rgba(57,56,196,.14) 100%),
    linear-gradient(90deg,
      rgba(21,25,43,.38) 0%,
      transparent 58%);
}

.aircraft-content{
  position:relative;
  z-index:2;
  padding:20px;
  height:100%;
  min-height:186px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
}

.aircraft-content small,
.aircraft-content strong{
  text-shadow:0 1px 4px rgba(0,0,0,.22);
}

.aircraft-content strong{
  max-width:78%;
}

.aircraft-content .badge{
  margin-top:auto;
  backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
}

@media(max-width:980px){
  .aircraft-card{
    min-height:190px;
  }

  .aircraft-content{
    min-height:190px;
  }
}


/* =========================================================
   V3.8 — AIRCRAFT POSITION
   Keep the nose visible and move the silhouette slightly right.
   ========================================================= */
.aircraft-silhouette{
  object-position:40% center !important;
  transform:translateX(3%) scale(1.04) !important;
  transform-origin:center center !important;
}

@media(max-width:760px){
  .aircraft-silhouette{
    object-position:38% center !important;
    transform:translateX(3.5%) scale(1.05) !important;
  }
}


/* =========================================================
   V3.9 — FOOTER LEGAL LINKS
   2 columns × 2 rows, no horizontal scrollbar.
   ========================================================= */

.footer-legal {
  width: 100%;
  overflow: visible !important;
}

.footer-legal-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px 26px !important;
  width: 100%;
  max-width: 520px;
  white-space: normal !important;
  overflow: visible !important;
  padding: 0 !important;
  margin: 0 !important;
}

.footer-legal-links a {
  position: relative;
  display: block;
  flex: none !important;
  min-width: 0;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: var(--muted) !important;
  text-decoration: none !important;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.45;
  white-space: normal !important;
  transition: color .2s ease, transform .2s ease;
}

.footer-legal-links a::after {
  content: none !important;
}

.footer-legal-links a:hover {
  color: var(--hover-text) !important;
  transform: translateX(2px);
}

@media (max-width: 760px) {
  .footer-legal-links {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px 18px !important;
    max-width: 100%;
    overflow: visible !important;
  }

  .footer-legal-links a {
    font-size: 12.5px;
  }
}


/* =========================================================
   V3.10 — DOWNLOAD PAGE
   ========================================================= */
.band-download{
  background:linear-gradient(180deg,color-mix(in srgb,var(--brand) 7%,var(--bg)),var(--bg));
  border-top:1px solid var(--border)
}
.download-teaser{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:32px;
  align-items:center
}
.download-teaser .section-head{margin:0;max-width:none}
.download-teaser .btn{min-width:220px}

.download-page-hero{
  padding:68px 0 34px
}
.download-page-hero h1{
  font-family:Inter,system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:clamp(36px,5vw,60px);
  letter-spacing:-.045em;
  line-height:1.06;
  margin:10px 0 14px
}
.download-layout{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);
  gap:22px;
  align-items:start
}
.download-panel,
.download-info-card{
  border:1px solid var(--border);
  border-radius:24px;
  background:var(--surface);
  box-shadow:var(--shadow-soft)
}
.download-panel{padding:28px}
.download-info-card{padding:22px}
.download-version-row{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:20px;
  padding-bottom:22px;
  border-bottom:1px solid var(--border)
}
.download-version-label{
  display:block;
  color:var(--muted);
  font-size:13px;
  font-weight:700;
  margin-bottom:6px
}
.download-version-value{
  font-size:clamp(30px,4vw,44px);
  font-weight:800;
  letter-spacing:-.04em
}
.download-status{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border-radius:999px;
  background:rgba(82,213,155,.14);
  color:#08704c;
  font-size:12px;
  font-weight:800
}
html[data-theme="dark"] .download-status{color:#73e7b7}
.download-status.offline{
  background:rgba(244,181,71,.13);
  color:#945f00
}
html[data-theme="dark"] .download-status.offline{color:#ffd27a}
.download-meta{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin:20px 0
}
.download-meta-item{
  min-width:0;
  padding:14px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface-2)
}
.download-meta-item span{
  display:block;
  margin-bottom:5px;
  color:var(--muted);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.04em
}
.download-meta-item strong{
  display:block;
  min-width:0;
  overflow-wrap:anywhere;
  font-size:13px
}
.download-cta{
  width:100%;
  min-height:56px;
  font-size:16px
}
.download-cta[aria-disabled="true"]{
  opacity:.58;
  pointer-events:none;
  cursor:not-allowed
}
.download-detection-note{
  min-height:22px;
  margin:12px 0 0;
  color:var(--muted);
  font-size:12px;
  line-height:1.55
}
.free-download-note{
  margin-top:20px;
  padding:16px 18px;
  border:1px solid rgba(82,213,155,.30);
  border-radius:16px;
  background:rgba(82,213,155,.09)
}
.free-download-note strong{display:block;margin-bottom:5px}
.free-download-note p{margin:0;color:var(--muted);line-height:1.6}

.download-side{
  display:grid;
  gap:16px
}
.download-info-card h2,
.download-info-card h3{
  margin:0 0 12px;
  letter-spacing:-.02em
}
.download-info-card p{
  margin:0;
  color:var(--muted);
  line-height:1.65
}
.windows-list{display:grid;gap:12px}
.windows-item{
  padding:14px;
  border:1px solid var(--border);
  border-radius:15px;
  background:var(--surface-2)
}
.windows-item-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:7px
}
.windows-item-head strong{font-size:14px}
.platform-status{
  flex:0 0 auto;
  padding:5px 8px;
  border-radius:999px;
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.04em
}
.platform-status.tested{
  background:rgba(82,213,155,.14);
  color:#08704c
}
.platform-status.unverified{
  background:rgba(244,181,71,.13);
  color:#945f00
}
html[data-theme="dark"] .platform-status.tested{color:#73e7b7}
html[data-theme="dark"] .platform-status.unverified{color:#ffd27a}
.requirements{
  margin:0;
  padding-left:20px;
  color:var(--muted)
}
.requirements li{margin:8px 0;line-height:1.55}

@media(max-width:900px){
  .download-layout{grid-template-columns:1fr}
}
@media(max-width:760px){
  .download-teaser{
    grid-template-columns:1fr;
    gap:20px
  }
  .download-teaser .btn{
    width:100%;
    min-width:0
  }
  .download-page-hero{padding:48px 0 28px}
  .download-panel{padding:20px}
  .download-version-row{display:grid;gap:14px}
  .download-meta{grid-template-columns:1fr}
}


/* =========================================================
   V3.11 — NAVIGATION / 1080 HERO / FREE STICKER
   Keep this block at the end of the stylesheet.
   ========================================================= */

:root{
  --nav-button-bg:color-mix(in srgb,var(--surface) 72%,transparent);
  --nav-button-hover:color-mix(in srgb,var(--brand) 13%,var(--surface));
  --nav-button-border:color-mix(in srgb,var(--border) 88%,transparent);
}
html[data-theme="dark"]{
  --nav-button-bg:rgba(21,25,43,.72);
  --nav-button-hover:rgba(85,83,223,.18);
  --nav-button-border:#2b324d;
}

.navbar{
  min-height:78px;
  gap:18px;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:7px;
  margin-left:auto;
  margin-right:24px;
  min-width:0;
}

.nav-links .nav-menu-link{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  min-height:38px;
  padding:0 12px;
  border:1px solid var(--nav-button-border);
  border-radius:12px;
  background:var(--nav-button-bg);
  color:var(--muted);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  text-transform:uppercase;
  font-size:10.5px;
  font-weight:800;
  letter-spacing:.055em;
  white-space:nowrap;
  transition:color .2s ease,background .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}

.nav-links .nav-menu-link > span{
  position:relative;
  z-index:2;
}

.nav-links .nav-menu-link::before{
  content:attr(data-icon);
  position:absolute;
  z-index:1;
  right:5px;
  top:50%;
  transform:translateY(-48%) scale(.82);
  font-family:"Segoe UI Symbol","Segoe UI",sans-serif;
  font-size:30px;
  font-weight:400;
  line-height:1;
  color:var(--brand);
  opacity:0;
  pointer-events:none;
  transition:opacity .2s ease,transform .2s ease;
}

.nav-links .nav-menu-link:hover,
.nav-links .nav-menu-link:focus-visible,
.nav-links .nav-menu-link[aria-current="page"]{
  color:var(--text);
  background:var(--nav-button-hover);
  border-color:color-mix(in srgb,var(--brand) 45%,var(--border));
  box-shadow:0 7px 18px rgba(22,24,52,.08);
  transform:translateY(-1px);
}

.nav-links .nav-menu-link:hover::before,
.nav-links .nav-menu-link:focus-visible::before,
.nav-links .nav-menu-link[aria-current="page"]::before{
  opacity:.16;
  transform:translateY(-48%) scale(1);
}

html[data-theme="dark"] .nav-links .nav-menu-link:hover::before,
html[data-theme="dark"] .nav-links .nav-menu-link:focus-visible::before,
html[data-theme="dark"] .nav-links .nav-menu-link[aria-current="page"]::before{
  opacity:.22;
}

.header-actions{
  flex:0 0 auto;
  gap:9px;
  padding-left:20px;
  border-left:1px solid var(--border);
}

/* Sticker placed over the program vector/mockup. */
.hero-card{
  position:relative;
  overflow:visible;
}
.hero-card::after{
  position:absolute;
  z-index:8;
  top:-28px;
  right:-24px;
  width:104px;
  height:104px;
  display:grid;
  place-items:center;
  padding:12px;
  box-sizing:border-box;
  text-align:center;
  font-size:14px;
  font-weight:900;
  line-height:1;
  letter-spacing:.045em;
  color:#06261b;
  background:linear-gradient(145deg,#7af0bd,#35c88a);
  border:3px solid color-mix(in srgb,#fff 78%,#55d7a0);
  box-shadow:0 15px 30px rgba(0,0,0,.22),0 0 0 5px rgba(82,213,155,.10);
  clip-path:polygon(50% 0%,61% 9%,76% 5%,83% 19%,98% 23%,94% 39%,100% 50%,91% 61%,95% 77%,80% 82%,75% 96%,60% 91%,50% 100%,39% 91%,24% 96%,19% 81%,5% 76%,9% 61%,0% 50%,8% 39%,3% 24%,19% 18%,24% 4%,39% 9%);
  transform:rotate(8deg);
  pointer-events:none;
}
html[lang^="es"] .hero-card::after{content:"¡GRATIS!"}
html:not([lang^="es"]) .hero-card::after{content:"FREE!"}

/* On desktop browsers associated with 1920×1080-class displays, the first
   section fills the available viewport below the header. Taller 2K/4K
   viewports keep the existing layout. */
@media (min-width:1700px) and (min-height:760px) and (max-height:1100px){
  .hero{
    min-height:calc(100svh - 78px);
    padding-top:56px;
    padding-bottom:56px;
    display:flex;
    align-items:center;
  }
  .hero > .container{
    width:min(var(--max),calc(100% - 36px));
  }
}

/* Tablet: same menu, moved to its own horizontal row. */
@media (max-width:1180px){
  .navbar{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto;
    grid-template-areas:
      "brand actions"
      "nav nav";
    gap:10px 14px;
    padding-top:10px;
    padding-bottom:10px;
  }
  .brand{grid-area:brand}
  .header-actions{
    grid-area:actions;
    margin-left:0 !important;
    padding-left:0;
    border-left:0;
  }
  .nav-links{
    grid-area:nav;
    display:flex !important;
    width:100%;
    max-width:100%;
    margin:0;
    gap:7px;
    overflow-x:auto;
    overflow-y:hidden;
    padding:2px 0 5px;
    scrollbar-width:none;
    overscroll-behavior-inline:contain;
    scroll-snap-type:x proximity;
  }
  .nav-links::-webkit-scrollbar{display:none}
  .nav-links .nav-menu-link{
    flex:0 0 auto;
    scroll-snap-align:start;
  }
}

/* Mobile: brand first, compact controls second, navigable menu third. */
@media (max-width:760px){
  .navbar{
    grid-template-columns:minmax(0,1fr);
    grid-template-areas:
      "brand"
      "actions"
      "nav";
    gap:8px;
    padding:12px 0 10px;
  }
  .brand{
    justify-content:center;
    gap:12px;
  }
  .brand img{
    flex:0 0 56px;
    width:56px;
    height:56px;
    border-radius:16px;
  }
  .brand-name{
    max-width:calc(100% - 70px);
    font-size:13px;
  }
  .header-actions{
    width:100%;
    justify-content:center;
    gap:8px;
  }
  .lang-switch{height:34px;padding:2px}
  .lang-switch button{height:28px;min-width:39px;font-size:11px;padding:0 7px}
  .theme-switch{width:62px;height:34px;padding:3px}
  .theme-knob{left:4px;top:4px;width:26px;height:26px}
  html[data-theme="dark"] .theme-knob{transform:translateX(28px)}
  .theme-icons{padding:0 6px}
  .theme-icons span{width:17px;height:17px}.theme-icons svg{width:15px;height:15px}
  .nav-links{
    padding-top:3px;
  }
  .nav-links .nav-menu-link{
    min-height:34px;
    padding:0 10px;
    border-radius:10px;
    font-size:9.5px;
  }
  .nav-links .nav-menu-link::before{
    font-size:24px;
  }
  .hero-card::after{
    top:-18px;
    right:-10px;
    width:78px;
    height:78px;
    font-size:10.5px;
    border-width:2px;
  }
}


/* =========================================================
   V3.12 — DOWNLOAD MENU EMPHASIS
   ========================================================= */

.nav-links .nav-menu-link.nav-download{
  color:#fff;
  background:linear-gradient(135deg,var(--brand),var(--brand-2));
  border-color:transparent;
  box-shadow:0 8px 22px rgba(57,56,196,.22);
}

.nav-links .nav-menu-link.nav-download::before{
  color:#fff;
  opacity:.14;
}

.nav-links .nav-menu-link.nav-download:hover,
.nav-links .nav-menu-link.nav-download:focus-visible,
.nav-links .nav-menu-link.nav-download[aria-current="page"]{
  color:#fff;
  background:linear-gradient(135deg,var(--brand-2),var(--brand));
  border-color:rgba(255,255,255,.20);
  box-shadow:0 10px 26px rgba(57,56,196,.30);
  transform:translateY(-1px);
}

.nav-links .nav-menu-link.nav-download:hover::before,
.nav-links .nav-menu-link.nav-download:focus-visible::before,
.nav-links .nav-menu-link.nav-download[aria-current="page"]::before{
  color:#fff;
  opacity:.24;
}

html[data-theme="light"] .nav-links .nav-menu-link.nav-download{
  box-shadow:0 8px 20px rgba(57,56,196,.18);
}

@media(max-width:760px){
  .nav-links .nav-menu-link.nav-download{
    box-shadow:0 5px 14px rgba(57,56,196,.20);
  }
}


/* =========================================================
   V3.13 — AIRCRAFT POSITION + DARK MODE CONTRAST
   ========================================================= */

/* Keep the nose fully visible while preserving the full-card treatment. */
.aircraft-silhouette{
  object-position:left center !important;
  transform:translateX(3.5%) scale(1.01) !important;
  transform-origin:left center !important;
}

@media(max-width:760px){
  .aircraft-silhouette{
    object-position:left center !important;
    transform:translateX(4%) scale(1.01) !important;
  }
}

/* Improve text contrast without changing the core brand/button color. */
html[data-theme="dark"]{
  --muted:#c2c9d8;
  --hover-text:#dedcff;
}

/* Purple accent text needs a lighter variant on dark surfaces. */
html[data-theme="dark"] .section-kicker,
html[data-theme="dark"] .more-soon{
  color:#8b8aff;
}

/* Secondary copy across the site becomes easier to read in dark mode. */
html[data-theme="dark"] .hero p,
html[data-theme="dark"] .section-head p,
html[data-theme="dark"] .lead,
html[data-theme="dark"] .card p,
html[data-theme="dark"] .step p,
html[data-theme="dark"] .compatibility-panel p,
html[data-theme="dark"] .aircraft-content small,
html[data-theme="dark"] .footer,
html[data-theme="dark"] .legal-shell p,
html[data-theme="dark"] .legal-shell li,
html[data-theme="dark"] .faq-answer p,
html[data-theme="dark"] .download-info-card p,
html[data-theme="dark"] .requirements{
  color:#c2c9d8;
}

/* Keep card headings and important labels clearly separated from secondary text. */
html[data-theme="dark"] .aircraft-content strong,
html[data-theme="dark"] .compatibility-panel h3,
html[data-theme="dark"] .section h2,
html[data-theme="dark"] .card h3,
html[data-theme="dark"] .step h3{
  color:#f7f8fc;
}

/* Slightly stronger border separation in dark mode. */
html[data-theme="dark"] .aircraft-card,
html[data-theme="dark"] .card,
html[data-theme="dark"] .step,
html[data-theme="dark"] .compatibility-panel{
  border-color:#343c5a;
}


/* V3.14 — aircraft cards no longer show redundant compatibility badges */
.aircraft-content .badge,
.aircraft-card .badge{
  display:none !important;
}


/* =========================================================
   V3.15 — INTERACTIVE WEB DEMO
   ========================================================= */
.band-demo{background:linear-gradient(180deg,var(--band-2),color-mix(in srgb,var(--brand) 4%,var(--band-2)));border-top:1px solid var(--border)}
.demo-section-head{margin-bottom:20px}
.demo-notice{display:flex;align-items:flex-start;gap:10px;margin:0 0 18px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--brand) 28%,var(--border));border-radius:14px;background:var(--brand-soft);color:var(--muted);font-size:13px;line-height:1.55}
.demo-notice-dot{flex:0 0 9px;width:9px;height:9px;margin-top:5px;border-radius:50%;background:var(--brand);box-shadow:0 0 0 5px color-mix(in srgb,var(--brand) 14%,transparent)}
.demo-hero-cta{border-color:color-mix(in srgb,var(--brand) 38%,var(--border));color:var(--brand)}
html[data-theme="dark"] .demo-hero-cta{color:#b9b8ff}

.web-demo{position:relative;border:1px solid var(--border);border-radius:28px;background:#0d1121;color:#f7f8fc;box-shadow:0 28px 70px rgba(0,0,0,.22);overflow:hidden}
.demo-appbar{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 18px;border-bottom:1px solid #2a314c;background:#0b0f1e}
.demo-appbrand{display:flex;align-items:center;gap:12px;min-width:0}
.demo-appbrand img{width:42px;height:42px;border-radius:12px}
.demo-appbrand span{font-family:Michroma,sans-serif;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-appstatus{display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.demo-status-pill{display:inline-flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;border:1px solid #2e3654;border-radius:999px;background:#161c31;color:#c9d0df;font-size:11px;font-weight:700}
.demo-status-pill.success{border-color:rgba(82,213,155,.38);color:#7be6bb;background:rgba(31,142,101,.10)}
.demo-status-dot{width:7px;height:7px;border-radius:50%;background:#f4b547}
.demo-workspace{display:grid;grid-template-columns:300px minmax(0,1fr);gap:14px;padding:14px;background:#0b0f1d}
.demo-aircraft-panel,.demo-preview-panel,.demo-subpanel{border:1px solid #2a314c;background:#141a2c;border-radius:20px}
.demo-aircraft-panel{padding:15px;display:flex;flex-direction:column;min-height:690px}
.demo-panel-title{display:grid;gap:4px;margin-bottom:12px}
.demo-panel-title strong,.demo-preview-head strong{font-size:16px;color:#fff}
.demo-panel-title small,.demo-preview-head small{color:#9ea8bd;font-size:11px;line-height:1.45}
.demo-family-list{display:grid;gap:8px}
.demo-family-card{position:relative;display:grid;grid-template-columns:108px minmax(0,1fr);align-items:center;gap:10px;min-height:78px;padding:8px 10px;border:1px solid #2d3451;border-radius:14px;background:#1a2035;color:#fff;cursor:pointer;text-align:left;overflow:hidden;transition:.2s}
.demo-family-card:hover{border-color:#5553df;transform:translateX(2px)}
.demo-family-card.active{border-color:#6b69ff;background:linear-gradient(135deg,#2d2b68,#202747);box-shadow:0 0 0 1px rgba(107,105,255,.22) inset}
.demo-family-card img{width:108px;height:56px;object-fit:contain;filter:grayscale(1) brightness(1.55);opacity:.9}
.demo-family-card span{display:grid;min-width:0}
.demo-family-card small{font-size:10px;color:#c9d0df;font-style:normal}
.demo-family-card strong{font-size:14px;line-height:1.05;margin:2px 0 5px;color:#fff}
.demo-family-card em{font-size:9.5px;color:#9ea8bd;font-style:normal;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.demo-variants{margin-top:auto;padding-top:16px}
.demo-variants>strong{display:block;font-size:11px;margin-bottom:8px;color:#fff}
.demo-variant-list{display:flex;gap:7px;flex-wrap:wrap}
.demo-variant-btn{min-height:32px;padding:0 11px;border:1px solid #2f3654;border-radius:10px;background:#181e32;color:#d7dce7;font-size:10px;cursor:pointer;transition:.2s}
.demo-variant-btn:hover,.demo-variant-btn.active{background:#3938c4;border-color:#5553df;color:#fff}
.demo-mainarea{min-width:0;display:grid;gap:14px}
.demo-preview-panel{padding:14px}
.demo-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:12px}
.demo-preview-head>div:first-child{display:grid;gap:4px}
.demo-preview-controls{display:flex;align-items:center;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.demo-segmented{display:flex;gap:6px}
.demo-segmented button,.demo-wallpaper-list button{border:1px solid #2c3450;background:#191f34;color:#d9deea;border-radius:10px;cursor:pointer;transition:.18s}
.demo-segmented button{height:34px;padding:0 12px;font-size:10px}
.demo-segmented button:hover,.demo-segmented button.active{background:#3938c4;border-color:#5553df;color:#fff}
.demo-safe-label{display:flex;align-items:center;gap:9px;color:#d7dce8;font-size:10px;font-weight:700}
.demo-toggle{position:relative;width:50px;height:28px;padding:3px;border:0;border-radius:999px;background:#252c44;cursor:pointer;transition:.2s}
.demo-toggle span{position:absolute;left:4px;top:4px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .22s cubic-bezier(.2,.8,.2,1)}
.demo-toggle.active{background:#3938c4}.demo-toggle.active span{transform:translateX(22px)}
.demo-preview-stage{min-height:430px;display:grid;place-items:center;border-radius:18px;background:#080c17;overflow:hidden;padding:26px}
.demo-tablet{position:relative;width:min(650px,78%);aspect-ratio:1.54;border:4px solid #313a59;border-radius:28px;background:#10172b;padding:15px;box-shadow:0 24px 50px rgba(0,0,0,.32);transition:width .25s,border-radius .25s}
.demo-tablet[data-family="a350"]{width:min(670px,81%);aspect-ratio:1.38;border-radius:34px}
.demo-tablet[data-family="b737"],.demo-tablet[data-family="b777"]{width:min(680px,82%);aspect-ratio:1.48;border-radius:24px}
.demo-tablet[data-family="fokker"]{width:min(700px,84%);aspect-ratio:1.60;border-radius:22px}
.demo-tablet[data-family="b737"]::after,.demo-tablet[data-family="b777"]::after{content:"";position:absolute;right:-16px;top:44%;width:16px;height:44px;border:2px solid #313a59;border-left:0;border-radius:0 10px 10px 0;background:#121a31}
.demo-tablet-screen{position:relative;width:100%;height:100%;border-radius:17px;overflow:hidden;background:#0d2438}
.demo-wallpaper-art{position:absolute;inset:0;transition:.25s}
.demo-tablet[data-wallpaper="aurora"] .demo-wallpaper-art{background:linear-gradient(10deg,transparent 35%,rgba(16,137,128,.58) 36% 48%,transparent 49%),linear-gradient(-10deg,transparent 37%,rgba(75,73,196,.62) 38% 51%,transparent 52%),linear-gradient(180deg,#15243d,#083d4d)}
.demo-tablet[data-wallpaper="midnight"] .demo-wallpaper-art{background:radial-gradient(circle at 72% 23%,rgba(57,56,196,.56),transparent 24%),radial-gradient(circle at 22% 74%,rgba(12,120,135,.35),transparent 32%),linear-gradient(145deg,#070b18,#101b37 58%,#080b17)}
.demo-tablet[data-wallpaper="minimal"] .demo-wallpaper-art{background:linear-gradient(150deg,#313a4a 0 45%,#4d5870 46% 51%,#222b3c 52%)}
.demo-tablet[data-wallpaper="runway"] .demo-wallpaper-art{background:linear-gradient(90deg,transparent 48%,rgba(255,255,255,.78) 49% 51%,transparent 52%),repeating-linear-gradient(0deg,transparent 0 36px,rgba(255,255,255,.10) 37px 39px),radial-gradient(circle at 50% 84%,rgba(57,56,196,.45),transparent 38%),linear-gradient(#050915,#10182e)}
.demo-interface-layer{position:absolute;inset:0;transition:.2s}
.demo-efb-topbar{position:absolute;left:0;right:0;top:0;height:24px;display:flex;justify-content:space-between;align-items:center;padding:0 12px;background:rgba(10,13,29,.76);font-size:6px;color:#d9deea}
.demo-efb-topbar>span:first-child{width:7px;height:7px;border-radius:50%;background:#25b57b;box-shadow:13px 0 0 #d6d9e0}
.demo-safe-zone{position:absolute;left:8%;right:8%;top:15%;bottom:11%;border:1.5px dashed #4ad7a3;border-radius:15px;opacity:0;transition:.2s}
.demo-tablet.safe-on .demo-safe-zone{opacity:.9}
.demo-icon-grid{position:absolute;inset:16% 10% 12%;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);place-items:center}
.demo-icon-grid i{width:46px;height:46px;border-radius:12px;display:grid;place-items:center;font-style:normal;font-size:15px;color:#fff;background:#1d97dd;box-shadow:0 7px 18px rgba(0,0,0,.18)}
.demo-icon-grid i:nth-child(2){background:#bf9a1f}.demo-icon-grid i:nth-child(3){background:#71bb34}.demo-icon-grid i:nth-child(4){background:#08241e}.demo-icon-grid i:nth-child(6){background:#108d89}.demo-icon-grid i:nth-child(7){grid-column:2;background:#6357d4}
.demo-tablet[data-family="b737"] .demo-icon-grid,.demo-tablet[data-family="b777"] .demo-icon-grid{grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(2,1fr);inset:20% 14% 20%}
.demo-tablet[data-family="b737"] .demo-icon-grid i:nth-child(n+6),.demo-tablet[data-family="b777"] .demo-icon-grid i:nth-child(n+6){display:none}
.demo-tablet[data-family="fokker"] .demo-icon-grid{grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(2,1fr);inset:36% 9% 10%;gap:8px}.demo-tablet[data-family="fokker"] .demo-icon-grid i{width:38px;height:38px}.demo-tablet[data-family="fokker"] .demo-icon-grid i:nth-child(7){grid-column:auto}
.demo-tablet[data-view="background"] .demo-interface-layer{opacity:0;pointer-events:none}
.demo-tablet[data-view="interface"] .demo-wallpaper-art{opacity:.12;filter:grayscale(1)}
.demo-bottom-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(260px,.8fr);gap:14px}
.demo-subpanel{padding:14px}.demo-subpanel h3{font-size:15px;margin:0 0 11px;color:#fff}
.demo-apply-content{display:grid;grid-template-columns:minmax(190px,.85fr) minmax(190px,1.15fr);gap:12px}
.demo-selected-card{display:grid;align-content:start;gap:3px;padding:12px;border-radius:13px;background:#1c2339;border:1px solid #2d3552}
.demo-selected-card small{font-size:9px;color:#c2c9d8}.demo-selected-card strong{font-size:15px;color:#fff;margin:3px 0}.demo-selected-card span{font-size:10px;color:#aab3c6}.demo-selected-card em{margin-top:4px;font-style:normal;color:#6ce0b3;font-size:9.5px}
.demo-wallpaper-column>strong{display:block;margin-bottom:7px;font-size:10px;color:#fff}.demo-wallpaper-list{display:grid;gap:5px}.demo-wallpaper-list button{height:31px;padding:0 10px;text-align:left;font-size:10px}.demo-wallpaper-list button:hover,.demo-wallpaper-list button.active{background:#3938c4;border-color:#5553df;color:#fff}
.demo-form-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.demo-form-row label{display:grid;gap:5px;color:#d6dce7;font-size:9px;font-weight:700}.demo-form-row select{width:100%;height:34px;border:1px solid #2d3551;border-radius:10px;background:#191f34;color:#fff;padding:0 9px;font:inherit;font-size:10px}
.demo-action-row{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}.demo-action-row button{min-height:38px;border:1px solid #303853;border-radius:11px;background:#191f34;color:#fff;font-size:10px;font-weight:800;cursor:pointer}.demo-action-row button:hover{border-color:#5553df}.demo-action-row .demo-primary{background:#3938c4;border-color:#3938c4}
.demo-side-stack{display:grid;gap:14px}.demo-location-box{padding:10px;border:1px solid #2c3450;background:#191f34;border-radius:10px;color:#c9d0de;font-size:9px;overflow-wrap:anywhere}.demo-selectlike{margin-top:8px;min-height:34px;display:flex;align-items:center;padding:0 10px;border:1px solid #2c3450;background:#191f34;border-radius:10px;color:#fff;font-size:10px}.demo-pref-row{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-bottom:1px solid #27304a;color:#c4ccdc;font-size:10px}.demo-pref-row:last-child{border-bottom:0}.demo-pref-row strong{color:#fff;font-size:10px}
.demo-toast{position:absolute;right:18px;bottom:18px;max-width:380px;padding:12px 14px;border:1px solid rgba(82,213,155,.38);border-radius:13px;background:#14251f;color:#8ce9c3;font-size:11px;line-height:1.45;box-shadow:0 14px 35px rgba(0,0,0,.30);opacity:0;transform:translateY(10px);pointer-events:none;transition:.22s;z-index:20}.demo-toast.show{opacity:1;transform:translateY(0)}

@media(max-width:1120px){
  .demo-workspace{grid-template-columns:245px minmax(0,1fr)}
  .demo-family-card{grid-template-columns:82px minmax(0,1fr)}.demo-family-card img{width:82px}
  .demo-preview-controls{align-items:flex-end}.demo-segmented button{padding:0 9px}
  .demo-bottom-grid{grid-template-columns:1fr}.demo-side-stack{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .demo-workspace{grid-template-columns:1fr}
  .demo-aircraft-panel{min-height:0}
  .demo-family-list{display:flex;overflow-x:auto;padding-bottom:8px;scrollbar-width:thin}
  .demo-family-card{flex:0 0 210px}
  .demo-variants{margin-top:12px}
  .demo-preview-stage{min-height:360px}
  .demo-tablet,.demo-tablet[data-family="a350"],.demo-tablet[data-family="b737"],.demo-tablet[data-family="b777"],.demo-tablet[data-family="fokker"]{width:min(620px,88%)}
}
@media(max-width:680px){
  .demo-appbar{align-items:flex-start;flex-direction:column}.demo-appstatus{justify-content:flex-start}
  .demo-appbrand span{font-size:10px}
  .demo-workspace{padding:9px;gap:9px}
  .demo-aircraft-panel,.demo-preview-panel,.demo-subpanel{border-radius:15px}
  .demo-preview-head{display:grid}.demo-preview-controls{justify-content:flex-start;overflow-x:auto;padding-bottom:4px}
  .demo-segmented{flex:0 0 auto}.demo-safe-label{flex:0 0 auto}
  .demo-preview-stage{min-height:285px;padding:12px}
  .demo-tablet,.demo-tablet[data-family="a350"],.demo-tablet[data-family="b737"],.demo-tablet[data-family="b777"],.demo-tablet[data-family="fokker"]{width:96%;padding:9px;border-width:3px;border-radius:20px}
  .demo-tablet-screen{border-radius:12px}.demo-icon-grid i{width:34px;height:34px;font-size:12px;border-radius:9px}
  .demo-apply-content{grid-template-columns:1fr}.demo-form-row,.demo-action-row,.demo-side-stack{grid-template-columns:1fr}
  .demo-toast{left:14px;right:14px;bottom:14px;max-width:none}
}


/* =========================================================
   V3.15.1 — HERO USES THE INTERACTIVE DEMO INSTEAD OF
   THE SEPARATE DEMO SECTION
   ========================================================= */
.hero-live-demo{
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}

.hero-live-demo > .hero-demo{
  width:100%;
}

.hero-live-demo .demo-appbar{
  min-height:58px;
  padding:10px 14px;
}
.hero-live-demo .demo-appbrand img{
  width:32px;
  height:32px;
  border-radius:10px;
}
.hero-live-demo .demo-appbrand span{
  font-size:11px;
}
.hero-live-demo .demo-status-pill{
  min-height:28px;
  padding:0 9px;
  font-size:10px;
}
.hero-live-demo .demo-workspace{
  grid-template-columns:200px minmax(0,1fr);
  gap:10px;
  padding:10px;
}
.hero-live-demo .demo-aircraft-panel,
.hero-live-demo .demo-preview-panel,
.hero-live-demo .demo-subpanel{
  padding:10px;
  border-radius:15px;
}
.hero-live-demo .demo-panel-title strong,
.hero-live-demo .demo-preview-head strong{
  font-size:13px;
}
.hero-live-demo .demo-panel-title small,
.hero-live-demo .demo-preview-head small{
  font-size:9px;
}
.hero-live-demo .demo-family-list{
  gap:8px;
}
.hero-live-demo .demo-family-card{
  grid-template-columns:76px minmax(0,1fr);
  min-height:64px;
  padding:8px 10px;
}
.hero-live-demo .demo-family-card img{
  width:76px;
}
.hero-live-demo .demo-family-card span{
  gap:1px;
}
.hero-live-demo .demo-family-card small{
  font-size:8px;
}
.hero-live-demo .demo-family-card strong{
  font-size:12px;
}
.hero-live-demo .demo-family-card em{
  font-size:8px;
}
.hero-live-demo .demo-variants{
  margin-top:10px;
}
.hero-live-demo .demo-variant-btn{
  min-height:28px;
  padding:0 10px;
  font-size:9px;
}
.hero-live-demo .demo-preview-head{
  margin-bottom:10px;
}
.hero-live-demo .demo-preview-controls{
  gap:8px;
}
.hero-live-demo .demo-segmented{
  gap:5px;
}
.hero-live-demo .demo-segmented button{
  height:30px;
  padding:0 10px;
  font-size:9px;
}
.hero-live-demo .demo-safe-label{
  font-size:9px;
}
.hero-live-demo .demo-toggle{
  width:44px;
  height:24px;
}
.hero-live-demo .demo-toggle span{
  width:16px;
  height:16px;
}
.hero-live-demo .demo-toggle.active span{
  transform:translateX(19px);
}
.hero-live-demo .demo-preview-stage{
  min-height:250px;
  padding:14px;
}
.hero-live-demo .demo-tablet,
.hero-live-demo .demo-tablet[data-family="a350"],
.hero-live-demo .demo-tablet[data-family="b737"],
.hero-live-demo .demo-tablet[data-family="b777"],
.hero-live-demo .demo-tablet[data-family="fokker"]{
  width:min(520px,88%);
}
.hero-live-demo .demo-icon-grid i{
  width:38px;
  height:38px;
  font-size:12px;
  border-radius:10px;
}
.hero-live-demo .demo-efb-topbar{
  height:20px;
  padding:0 10px;
  font-size:5px;
}
.hero-live-demo .demo-safe-zone{
  border-radius:12px;
}
.hero-live-demo .demo-bottom-grid{
  grid-template-columns:minmax(0,1.18fr) minmax(220px,.82fr);
  gap:10px;
}
.hero-live-demo .demo-apply-content{
  grid-template-columns:minmax(150px,.82fr) minmax(160px,1.18fr);
  gap:10px;
}
.hero-live-demo .demo-subpanel h3{
  font-size:13px;
  margin-bottom:8px;
}
.hero-live-demo .demo-selected-card{
  padding:10px;
}
.hero-live-demo .demo-selected-card strong{
  font-size:13px;
}
.hero-live-demo .demo-selected-card small,
.hero-live-demo .demo-selected-card span,
.hero-live-demo .demo-selected-card em,
.hero-live-demo .demo-wallpaper-column > strong,
.hero-live-demo .demo-form-row label,
.hero-live-demo .demo-location-box,
.hero-live-demo .demo-selectlike,
.hero-live-demo .demo-pref-row,
.hero-live-demo .demo-pref-row strong{
  font-size:9px;
}
.hero-live-demo .demo-wallpaper-list button{
  height:28px;
  font-size:9px;
}
.hero-live-demo .demo-form-row{
  gap:6px;
  margin-top:8px;
}
.hero-live-demo .demo-form-row select{
  height:30px;
  font-size:9px;
}
.hero-live-demo .demo-action-row{
  gap:6px;
  margin-top:8px;
}
.hero-live-demo .demo-action-row button{
  min-height:34px;
  font-size:9px;
}
.hero-live-demo .demo-location-box{
  padding:8px;
}
.hero-live-demo .demo-selectlike{
  min-height:30px;
}
.hero-live-demo .demo-pref-row{
  padding:7px 0;
}
.hero-live-demo .demo-toast{
  right:14px;
  bottom:14px;
  max-width:300px;
}

@media(max-width:1180px){
  .hero-live-demo .demo-workspace{
    grid-template-columns:1fr;
  }
  .hero-live-demo .demo-family-list{
    display:flex;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:thin;
  }
  .hero-live-demo .demo-family-card{
    flex:0 0 210px;
  }
  .hero-live-demo .demo-bottom-grid,
  .hero-live-demo .demo-side-stack{
    grid-template-columns:1fr;
  }
}

@media(max-width:760px){
  .hero-live-demo .demo-appbar{
    align-items:flex-start;
    flex-direction:column;
  }
  .hero-live-demo .demo-appstatus{
    justify-content:flex-start;
  }
  .hero-live-demo .demo-workspace{
    padding:9px;
    gap:9px;
  }
  .hero-live-demo .demo-preview-head{
    display:grid;
  }
  .hero-live-demo .demo-preview-controls{
    justify-content:flex-start;
    overflow-x:auto;
    padding-bottom:4px;
  }
  .hero-live-demo .demo-preview-stage{
    min-height:280px;
    padding:12px;
  }
  .hero-live-demo .demo-apply-content,
  .hero-live-demo .demo-form-row,
  .hero-live-demo .demo-action-row,
  .hero-live-demo .demo-side-stack{
    grid-template-columns:1fr;
  }
  .hero-live-demo .demo-tablet,
  .hero-live-demo .demo-tablet[data-family="a350"],
  .hero-live-demo .demo-tablet[data-family="b737"],
  .hero-live-demo .demo-tablet[data-family="b777"],
  .hero-live-demo .demo-tablet[data-family="fokker"]{
    width:96%;
  }
}


/* =========================================================
   V3.15.2 — HERO REBALANCE
   Prioritize the interactive preview and prevent broken blocks
   inside the top section.
   ========================================================= */
@media (min-width: 981px){
  .hero{
    padding:72px 0 60px;
  }

  .hero-grid{
    grid-template-columns:minmax(320px,.78fr) minmax(680px,1.22fr);
    gap:34px;
    align-items:start;
  }

  .hero-grid > .reveal:first-child{
    max-width:600px;
    padding-top:10px;
  }

  .hero h1{
    font-size:clamp(40px,4.8vw,68px);
    line-height:1.02;
    margin:18px 0 18px;
  }

  .hero p{
    font-size:17px;
    line-height:1.62;
  }

  .hero-actions{
    margin-top:24px;
  }

  .hero-live-demo{
    align-self:start;
  }

  .hero-live-demo .demo-appbar{
    min-height:54px;
    padding:9px 12px;
  }

  .hero-live-demo .demo-appbrand img{
    width:28px;
    height:28px;
    border-radius:9px;
  }

  .hero-live-demo .demo-appbrand span{
    font-size:10px;
  }

  .hero-live-demo .demo-appstatus{
    gap:8px;
  }

  .hero-live-demo .demo-status-pill{
    min-height:26px;
    padding:0 8px;
    font-size:9px;
  }

  .hero-live-demo .demo-workspace{
    grid-template-columns:182px minmax(0,1fr);
    gap:8px;
    padding:8px;
  }

  .hero-live-demo .demo-aircraft-panel,
  .hero-live-demo .demo-preview-panel,
  .hero-live-demo .demo-subpanel{
    padding:10px;
    border-radius:14px;
  }

  .hero-live-demo .demo-aircraft-panel{
    min-height:0;
  }

  .hero-live-demo .demo-panel-title{
    gap:3px;
    margin-bottom:8px;
  }

  .hero-live-demo .demo-panel-title strong,
  .hero-live-demo .demo-preview-head strong,
  .hero-live-demo .demo-subpanel h3{
    font-size:12px;
  }

  .hero-live-demo .demo-panel-title small,
  .hero-live-demo .demo-preview-head small{
    font-size:9px;
    line-height:1.35;
  }

  .hero-live-demo .demo-family-list{
    gap:7px;
  }

  .hero-live-demo .demo-family-card{
    grid-template-columns:64px minmax(0,1fr);
    min-height:58px;
    gap:8px;
    padding:7px 8px;
    border-radius:12px;
  }

  .hero-live-demo .demo-family-card img{
    width:64px;
    height:34px;
  }

  .hero-live-demo .demo-family-card small{
    font-size:8px;
  }

  .hero-live-demo .demo-family-card strong{
    font-size:11px;
    margin:1px 0 3px;
  }

  .hero-live-demo .demo-family-card em{
    font-size:8px;
  }

  .hero-live-demo .demo-variants{
    margin-top:10px;
    padding-top:10px;
  }

  .hero-live-demo .demo-variants > strong{
    font-size:10px;
    margin-bottom:6px;
  }

  .hero-live-demo .demo-variant-list{
    gap:5px;
  }

  .hero-live-demo .demo-variant-btn{
    min-height:26px;
    padding:0 8px;
    font-size:8px;
    border-radius:9px;
  }

  .hero-live-demo .demo-mainarea{
    gap:8px;
  }

  .hero-live-demo .demo-preview-head{
    gap:10px;
    margin-bottom:8px;
  }

  .hero-live-demo .demo-preview-controls{
    gap:8px;
  }

  .hero-live-demo .demo-segmented{
    gap:5px;
  }

  .hero-live-demo .demo-segmented button{
    height:28px;
    padding:0 9px;
    font-size:8px;
    border-radius:9px;
  }

  .hero-live-demo .demo-safe-label{
    gap:7px;
    font-size:8px;
  }

  .hero-live-demo .demo-toggle{
    width:42px;
    height:23px;
  }

  .hero-live-demo .demo-toggle span{
    width:15px;
    height:15px;
  }

  .hero-live-demo .demo-toggle.active span{
    transform:translateX(18px);
  }

  .hero-live-demo .demo-preview-stage{
    min-height:248px;
    padding:12px;
    border-radius:14px;
  }

  .hero-live-demo .demo-tablet,
  .hero-live-demo .demo-tablet[data-family="a350"],
  .hero-live-demo .demo-tablet[data-family="b737"],
  .hero-live-demo .demo-tablet[data-family="b777"],
  .hero-live-demo .demo-tablet[data-family="fokker"]{
    width:min(430px,92%);
    padding:11px;
    border-width:3px;
    border-radius:22px;
  }

  .hero-live-demo .demo-tablet[data-family="b737"],
  .hero-live-demo .demo-tablet[data-family="b777"]{
    border-radius:18px;
  }

  .hero-live-demo .demo-tablet[data-family="fokker"]{
    border-radius:18px;
  }

  .hero-live-demo .demo-tablet[data-family="b737"]::after,
  .hero-live-demo .demo-tablet[data-family="b777"]::after{
    right:-13px;
    width:13px;
    height:36px;
  }

  .hero-live-demo .demo-tablet-screen{
    border-radius:13px;
  }

  .hero-live-demo .demo-efb-topbar{
    height:18px;
    padding:0 9px;
    font-size:5px;
  }

  .hero-live-demo .demo-efb-topbar > span:first-child{
    width:6px;
    height:6px;
    box-shadow:11px 0 0 #d6d9e0;
  }

  .hero-live-demo .demo-safe-zone{
    border-radius:11px;
  }

  .hero-live-demo .demo-icon-grid i{
    width:34px;
    height:34px;
    font-size:11px;
    border-radius:10px;
  }

  .hero-live-demo .demo-tablet[data-family="fokker"] .demo-icon-grid i{
    width:28px;
    height:28px;
    font-size:10px;
  }

  .hero-live-demo .demo-bottom-grid{
    grid-template-columns:1fr;
    gap:8px;
  }

  .hero-live-demo .demo-apply-content{
    grid-template-columns:minmax(130px,.78fr) minmax(0,1.22fr);
    gap:8px;
  }

  .hero-live-demo .demo-selected-card{
    padding:9px;
    gap:2px;
    border-radius:11px;
  }

  .hero-live-demo .demo-selected-card small,
  .hero-live-demo .demo-selected-card span,
  .hero-live-demo .demo-selected-card em,
  .hero-live-demo .demo-wallpaper-column > strong,
  .hero-live-demo .demo-form-row label,
  .hero-live-demo .demo-location-box,
  .hero-live-demo .demo-selectlike,
  .hero-live-demo .demo-pref-row,
  .hero-live-demo .demo-pref-row strong{
    font-size:8px;
  }

  .hero-live-demo .demo-selected-card strong{
    font-size:11px;
  }

  .hero-live-demo .demo-wallpaper-list{
    gap:4px;
  }

  .hero-live-demo .demo-wallpaper-list button{
    height:26px;
    padding:0 8px;
    font-size:8px;
    border-radius:8px;
  }

  .hero-live-demo .demo-form-row,
  .hero-live-demo .demo-action-row{
    gap:6px;
    margin-top:8px;
  }

  .hero-live-demo .demo-form-row select{
    height:30px;
    padding:0 8px;
    font-size:8px;
    border-radius:9px;
  }

  .hero-live-demo .demo-action-row button{
    min-height:32px;
    font-size:8px;
    border-radius:9px;
  }

  .hero-live-demo .demo-side-stack{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:8px;
  }

  .hero-live-demo .demo-location-box{
    padding:8px;
    border-radius:9px;
  }

  .hero-live-demo .demo-selectlike{
    margin-top:6px;
    min-height:30px;
    padding:0 9px;
    border-radius:9px;
  }

  .hero-live-demo .demo-pref-row{
    gap:8px;
    padding:7px 0;
  }

  .hero-live-demo .demo-toast{
    right:12px;
    bottom:12px;
    max-width:280px;
    padding:10px 12px;
    font-size:10px;
  }
}

@media (min-width: 981px) and (max-width: 1400px){
  .hero-grid{
    grid-template-columns:minmax(300px,.74fr) minmax(620px,1.26fr);
  }

  .hero h1{
    font-size:clamp(38px,4.2vw,60px);
  }

  .hero p{
    font-size:16px;
  }
}

@media (min-width: 981px) and (max-width: 1180px){
  .hero-live-demo .demo-workspace{
    grid-template-columns:1fr;
  }

  .hero-live-demo .demo-family-list{
    display:flex;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:thin;
  }

  .hero-live-demo .demo-family-card{
    flex:0 0 188px;
  }

  .hero-live-demo .demo-side-stack,
  .hero-live-demo .demo-apply-content,
  .hero-live-demo .demo-form-row,
  .hero-live-demo .demo-action-row{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V3.15.3 — HERO CROP + 1080 VIEWPORT FIT
   - Crop the live preview earlier
   - Fade the bottom into the site background
   - Make the first section fit a 1080p viewport on desktop
   ========================================================= */
.hero-live-demo{
  position:relative;
}

.hero-live-demo .hero-demo{
  position:relative;
  overflow:hidden;
  border-radius:26px;
}

.hero-live-demo .hero-demo::after{
  content:"";
  position:absolute;
  left:-1px;
  right:-1px;
  bottom:-1px;
  height:200px;
  pointer-events:none;
  background:linear-gradient(
    to bottom,
    rgba(0,0,0,0) 0%,
    color-mix(in srgb,var(--band-hero) 14%,transparent) 34%,
    color-mix(in srgb,var(--band-hero) 72%,transparent) 68%,
    var(--band-hero) 100%
  );
  z-index:4;
}

@media (min-width: 981px){
  .hero-live-demo .hero-demo{
    max-height:640px;
  }
}

@media (min-width: 981px) and (min-height: 980px) and (max-height: 1100px){
  .hero{
    min-height:calc(100vh - 79px);
    padding:30px 0 0;
    display:flex;
    align-items:center;
    overflow:hidden;
  }

  .hero-grid{
    align-items:center;
  }

  .hero-grid > .reveal:first-child{
    max-width:560px;
  }

  .hero h1{
    font-size:clamp(40px,4.4vw,62px);
    line-height:1.01;
    margin:16px 0 16px;
  }

  .hero p{
    font-size:16px;
    line-height:1.62;
  }

  .hero-actions{
    margin-top:22px;
  }

  .hero-live-demo .hero-demo{
    max-height:min(63vh,610px);
  }

  .hero-live-demo .hero-demo::after{
    height:220px;
  }
}

@media (min-width: 981px) and (max-height: 900px){
  .hero-live-demo .hero-demo{
    max-height:560px;
  }

  .hero-live-demo .hero-demo::after{
    height:170px;
  }
}



/* =========================================================
   V3.15.5 — HERO FULL FADE OVER COMPLETE MOCKUP
   New stylesheet version to defeat prior browser cache.
   ========================================================= */

@media (min-width: 1200px) {
  .hero-live-demo {
    position: relative;
    min-width: 0;
  }

  .hero-live-demo > .hero-demo {
    position: relative;
    height: 565px;
    max-height: 565px;
    overflow: hidden !important;
    border-radius: 26px;
  }

  /* Fade now sits over the entire mockup, including the outer frame/border,
     so the whole interface disappears into the page background. */
  .hero-live-demo > .hero-demo::after {
    content: "";
    position: absolute;
    z-index: 100;
    pointer-events: none;
    inset: 0;
    border-radius: inherit;
    background:
      linear-gradient(
        to bottom,
        rgba(14,19,38,0) 0%,
        rgba(14,19,38,0) 52%,
        rgba(14,19,38,.10) 60%,
        rgba(14,19,38,.35) 68%,
        rgba(14,19,38,.62) 76%,
        rgba(14,19,38,.84) 87%,
        var(--band-hero) 100%
      );
  }

  html[data-theme="light"] .hero-live-demo > .hero-demo::after {
    background:
      linear-gradient(
        to bottom,
        rgba(245,246,252,0) 0%,
        rgba(245,246,252,0) 52%,
        rgba(245,246,252,.10) 60%,
        rgba(245,246,252,.36) 68%,
        rgba(245,246,252,.64) 77%,
        rgba(245,246,252,.88) 88%,
        var(--band-hero) 100%
      );
  }
}

/* A 1920x1080 display normally yields a browser viewport below 1000px high
   once browser chrome and the Windows taskbar are accounted for. */
@media (min-width: 1400px) and (max-height: 1000px) {
  .hero {
    height: calc(100dvh - 78px);
    min-height: calc(100dvh - 78px);
    max-height: calc(100dvh - 78px);
    padding: 26px 0 0 !important;
    overflow: hidden;
    display: flex;
    align-items: center;
  }

  .hero > .container {
    width: min(var(--max), calc(100% - 48px));
  }

  .hero-grid {
    width: 100%;
    align-items: center;
    grid-template-columns: minmax(330px,.72fr) minmax(700px,1.28fr);
    gap: 34px;
  }

  .hero-grid > .reveal:first-child {
    max-width: 560px;
    padding-top: 0;
  }

  .hero h1 {
    font-size: clamp(42px,4.1vw,62px) !important;
    line-height: 1.01;
    margin: 15px 0 16px !important;
  }

  .hero p {
    font-size: 15.5px !important;
    line-height: 1.58 !important;
  }

  .hero-actions {
    margin-top: 20px !important;
  }

  .hero-live-demo > .hero-demo {
    height: 520px;
    max-height: 520px;
  }

  .hero-live-demo > .hero-demo::after {
    inset: 0;
    background:
      linear-gradient(
        to bottom,
        rgba(14,19,38,0) 0%,
        rgba(14,19,38,0) 49%,
        rgba(14,19,38,.12) 58%,
        rgba(14,19,38,.38) 67%,
        rgba(14,19,38,.66) 76%,
        rgba(14,19,38,.88) 87%,
        var(--band-hero) 100%
      );
  }

  html[data-theme="light"] .hero-live-demo > .hero-demo::after {
    background:
      linear-gradient(
        to bottom,
        rgba(245,246,252,0) 0%,
        rgba(245,246,252,0) 49%,
        rgba(245,246,252,.12) 58%,
        rgba(245,246,252,.40) 67%,
        rgba(245,246,252,.68) 77%,
        rgba(245,246,252,.90) 88%,
        var(--band-hero) 100%
      );
  }
}

/* Keep normal behavior on taller desktop viewports / 2K / 4K. */
@media (min-width: 1400px) and (min-height: 1001px) {
  .hero {
    height: auto;
    min-height: 0;
    max-height: none;
  }
}


/* =========================================================
   V3.15.6 — BOTTOM-ONLY FADE
   The fade is attached to the OUTER hero preview container,
   so it covers the whole UI including its own frame.
   ========================================================= */

@media (min-width: 1200px) {

  /* Disable the previous full-overlay fade on the inner demo. */
  .hero-live-demo > .hero-demo::after{
    content:none !important;
    display:none !important;
  }

  .hero-live-demo{
    position:relative !important;
    overflow:hidden !important;
    isolation:isolate;
  }

  /* Fade only from the lower portion downward. */
  .hero-live-demo::after{
    content:"";
    position:absolute;
    z-index:999;
    pointer-events:none;
    left:-2px;
    right:-2px;
    bottom:-2px;
    height:205px;
    border-radius:0 0 28px 28px;
    background:
      linear-gradient(
        to bottom,
        rgba(14,19,38,0) 0%,
        rgba(14,19,38,.08) 22%,
        rgba(14,19,38,.28) 45%,
        rgba(14,19,38,.62) 70%,
        rgba(14,19,38,.90) 88%,
        var(--band-hero) 100%
      );
  }

  html[data-theme="light"] .hero-live-demo::after{
    background:
      linear-gradient(
        to bottom,
        rgba(245,246,252,0) 0%,
        rgba(245,246,252,.08) 22%,
        rgba(245,246,252,.30) 45%,
        rgba(245,246,252,.66) 70%,
        rgba(245,246,252,.92) 88%,
        var(--band-hero) 100%
      );
  }
}

/* Typical 1080p browser viewport: slightly shorter fade so the preview
   stays readable while still disappearing before the fold. */
@media (min-width: 1400px) and (max-height: 1000px){
  .hero-live-demo::after{
    height:185px;
  }
}


/* =========================================================
   V3.15.7 — CORRECT BOTTOM FADE + RESTORE FREE STICKER
   ::before = bottom fade
   ::after  = FREE / ¡GRATIS! sticker
   ========================================================= */

@media (min-width: 1200px) {

  /* The parent must stay visible because the sticker extends outside it. */
  .hero-live-demo{
    position:relative !important;
    overflow:visible !important;
    isolation:isolate;
  }

  /* The actual mockup is still cropped here. */
  .hero-live-demo > .hero-demo{
    position:relative;
    overflow:hidden !important;
  }

  /* Disable all previous inner fade overlays. */
  .hero-live-demo > .hero-demo::after{
    content:none !important;
    display:none !important;
  }

  /* Bottom fade: above the ENTIRE mockup including its lower outer border. */
  .hero-live-demo::before{
    content:"";
    position:absolute;
    z-index:20;
    pointer-events:none;
    left:-2px;
    right:-2px;
    bottom:-2px;
    height:205px;
    border-radius:0 0 28px 28px;
    background:
      linear-gradient(
        to bottom,
        rgba(14,19,38,0) 0%,
        rgba(14,19,38,.08) 20%,
        rgba(14,19,38,.24) 40%,
        rgba(14,19,38,.52) 62%,
        rgba(14,19,38,.80) 82%,
        var(--band-hero) 100%
      );
  }

  html[data-theme="light"] .hero-live-demo::before{
    background:
      linear-gradient(
        to bottom,
        rgba(245,246,252,0) 0%,
        rgba(245,246,252,.08) 20%,
        rgba(245,246,252,.25) 40%,
        rgba(245,246,252,.55) 62%,
        rgba(245,246,252,.82) 82%,
        var(--band-hero) 100%
      );
  }

  /* Restore the sticker on ::after. */
  .hero-live-demo::after{
    position:absolute;
    z-index:40;
    top:-28px;
    right:-24px;
    bottom:auto;
    left:auto;
    width:104px;
    height:104px;
    display:grid;
    place-items:center;
    padding:12px;
    box-sizing:border-box;
    text-align:center;
    font-size:14px;
    font-weight:900;
    line-height:1;
    letter-spacing:.045em;
    color:#06261b;
    background:linear-gradient(145deg,#7af0bd,#35c88a);
    border:3px solid color-mix(in srgb,#fff 78%,#55d7a0);
    box-shadow:0 15px 30px rgba(0,0,0,.22),0 0 0 5px rgba(82,213,155,.10);
    clip-path:polygon(50% 0%,61% 9%,76% 5%,83% 19%,98% 23%,94% 39%,100% 50%,91% 61%,95% 77%,80% 82%,75% 96%,60% 91%,50% 100%,39% 91%,24% 96%,19% 81%,5% 76%,9% 61%,0% 50%,8% 39%,3% 24%,19% 18%,24% 4%,39% 9%);
    transform:rotate(8deg);
    pointer-events:none;
  }

  html[lang^="es"] .hero-live-demo::after{
    content:"¡GRATIS!" !important;
  }

  html:not([lang^="es"]) .hero-live-demo::after{
    content:"FREE!" !important;
  }
}

@media (min-width: 1400px) and (max-height: 1000px){
  .hero-live-demo::before{
    height:185px;
  }
}


/* =========================================================
   V3.15.8 — LARGER INTERACTIVE HERO PREVIEW
   Gives the live mockup more width/height so wallpaper controls
   remain visible and usable before the bottom fade begins.
   ========================================================= */

@media (min-width: 1200px){

  .hero-grid{
    grid-template-columns:minmax(310px,.66fr) minmax(760px,1.34fr);
    gap:28px;
  }

  .hero-grid > .reveal:first-child{
    max-width:535px;
  }

  .hero h1{
    font-size:clamp(40px,4.25vw,64px);
  }

  .hero p{
    font-size:16px;
    line-height:1.6;
  }

  .hero-live-demo > .hero-demo{
    height:610px;
    max-height:610px;
  }

  /* Let more of the lower controls remain readable/clickable. */
  .hero-live-demo::before{
    height:145px;
  }
}

/* Typical 1080p desktop viewport after browser chrome/taskbar. */
@media (min-width:1400px) and (max-height:1000px){

  .hero{
    padding-top:18px !important;
  }

  .hero-grid{
    grid-template-columns:minmax(300px,.64fr) minmax(780px,1.36fr);
    gap:26px;
  }

  .hero-grid > .reveal:first-child{
    max-width:510px;
  }

  .hero h1{
    font-size:clamp(40px,3.9vw,58px) !important;
    margin:13px 0 14px !important;
  }

  .hero p{
    font-size:15px !important;
    line-height:1.55 !important;
  }

  .hero-actions{
    margin-top:18px !important;
  }

  .hero-live-demo > .hero-demo{
    height:590px;
    max-height:590px;
  }

  .hero-live-demo::before{
    height:125px;
  }
}

/* On taller desktop screens the demo may breathe a little more. */
@media (min-width:1400px) and (min-height:1001px){
  .hero-live-demo > .hero-demo{
    height:640px;
    max-height:640px;
  }

  .hero-live-demo::before{
    height:150px;
  }
}


/* =========================================================
   V3.16 — CONTACT + BUG REPORT
   ========================================================= */
.nav-links .nav-menu-link.nav-contact::before{font-size:26px}

.support-hero{padding:68px 0 38px}
.support-hero h1{font-size:clamp(36px,5vw,58px);line-height:1.06;letter-spacing:-.045em;margin:10px 0 14px}
.support-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:end}
.support-quick{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.support-quick a{display:inline-flex;align-items:center;gap:8px;min-height:42px;padding:0 13px;border:1px solid var(--border);border-radius:13px;background:var(--surface);text-decoration:none;color:var(--text);font-size:12px;font-weight:800;transition:.2s ease}
.support-quick a:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--brand) 50%,var(--border));color:var(--hover-text);background:var(--hover-bg)}

.support-shell{max-width:1120px;margin:0 auto;border:1px solid var(--border);border-radius:26px;background:var(--surface);box-shadow:var(--shadow);overflow:hidden}
.support-tabs{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:10px;background:var(--surface-2);border-bottom:1px solid var(--border)}
.support-tab{min-height:48px;border:1px solid transparent;border-radius:14px;background:transparent;color:var(--muted);font-weight:800;cursor:pointer;transition:.2s ease}
.support-tab:hover,.support-tab:focus-visible{color:var(--text);background:var(--surface);border-color:var(--border)}
.support-tab[aria-selected="true"]{background:var(--brand);color:#fff;border-color:var(--brand);box-shadow:0 8px 18px rgba(57,56,196,.18)}
.support-panel{padding:30px}
.support-panel[hidden]{display:none!important}
.support-panel-head{margin-bottom:22px}.support-panel-head h2{margin:0 0 8px;font-size:26px;letter-spacing:-.025em}.support-panel-head p{margin:0;color:var(--muted);line-height:1.65}

.support-form{display:grid;gap:18px}
.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.form-field{display:grid;gap:7px;min-width:0}.form-field.full{grid-column:1/-1}.form-field label,.field-label{font-size:12px;font-weight:800;color:var(--text)}
.form-field input,.form-field select,.form-field textarea{width:100%;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);color:var(--text);font:inherit;font-size:14px;outline:none;transition:border-color .18s ease,box-shadow .18s ease,background .18s ease}
.form-field input,.form-field select{height:46px;padding:0 13px}.form-field textarea{min-height:132px;padding:12px 13px;resize:vertical;line-height:1.55}.form-field textarea.tall{min-height:160px}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{border-color:color-mix(in srgb,var(--brand) 70%,var(--border));box-shadow:0 0 0 3px var(--brand-soft);background:var(--surface)}
.form-help{font-size:11px;line-height:1.5;color:var(--muted)}
.required-mark{color:var(--brand)}

.file-drop{position:relative;border:1px dashed color-mix(in srgb,var(--brand) 48%,var(--border));border-radius:16px;padding:18px;background:linear-gradient(135deg,var(--brand-soft),transparent 70%)}
.file-drop input[type=file]{position:absolute;width:1px;height:1px;overflow:hidden;opacity:0;pointer-events:none}
.file-drop-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.file-select-btn{min-height:40px;padding:0 14px;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text);font-weight:800;cursor:pointer}.file-select-btn:hover{border-color:var(--brand);color:var(--brand)}
.attachment-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:12px}.attachment-item{position:relative;overflow:hidden;min-height:94px;border:1px solid var(--border);border-radius:13px;background:var(--surface)}.attachment-item img{width:100%;height:92px;object-fit:cover}.attachment-item span{display:block;padding:7px 9px;font-size:10px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.attachment-remove{position:absolute;top:6px;right:6px;width:28px;height:28px;border:0;border-radius:999px;background:rgba(8,12,24,.78);color:#fff;cursor:pointer;font-weight:900}

.form-consent{display:flex;align-items:flex-start;gap:10px;padding:13px 14px;border:1px solid var(--border);border-radius:13px;background:var(--surface-2);color:var(--muted);font-size:12px;line-height:1.55}.form-consent input{width:18px;height:18px;margin-top:1px;accent-color:var(--brand);flex:0 0 auto}.form-consent a{color:var(--brand);font-weight:800}
.form-antispam{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:11px;line-height:1.5}.form-antispam::before{content:"✓";display:grid;place-items:center;flex:0 0 22px;width:22px;height:22px;border-radius:999px;background:rgba(37,181,123,.13);color:var(--success);font-weight:900}
.form-submit-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.support-submit{min-width:180px}.support-submit[disabled]{opacity:.58;cursor:not-allowed;transform:none!important}.form-status{min-height:24px;font-size:12px;font-weight:700;color:var(--muted)}.form-status.success{color:var(--success)}.form-status.error{color:#d84b55}html[data-theme="dark"] .form-status.error{color:#ff8a93}

.honeypot-field{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important}
.footer-support-links{display:flex;flex-wrap:wrap;gap:8px 15px;margin-top:13px}.footer-support-links a{color:var(--muted);font-size:12px;font-weight:700;text-decoration:none}.footer-support-links a:hover{color:var(--hover-text)}

@media(max-width:900px){.support-hero-grid{grid-template-columns:1fr}.support-quick{justify-content:flex-start}.form-grid,.form-grid.three{grid-template-columns:1fr}.attachment-list{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.support-panel{padding:20px 16px}.support-tabs{grid-template-columns:1fr}.attachment-list{grid-template-columns:1fr}.support-quick{display:grid}.support-quick a{width:100%}.form-submit-row{display:grid}.support-submit{width:100%}}


/* V3.17 — Production / SEO / Accessibility */
.skip-link{position:fixed;left:16px;top:12px;z-index:9999;padding:11px 16px;border-radius:10px;background:var(--brand);color:#fff;font-weight:800;text-decoration:none;transform:translateY(-160%);transition:transform .18s ease}
.skip-link:focus{transform:translateY(0)}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:3px solid color-mix(in srgb,var(--brand) 72%,#fff);outline-offset:3px}
.lang-switch button[aria-current="true"]{background:var(--brand);color:#fff}
html[data-theme="dark"] .lang-switch button[aria-current="true"]{color:#fff}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto!important}*,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}.reveal{transform:none!important}}

.page-head-offset{margin-top:28px}


/* V3.17.5 — clearer theme controls */
.theme-switch{
  overflow:visible;
}
html[data-theme="light"] .theme-switch{
  background:color-mix(in srgb,var(--surface) 94%,var(--brand) 6%);
}
html[data-theme="dark"] .theme-switch{
  background:color-mix(in srgb,var(--surface) 92%,#000 8%);
}
.theme-knob{
  box-shadow:0 2px 8px rgba(57,56,196,.28);
}


/* V3.17.6 — LiveryLab footer logo aspect-ratio fix */
.liverylab-wrap{
  width:min(220px,100%);
}
.liverylab-wrap img{
  width:100% !important;
  height:auto !important;
  max-width:100%;
  aspect-ratio:263 / 52;
  object-fit:contain;
  object-position:left center;
}