/* Self-hosted fonts (replaces the Google Fonts @import). Latin + Latin-Ext subsets. */

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(assets/fonts/bodoni-moda-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Bodoni Moda';
  font-style: normal;
  font-display: swap;
  font-weight: 400 900;
  src: url(assets/fonts/bodoni-moda-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(assets/fonts/manrope-latin-ext-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-display: swap;
  font-weight: 200 800;
  src: url(assets/fonts/manrope-latin-wght-normal.woff2) format('woff2-variations');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff2) format('woff2'), url(assets/fonts/ibm-plex-mono-latin-ext-400-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 400;
  src: url(assets/fonts/ibm-plex-mono-latin-400-normal.woff2) format('woff2'), url(assets/fonts/ibm-plex-mono-latin-400-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff2) format('woff2'), url(assets/fonts/ibm-plex-mono-latin-ext-500-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 500;
  src: url(assets/fonts/ibm-plex-mono-latin-500-normal.woff2) format('woff2'), url(assets/fonts/ibm-plex-mono-latin-500-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(assets/fonts/ibm-plex-mono-latin-ext-600-normal.woff2) format('woff2'), url(assets/fonts/ibm-plex-mono-latin-ext-600-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 600;
  src: url(assets/fonts/ibm-plex-mono-latin-600-normal.woff2) format('woff2'), url(assets/fonts/ibm-plex-mono-latin-600-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/fonts/ibm-plex-mono-latin-ext-700-normal.woff2) format('woff2'), url(assets/fonts/ibm-plex-mono-latin-ext-700-normal.woff) format('woff');
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-display: swap;
  font-weight: 700;
  src: url(assets/fonts/ibm-plex-mono-latin-700-normal.woff2) format('woff2'), url(assets/fonts/ibm-plex-mono-latin-700-normal.woff) format('woff');
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}


/* ===========================================================
   PAP — design tokens (exact values from the brand spec)
=========================================================== */
:root{
  /* Tells the browser this page already has its own (dark) theme, so
     Chrome/Android's auto-dark heuristic — which can re-color individual
     elements like an inline SVG fill without touching the shape it sits on —
     leaves the page alone instead of guessing at colors on top of ours. */
  color-scheme: dark;
  --bg:#1B160E;
  --panel:#221B12;
  --panel-raised:#2E2517;
  --border:#4A3D28;
  --border-bright:#F1E9D2;
  --amber:#C9A24A;      /* accent / brass-gold */
  --amber-dim:#7A6636;  /* accent-dim */
  --green:#5B9468;
  --red:#C0604A;
  --text:#F1E9D2;
  --text-dim:#B9AD90;
  --text-faint:#9C8F72; /* nudged lighter than the spec's #877A5E to clear 4.5:1 at small sizes */
  --on-accent:#1B160E;
  --font-display:'Bodoni Moda',serif;
  --font-body:'Manrope',sans-serif;
  --font-mono:'IBM Plex Mono',monospace;
}

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
html,body{
  background-color:var(--bg);
  color:var(--text);
  font-family:var(--font-body);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overscroll-behavior:none;
}
body{ min-height:100dvh; overflow-x:hidden; }
img{ display:block; max-width:100%; }
button,a{ font:inherit; color:inherit; }
ul{ list-style:none; }
a{ text-decoration:none; }
:focus-visible{ outline:2px solid var(--amber); outline-offset:2px; }

.pap-grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.95 0 0 0 0 0.9 0 0 0 0 0.8 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat:repeat;
  background-size:120px 120px;
}

/* ===========================================================
   Shared: page shell used by index.html + every module page
=========================================================== */
#app{ max-width:960px; margin:0 auto; padding:0 22px 70px; }

.page-nav{
  display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:20px 22px; max-width:960px; margin:0 auto;
  border-bottom:1.5px solid var(--border);
  margin-bottom:30px;
}
.page-nav .pap-word{
  font-family:var(--font-display); font-weight:800; font-size:19px;
  letter-spacing:0.5px;
}
.page-nav .pap-word sup{ font-size:9px; }
.page-nav .pap-word .sub{
  color:var(--text-faint); font-weight:500; text-transform:uppercase;
  letter-spacing:1.5px; font-size:10.5px; margin-left:8px; font-family:var(--font-mono);
}
.pap-back-btn{
  display:inline-flex; align-items:center; gap:8px;
  background:none; border:1px solid var(--border-bright); color:var(--text);
  font-family:var(--font-mono); font-weight:700; font-size:10.5px; letter-spacing:1.5px;
  text-transform:uppercase; padding:9px 15px; border-radius:5px; cursor:pointer;
  transition:background .12s ease, color .12s ease;
}
.pap-back-btn:hover{ background:var(--border-bright); color:var(--bg); }
.pap-back-btn:active{ transform:translateY(1px); }

footer.pap-disclaimer{
  max-width:960px; margin:60px auto 0; padding:22px; border-top:1.5px solid var(--border);
  font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
  line-height:1.7; letter-spacing:0.3px;
}

/* ===========================================================
   HOME — hero
=========================================================== */
.pap-home-menu-btn{
  position:fixed; top:20px; left:20px; z-index:1200;
  display:inline-flex; align-items:center; gap:9px;
  background:var(--bg); border:1.5px solid var(--border-bright); color:var(--text);
  font-family:var(--font-mono); font-weight:700; font-size:11px; letter-spacing:2px;
  text-transform:uppercase; padding:11px 17px; border-radius:4px; cursor:pointer;
  transition:background .15s ease, color .15s ease, opacity .2s ease, transform .12s ease;
}
.pap-home-menu-btn:hover{ background:var(--border-bright); color:var(--bg); }
.pap-home-menu-btn:active{ transform:translateY(1px); }
.pap-home-menu-btn.locked{ opacity:0.55; cursor:progress; }
.pap-home-menu-btn.locked:hover{ background:var(--bg); color:var(--text); }
.pap-home-menu-btn .icon{ font-size:14px; line-height:1; }
.pap-home-menu-btn .pap-chip-word{ font-family:var(--font-display); font-weight:800; font-size:13px; letter-spacing:0.3px; }
.pap-home-menu-btn .pap-chip-div{ color:var(--border-bright); opacity:0.5; }

.pap-hero{
  position:fixed; top:0; left:0; right:0; z-index:10;
  height:100vh; min-height:560px;
  display:flex; flex-direction:column;
  overflow:hidden;
  background-color:#000;
}
.pap-hero-stage{
  position:absolute; inset:0;
  perspective:1400px;
}
.pap-hero-photo{
  position:absolute; inset:-2% -2%; /* slight overscan hides any sub-pixel edge during the scale transform */
  background-position:center center;
  background-repeat:no-repeat;
  background-size:cover; /* the source photos have an outpainted, extended studio backdrop either side of him, so cover fills the hero edge-to-edge without cropping into him on ordinary desktop/tablet aspect ratios */
  background-color:var(--bg);
  transition:opacity .05s linear;
  will-change:opacity, transform;
}
.pap-hero-photo.base{ z-index:1; opacity:1; }
.pap-hero-photo.top{ z-index:2; }
@media (max-width: 560px){
  /* narrow mobile portrait viewports: cover would have to crop past the extended backdrop and into him — switch to contain so he's never cut off, accepting letterbox bars (filled with the matching dark bg) on this one breakpoint range only */
  .pap-hero-photo{ background-size:contain; }
}

.pap-hero-vignette{
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%, rgba(0,0,0,0) 40%, rgba(0,0,0,0.55) 100%);
}
.pap-hero-fade{
  position:absolute; left:0; right:0; bottom:0; height:42%; z-index:4; pointer-events:none;
  background:linear-gradient(180deg, rgba(27,22,14,0) 0%, rgba(27,22,14,0.55) 55%, var(--bg) 100%);
}

.pap-hero-topbar{
  position:relative; z-index:10;
  display:flex; align-items:flex-start; justify-content:space-between;
  padding:22px 26px; gap:20px;
}
.pap-hero-topbar .pap-word{
  font-family:var(--font-display); font-weight:800; font-size:22px; color:var(--text);
  letter-spacing:0.4px;
}
.pap-hero-topbar .pap-eyebrow{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:2.5px; text-transform:uppercase;
  color:var(--text-dim); text-align:right; max-width:230px; line-height:1.6;
}

.pap-hero-footer{
  position:relative; z-index:10;
  margin-top:auto; padding:0 26px 8vh;
  text-align:center;
}
.pap-hero-eyebrow{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:3px;
  text-transform:uppercase; color:var(--amber); margin-bottom:14px;
}
.pap-hero-footer h1{
  font-family:var(--font-display); font-weight:800; font-size:clamp(34px, 6vw, 58px);
  letter-spacing:-0.5px; line-height:1.05; color:var(--text);
}
.pap-hero-sub{
  margin-top:16px; font-family:var(--font-body); font-size:14.5px; color:var(--text-dim);
  max-width:480px; margin-left:auto; margin-right:auto; line-height:1.6;
}
.pap-scroll-hint{
  margin-top:22px; font-family:var(--font-mono); font-size:9.5px; letter-spacing:2.5px;
  text-transform:uppercase; color:var(--text-faint);
  display:inline-flex; align-items:center; gap:8px;
}
.pap-scroll-hint .chev{
  display:inline-block; animation:pap-bob 1.8s ease-in-out infinite;
}
@keyframes pap-bob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(5px); } }

.pap-hero-spacer{ height:180vh; pointer-events:none; }

/* ===========================================================
   Aircraft scroll-scrub section (fixed, sits above the pilot hero)
   Blend-mode invariant: every difference-blended element below is a
   DIRECT CHILD OF <body> — never nested in a wrapper — because
   WebKit silently drops mix-blend-mode on a blended element trapped
   inside an ancestor with overflow:hidden or will-change. The video
   frame itself is never blended, by design, same as the card stack.
=========================================================== */
.pap-air-topbar{
  position:fixed; top:0; left:0; right:0; z-index:150;
  display:flex; align-items:flex-start; flex-wrap:wrap;
  gap:20px; padding:22px 26px;
  color:#fff; mix-blend-mode:difference;
  pointer-events:none;
  opacity:0; /* rested state — this whole section is scrolled into, JS fades it in */
}
.pap-air-topbar-spacer{ width:150px; flex-shrink:0; } /* clears the fixed PAP|MENU chip pinned in this same corner */
.pap-air-tagline{
  font-family:var(--font-mono); font-size:10px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase;
  max-width:260px; line-height:1.6; flex-shrink:0;
}
.pap-air-nav{ text-align:right; flex-shrink:0; margin-left:auto; }
.pap-air-nav ul{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; }
.pap-air-nav li{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:2px; text-transform:uppercase;
}
.air-nav-primary{ position:relative; display:inline-block; }
.air-nav-primary .air-nav-a{ display:block; }
.air-nav-primary .air-nav-b{ position:absolute; inset:0; opacity:0; }

.pap-air-title{
  position:fixed; left:26px; right:26px; z-index:140;
  bottom:calc(30vh + 22px);
  color:#fff; mix-blend-mode:difference; pointer-events:none;
  font-family:var(--font-display); font-weight:600; font-size:clamp(26px,4.4vw,44px); line-height:1.08; letter-spacing:-0.5px;
  opacity:0;
}
.pap-air-title .italic{ font-style:italic; font-weight:500; }

.pap-air-hero{
  position:fixed; inset:0; z-index:110;
  /* Layout (position + size) NEVER changes — always exactly a full 100vh/100vw
     box. The "grows from a 30vh inset" effect is done with transform:translateY
     only, a GPU-compositor-only property that never triggers reflow. Animating
     margin-top instead (the previous approach) forces a layout recalculation on
     every single scroll frame for a box containing a hardware-decoded <video>,
     which desynced the painted layer from the computed layout in real Chrome
     even though getComputedStyle always reported the "correct" resolved values —
     transform sidesteps that whole class of bug categorically. */
  transform:translateY(30vh); /* CSS rested state — JS lerps this to 0 as the frame grows */
  overflow:hidden; background-color:#000;
  opacity:0;
}
.pap-air-frame{ position:absolute; inset:0; }
.pap-air-video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

.pap-air-footer{
  position:fixed; right:26px; bottom:26px; z-index:120; max-width:340px;
  color:#fff; mix-blend-mode:difference; text-align:right; pointer-events:none;
  opacity:0;
}
.pap-air-cta-copy{
  font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; line-height:1.65;
}

.pap-air-cardstack{
  position:fixed; left:26px; bottom:26px; z-index:121;
  width:min(76vw, 440px);
  opacity:0;
}
.pap-air-card{
  position:absolute; left:0; bottom:0; right:0;
  display:flex; align-items:stretch; gap:16px;
}
.pap-air-card-thumb{
  position:relative; flex-shrink:0; align-self:stretch;
  width:calc(6.2rem * var(--air-card-scale,1)); height:calc(6.2rem * var(--air-card-scale,1));
  max-width:180px; max-height:180px; /* defensive cap — never lets the thumb runaway-size even if the scale variable misbehaves */
  background:var(--panel); border:2px solid var(--border); border-radius:8px;
  display:flex; align-items:center; justify-content:center;
}
.pap-air-card-thumb svg{ width:54% !important; height:54% !important; max-width:64px; max-height:64px; }
.pap-air-card-info{ display:flex; flex-direction:column; min-width:0; color:var(--text); }
.pap-air-card-tag{
  font-family:var(--font-mono); font-size:9.5px; color:var(--amber); letter-spacing:1.8px; text-transform:uppercase; margin-bottom:6px;
}
.pap-air-card-info h3{ font-family:var(--font-display); font-size:19px; font-weight:700; margin-bottom:8px; line-height:1.15; }
.pap-air-card-desc{
  font-family:var(--font-body); font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-top:auto;
}

.pap-air-plus{
  position:fixed; left:0; bottom:26px; z-index:125;
  width:3.2rem; height:3.2rem; border-radius:50%; border:none;
  background:#fff; color:#fff; mix-blend-mode:difference;
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; cursor:pointer; opacity:0; padding:0;
  /* positioned via transform:translateX (set in JS), not left, so tracking the
     active card's edge every scroll frame never triggers a layout reflow */
}
.pap-air-plus-label{ color:#fff; mix-blend-mode:difference; padding-bottom:2px; }

.pap-air-spacer{ height:760vh; pointer-events:none; }

@media(max-width:640px){
  .pap-air-tagline{ display:none; } /* keeps the mobile topbar from colliding with the nav list */
  .pap-air-cardstack{ width:min(84vw, 400px); }
}

/* ===========================================================
   Explainer ("why this module")
=========================================================== */
.pap-section-head{ max-width:640px; margin:0 auto 30px; text-align:center; padding:0 10px; }
.pap-section-eyebrow{
  display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:3px;
  text-transform:uppercase; color:var(--amber); margin-bottom:10px;
}
.pap-section-head h2{
  font-family:var(--font-display); font-size:clamp(24px,3.4vw,32px); font-weight:800; color:var(--text);
  margin-bottom:12px;
}
.pap-section-head p{ font-family:var(--font-body); font-size:14px; color:var(--text-dim); line-height:1.65; }

.test-info-list{
  display:flex; flex-direction:column; gap:1.5px;
  background:var(--border); border:1.5px solid var(--border); border-radius:10px; overflow:hidden;
  margin-bottom:44px;
}
.test-info-row{ background:var(--panel); display:flex; gap:18px; padding:22px 24px; }
.test-info-num{
  font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--amber-dim);
  flex-shrink:0; min-width:38px;
}
.test-info-copy h3{ font-family:var(--font-display); font-size:19px; font-weight:700; color:var(--text); margin-bottom:9px; }
.test-info-copy p{ font-family:var(--font-body); font-size:13px; line-height:1.55; color:var(--text-dim); margin-bottom:6px; }
.test-info-copy p:last-child{ margin-bottom:0; }
.ti-label{
  font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--text-faint); margin-right:6px;
}
@media(max-width:560px){ .test-info-row{ flex-direction:column; gap:8px; } }

