/* ============================================================
   Pick The Level™ — homepage section for honorpro.com
   Loaded as its own stylesheet (not merged into style.css).
   Fonts come from the existing style.css Google Fonts imports;
   the pack's fonts.css is not used.

   Every class carries the ptl- prefix and every rule is written
   against a class, so it drops into the Bootstrap page without
   touching anything else — and nothing there reaches in.

   RULE: no element-type resets (`.ptl p{margin:0}` and friends).
   That selector is (0,1,1) and silently outranks every
   `.ptl-x{margin-top}` (0,1,0); it once flattened this whole
   column to zero spacing. Each class sets its own margin instead.
   ============================================================ */
.ptl[hidden]{display:none !important}
.ptl{
  --ptl-navy:#0B1020;--ptl-line:#232C48;--ptl-line-soft:rgba(255,255,255,.10);
  --ptl-text-2:#9CA3AF;--ptl-text-3:#8F8C9D;
  --ptl-cyan:#20F0FF;--ptl-orange:#FF4D00;--ptl-orange-2:#FF6A2B;--ptl-gold:#FFC83D;
  --ptl-up:#0BE36C;--ptl-down:#E03528;
  --ptl-f-ui:"Instrument Sans",system-ui,sans-serif;--ptl-f-d:"Bai Jamjuree",system-ui,sans-serif;
  --ptl-ease:cubic-bezier(.2,.7,.2,1);
  display:block;width:100%;box-sizing:border-box;margin:0;padding:0 0 80px;
  color:#fff;font:400 16px/1.5 var(--ptl-f-ui);-webkit-font-smoothing:antialiased;
  position:relative;z-index:2;container-type:inline-size}
.ptl *,.ptl *::before,.ptl *::after{box-sizing:border-box}
.ptl-i{display:inline-block;width:16px;height:16px;flex:none;vertical-align:middle}
.ptl-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.ptl-wrap{max-width:1320px;margin:0 auto;padding:0 24px}
.ptl > .container{max-width:1320px} /* site container: body already has --page-gutter */

/* ---------- the band ---------- */
.ptl-band{position:relative;overflow:clip;border-radius:30px;border:1px solid var(--ptl-line);isolation:isolate;perspective:1400px;
  background:
    radial-gradient(60% 55% at 100% 50%,rgba(255,200,61,.13) 0%,rgba(255,200,61,0) 70%),
    radial-gradient(90% 40% at 50% 0%,rgba(75,43,224,.30) 0%,rgba(75,43,224,0) 100%),
    linear-gradient(90deg,#10173A 0%,#0B1020 100%);
  display:grid;grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);grid-template-areas:"copy art" "foot foot";align-items:stretch}
