/* ==========================================================================
   Air-Plan landing page  /  landing.css
   --------------------------------------------------------------------------
   Direction: "the chart table". The page background is the app's own chart
   underprint (#F2EAD4 from map_v2/config/chart-palette.js), so the live map
   in the hero is the same paper as the page around it. Inks are chart inks:
   controlled-airspace blue for structure, and the magenta line (the plotted
   route) for the one thing to follow, the primary action.

   Motifs, each used for a reason:
   - .lp-tag: an airspace label box with a hatched inner edge, the way
     controlled airspace boundaries are drawn on a VFR chart.
   - The magenta route line joining the day's four times (.lp-leg::before).

   Loaded only by templates/marketing/layout.php; no app CSS is present.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  color-scheme: light;

  /* Paper and ink */
  --lp-parchment: #F2EAD4;   /* chart underprint, matches the map's land */
  --lp-paper: #FBF7EC;       /* chart label halo: cards and panels */
  --lp-ink: #16202B;
  --lp-muted: #5B5A52;
  --lp-rule: rgba(22, 32, 43, 0.14);
  --lp-rule-strong: rgba(22, 32, 43, 0.28);

  /* Chart inks */
  --lp-airspace: #1F56A8;    /* controlled-airspace blue */
  --lp-airspace-soft: rgba(31, 86, 168, 0.12);
  --lp-magenta: #B0217A;     /* the magenta line */
  --lp-magenta-dark: #8E1863;
  --lp-water: #A8C6DA;
  --lp-wood: #C3D3B0;
  --lp-brand: #0866FF;       /* logo blue */

  /* Flight categories: the app's hues, deepened for contrast on paper */
  --lp-vfr: #1E7B34;
  --lp-mvfr: #0063C7;
  --lp-ifr: #C0262F;
  --lp-lifr: #8A1FB8;
  --lp-amber: #B86E00;

  /* Flight-category marker fills, exactly as the app's map draws them
     (map_v2/layers/weather-metar-layer.js): legend and chip dots use these
     so they match the hero map's markers. */
  --lp-cat-vfr: #28a745;
  --lp-cat-mvfr: #0080f0;
  --lp-cat-ifr: #dc3545;
  --lp-cat-lifr: #9722ce;

  /* Type */
  --lp-display: "Space Grotesk", system-ui, sans-serif;
  --lp-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --lp-mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  /* Layout */
  --lp-gutter: clamp(16px, 4vw, 40px);
  /* One content width for every section, so all left and right edges line
     up. Wide enough for the flying day's scaled app screens to stay legible. */
  --lp-max: 1320px;
  --lp-radius: 6px;
  --lp-shadow: 0 1px 0 rgba(22, 32, 43, 0.06), 0 22px 48px -28px rgba(22, 32, 43, 0.45);
}

/* --- Base ----------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  -webkit-text-size-adjust: 100%;
}

body.lp {
  margin: 0;
  background: var(--lp-parchment);
  color: var(--lp-ink);
  font: 400 1.0625rem/1.6 var(--lp-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.lp img,
.lp svg {
  display: block;
  max-width: 100%;
}

.lp a {
  color: var(--lp-airspace);
  text-underline-offset: 0.18em;
}

.lp p {
  margin: 0;
}

/* Component display rules (e.g. .lp-btn's inline-flex) would otherwise beat
   the browser's own [hidden] style, so scripts could not hide them. */
.lp [hidden] {
  display: none !important;
}

.lp :focus-visible {
  outline: 3px solid var(--lp-magenta);
  outline-offset: 3px;
  border-radius: 2px;
}

.lp-wrap {
  width: 100%;
  max-width: calc(var(--lp-max) + 2 * var(--lp-gutter));
  margin-inline: auto;
  padding-inline: var(--lp-gutter);
}

.lp-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Two classes: the page's link colour (.lp a) would otherwise win and put
   magenta on the dark ink */
.lp .lp-skip {
  position: absolute;
  left: 12px;
  top: -60px;
  z-index: 50;
  padding: 10px 14px;
  background: var(--lp-ink);
  color: var(--lp-paper);
  border-radius: 4px;
}

.lp .lp-skip:focus {
  top: 12px;
}

/* --- Two doors: show the copy for the chosen audience -------------------- */
body[data-audience="operator"] [data-for="pilot"],
body[data-audience="pilot"] [data-for="operator"] {
  display: none;
}

/* --- Type ----------------------------------------------------------------- */
.lp-h1,
.lp-h2,
.lp-h3 {
  margin: 0;
  font-family: var(--lp-display);
  color: var(--lp-ink);
  text-wrap: balance;
}