/* ===========================================================
   Module grid + log panel (used inside the menu sheet)
=========================================================== */
.module-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5px;
  background:var(--border); border:1.5px solid var(--border); border-radius:10px; overflow:hidden;
  margin-bottom:36px;
}
@media(max-width:640px){ .module-grid{ grid-template-columns:1fr; } }
.module-card{
  background:var(--panel); border:none; padding:22px 24px; cursor:pointer; text-align:left;
  transition:background .18s ease, transform .18s ease; position:relative; display:block; width:100%;
  color:var(--text);
}
.module-card:hover{ background:var(--panel-raised); transform:translateY(-2px); }
@media (hover:none){ .module-card:hover{ background:var(--panel); transform:none; } }
.module-card:active{ transform:translateY(0); }
.mod-tag{
  font-family:var(--font-mono); font-size:9.5px; color:var(--amber); border:1px solid var(--amber-dim);
  letter-spacing:1.8px; text-transform:uppercase; display:inline-block; padding:4px 9px;
  border-radius:3px; margin-bottom:12px; font-weight:600;
}
.module-card h3{
  font-family:var(--font-display); font-size:19px; font-weight:700; letter-spacing:-0.2px; margin-bottom:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.module-card p{
  font-size:12.5px; color:var(--text-dim); line-height:1.5; margin-bottom:13px; min-height:38px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.module-card .stats{
  display:flex; gap:14px; font-family:var(--font-mono); font-size:10px; color:var(--text-faint);
  border-top:1px solid var(--border); padding-top:10px; text-transform:uppercase; letter-spacing:0.5px;
}
.module-card .stats b{ color:var(--text); font-weight:600; }
.diff-row{ display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; gap:8px; }
.diff-label{ font-family:var(--font-mono); font-size:9px; color:var(--text-faint); letter-spacing:1.5px; text-transform:uppercase; }
.diff-btns{ display:flex; gap:5px; }
.diff-btn{
  width:24px; height:24px; background:var(--panel-raised); border:1px solid var(--border); color:var(--text-dim);
  font-family:var(--font-mono); font-size:11px; border-radius:4px; cursor:pointer; transition:border-color .12s ease, color .12s ease;
}
.diff-btn:hover{ border-color:var(--amber); color:var(--amber); }
.diff-btn.picked{ background:var(--amber); border-color:var(--amber); color:var(--on-accent); font-weight:700; }

.log-panel{ background:var(--panel); border:1.5px solid var(--border); border-radius:10px; padding:18px 22px; }
.log-panel h4{ font-family:var(--font-mono); font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--text-faint); margin-bottom:11px; }
.log-row{
  display:grid; grid-template-columns:1fr auto auto; gap:12px; align-items:center;
  font-family:var(--font-mono); font-size:12px; padding:7px 0; border-bottom:1px solid var(--border); color:var(--text-dim);
}
.log-row:last-child{ border-bottom:none; }
.log-row .mod{ color:var(--text); font-weight:600; }
.log-diff{ color:var(--text-faint); font-weight:400; margin-left:4px; }
.log-pct{ font-weight:700; text-align:right; }
.log-pct.green{ color:var(--green); }
.log-pct.amber{ color:var(--amber); }
.log-pct.red{ color:var(--red); }
.log-date{ color:var(--text-faint); text-align:right; }
.log-empty{ color:var(--text-faint); font-size:12px; font-family:var(--font-mono); }

/* ===========================================================
   Menu overlay sheet
=========================================================== */
#pap-menu-sheet{
  position:fixed; left:0; right:0; bottom:0; top:14vh; z-index:1100;
  overflow-y:auto; background-color:var(--panel);
  border-top:1.5px solid var(--border-bright); border-radius:18px 18px 0 0;
  padding:26px 22px 46px; box-shadow:0 -18px 44px rgba(0,0,0,0.55);
  transform:translateY(100%); transition:transform .32s cubic-bezier(.2,.8,.2,1);
}
#pap-menu-sheet.open{ transform:translateY(0); }
#pap-menu-sheet > *{ max-width:900px; margin-left:auto; margin-right:auto; }
.menu-head{ margin-bottom:26px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }
.menu-head h1{ font-family:var(--font-display); font-size:clamp(26px,4vw,34px); font-weight:800; letter-spacing:-0.5px; line-height:1.1; margin-bottom:10px; }
.menu-head p{ color:var(--text-dim); font-size:13.5px; line-height:1.6; max-width:520px; }
.pap-sheet-close{
  flex-shrink:0; background:none; border:1px solid var(--border); color:var(--text-dim);
  font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase;
  padding:9px 14px; border-radius:5px; cursor:pointer; transition:border-color .12s ease, color .12s ease;
}
.pap-sheet-close:hover{ border-color:var(--border-bright); color:var(--text); }

