/* A quiet technical sketch, with one continuous outline and no boxed metrics. */
.aviation-panel { background: #141713; }
.aircraft-sketch { position: absolute; inset: 0; margin: 0; color: #e7e5dd; overflow: hidden; border-radius: inherit; background: radial-gradient(ellipse at 50% 46%,#252a235c,transparent 67%),#141713; }
.sketch-viewport { position: absolute; inset: 80px 22px 96px; }
.sketch-svg { display: block; width: 100%; height: 100%; overflow: visible; fill: none; stroke: #d0d2c6; stroke-width: 1.25; stroke-linecap: round; stroke-linejoin: round; }
.sketch-svg path { vector-effect: non-scaling-stroke; }
.sketch-airframe { --jet-width: .88; --jet-length: .853; transform: translate(300px,500px) scale(var(--jet-width),var(--jet-length)) translate(-300px,-500px); transition: transform 900ms cubic-bezier(.22,.7,.18,1); }
.sketch-wing { fill: #b5bda306; stroke: #a4ad998f; }
.sketch-fuselage { fill: #181c18; stroke: #e0e1d3c9; }
.sketch-engine { stroke: #a4ad998f; }
.sketch-detail { stroke: #909c8066; stroke-width: .8; }
.sketch-seat { opacity: 0; transition: opacity 220ms ease; }
.sketch-seat.is-visible { opacity: 1; }
.sketch-seat path { fill: #d6ddc519; stroke: #d6ddc5; stroke-width: 1; }
.sketch-caption { position: absolute; bottom: 35px; left: 34px; right: 34px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.sketch-eyebrow { display: block; font-size: 10px; color: #91998a; margin-bottom: 8px; }
.sketch-caption strong { font: 400 clamp(15px,1.6vw,23px)/1.2 Sora,Arial,sans-serif; letter-spacing: -.7px; }
.sketch-passengers { color: #aeb6a4; font-size: 11px; white-space: nowrap; padding-bottom: 3px; }
.card-icon { border: 0; }
.cabin-map { border-color: transparent; background: transparent; }

/* A smaller dock; the selected circle is the only strong boundary. */
.nav-cutout { --shoulder: 22px; padding: 0 10px 10px; border-radius: 0 0 30px 30px; }
.icon-nav { gap: 2px; padding: 5px; border: 0; background: #22261f; }
.icon-nav-button { width: 44px; height: 44px; border: 0; }
.icon-nav-button .icon { width: 19px; height: 19px; stroke-width: 1.2; }
.mobile-floating-dock { position: fixed; display: block; z-index: 10; left: 50%; bottom: calc(14px + env(safe-area-inset-bottom)); transform: translateX(-50%); border-radius: 100px; box-shadow: 0 10px 32px #24201f20; }
.mobile-floating-dock .icon-nav { background: #22261ff2; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); }
.mobile-floating-dock .nav-label { display: none; }
.aeren-assistant-open .mobile-floating-dock { visibility: hidden; pointer-events: none; }

@media (max-width:760px) {
  /* Intro, horizontal drawing, then the two independent fader cards, in one view. */
  .aeren-screen { height: calc(var(--aeren-viewport-height,100svh) - 14px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); grid-template-rows: minmax(0,1fr) minmax(140px,calc(var(--aeren-viewport-height,100svh) * .26)) auto; gap: 8px; }
  .aeren-screen:not(.has-sketch-layout) { height: auto; grid-template-rows: auto 200px; }
  .aeren-screen > .hero-bottom { width: 100%; margin: 0; padding: 0; gap: 8px; animation: none; }
  .hero { padding: 12px 0 24px; justify-content: center; }
  .hero-copy { padding-left: 22px; padding-right: 72px; }
  .site-header { height: 54px; margin-inline: 20px; }
  .site-header .brand { font-size: 23px; }
  .site-header .brand-mark { width: 26px; height: 26px; }
  .mobile-ai-toggle { position: absolute; right: -14px; top: 5px; }
  .mobile-ai-toggle .icon { width: 16px; height: 16px; }
  h1 { font-size: clamp(34px,9.5vw,50px); margin-bottom: 18px; }
  .hero-description { font-size: 12px; line-height: 1.65; margin-bottom: 18px; }
  .primary-button { min-width: 156px; min-height: 42px; font-size: 11px; }
  .feature-card { height: 172px; padding: 14px; grid-template-rows: 36px 40px minmax(0,1fr); gap: 5px; border-radius: 24px; }
  .control-heading { font-size: 10px; }
  .control-reading output { font-size: 29px; }
  .control-top > .card-icon, .control-top > .cabin-map { display: none; }
  .result-copy strong { font-size: clamp(12px,3.4vw,18px); }
  .sketch-viewport { inset: 10px 15px 35px; }
  .sketch-caption { left: 20px; right: 20px; bottom: 15px; align-items: center; }
  .sketch-eyebrow { display: none; }
  .sketch-caption strong { font-size: 12px; letter-spacing: -.3px; }
  .sketch-passengers { font-size: 9px; padding: 0; }
  .sketch-svg { stroke-width: 1; }
  .sketch-seat path { stroke-width: .8; }
  .mobile-nav-slot { --notch-radius: 18px; top: 61px; padding: 6px 0 6px 6px; border-radius: 28px 0 0 28px; }
  .mobile-icon-dock .icon-nav { padding: 4px; gap: 0; }
  .mobile-icon-dock .icon-nav-button { width: 40px; height: 40px; }
  .mobile-icon-dock .icon { width: 19px; height: 19px; }
  .mobile-floating-dock .icon-nav-button { width: 40px; height: 40px; }
}
@media (max-width:760px) {
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) { grid-template-rows: minmax(0,1fr) minmax(120px,calc(var(--aeren-viewport-height,100svh) * .24)) auto; gap: 7px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .site-header { height: 46px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .mobile-ai-toggle { top: 1px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .hero { padding-block: 4px 15px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) h1 { font-size: 32px; margin-bottom: 12px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .hero-description { font-size: 11px; margin-bottom: 12px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .primary-button { min-height: 36px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .feature-card { height: 144px; padding: 11px; grid-template-rows: 33px 35px minmax(0,1fr); gap: 3px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .control-reading output { font-size: 25px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .control-result { min-height: 35px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .mobile-nav-slot { top: 51px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .mobile-icon-dock .icon-nav-button { width: 36px; height: 36px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .sketch-viewport { inset: 8px 12px 32px; }
  .aeren-screen:is([data-viewport-size="compact"],[data-viewport-size="short"]) .sketch-caption { bottom: 11px; }
}
@media (max-width:760px) {
  .aeren-screen[data-viewport-size="short"] { grid-template-rows: minmax(0,1fr) 120px auto; gap: 6px; }
  .aeren-screen[data-viewport-size="short"] .site-header { height: 38px; margin-left: 16px; }
  .aeren-screen[data-viewport-size="short"] .site-header .brand { font-size: 20px; }
  .aeren-screen[data-viewport-size="short"] .site-header .brand-mark { width: 23px; height: 23px; }
  .aeren-screen[data-viewport-size="short"] .mobile-ai-toggle { top: -3px; }
  .aeren-screen[data-viewport-size="short"] .hero { padding-block: 1px 9px; }
  .aeren-screen[data-viewport-size="short"] .hero-copy { padding-left: 16px; padding-right: 62px; }
  .aeren-screen[data-viewport-size="short"] h1 { font-size: 28px; margin-bottom: 8px; }
  .aeren-screen[data-viewport-size="short"] .flight-range { height: 30px; }
  .aeren-screen[data-viewport-size="short"] .hero-description { font-size: 10px; line-height: 1.5; margin-bottom: 9px; }
  .aeren-screen[data-viewport-size="short"] .primary-button { min-height: 32px; min-width: 142px; font-size: 10px; }
  .aeren-screen[data-viewport-size="short"] .feature-card { height: 124px; padding: 9px; grid-template-rows: 28px 31px minmax(0,1fr); border-radius: 20px; }
  .aeren-screen[data-viewport-size="short"] .control-heading { font-size: 9px; }
  .aeren-screen[data-viewport-size="short"] .control-reading output { font-size: 23px; }
  .aeren-screen[data-viewport-size="short"] .control-reading > span { font-size: 6px; }
  .aeren-screen[data-viewport-size="short"] .control-scale { font-size: 7px; }
  .aeren-screen[data-viewport-size="short"] .result-kicker { font-size: 7px; margin-bottom: 2px; }
  .aeren-screen[data-viewport-size="short"] .result-copy strong { font-size: 11px; }
  .aeren-screen[data-viewport-size="short"] .circle-arrow { width: 23px; height: 23px; }
  .aeren-screen[data-viewport-size="short"] .mobile-nav-slot { --notch-radius: 10px; top: 37px; padding-block: 3px; padding-left: 4px; }
  .aeren-screen[data-viewport-size="short"] .mobile-icon-dock .icon-nav { padding: 2px; }
  .aeren-screen[data-viewport-size="short"] .mobile-icon-dock .icon-nav-button { width: 30px; height: 30px; }
  .aeren-screen[data-viewport-size="short"] .mobile-icon-dock .icon { width: 17px; height: 17px; }
  .aeren-screen[data-viewport-size="short"] .sketch-caption { left: 16px; right: 16px; bottom: 9px; }
  .aeren-screen[data-viewport-size="short"] .sketch-viewport { inset: 6px 12px 28px; }
  .aeren-screen[data-viewport-size="short"] .sketch-caption strong { font-size: 10px; }
}
@media (prefers-reduced-motion:no-preference) {
  .mobile-floating-dock:not([hidden]) { animation: floating-entrance .25s ease both; }
  @keyframes floating-entrance { from { opacity: 0; transform: translate(-50%,14px); } to { opacity: 1; transform: translate(-50%,0); } }
}
@media (prefers-reduced-motion:reduce) {
  .sketch-airframe, .sketch-seat { transition: none; }
}