/* =========================================================
   DR. NOTES — PSYCHIATRIC EVALUATION WALKTHROUGH
   Page-specific styles only.
========================================================= */

.psy-eval-page {
  --pev-blue: #0b63f6;
  --pev-blue-dark: #074bc2;
  --pev-blue-soft: #eef5ff;
  --pev-navy: #071b45;
  --pev-text: #263858;
  --pev-muted: #63708a;
  --pev-border: #dfe8f7;
  --pev-white: #ffffff;
  --pev-nav: 82px;
  /* Fluid layout tokens. The phone tracks BOTH axes: 24vw keeps it in
     proportion on wide screens, while the second term sizes it from the
     space actually left below the navbar, so the sticky column can never
     run off the bottom of a short window.
     92px covers the sticky offset, the caption and a little breathing
     room; 0.46 converts that available height back into a width at the
     1320:2868 screenshot ratio. --pev-nav is measured by the script. */
  --pev-phone-w: clamp(
    180px,
    min(24vw, (100vh - var(--pev-nav) - 92px) * 0.46 + 11px),
    352px
  );
  /* screen is (width - 22px of bezel) at the 1320:2868 screenshot ratio */
  --pev-phone-h: calc((var(--pev-phone-w) - 22px) * 2.1727 + 22px);
  /* ten rows, less the step label sitting above the list */
  --pev-chip-h: calc((var(--pev-phone-h) - 36px) / 10);
  --pev-rail-w: clamp(168px, 14vw, 200px);
  --pev-col-gap: clamp(40px, 6.4vw, 104px);
  --pev-copy-w: clamp(400px, 46vw, 640px);
  /* slide into the page gutter only as far as the gutter allows */
  --pev-push: clamp(0px, (100vw - 1336px) / 2, 56px);
  --pev-ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  overflow-x: hidden;
  background: var(--pev-white);
  color: var(--pev-text);
  font-family:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

.psy-eval-page *,
.psy-eval-page *::before,
.psy-eval-page *::after {
  box-sizing: border-box;
}

.psy-eval-page h1,
.psy-eval-page h2,
.psy-eval-page h3,
.psy-eval-page p {
  margin-top: 0;
}

.psy-eval-page img {
  max-width: 100%;
}

.psy-eval-page :where(ul, ol) {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* =========================================================
   INTRO
========================================================= */

.pev-intro {
  position: relative;
  overflow: hidden;
  padding: 54px 0 40px;
  /* same tinted wash as the profession page heroes */
  background:
    radial-gradient(
      circle at 8% 15%,
      rgba(18, 104, 244, 0.1),
      transparent 28%
    ),
    radial-gradient(
      circle at 90% 20%,
      rgba(91, 196, 216, 0.1),
      transparent 30%
    ),
    linear-gradient(120deg, #ffffff 0%, #f3f8ff 55%, #edf6ff 100%);
}

.pev-intro::before {
  content: "";
  position: absolute;
  top: -170px;
  left: -190px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(18, 104, 244, 0.11);
  border-radius: 50%;
  box-shadow:
    0 0 0 30px rgba(18, 104, 244, 0.025),
    0 0 0 60px rgba(104, 183, 247, 0.018);
  pointer-events: none;
}

.pev-intro .container {
  position: relative;
  z-index: 2;
}

.pev-crumbs {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-bottom: 26px;
  color: var(--pev-muted);
  font-size: 14px;
}

.pev-crumbs a {
  color: var(--pev-blue);
  text-decoration: none;
}

.pev-crumbs a:hover {
  text-decoration: underline;
}

.pev-intro-head {
  max-width: 780px;
}

.pev-intro h1 {
  margin-bottom: 18px;
  color: var(--pev-navy);
  font-size: clamp(34px, 4.4vw, 52px);
  line-height: 1.08;
  font-weight: 800;
  letter-spacing: -0.035em;
}

.pev-intro-copy {
  margin-bottom: 0;
  max-width: 660px;
  color: var(--pev-muted);
  font-size: 18px;
  line-height: 1.65;
}

/* =========================================================
   FLOW INDICATOR
   base      -> horizontal timeline above the step carousel
   >= 992px  -> vertical timeline in the walkthrough's left column
   Both are the same parts: a track, eight dots, a progress fill.
========================================================= */

.pev-rail {
  position: sticky;
  top: var(--pev-nav);
  z-index: 20;
  margin: 0 -12px 22px;
  padding: 11px 12px 14px;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--pev-border);
}

.pev-rail-inner {
  display: flex;
  flex-direction: column;
}

.pev-rail-status {
  order: -1;
  margin: 0 0 10px;
  color: var(--pev-navy);
  font-size: 13.5px;
  font-weight: 700;
}

.pev-rail-list {
  position: relative;
}

.pev-chips {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
}

.pev-chips > li {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  justify-content: center;
}

.pev-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: transparent;
  color: var(--pev-muted);
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.32s var(--pev-ease),
    color 0.32s var(--pev-ease);
}

.pev-chip:focus-visible {
  outline: 2px solid var(--pev-blue);
  outline-offset: 2px;
}

/* horizontal mode has no room for ten labels, so the name is announced
   from here and shown in the status line above */
.pev-chip-label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.pev-chip-dot {
  flex: 0 0 auto;
  width: 13px;
  height: 13px;
  border: 3px solid #cbd6e8;
  border-radius: 50%;
  background: var(--pev-white);
  box-shadow: 0 0 0 5px var(--pev-white);
  transition:
    background 0.32s var(--pev-ease),
    border-color 0.32s var(--pev-ease),
    box-shadow 0.32s var(--pev-ease),
    transform 0.32s var(--pev-ease);
}

.pev-chip.is-done .pev-chip-dot {
  border-color: var(--pev-blue);
  background: var(--pev-blue);
}

.pev-chip.is-active .pev-chip-dot {
  border-color: var(--pev-blue);
  background: var(--pev-blue);
  box-shadow:
    0 0 0 5px var(--pev-white),
    0 0 0 9px rgba(11, 99, 246, 0.16);
}

/* the line the dots sit on, spanning the first dot centre to the last.
   5% == half of one of the ten equal columns. */
.pev-rail-track {
  position: absolute;
  z-index: 1;
  top: 50%;
  left: 5%;
  right: 5%;
  height: 2px;
  margin-top: -1px;
  border-radius: 2px;
  background: var(--pev-border);
  overflow: hidden;
}

.pev-rail-fill {
  display: block;
  width: var(--pev-progress, 12.5%);
  height: 100%;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--pev-blue), #4f92ff);
  transition:
    width 0.55s var(--pev-ease),
    height 0.55s var(--pev-ease);
}

