/* PilotTrain home hero: Feedback / SmartKDR toggle. Loaded on the front page only. */
@property --pthx-rot{syntax:'<angle>';initial-value:0deg;inherits:false;}
@keyframes pthx-rot{to{--pthx-rot:360deg;}}
/* Movement only: content must stay visible even if animations never run. */
@keyframes pthx-pop{from{transform:translateY(8px);}to{transform:none;}}
@keyframes pthx-drift{to{background-position-x:-1400px;}}

.pthx, .pthx *, .pthx *::before, .pthx *::after{box-sizing:border-box;}

.pthx{
  --card:#0d2033; --line:rgba(255,255,255,.12);
  --tx:#e9f1f8; --mut:#9fb3c8; --dim:#5d7189;
  --a:#5d8ce6; --b:#a9c8f5; --ok:#4ade80; --warn:#fbbf24; --bad:#f87171;
  position:relative; overflow:hidden; color:var(--tx); text-align:center;
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  background:#071320;
}
.pthx .pthx-in{position:relative; z-index:1; max-width:1040px; margin:0 auto; padding:56px 16px 0;}

.pthx .pthx-pill{
  display:inline-flex; align-items:center; gap:8px; font-size:13px; font-weight:600; color:#d5e2ef;
  border:1px solid var(--line); border-radius:999px; padding:7px 14px; background:rgba(255,255,255,.05);
}
.pthx .pthx-pill i{font-style:normal; color:var(--warn); letter-spacing:1px;}

.pthx h1{
  margin:22px 0 0; font-weight:800; letter-spacing:-.025em; line-height:1.1;
  font-size:clamp(28px,7.6vw,64px); color:#fff;
}