.ptl-grid{position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size:50px 50px;-webkit-mask-image:linear-gradient(90deg,#000 0%,transparent 55%);mask-image:linear-gradient(90deg,#000 0%,transparent 55%)}

/* ---------- copy ---------- */
.ptl-copy{grid-area:copy;position:relative;z-index:2;align-self:center;padding:60px 0 60px 52px}
.ptl-eyebrow{margin:0;display:flex;align-items:center;flex-wrap:wrap;gap:12px;font:600 15px/1 var(--ptl-f-d);letter-spacing:.02em;color:var(--ptl-text-3)}
.ptl-eyebrow-k{display:inline-flex;align-items:center;gap:8px;color:var(--ptl-cyan)}
.ptl-eyebrow-k .ptl-i{width:18px;height:18px}
.ptl-sep{display:inline-block;width:1px;height:14px;background:rgba(255,255,255,.22)}
.ptl-h2{margin:20px 0 0;font:600 44px/1.14 var(--ptl-f-ui);letter-spacing:-.02em;color:#fff}
.ptl-h2 em{font-style:normal;color:var(--ptl-orange);white-space:nowrap}
.ptl-h2 br{display:block}
.ptl-w,.ptl-w>span{display:inline-block}                       /* word wrappers, added by the script */
.ptl-p{margin:20px 0 0;font:400 18px/1.6 var(--ptl-f-ui);color:var(--ptl-text-2);max-width:min(100%,52ch)}
.ptl-p b{color:#fff;font-weight:600}

/* the counter: live predictions, every digit a rolling strip */
.ptl-count{position:relative;margin:32px 0 0;display:flex;width:fit-content;align-items:center;gap:14px;height:52px;padding:0 22px 0 18px;
  border:1px solid var(--ptl-line-soft);border-radius:30px;background:rgba(8,12,24,.55)}
.ptl-count-l{font:500 14px/1 var(--ptl-f-ui);color:var(--ptl-text-2);white-space:nowrap}
.ptl-odo{display:inline-flex;align-items:center;font:600 24px/1 var(--ptl-f-d);color:#fff;font-variant-numeric:tabular-nums}
.ptl-od{display:inline-block;height:1em;width:.6em;overflow:hidden;text-align:center}
.ptl-od>span{display:block;transform:translateY(calc(var(--n,0) * -1em));transition:transform .9s var(--ptl-ease)}
.ptl-od>span>span{display:block;height:1em;line-height:1em}
.ptl-oc{display:inline-block;width:.28em;text-align:center;color:var(--ptl-text-3)}
.ptl-bump{position:absolute;right:16px;top:-12px;font:600 12px/1 var(--ptl-f-d);color:var(--ptl-up);background:#0F2A22;border:1px solid rgba(11,227,108,.35);border-radius:6px;padding:4px 6px;pointer-events:none;animation:ptl-bump 1.4s var(--ptl-ease) forwards}
@keyframes ptl-bump{0%{opacity:0;transform:translateY(8px)}20%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-16px)}}

/* buttons */
.ptl-btns{margin:28px 0 0;display:flex;flex-wrap:wrap;gap:12px}
.ptl-btn-o,.ptl-btn-g{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:10px;height:54px;padding:0 30px;
  border-radius:30px;font:600 16px/1 var(--ptl-f-d);white-space:nowrap;text-decoration:none;
  transition:transform .25s var(--ptl-ease),background-color .25s,border-color .25s,box-shadow .25s}
.ptl-btn-o{background:var(--ptl-orange);color:#fff;border:1px solid var(--ptl-orange);box-shadow:0 10px 28px -12px rgba(255,77,0,.8)}
.ptl-btn-o:hover,.ptl-btn-o:focus-visible{background:var(--ptl-orange-2);border-color:var(--ptl-orange-2);color:#fff;transform:translateY(-2px);box-shadow:0 18px 36px -12px rgba(255,77,0,1)}
.ptl-btn-o::after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.38),transparent);transform:skewX(-18deg);transition:left .7s ease}
.ptl-btn-o:hover::after{left:125%}
.ptl-btn-g{background:rgba(255,255,255,.02);color:#fff;border:1px solid rgba(255,255,255,.26)}
.ptl-btn-g:hover,.ptl-btn-g:focus-visible{color:#fff;background:rgba(255,255,255,.08);border-color:#fff;transform:translateY(-2px)}
.ptl-btn-o .ptl-i{transition:transform .25s var(--ptl-ease)}
.ptl-btn-o:hover .ptl-i{transform:translateX(4px)}
.ptl-btn-o:focus-visible,.ptl-btn-g:focus-visible,.ptl-chip:focus-visible{outline:2px solid var(--ptl-cyan);outline-offset:3px}

/* chips — one row on desktop, each a link into the landing page */
.ptl-chips{margin:22px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.ptl-chips>li{margin:0;padding:0;display:flex}
.ptl-chip{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:6px;height:36px;padding:0 13px 0 10px;
  border:1px solid rgba(32,240,255,.42);border-radius:30px;background:rgba(32,240,255,.05);
  color:var(--ptl-cyan);font:600 13px/1 var(--ptl-f-d);white-space:nowrap;text-decoration:none;
  transition:transform .3s var(--ptl-ease),background-color .3s,border-color .3s,box-shadow .3s,color .3s,opacity .3s}
.ptl-chip::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(100deg,transparent 30%,rgba(32,240,255,.32) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s var(--ptl-ease)}
.ptl-chip:hover,.ptl-chip:focus-visible{color:#fff;border-color:var(--ptl-cyan);background:rgba(32,240,255,.14);transform:translateY(-2px);
  box-shadow:0 0 0 4px rgba(32,240,255,.08),0 12px 24px -12px rgba(32,240,255,.75)}
.ptl-chip:hover::before{transform:translateX(120%)}
.ptl-chips:hover .ptl-chip:not(:hover){opacity:.55}
.ptl-chip .ptl-i{width:15px;height:15px;color:var(--ptl-cyan);transition:transform .4s var(--ptl-ease)}
.ptl-chip:hover .ptl-i{transform:scale(1.18) rotate(-10deg)}
.ptl-chip .ptl-i *{stroke-dasharray:90;stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ptl-ease)}
.ptl-chips.ptl-pre .ptl-i *{stroke-dashoffset:90}               /* from-state, only ever set by the script */

/* ---------- art: the ring and the image share ONE square box, so their centres are the same point ---------- */
.ptl-art{grid-area:art;position:relative;z-index:1;display:flex;align-items:center;justify-content:center;padding:28px 48px 28px 0;
  transform-style:preserve-3d;transform:rotateX(var(--ptl-rx,0deg)) rotateY(var(--ptl-ry,0deg));transition:transform .4s ease-out}
.ptl-orb{position:relative;width:min(100%,520px);aspect-ratio:1/1;display:grid;place-items:center}
.ptl-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;
  transform:translate(calc(var(--ptl-tx,0px) * -.4),calc(var(--ptl-ty,0px) * -.4));transition:transform .5s ease-out}
.ptl-ring circle{fill:none}
.ptl-r1{stroke:rgba(255,200,61,.22);stroke-width:1.5;stroke-dasharray:2 10;transform-origin:50% 50%;animation:ptl-spin 70s linear infinite}
.ptl-r2{stroke:rgba(32,240,255,.10);stroke-width:8;stroke-dasharray:1 22;transform-origin:50% 50%;animation:ptl-spin 110s linear infinite reverse}
.ptl-r3{stroke:rgba(255,255,255,.05);stroke-width:1}
.ptl-arc{stroke:var(--ptl-orange);stroke-width:3;stroke-linecap:round;stroke-dasharray:var(--ptl-arc,0) 100;transform:rotate(-90deg);transform-origin:50% 50%;
  transition:stroke-dasharray 1.6s var(--ptl-ease);filter:drop-shadow(0 0 6px rgba(255,77,0,.8));animation:ptl-arcglow 3s ease-in-out infinite}
@keyframes ptl-spin{to{transform:rotate(360deg)}}
@keyframes ptl-arcglow{50%{filter:drop-shadow(0 0 14px rgba(255,77,0,1))}}
.ptl-fig{position:relative;width:76%;margin:0;animation:ptl-float 7s ease-in-out infinite;will-change:transform}
.ptl-img{display:block;width:100%;height:auto;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55))}
@keyframes ptl-float{0%,100%{transform:translateY(5px)}50%{transform:translateY(-5px)}}   /* symmetric: rests on centre */
/* the light sweep, masked to the artwork so it never paints on the background */
.ptl-sweep{display:none}
.ptl-has-sweep .ptl-sweep{display:block;position:absolute;inset:0;pointer-events:none;opacity:0;mix-blend-mode:screen;
  -webkit-mask:var(--ptl-art) center/contain no-repeat;mask:var(--ptl-art) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.75) 50%,transparent 60%);background-size:260% 100%;background-position:120% 0;
  animation:ptl-sweep 7s ease-in-out infinite 1.2s}