.lp-h1 {
  font-size: clamp(2.5rem, 3.4vw + 1.2rem, 4.35rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.035em;
}

.lp-h2 {
  font-size: clamp(1.85rem, 2vw + 1.1rem, 2.75rem);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.028em;
}

.lp-h3 {
  font-size: clamp(1.35rem, 0.8vw + 1.05rem, 1.7rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.lp-lead {
  max-width: 34em;
  font-size: 1.15rem;
  line-height: 1.55;
  color: var(--lp-ink);
}

.lp-section-lead {
  max-width: 38em;
  margin-top: 14px;
  font-size: 1.1rem;
  color: var(--lp-muted);
}

.lp-fine {
  font-size: 0.875rem;
  color: var(--lp-muted);
}

.lp-kicker {
  font: 600 0.78rem/1 var(--lp-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-magenta);
}

/* --- Airspace label tag --------------------------------------------------- */
/* A boxed chart label whose left edge carries the hatched band that marks
   the inside of a controlled-airspace boundary. */
.lp-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.55em;
  margin: 0;
  padding: 0.5em 0.75em 0.5em 1.25em;
  border: 1.5px solid var(--lp-airspace);
  border-radius: 2px;
  background:
    repeating-linear-gradient(135deg, var(--lp-airspace) 0 1.5px, transparent 1.5px 4.5px) left / 7px 100% no-repeat,
    var(--lp-paper);
  color: var(--lp-airspace);
  font: 600 0.75rem/1 var(--lp-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}

.lp-tag__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-vfr);
  box-shadow: 0 0 0 3px rgba(30, 123, 52, 0.18);
}

/* --- Buttons -------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 4px;
  font: 600 1rem/1 var(--lp-display);
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease, transform 160ms ease;
}

.lp .lp-btn--primary {
  background: var(--lp-magenta);
  color: #fff;
}

.lp .lp-btn--primary:hover {
  background: var(--lp-magenta-dark);
}

.lp .lp-btn--ghost {
  background: transparent;
  border-color: var(--lp-rule-strong);
  color: var(--lp-ink);
}

.lp .lp-btn--ghost:hover {
  border-color: var(--lp-ink);
  background: rgba(255, 255, 255, 0.4);
}

.lp-btn--sm {
  min-height: 38px;
  padding: 0 14px;
  font-size: 0.9rem;
}

.lp-btn:active {
  transform: translateY(1px);
}

.lp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* --- Nav ------------------------------------------------------------------ */
/* A solid dark ink bar over the chart-paper page, with paper-coloured text.
   The magenta primary button and the blue logo keep their own colours. */
.lp-nav {
  --lp-nav-text: rgba(251, 247, 236, 0.86);   /* --lp-paper, softened */
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--lp-ink);
  border-bottom: 1px solid rgba(0, 0, 0, 0.35);
}

/* The page's magenta focus ring is too faint on the dark bar */
.lp .lp-nav :focus-visible {
  outline-color: var(--lp-paper);
}

.lp-nav__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: 64px;
}

.lp .lp-brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--lp-ink);
  font: 700 1.15rem/1 var(--lp-display);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.lp-nav__links {
  display: flex;
  gap: 22px;
  margin-left: 8px;
}

/* The brand sits on the dark bar here (the footer keeps ink on paper) */
.lp .lp-nav .lp-brand {
  color: var(--lp-paper);
}

.lp .lp-nav__links a,
.lp .lp-nav__signin {
  color: var(--lp-nav-text);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
}

.lp .lp-nav__links a:hover,
.lp .lp-nav__signin:hover {
  color: var(--lp-paper);
  text-decoration: underline;
}

.lp-nav__actions {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
}

/* --- Hero ----------------------------------------------------------------- */
.lp-hero {
  position: relative;
  display: flex;
  align-items: stretch;
  min-height: clamp(640px, calc(100vh - 64px), 880px);
  overflow: hidden;
  isolation: isolate;
}

/* Map container. Until MapLibre draws, it shows faint contour lines so the
   space never looks empty, and the canvas fades in over them.
   Two classes on purpose: maplibre-gl.css (loaded later) sets
   .maplibregl-map { position: relative }, which would collapse the
   container to zero height if this rule were a single class. */
.lp-hero .lp-hero__map {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='420' viewBox='0 0 640 420'%3E%3Cg fill='none' stroke='%237A7166' stroke-opacity='.16' stroke-width='1.2'%3E%3Cpath d='M-20 90C80 40 180 130 300 80S520 20 660 70'/%3E%3Cpath d='M-20 130C90 80 190 170 310 122S520 64 660 112'/%3E%3Cpath d='M-20 300C100 260 210 340 340 290S540 240 660 280'/%3E%3Cpath d='M-20 340C110 300 220 380 350 332S550 282 660 322'/%3E%3Cpath d='M420 200c40-34 110-30 128 6s-30 70-82 62-86-34-46-68z'/%3E%3Cpath d='M440 206c26-20 72-18 84 4s-20 44-54 40-56-24-30-44z'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 640px 420px repeat,
    var(--lp-parchment);
}