/* --- vertical timeline (desktop) --- */

@media (min-width: 992px) {
  .pev-rail {
    top: calc(var(--pev-nav) + 24px);
    z-index: 5;
    align-self: start;
    margin: 0;
    padding: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-bottom: 0;
  }

  .pev-rail-status {
    margin: 0 0 18px;
    padding-left: 12px;
    color: var(--pev-muted);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
  }

  /* the step name is already spelled out in the list below */
  .pev-rail-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .pev-chips {
    flex-direction: column;
    align-items: stretch;
  }

  .pev-chips > li {
    flex: 0 0 auto;
    display: block;
  }

  .pev-chip {
    height: var(--pev-chip-h);
    justify-content: flex-start;
    gap: 16px;
    font-size: 15.5px;
  }

  .pev-chip:hover {
    color: var(--pev-blue-dark);
  }

  .pev-chip:hover .pev-chip-label {
    background: var(--pev-blue-soft);
  }

  .pev-chip-label {
    position: static;
    width: auto;
    height: auto;
    margin: 0;
    padding: 7px 13px;
    overflow: visible;
    clip: auto;
    clip-path: none;
    border-radius: 10px;
    transition:
      background 0.32s var(--pev-ease),
      color 0.32s var(--pev-ease);
  }

  .pev-chip-dot {
    width: 14px;
    height: 14px;
    margin-left: 10px;
  }

  .pev-chip.is-done {
    color: var(--pev-text);
  }

  .pev-chip.is-active {
    color: var(--pev-navy);
    font-weight: 700;
  }

  .pev-chip.is-active .pev-chip-label {
    background: var(--pev-blue-soft);
    color: var(--pev-navy);
  }

  /* same track, rotated: first dot centre to last dot centre */
  .pev-rail-track {
    top: calc(var(--pev-chip-h) / 2);
    right: auto;
    bottom: calc(var(--pev-chip-h) / 2);
    left: 16px;
    width: 2px;
    height: auto;
    margin-top: 0;
  }

  .pev-rail-fill {
    width: 2px;
    height: var(--pev-progress, 12.5%);
    background: linear-gradient(180deg, var(--pev-blue), #4f92ff);
  }
}

/* =========================================================
   WALKTHROUGH
========================================================= */

.pev-walk {
  padding: 26px 0 90px;
}

.pev-walk-grid {
  display: grid;
  grid-template-columns:
    var(--pev-rail-w)
    minmax(0, 1fr)
    minmax(0, var(--pev-phone-w));
  gap: 0 var(--pev-col-gap);
  align-items: start;
}

/* --- steps column --- */

.pev-step {
  display: flex;
  align-items: center;
  min-height: 80vh;
  padding: 5vh 0;
}

.pev-step:first-child {
  min-height: 68vh;
  padding-top: 0;
}

.pev-step:last-child {
  min-height: 62vh;
  padding-bottom: 2vh;
}

.pev-step-body {
  width: 100%;
  max-width: var(--pev-copy-w);
  opacity: 0.42;
  transition:
    opacity 0.5s var(--pev-ease),
    transform 0.5s var(--pev-ease);
}

.pev-step.is-active .pev-step-body {
  opacity: 1;
}

.pev-step-eyebrow {
  display: flex;
  gap: 13px;
  align-items: center;
  margin-bottom: 18px;
  color: var(--pev-blue);
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.pev-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border: 1px solid var(--pev-border);
  border-radius: 12px;
  background: var(--pev-blue-soft);
  color: var(--pev-blue-dark);
  font-size: 15px;
  letter-spacing: 0;
  transition:
    background 0.4s var(--pev-ease),
    color 0.4s var(--pev-ease),
    border-color 0.4s var(--pev-ease);
}

.pev-step.is-active .pev-step-num {
  border-color: transparent;
  background: var(--pev-blue);
  color: #ffffff;
}

.pev-step h2 {
  margin-bottom: 14px;
  color: var(--pev-navy);
  font-size: clamp(26px, 3vw, 36px);
  line-height: 1.16;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.pev-step-copy {
  margin-bottom: 12px;
  color: var(--pev-muted);
  font-size: 17px;
  line-height: 1.7;
}

/* the last paragraph still needs room before the bullets or cards below it */
.pev-step-copy:last-of-type {
  margin-bottom: 24px;
}

/* --- reveal children --- */

.pev-points > li,
.pev-note,
.pev-compare,
.pev-scales > li,
.pev-sections {
  opacity: 0;
  transform: translateY(10px);
  transition:
    opacity 0.55s var(--pev-ease),
    transform 0.55s var(--pev-ease);
  transition-delay: calc(var(--i, 0) * 90ms + 120ms);
}

.pev-step.is-inview .pev-points > li,
.pev-step.is-inview .pev-note,
.pev-step.is-inview .pev-compare,
.pev-step.is-inview .pev-scales > li,
.pev-step.is-inview .pev-sections {
  opacity: 1;
  transform: none;
}

.pev-points {
  display: grid;
  gap: 10px;
}

.pev-points > li {
  position: relative;
  padding-left: 24px;
  color: var(--pev-text);
  font-size: 15.5px;
  line-height: 1.6;
}

.pev-points > li::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 0;
  width: 12px;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pev-blue), #80b3ff);
  box-shadow: 0 1px 3px rgba(11, 99, 246, 0.2);
}

