/* aviation.askjackson.ai. Loaded after the main site's site.css, whose classes
   the pages use first (fonts, colours, nav, hero, demo, proof strip, sections,
   tiers, cards, flow, footer). This file is only what the aviation pages add:
   the "Aviation" label, the timeline band, the video cards, the features
   filter, and the sign-in card. No style attributes on the pages: the content
   policy blocks them, as on askjackson.ai. */

[hidden] { display: none !important; }

/* ---- the nav: the logo, a rule, and the vertical's name ---- */
.nav .brand { display: flex; align-items: center; gap: 18px; }
.nav .brand .rule { height: 28px; width: 1px; background: var(--navy-line); }
.nav .brand .vertical { font-family: var(--mono); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sky); }
.nav .links a[aria-current="page"] { color: #fff; }

/* ---- navy heads on inner pages ---- */
.top .eyebrow { color: var(--cyan-ink); }
.hero.page .copy { gap: 20px; }
.hero.page.split { grid-template-columns: minmax(0, 1fr) 520px; padding-bottom: 80px; }
.hero.page.split .lede { max-width: 560px; }

/* a section head with a link on its right */
.head-row { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.section .head-row .head { margin-bottom: 0; }
.head-row > a { font-weight: 600; white-space: nowrap; }
.section.follow { padding-top: 0; }

/* ---- the timeline band on Home: an SVG drawn the way the product draws it ---- */
.band { display: flex; flex-direction: column; gap: 32px; background: var(--navy); color: #fff; padding-top: 80px; padding-bottom: 80px; }
.band .head-row { margin-bottom: 0; }
.band .head { display: flex; flex-direction: column; gap: 16px; max-width: 640px; }
.band .eyebrow, .band .head-row > a { color: var(--cyan-ink); }
.band h2 { font-size: 40px; line-height: 1.08; color: #fff; }
.band .head p { color: var(--on-navy-soft); }
.band .note { font-size: 13px; color: var(--on-navy-muted); }
.legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.legend li { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--on-navy-soft); }
.legend i { width: 9px; height: 9px; border-radius: 50%; }
.legend .annual, .tl .annual { background: #8FA3BF; fill: #8FA3BF; stroke: #8FA3BF; }
.legend .repair, .tl .repair { background: #FFFFFF; fill: #FFFFFF; stroke: #FFFFFF; }
.legend .ad, .tl .ad { background: var(--sky); fill: var(--sky); stroke: var(--sky); }
.legend .f337, .tl .f337 { background: var(--blue); fill: var(--blue); stroke: var(--blue); }
.legend .life, .tl .life { background: var(--cyan); fill: var(--cyan); stroke: var(--cyan); }
.tl { position: relative; height: 292px; }
.tl svg { display: block; width: 100%; height: 292px; overflow: visible; }
.tl line { stroke-width: 2; stroke-opacity: 0.6; }
.tl line.year { stroke: #16294A; stroke-width: 1; stroke-opacity: 1; }
.tl .base { fill: #2E4568; }
.tl circle { stroke: var(--navy); stroke-width: 2; }
.tl text { font-family: var(--mono); font-size: 12px; fill: var(--on-navy-muted); }
.tl text.yr { text-anchor: middle; }
.tl text.gap { font-family: var(--text); font-size: 11px; }
.tl text.end { font-size: 11px; font-weight: 500; fill: #fff; }
.tl .callout { position: absolute; left: calc(81.2% + 20px); top: 12px; width: 250px; background: #fff; color: var(--ink);
               border-radius: 10px; padding: 12px 14px; box-shadow: 0 14px 36px rgba(0, 0, 0, 0.35); }
.tl .callout .k { font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tl .callout strong { display: block; font-weight: 600; }
.tl .callout span { display: block; font-size: 13px; color: var(--body); }
.tl .callout .open { color: var(--blue); font-weight: 600; margin-top: 6px; }

/* ---- one-minute video cards (Home and Features) ---- */
.videos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.videos.short { gap: 28px 24px; }
.video { display: flex; flex-direction: column; gap: 12px; color: var(--ink); }
a.video:hover { color: var(--ink); }
.video h3 { font-family: var(--text); font-size: 18px; line-height: 1.3; letter-spacing: 0; }
.videos:not(.short) .video h3 { font-size: 19px; }
.video p { color: var(--body); font-size: 15px; }
.thumb { position: relative; aspect-ratio: 16 / 9; background: var(--navy-2); border: 1px solid var(--navy-line); border-radius: 12px;
         display: flex; align-items: center; justify-content: center; }
.thumb .num, .thumb .slot { position: absolute; left: 14px; font-family: var(--mono); font-size: 11px; color: var(--on-navy-muted); }
.thumb .num { top: 12px; letter-spacing: 0.06em; text-transform: uppercase; }
.thumb .slot { bottom: 12px; }
.thumb .play { width: 56px; height: 56px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; }
.thumb .play svg { display: block; }
.thumb .dur { position: absolute; right: 14px; bottom: 12px; font-family: var(--mono); font-size: 12px; color: #fff;
              background: rgba(7, 22, 43, 0.7); padding: 2px 8px; border-radius: 999px; }
.tag { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.tag.logbooks { color: var(--blue); }
.tag.timeline { color: #0B8FB0; }
.tag.due { color: #B35C00; }
.tag.manuals { color: #3E4FB8; }

/* the features filter; aviation.js makes it work, and without it every card shows */
.library { display: flex; flex-direction: column; gap: 32px; padding-top: 56px; padding-bottom: 72px; }
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.filters button { height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; color: var(--ink);
                  font: inherit; font-size: 14px; font-weight: 500; cursor: pointer; }
.filters button[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }

/* ---- card grids: three across, lists inside, and a navy card ---- */
.cards.three { grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.cards .card h3 .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 10px; }
.cards .card h3:has(.dot) { margin-bottom: 12px; }
.cards .card ul { margin: 0; padding-left: 20px; color: var(--body); font-size: 15px; display: flex; flex-direction: column; gap: 6px; }
.dot.logbooks { background: var(--blue); } .dot.timeline { background: #0B8FB0; } .dot.due { background: #B35C00; }
.dot.manuals { background: #3E4FB8; } .dot.data { background: var(--muted); }
.cards .card.navy { background: var(--navy); border-color: var(--navy); color: #fff; border-radius: 14px;
                    display: flex; flex-direction: column; gap: 12px; justify-content: space-between; }
.cards .card.navy p { color: var(--on-navy-soft); }
.cards .card.navy .big { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1.15; }
.cards .card.navy a:not(.button) { color: var(--cyan-ink); font-weight: 600; }
.cards .card.plain { background: #fff; padding: 28px; display: flex; flex-direction: column; gap: 10px; }
.cards .card.plain h3, .cards .card.navy h3 { font-size: 19px; margin: 0; }
.cards .card.navy h3 { color: #fff; }
.cards .card.plain p, .cards .card.navy p { font-size: 17px; }
.cards .card.plain a { font-weight: 600; }
.cards.two { margin: 0; gap: 24px; }
.cards .card .button { align-self: flex-start; padding: 13px 20px; font-size: 15px; }
.divider.first { margin-top: 0; margin-bottom: 32px; }

/* ---- buttons the main site does not have ---- */
.button.light { background: #fff; color: var(--navy); padding: 13px 20px; font-size: 15px; white-space: nowrap; }
.button.light:hover { background: var(--wash); color: var(--navy); }
.button.block { display: block; text-align: center; padding: 14px 18px; border: 1px solid var(--blue); }
.button.outline { background: #fff; color: var(--blue); }
.button.outline:hover { background: var(--wash); color: var(--blue); }

/* ---- Home: the sign-in box beside the access form ---- */
.signin-box { margin-top: 20px; background: var(--navy); color: #fff; border-radius: 14px; padding: 26px 28px;
              display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.signin-box strong { display: block; font-weight: 600; font-size: 18px; }
.signin-box span { display: block; color: var(--on-navy-soft); font-size: 15px; }

/* ---- Manuals: a head beside a list, and what it never does ---- */
.pair { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 64px; padding-bottom: 40px; }
.pair .head { margin-bottom: 0; }
.section.uploads { padding-top: 48px; }
.section.uploads .head { margin-bottom: 32px; }
.section.uploads h2 { font-size: 36px; }
.never { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
.never li { display: flex; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--navy-line); color: var(--on-navy-soft); }
.never li span:first-child { font-family: var(--mono); color: var(--cyan-ink); }

/* ---- Pricing ---- */
.section.plans { padding-top: 64px; padding-bottom: 24px; }
.section.plans .tiers { margin: 0; }
.tier h2 { font-size: 26px; color: var(--navy); }
.tier ul { padding-left: 20px; color: var(--body); display: flex; flex-direction: column; gap: 6px; }
.tier .cost { margin-top: auto; padding-top: 16px; display: flex; align-items: baseline; gap: 6px; }
.tier .cost strong { font-family: var(--display); font-weight: 600; font-size: 36px; color: var(--navy); }
.tier .cost span { color: var(--muted); font-size: 15px; }
.every.two { margin: 24px 0 0; }
.every.two ul { padding-left: 22px; color: var(--body); display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 32px; }
.section.compare { padding-top: 64px; padding-bottom: 24px; }
.section.compare .head { margin-bottom: 20px; }
.section.compare h2 { font-size: 36px; }
.section.compare .grid { margin: 0; }
.section.last { padding-top: 40px; }

/* ---- Sign in ---- */
body.full { min-height: 100vh; display: flex; flex-direction: column; }
body.full .top { flex-grow: 1; display: flex; flex-direction: column; }
.hero.signin { flex-grow: 1; grid-template-columns: minmax(0, 1fr) 480px; padding-top: 48px; padding-bottom: 88px; }
.hero.signin .copy { gap: 24px; max-width: 560px; }
.hero.signin h1 { font-size: 52px; line-height: 1.04; }
.hero.signin .host { font-family: var(--mono); font-size: 17px; color: #fff; }
.checks { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; color: var(--on-navy-soft); font-size: 15px; }
.checks li { display: flex; gap: 10px; }
.checks li > span:first-child { color: var(--cyan); }
.checks a { color: var(--cyan-ink); font-weight: 600; }
.signin-card { background: #fff; color: var(--ink); border-radius: 14px; padding: 32px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35);
               display: flex; flex-direction: column; gap: 16px; }
.signin-card .step { display: flex; flex-direction: column; gap: 20px; }
.signin-card .step.sent { gap: 16px; }
.signin-card .title { display: flex; flex-direction: column; gap: 6px; }
.signin-card .k { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
.signin-card h2 { font-size: 28px; color: var(--navy); }
.signin-card p { color: var(--body); }
.signin-card .google { display: flex; align-items: center; justify-content: center; gap: 12px; height: 52px; border: 1px solid var(--field-line);
                       border-radius: 8px; background: #fff; color: var(--ink); font-weight: 600; font-size: 16px; }
.signin-card .google:hover { background: var(--wash); color: var(--ink); }
.signin-card .divider { margin: 0; gap: 14px; }
.signin-card .field { display: flex; flex-direction: column; gap: 6px; }
.signin-card label { font-size: 14px; font-weight: 600; }
.signin-card input { padding: 12px 14px; border-radius: 8px; border: 1px solid var(--field-line); background: #fff; color: var(--ink);
                     font: inherit; font-size: 15px; width: 100%; }
/* the site name, typed in front of a fixed .askjackson.ai */
.signin-card .site-name { display: flex; align-items: center; border: 1px solid var(--field-line); border-radius: 8px; background: #fff; }
.signin-card .site-name:focus-within { outline: 3px solid var(--cyan); outline-offset: 3px; }
.signin-card .site-name input { border: 0; min-width: 0; flex: 1; font-family: var(--mono); outline: none; }
.signin-card .site-name span { padding-right: 14px; font-family: var(--mono); font-size: 15px; color: var(--muted); }
.signin-card .problem { font-size: 14px; color: #B42318; background: #FEF3F2; border: 1px solid #FECDCA; border-radius: 8px; padding: 10px 12px; }
.signin-card .step > .button { height: 52px; display: flex; align-items: center; justify-content: center; }
.signin-card .hint { font-size: 14px; color: var(--muted); }
.signin-card .mail { width: 48px; height: 48px; border-radius: 50%; background: var(--wash); display: flex; align-items: center; justify-content: center; }
.signin-card .link { align-self: flex-start; background: none; border: 0; padding: 8px 0; color: var(--blue); font: inherit; font-weight: 600; cursor: pointer; }
.signin-card .terms { padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--muted); }

/* ---- phone ---- */
@media (max-width: 900px) {
  .nav { flex-wrap: wrap; }
  .nav .logo img { height: 40px; }
  .nav .brand { gap: 12px; }
  /* site.css hides the text links on a phone; an owner still needs Sign in */
  .nav .links a[href="/signin"] { display: inline; }
  .hero.page.split, .hero.signin { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .hero.signin h1 { font-size: 38px; }
  .head-row { flex-direction: column; align-items: flex-start; gap: 16px; }
  .band { padding-top: 64px; padding-bottom: 64px; }
  .band h2 { font-size: 32px; }
  /* the timeline keeps its drawing and scrolls sideways, as a chart may */
  .tl-scroll { overflow-x: auto; overflow-y: hidden; }
  .tl { min-width: 860px; margin-right: 120px; }   /* room for the callout and the hours */
  .videos, .cards.three, .pair { grid-template-columns: minmax(0, 1fr); }
  .videos { gap: 32px; }
  .pair { gap: 32px; }
  .section.uploads h2, .section.compare h2 { font-size: 30px; }
  .signin-box { flex-direction: column; align-items: flex-start; }
  .every.two ul { grid-template-columns: minmax(0, 1fr); }
  .signin-card { padding: 24px; }
}