.lp-hero__map .maplibregl-canvas-container,
.lp-hero__map canvas {
  opacity: 0;
  transition: opacity 900ms ease;
}



.lp-hero__map.is-ready .maplibregl-canvas-container,
.lp-hero__map.is-ready canvas {
  opacity: 1;
}

/* Paper fades in from the left so the copy sits on solid chart paper and the
   map emerges to the right; the bottom fade hands over to the next section.
   The map runs to the window's right edge (full bleed) and has no fade there.
   Both fades share one length and one curve, so they look the same. */
.lp-hero__veil {
  --lp-map-fade: 190px;
  /* Where the left fade starts: just past the copy column, which sits at
     50% - 660px + 540px in the centred 1320px wrap (or ~600px on narrower
     screens), so no map detail ever shows through the text */
  --lp-fade-left: max(calc(50% - 20px), 600px);
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      var(--lp-parchment) 0,
      var(--lp-parchment) var(--lp-fade-left),
      rgba(242, 234, 212, 0.7) calc(var(--lp-fade-left) + var(--lp-map-fade) * 0.37),
      rgba(242, 234, 212, 0) calc(var(--lp-fade-left) + var(--lp-map-fade))),
    linear-gradient(0deg,
      var(--lp-parchment) 0,
      rgba(242, 234, 212, 0.7) calc(var(--lp-map-fade) * 0.37),
      rgba(242, 234, 212, 0) var(--lp-map-fade));
}

.lp-hero__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 540px) minmax(0, 1fr);
  align-items: center;
  gap: 40px;
  padding-block: 56px 48px;
  pointer-events: none;
}

.lp-hero__copy,
.lp-brief {
  pointer-events: auto;
}

.lp-hero__copy {
  display: grid;
  gap: 22px;
  justify-items: start;
}

.lp-hero__copy .lp-fine {
  margin-top: -6px;
}

/* --- Two doors (audience switch) ------------------------------------------ */
.lp-doors {
  display: inline-flex;
  padding: 4px;
  border: 1px solid var(--lp-rule-strong);
  border-radius: 6px;
  background: rgba(251, 247, 236, 0.85);
}

.lp-doors__btn {
  min-height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--lp-muted);
  font: 600 0.92rem/1 var(--lp-display);
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease;
}

.lp-doors__btn:hover {
  color: var(--lp-ink);
}

.lp-doors__btn[aria-pressed="true"] {
  background: var(--lp-ink);
  color: var(--lp-paper);
}

/* --- Briefing card ---------------------------------------------------------- */
.lp-brief {
  align-self: end;
  justify-self: end;
  display: grid;
  gap: 12px;
  width: min(100%, 420px);
  padding: 18px 20px;
  border: 1px solid var(--lp-rule);
  border-radius: var(--lp-radius);
  background: var(--lp-paper);
  box-shadow: var(--lp-shadow);
}

.lp-brief__kicker,
.lp-brief__label {
  font: 600 0.7rem/1 var(--lp-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--lp-muted);
}

.lp-brief__station {
  font: 700 1.15rem/1.2 var(--lp-display);
  letter-spacing: -0.015em;
}

.lp-brief__station small {
  font: 500 0.85rem/1 var(--lp-body);
  color: var(--lp-muted);
  letter-spacing: 0;
  white-space: nowrap;
}

/* The raw METAR, in full (wrapping), set like the app's raw METAR chip */
.lp-brief__raw {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px solid var(--lp-rule);
  border-radius: 6px;
  background: #fff;
  font: 400 0.8rem/1.5 var(--lp-mono);
  color: var(--lp-ink);
  overflow-wrap: anywhere;
}

.lp-brief__raw:empty {
  display: none;
}

.lp-brief__note {
  font-size: 0.95rem;
  line-height: 1.5;
}

.lp-brief__nearby {
  display: grid;
  gap: 8px;
}

.lp-brief__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.lp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  padding: 0 9px;
  border: 1px solid var(--lp-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--lp-ink);
  font: 600 0.74rem/1 var(--lp-mono);
  letter-spacing: 0.04em;
  cursor: pointer;
}

.lp-chip:hover {
  border-color: var(--lp-ink);
}

.lp-chip[aria-pressed="true"] {
  border-color: var(--lp-magenta);
  box-shadow: inset 0 0 0 1px var(--lp-magenta);
}

