/* PilotTrain RPL page: the mini exam card and the flashcard deck (.ptlp).
   This is the stylesheet the page used to carry inline. Only those two
   components still use it, so it can be trimmed down later. */

/* ============================================================
   PilotTrain — RPL landing page (standalone)
   ------------------------------------------------------------
   Fully self-contained. The page root is <div class="ptlp">, so
   nothing here touches the global .pts styles in Additional CSS
   and nothing there touches this page. Editing the global
   sections A-D can no longer break this page, and vice versa.

   Contains: base + hero + buttons + rating + section heads +
   feature grid + steps + CTA + partners + cross-links + the
   question-card component, then the landing additions (rings,
   reveals, mini exam, comparison, flashcards, sticky CTA).
   ============================================================ */

.ptlp{
  --pn:#00172A;
  --ink:#1b2733;
  --muted:#5b6b7c;
  --line:#e3e8ee;
  --accent:#0a66c2;
  --accent-dk:#08508f;
  --soft:#f5f8fb;
  --good:#15803d;
  --amber:#b4820a;
  --dbg:#071320;
  --dbg2:#0c1e2f;
  --dline:rgba(255,255,255,.13);
  --dtext:#e9f1f9;
  --ddim:#9db2c7;
  --dacc:#4da3ff;
  --gold:#ffc94d;

  width:100%;
  color:var(--ink);
  font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  font-size:16px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  padding-bottom:8px;
}
.ptlp *,.ptlp *::before,.ptlp *::after{box-sizing:border-box;}
.ptlp h1,.ptlp h2,.ptlp h3,.ptlp h4{
  margin:0;padding:0;border:0;background:none;
  font-family:inherit;text-transform:none;
}
.ptlp h1::before,.ptlp h1::after,
.ptlp h2::before,.ptlp h2::after,
.ptlp h3::before,.ptlp h3::after{content:none;display:none;}
.ptlp p{margin:0;padding:0;}
.ptlp ul{list-style:none;margin:0;padding:0;}
.ptlp li{list-style:none;margin:0;}
.ptlp img{max-width:100%;height:auto;display:block;}
.ptlp svg{display:block;}
.ptlp a{text-decoration:none;}

.ptlp .wrap{
  padding-left:max(24px, calc(50% - 600px));
  padding-right:max(24px, calc(50% - 600px));
}
.ptlp .sec{margin:0 0 58px;}

.ptlp .hero{
  background:
    radial-gradient(1100px 520px at 10% -10%, rgba(77,163,255,.18), transparent 62%),
    radial-gradient(900px 480px at 94% 2%, rgba(31,122,224,.14), transparent 60%),
    linear-gradient(180deg, var(--dbg2) 0%, var(--dbg) 100%);
  color:var(--dtext);
  border-radius:0 0 22px 22px;
  padding-top:52px;padding-bottom:52px;
  margin:0 0 54px;
  overflow:hidden;
}
.ptlp .hero-in{
  display:grid;grid-template-columns:1.03fr .97fr;
  gap:44px;align-items:center;
}
.ptlp .hero h1,.ptlp .hero h2{color:var(--dtext);}