/* ===========================================================
   Test-page card shell (shared by all 6 module pages)
=========================================================== */
.test-head{ display:flex; justify-content:space-between; align-items:center; margin-bottom:24px; gap:14px; flex-wrap:wrap; }
.test-head .title-block .eyebrow{
  font-family:var(--font-mono); font-size:10px; color:var(--amber); letter-spacing:2px;
  text-transform:uppercase; display:block; margin-bottom:5px;
}
.test-head .title-block h2{ font-family:var(--font-display); font-size:22px; font-weight:800; letter-spacing:-0.3px; }
.exit-btn{
  background:none; border:1px solid var(--border); color:var(--text-dim); font-family:var(--font-mono);
  font-size:10.5px; padding:9px 15px; border-radius:6px; cursor:pointer; letter-spacing:1px; text-transform:uppercase;
  transition:border-color .15s ease, color .15s ease;
}
.exit-btn:hover{ border-color:var(--red); color:var(--red); }

.gauge-wrap{ display:flex; align-items:center; gap:10px; }
.gauge-svg{ width:52px; height:52px; }
.gauge-num{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); min-width:44px; }

.progress-dots{ display:flex; gap:5px; margin-bottom:20px; flex-wrap:wrap; }
.pd{ width:20px; height:3px; border-radius:2px; background:var(--border); transition:background .15s ease; }
.pd.done{ background:var(--amber-dim); }
.pd.current{ background:var(--amber); }

.card{ background:var(--panel); border:1.5px solid var(--border); border-radius:10px; padding:30px 30px 26px; min-height:280px; }
@media(max-width:560px){ .card{ padding:22px 18px 20px; } }

.q-text{ font-size:16px; line-height:1.6; margin-bottom:22px; }
.q-text .hl{ font-family:var(--font-mono); color:var(--amber); }
.choices{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
@media(max-width:520px){ .choices{ grid-template-columns:1fr; } }
.choice-btn{
  background:var(--panel-raised); border:1px solid var(--border); color:var(--text); font-family:var(--font-mono);
  font-size:14px; padding:14px; border-radius:8px; cursor:pointer; text-align:left; transition:border-color .12s ease, background .12s ease;
}
.choice-btn:hover{ border-color:var(--border-bright); }
@media (hover:none){ .choice-btn:hover{ border-color:var(--border); } }
.choice-btn:active{ background:var(--panel); }
.choice-btn.correct{ border-color:var(--green); background:rgba(91,148,104,0.18); color:var(--green); }
.choice-btn.wrong{ border-color:var(--red); background:rgba(192,96,74,0.18); color:var(--red); }
.choice-btn:disabled{ cursor:default; }
.choice-btn:disabled:hover{ border-color:var(--border); }
.choice-btn.correct:disabled:hover{ border-color:var(--green); }
.choice-btn.wrong:disabled:hover{ border-color:var(--red); }

.next-row{ display:flex; justify-content:flex-end; margin-top:20px; }
.next-btn{
  background:var(--amber); color:var(--on-accent); border:none; font-family:var(--font-mono); font-weight:700;
  font-size:11.5px; letter-spacing:1.5px; text-transform:uppercase; padding:12px 22px; border-radius:6px; cursor:pointer;
  transition:opacity .12s ease, transform .1s ease;
}
.next-btn:hover:not(:disabled){ opacity:0.82; }
.next-btn:active:not(:disabled){ transform:translateY(1px); }
.next-btn:disabled{ opacity:0.3; cursor:default; }

.feedback-line{ font-family:var(--font-mono); font-size:11.5px; margin-top:16px; min-height:16px; letter-spacing:0.5px; text-transform:uppercase; }
.feedback-line.correct{ color:var(--green); }
.feedback-line.wrong{ color:var(--red); }

/* memory module */
.readout{ font-family:var(--font-mono); text-align:center; padding:44px 10px; }
.readout .row-label{ font-size:10px; color:var(--text-faint); letter-spacing:3px; text-transform:uppercase; margin-bottom:16px; }
.readout .fields{ display:flex; justify-content:center; gap:28px; flex-wrap:wrap; }
.readout .field{ text-align:center; }
.readout .field .k{ font-size:10px; color:var(--amber); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:7px; }
.readout .field .v{ font-size:27px; color:var(--text); font-weight:700; font-family:var(--font-display); }
.mem-phase-label{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint); letter-spacing:3px; text-transform:uppercase; text-align:center; margin-bottom:9px; }
.mem-big-timer{ font-family:var(--font-display); font-size:42px; color:var(--amber); text-align:center; margin-bottom:7px; font-weight:800; }
.mem-big-timer.answering{ color:var(--green); }
.recall-fields{ display:flex; flex-direction:column; gap:16px; }
.recall-field{ background:var(--panel-raised); border:1px solid var(--border); border-radius:8px; padding:14px 16px; }
.recall-field-label{ font-family:var(--font-mono); font-size:10px; color:var(--amber); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:9px; }
.recall-field-choices{ display:flex; gap:8px; flex-wrap:wrap; }
.recall-field-choices button{
  background:var(--panel); border:1px solid var(--border); color:var(--text); font-family:var(--font-mono);
  font-size:12.5px; padding:8px 14px; border-radius:6px; cursor:pointer; transition:border-color .12s ease;
}
.recall-field-choices button:hover{ border-color:var(--border-bright); }
.recall-field-choices button.correct{ border-color:var(--green); background:rgba(91,148,104,0.2); color:var(--green); }
.recall-field-choices button.wrong{ border-color:var(--red); background:rgba(192,96,74,0.2); color:var(--red); }
.recall-field-choices button:disabled{ cursor:default; }