.lp-chip__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--lp-muted);
}

.lp-brief__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--lp-rule);
}

.lp-brief__status {
  min-width: 0;
  font-size: 0.8rem;
  color: var(--lp-muted);
}

.lp-brief__foot .lp-btn {
  flex-shrink: 0;
  white-space: nowrap;
}

.lp-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 0.76rem;
  color: var(--lp-muted);
}

.lp-legend li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.lp-legend__dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.lp-legend__dot--vfr,
.lp-chip__dot--vfr { background: var(--lp-cat-vfr); }
.lp-legend__dot--mvfr,
.lp-chip__dot--mvfr { background: var(--lp-cat-mvfr); }
.lp-legend__dot--ifr,
.lp-chip__dot--ifr { background: var(--lp-cat-ifr); }
.lp-legend__dot--lifr,
.lp-chip__dot--lifr { background: var(--lp-cat-lifr); }

/* Pulsing ring on the selected airfield (a MapLibre DOM marker), sized to
   sit just outside the app's METAR marker disc */
.lp-pulse {
  position: relative;
  width: 46px;
  height: 46px;
  pointer-events: none;
}

.lp-pulse::before,
.lp-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border: 2px solid var(--lp-magenta);
  border-radius: 50%;
}

.lp-pulse::after {
  animation: lp-pulse 2.4s ease-out infinite;
}

@keyframes lp-pulse {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(2.2); opacity: 0; }
}

.lp-hero__map .maplibregl-ctrl-attrib {
  font-size: 0.68rem;
  background: rgba(251, 247, 236, 0.85);
}

/* The hero map takes no dragging, so it keeps the normal cursor rather than
   MapLibre's grab hand (weather markers still show a pointer: hero-map.js) */
.lp-hero__map .maplibregl-canvas-container.maplibregl-interactive,
.lp-hero__map .maplibregl-canvas-container.maplibregl-interactive:active {
  cursor: default;
}

/* --- Map corner: one row, lined up with the page --------------------------
   The attribution button and the map bar (demo-airspace label + 3D / Flat
   switch, hero-map.js) sit in one row whose right edge is the page content's
   (the header button and the weather card line up with it), wrapping only
   when the attribution is opened on a narrow screen. MapLibre stacks corner
   controls in a column by default. */
.lp-hero__map .maplibregl-ctrl-top-right {
  top: 10px;
  right: max(var(--lp-gutter), calc((100% - var(--lp-max)) / 2));
  display: flex;
  flex-direction: row-reverse;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  max-width: calc(100% - 2 * var(--lp-gutter));
}

.lp-hero__map .maplibregl-ctrl-top-right > .maplibregl-ctrl {
  float: none;
  clear: none;
  margin: 0;
}

/* Opened, the attribution takes its own line (wrapped to a readable width)
   with the bar below it, rather than pushing the bar left under the paper
   fade beside the headline */
.lp-hero__map .maplibregl-ctrl-top-right:has(.maplibregl-compact-show) {
  flex-direction: column;
  align-items: flex-end;
}

.lp-hero__map .maplibregl-ctrl-attrib.maplibregl-compact-show {
  max-width: min(380px, 100%);
}

/* The bar: one bordered chart label, the switch attached at its end */
.lp-hero__map .lp-map-bar {
  display: inline-flex;
  align-items: stretch;
  overflow: hidden;
  border: 1.5px solid var(--lp-airspace);
  border-radius: 2px;
  background: var(--lp-paper);
  box-shadow: 0 1px 2px rgba(31, 42, 51, 0.12);
}

.lp-hero__map .lp-map-bar__tag {
  display: inline-flex;
  align-items: center;
  padding: 0 0.7em 0 1.15em;
  border: 0;
  border-right: 1.5px solid var(--lp-airspace);
  font-size: 0.62rem;
  white-space: nowrap;
}

/* With no demo airspace in view the label hides and the switch stands alone */
.lp-hero__map .lp-map-bar__tag[hidden] {
  display: none;
}

.lp-hero__map .lp-map-mode {
  display: inline-flex;
}

