/* ====== AirStrategic — tutorial page ======
   Kept in an external file: the server's CSP (style-src 'self') blocks inline <style>. */

html, body { height: auto; min-height: 100%; }

.tut { max-width: 960px; margin: 0 auto; padding: 28px 16px 60px; }
.tut header { text-align: center; margin-bottom: 26px; }
.logo.small { font-size: clamp(2rem, 5vw, 3rem); margin-bottom: 2px; }
.tut header .tagline { margin-bottom: 18px; }
.back-btn { display: inline-block; width: auto; text-decoration: none; }

.tut-card { width: auto; margin: 0 0 18px; }
.tut-card h2 { color: var(--gold); font-size: 1.15rem; }
.tut-card p, .tut-card li { color: var(--text); font-size: .95rem; line-height: 1.55; }
.tut-card ul { margin: 10px 0 0; padding-left: 20px; }
.tut-card li { margin-bottom: 6px; }

/* Embedded video tutorial */
.video-card p { margin: 0 0 14px; }
.video-frame { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  border-radius: 10px; background: #000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .4);
}

.tut-card figure { margin: 14px 0 6px; text-align: center; }
.tut-card figure svg {
  width: 100%;
  height: auto;
  max-height: 68vh;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,.4));
}

/* All narration lines are rendered statically; the demo only highlights the
   active one, so the layout never shifts while reading. */
.status { display: flex; flex-direction: column; gap: 3px; margin-top: 10px; text-align: left; }
.status .cap {
  color: var(--muted); font-size: .92rem; line-height: 1.45; opacity: .55;
  padding-left: 10px; border-left: 3px solid transparent;
  transition: opacity .3s, color .3s, border-color .3s;
}
.status .cap.active { color: var(--gold); opacity: 1; border-left-color: var(--gold); }

.tut-step { font: 700 13px Consolas, monospace; fill: #fff; paint-order: stroke; stroke: #15151d; stroke-width: 3px; }
.tut-phase { font: 700 15px "Segoe UI", system-ui, sans-serif; fill: var(--gold); paint-order: stroke; stroke: #15151d; stroke-width: 4px; letter-spacing: .03em; }
.tut-block { font: 900 26px "Segoe UI", system-ui, sans-serif; fill: var(--danger); paint-order: stroke; stroke: #15151d; stroke-width: 4px; }
.tut-banner { font: italic 900 24px "Segoe UI", system-ui, sans-serif; fill: var(--gold); paint-order: stroke; stroke: #201804; stroke-width: 5px; letter-spacing: .04em; }

.tut footer { text-align: center; margin-top: 30px; }
.tut footer .copyright { color: var(--muted); font-size: .75rem; margin-top: 24px; opacity: .7; }