/* task manager */
.tm-params{ display:flex; flex-direction:column; gap:12px; margin-bottom:22px; }
.tm-param-row{
  background:var(--panel-raised); border:1px solid var(--border); border-radius:8px; padding:14px 16px;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; transition:border-color .15s ease;
}
.tm-param-row.locked{ border-color:var(--amber); }
.tm-param-label{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint); letter-spacing:1.5px; text-transform:uppercase; min-width:64px; }
.tm-param-values{ font-family:var(--font-mono); font-size:20px; display:flex; align-items:baseline; gap:10px; }
.tm-param-values .cur{ color:var(--text); font-weight:700; }
.tm-param-values .arrow{ color:var(--text-faint); font-size:14px; }
.tm-param-values .tgt{ color:var(--amber); }
.tm-status-dot{ width:9px; height:9px; border-radius:50%; background:var(--red); flex-shrink:0; }
.tm-status-dot.ok{ background:var(--green); }
.tm-param-controls{ display:flex; gap:6px; }
.tm-param-controls button{
  width:36px; height:36px; background:var(--panel); border:1px solid var(--border-bright); color:var(--text);
  font-family:var(--font-mono); font-size:16px; border-radius:6px; cursor:pointer; transition:opacity .1s ease;
}
.tm-param-controls button:hover{ opacity:0.7; }
.tm-param-controls button:active{ background:var(--amber-dim); }
.tm-hint{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); text-align:center; margin-bottom:6px; text-transform:uppercase; letter-spacing:0.5px; }
.tm-stat-strip{ display:flex; gap:22px; font-family:var(--font-mono); font-size:11px; color:var(--text-dim); justify-content:center; flex-wrap:wrap; }

/* A single keycap-sized box — roughly the footprint of a real keyboard key —
   showing only the one digit that needs pressing. position:fixed + appended
   to <body> so it can land anywhere in the actual viewport, not just within
   the task card. */
.tm-alert-overlay{
  position:fixed; width:58px; height:58px; background:#1A0D0D; border:2.5px solid var(--red); border-radius:7px;
  box-shadow:0 8px 22px rgba(0,0,0,0.55), 0 0 0 3px rgba(192,96,74,0.25);
  display:flex; align-items:center; justify-content:center;
  z-index:2000; cursor:pointer;
  animation:tm-alert-pulse 0.9s ease-in-out infinite;
}
.tm-alert-digit-solo{ font-family:var(--font-display); font-size:26px; font-weight:800; color:var(--red); }
@keyframes tm-alert-pulse{
  0%,100%{ box-shadow:0 8px 22px rgba(0,0,0,0.55), 0 0 0 3px rgba(192,96,74,0.25); }
  50%{ box-shadow:0 8px 22px rgba(0,0,0,0.55), 0 0 0 7px rgba(192,96,74,0.05); }
}

/* spatial orientation */
.ori-instruments{ display:flex; justify-content:center; gap:28px; margin-bottom:22px; flex-wrap:wrap; }
.ori-instr-box{ text-align:center; }
.ori-instr-label{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-faint); letter-spacing:1.5px; text-transform:uppercase; margin-top:5px; }
.ori-instr-value{ font-family:var(--font-mono); font-size:13px; color:var(--amber); margin-top:2px; }
.ori-grid-wrap{ display:flex; justify-content:center; margin-bottom:5px; }
.ori-ac{ cursor:pointer; }
.ori-ac:hover circle:first-child{ stroke:var(--amber); }
.ori-legend{
  display:flex; justify-content:center; gap:18px; flex-wrap:wrap; font-family:var(--font-mono); font-size:9.5px;
  color:var(--text-faint); margin-top:11px; margin-bottom:5px; text-transform:uppercase;
}

.center-msg{ text-align:center; padding:64px 10px; font-family:var(--font-mono); color:var(--text-dim); font-size:13px; }
.center-msg h3{ font-family:var(--font-display); color:var(--text); font-size:22px; font-weight:800; margin-bottom:11px; }
.big-btn{
  margin-top:22px; background:var(--amber); color:var(--on-accent); border:none; font-family:var(--font-mono);
  font-weight:700; font-size:12px; letter-spacing:1.5px; text-transform:uppercase; padding:14px 26px; border-radius:6px;
  cursor:pointer; transition:opacity .12s ease;
}
.big-btn:hover{ opacity:0.82; }

/* multitask / slalom */
.mt-wrap{ display:flex; flex-direction:column; gap:24px; }
.mt-track-box{ background:var(--panel-raised); border:1px solid var(--border); border-radius:9px; padding:22px; }
.mt-track-label{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:13px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px; }
.mt-bar-outer{ position:relative; height:48px; background:#100D08; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.mt-center-line{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--border-bright); opacity:0.4; transform:translateX(-1px); }
.mt-zone{ position:absolute; left:45.5%; width:9%; top:0; bottom:0; background:rgba(91,148,104,0.30); border-left:1px dashed rgba(91,148,104,0.75); border-right:1px dashed rgba(91,148,104,0.75); }
.mt-needle{ position:absolute; top:4px; bottom:4px; width:6px; background:var(--amber); border-radius:3px; transition:left 0.05s linear; }
.mt-controls{ display:flex; justify-content:center; gap:14px; margin-top:15px; }
.mt-controls button{
  background:var(--panel); border:1px solid var(--border-bright); color:var(--text); font-family:var(--font-mono);
  font-size:18px; width:58px; height:48px; border-radius:8px; cursor:pointer; transition:opacity .1s ease;
}
.mt-controls button:hover{ opacity:0.7; }
.mt-controls button:active{ background:var(--amber-dim); }
.mt-prompt-box{
  min-height:120px; background:var(--panel-raised); border:1px solid var(--border); border-radius:9px; padding:19px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:13px;
}
.mt-prompt-q{ font-family:var(--font-display); font-size:19px; color:var(--amber); font-weight:800; }
.mt-prompt-choices{ display:flex; gap:11px; flex-wrap:wrap; justify-content:center; }
.mt-prompt-choices button{
  background:var(--panel); border:1px solid var(--border); color:var(--text); font-family:var(--font-mono);
  font-size:14px; padding:10px 18px; border-radius:6px; cursor:pointer; transition:border-color .12s ease;
}
.mt-prompt-choices button:hover{ border-color:var(--border-bright); }
.mt-prompt-idle{ color:var(--text-faint); font-family:var(--font-mono); font-size:12px; }
.mt-stat-strip{ display:flex; gap:22px; font-family:var(--font-mono); font-size:11px; color:var(--text-dim); flex-wrap:wrap; }
.mt-timer{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); }