.lp-hero__map .lp-map-mode button {
  min-width: 42px;
  min-height: 26px;
  padding: 0.62em 0.7em;
  border: 0;
  background: transparent;
  color: var(--lp-airspace);
  font: 600 0.66rem/1 var(--lp-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

.lp-hero__map .lp-map-mode button + button {
  border-left: 1.5px solid var(--lp-airspace);
}

.lp-hero__map .lp-map-mode button[aria-pressed="true"] {
  background: var(--lp-airspace);
  color: var(--lp-paper);
}

/* MapLibre lightens control buttons on hover, which hid the chosen one's
   paper-coloured text; keep its fill, and tint the other on hover */
.lp-hero__map .lp-map-mode button[aria-pressed="true"]:hover {
  background: var(--lp-airspace);
}

.lp-hero__map .lp-map-mode button[aria-pressed="false"]:hover {
  background: var(--lp-airspace-soft);
}

/* Small phones: a little tighter so the row fits beside the info button */
@media (max-width: 400px) {
  .lp-hero__map .lp-map-bar__tag {
    padding: 0 0.55em 0 1em;
    font-size: 0.58rem;
    letter-spacing: 0.04em;
  }

  .lp-hero__map .lp-map-mode button {
    min-width: 36px;
    padding: 0.62em 0.55em;
    font-size: 0.62rem;
  }
}

/* --- Sections ------------------------------------------------------------- */
.lp-section-head {
  max-width: 760px;
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* --- A flying day --------------------------------------------------------- */
.lp-day {
  padding-block: clamp(64px, 9vw, 120px) clamp(40px, 6vw, 80px);
}

.lp-day__route {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-leg {
  --lp-time-col: 92px;
  --lp-line-x: 46px;
  --lp-marker-y: 30px;
  position: relative;
  display: grid;
  grid-template-columns: var(--lp-time-col) minmax(0, 1fr);
  gap: 28px clamp(24px, 4vw, 56px);
  align-items: start;
  padding-bottom: clamp(56px, 8vw, 104px);
}

/* The magenta line: each leg draws its own segment down to the next time. */
.lp-leg::before {
  content: "";
  position: absolute;
  left: calc(var(--lp-line-x) - 1.5px);
  top: var(--lp-marker-y);
  bottom: calc(-1 * var(--lp-marker-y));
  width: 3px;
  background: var(--lp-magenta);
  transform-origin: top;
  transition: transform 1100ms cubic-bezier(0.3, 0.7, 0.2, 1);
}

.lp-leg:last-child::before {
  display: none;
}

.lp-js .lp-leg::before {
  transform: scaleY(0);
}

.lp-js .lp-leg.is-in::before {
  transform: scaleY(1);
}

.lp-leg__time {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: calc(var(--lp-marker-y) - 15px);
}

.lp-leg__time time {
  display: inline-block;
  padding: 7px 10px;
  border: 2px solid var(--lp-magenta);
  border-radius: 3px;
  background: var(--lp-paper);
  color: var(--lp-ink);
  font: 700 0.9rem/1 var(--lp-mono);
  letter-spacing: 0.02em;
}

/* Copy in two columns: kicker and heading, then the words and ticks */
.lp-leg__copy {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 14px clamp(24px, 4vw, 56px);
  align-items: start;
  padding-top: 18px;
}

.lp-leg__head,
.lp-leg__body {
  display: grid;
  gap: 14px;
}

.lp-leg__body > p {
  color: var(--lp-ink);
  max-width: 36em;
}

.lp-leg__art {
  grid-column: 2;
}

.lp-ticks {
  display: grid;
  gap: 8px;
  margin: 6px 0 0;
  padding: 0;
  list-style: none;
}

.lp-ticks li {
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
  color: var(--lp-muted);
}

/* Tick = a small waypoint symbol */
.lp-ticks li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 9px;
  height: 9px;
  border: 2px solid var(--lp-airspace);
  border-radius: 50%;
  background: var(--lp-paper);
}

.lp-js .lp-leg__copy,
.lp-js .lp-leg__art {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 700ms ease, transform 700ms ease;
}

.lp-js .lp-leg.is-in .lp-leg__copy,
.lp-js .lp-leg.is-in .lp-leg__art {
  opacity: 1;
  transform: none;
}

.lp-js .lp-leg.is-in .lp-leg__art {
  transition-delay: 120ms;
}

/* --- App windows (real app screens, app-frames.js) ----------------------- */
/* A plain window frame around an iframe onto a showcase frame. Everything
   inside the iframe is the app's own CSS; app-frames.js sets the iframe's
   size and scale, and the viewport's height to match. */
.lp-app {
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--lp-rule-strong);
  border-radius: 10px;
  background: var(--lp-paper);
  box-shadow: var(--lp-shadow);
}

.lp-app__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 38px;
  padding: 6px 14px;
  border-bottom: 1px solid var(--lp-rule);
  background: #E7EBF0;
  color: #3D4A5C;
}

.lp-app__dots {
  display: inline-flex;
  gap: 6px;
}

.lp-app__dots i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #C3CAD4;
}

.lp-app__title {
  min-width: 0;
  overflow: hidden;
  font: 600 0.82rem/1.2 var(--lp-display);
  white-space: nowrap;
  text-overflow: ellipsis;
}

