/* ================================================================
   CRIS LANDING — WHY CHOOSE (score card + dashboard frame)
   Rules: no inline styles, no !important, no media queries.
          Mock bar widths come from data-w attributes.
          Responsive values are set per range in responsive.css
          under ".plx-why-choose":
     --why-py --why-container-px --why-gutter --why-wrap-dir
     --why-overlay-pos --why-overlay-margin --why-badge-display
     --why-shell-pad
   ================================================================ */

.plx-why-choose {
  /* colour */

  /* shape + type */

  overflow: hidden;
  padding: var(--sp-64) 0 0;
  position: relative;
}
.plx-why-choose::before {
  background: radial-gradient(ellipse 55% 65% at 72% 50%, var(--lime-a10), transparent 65%);
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.plx-why-choose .container-xl { padding-left: var(--sp-12); padding-right: var(--sp-12); }
.plx-why-choose .row { --bs-gutter-x: var(--sp-40); }

/* Left column */
.plx-why-desc { color: var(--t3); font-size: var(--fs-16);margin-bottom: var(--sp-24); }
.plx-why-list {
  border-top: 1px solid var(--bg-mid);
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: var(--sp-14) 0 0;
}
.plx-why-item {
  align-items: center;
  border-bottom: 1px solid var(--bg-card);
  color: var(--t2);
  display: flex;
  font-size: var(--fs-14);
  font-weight: 500;
  gap: var(--sp-14);
  padding: var(--sp-14) 0;
}
.plx-why-item:last-child { border-bottom: 0; }
.plx-why-item i { color: var(--lime); flex-shrink: 0; font-size: var(--fs-20); }

/* Right column */
.plx-device-wrap { align-items: center; display: flex; flex-direction: row; justify-content: center; position: relative; }

/* Score card */
.plx-score-overlay {
  -webkit-backdrop-filter: blur(24px);
  backdrop-filter: blur(24px);
  background: var(--bg);
  border: 1px solid var(--lime-bd);
  border-radius: var(--br-inner);
  box-shadow: 0 8px 40px var(--black-a65), 0 0 28px var(--lime-bg);
  margin: 0;
  max-width: 100%;
  padding: var(--sp-20) var(--sp-24) var(--sp-16);
  position: absolute;
  right: var(--pos-22);
  text-align: center;
  top: calc(var(--pos-34) * -1);
  width: var(--size-200);
  z-index: var(--z-20);
}
.plx-score-overlay::before {
  background: radial-gradient(circle 60px at 50% 55%, var(--lime-a10), transparent);
  border-radius: inherit;
  content: '';
  inset: 0;
  pointer-events: none;
  position: absolute;
}
.plx-score-gauge-svg { display: block; height: auto; margin: 0 auto var(--sp-4); max-width: var(--size-140); position: relative; width: 100%; z-index: var(--z-1); }
.plx-score-track { fill: none; stroke: var(--border); stroke-linecap: round; stroke-width: 10; }
.plx-score-arc {
  fill: none;
  stroke: url(#plxScoreGrad);
  stroke-dasharray: 251;
  stroke-dashoffset: 251;
  stroke-linecap: round;
  stroke-width: 10;
  transition: stroke-dashoffset var(--t-slow) cubic-bezier(0.4,0,0.2,1);
}
.plx-score-arc[data-state="in"] { stroke-dashoffset: 60; }
.plx-score-num { fill: var(--t1); font-family: var(--font-body); font-size: var(--fs-32); font-weight: 900; text-anchor: middle; }
.plx-score-max { fill: var(--t5); font-family: var(--font-body); font-size: var(--fs-10); text-anchor: middle; }
.plx-score-badge {
  background: var(--lime-bg);
  border: 1px solid var(--lime-bd);
  border-radius: var(--br-full);
  color: var(--lime);
  display: inline-block;
  font-size: var(--fs-10);
  font-weight: 700;
  margin-top: var(--sp-6);
  padding: var(--sp-2) var(--sp-14);
  position: relative;
  z-index: var(--z-1);
}

/* Gradient-border shell */
.plx-laptop-shell {
  background: linear-gradient(135deg, var(--lime-a60) 0%, var(--cyan-a78) 40%, var(--purple-a45) 75%, var(--lime-a50) 100%);
  border-radius: var(--br-outer);
  padding: var(--sp-2);
  position: relative;
  width: 100%;
}
.plx-laptop-shell::before {
  background: inherit;
  border-radius: var(--br-outer);
  content: '';
  filter: blur(20px);
  inset: calc(var(--sp-4) * -1);
  opacity: var(--opacity-disabled);
  position: absolute;
  z-index: var(--z-neg-1);
}
.plx-laptop-shell::after {
  background: radial-gradient(ellipse 80% 60% at 50% 100%, var(--lime-a10), transparent 70%);
  border-radius: var(--br-outer);
  content: '';
  inset: calc(var(--pos-24) * -1);
  pointer-events: none;
  position: absolute;
  z-index: var(--z-neg-2);
}
.plx-laptop-frame { background: var(--bg); border-radius: var(--br-outer); overflow: hidden; width: 100%; }

/* Title bar */
.plx-laptop-screen-bar {
  align-items: center;
  background: linear-gradient(90deg, var(--lime-a10), var(--cyan-a10), var(--purple-a10));
  border-bottom: 1px solid var(--border);
  display: flex;
  gap: var(--sp-6);
  justify-content: space-between;
  padding: var(--sp-6) var(--sp-16);
}
.plx-laptop-bar-left  { align-items: center; display: flex; gap: var(--sp-6); }
.plx-laptop-bar-title { color: var(--white-a35); font-size: var(--fs-10); font-weight: 600; letter-spacing: .4px; }
.plx-screen-dot { border-radius: 50%; height: var(--size-9); width: var(--size-9); }
.plx-mock-dot-r { background: var(--red); }
.plx-mock-dot-y { background: var(--amber); }
.plx-mock-dot-g { background: var(--green); }

/* Screen */
.plx-laptop-screen { background: var(--bg); }
.plx-screen-content { padding: var(--sp-16) var(--sp-20) var(--sp-20); }
.plx-dash-header {
  align-items: center;
  border-bottom: 1px solid var(--bg-mid);
  display: flex;
  gap: var(--sp-14);
  justify-content: space-between;
  margin-bottom: var(--sp-14);
  padding-bottom: var(--sp-12);
}
.plx-dash-heading { color: var(--t5); font-size: var(--fs-10); font-weight: 700; letter-spacing: 1px; margin: 0; text-transform: uppercase; }
.plx-dash-overall { align-items: center; display: flex; gap: var(--sp-6); }
.plx-dash-overall-val {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  background-image: linear-gradient(90deg, var(--lime), var(--cyan));
  font-size: var(--fs-20);
  font-weight: 900;
  letter-spacing: -.5px;
}
.plx-dash-overall-lbl { color: var(--t5); font-size: var(--fs-10); }
.plx-dash-badge-sm {
  background: var(--lime-bg);
  border: 1px solid var(--lime-bd);
  border-radius: var(--br-full);
  color: var(--lime);
  font-size: var(--fs-10);
  font-weight: 700;
  padding: var(--sp-2) var(--sp-6);
}

/* Domain rows */
.plx-screen-domain-row { align-items: center; border-bottom: 1px solid var(--bg-card); display: flex; gap: var(--sp-6); padding: var(--sp-6) 0; }
.plx-screen-domain-row:last-child { border-bottom: 0; }
.plx-screen-domain-name { color: var(--t4); flex: 1; font-size: var(--fs-10); font-weight: 500; }
.plx-screen-bar-track { background: var(--bg-mid); border-radius: var(--br-full); flex: 0 0 100px; height: var(--size-6); overflow: hidden; }
.plx-screen-bar-fill { border-radius: var(--br-full); height: 100%; transition: width var(--t-slow) cubic-bezier(0.4,0,0.2,1); width: var(--w, 0%); }
.plx-screen-bar-fill[data-w="38"] { --w: 38%; }
.plx-screen-bar-fill[data-w="40"] { --w: 40%; }
.plx-screen-bar-fill[data-w="46"] { --w: 46%; }
.plx-screen-bar-fill[data-w="52"] { --w: 52%; }
.plx-screen-bar-fill[data-w="62"] { --w: 62%; }
.plx-screen-bar-fill[data-w="84"] { --w: 84%; }
.plx-fill-green  { background: var(--green); }
.plx-fill-amber  { background: var(--amber); }
.plx-fill-orange { background: var(--orange); }
.plx-fill-red    { background: var(--red); }
.plx-screen-score { color: var(--t2); flex-shrink: 0; font-size: var(--fs-10); font-weight: 700; min-width: var(--size-26); text-align: right; }
.plx-scr-green  { color: var(--green); }
.plx-scr-amber  { color: var(--amber); }
.plx-scr-orange { color: var(--orange); }
.plx-scr-red    { color: var(--red); }

/* Footer chips */
.plx-dash-footer { border-top: 1px solid var(--bg-mid); display: flex; flex-wrap: wrap; gap: var(--sp-6) var(--sp-12); margin-top: var(--sp-14); padding-top: var(--sp-12); }
.plx-dash-footer-chip {
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--br-full);
  color: var(--t6);
  display: flex;
  flex-shrink: 0;
  font-size: var(--fs-10);
  font-weight: 600;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-12);
  white-space: nowrap;
}
.plx-dash-footer-chip i { font-size: var(--fs-10); }
.plx-dash-chip-lime   { color: var(--lime); }
.plx-dash-chip-cyan   { color: var(--cyan); }
.plx-dash-chip-purple { color: var(--purple); }

/* Floating accent badges */
.plx-lf-badge {
  -webkit-backdrop-filter: blur(16px);
  align-items: center;
  backdrop-filter: blur(16px);
  background: var(--bg);
  border: 1px solid var(--border-md);
  border-radius: var(--br-inner);
  box-shadow: 0 4px 20px var(--black-a50);
  display: flex;
  font-size: var(--fs-10);
  font-weight: 600;
  gap: var(--sp-6);
  padding: var(--sp-6) var(--sp-16);
  position: absolute;
  z-index: var(--z-10);
}
.plx-lf-badge-1 { bottom: calc(var(--pos-22) * -1); left: calc(var(--pos-22) * -1); }
.plx-lf-badge-2 { left: calc(var(--pos-22) * -1); top: 50%; transform: translateY(-50%); }
.plx-lf-badge-1 i { color: var(--lime);   font-size: var(--fs-14); }
.plx-lf-badge-2 i { color: var(--purple); font-size: var(--fs-14); }
.plx-lf-badge span { color: var(--t3); }