/* --- step 1 note --- */

.pev-note {
  display: inline-flex;
  gap: 12px;
  align-items: center;
  margin-top: 22px;
  padding: 12px 18px;
  border: 1px solid var(--pev-border);
  border-radius: 14px;
  background: #f7faff;
}

.pev-note-label {
  color: var(--pev-muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pev-note-value {
  color: var(--pev-navy);
  font-size: 15px;
  font-weight: 700;
}

/* --- step 2 comparison card --- */

.pev-compare {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 14px;
  align-items: center;
  margin-bottom: 24px;
  padding: 18px;
  border: 1px solid var(--pev-border);
  border-radius: 18px;
  background: linear-gradient(180deg, #ffffff, #f7faff);
  box-shadow: 0 18px 36px -28px rgba(7, 27, 69, 0.5);
}

.pev-compare-col {
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid #eaf0fb;
  border-radius: 14px;
  background: #f7f9fd;
}

.pev-compare-col.is-today {
  border-color: #cfe0fb;
  background: var(--pev-blue-soft);
}

.pev-compare-title {
  margin-bottom: 8px;
  color: var(--pev-muted);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.pev-compare-col.is-today .pev-compare-title {
  color: var(--pev-blue-dark);
}

.pev-compare-col ul {
  display: grid;
  gap: 6px;
}

.pev-compare-col li {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: baseline;
  font-size: 13.5px;
}

.pev-compare-col li span {
  color: var(--pev-muted);
}

.pev-compare-col li strong {
  color: var(--pev-navy);
  font-weight: 700;
  text-align: right;
}

.pev-compare-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--pev-blue);
  color: #ffffff;
  font-size: 12px;
}

/* --- step 6 scales --- */

.pev-scales {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.pev-scales > li {
  display: inline-flex;
  gap: 10px;
  align-items: baseline;
  padding: 10px 16px;
  border: 1px solid var(--pev-border);
  border-radius: 14px;
  background: var(--pev-white);
  box-shadow: 0 12px 26px -22px rgba(7, 27, 69, 0.6);
}

.pev-scale-name {
  color: var(--pev-navy);
  font-size: 13.5px;
  font-weight: 700;
}

.pev-scale-score {
  color: var(--pev-blue);
  font-size: 14px;
  font-weight: 700;
}

/* --- step 9: sections in the final evaluation --- */

/* two equal columns so the eight sections fill the width evenly instead of
   wrapping into ragged rows */
.pev-sections {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 24px;
}

.pev-sections > li {
  display: flex;
  align-items: center;
  padding: 9px 14px;
  border: 1px solid var(--pev-border);
  border-radius: 12px;
  background: var(--pev-white);
  color: var(--pev-navy);
  font-size: 13.5px;
  font-weight: 600;
  box-shadow: 0 12px 26px -22px rgba(7, 27, 69, 0.6);
}

/* =========================================================
   STICKY PHONE STAGE
========================================================= */

.pev-walk-stage {
  position: sticky;
  top: calc(var(--pev-nav) + 24px);
  align-self: start;
}

.pev-stage {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--pev-phone-w);
  margin-left: auto;
  margin-right: calc(var(--pev-push) * -1);
  padding: 10px 0 0;
}

.pev-glow {
  position: absolute;
  top: 6%;
  left: 50%;
  z-index: 0;
  width: min(430px, 100%);
  height: 74%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    rgba(11, 99, 246, 0.14),
    rgba(11, 99, 246, 0) 78%
  );
  filter: blur(4px);
  pointer-events: none;
}

.pev-phone {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--pev-phone-w);
  padding: 11px;
  border-radius: 52px;
  /* black device bezel with a soft metallic edge */
  background: linear-gradient(
    158deg,
    #3c414c 0%,
    #14171d 22%,
    #05070b 50%,
    #1c2028 78%,
    #0a0c11 100%
  );
  box-shadow:
    0 40px 70px -34px rgba(5, 12, 30, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1.5px rgba(255, 255, 255, 0.1);
}

.pev-phone-screen {
  position: relative;
  width: 100%;
  aspect-ratio: 1320 / 2868;
  border-radius: 42px;
  overflow: hidden;
  background: #f2f4f8;
}

.pev-phone-screen img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.pev-phone-stage .pev-phone-screen img.pev-shot {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(14px) scale(0.996);
  transition:
    opacity 0.5s var(--pev-ease),
    transform 0.55s var(--pev-ease);
  will-change: opacity, transform;
}

.pev-phone-stage .pev-phone-screen img.pev-shot.is-active {
  opacity: 1;
  transform: none;
}

.pev-stage-caption {
  position: relative;
  z-index: 1;
  margin: 20px 0 0;
  padding: 6px 16px;
  border: 1px solid var(--pev-border);
  border-radius: 999px;
  background: var(--pev-white);
  color: var(--pev-muted);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  transition: opacity 0.3s var(--pev-ease);
}

.pev-stage-caption.is-swapping {
  opacity: 0;
}

/* the in-step phone is only used on small screens */
.pev-step-shot {
  display: none;
  margin: 0;
}

/* mobile controls hidden on desktop */
.pev-controls {
  display: none;
}

/* on wide screens there is page gutter to spare, so nudge the phone past the
   container edge into it. Guarded by width so it can never reach the viewport
   edge and get clipped by the page's overflow-x. */

/* keep the sticky phone fully visible on shorter desktop screens */

/* On a very short desktop window the caption is the last thing that will
   fit, and the rail already names the active step, so drop it there. */
@media (min-width: 992px) and (max-height: 640px) {
  .pev-stage-caption {
    display: none;
  }
}

/* =========================================================
   CLOSING STATEMENT
========================================================= */

.pev-close {
  padding: 0 0 96px;
}

.pev-close-inner {
  max-width: 900px;
  margin: 0 auto;
  padding: 44px 40px;
  border: 1px solid var(--pev-border);
  border-radius: 24px;
  background: linear-gradient(180deg, #fbfcff, #f3f7ff);
  text-align: center;
}

.pev-close-inner h2 {
  margin-bottom: 14px;
  color: var(--pev-navy);
  font-size: clamp(25px, 3.1vw, 36px);
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.pev-close-inner h2 span {
  display: block;
  color: var(--pev-blue);
}

.pev-close-inner p {
  max-width: 620px;
  margin: 0 auto 26px;
  color: var(--pev-muted);
  font-size: 16.5px;
  line-height: 1.7;
}

.pev-close-links {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.pev-close-stores {
  margin-top: 32px;
}

.pev-close-stores-label {
  font-size: 15.5px;
  color: var(--pev-muted);
  margin: 0 auto 18px;
}

.pev-close-badges {
  display: flex;
  gap: 14px;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.pev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  border: 1px solid var(--pev-blue);
  border-radius: 999px;
  background: var(--pev-blue);
  color: #ffffff;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  transition:
    background 0.28s var(--pev-ease),
    border-color 0.28s var(--pev-ease),
    color 0.28s var(--pev-ease);
}

.pev-btn:hover {
  background: var(--pev-blue-dark);
  border-color: var(--pev-blue-dark);
  color: #ffffff;
}

.pev-btn-ghost {
  border-color: var(--pev-border);
  background: var(--pev-white);
  color: var(--pev-navy);
}

.pev-btn-ghost:hover {
  border-color: #c3d6f8;
  background: var(--pev-blue-soft);
  color: var(--pev-blue-dark);
}

.pev-btn:focus-visible {
  outline: 2px solid var(--pev-blue);
  outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE — MOBILE / SMALL TABLET (carousel mode)
========================================================= */

@media (max-width: 991.98px) {
  .psy-eval-page {
    --pev-nav: 70px;
  }

  .pev-intro {
    padding: 34px 0 22px;
  }

  .pev-walk {
    padding: 22px 0 64px;
  }

  .pev-walk-grid {
    display: block;
  }

  /* sticky stage is desktop-only */
  .pev-walk-stage {
    display: none;
  }

  /* steps become a swipeable, snapping track */
  .pev-walk-steps {
    display: flex;
    gap: 18px;
    align-items: flex-start;
    margin: 0 -12px;
    padding: 6px 12px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    overscroll-behavior-x: contain;
    /* height is set per active slide by the walkthrough script */
    transition: height 0.42s var(--pev-ease);
  }

  .pev-walk-steps::-webkit-scrollbar {
    display: none;
  }

  .pev-step {
    display: block;
    flex: 0 0 100%;
    min-height: 0;
    padding: 0;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }

  .pev-step:first-child,
  .pev-step:last-child {
    min-height: 0;
    padding: 0;
  }

  .pev-step-body {
    max-width: none;
    opacity: 1;
  }

  .pev-step h2 {
    font-size: 26px;
  }

  .pev-step-copy {
    margin-bottom: 18px;
    font-size: 16px;
  }

  /* screenshot inside each slide */
  .pev-step-shot {
    display: block;
    margin: 22px 0 0;
  }

  .pev-step-shot .pev-phone {
    max-width: min(258px, 62vw);
    margin: 0 auto;
    padding: 9px;
    border-radius: 44px;
  }

  .pev-step-shot .pev-phone-screen {
    border-radius: 36px;
  }

  .pev-compare {
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    gap: 10px;
    padding: 14px;
  }

  .pev-compare-col {
    padding: 10px 11px;
  }

  .pev-compare-col li {
    flex-direction: column;
    gap: 0;
    align-items: flex-start;
    font-size: 12.5px;
  }

  .pev-compare-col li strong {
    text-align: left;
  }

  .pev-compare-arrow {
    width: 26px;
    height: 26px;
    font-size: 11px;
  }

  /* controls */
  .pev-controls {
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: center;
    margin-top: 26px;
  }

  .pev-arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--pev-border);
    border-radius: 50%;
    background: var(--pev-white);
    color: var(--pev-navy);
    font-size: 13px;
    cursor: pointer;
    transition:
      background 0.28s var(--pev-ease),
      border-color 0.28s var(--pev-ease),
      opacity 0.28s var(--pev-ease);
  }

  .pev-arrow:hover:not(:disabled) {
    border-color: #c3d6f8;
    background: var(--pev-blue-soft);
    color: var(--pev-blue-dark);
  }

  .pev-arrow:disabled {
    opacity: 0.4;
    cursor: default;
  }

  .pev-arrow:focus-visible {
    outline: 2px solid var(--pev-blue);
    outline-offset: 2px;
  }

  .pev-count {
    min-width: 54px;
    margin: 0;
    color: var(--pev-muted);
    font-size: 13.5px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
  }

  .pev-close {
    padding: 0 0 70px;
  }

  .pev-close-inner {
    padding: 32px 22px;
  }
}

@media (max-width: 575.98px) {
  .pev-intro h1 {
    font-size: 31px;
  }

  .pev-intro-copy {
    font-size: 16px;
  }

  .pev-rail-status {
    font-size: 12.5px;
  }

  .pev-step h2 {
    font-size: 24px;
  }

  .pev-step-shot .pev-phone {
    max-width: min(230px, 64vw);
  }

  .pev-close-inner h2 {
    font-size: 25px;
  }

  .pev-close-links {
    flex-direction: column;
  }

  .pev-btn {
    width: 100%;
  }
}

/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
  .psy-eval-page *,
  .psy-eval-page *::before,
  .psy-eval-page *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }

  .pev-points > li,
  .pev-note,
  .pev-compare,
  .pev-scales > li,
  .pev-sections,
  .pev-phone-stage .pev-phone-screen img.pev-shot {
    transform: none !important;
    transition-delay: 0ms !important;
    transition-duration: 0.18s !important;
  }

  .pev-step-body {
    opacity: 1 !important;
  }

  .pev-chip-dot {
    transition-duration: 0.18s !important;
  }
}

/* =========================================================
   NO-JS FALLBACK — everything visible and readable
   (html.pev-js is set by an inline script in <head>)
========================================================= */

html:not(.pev-js) .pev-step-body,
html:not(.pev-js) .pev-points > li,
html:not(.pev-js) .pev-note,
html:not(.pev-js) .pev-compare,
html:not(.pev-js) .pev-scales > li,
html:not(.pev-js) .pev-sections {
  opacity: 1;
  transform: none;
}

html:not(.pev-js) .pev-step {
  min-height: 0;
  padding: 34px 0;
}

html:not(.pev-js) .pev-step-shot {
  display: block;
  margin: 22px 0 0;
}

html:not(.pev-js) .pev-step-shot .pev-phone {
  max-width: 290px;
}

html:not(.pev-js) .pev-walk-grid {
  display: block;
}

html:not(.pev-js) .pev-walk-stage {
  display: none;
}

html:not(.pev-js) .pev-rail-track,
html:not(.pev-js) .pev-rail-status {
  display: none;
}