.lp-app__tag {
  margin-left: auto;
  flex: none;
  font: 600 0.68rem/1 var(--lp-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--lp-magenta);
}

/* A shade darker than --lp-vfr: the small capitals need 4.5:1 on the bar */
.lp-app__tag--live {
  color: #19692C;
}

.lp-app__tag--live::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  margin-right: 6px;
  border-radius: 50%;
  background: currentColor;
  vertical-align: 1px;
}

/* The app's own light page background shows while a frame loads */
.lp-app__viewport {
  position: relative;
  overflow: hidden;
  height: 640px;
  background: #EEF2F7;
}

.lp-app__viewport iframe {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  transform-origin: 0 0;
}

/* Long phone layouts are clipped (app-frames.js): fade the cut edge */
.lp-app.is-clipped .lp-app__viewport::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 140px;
  background: linear-gradient(rgba(238, 242, 247, 0), #EEF2F7 85%);
  pointer-events: none;
}

.lp-app__more {
  display: block;
  width: 100%;
  min-height: 44px;
  padding: 10px 14px;
  border: 0;
  border-top: 1px solid var(--lp-rule);
  background: #EEF2F7;
  color: var(--lp-airspace);
  font: 600 0.9rem/1.2 var(--lp-display);
  cursor: pointer;
}

.lp-app__more:hover {
  background: #E4EAF2;
}

.lp-app figcaption {
  padding: 10px 14px 12px;
  border-top: 1px solid var(--lp-rule);
  font-size: 0.8rem;
  color: var(--lp-muted);
}

/* --- The rest of the desk ------------------------------------------------- */
.lp-features {
  padding-block: clamp(56px, 8vw, 104px);
  border-top: 1px solid var(--lp-rule);
}

.lp-features__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.lp-features__head {
  position: sticky;
  top: 96px;
  margin-bottom: 0;
}

.lp-features__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 36px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-features__list li {
  padding: 20px 0 22px;
  border-top: 1px solid var(--lp-rule-strong);
}

.lp-features__title {
  margin: 0 0 6px;
  font: 700 1.08rem/1.25 var(--lp-display);
  letter-spacing: -0.01em;
}

.lp-features__list p {
  font-size: 0.96rem;
  color: var(--lp-muted);
}

/* --- Early access --------------------------------------------------------- */
/* Bounded top and bottom by hatched airspace edges: the one full-width use of
   the motif, marking the page's destination. */
.lp-early {
  position: relative;
  padding-block: clamp(56px, 7vw, 88px);
  background: var(--lp-paper);
}

.lp-early::before,
.lp-early::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 10px;
  background: repeating-linear-gradient(135deg, var(--lp-airspace) 0 1.5px, transparent 1.5px 5px);
  opacity: 0.55;
}

.lp-early::before {
  top: 0;
  border-top: 2px solid var(--lp-airspace);
}

.lp-early::after {
  bottom: 0;
  border-bottom: 2px solid var(--lp-airspace);
}

.lp-early__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px 48px;
}

/* --- FAQ ------------------------------------------------------------------ */
.lp-faq {
  padding-block: clamp(56px, 8vw, 104px);
}

.lp-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: clamp(32px, 5vw, 72px);
  align-items: start;
}

.lp-faq__list {
  border-bottom: 1px solid var(--lp-rule-strong);
}

.lp-faq__item {
  border-top: 1px solid var(--lp-rule-strong);
}

.lp-faq__item summary {
  position: relative;
  padding: 20px 44px 20px 0;
  font: 600 1.08rem/1.35 var(--lp-display);
  letter-spacing: -0.01em;
  list-style: none;
  cursor: pointer;
}

.lp-faq__item summary::-webkit-details-marker {
  display: none;
}

/* Plus that turns into a minus */
.lp-faq__item summary::before,
.lp-faq__item summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 14px;
  height: 2px;
  background: var(--lp-magenta);
  transition: transform 200ms ease;
}

.lp-faq__item summary::after {
  transform: rotate(90deg);
}

.lp-faq__item[open] summary::after {
  transform: rotate(0deg);
}

.lp-faq__item p {
  max-width: 40em;
  padding: 0 0 22px;
  color: var(--lp-muted);
}

/* --- Footer --------------------------------------------------------------- */
.lp-footer {
  padding-block: 48px 40px;
  background: var(--lp-ink);
  color: rgba(251, 247, 236, 0.78);
  font-size: 0.9rem;
}

.lp-footer__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) auto;
  gap: 28px 48px;
}

.lp-footer .lp-brand {
  color: var(--lp-paper);
}