/* results */
.results-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:1.5px; background:var(--border); border:1.5px solid var(--border);
  border-radius:9px; overflow:hidden; margin:24px 0;
}
@media(max-width:520px){ .results-grid{ grid-template-columns:1fr; } }
.result-tile{ background:var(--panel); padding:19px; }
.result-tile .k{ font-family:var(--font-mono); font-size:10px; color:var(--text-faint); letter-spacing:1.5px; text-transform:uppercase; margin-bottom:9px; }
.result-tile .v{ font-family:var(--font-display); font-size:28px; font-weight:800; }
.result-tile .v.green{ color:var(--green); }
.result-tile .v.amber{ color:var(--amber); }
.result-tile .v.red{ color:var(--red); }
.pap-empty-tile{
  grid-column:1/-1; padding:19px; background:var(--panel); font-family:var(--font-mono); font-size:12px; color:var(--text-faint);
}
.result-actions{ display:flex; gap:11px; flex-wrap:wrap; }
.result-actions button{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:1px; text-transform:uppercase; padding:12px 20px;
  border-radius:6px; cursor:pointer; transition:opacity .12s ease, transform .1s ease;
}
.result-actions button:hover{ opacity:0.82; }
.result-actions button:active{ transform:translateY(1px); }
.btn-primary{ background:var(--amber); border:none; color:var(--on-accent); font-weight:700; }
.btn-secondary{ background:none; border:1px solid var(--border); color:var(--text-dim); }
.btn-secondary:hover{ border-color:var(--border-bright); color:var(--text); opacity:1; }

.hidden{ display:none !important; }

/* ===========================================================
   INSTRUMENT PANEL — Pilotest-style test-canvas look.
   Scoped entirely to the interactive gauges/readouts inside each
   module's test screen. Everything outside .instr-panel (menu,
   hero, nav, disclaimer, results screens) is untouched and keeps
   the existing PAP dark/gold identity — this is a "screen within
   the panel" treatment, not a site-wide reskin.
=========================================================== */
:root{
  --instr-bg:#eef1f4;
  --instr-bg-raised:#e2e7ec;
  --instr-ink:#1c2027;
  --instr-ink-dim:#5b6270;
  --instr-border:#c1c8d1;
  --instr-border-strong:#8b93a0;
  --instr-lcd-bg:#12151a;
  --instr-lcd-text:#eef1f4;
  --instr-lcd-dim:#8890a0;
  --instr-blue:#1589ff;
  --instr-red:#e0453a;
  --instr-green:#2fa564;
  --instr-pink:#ea5aa0;
  --instr-sky:#bcdcf7;
  --instr-ground:#c98a4f;
}

.instr-panel{
  background:var(--instr-bg); border:1px solid var(--instr-border-strong); border-radius:6px;
  padding:22px; color:var(--instr-ink); font-family:var(--font-body);
}
/* These SVGs use color as data (climb=green, descend=red, the aircraft
   silhouette itself) — under Windows High Contrast mode the browser would
   otherwise remap every fill/stroke to a handful of system colors, which
   can easily collapse a shape and its background onto the same color. */
.instr-panel svg{ forced-color-adjust:none; }
.instr-panel h3, .instr-panel h4{ color:var(--instr-ink); font-family:var(--font-mono); }
.instr-label{
  font-family:var(--font-mono); font-size:10px; letter-spacing:1.5px; text-transform:uppercase;
  color:var(--instr-ink-dim); margin-bottom:10px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:6px;
}