/* ---------- the toggle line ---------- */
.pthx .pthx-row{display:flex; align-items:center; justify-content:center; gap:.26em; margin-top:.06em; white-space:nowrap;}
.pthx .pthx-word{transition:color .35s ease; cursor:pointer; user-select:none;}
.pthx .pthx-word--off{color:var(--b);}
.pthx .pthx-word--on{color:var(--dim);}
.pthx.is-kdr .pthx-word--off{color:var(--dim);}
.pthx.is-kdr .pthx-word--on{
  background:linear-gradient(90deg,var(--a),var(--b)); -webkit-background-clip:text; background-clip:text; color:transparent;
}
.pthx .pthx-switch{
  flex:0 0 1.9em; box-sizing:border-box; position:relative; width:1.9em; min-width:1.9em; height:1em;
  padding:0; margin:0; border:0; border-radius:999px; cursor:pointer;
  -webkit-appearance:none; appearance:none; line-height:1; font-family:inherit; font-size:.82em;
  background:#31465c; box-shadow:inset 0 0 0 2px rgba(255,255,255,.14);
  transition:background .35s ease, box-shadow .35s ease;
}
.pthx .pthx-switch::after{
  content:""; position:absolute; top:.12em; left:.12em; width:.76em; height:.76em; border-radius:50%;
  background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.35); transition:transform .35s cubic-bezier(.3,1.4,.5,1);
}
.pthx.is-kdr .pthx-switch{background:linear-gradient(90deg,#2f7bf0,#5d8ce6); box-shadow:0 0 0 4px rgba(93,140,230,.22), 0 0 28px rgba(93,140,230,.55);}
.pthx.is-kdr .pthx-switch::after{transform:translateX(.9em);}
.pthx .pthx-switch:focus-visible{outline:3px solid var(--b); outline-offset:4px;}

/* ---------- copy that swaps ---------- */
.pthx .pthx-sub{max-width:560px; margin:20px auto 0; font-size:clamp(15px,2.1vw,18px); line-height:1.55; color:var(--mut); min-height:3.2em;}
.pthx [data-when]{display:none;}
.pthx:not(.is-kdr) [data-when="off"], .pthx.is-kdr [data-when="on"]{display:block; animation:pthx-pop .4s ease both;}

.pthx .pthx-cta{display:flex; flex-wrap:wrap; gap:12px; justify-content:center; margin-top:24px;}
.pthx .pthx-btn{display:inline-flex; align-items:center; justify-content:center; height:50px; padding:0 26px; border-radius:12px; font-size:16px; font-weight:700; text-decoration:none;}
.pthx .pthx-btn--1{color:#fff; background:linear-gradient(180deg,#3b86f5,#2a6fe0); box-shadow:0 10px 26px rgba(47,123,240,.4);}
.pthx .pthx-btn--2{color:#fff; background:rgba(255,255,255,.06); border:1px solid var(--line);}

/* ---------- the sky band behind the window ---------- */
.pthx .pthx-band{position:relative; margin-top:36px; padding:110px 24px 0;}
.pthx .pthx-sky, .pthx .pthx-grid, .pthx .pthx-clouds, .pthx .pthx-warm{
  position:absolute; inset:0; pointer-events:none;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 90px);
          mask-image:linear-gradient(to bottom, transparent 0, #000 90px);
  transition:opacity .9s ease;
}
/* Feedback: clear blue, chart grid */
.pthx .pthx-sky--off{background:linear-gradient(180deg,#0a2140 0%,#114078 55%,#1c5fae 100%);}
/* SmartKDR: above the cloud at first light */
.pthx .pthx-sky--on{background:linear-gradient(180deg,#0c2752 0%,#2c5cc0 34%,#86a6ea 60%,#ffc7a0 84%,#ff9d78 100%); opacity:0;}
.pthx.is-kdr .pthx-sky--on{opacity:1;}

.pthx .pthx-grid{
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:44px 44px; background-position:center top;
}
.pthx.is-kdr .pthx-grid{opacity:.35;}

.pthx .pthx-clouds{
  opacity:.1; background-repeat:repeat-x; background-size:1400px 100%;
  -webkit-mask-image:linear-gradient(to bottom, transparent 0, #000 45%);
          mask-image:linear-gradient(to bottom, transparent 0, #000 45%);
  animation:pthx-drift 600s linear infinite;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='520' preserveAspectRatio='none'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.0045 .012' numOctaves='5' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 2.1 0 0 0 -.86'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
}
.pthx .pthx-clouds--far{
  animation-duration:1000s; background-size:1400px 80%; background-position-y:20%;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1400' height='520' preserveAspectRatio='none'%3E%3Cfilter id='c' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.007 .018' numOctaves='4' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 1.9 0 0 0 -.8'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23c)'/%3E%3C/svg%3E");
}
.pthx.is-kdr .pthx-clouds{opacity:.68;}
.pthx.is-kdr .pthx-clouds--far{opacity:.4;}

/* warm light on the cloud tops */
.pthx .pthx-warm{background:linear-gradient(180deg, transparent 45%, rgba(255,150,105,.34) 100%); opacity:0; mix-blend-mode:multiply;}
.pthx.is-kdr .pthx-warm{opacity:1;}

/* ---------- the demo window ---------- */
.pthx .pthx-win{
  position:relative; z-index:1; max-width:780px; margin:0 auto; text-align:left;
  border-radius:16px 16px 0 0; border:2px solid transparent; border-bottom:0;
  background:linear-gradient(var(--card),var(--card)) padding-box, linear-gradient(180deg,rgba(255,255,255,.28),rgba(255,255,255,.08)) border-box;
  box-shadow:0 20px 70px rgba(3,12,24,.55);
}
.pthx.is-kdr .pthx-win{
  background:linear-gradient(var(--card),var(--card)) padding-box,
             conic-gradient(from var(--pthx-rot,0deg),#004aad,#5d8ce6,#a9c8f5,#5d8ce6,#004aad) border-box;
  animation:pthx-rot 5s linear infinite;
}
.pthx .pthx-bar{display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid var(--line); font-size:12.5px; color:var(--mut);}
.pthx .pthx-dots{display:flex; gap:6px;} .pthx .pthx-dots i{width:9px; height:9px; border-radius:50%; background:#33485e;}
.pthx .pthx-bar strong{color:#fff; font-weight:600;}
.pthx .pthx-body{padding:20px 20px 28px; min-height:350px;}

/* OFF: plain feedback */
.pthx .pthx-score{display:flex; align-items:baseline; gap:12px; flex-wrap:wrap;}
.pthx .pthx-score b{font-size:40px; font-weight:800; color:#fff; letter-spacing:-.02em;}
.pthx .pthx-score span{font-size:14px; color:var(--mut);}
.pthx .pthx-q{margin-top:10px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.03); padding:12px 14px; font-size:14px; color:#d5e2ef; display:flex; gap:10px; align-items:flex-start;}
.pthx .pthx-q i{flex:none; width:20px; height:20px; border-radius:50%; font-style:normal; font-size:12px; font-weight:800; display:grid; place-items:center; margin-top:1px;}
.pthx .pthx-q .y{background:rgba(74,222,128,.16); color:var(--ok);}
.pthx .pthx-q .n{background:rgba(248,113,113,.16); color:var(--bad);}
.pthx .pthx-q small{display:block; margin-top:6px; font-size:13px; line-height:1.5; color:var(--mut);}
.pthx .pthx-q small b{color:#fff; font-weight:600;}

/* ON: SmartKDR */
.pthx .pthx-kdr-top{display:flex; align-items:baseline; gap:10px; flex-wrap:wrap;}
.pthx .pthx-kdr-top .pthx-wm{font-size:24px; font-weight:800; letter-spacing:-.02em; background:linear-gradient(90deg,var(--a),var(--b)); -webkit-background-clip:text; background-clip:text; color:transparent;}
.pthx .pthx-kdr-top span{font-size:13px; color:var(--mut);}
.pthx .pthx-lead{margin:8px 0 0; font-size:15px; line-height:1.55; color:#d5e2ef;}
.pthx .pthx-cols{display:grid; grid-template-columns:1.25fr 1fr; gap:14px 24px; margin-top:16px;}
.pthx .pthx-lab{font-size:11px; font-weight:700; letter-spacing:.14em; color:var(--b); margin-bottom:8px;}
.pthx .pthx-item{display:flex; gap:10px; align-items:flex-start; font-size:14px; color:#d5e2ef; padding:9px 0; border-top:1px solid var(--line);}
.pthx .pthx-item small{display:block; margin-top:3px; font-size:12.5px; line-height:1.45; color:var(--mut);}
.pthx .pthx-chip{flex:none; font-size:10px; font-weight:800; letter-spacing:.08em; border-radius:6px; padding:3px 7px; margin-top:1px;}
.pthx .pthx-chip--hi{background:rgba(248,113,113,.16); color:var(--bad);}
.pthx .pthx-chip--md{background:rgba(251,191,36,.16); color:var(--warn);}
.pthx .pthx-tick{flex:none; color:var(--ok); font-weight:800;}

@media (max-width:640px){
  .pthx .pthx-in{padding-top:40px;}
  .pthx .pthx-band{margin-top:28px; padding:72px 14px 0;}
  .pthx .pthx-cols{grid-template-columns:1fr;}
  .pthx .pthx-body{padding:16px 14px 22px; min-height:0;}
  .pthx .pthx-btn{flex:1 1 100%;}
}
@media (prefers-reduced-motion:reduce){
  .pthx *, .pthx *::after{animation:none !important; transition:none !important;}
}

/* Hold our own against the theme's global link, button and heading rules. */
.pthx h1{font-family:inherit; text-transform:none;}
.pthx a.pthx-btn, .pthx a.pthx-btn:hover, .pthx a.pthx-btn:focus, .pthx a.pthx-btn:visited{color:#fff; text-decoration:none;}
.pthx a.pthx-btn--1:hover{filter:brightness(1.08);}
.pthx a.pthx-btn--2:hover{background:rgba(255,255,255,.1);}
.pthx .pthx-switch:hover, .pthx .pthx-switch:focus{background:#31465c; color:inherit;}
.pthx.is-kdr .pthx-switch:hover, .pthx.is-kdr .pthx-switch:focus{background:linear-gradient(90deg,#2f7bf0,#5d8ce6);}
.pthx p{margin-bottom:0;}