.lp-footer__brand p {
  max-width: 30em;
  margin-top: 12px;
}

.lp-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-content: start;
  gap: 10px 22px;
}

.lp .lp-footer a {
  color: var(--lp-paper);
}

.lp-footer__fine {
  grid-column: 1 / -1;
  display: grid;
  gap: 6px;
  padding-top: 24px;
  border-top: 1px solid rgba(251, 247, 236, 0.16);
  font-size: 0.8rem;
  color: rgba(251, 247, 236, 0.62);
}

.lp-footer__fine strong {
  color: var(--lp-paper);
}

/* --- NOTAM brief (landing/notam-brief.js) --------------------------------- */
/* A preview in the app-window frame, styled by the landing page rather than
   being an app screen (the app's NOTAM pages are still being built). The
   route strip is a strip of chart: paper, the corridor drawn like an
   airspace boundary, the magenta line, a dot per NOTAM. */
.lp-notams {
  --lp-sev-critical: #C62828;
  --lp-sev-warning: #9A5B00;   /* amber, dark enough for small text on white */
  --lp-sev-info: var(--lp-airspace);
}

.lp-notams__body {
  display: grid;
  gap: 18px;
  padding: clamp(16px, 2.4vw, 28px);
  background: #F5F7FA;
}

.lp-notams__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px 24px;
}

.lp-notams__title > p {
  margin: 0;
}

.lp-notams__kicker {
  color: var(--lp-airspace);
  font: 600 0.7rem/1 var(--lp-mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.lp .lp-notams__route {
  margin-top: 8px;
  color: var(--lp-ink);
  font: 700 1.45rem/1.1 var(--lp-display);
  letter-spacing: -0.01em;
}

.lp-notams__route span {
  color: var(--lp-magenta);
}

.lp .lp-notams__meta {
  margin-top: 6px;
  color: var(--lp-muted);
  font-size: 0.86rem;
}

.lp-notams__counts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-notams__count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 11px;
  border: 1px solid var(--lp-rule);
  border-radius: 999px;
  background: #fff;
  color: var(--lp-ink);
  font: 600 0.78rem/1 var(--lp-mono);
}

.lp-notams__count i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
}

.lp-notams__count--critical i { background: var(--lp-sev-critical); }
.lp-notams__count--warning i { background: var(--lp-sev-warning); }
.lp-notams__count--info i { background: var(--lp-sev-info); }

/* Route strip */
.lp-notams__strip {
  position: relative;
  height: 168px;
  border: 1px solid var(--lp-rule);
  border-radius: 8px;
  background: var(--lp-parchment);
}

/* Along-track 0-100% maps onto this box; the corridor fills its height */
.lp-notams__track {
  position: absolute;
  inset: 26px 64px 46px;
}

.lp-notams__track::before {
  content: "";
  position: absolute;
  inset: 8% -6px;
  border-block: 1.5px dashed rgba(31, 86, 168, 0.55);
  background: var(--lp-airspace-soft);
}

.lp-notams__track::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 3px;
  margin-top: -1.5px;
  border-radius: 2px;
  background: var(--lp-magenta);
}

.lp-notams__leg {
  position: absolute;
  top: 50%;
  transform: translate(-50%, 6px);
  color: var(--lp-magenta-dark);
  font: 600 0.66rem/1 var(--lp-mono);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

.lp-notams__pin {
  position: absolute;
  z-index: 2;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.6;
}

.lp-notams__pin--critical { background: var(--lp-sev-critical); }
.lp-notams__pin--warning { background: var(--lp-sev-warning); }
.lp-notams__pin--info { background: var(--lp-sev-info); }

.lp-notams__pin.is-listed {
  z-index: 4;
  width: 22px;
  height: 22px;
  box-shadow: 0 0 0 2px var(--lp-parchment), 0 1px 3px rgba(22, 32, 43, 0.35);
  color: #fff;
  font: 700 0.72rem/22px var(--lp-mono);
  text-align: center;
  opacity: 1;
}

.lp-notams__waypoint {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 16px;
  height: 16px;
  border: 3px solid var(--lp-magenta);
  border-radius: 50%;
  background: var(--lp-paper);
  transform: translate(-50%, -50%);
}

.lp-notams__waypoint b,
.lp-notams__waypoint small {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
}

.lp-notams__waypoint b {
  top: calc(100% + 34px);
  color: var(--lp-ink);
  font: 700 0.76rem/1 var(--lp-mono);
}

.lp-notams__waypoint small {
  top: calc(100% + 50px);
  color: var(--lp-muted);
  font-size: 0.7rem;
}

/* NOTAM cards */
.lp-notams__list {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.lp-notam {
  --lp-sev: var(--lp-sev-info);
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--lp-rule);
  border-left: 4px solid var(--lp-sev);
  border-radius: 8px;
  background: #fff;
}

.lp-notam--critical { --lp-sev: var(--lp-sev-critical); }
.lp-notam--warning { --lp-sev: var(--lp-sev-warning); }

.lp-notam__num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lp-sev);
  color: #fff;
  font: 700 0.72rem/22px var(--lp-mono);
  text-align: center;
}

