/* ===== Member portal page (.pr-*) ===================================
   Scoped so nothing here can reach the rest of the site. Gradients are
   built from the existing accent ramp rather than new hues, so the page
   reads as the same brand turned up. ==================================== */
.pr{--acc:#00a7e1;--hi:#00a7e1;--ink:#07202d;--rule:#15394d;--dim:#9fb0bd;color:#f2f3f4}
.pr *{box-sizing:border-box}
.pr section{position:relative}
.pr__in{max-width:1440px;margin:0 auto;padding:0 64px}
.pr__eyebrow{display:block;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--hi);font-weight:700;margin-bottom:16px}
.pr h2{margin:0 0 18px;font-size:46px;font-weight:800;letter-spacing:-.035em;line-height:1.06}
.pr h3{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.25}
.pr__lede{margin:0;font-size:17px;line-height:1.65;color:#c8d1d7;max-width:56ch}

/* — hero: layered radial aurora over a deep vertical gradient — */
.pr__hero{overflow:hidden;background:
  radial-gradient(70% 90% at 14% 6%, rgba(0,167,225,.20) 0%, rgba(0,167,225,0) 60%),
  radial-gradient(60% 80% at 90% 20%, rgba(0,167,225,.32) 0%, rgba(0,167,225,0) 62%),
  linear-gradient(170deg,#0a2b3d 0%,#07202d 46%,#061a25 100%)}
.pr__hero .pr__in{padding-top:86px;padding-bottom:0}
.pr__hgrid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px;align-items:end}
.pr__h1{margin:0 0 20px;font-size:62px;font-weight:800;letter-spacing:-.04em;line-height:1.02}
.pr__h1 em{font-style:normal;background:linear-gradient(96deg,#00a7e1 0%,#8fdcfa 44%,#b9ecff 100%);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.pr__hctas{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin:30px 0 64px}
.pr__btn{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 26px;
  background:linear-gradient(120deg,var(--acc),#00a7e1);color:#fff!important;font-weight:800;font-size:15.5px;
  text-decoration:none;box-shadow:0 10px 26px rgba(0,167,225,.36);transition:transform .2s,box-shadow .2s,filter .2s}
.pr__btn:hover{transform:translateY(-2px);filter:brightness(1.08);box-shadow:0 16px 34px rgba(0,167,225,.46)}
.pr__glink{font-size:14.5px;font-weight:700;color:var(--hi)!important;text-decoration:none;border-bottom:1px solid #25647f;padding-bottom:2px;transition:border-color .2s}
.pr__glink:hover{border-color:var(--hi)}
/* the screenshot, tilted in a light browser chrome */
.pr__shot{position:relative;border-radius:12px 12px 0 0;overflow:hidden;background:#0c2030;
  border:1px solid rgba(0,167,225,.28);box-shadow:0 -10px 60px rgba(0,167,225,.16),0 30px 70px rgba(0,0,0,.5);
  transform:perspective(1400px) rotateX(6deg) rotateY(-7deg) translateZ(0)}
.pr__bar{display:flex;align-items:center;gap:6px;padding:9px 12px;background:#0a1b26;border-bottom:1px solid rgba(255,255,255,.07)}
.pr__bar i{width:9px;height:9px;border-radius:50%;background:#2c4353;display:block}
.pr__bar span{margin-left:8px;font-size:10.5px;color:#6f8697;letter-spacing:.02em}
.pr__shot img{display:block;width:100%;height:auto}

/* — stat strip on a gradient rule — */
.pr__stats{background:linear-gradient(90deg,#061a25,#0a2b3d 50%,#061a25);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)}
.pr__stats .pr__in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;padding-top:34px;padding-bottom:34px}
.pr__stat b{display:block;font-size:40px;font-weight:800;letter-spacing:-.035em;line-height:1;
  background:linear-gradient(120deg,#fff 0%,#9adcf8 70%);-webkit-background-clip:text;background-clip:text;color:transparent}
.pr__stat span{display:block;margin-top:7px;font-size:13px;color:var(--dim)}

/* — roles — */
.pr__roles{background:#07202d}
.pr__roles .pr__in{padding-top:88px;padding-bottom:88px}
.pr__rgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;margin-top:38px}
.pr__role{position:relative;padding:26px 22px 24px;background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--rule);overflow:hidden;transition:border-color .25s,transform .25s}
.pr__role::before{content:'';position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,var(--hi),var(--acc));
  transform:scaleX(0);transform-origin:left;transition:transform .35s cubic-bezier(.22,.61,.36,1)}
.pr__role:hover{border-color:#25647f;transform:translateY(-3px)}
.pr__role:hover::before{transform:scaleX(1)}
.pr__who{display:inline-block;margin-bottom:12px;padding:5px 10px;font-size:10.5px;letter-spacing:.11em;
  text-transform:uppercase;font-weight:800;color:#06222f;background:linear-gradient(120deg,var(--hi),#8fdcfa)}
.pr__role p{margin:10px 0 14px;font-size:13.5px;line-height:1.55;color:var(--dim)}
.pr__role ul{list-style:none;margin:0;padding:14px 0 0;border-top:1px solid var(--rule);display:grid;gap:7px}
.pr__role li{display:flex;gap:8px;font-size:12.5px;line-height:1.4;color:#c8d1d7}
.pr__role li::before{content:'';flex:none;width:5px;height:5px;margin-top:6px;background:var(--hi)}

/* — feature tabs — */
.pr__feat{background:linear-gradient(180deg,#061a25,#07202d)}
.pr__feat .pr__in{padding-top:88px;padding-bottom:88px}
.pr__tabs{display:flex;gap:8px;flex-wrap:wrap;margin:30px 0 26px}
.pr__tab{appearance:none;font:inherit;cursor:pointer;padding:11px 18px;font-size:13.5px;font-weight:800;
  color:#c8d1d7;background:rgba(255,255,255,.04);border:1px solid var(--rule);transition:all .22s}
.pr__tab:hover{border-color:#25647f;color:#fff}
.pr__tab[aria-selected=true]{background:linear-gradient(120deg,var(--acc),#00a7e1);border-color:transparent;color:#fff}
.pr__panel{display:none;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.pr__panel[data-open]{display:grid;animation:prIn .45s cubic-bezier(.22,.61,.36,1)}
@keyframes prIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.pr__item{padding:20px 18px;background:rgba(255,255,255,.035);border:1px solid var(--rule);transition:background .22s,border-color .22s}
.pr__item:hover{background:rgba(0,167,225,.07);border-color:#25647f}
.pr__item b{display:block;font-size:15px;font-weight:800;letter-spacing:-.015em;margin-bottom:6px}
.pr__item span{display:block;font-size:13px;line-height:1.5;color:var(--dim)}

/* — consent — */
.pr__consent{background:
  radial-gradient(60% 70% at 82% 20%, rgba(0,167,225,.26), rgba(0,167,225,0) 64%),
  linear-gradient(180deg,#07202d,#0a2b3d)}
.pr__consent .pr__in{padding-top:88px;padding-bottom:88px}
.pr__cgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:38px}
.pr__col{padding:26px 24px;border:1px solid var(--rule);background:rgba(4,16,24,.4)}
.pr__col h3{margin-bottom:16px}
.pr__row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:13px 0;border-top:1px solid var(--rule)}
.pr__row b{display:block;font-size:14px;font-weight:700}
.pr__row span{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--dim)}
.pr__pill{flex:none;padding:4px 10px;font-size:10.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;white-space:nowrap}
.pr__pill.on{background:linear-gradient(120deg,#1f9d6a,#2bb77d);color:#04170f}
.pr__pill.off{background:rgba(255,255,255,.08);color:#9fb0bd;border:1px solid var(--rule)}
.pr__how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:26px}
.pr__step{padding:22px 20px;border:1px solid var(--rule);background:rgba(255,255,255,.03)}
.pr__step i{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;font-style:normal;
  font-size:13px;font-weight:800;color:#06222f;background:linear-gradient(120deg,var(--hi),#8fdcfa);margin-bottom:12px}
.pr__step b{display:block;font-size:15px;margin-bottom:6px}
.pr__step span{display:block;font-size:13px;line-height:1.55;color:var(--dim)}

/* — faq + close — */
.pr__faq{background:#061a25}
.pr__faq .pr__in{padding-top:88px;padding-bottom:88px;display:grid;grid-template-columns:.8fr 1.2fr;gap:64px;align-items:start}
.pr details{border-bottom:1px solid var(--rule);padding:18px 0}
.pr summary{display:flex;align-items:flex-start;justify-content:space-between;gap:24px;cursor:pointer;
  font-size:17.5px;font-weight:800;letter-spacing:-.015em;list-style:none}
.pr summary::-webkit-details-marker{display:none}
.pr summary i{flex:none;font-style:normal;font-size:21px;line-height:1;color:var(--hi);transition:transform .2s}
.pr details[open] summary i{transform:rotate(45deg)}
.pr details p{margin:12px 0 0;font-size:14.5px;line-height:1.6;color:var(--dim);max-width:70ch}
.pr__close{background:linear-gradient(140deg,#0a2b3d,#061a25 60%);border-top:1px solid var(--rule)}
.pr__close .pr__in{padding-top:80px;padding-bottom:84px;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center}
.pr__close ul{list-style:none;margin:0;padding:0 0 0 40px;border-left:2px solid var(--rule);display:grid;gap:11px}
.pr__close li{display:flex;gap:10px;font-size:14.5px;line-height:1.5;color:#c8d1d7}
.pr__close li::before{content:'';flex:none;width:7px;height:7px;margin-top:7px;background:var(--hi)}

@media (max-width:1100px){
  .pr__hgrid,.pr__faq .pr__in,.pr__close .pr__in{grid-template-columns:minmax(0,1fr)}
  .pr__rgrid,.pr__panel,.pr__how{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pr__shot{transform:none}
  .pr__in{padding:0 32px}
}
@media (max-width:640px){
  .pr__in{padding:0 18px}
  .pr__h1{font-size:36px}.pr h2{font-size:30px}
  .pr__hero .pr__in{padding-top:48px}
  .pr__stats .pr__in{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  .pr__stat b{font-size:30px}
  .pr__rgrid,.pr__panel,.pr__how,.pr__cgrid{grid-template-columns:minmax(0,1fr)}
  .pr__roles .pr__in,.pr__feat .pr__in,.pr__consent .pr__in,.pr__faq .pr__in,.pr__close .pr__in{padding-top:56px;padding-bottom:56px}
  .pr__hctas{margin-bottom:44px}
  .pr__btn{width:100%}
  .pr__close ul{padding-left:22px}
}
@media (prefers-reduced-motion:reduce){
  .pr__panel[data-open]{animation:none}
  .pr__btn,.pr__role,.pr__item,.pr__tab{transition:none}
  .pr__btn:hover,.pr__role:hover{transform:none}
}

/* — small pieces the renderers ask for — */
.pr__lede--wide{max-width:74ch}
.pr__fine{display:flex;align-items:flex-start;gap:9px;margin:0 0 26px;
  font-size:12.5px;line-height:1.5;color:#8ea2b0}
.pr__fine svg{flex:none;margin-top:1px;color:var(--hi)}
.pr__col h3{display:flex;align-items:center;gap:9px}
.pr__col h3 svg{flex:none;color:var(--hi)}
.pr__col--locked{background:linear-gradient(180deg,rgba(0,167,225,.07),rgba(4,16,24,.4));
  border-color:#25647f}
.pr__col--locked h3 svg{color:#8fdcfa}
.pr__qs{margin-top:26px}
.pr summary span{flex:1}
.pr__cl{list-style:none;margin:0;padding:24px;display:grid;gap:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.02));
  border:1px solid var(--rule)}
.pr__cl li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;line-height:1.45;color:#dde4e9}
.pr__cl svg{flex:none;margin-top:2px;color:var(--hi)}
.pr__tab svg{flex:none;margin-right:2px;vertical-align:-3px}
.pr__tab{display:inline-flex;align-items:center;gap:8px}

/* ==========================================================================
   Highlights — AI, Nutrition, Training, Shop.
   Four alternating rows on a dark field. Each row carries its own accent pair
   in --a1/--a2, so one set of rules paints four differently-coloured bands.
   ========================================================================== */
.prh {
  background: #0d1013;
  background-image:
    radial-gradient(1100px 620px at 88% -6%,  rgba(0,167,225,.16), transparent 62%),
    radial-gradient(880px 520px at 4% 104%,  rgba(0,167,225,.10), transparent 64%);
  padding: 104px 0 112px;
  overflow: hidden;
}
.prh__in { max-width: 1312px; margin: 0 auto; padding: 0 64px; }

.prh__lead { max-width: 760px; margin: 0 0 76px; }
.prh__lead .prh__kicker {
  font: 700 12px/1 Archivo, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: #00a7e1; margin: 0 0 16px;
}
.prh__lead h2 {
  font: 800 clamp(30px, 3.4vw, 46px)/1.08 Archivo, sans-serif;
  letter-spacing: -.02em; color: #fff; margin: 0 0 18px;
}
.prh__lead p { font: 400 17px/1.62 Archivo, sans-serif; color: #aab3ba; margin: 0; }

/* ---- one row ---- */
.prh__row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 72px;
  align-items: center; padding: 60px 0;
  border-top: 1px solid #22282e;
}
.prh__row:first-of-type { border-top: 0; padding-top: 0; }
.prh__row--flip .prh__copy { order: 2; }
.prh__row--flip .prh__media { order: 1; }

/* accents, one pair per row */
.prh__row[data-k="ai"]        { --a1: #00a7e1; --a2: #7f6bff; }
.prh__row[data-k="nutrition"] { --a1: #34c98a; --a2: #00a7e1; }
.prh__row[data-k="training"]  { --a1: #00a7e1; --a2: #21d4c4; }
.prh__row[data-k="shop"]      { --a1: #ffab3d; --a2: #ff6f4d; }

.prh__num {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px/1 Archivo, sans-serif; letter-spacing: .16em; text-transform: uppercase;
  color: #cfd6dc; margin: 0 0 18px;
}
.prh__num i {
  font-style: normal; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 800; color: #0d1013;
  background: linear-gradient(135deg, var(--a1), var(--a2));
}
.prh__copy h3 {
  font: 800 clamp(26px, 2.6vw, 36px)/1.14 Archivo, sans-serif;
  letter-spacing: -.02em; margin: 0 0 16px;
  background: linear-gradient(100deg, #fff 22%, var(--a1) 96%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: #fff;
}
.prh__copy > p { font: 400 16.5px/1.64 Archivo, sans-serif; color: #aab3ba; margin: 0 0 28px; }

.prh__pts { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 2px; }
.prh__pt {
  display: grid; grid-template-columns: 116px 1fr; gap: 18px;
  padding: 15px 0 15px 16px; position: relative;
  border-top: 1px solid #1d2329;
}
.prh__pt::before {                      /* the gradient tick on the left edge */
  content: ""; position: absolute; left: 0; top: 15px; bottom: 15px; width: 2px;
  border-radius: 2px; background: linear-gradient(180deg, var(--a1), var(--a2));
  opacity: .85;
}
.prh__pt b {
  font: 700 13.5px/1.4 Archivo, sans-serif; color: #fff;
  letter-spacing: -.005em;
}
.prh__pt span { font: 400 14.5px/1.55 Archivo, sans-serif; color: #98a2aa; }

.prh__note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 16px 18px; border-radius: 12px;
  background: rgba(255,255,255,.035);
  border: 1px solid #22282e; border-left: 2px solid var(--a1);
  font: 400 14px/1.56 Archivo, sans-serif; color: #b6bfc6; margin: 0;
}
.prh__note svg { flex: 0 0 16px; margin-top: 2px; color: var(--a1); }

/* ---- the screenshot, in a browser frame ---- */
.prh__media { position: relative; }
.prh__glow {
  position: absolute; inset: -14% -8% -18%; border-radius: 50%;
  background: radial-gradient(closest-side, var(--a1), transparent 72%);
  opacity: .20; filter: blur(46px); pointer-events: none; z-index: 0;
}
.prh__frame {
  position: relative; z-index: 1; border-radius: 14px; overflow: hidden;
  background: #14181c; border: 1px solid #2b3238;
  box-shadow: 0 30px 70px -28px rgba(0,0,0,.78), 0 0 0 1px rgba(255,255,255,.03) inset;
}
.prh__chrome {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px; background: #1b2025; border-bottom: 1px solid #262c32;
}
.prh__chrome i {
  width: 9px; height: 9px; border-radius: 50%; background: #343c43; flex: none;
}
.prh__chrome i:first-child { background: var(--a1); opacity: .75; }
.prh__url {
  margin-left: 8px; font: 500 10.5px/1 Archivo, sans-serif; color: #7c868e;
  letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.prh__frame img { display: block; width: 100%; height: auto; }
.prh__cap {
  font: 400 12.5px/1.5 Archivo, sans-serif; color: #7c868e;
  margin: 14px 2px 0; text-align: center;
}

/* ---- integration strip, under the training row ---- */
.prh__wires {
  grid-column: 1 / -1; margin: 10px 0 0;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.prh__wire {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border-radius: 12px;
  background: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border: 1px solid #262c32;
}
.prh__wire img { height: 20px; width: auto; flex: none; opacity: .95; }
.prh__wire--txt b {
  font: 800 13px/1 Archivo, sans-serif; color: #fff; letter-spacing: -.01em;
}
.prh__wire p { font: 400 12.5px/1.45 Archivo, sans-serif; color: #98a2aa; margin: 4px 0 0; }
.prh__wdot {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--a1), var(--a2)); color: #0d1013;
}

/* ---- motion: the frame settles as the row arrives ---- */
@media (min-width: 1024px) {
  .prh__frame { transform: translateY(16px) scale(.985); opacity: 0;
                transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .7s ease; }
  .prh__copy > *, .prh__wires { opacity: 0; transform: translateY(14px);
                transition: transform .7s cubic-bezier(.16,1,.3,1), opacity .6s ease; }
  .prh__row.is-in .prh__frame { transform: none; opacity: 1; }
  .prh__row.is-in .prh__copy > *,
  .prh__row.is-in .prh__wires { opacity: 1; transform: none; }
  .prh__row.is-in .prh__copy > *:nth-child(2) { transition-delay: .06s; }
  .prh__row.is-in .prh__copy > *:nth-child(3) { transition-delay: .12s; }
  .prh__row.is-in .prh__copy > *:nth-child(4) { transition-delay: .18s; }
  .prh__row.is-in .prh__copy > *:nth-child(5) { transition-delay: .24s; }
}

@media (max-width: 1100px) {
  .prh__in { padding: 0 32px; }
  .prh__row { grid-template-columns: 1fr; gap: 40px; padding: 48px 0; }
  .prh__row--flip .prh__copy,
  .prh__row--flip .prh__media { order: 0; }
  .prh__wires { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .prh { padding: 72px 0 80px; }
  .prh__in { padding: 0 22px; }
  .prh__lead { margin-bottom: 48px; }
  .prh__row { gap: 32px; padding: 40px 0; }
  .prh__pt { grid-template-columns: 1fr; gap: 5px; padding: 14px 0 14px 14px; }
  .prh__cap { text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .prh__frame, .prh__copy > *, .prh__wires {
    transform: none !important; opacity: 1 !important; transition: none !important;
  }
}
@media print {
  .prh__frame, .prh__copy > *, .prh__wires {
    transform: none !important; opacity: 1 !important;
  }
}

/* ==========================================================================
   Hero screenshot: the entrance.
   The resting tilt differs by breakpoint (it is flattened at <=1100px), so
   each entrance ends on its own breakpoint's resting transform. Every
   keyframe carries the COMPLETE transform — an animation overrides the
   normal declaration outright, so a keyframe that names only translate
   would silently throw the perspective and rotation away.
   ========================================================================== */
.pr__shot{will-change:transform,opacity;backface-visibility:hidden}

/* the glass sweep, once, just after it lands */
.pr__shot::after{
  content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(104deg,
    transparent 28%,rgba(255,255,255,.26) 45%,
    rgba(170,226,255,.10) 53%,transparent 66%);
  transform:translateX(-130%);
  animation:prSheen 1.5s cubic-bezier(.33,.68,.4,1) .95s both;
}
@keyframes prSheen{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

/* the chrome dots come up one after another */
.pr__bar i{animation:prDot .45s cubic-bezier(.2,.9,.3,1.4) both}
.pr__bar i:nth-child(1){animation-delay:.72s}
.pr__bar i:nth-child(2){animation-delay:.80s}
.pr__bar i:nth-child(3){animation-delay:.88s}
@keyframes prDot{
  from{transform:scale(.4);background:#1a2c38}
  60% {transform:scale(1.25)}
  to  {transform:scale(1);background:#2c4353}
}
.pr__bar i:nth-child(1){animation-name:prDotLead}
@keyframes prDotLead{
  from{transform:scale(.4);background:#1a2c38}
  60% {transform:scale(1.3);background:#00a7e1}
  to  {transform:scale(1);background:#00a7e1}
}

/* ---- wide: lands out of depth, then breathes ---- */
@media (min-width:1101px){
  .pr__shot{
    animation:prShotIn 1.2s cubic-bezier(.16,1,.3,1) .1s both,
              prShotFloat 8s ease-in-out 1.5s infinite;
  }
  @keyframes prShotIn{
    from{opacity:0;
         transform:perspective(1400px) rotateX(19deg) rotateY(-21deg)
                   translate3d(86px,74px,-180px) scale(.9);
         box-shadow:0 0 0 rgba(0,167,225,0),0 0 0 rgba(0,0,0,0)}
    60% {opacity:1}
    to  {opacity:1;
         transform:perspective(1400px) rotateX(6deg) rotateY(-7deg)
                   translate3d(0,0,0) scale(1);
         box-shadow:0 -10px 60px rgba(0,167,225,.16),0 30px 70px rgba(0,0,0,.5)}
  }
  @keyframes prShotFloat{
    0%,100%{transform:perspective(1400px) rotateX(6deg) rotateY(-7deg)
                      translate3d(0,0,0) scale(1)}
    50%    {transform:perspective(1400px) rotateX(5.2deg) rotateY(-6.2deg)
                      translate3d(0,-11px,0) scale(1)}
  }
}

/* ---- narrow: the tilt is off here, so it simply rises ---- */
@media (max-width:1100px){
  .pr__shot{animation:prShotRise .9s cubic-bezier(.16,1,.3,1) .1s both}
  @keyframes prShotRise{
    from{opacity:0;transform:translate3d(0,42px,0) scale(.96)}
    to  {opacity:1;transform:translate3d(0,0,0) scale(1)}
  }
}

@media (prefers-reduced-motion:reduce){
  .pr__shot{animation:none!important;opacity:1!important}
  .pr__shot::after{animation:none!important;opacity:0}
  .pr__bar i{animation:none!important;transform:none!important;background:#2c4353}
}
@media print{
  .pr__shot,.pr__bar i{animation:none!important;opacity:1!important;transform:none!important}
  .pr__shot::after{display:none}
}