.ptlp .eyebrow{
  display:inline-flex;align-items:center;gap:9px;
  background:rgba(77,163,255,.14);
  border:1px solid rgba(77,163,255,.32);
  color:var(--dacc);
  font-size:11.5px;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;
  padding:6px 14px;border-radius:999px;margin:0 0 20px;
}
.ptlp h1.hl{
  font-size:44px;line-height:1.08;font-weight:800;
  letter-spacing:-.032em;margin:0 0 16px;
}
.ptlp h1.hl em{
  font-style:normal;
  background:linear-gradient(90deg,var(--dacc) 0%,#9ccdff 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--dacc);
}
.ptlp .hero .sub{font-size:18px;color:var(--ddim);margin:0 0 24px;max-width:52ch;}
.ptlp .hero .sub strong{color:#fff;font-weight:600;}
.ptlp .hero-shot{filter:drop-shadow(0 26px 52px rgba(0,0,0,.5));}

.ptlp .hbul{display:grid;gap:9px;margin:0 0 26px;}
.ptlp .hbul li{display:flex;gap:11px;align-items:flex-start;font-size:15.5px;}
.ptlp .hbul svg{width:18px;height:18px;flex:0 0 auto;margin-top:2px;color:#4ade80;}

.ptlp .btns{display:flex;gap:12px;flex-wrap:wrap;margin:0 0 26px;}
.ptlp .b1{
  background:linear-gradient(90deg,#1f7ae0,var(--dacc));
  color:#fff !important;font-size:16px;font-weight:700;
  padding:15px 30px;border-radius:11px;
  box-shadow:0 10px 26px rgba(31,122,224,.42);
  transition:transform .16s,box-shadow .16s;
}
.ptlp .b1:hover{transform:translateY(-2px);box-shadow:0 14px 32px rgba(31,122,224,.54);}
.ptlp .b2{
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.24);
  color:#fff !important;font-size:16px;font-weight:600;
  padding:15px 26px;border-radius:11px;
  transition:background .16s,transform .16s;
}
.ptlp .b2:hover{background:rgba(255,255,255,.16);transform:translateY(-2px);}

.ptlp .rating{
  display:inline-flex;align-items:center;gap:13px;
  background:rgba(255,255,255,.06);
  border:1px solid var(--dline);
  border-radius:13px;padding:11px 17px;
}
.ptlp .rating .score{font-size:24px;font-weight:800;color:#fff;line-height:1;letter-spacing:-.02em;}
.ptlp .stars{display:flex;gap:2px;}
.ptlp .stars svg{width:15px;height:15px;color:var(--gold);}
.ptlp .rating .rlab{font-size:12.5px;color:var(--ddim);line-height:1.3;}
.ptlp .rating .rlab b{display:block;color:#fff;font-size:13px;font-weight:600;}

.ptlp .shead{text-align:center;margin:0 0 30px;}
.ptlp .shead.left{text-align:left;}
.ptlp .skick{
  font-size:12px;font-weight:700;letter-spacing:.11em;
  text-transform:uppercase;color:var(--accent);margin:0 0 8px;
}
.ptlp h2.stitle{
  font-size:30px;font-weight:800;letter-spacing:-.028em;
  color:var(--pn);margin:0 0 9px;
}
.ptlp .slead{font-size:16.5px;color:var(--muted);margin:0 auto;max-width:64ch;}
.ptlp .shead.left .slead{margin-left:0;}
.ptlp .shead:not(.left) .skick,
.ptlp .shead:not(.left) h2.stitle,
.ptlp .shead:not(.left) .slead{text-align:center !important;}

.ptlp .feats{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.ptlp .feat{
  display:flex;gap:16px;align-items:flex-start;
  background:var(--soft);border:1px solid var(--line);
  border-radius:14px;padding:22px;
}
.ptlp .feat .fic{
  flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  background:#fff;border:1px solid var(--line);color:var(--accent);
  display:flex;align-items:center;justify-content:center;
}
.ptlp .feat .fic svg{width:22px;height:22px;}
.ptlp .feat h3{
  font-size:17.5px;font-weight:700;color:var(--pn);
  letter-spacing:-.012em;margin:0 0 5px;
}
.ptlp .feat p{font-size:15px;color:var(--muted);line-height:1.5;}

.ptlp .demo{
  display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;
  background:var(--soft);border:1px solid var(--line);
  border-radius:18px;padding:30px 32px;
}
.ptlp .demo h2{
  font-size:27px;font-weight:800;color:var(--pn);
  letter-spacing:-.025em;margin:0 0 10px;
}
.ptlp .demo p{font-size:16px;color:var(--muted);margin:0 0 16px;}
.ptlp .demo ul{display:grid;gap:9px;}
.ptlp .demo li{display:flex;gap:10px;align-items:flex-start;font-size:15px;}
.ptlp .demo li svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--good);}

.ptlp .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;}
.ptlp .step{
  background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:22px 20px;
}
.ptlp .step .n{
  width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:14px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  margin:0 0 13px;
}
.ptlp .step h3{
  font-size:17px;font-weight:700;color:var(--pn);
  letter-spacing:-.012em;margin:0 0 5px;
}
.ptlp .step p{font-size:14.5px;color:var(--muted);line-height:1.5;}

.ptlp .cta{
  display:flex;flex-direction:column;align-items:center;
  text-align:center;
  background:linear-gradient(100deg,#f2f8ff,#fafcff);
  border:1px solid #d8e6f6;
  border-radius:18px;padding:36px 32px;
}
.ptlp .cta > *{text-align:center !important;max-width:100%;}
.ptlp .cta h2{
  font-size:28px;font-weight:800;color:var(--pn);
  letter-spacing:-.028em;margin:0 0 9px;
}
.ptlp .cta h2 span{color:var(--accent);}
.ptlp .cta p{font-size:16px;color:var(--muted);margin:0 auto 20px;max-width:58ch;}
.ptlp .cta a{
  display:inline-block;background:var(--pn);color:#fff !important;
  font-size:16.5px;font-weight:700;padding:16px 38px;border-radius:11px;
  transition:background .16s,transform .16s;
}
.ptlp .cta a:hover{background:#0a2740;transform:translateY(-1px);}
.ptlp .cta .fine{font-size:13px;color:var(--muted);margin:12px 0 0;}

.ptlp .partners{
  display:flex;flex-direction:column;align-items:center;
  gap:13px;
  margin:24px 0 0;padding:20px 0 0;
  border-top:1px solid #d8e6f6;
  width:100%;
}
.ptlp .partners .plabel{
  font-size:12px;font-weight:700;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);
}
.ptlp .partners .logos{
  display:flex;align-items:center;justify-content:center;
  gap:28px;flex-wrap:wrap;
}
.ptlp .partners img{
  height:48px;width:auto;opacity:.9;transition:opacity .16s;
}
.ptlp .partners a:hover img{opacity:1;}

.ptlp .also{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;}
.ptlp .also a{
  background:#fff;border:1px solid var(--line);
  border-radius:999px;padding:8px 16px;
  font-size:14px;font-weight:600;color:var(--pn) !important;
  transition:border-color .14s,background .14s,transform .14s;
}
.ptlp .also a:hover{
  border-color:var(--accent);background:var(--soft);
  color:var(--accent) !important;transform:translateY(-1px);
}

@media (max-width:980px){
  .ptlp .demo{grid-template-columns:1fr;gap:24px;}
  .ptlp .steps{grid-template-columns:1fr;}
}
@media (max-width:900px){
  .ptlp .hero{padding-top:38px;padding-bottom:38px;margin-bottom:42px;}
  .ptlp .hero-in{grid-template-columns:1fr;gap:30px;}
  .ptlp .hero-shot{order:-1;}
  .ptlp h1.hl{font-size:34px;}
  .ptlp .hero .sub{font-size:16.5px;}
  .ptlp h2.stitle{font-size:26px;}
  .ptlp .feats{grid-template-columns:1fr;}
  .ptlp .sec{margin-bottom:46px;}
}
@media (max-width:560px){
  .ptlp .hero{border-radius:0 0 16px 16px;padding-top:30px;padding-bottom:32px;}
  .ptlp h1.hl{font-size:28px;}
  .ptlp .btns .b1,.ptlp .btns .b2{width:100%;text-align:center;}
  .ptlp .demo{padding:22px 18px;}
  .ptlp .cta{padding:26px 20px;}
  .ptlp .cta a{width:100%;}
  .ptlp .feat{padding:18px;}
  .ptlp .partners img{height:40px;}
  .ptlp .partners .logos{gap:20px;}
}

/* PilotTrain — interactive question component */
.ptlp .qdemo{
  background:rgba(255,255,255,.05);
  border:1px solid var(--dline);
  border-radius:18px;overflow:hidden;
  box-shadow:0 26px 60px rgba(0,0,0,.45);
}
.ptlp .qdemo.solid{
  background:linear-gradient(180deg,var(--dbg2) 0%,var(--dbg) 100%);
  border-color:rgba(255,255,255,.10);
  box-shadow:0 18px 44px rgba(13,27,42,.24);
}
.ptlp .qdemo .qbar{
  display:flex;align-items:center;gap:7px;
  padding:11px 16px;
  background:rgba(0,0,0,.22);
  border-bottom:1px solid var(--dline);
}
.ptlp .qdemo .dot{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.ptlp .qdemo .qwin{font-size:12.5px;color:var(--ddim);margin:0 0 0 7px;}
.ptlp .qdemo .qbody{padding:20px;}
.ptlp .qdemo .qnum{
  font-size:11px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:var(--dacc);margin:0 0 10px;
}
.ptlp .qdemo .qtext{
  font-size:16.5px;font-weight:600;color:#fff;
  line-height:1.45;margin:0 0 16px;
}
.ptlp .qdemo .qfig{
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.10);
  border-radius:10px;
  padding:10px;
  margin:0 0 16px;
}
.ptlp .qdemo .qfig img{
  display:block;width:100%;height:auto;
  aspect-ratio:908 / 575;
  object-fit:contain;
  border-radius:4px;
}
.ptlp .qdemo .qans{display:grid;gap:9px;}
.ptlp .qdemo .qans button{
  display:flex;align-items:flex-start;gap:10px;
  width:100%;text-align:left;
  padding:12px 14px;border-radius:10px;
  border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.04);
  color:var(--dtext);
  font-family:inherit;font-size:14.5px;line-height:1.4;
  cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
}
.ptlp .qdemo .qans button:hover{background:rgba(255,255,255,.09);border-color:rgba(255,255,255,.3);}
.ptlp .qdemo .qans button:focus-visible{
  outline:3px solid rgba(77,163,255,.55);outline-offset:2px;
}
.ptlp .qdemo .qans button .mk{
  width:17px;height:17px;flex:0 0 auto;margin-top:1px;
  opacity:0;transition:opacity .14s;
}
.ptlp .qdemo .qans button.is-right{
  background:rgba(74,222,128,.14);border-color:rgba(74,222,128,.5);color:#a7e8bf;font-weight:600;
}
.ptlp .qdemo .qans button.is-wrong{
  background:rgba(226,75,74,.14);border-color:rgba(226,75,74,.5);color:#f0a0a0;
}
.ptlp .qdemo .qans button.is-right .mk,
.ptlp .qdemo .qans button.is-wrong .mk{opacity:1;}
.ptlp .qdemo.answered .qans button{cursor:default;pointer-events:none;}
.ptlp .qdemo .qexp{
  display:none;
  margin:14px 0 0;padding:14px 16px;
  background:rgba(77,163,255,.10);
  border-left:3px solid var(--dacc);
  border-radius:0 10px 10px 0;
}
.ptlp .qdemo.answered .qexp{display:block;}
.ptlp .qdemo .qexp b{
  display:block;font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
  color:var(--dacc);margin:0 0 6px;
}
.ptlp .qdemo .qexp p{font-size:14px;line-height:1.6;color:#c8d8e8;margin:0;}
.ptlp .qdemo .qprompt{
  font-size:12.5px;color:#6f8299;margin:14px 0 0;
  display:flex;align-items:flex-start;gap:7px;line-height:1.45;
}
.ptlp .qdemo .qprompt svg{width:14px;height:14px;flex:0 0 auto;margin-top:2px;}
.ptlp .qdemo.answered .qprompt{color:#4ade80;}
@media (max-width:900px){
  .ptlp .qdemo .qbody{padding:16px;}
  .ptlp .qdemo .qtext{font-size:15.5px;}
}

/* E1. The rotating SmartKDR ring.
   A conic gradient painted in the border box over a flat fill in
   the padding box. The angle is a registered custom property so
   the browser can interpolate it; where @property is unsupported
   the fallback 0deg gives a static ring and nothing breaks.
   The light stop (#a9c8f5) is the travelling glint — without it
   the two brand blues are too close and the motion is invisible. */
@property --pt-rot{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}
.ptlp .ptring{
  --ring-bg:#0c2136;
  --pt-rot:0deg;
  border:2px solid transparent;
  background:
    linear-gradient(var(--ring-bg),var(--ring-bg)) padding-box,
    conic-gradient(from var(--pt-rot,0deg),#004aad,#5d8ce6,#a9c8f5,#5d8ce6,#004aad) border-box;
  animation:pt-rot 9s linear infinite;
}
@keyframes pt-rot{to{--pt-rot:360deg;}}

/* E2. Scroll reveal. The .js-anim class is only added when JS,
   IntersectionObserver and full motion are all available, so
   with no JS everything is simply visible. */
.ptlp.js-anim .rev{
  opacity:0;transform:translateY(22px);
  transition:opacity .6s ease,transform .6s ease;
  transition-delay:var(--rvd,0ms);
}
.ptlp.js-anim .rev.in{opacity:1;transform:none;}

/* E3. Hero load-in (CSS only, runs once) */
.ptlp .fu{animation:ptfu .6s cubic-bezier(.2,.7,.3,1) both;animation-delay:var(--fud,0ms);}
@keyframes ptfu{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}

/* E4. Hero additions.
   The pill spins fast on purpose — it is the one loud thing in
   the hero. Everything else around it stays still. */
.ptlp .topline{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 20px;}
.ptlp .topline .eyebrow{margin:0;}
.ptlp .newpill{
  --ring-bg:#0e2740;
  display:inline-flex;align-items:center;gap:9px;
  padding:9px 18px;border-radius:999px;
  font-size:13px;font-weight:700;letter-spacing:.01em;
  color:#eaf3ff !important;
  box-shadow:0 4px 22px rgba(77,163,255,.35);
  animation-duration:3.5s;
  transition:transform .16s,box-shadow .16s;
}
.ptlp .newpill:hover{transform:translateY(-1px);box-shadow:0 6px 28px rgba(77,163,255,.5);}
.ptlp .newpill:focus-visible{outline:3px solid rgba(77,163,255,.55);outline-offset:2px;}
.ptlp .newpill svg{width:14px;height:14px;color:#ffc94d;flex:0 0 auto;}
.ptlp .newpill b{
  color:#a9c8f5;font-weight:800;font-size:11px;
  letter-spacing:.09em;text-transform:uppercase;
}

/* Hero visual: a live SmartKDR report with a flashcard tucked
   behind it, instead of a static screenshot. */
.ptlp .hero-shot{position:relative;}
.ptlp .hero-vis{position:relative;max-width:480px;margin-left:auto;}
.ptlp .hv-fc{
  position:absolute;top:-26px;right:-14px;width:200px;
  transform:rotate(6deg);
  background:linear-gradient(160deg,#132a40 0%,#0a1c2c 100%);
  border:1px solid rgba(255,255,255,.14);
  border-top:4px solid #5d8ce6;
  border-radius:14px;padding:15px;
  box-shadow:0 18px 40px rgba(0,0,0,.45);
}
.ptlp .hv-fc .fclab{
  display:block;margin:0 0 8px;color:#8fb8e6;
  font-size:10px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.ptlp .hv-fc p{font-size:13px;font-weight:600;color:#fff;line-height:1.45;}
.ptlp .kdrcard.hv{position:relative;z-index:1;}
.ptlp .kdrcard.hv .kdr-body{padding:18px;}
.ptlp .kdrcard.hv .kdr-lab:first-of-type{margin-top:12px;}

/* E5. Sample question: cap the diagram height so the card
   stays compact, and the lead-in link beneath it. */
.ptlp .qdemo .qfig img{max-height:200px;}

/* Lead-in link under the sample question */
.ptlp .demo p.qmore{margin:18px 0 0;}
.ptlp .qmore a{
  display:inline-flex;align-items:center;gap:7px;
  color:var(--accent) !important;font-weight:700;font-size:15px;
}
.ptlp .qmore a:hover{text-decoration:underline;}
.ptlp .qmore svg{width:15px;height:15px;flex:0 0 auto;}

/* E6. SmartKDR band */
.ptlp [id]{scroll-margin-top:96px;}
.ptlp .kdrsec{
  background:
    radial-gradient(1000px 460px at 88% -12%, rgba(0,74,173,.38), transparent 62%),
    radial-gradient(760px 420px at 4% 108%, rgba(93,140,230,.16), transparent 58%),
    linear-gradient(180deg,#0c1e2f 0%,#071320 100%);
  color:#e9f1f9;
  border-radius:22px;
  padding-top:54px;padding-bottom:54px;
  overflow:hidden;
}
.ptlp .kdr-in{
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:44px;align-items:center;
}
.ptlp .kdrsec .eyebrow svg{width:12px;height:12px;}
.ptlp .kdrsec h2{
  font-size:30px;font-weight:800;color:#fff;
  letter-spacing:-.028em;line-height:1.15;margin:0 0 12px;
}
.ptlp .kdrsec h2 .kdr-grad{
  color:#7fb1e8;
  background:linear-gradient(90deg,#5d8ce6,#a9c8f5);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ptlp .kdr-lead{font-size:16.5px;color:#9db2c7;margin:0 0 20px;max-width:54ch;}
.ptlp .kdr-lead strong{color:#fff;font-weight:600;}
.ptlp .kdrsec .hbul{margin:0 0 24px;}
.ptlp .kdr-fine{font-size:12.5px;color:#7d92a7;margin:16px 0 0;}

/* E7. The report card */
.ptlp .kdrcard{
  --pt-rot:0deg;
  border:2px solid transparent;
  border-radius:18px;overflow:hidden;
  background:
    linear-gradient(180deg,#102436 0%,#0a1a29 100%) padding-box,
    conic-gradient(from var(--pt-rot,0deg),#004aad,#5d8ce6,#a9c8f5,#5d8ce6,#004aad) border-box;
  animation:pt-rot 5s linear infinite;
  box-shadow:0 30px 70px rgba(0,0,0,.5);
}
.ptlp .kdr-bar{
  display:flex;align-items:center;gap:7px;
  padding:11px 16px;
  background:rgba(0,0,0,.25);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.ptlp .kdr-bar .kd{width:9px;height:9px;border-radius:50%;flex:0 0 auto;}
.ptlp .kdr-bar .kd.r{background:#e24b4a;}
.ptlp .kdr-bar .kd.y{background:#efa027;}
.ptlp .kdr-bar .kd.g{background:#5dcaa5;}
.ptlp .kdr-bar span{font-size:12.5px;color:#9db2c7;margin-left:7px;}
.ptlp .kdr-bar em{margin-left:auto;font-style:normal;font-size:12px;color:#6f8299;}
.ptlp .kdr-body{padding:20px;}
.ptlp .kdr-top{display:flex;align-items:baseline;gap:12px;margin:0 0 12px;}
.ptlp .kdr-wm{
  font-size:19px;font-weight:800;letter-spacing:-.02em;
  width:fit-content;color:#7fb1e8;
  background:linear-gradient(90deg,#7fb1e8,#c8def9);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.ptlp .kdr-meta{margin-left:auto;font-size:12.5px;color:#9db2c7;white-space:nowrap;}
.ptlp .kdr-scan{display:flex;align-items:center;gap:10px;margin:0 0 6px;}
.ptlp .kdr-scan b{
  flex:1 1 auto;height:3px;border-radius:2px;overflow:hidden;
  background:rgba(255,255,255,.12);
}
.ptlp .kdr-scan i{display:block;height:100%;width:100%;background:linear-gradient(90deg,#5d8ce6,#a9c8f5);}
.ptlp .kdr-scan span{flex:0 0 auto;font-size:11.5px;color:#7d92a7;}
.ptlp .kdr-lab{
  font-size:10.5px;font-weight:800;letter-spacing:.11em;
  text-transform:uppercase;color:#7fb1e8;margin:16px 0 9px;
}
.ptlp .kdr-item{display:flex;gap:10px;align-items:flex-start;margin:0 0 9px;}
.ptlp .kdr-item:last-of-type{margin-bottom:0;}
.ptlp .kdr-item.ok svg{width:16px;height:16px;flex:0 0 auto;margin-top:2px;color:#4ade80;}
.ptlp .kdr-item.ok span{font-size:14.5px;color:#dbe8f4;}
.ptlp .kdr-item .chip{
  flex:0 0 auto;margin-top:2px;
  font-size:9.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
}
.ptlp .kdr-item .chip.hi{background:rgba(226,75,74,.18);border:1px solid rgba(226,75,74,.45);color:#ff9d9c;}
.ptlp .kdr-item .chip.md{background:rgba(239,160,39,.16);border:1px solid rgba(239,160,39,.4);color:#f6c980;}
.ptlp .kdr-item b{display:block;font-size:14.5px;font-weight:600;color:#fff;line-height:1.35;}
.ptlp .kdr-item small{display:block;font-size:12.5px;color:#93a8bd;line-height:1.45;margin-top:2px;}
.ptlp .kdr-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  margin-top:18px;padding-top:14px;
  border-top:1px solid rgba(255,255,255,.1);
}
.ptlp .kdr-foot .tam{
  display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,201,77,.14);border:1px solid rgba(255,201,77,.4);
  color:#ffd77e;font-size:12.5px;font-weight:700;
  padding:6px 12px;border-radius:999px;
}
.ptlp .kdr-foot .tam svg{width:12px;height:12px;}
.ptlp .kdr-foot > span:last-child{font-size:12px;color:#7d92a7;}

/* Report rows animate in once the card scrolls into view.
   Base state is visible, so no JS means a complete card. */
.ptlp.js-anim .kdrcard .kdr-scan i{width:0;}
.ptlp.js-anim .kdrcard.in .kdr-scan i{animation:kdrfill .9s .3s ease forwards;}
@keyframes kdrfill{to{width:100%;}}
.ptlp.js-anim .kdrcard .kdr-item{opacity:0;transform:translateY(9px);}
.ptlp.js-anim .kdrcard.in .kdr-item{animation:kdrpop .5s ease forwards;animation-delay:var(--kd,.6s);}
@keyframes kdrpop{to{opacity:1;transform:none;}}

/* E8. Flashcards */
.ptlp .fcgrid{display:grid;grid-template-columns:1.02fr .98fr;gap:44px;align-items:center;}
.ptlp .fccopy h2{
  font-size:27px;font-weight:800;color:var(--pn);
  letter-spacing:-.025em;margin:0 0 10px;
}
.ptlp .fccopy > p{font-size:16px;color:var(--muted);margin:0 0 16px;max-width:54ch;}
.ptlp .fccopy ul{display:grid;gap:9px;}
.ptlp .fccopy li{display:flex;gap:10px;align-items:flex-start;font-size:15px;}
.ptlp .fccopy li svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--good);}

.ptlp .fcdeck{position:relative;}
.ptlp .fcdeck::before,
.ptlp .fcdeck::after{
  content:"";position:absolute;left:10px;right:10px;top:10px;bottom:10px;
  border-radius:16px;background:#fff;border:1px solid var(--line);
  box-shadow:0 10px 24px rgba(13,27,42,.06);
}
.ptlp .fcdeck::before{transform:rotate(-3deg) translateY(10px);}
.ptlp .fcdeck::after{transform:rotate(2deg) translateY(6px);}
.ptlp .fcstage{position:relative;z-index:1;perspective:1300px;}
.ptlp .fcard{
  position:relative;width:100%;
  aspect-ratio:8/5;min-height:270px;
  transform-style:preserve-3d;
  transition:transform .65s cubic-bezier(.25,.7,.3,1);
  cursor:pointer;border-radius:16px;
}
.ptlp .fcard:focus-visible{outline:3px solid rgba(10,102,194,.5);outline-offset:4px;}
.ptlp .fcard.flip{transform:rotateY(180deg);}
.ptlp .fcface{
  position:absolute;inset:0;
  backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:28px 26px;
}
.ptlp .fcface::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
}
.ptlp .fcfront{
  background:linear-gradient(160deg,#132a40 0%,#0a1c2c 100%);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 40px rgba(13,27,42,.28);
}
.ptlp .fcfront::before{background:linear-gradient(90deg,#5d8ce6,#004aad);}
.ptlp .fcback{
  background:#fff;border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(13,27,42,.14);
  transform:rotateY(180deg);
}
.ptlp .fcback::before{background:linear-gradient(90deg,#a9c8f5,#5d8ce6);}
.ptlp .fclab{
  font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.ptlp .fcfront .fclab{color:#8fb8e6;}
.ptlp .fcback .fclab{color:var(--accent);}
.ptlp .fctext{max-width:34ch;}
.ptlp .fcfront .fctext{font-size:21px;font-weight:600;line-height:1.45;color:#fff;}
.ptlp .fcback .fctext{font-size:19px;font-weight:600;line-height:1.5;color:var(--ink);}

.ptlp .fcctl{display:flex;align-items:center;gap:14px;margin:18px 2px 0;}
.ptlp .fchint{
  display:inline-flex;align-items:center;gap:7px;
  font-size:13px;color:var(--muted);
}
.ptlp .fchint svg{width:14px;height:14px;flex:0 0 auto;}
.ptlp .fccount{
  margin-left:auto;font-size:13.5px;font-weight:700;
  color:var(--pn);letter-spacing:.02em;
}
.ptlp .fcnext{
  flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#fff;border:1px solid var(--line);color:var(--pn);
  cursor:pointer;box-shadow:0 4px 14px rgba(13,27,42,.1);
  transition:border-color .14s,color .14s,box-shadow .14s,transform .14s;
}
.ptlp .fcnext:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-1px);}
.ptlp .fcnext:focus-visible{outline:3px solid rgba(10,102,194,.4);outline-offset:2px;}
.ptlp .fcnext svg{width:18px;height:18px;}

/* E9. Feature grid additions */
.ptlp .feat .fic.kdrfic{
  background:linear-gradient(135deg,#5d8ce6,#004aad);
  border:0;color:#fff;
}
.ptlp .newtag{
  display:inline-block;margin-left:8px;vertical-align:2px;
  font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  padding:3px 8px;border-radius:999px;
  background:linear-gradient(90deg,#5d8ce6,#004aad);color:#fff;
}

/* E10. Four-step loop */
.ptlp .steps.four{grid-template-columns:repeat(4,1fr);}
@media (max-width:1050px){.ptlp .steps.four{grid-template-columns:repeat(2,1fr);}}
@media (max-width:640px){.ptlp .steps.four{grid-template-columns:1fr;}}

/* E11. CTA pill */
.ptlp .ctapill{
  --ring-bg:#ffffff;
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 15px;border-radius:999px;
  font-size:12.5px;font-weight:700;color:var(--pn);
  margin:0 0 16px;
}
.ptlp .ctapill svg{width:13px;height:13px;color:#004aad;flex:0 0 auto;}

/* E12. Responsive */
@media (min-width:981px){
  .ptlp .fcgrid .fcdemo{order:-1;}
}
@media (max-width:980px){
  .ptlp .kdr-in{grid-template-columns:1fr;gap:30px;}
  .ptlp .fcgrid{grid-template-columns:1fr;gap:30px;}
  .ptlp .kdrsec{padding-top:42px;padding-bottom:42px;}
}
@media (max-width:900px){
  .ptlp .hero-vis{margin:0 auto;}
}
@media (max-width:560px){
  .ptlp .qdemo .qfig img{max-height:160px;}
  .ptlp .kdrsec{border-radius:16px;}
  .ptlp .hv-fc{top:-18px;right:2px;width:168px;padding:12px;}
  .ptlp .kdr-body{padding:16px;}
  .ptlp .kdr-meta{white-space:normal;}
  .ptlp .fcard{min-height:250px;}
  .ptlp .fcface{padding:22px 18px;}
  .ptlp .fcfront .fctext{font-size:18px;}
}

/* E14. Mini exam.
   Lives inside the qdemo card. Three panes (start, run, report)
   swapped by JS; the report reuses the kdr-* classes and the card
   itself earns the rotating ring once the report is showing. */
.ptlp .mini-timer{
  margin-left:auto;font-size:12.5px;font-weight:700;color:#9db2c7;
  font-variant-numeric:tabular-nums;letter-spacing:.04em;
}
.ptlp .mini-timer.warn{color:#f6c980;}
.ptlp .mini-timer.crit{color:#ff9d9c;}
.ptlp .mini-btn{
  display:inline-flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#1f7ae0,#4da3ff);
  color:#fff;border:0;border-radius:10px;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;line-height:1.3;
  padding:11px 22px;
  box-shadow:0 8px 20px rgba(31,122,224,.35);
  transition:transform .15s,box-shadow .15s;
}
.ptlp .mini-btn:hover{transform:translateY(-1px);box-shadow:0 10px 26px rgba(31,122,224,.45);}
.ptlp .mini-btn:focus-visible{outline:3px solid rgba(77,163,255,.55);outline-offset:2px;}
.ptlp .mini-btn.big{padding:14px 28px;font-size:15.5px;margin-top:16px;}
.ptlp .mini-nav{display:flex;gap:7px;margin:0 0 14px;}
.ptlp .mini-nav button{
  width:28px;height:28px;border-radius:50%;padding:0;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.2);
  color:#9db2c7;font-family:inherit;font-size:12px;font-weight:700;
  cursor:pointer;
  transition:border-color .14s,background .14s,color .14s;
}
.ptlp .mini-nav button:hover{border-color:rgba(255,255,255,.45);color:#fff;}
.ptlp .mini-nav button.ans{
  background:rgba(77,163,255,.18);
  border-color:rgba(77,163,255,.5);color:#cfe3fb;
}
.ptlp .mini-nav button.cur{
  border-color:var(--dacc);color:#fff;
  box-shadow:0 0 0 2px rgba(77,163,255,.25);
}
.ptlp .mini-nav button:focus-visible{outline:2px solid rgba(77,163,255,.6);outline-offset:2px;}
.ptlp .qdemo.mini .qans button .rb{
  flex:0 0 auto;width:16px;height:16px;margin-top:2px;border-radius:50%;
  border:2px solid rgba(255,255,255,.3);
  transition:border-color .14s,background .14s;
}
.ptlp .qdemo.mini .qans button.sel{
  border-color:rgba(77,163,255,.6);
  background:rgba(77,163,255,.14);color:#fff;
}
.ptlp .qdemo.mini .qans button.sel .rb{
  border-color:var(--dacc);background:var(--dacc);
  box-shadow:inset 0 0 0 3px #0c2136;
}
.ptlp .mini-actions{display:flex;justify-content:flex-end;margin:14px 0 0;}
.ptlp .qdemo.mini .qnum:focus,
.ptlp .qdemo.mini [data-mrep]:focus{outline:none;}

/* Report state: the card earns the SmartKDR ring */
.ptlp .qdemo.mini.done{
  --pt-rot:0deg;
  border:2px solid transparent;
  background:
    linear-gradient(180deg,var(--dbg2) 0%,var(--dbg) 100%) padding-box,
    conic-gradient(from var(--pt-rot,0deg),#004aad,#5d8ce6,#a9c8f5,#5d8ce6,#004aad) border-box;
  animation:pt-rot 5s linear infinite;
}
.ptlp .qdemo.mini.done .kdr-item{
  opacity:0;animation:kdrpop .5s ease forwards;animation-delay:var(--kd,.2s);
}
.ptlp .qdemo.mini.done .qexp{display:block;}
/* Worked answers collapse to one line each so a low score
   doesn't produce a tower of text. */
.ptlp .qdemo.mini details.qexp{margin-top:10px;padding:10px 14px;}
.ptlp .qdemo.mini details.qexp summary{
  cursor:pointer;list-style:none;
  display:flex;align-items:center;gap:8px;
}
.ptlp .qdemo.mini details.qexp summary::-webkit-details-marker{display:none;}
.ptlp .qdemo.mini details.qexp summary b{margin:0;}
.ptlp .qdemo.mini details.qexp summary::after{
  content:"";margin-left:auto;flex:0 0 auto;
  width:7px;height:7px;
  border-right:2px solid var(--dacc);border-bottom:2px solid var(--dacc);
  transform:rotate(45deg);transition:transform .15s;
}
.ptlp .qdemo.mini details.qexp[open] summary::after{transform:rotate(-135deg);}
.ptlp .qdemo.mini details.qexp summary:focus-visible{outline:2px solid rgba(77,163,255,.55);outline-offset:2px;border-radius:4px;}
.ptlp .qdemo.mini details.qexp p{margin-top:9px;}
.ptlp .qdemo.mini .kdr-lab{margin:14px 0 8px;}
.ptlp .qdemo.mini .kdr-item{margin-bottom:8px;}
.ptlp .mini-clean{font-size:14.5px;color:#dbe8f4;margin:0;}
.ptlp .kdr-foot .mini-cta{
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(90deg,#1f7ae0,#4da3ff);
  color:#fff !important;font-size:13.5px;font-weight:700;
  padding:10px 18px;border-radius:9px;white-space:nowrap;
  box-shadow:0 8px 20px rgba(31,122,224,.35);
  transition:transform .15s;
}
.ptlp .kdr-foot .mini-cta:hover{transform:translateY(-1px);}
.ptlp .mini-foot{flex-direction:column;align-items:stretch;gap:12px;}
.ptlp .mini-foot span{font-size:14px;color:#c8d8e8;line-height:1.5;}
.ptlp .mini-retry{
  display:block;margin:12px auto 0;
  background:none;border:0;cursor:pointer;
  font-family:inherit;font-size:12.5px;font-weight:600;color:#6f8299;
  text-decoration:underline;
}
.ptlp .mini-retry:hover{color:#9db2c7;}
.ptlp .mini-retry:focus-visible{outline:2px solid rgba(77,163,255,.5);outline-offset:2px;}
@media (max-width:560px){
  .ptlp .kdr-foot{flex-direction:column;align-items:flex-start;}
  .ptlp .kdr-foot .mini-cta{width:100%;justify-content:center;}
}

/* E14b. Stacked mini-exam section: copy above, a width-capped card
   below, and a two-column report so a bad score grows wide, not tall. */
.ptlp .demo.demo-stack{grid-template-columns:1fr;gap:26px;}
.ptlp .demo-stack .dcopy{max-width:640px;margin:0 auto;text-align:center;}
.ptlp .demo-stack .dcopy .skick{text-align:center;}
.ptlp .demo-stack .qdemo{width:100%;max-width:760px;margin:0 auto;}
.ptlp .rep-cols{
  display:grid;grid-template-columns:1fr 1fr;
  gap:9px 26px;align-items:start;
}
.ptlp .rep-cols .kdr-item{margin:0;}
.ptlp .rep-none{font-size:13.5px;color:#8296aa;line-height:1.5;margin:0;}
.ptlp .rep-why{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
  margin-top:14px;
}
.ptlp .qdemo.mini .rep-why details.qexp{margin-top:0;}
@media (max-width:640px){
  .ptlp .rep-cols{grid-template-columns:1fr;}
  .ptlp .rep-why{grid-template-columns:1fr;}
}

/* E15. Sample vs real comparison (SmartKDR section) */
.ptlp .vs-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:0 16px;}
.ptlp .vs-h{
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#7d92a7;padding:0 0 10px;
}
.ptlp .vs-h.real{color:#7fb1e8;}
.ptlp .vs-a,.ptlp .vs-b{
  padding:11px 0;border-top:1px solid rgba(255,255,255,.09);
  font-size:13.5px;line-height:1.45;
}
.ptlp .vs-a{color:#8296aa;}
.ptlp .vs-b{color:#fff;font-weight:600;display:flex;gap:8px;align-items:flex-start;}
.ptlp .vs-b svg{width:15px;height:15px;flex:0 0 auto;margin-top:2px;color:#4ade80;}
.ptlp .kdr-foot.vs-foot{margin-top:14px;}
.ptlp .kdr-foot.vs-foot span{font-size:12.5px;color:#9db2c7;}

/* E16. Sticky mobile CTA */
.ptlp .mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:9999;
  display:none;align-items:center;gap:12px;
  padding:10px 16px calc(10px + env(safe-area-inset-bottom));
  background:rgba(7,19,32,.94);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.14);
  transform:translateY(102%);visibility:hidden;
  transition:transform .3s ease,visibility .3s;
}
.ptlp .mcta.on{transform:none;visibility:visible;}
@media (max-width:768px){
  .ptlp .mcta{display:flex;}
}
.ptlp .mcta-price{flex:1 1 auto;min-width:0;font-size:12px;color:#9db2c7;line-height:1.35;}
.ptlp .mcta-price b{display:block;font-size:13.5px;font-weight:700;color:#fff;}
.ptlp .mcta-btn{
  flex:0 0 auto;
  background:linear-gradient(90deg,#1f7ae0,#4da3ff);
  color:#fff !important;font-size:14.5px;font-weight:700;
  padding:12px 22px;border-radius:10px;white-space:nowrap;
  box-shadow:0 6px 18px rgba(31,122,224,.4);
}
.ptlp .mcta-btn:focus-visible{outline:3px solid rgba(77,163,255,.6);outline-offset:2px;}

/* E13. Reduced motion — everything lands in its final state */
@media (prefers-reduced-motion:reduce){
  .ptlp .ptring,.ptlp .kdrcard{animation:none;}
  .ptlp .fu{animation:none;}
  .ptlp .fcard{transition:none;}
  .ptlp.js-anim .rev{opacity:1;transform:none;transition:none;}
  .ptlp.js-anim .kdrcard .kdr-scan i{width:100%;animation:none;}
  .ptlp.js-anim .kdrcard .kdr-item{opacity:1;transform:none;animation:none;}
  .ptlp .qdemo.mini.done{animation:none;}
  .ptlp .qdemo.mini.done .kdr-item{opacity:1;animation:none;}
  .ptlp .mcta{transition:none;}
}