.lp-notam__main > p {
  margin: 0;
}

.lp .lp-notam__head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 8px;
  color: var(--lp-ink);
  font-size: 0.92rem;
}

.lp-notam__sev {
  padding: 3px 6px;
  border: 1px solid currentColor;
  border-radius: 3px;
  color: var(--lp-sev);
  font: 700 0.64rem/1 var(--lp-mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lp-notam__id {
  margin-left: auto;
  color: var(--lp-muted);
  font: 0.72rem/1 var(--lp-mono);
}

.lp .lp-notam__text {
  margin-top: 7px;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  color: var(--lp-ink);
  font: 0.8rem/1.5 var(--lp-mono);
  white-space: pre-line;
}

.lp .lp-notam__foot {
  margin-top: 7px;
  color: var(--lp-muted);
  font-size: 0.8rem;
}

.lp-notams__note {
  padding: 6px 0;
  color: var(--lp-muted);
  font-size: 0.9rem;
}

@media (max-width: 640px) {
  .lp-notams__strip {
    height: 150px;
  }

  .lp-notams__track {
    inset: 22px 34px 44px;
  }

  /* Airfield names would collide on a phone; the codes stay */
  .lp-notams__waypoint small {
    display: none;
  }

  .lp-notam__id {
    margin-left: 0;
  }
}

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1080px) {
  .lp-leg {
    --lp-time-col: 72px;
    --lp-line-x: 36px;
    grid-template-columns: var(--lp-time-col) minmax(0, 1fr);
  }

  .lp-leg__copy {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-features__inner,
  .lp-faq__inner {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-features__head {
    position: static;
  }
}

/* Hero stacks: copy, then the map as its own block, then the card. The inner
   wrapper dissolves (display: contents) so all three join one grid. */
@media (max-width: 900px) {
  .lp-nav__links {
    display: none;
  }

  .lp-hero {
    display: grid;
    grid-template-areas:
      "copy"
      "map"
      "card";
    min-height: 0;
    overflow: visible;
  }

  .lp-hero__inner {
    display: contents;
  }

  .lp-hero__copy {
    grid-area: copy;
    padding: 40px var(--lp-gutter) 32px;
  }

  .lp-hero .lp-hero__map {
    grid-area: map;
    position: relative;
    inset: auto;
    z-index: 0;
    height: clamp(300px, 70vw, 440px);
    border-block: 1px solid var(--lp-rule);
  }

  .lp-hero__veil {
    display: none;
  }

  .lp-brief {
    grid-area: card;
    justify-self: stretch;
    width: auto;
    margin: -48px var(--lp-gutter) 0;
    position: relative;
    z-index: 2;
  }
}

@media (max-width: 640px) {
  body.lp {
    font-size: 1rem;
  }

  .lp-nav__signin {
    display: none;
  }

  .lp-nav__inner {
    gap: 12px;
  }

  .lp-doors {
    display: flex;
    width: 100%;
  }

  /* Sized by their labels so "Schools, clubs & operators" stays on one line */
  .lp-doors__btn {
    flex: 1 1 auto;
    padding: 0 12px;
    font-size: 0.86rem;
    white-space: nowrap;
  }

  .lp-actions .lp-btn {
    flex: 1 1 100%;
  }

  .lp-leg {
    --lp-time-col: 0px;
    --lp-line-x: 11px;
    grid-template-columns: minmax(0, 1fr);
    gap: 18px;
    padding-left: 30px;
  }

  .lp-leg__time {
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 0;
  }

  .lp-leg__time time {
    padding: 4px 4px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.78rem;
  }

  .lp-leg::before {
    top: 64px;
    bottom: 0;
  }

  .lp-leg__copy {
    padding-top: 0;
  }

  .lp-leg__art {
    grid-column: 1;
  }

  .lp-features__list {
    grid-template-columns: minmax(0, 1fr);
  }

  .lp-footer__inner {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .lp *,
  .lp *::before,
  .lp *::after {
    animation: none !important;
    transition: none !important;
  }

  .lp-js .lp-leg::before {
    transform: none;
  }

  .lp-js .lp-leg__copy,
  .lp-js .lp-leg__art {
    opacity: 1;
    transform: none;
  }
}