/* dark LCD-style digital readout, nested inside a light panel */
.instr-lcd{
  background:var(--instr-lcd-bg); border:2px solid #2a2f38; border-radius:9px;
  padding:16px 20px; font-family:var(--font-mono);
}
.instr-lcd-row{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:9px 0; border-bottom:1px solid #262b33;
}
.instr-lcd-row:last-child{ border-bottom:none; }
.instr-lcd-k{ color:var(--instr-lcd-dim); font-size:12px; letter-spacing:1px; }
.instr-lcd-v{ color:var(--instr-lcd-text); font-size:17px; font-weight:600; letter-spacing:0.5px; }
.instr-lcd-v.missing{ color:#4a5060; }
.recall-missing-tag{
  font-size:9px; letter-spacing:1.5px; color:var(--instr-red); border:1px solid var(--instr-red);
  border-radius:3px; padding:1px 5px; margin-left:6px; vertical-align:middle;
}
.recall-input{
  background:#0c0e11; border:1.5px solid #2a2f38; color:var(--instr-lcd-text);
  font-family:var(--font-mono); font-size:16px; font-weight:600; letter-spacing:0.5px;
  padding:6px 10px; border-radius:6px; width:140px; text-align:right;
  transition:border-color .12s ease;
}
.recall-input::placeholder{ color:#4a5060; font-weight:400; }
.recall-input:focus{ outline:none; border-color:var(--instr-blue); }
.recall-input:disabled{ opacity:1; }
.recall-input.correct{ border-color:var(--instr-green); color:var(--instr-green); }
.recall-input.wrong{ border-color:var(--instr-red); color:var(--instr-red); }
.instr-lcd-echo{
  margin-top:12px; background:#0c0e11; border:1px solid #262b33; border-radius:7px;
  padding:12px 16px; text-align:center; font-family:var(--font-mono); font-size:15px;
  color:var(--instr-green); letter-spacing:1px; min-height:20px;
}
.instr-lcd-echo.wrong{ color:var(--instr-red); }

/* flat light choice buttons, used inside .instr-panel in place of the dark choice-btn look */
.instr-choice-btn{
  background:#fff; border:1.5px solid var(--instr-border-strong); color:var(--instr-ink);
  font-family:var(--font-mono); font-size:13.5px; padding:12px 14px; border-radius:6px;
  cursor:pointer; text-align:left; transition:border-color .12s ease, background .12s ease;
}
.instr-choice-btn:hover{ border-color:var(--instr-blue); }
.instr-choice-btn:disabled{ cursor:default; }
.instr-choice-btn.correct{ border-color:var(--instr-green); background:#e6f5ec; color:#1d7a45; }
.instr-choice-btn.wrong{ border-color:var(--instr-red); background:#fbe9e7; color:#b8382c; }

/* analog gauge face — light blue-white dial, black rim, used by orientation + task manager */
.instr-dial-face{ fill:#eef6fc; }
.instr-dial-rim{ fill:none; stroke:#20242b; stroke-width:2.5; }
.instr-dial-tick{ stroke:#3a4048; }
.instr-dial-txt{ fill:#3a4048; font-family:'IBM Plex Mono',monospace; }
.instr-dial-needle{ stroke:#20242b; }
.instr-dial-sky{ fill:var(--instr-sky); }
.instr-dial-ground{ fill:var(--instr-ground); }
.instr-dial-fd{ stroke:var(--instr-pink); }

/* radar / plot area used by orientation */
.instr-plot{ background:var(--instr-bg); border-radius:8px; }
.instr-plot-ring{ stroke:var(--instr-border-strong); }
.instr-plot-ac-ring{ fill:#fff; stroke:var(--instr-border-strong); }

/* horizontal tracking bar (multitask / slalom) reskinned to the light
   instrument-cluster look — black rim, red position marker, red dot gates
   in place of the shaded green hold-zone */
.instr-track-outer{
  position:relative; height:52px; background:var(--instr-bg); border:2px solid var(--instr-border-strong);
  border-radius:8px; overflow:hidden;
}
.instr-track-center{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--instr-border-strong); opacity:0.7; }
.instr-track-gate{
  position:absolute; top:6px; bottom:6px; width:7px; height:7px; margin:auto 0;
  background:var(--instr-red); border-radius:50%;
}
.instr-track-marker{
  position:absolute; top:4px; bottom:4px; width:0; display:flex; align-items:center; justify-content:center;
  transition:left 0.05s linear;
}
.instr-track-marker svg{ overflow:visible; }

/* small top-down plane glyph, reused wherever a black aircraft icon is needed */
.instr-plane-glyph{ fill:#171a1f; }

.instr-stat-strip{
  display:flex; gap:20px; flex-wrap:wrap; font-family:var(--font-mono); font-size:11px;
  color:var(--instr-ink-dim); margin-top:14px; justify-content:center;
}
.instr-stat-strip b{ color:var(--instr-ink); }

/* vertical tape (task manager: heading/speed/altitude rows styled toward
   the PFD tape look) */
.instr-tape-row{
  display:flex; align-items:center; gap:14px; background:var(--instr-bg-raised);
  border:1px solid var(--instr-border-strong); border-radius:8px; padding:12px 16px; margin-bottom:10px;
}
.instr-tape-label{ font-family:var(--font-mono); font-size:10px; color:var(--instr-ink-dim); letter-spacing:1.5px; text-transform:uppercase; min-width:64px; }
.instr-tape-strip{ position:relative; flex:1; height:30px; background:#fff; border:1px solid var(--instr-border); border-radius:5px; overflow:hidden; }
.instr-tape-strip .cur-line{ position:absolute; left:0; right:0; top:50%; height:1px; background:var(--instr-border-strong); }
.instr-tape-bug{
  position:absolute; top:3px; bottom:3px; width:3px; background:var(--instr-pink);
}
.instr-tape-readout{
  font-family:var(--font-mono); font-size:15px; font-weight:700; color:var(--instr-ink);
  background:#fff; border:1.5px solid var(--instr-border-strong); border-radius:5px; padding:4px 10px; min-width:74px; text-align:center;
}
.instr-tape-target{ font-family:var(--font-mono); font-size:11px; color:var(--instr-pink); }
.instr-tape-dot{ width:8px; height:8px; border-radius:50%; background:var(--instr-red); flex-shrink:0; }
.instr-tape-dot.ok{ background:var(--instr-green); }

/* ===========================================================
   Instrument-panel TOKEN OVERRIDES for the multitask, slalom and
   task-manager test canvases. Every component in this stylesheet
   was already built on the shared --bg/--panel/--border/--amber
   etc. tokens, so redefining those tokens inside these three wrap
   elements re-themes the whole interactive canvas (tracking bar,
   controls, prompt box, param rows) to the light Pilotest look
   without duplicating every rule or touching any JS. The .card
   shell around each wrap is outside this scope, so it still reads
   as PAP's own dark chrome around the lighter "screen".
=========================================================== */
#mt-wrap, #sl-wrap, #tm-wrap{
  --bg:var(--instr-bg); --panel:var(--instr-bg); --panel-raised:var(--instr-bg-raised);
  --border:var(--instr-border-strong); --border-bright:var(--instr-ink);
  --amber:var(--instr-red); --amber-dim:#a85148;
  --green:var(--instr-green); --red:var(--instr-red);
  --text:var(--instr-ink); --text-dim:var(--instr-ink-dim); --text-faint:#7b8290;
  --on-accent:#ffffff;
}
#mt-wrap .big-btn, #sl-wrap .big-btn{ background:var(--instr-blue); }
#mt-wrap .mt-bar-outer, #sl-wrap .mt-bar-outer{ background:var(--instr-bg); }

/* multitask: needle stays a simple marker; the hold-zone reads as the blue
   band seen in Pilotest's own multitask reference */
#mt-wrap .mt-zone{ background:rgba(21,137,255,0.16); border-left:2px solid var(--instr-blue); border-right:2px solid var(--instr-blue); }
#mt-wrap .mt-needle{ background:var(--instr-red); }

/* slalom: needle becomes a small black top-down plane glyph; the hold-zone
   is redrawn as a pair of red dot "gates" at its two edges, echoing
   Pilotest's slalom screen (light canvas, black plane, red dot corridor) */
#sl-wrap .mt-zone{
  background:
    radial-gradient(circle 5px at 0% 50%, var(--instr-red) 99%, transparent 100%),
    radial-gradient(circle 5px at 100% 50%, var(--instr-red) 99%, transparent 100%);
  border:none;
}
#sl-wrap .mt-needle{
  top:50%; bottom:auto; width:26px; height:26px; margin-top:-13px; background:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23171a1f' d='M12 2 L14 9 L22 13 L13 14.5 L13 19 L16.5 21.5 L12 20.3 L7.5 21.5 L11 19 L11 14.5 L2 13 L10 9 Z'/%3E%3C/svg%3E");
  background-size:contain; background-repeat:no-repeat; border-radius:0;
}

/* task manager: target values read as pink flight-director bugs, matching
   the pink target numbers on Pilotest's coordination screen */
#tm-wrap .tm-param-values .tgt{ color:var(--instr-pink); }
#tm-wrap .tm-param-row.locked{ border-color:var(--instr-red); }

/* orientation: the instrument-label/value text and legend inside the light
   canvas reuse .ori-instr-label/.ori-instr-value/.ori-legend, which read
   from --text-faint/--amber — redefine those tokens in scope so the text
   sits correctly on the light panel instead of the dark-theme cream/gold. */
#ori-canvas{ --text-faint:#5b6270; --amber:#e08a2a; }

/* ---------- Third Stripe brand mark (three gold bars) ---------- */
.ts-mark{ display:inline-block; vertical-align:middle; flex-shrink:0; }
.page-nav .pap-word .ts-mark{ margin-right:10px; position:relative; top:-2px; }
.pap-home-menu-btn .pap-chip-word{ display:inline-flex; align-items:center; }
.ts-sr{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
@media (max-width:520px){ .page-nav .pap-word .sub{ display:none; } }
@media (max-width:520px){
  .page-nav .pap-word{ font-size:16px; white-space:nowrap; }
  .page-nav .pap-word .ts-mark{ width:17px; height:12px; margin-right:8px; top:-1px; }
  .ts-eyebrow-suffix{ display:none; }
  #hero-topbar{ padding-top:78px; } /* clears the fixed menu button */
}

/* ---------- titling table: hero brand (top right) + uppercase nav badge ---------- */
.pap-hero-topbar .ts-hero-brand{
  font-family:var(--font-display); font-weight:800; font-size:20px; letter-spacing:0.4px;
  text-transform:none; color:var(--text); max-width:none; line-height:1.2; white-space:nowrap;
}
.pap-hero-topbar .ts-hero-brand sup{ font-size:9px; }
.page-nav .pap-word .ts-name{ text-transform:uppercase; letter-spacing:1.6px; font-size:15px; }
.page-nav .pap-word .sub{ margin-left:4px; }
@media (max-width:520px){
  .pap-hero-topbar .ts-hero-brand{ font-size:16px; }
  .page-nav .pap-word .ts-name{ font-size:13px; letter-spacing:1.2px; }
}

/* ---------- accounts (account.html + home page account links) ---------- */
.tsa-acct-card{ max-width:520px; }
.tsa-lead{ color:var(--text-dim); margin:0 0 18px; line-height:1.55; }
.tsa-tabs{ display:flex; gap:6px; margin-bottom:18px; }
.tsa-tab{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  background:transparent; color:var(--text-dim); border:1.5px solid var(--border); border-radius:6px; padding:8px 12px; cursor:pointer; }
.tsa-tab[aria-selected="true"]{ color:var(--bg); background:var(--amber); border-color:var(--amber); }
.tsa-field{ display:block; margin-bottom:14px; }
.tsa-field span{ display:block; font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-faint); margin-bottom:6px; }
.tsa-field input{ width:100%; box-sizing:border-box; font:inherit; font-size:15px; color:var(--text); background:var(--bg);
  border:1.5px solid var(--border-bright); border-radius:8px; padding:11px 12px; }
.tsa-field input:focus{ outline:2px solid var(--amber); outline-offset:1px; }
.tsa-hint{ font-size:12.5px; color:var(--text-faint); margin:-6px 0 14px; }
.tsa-msg{ min-height:1.4em; margin:16px 0 0; font-size:14px; line-height:1.5; color:var(--text-dim); }
.tsa-msg.err{ color:#E08A74; } .tsa-msg.ok{ color:#9CC48A; }
.tsa-me{ margin:0 0 18px; color:var(--text-dim); } .tsa-me b{ color:var(--text); }
/* buttons outside .result-actions (links styled as buttons, home page, account page) */
a.btn-primary, a.btn-secondary, .tsa-plan button, .tsa-hero-cta .btn-primary, .result-actions a{
  font-family:var(--font-mono); font-size:11.5px; letter-spacing:1px; text-transform:uppercase; padding:13px 22px;
  border-radius:6px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; justify-content:center;
  transition:opacity .12s ease, transform .1s ease; }
a.btn-primary:hover, .tsa-plan button:hover{ opacity:0.85; }
.tsa-hero-cta .btn-primary{ padding:15px 26px; font-size:12px; box-shadow:0 10px 30px rgba(0,0,0,0.35); }
.tsa-account-page [hidden]{ display:none !important; }
.tsa-sheet-actions{ display:flex; align-items:center; gap:10px; }
.tsa-account-link{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; text-transform:uppercase; color:var(--amber);
  text-decoration:none; border:1.5px solid var(--border-bright); border-radius:6px; padding:8px 12px; }
.tsa-account-link:hover{ background:var(--border-bright); color:var(--bg); }
.tsa-log-cta{ margin:12px 0 0; font-size:13px; color:var(--text-dim); }
.tsa-log-cta a{ color:var(--amber); }
.tsa-log-cta[hidden]{ display:none; }

/* ---------- pre-test briefing (briefing.js) ---------- */
.tsa-brief-card{ max-width:760px; }
.tsa-brief-what{ font-size:16px; line-height:1.6; color:var(--text); margin:0 0 20px; }
.tsa-brief-grid{ display:grid; grid-template-columns:1fr 1fr; gap:18px 28px; margin:0 0 22px; }
.tsa-brief-grid dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--amber); margin-bottom:6px; }
.tsa-brief-grid dd{ margin:0; color:var(--text-dim); font-size:14px; line-height:1.55; }
.tsa-brief-grid ul{ margin:0; padding-left:18px; list-style:disc; }
.tsa-brief-grid li::marker{ color:var(--amber); }
.tsa-brief-diff{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:16px 0; border-top:1.5px solid var(--border); border-bottom:1.5px solid var(--border); margin-bottom:20px; }
.tsa-brief-diffnote{ font-size:12.5px; color:var(--text-faint); }
.tsa-brief-start{ font-size:13px; }
@media (max-width:620px){ .tsa-brief-grid{ grid-template-columns:1fr; } }

/* ---------- home: CTA, how it works, pricing, FAQ, legal links ---------- */
.tsa-hero-cta{ display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:14px 22px; margin:22px 0 6px; pointer-events:auto; }
.tsa-hero-link{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.6px; text-transform:uppercase; color:var(--text); text-decoration:none; border-bottom:1px solid var(--amber); padding-bottom:2px; }
.tsa-section{ margin:0 0 84px; scroll-margin-top:24px; }
.tsa-steps{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); gap:16px; }
.tsa-steps li{ background:var(--panel); border:1.5px solid var(--border); border-radius:10px; padding:22px; }
.tsa-step-n{ font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--amber); }
.tsa-steps h3{ font-family:var(--font-display); font-size:19px; margin:10px 0 8px; color:var(--text); }
.tsa-steps p{ margin:0; font-size:14px; line-height:1.6; color:var(--text-dim); }
.tsa-plans{ display:grid; grid-template-columns:1fr 1.25fr; gap:18px; align-items:stretch; max-width:820px; margin:0 auto; }
.tsa-plan{ position:relative; display:flex; flex-direction:column; gap:14px; background:var(--panel); border:1.5px solid var(--border); border-radius:12px; padding:26px; }
.tsa-plan-feature{ border-color:var(--amber); box-shadow:0 0 0 1px rgba(201,162,74,0.25), 0 18px 50px rgba(0,0,0,0.35); }
.tsa-plan-badge{ position:absolute; top:-12px; left:24px; background:var(--amber); color:var(--bg); font-family:var(--font-mono); font-size:10px; letter-spacing:1.4px; text-transform:uppercase; padding:5px 10px; border-radius:20px; }
.tsa-plan-name{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.8px; text-transform:uppercase; color:var(--amber); }
.tsa-plan-price{ font-family:var(--font-display); font-weight:800; font-size:44px; color:var(--text); line-height:1; }
.tsa-plan-price small{ font-family:var(--font-body); font-weight:500; font-size:14px; color:var(--text-dim); }
.tsa-plan ul{ margin:0; padding-left:18px; list-style:disc; color:var(--text-dim); font-size:14px; line-height:1.9; flex:1; }
.tsa-plan li::marker{ color:var(--amber); }
.tsa-plan .btn-primary, .tsa-plan .btn-secondary{ justify-content:center; text-align:center; }
.tsa-plan-note{ margin:0; font-size:12.5px; color:var(--text-faint); }
.tsa-faq{ max-width:760px; margin:0 auto; border-top:1.5px solid var(--border); }
.tsa-faq details{ border-bottom:1.5px solid var(--border); padding:4px 0; }
.tsa-faq summary{ cursor:pointer; list-style:none; padding:16px 34px 16px 0; position:relative; font-family:var(--font-display); font-size:18px; color:var(--text); }
.tsa-faq summary::-webkit-details-marker{ display:none; }
.tsa-faq summary::after{ content:'+'; position:absolute; right:4px; top:12px; font-family:var(--font-mono); font-size:22px; color:var(--amber); }
.tsa-faq details[open] summary::after{ content:'\2212'; }
.tsa-faq p{ margin:0 0 18px; color:var(--text-dim); font-size:14.5px; line-height:1.7; }
.tsa-faq a, .tsa-legal-links a{ color:var(--amber); }
.tsa-legal-links{ display:flex; flex-wrap:wrap; gap:6px 18px; margin-bottom:12px; }
@media (max-width:760px){
  .tsa-steps, .tsa-plans{ grid-template-columns:1fr; }
  .tsa-plan-feature{ order:-1; }
  .tsa-section{ margin-bottom:64px; }
}

/* ---------- legal pages ---------- */
.tsa-legal{ max-width:760px; }
.tsa-legal-lead{ font-size:16px; line-height:1.65; color:var(--text); margin:0 0 26px; }
.tsa-legal h2{ font-family:var(--font-display); font-size:21px; color:var(--text); margin:34px 0 10px; }
.tsa-legal p, .tsa-legal li, .tsa-legal dd{ color:var(--text-dim); font-size:14.5px; line-height:1.7; }
.tsa-legal ul{ padding-left:20px; list-style:disc; } .tsa-legal li::marker{ color:var(--amber); }
.tsa-legal strong{ color:var(--text); }
.tsa-legal a{ color:var(--amber); }
.tsa-supplier{ display:grid; grid-template-columns:200px 1fr; gap:8px 18px; background:var(--panel); border:1.5px solid var(--border); border-radius:10px; padding:20px; margin:0; }
.tsa-supplier dt{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--text-faint); padding-top:4px; }
.tsa-supplier dd{ margin:0; }
mark.tsa-todo{ background:#E8C547; color:#1B160E; padding:1px 5px; border-radius:3px; font-weight:700; }
@media (max-width:620px){ .tsa-supplier{ grid-template-columns:1fr; } .tsa-supplier dt{ padding-top:10px; } }

/* ---------- 30-Day Pass: locked modules, badges ---------- */
.tsa-lock-badge, .tsa-free-badge{ display:inline-block; float:right; font-family:var(--font-mono); font-size:9.5px; letter-spacing:1.3px; text-transform:uppercase; padding:4px 8px; border-radius:20px; }
.tsa-lock-badge{ border:1px solid var(--amber); color:var(--amber); }
.tsa-free-badge{ background:var(--amber); color:var(--bg); }
.module-card.tsa-card-locked h3, .module-card.tsa-card-locked p{ opacity:0.72; }
.tsa-plan-note.err, .tsa-locked .tsa-plan-note.err{ color:#E08A74; }
.tsa-me a{ color:var(--amber); }
.tsa-locked .tsa-plan-note{ margin-top:14px; }

/* ===========================================================
   INSTRUMENT PANEL v2 — dark brass cockpit treatment.
   Replaces the light grey "test canvas" so the drills match the
   home page. Only colours change; layout and engine markup untouched.
=========================================================== */
:root{
  --instr-bg:#221B11;
  --instr-bg-raised:#2B2317;
  --instr-ink:#F1E9D2;
  --instr-ink-dim:#B9AC8E;
  --instr-border:#4A3D28;
  --instr-border-strong:#8C7442;
  --instr-lcd-bg:#0E0B07;
  --instr-lcd-text:#F6E7B8;
  --instr-lcd-dim:#9E8E68;
  --instr-blue:#C9A24A;          /* "active" accent is now brass */
  --instr-red:#D9664F;
  --instr-green:#7FBF7F;
  --instr-pink:#E59AC2;
  --instr-sky:#4F7FAE;
  --instr-ground:#8B5A2B;
}
.instr-panel{
  border:1.5px solid var(--instr-border-strong); border-radius:10px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.04), 0 0 0 1px rgba(201,162,74,0.12), 0 18px 40px rgba(0,0,0,0.35);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(201,162,74,0.06), transparent 60%),
    var(--instr-bg);
}
.instr-lcd{ border:2px solid #3A2E1B; box-shadow:inset 0 0 0 1px rgba(201,162,74,0.15), inset 0 6px 18px rgba(0,0,0,0.55); }
.instr-lcd-row{ border-bottom-color:#2A2115; }
.instr-lcd-v.missing{ color:#5A4F3A; }
.recall-input{ background:#120E09; border-color:#3A2E1B; }
.recall-input::placeholder{ color:#5A4F3A; }
.instr-lcd-echo{ background:#120E09; border-color:#2A2115; }
.instr-choice-btn{ background:#1B160E; border-color:var(--instr-border-strong); color:var(--instr-ink); }
.instr-choice-btn:hover{ border-color:var(--amber); background:#241D12; }
.instr-choice-btn.correct{ background:#1E2E1E; color:#A9DCA9; border-color:var(--instr-green); }
.instr-choice-btn.wrong{ background:#33201B; color:#F0A896; border-color:var(--instr-red); }
.instr-dial-face{ fill:#15110B; }
.instr-dial-rim{ stroke:var(--instr-border-strong); }
.instr-dial-tick{ stroke:#D9CDA8; }
.instr-dial-txt{ fill:#E5D9B4; }
.instr-dial-needle{ stroke:#F1E9D2; }
.instr-plot{ background:#15110B; border:1px solid var(--instr-border); }
.instr-plot-ring{ stroke:#6B5A38; }
.instr-plot-ac-ring{ fill:#221B11; stroke:var(--instr-border-strong); }
.instr-plane-glyph{ fill:#F1E9D2; }
.instr-track-outer{ background:#15110B; border-color:var(--instr-border-strong); }
.instr-track-center{ background:var(--instr-border-strong); }
.instr-tape-strip{ background:#15110B; border-color:var(--instr-border); }
.instr-tape-strip .cur-line{ background:var(--instr-border-strong); }
.instr-tape-readout{ background:#15110B; color:var(--instr-ink); border-color:var(--instr-border-strong); }
.ori-ac:hover circle:first-child{ stroke:var(--amber); }
/* legacy tracking bar + task manager rows used by the engines */
.mt-track-box{ background:var(--instr-bg); border:1.5px solid var(--instr-border-strong); border-radius:10px; box-shadow:0 0 0 1px rgba(201,162,74,0.12), 0 18px 40px rgba(0,0,0,0.35); }
.mt-bar-outer{ border-color:var(--instr-border-strong); }
.tm-param-row{ background:var(--instr-bg); border-color:var(--instr-border-strong); }
/* results tiles: brass-framed */
.result-tile{ background:var(--instr-bg); border:1px solid var(--instr-border); border-radius:8px; }
.results-grid{ gap:10px; }

/* ---------- home: previews, live demo, guarantees, founder ---------- */
.tsa-previews{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-bottom:44px; }
.tsa-previews figure{ margin:0; background:var(--panel); border:1.5px solid var(--border); border-radius:12px; overflow:hidden; box-shadow:0 18px 40px rgba(0,0,0,0.35); }
.tsa-previews img{ display:block; width:100%; height:auto; }
.tsa-previews figcaption{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.6px; text-transform:uppercase; color:var(--amber); padding:10px 14px; border-top:1px solid var(--border); }
.tsa-demo-wrap{ display:grid; grid-template-columns:260px 1fr; gap:28px; align-items:start; }
.tsa-demo-intro h3{ font-family:var(--font-display); font-size:24px; margin:8px 0 6px; color:var(--text); line-height:1.2; }
.tsa-demo-intro p{ margin:0; color:var(--text-dim); font-size:14px; }
.tsa-demo-panel p{ color:var(--instr-ink-dim); font-size:14.5px; line-height:1.6; margin:0 0 16px; }
.tsa-demo-score{ font-family:var(--font-display); font-weight:800; font-size:56px; color:var(--amber); line-height:1; margin:6px 0 10px; }
.tsa-demo-panel .result-actions{ margin-top:4px; }
.tsa-guarantees{ list-style:none; margin:-40px 0 84px; padding:22px 0 0; border-top:1.5px solid var(--border); display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
.tsa-guarantees li{ display:flex; flex-direction:column; gap:4px; font-size:13px; color:var(--text-dim); line-height:1.5; }
.tsa-guarantees b{ font-family:var(--font-mono); font-size:11px; letter-spacing:1.4px; text-transform:uppercase; color:var(--amber); }
.tsa-guarantees b::before{ content:'\2713  '; }
.tsa-founder{ display:grid; grid-template-columns:260px 1fr; gap:34px; align-items:center; }
.tsa-founder-photo{ border-radius:12px; overflow:hidden; border:1.5px solid var(--border-bright); box-shadow:0 18px 40px rgba(0,0,0,0.35); aspect-ratio:4/5; background:var(--panel); }
.tsa-founder-photo img{ display:block; width:100%; height:100%; object-fit:cover; }
.tsa-founder-nophoto img{ display:none; }
.tsa-founder-nophoto::after{ content:'PHOTO OF SEBASTIAN\A(assets/founder.jpg)'; white-space:pre; display:flex; align-items:center; justify-content:center; height:100%; text-align:center; font-family:var(--font-mono); font-size:11px; letter-spacing:1.5px; color:var(--text-faint); }
.tsa-founder-copy h2{ font-family:var(--font-display); font-size:30px; margin:8px 0 14px; color:var(--text); }
.tsa-founder-copy p{ color:var(--text-dim); font-size:15px; line-height:1.7; margin:0 0 14px; }
.tsa-founder-sig{ white-space:normal; overflow-wrap:anywhere; }
.tsa-founder-toast{ font-family:var(--font-display); font-style:italic; font-size:19px !important; color:var(--text) !important; margin-top:6px; }
.tsa-founder-sig{ font-family:var(--font-mono); font-size:11.5px; letter-spacing:1.4px; text-transform:uppercase; color:var(--amber); }
@media (max-width:760px){
  .tsa-previews{ grid-template-columns:1fr; }
  .tsa-demo-wrap, .tsa-founder{ grid-template-columns:1fr; }
  .tsa-founder-photo{ max-width:260px; }
  .tsa-guarantees{ grid-template-columns:1fr 1fr; margin-top:-20px; }
}

/* ---------- logbook + stripes ---------- */
.tsa-rank{ display:flex; gap:26px; align-items:center; background:var(--panel); border:1.5px solid var(--border-bright); border-radius:12px; padding:26px 28px; box-shadow:0 18px 40px rgba(0,0,0,0.35); }
.tsa-rank-mark{ flex-shrink:0; width:78px; height:78px; display:flex; align-items:center; justify-content:center; border-radius:50%; border:1.5px solid var(--border-bright); background:#15110B; }
.tsa-rank h2{ font-family:var(--font-display); font-size:30px; margin:4px 0 6px; color:var(--text); }
.tsa-rank p{ margin:0 0 10px; color:var(--text-dim); font-size:14px; }
.tsa-rank-bar{ height:6px; background:#15110B; border:1px solid var(--border); border-radius:4px; overflow:hidden; max-width:420px; }
.tsa-rank-bar span{ display:block; height:100%; background:var(--amber); transition:width .4s ease; }
.tsa-log-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.tsa-log-card{ background:var(--panel); border:1.5px solid var(--border); border-radius:10px; padding:18px; display:flex; flex-direction:column; gap:10px; }
.tsa-log-card-max{ border-color:var(--amber); }
.tsa-log-card header{ display:flex; justify-content:space-between; align-items:center; }
.tsa-log-card h3{ margin:0; font-family:var(--font-display); font-size:19px; } .tsa-log-card h3 a{ color:var(--text); text-decoration:none; }
.tsa-log-stats{ display:flex; gap:14px; flex-wrap:wrap; font-family:var(--font-mono); font-size:10.5px; letter-spacing:1px; color:var(--text-faint); } .tsa-log-stats b{ color:var(--text); }
.tsa-spark{ display:block; width:100%; height:40px; } .tsa-spark-empty{ font-size:12px; color:var(--text-faint); display:block; height:40px; line-height:40px; }
.tsa-log-next{ margin:0; font-size:12.5px; color:var(--text-dim); }
.tsa-log-open{ float:right; font-family:var(--font-mono); font-size:10.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--amber); text-decoration:none; }
@media (max-width:760px){ .tsa-log-grid{ grid-template-columns:1fr; } .tsa-rank{ flex-direction:column; align-items:flex-start; } }

/* ---------- speed: shorter cinematic on phones; hero photo fills (no letterbox gap) ---------- */
@media (max-width:760px){
  .pap-hero-spacer{ height:135vh; }
  .pap-air-spacer{ height:420vh; }
  .pap-hero-photo{ background-size:cover; background-position:50% 22%; }
}
@media (prefers-reduced-motion: reduce){
  .pap-hero-spacer{ height:110vh; } .pap-air-spacer{ height:300vh; }
  .pap-hero-photo, .pap-air-card, .pap-air-hero{ transition:none !important; }
}
@media (max-width:760px){
  .tm-hint{ font-size:0; line-height:0; }
  .tm-hint::after{ content:'TAP \2212 / + TO ADJUST EACH VALUE \00b7 TAP THE ALERT ANSWER'; font-size:10px; line-height:1.6; }
}