/* product-pucks-pro — per-section rules (backgrounds, padding, rhythm) and page components */

/* ---- section: Hero ---- */
.sec-hero{background:#F8F8F8;padding:84px 20px 72px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-hero{padding:52px 16px 44px 16px}}

/* ---- section: Highlights ---- */
.sec-quick{background:#FFFFFF;padding:52px 20px 40px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-quick{padding:32px 16px 24px 16px}}

/* ---- section: Overview ---- */
.sec-overview{background:#FFFFFF;padding:84px 20px 84px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-overview{padding:52px 16px 52px 16px}}

/* ---- section: Challenges ---- */
.sec-challenges{background:#E9F2F8;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-challenges{padding:54px 16px 54px 16px}}

/* ---- section: How it fits together ---- */
.sec-how{background:#FFFFFF;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-how{padding:54px 16px 54px 16px}}

/* ---- section: From checkout to the rink ---- */
.sec-flow{background:linear-gradient(175deg,#00304F,#002845);padding:92px 20px 96px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-flow{padding:57px 16px 59px 16px}}

/* ---- section: Inside the training site ---- */
.sec-features{background:#E9F2F8;padding:88px 20px 88px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-features{padding:54px 16px 54px 16px}}

/* ---- section: Related services ---- */
.sec-related{background:#FFFFFF;padding:80px 20px 84px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-related{padding:49px 16px 52px 16px}}

/* ---- section: CTA ---- */
.sec-cta{background:linear-gradient(168deg,#0F8FE8,#0C7FD0);padding:96px 20px 100px 20px;overflow:hidden;display:flex;flex-direction:column;gap:20px;align-items:center}
@media (max-width:767px){.sec-cta{padding:59px 16px 62px 16px}}

/* ---- components ---- */

/* Stroke icons (Feather style). .icon-svg fills by default; these are outlines. */
.icon-svg.ln,.px-s{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

/* Browser-window frame around a site screenshot */
.px-win{position:relative;background:#FFFFFF;border:1px solid #D5E6F1;border-radius:14px;overflow:hidden;box-shadow:0 28px 56px rgba(7,42,71,.18)}
.px-win-bar{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid #EDF4FA;background:#FBFDFF}
.px-win-bar i{width:9px;height:9px;border-radius:50%;background:#D5E6F1}
.px-win-url{margin-left:10px;flex:1;max-width:260px;font-family:Poppins,sans-serif;font-size:11.5px;font-weight:500;color:#64798C;background:#F1F7FB;border:1px solid #E3EDF5;border-radius:7px;padding:3px 10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.px-win img{display:block;width:100%;height:auto}

/* Hero composition: a back window, a smaller front device, a platform strip */
.px-hero{position:relative;max-width:680px;margin:0 auto;padding:0 0 64px 0;font-family:Poppins,sans-serif}
.px-hero .px-back{animation:evlFloat 8s ease-in-out infinite}
.px-hero .px-front{position:absolute;right:-12px;bottom:0;width:52%;animation:evlFloat 7s ease-in-out infinite;animation-delay:-3s}
.px-strip{display:flex;align-items:center;justify-content:center;margin-top:18px;font-family:Poppins,sans-serif}
.px-chip{display:flex;flex-direction:column;align-items:center;gap:3px;background:#FFFFFF;border:1px solid #D5E6F1;border-radius:14px;padding:12px 18px;box-shadow:0 14px 34px rgba(7,42,71,.12)}
.px-chip b{font-size:14px;font-weight:600;color:#0B1B2A}
.px-chip i{font-style:normal;font-size:10.5px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:#64798C}
.px-chip span{display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:10px;background:linear-gradient(180deg,#EAF4FB,#DCECF7);border:1px solid #CBE2F2;color:#267CBA}
.px-chip span svg{width:17px;height:17px}
.px-link{position:relative;flex:0 1 120px;height:46px;margin:0 6px}
.px-link:before{content:'';position:absolute;left:0;right:0;top:50%;height:2px;background:repeating-linear-gradient(90deg,#267CBA 0 7px,transparent 7px 14px);background-size:28px 2px;opacity:.55;animation:pxflow 1.2s linear infinite}
.px-link span{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:inline-flex;width:34px;height:34px;align-items:center;justify-content:center;border-radius:50%;background:linear-gradient(180deg,#2F89CB,#267CBA);color:#FFFFFF;box-shadow:0 10px 24px rgba(38,124,186,.45)}
.px-link span svg{width:15px;height:15px}
@keyframes pxflow{to{background-position:28px 0}}
@media (max-width:520px){.px-link{flex:0 1 56px}.px-chip{padding:10px 12px}.px-hero{padding-bottom:40px}}

/* Dark-section flow (mirrors the case study's integration chain) */
.px-chain{display:flex;align-items:stretch;max-width:1180px;margin:0 auto;font-family:Poppins,sans-serif}
.px-stg{flex:1;text-align:center;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.16);border-radius:14px;padding:18px 10px;display:flex;flex-direction:column;align-items:center;gap:10px;animation:pxglow 7.5s ease-in-out infinite}
.px-stg:nth-child(3){animation-delay:1.5s}.px-stg:nth-child(5){animation-delay:3s}.px-stg:nth-child(7){animation-delay:4.5s}.px-stg:nth-child(9){animation-delay:6s}
.px-stg span{display:inline-flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(180deg,#2F89CB,#0D89E0);color:#FFFFFF;box-shadow:0 10px 26px rgba(13,137,224,.45)}
.px-stg-svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.px-stg b{font-size:13px;font-weight:600;color:#FFFFFF;line-height:1.4}
.px-ar{display:flex;align-items:center;justify-content:center;width:30px;flex:0 0 auto;color:#7CC4F8}
.px-ar-svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
@keyframes pxglow{0%,18%,100%{border-color:rgba(255,255,255,.16);box-shadow:none}7%{border-color:rgba(124,196,248,.7);box-shadow:0 0 24px rgba(13,137,224,.35)}}
@media (max-width:860px){.px-chain{flex-direction:column}.px-ar{width:100%;height:26px}.px-ar-svg{transform:rotate(90deg)}}

/* Small meta line under a card description */
.px-meta{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:12px}

/* Top-align card content so cards of different text lengths line up */
.stack-8.card{justify-content:flex-start}
.px-meta span{font-family:Poppins,sans-serif;font-size:11.5px;font-weight:600;letter-spacing:.4px;color:#267CBA;background:#EAF4FB;border:1px solid #D5E6F1;border-radius:20px;padding:4px 10px}

/* Related-work cards are whole-card links */
a.px-rel{text-decoration:none;color:inherit}
.px-rel-more{display:inline-flex;align-items:center;gap:6px;font-family:Poppins,sans-serif;font-size:14px;font-weight:600;color:#267CBA}
.px-rel-svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s ease}
a.px-rel:hover .px-rel-svg{transform:translateX(4px)}

/* Vertical variant of the platform strip, for the enrollment step */
.px-strip--col{flex-direction:column;margin:0}
.px-strip--col .px-chip{min-width:200px}
.px-strip--col .px-link{flex:0 0 64px;width:46px;height:64px;margin:4px 0}
.px-strip--col .px-link:before{left:50%;right:auto;top:0;bottom:0;width:2px;height:auto;background:repeating-linear-gradient(180deg,#267CBA 0 7px,transparent 7px 14px);background-size:2px 28px;animation:pxflowv 1.2s linear infinite}
@keyframes pxflowv{to{background-position:0 28px}}