@keyframes ptl-sweep{0%{background-position:120% 0;opacity:0}6%{opacity:1}34%{background-position:-20% 0;opacity:1}40%{opacity:0;background-position:-20% 0}100%{opacity:0;background-position:-20% 0}}
/* the live tag */
.ptl-tag{position:absolute;right:44px;bottom:40px;z-index:3;display:grid;grid-template-columns:auto auto;gap:4px 12px;align-items:center;margin:0;
  background:rgba(8,12,24,.86);border:1px solid var(--ptl-line);border-radius:14px;padding:12px 16px;backdrop-filter:blur(8px);
  transform:translate3d(var(--ptl-tx,0px),var(--ptl-ty,0px),30px);transition:transform .4s ease-out}
.ptl-tag.ptl-tick{animation:ptl-tick .5s var(--ptl-ease)}
@keyframes ptl-tick{30%{transform:translate3d(var(--ptl-tx,0px),var(--ptl-ty,0px),30px) scale(1.04)}}
.ptl-tag-l{grid-column:1/-1;display:flex;align-items:center;gap:8px;font:600 11px/1 var(--ptl-f-d);letter-spacing:.14em;color:var(--ptl-text-3)}
.ptl-tag-v{font:600 24px/1 var(--ptl-f-d);color:#fff;font-variant-numeric:tabular-nums}
.ptl-tag-d{font:600 13px/1 var(--ptl-f-d);font-style:normal;padding:4px 8px;border-radius:8px;background:rgba(11,227,108,.14)}
.ptl-tag-d.ptl-dn{background:rgba(224,53,40,.16)}
.ptl-up{color:var(--ptl-up)}.ptl-dn{color:var(--ptl-down)}
.ptl-flash-up{animation:ptl-fup .6s ease-out}.ptl-flash-dn{animation:ptl-fdn .6s ease-out}
@keyframes ptl-fup{0%{color:var(--ptl-up)}100%{color:inherit}}
@keyframes ptl-fdn{0%{color:var(--ptl-down)}100%{color:inherit}}
.ptl-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--ptl-up);flex:none;animation:ptl-pulse 1.6s ease-out infinite}
@keyframes ptl-pulse{0%{box-shadow:0 0 0 0 rgba(11,227,108,.55)}100%{box-shadow:0 0 0 9px rgba(11,227,108,0)}}

/* ---------- foot: the winners ticker ---------- */
.ptl-foot{grid-area:foot;position:relative;z-index:2;border-top:1px solid var(--ptl-line-soft);background:rgba(8,12,24,.35)}
.ptl-marq{overflow:hidden;padding:13px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ptl-marq-l{margin:0;padding:0;list-style:none;display:flex;gap:44px;width:max-content;animation:ptl-marq 48s linear infinite}
.ptl-marq:hover .ptl-marq-l{animation-play-state:paused}
.ptl-marq-l>li{display:inline-flex;align-items:center;gap:10px;margin:0;font:400 13px/1 var(--ptl-f-ui);color:var(--ptl-text-2);white-space:nowrap}
.ptl-marq-d{font:600 11px/1 var(--ptl-f-d);letter-spacing:.12em;color:var(--ptl-text-3)}
.ptl-marq-v{font-variant-numeric:tabular-nums;color:#fff}
.ptl-marq-p{font:600 12px/1 var(--ptl-f-d);color:var(--ptl-up);background:rgba(11,227,108,.12);border-radius:6px;padding:4px 7px}
.ptl-marq-l .ptl-i{width:12px;height:12px;color:var(--ptl-gold)}
@keyframes ptl-marq{to{transform:translateX(-50%)}}

/* entrance transition (from-states are set by the script, never here) */
.ptl-rvl{transition:opacity .7s ease,transform .7s var(--ptl-ease)}

/* ---------- tablet + phone: container queries, so the section sizes to its own column ---------- */
@container (max-width: 1100px){
  .ptl-copy{padding:48px 0 48px 40px}
  .ptl-h2{font-size:38px}
  .ptl-art{padding:24px 28px 24px 0}
  .ptl-orb{width:min(100%,430px)}
  .ptl-tag{right:24px;bottom:28px}
}
@container (max-width: 860px){
  .ptl-band{grid-template-columns:minmax(0,1fr);grid-template-areas:"art" "copy" "foot";border-radius:22px}
  .ptl-grid{-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 60%);mask-image:linear-gradient(180deg,#000 0%,transparent 60%)}
  .ptl-art{padding:24px 22px 0;flex-direction:column;transform:none}
  .ptl-orb{width:min(88%,340px)}
  .ptl-tag{position:relative;right:auto;bottom:auto;margin-top:-22px;transform:none}
  .ptl-tag-v{font-size:20px}
  .ptl-copy{padding:28px 22px 30px}
  .ptl-eyebrow{font-size:13px;gap:10px}
  .ptl-h2{margin-top:14px;font-size:31px;line-height:1.16;text-wrap:balance}
  .ptl-h2 br{display:none}                                    /* the desktop line break leaves an orphan on a phone */
  .ptl-p{margin-top:14px;font-size:16px;line-height:1.55}
  .ptl-count{margin-top:22px;width:auto;height:50px}
  .ptl-count-l{margin-right:auto}                            /* label sits by the dot, number to the right */
  .ptl-odo{font-size:22px}
  .ptl-btns{margin-top:20px;gap:10px}
  .ptl-btn-o,.ptl-btn-g{flex:1 1 100%;height:52px;font-size:15px}
  .ptl-chips{margin-top:18px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .ptl-chip{width:100%;justify-content:center}
  .ptl-marq-l{gap:28px}
}
@container (max-width: 400px){
  .ptl-chip{height:auto;min-height:38px;padding:6px 8px;gap:6px;font-size:12px;white-space:normal;text-align:center;line-height:1.2}
  .ptl-count-l{font-size:13px}
}
@media (max-width: 768px){
  .ptl{padding-bottom:80px}                   /* match .key-advantage-section at this breakpoint */
}
@media (prefers-reduced-motion:reduce){
  .ptl *,.ptl *::before,.ptl *::after{animation:none!important;transition:none!important}
}
/* HonorPro / Bootstrap leak guards — class-scoped only, never `.ptl ul` / `.ptl p` */
.ptl a{text-decoration:none}
.ptl i{font-style:normal}

/* ---------- homepage promo rotator: Pick The Level (30% banner layout) ---------- */
.home-page .hp-hero-offer[data-hp-promo="ptl"] .hp-hero-offer__visual,
.home-page .hp-footer-offer[data-hp-promo="ptl"] .hp-footer-offer__visual{
  overflow:visible
}
.home-page .hp-hero-offer[data-hp-promo="ptl"] .hp-hero-offer__visual{
  width:150px;
  height:100px
}
.home-page .hp-hero-offer[data-hp-promo="ptl"] .hp-hero-offer__img-ptl,
.home-page .hp-footer-offer[data-hp-promo="ptl"] .hp-footer-offer__img-ptl{
  object-fit:contain;
  object-position:center;
  transform:scale(1.12);
  transform-origin:center
}
.home-page .hp-footer-offer[data-hp-promo="ptl"] .hp-footer-offer__visual{
  width:168px;
  height:108px
}
.home-page .hp-hero-offer[data-hp-promo="ptl"] .hp-hero-offer__title--ptl{
  gap:6px
}
.home-page .hp-hero-offer[data-hp-promo="ptl"] .hp-hero-offer__title--ptl .hp-hero-offer__line:not(.hp-hero-offer__accent){
  font-size:16px;
  font-weight:500;
  line-height:22px;
  letter-spacing:-0.3px;
  white-space:nowrap
}
@media (max-width: 1200px){
  .home-page .hp-footer-offer[data-hp-promo="ptl"] .hp-footer-offer__visual{
    width:132px;
    height:90px
  }
}
@media (max-width: 768px){
  .home-page .offer-promo-strip[data-hp-promo="ptl"],
  .home-page .offer-promo-strip[data-hp-promo="ptl"].card-gradient-radial-purple{
    background-color:#0B1020;
    background-image:
      radial-gradient(ellipse 30% 20% at 50% 0%,rgba(75,43,224,.3) 0%,rgba(75,43,224,0) 100%),
      radial-gradient(ellipse 90% 40% at 50% 0%,rgba(75,43,224,.3) 0%,rgba(75,43,224,0) 100%)
  }
  .home-page .offer-promo-strip[data-hp-promo="ptl"] .offer-promo-m__visual{
    display:flex;
    align-items:center;
    justify-content:center;
    width:54px;
    height:50px;
    overflow:visible
  }
  .home-page .offer-promo-strip[data-hp-promo="ptl"] .offer-promo-m__img-ptl{
    display:block!important;
    width:54px;
    height:50px;
    max-width:none;
    object-fit:contain;
    object-position:center
  }
  .home-page .hp-hero-offer[data-hp-promo="ptl"] .hp-hero-offer__visual{
    width:96px;
    height:72px
  }
  .home-page .hp-footer-offer[data-hp-promo="ptl"] .hp-footer-offer__visual{
    width:96px;
    height:72px
  }
  .home-page .hp-hero-offer[data-hp-promo="ptl"] .hp-hero-offer__title--ptl .hp-hero-offer__line:not(.hp-hero-offer__accent){
    font-size:14px;
    line-height:18px;
    white-space:normal
  }
}