/* ==========================================================================
   ROI assessment (roi-assessment.module)
   --------------------------------------------------------------------------
   Loaded on demand via require_css from the module, NOT from base.hubl.html —
   this is a landing-page module and has no business shipping on every page.

   Self-sufficiency is the governing constraint here. A HubSpot landing page may
   be built from a template that never extends base.hubl.html, in which case
   neither the --pk-* custom properties nor the dark-mode bootstrap script
   exist. So:

     - every colour resolves as var(--pk-…, <literal>), the literal being the
       prototype's original value;
     - dark mode is driven by BOTH the theme's [data-pk-theme-resolved="dark"]
       attribute AND a prefers-color-scheme query, the latter suppressed when
       the theme has explicitly resolved to light.

   The `.psv` prefix is deliberate and does not follow the theme's `pk-`
   convention: these rules are scoped to one module's stylesheet rather than
   sharing the global namespace, so the risk `pk-` exists to prevent is absent.
   ========================================================================== */

.psv {
  /* Brand — theme tokens when present, prototype literals when not. */
  --psv-violet: var(--pk-color-accent, #561bd6);
  --psv-violet-deep: var(--pk-color-primary-dark, #4316ad);
  --psv-violet-2: var(--pk-color-primary-light, #9f78fa);
  --psv-lavender: #ece4fe;
  --psv-lavender-soft: #f5f0fe;

  /* Surfaces and text. */
  --psv-ink: var(--pk-color-ink, #1a1a1a);
  --psv-muted: var(--pk-color-muted, #666666);
  --psv-line: var(--pk-color-border, #e7e3ef);
  --psv-surface: var(--pk-color-surface, #ffffff);
  --psv-surface-alt: var(--pk-color-surface-alt, #fafafa);
  --psv-input-bg: var(--psv-surface);
  --psv-danger: #c4453d;

  /* Text/iconography sitting ON a violet fill. In dark mode --psv-violet
     becomes the light logo purple, so white would be near-illegible on it —
     this flips to dark ink there. Never hard-code #fff against --psv-violet. */
  --psv-on-violet: var(--pk-color-button-primary-text, #ffffff);

  /* Tint used behind selected options, the plan card and the bucket pill.
     Split from --psv-lavender so dark mode can retint without touching the
     donut's flat lavender track. */
  --psv-tint: var(--psv-lavender-soft);
  --psv-tint-border: var(--psv-lavender);
  --psv-hero-grad: linear-gradient(145deg, #561bd6 0%, #6a2ce6 55%, #9f78fa 130%);
  --psv-shadow: 0 1px 2px rgba(26, 16, 52, 0.04), 0 14px 40px -14px rgba(86, 27, 214, 0.22);

  font-family: var(--pk-font-body, "Work Sans", "Avenir Next", "Segoe UI", sans-serif);
  color: var(--psv-ink);
  /* Transparent on purpose. The landing page owns the backdrop; painting our
     own here stacked a panel inside whatever section marketing dropped this
     into. The card below is the visual object. */
  background: transparent;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Own spacing, no background. Commit 3 dropped the padding along with the
     page background, but the two were doing different jobs — without this the
     module butts against its neighbours on any page whose dnd section classes
     didn't survive, which is the failure this stylesheet already works around
     for the hero. */
  padding: clamp(24px, 5vw, 44px) clamp(16px, 4vw, 24px);
  display: flex;
  justify-content: center;
  align-items: flex-start;
  container-type: inline-size;
}

/* Dark — theme-driven. */
html[data-pk-theme-resolved="dark"] .psv {
  --psv-lavender: #2a2140;
  --psv-lavender-soft: #1c1730;
  --psv-ink: var(--pk-color-ink, #eceaf6);
  --psv-muted: var(--pk-color-muted, #bbb7cf);
  --psv-line: var(--pk-color-border, #2a3145);
  --psv-surface: var(--pk-color-surface-alt, #181d2b);
  --psv-surface-alt: var(--pk-color-surface, #0f1118);
  --psv-input-bg: #0f1422;
  --psv-danger: #ff8f8f;
  --psv-violet: var(--pk-color-primary-darkmode, #9f78fa);
  --psv-violet-deep: #c0a6ff;
  --psv-violet-2: #c7afff;
  --psv-on-violet: var(--pk-color-button-primary-text, #171329);
  --psv-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
  color-scheme: dark;
}

/* Dark — standalone landing page with no theme bootstrap. Suppressed when the
   theme is present and has explicitly resolved to light. */
@media (prefers-color-scheme: dark) {
  html:not([data-pk-theme-resolved="light"]) .psv {
    --psv-lavender: #2a2140;
    --psv-lavender-soft: #1c1730;
    --psv-ink: var(--pk-color-ink, #eceaf6);
    --psv-muted: var(--pk-color-muted, #bbb7cf);
    --psv-line: var(--pk-color-border, #2a3145);
    --psv-surface: var(--pk-color-surface-alt, #181d2b);
    --psv-surface-alt: var(--pk-color-surface, #0f1118);
    --psv-input-bg: #0f1422;
    --psv-danger: #ff8f8f;
    --psv-violet: var(--pk-color-primary-darkmode, #9f78fa);
    --psv-violet-deep: #c0a6ff;
    --psv-violet-2: #c7afff;
    --psv-on-violet: var(--pk-color-button-primary-text, #171329);
    --psv-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
      color-scheme: dark;
  }
}

.psv *,
.psv *::before,
.psv *::after {
  box-sizing: border-box;
}
.psv h1,
.psv h2,
.psv p,
.psv ul,
.psv li {
  margin: 0;
}
/* JS toggles the `hidden` attribute; these rules must beat the flex/block
   display values set further down. */
.psv [hidden] {
  display: none !important;
}

.psv__shell {
  width: 100%;
  max-width: 560px;
}

/* --- progress header ---------------------------------------------------- */

.psv__top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}
.psv__brand {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--psv-violet);
  white-space: nowrap;
}
.psv__bar {
  flex: 1;
  height: 5px;
  border-radius: 5px;
  background: var(--psv-lavender);
  overflow: hidden;
}
.psv__bar i {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 5px;
  background: linear-gradient(90deg, var(--psv-violet), var(--psv-violet-2));
  transition: width 0.45s cubic-bezier(0.4, 0, 0.1, 1);
}
.psv__step {
  font-size: 12px;
  color: var(--psv-muted);
  font-weight: 500;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* --- card + question ---------------------------------------------------- */

.psv__card {
  background: var(--psv-surface);
  border: 1px solid var(--psv-line);
  border-radius: 20px;
  box-shadow: var(--psv-shadow);
  padding: clamp(22px, 5cqw, 34px);
}
.psv__q {
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(23px, 5.4cqw, 30px);
  line-height: 1.14;
  color: var(--psv-ink);
}
.psv__q em,
.psv__rtitle em {
  font-style: normal;
  color: var(--psv-violet);
}
.psv__help {
  color: var(--psv-muted);
  font-size: 14.5px;
  margin-top: 10px;
}

/* --- step-1 intro --------------------------------------------------------
   The landing hero, owned by the module so it vanishes after the first
   answer instead of sitting alongside the whole assessment.
   ------------------------------------------------------------------------ */

.psv__intro {
  margin-bottom: clamp(20px, 4cqw, 28px);
  padding-bottom: clamp(18px, 3.5cqw, 24px);
  border-bottom: 1px solid var(--psv-line);
}
.psv__introeyebrow {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--psv-violet);
  margin-bottom: 10px;
}
.psv__introheading {
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(27px, 6.6cqw, 38px);
  line-height: 1.08;
  color: var(--psv-ink);
}
.psv__introbody {
  color: var(--psv-muted);
  font-size: 14.5px;
  line-height: 1.6;
  margin-top: 12px;
}
.psv__introbody p {
  margin: 0;
}
.psv__introbody p + p {
  margin-top: 10px;
}

/* --- option buttons ----------------------------------------------------- */

.psv__opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 16px;
}
.psv .psv__opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  font-size: 15.5px;
  background: var(--psv-surface);
  border: 1.5px solid var(--psv-line);
  border-radius: 14px;
  padding: 15px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
  color: var(--psv-ink);
}
.psv__opt:hover {
  border-color: var(--psv-violet-2);
}
.psv__opt:focus-visible {
  outline: 2px solid var(--psv-violet-2);
  outline-offset: 2px;
}
.psv__opt[aria-pressed="true"] {
  border-color: var(--psv-violet);
  background: var(--psv-tint);
  box-shadow: inset 0 0 0 1px var(--psv-violet);
}
.psv__box {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  border-radius: 7px;
  border: 1.5px solid var(--psv-line);
  background: var(--psv-input-bg);
  display: grid;
  place-items: center;
  transition: 0.15s;
}
.psv__opt[aria-pressed="true"] .psv__box {
  background: var(--psv-violet);
  border-color: var(--psv-violet);
}
.psv__box svg {
  width: 13px;
  height: 13px;
  stroke: var(--psv-on-violet);
  stroke-width: 3;
  fill: none;
  opacity: 0;
  transition: 0.15s;
}
.psv__opt[aria-pressed="true"] .psv__box svg {
  opacity: 1;
}
.psv__optname {
  font-weight: 600;
}
.psv__optsub {
  display: block;
  font-size: 12.5px;
  color: var(--psv-muted);
  font-weight: 400;
  margin-top: 2px;
}
.psv__grouplab {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--psv-muted);
  margin: 22px 0 10px;
}

.psv__quick {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.psv .psv__quickbtn {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--psv-muted);
  background: none;
  border: 1.5px solid var(--psv-line);
  border-radius: 20px;
  padding: 7px 14px;
  cursor: pointer;
  transition: 0.15s;
}
.psv__quickbtn:hover {
  color: var(--psv-violet);
  border-color: var(--psv-violet-2);
}
.psv__quickbtn:focus-visible {
  outline: 2px solid var(--psv-violet-2);
  outline-offset: 2px;
}

/* --- inputs ------------------------------------------------------------- */

.psv__input {
  width: 100%;
  font: inherit;
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 600;
  font-size: 18px;
  color: var(--psv-ink);
  border: 1.5px solid var(--psv-line);
  border-radius: 14px;
  padding: 15px 16px;
  background: var(--psv-input-bg);
  transition: border-color 0.15s;
  -moz-appearance: textfield;
  appearance: textfield;
}
.psv__input--doors {
  margin-top: 22px;
}
.psv__input::-webkit-outer-spin-button,
.psv__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.psv__input::placeholder {
  color: var(--psv-muted);
  opacity: 0.75;
  font-weight: 500;
}
.psv__input:focus {
  outline: none;
  border-color: var(--psv-violet);
  box-shadow: 0 0 0 3px var(--psv-lavender);
}
.psv__input.is-invalid {
  border-color: var(--psv-danger);
}
.psv__err {
  font-size: 12.5px;
  color: var(--psv-danger);
  margin-top: 8px;
}
.psv__forminline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 22px;
}
.psv__formrow {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.psv__formrow .psv__input {
  flex: 1 1 140px;
}

/* --- navigation --------------------------------------------------------- */

.psv__nav {
  display: flex;
  gap: 10px;
  margin-top: 24px;
  align-items: center;
}
.psv .psv__next {
  flex: 1;
  font: inherit;
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 600;
  font-size: 16px;
  background: var(--psv-violet);
  color: var(--psv-on-violet);
  border: none;
  border-radius: 13px;
  padding: 16px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.psv .psv__next:hover:not(:disabled) {
  background: var(--psv-violet-deep);
}
.psv .psv__next:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.psv .psv__next:focus-visible {
  outline: 2px solid var(--psv-violet-2);
  outline-offset: 3px;
}
.psv .psv__back {
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--psv-muted);
  background: none;
  border: none;
  padding: 16px 6px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
  border-radius: 8px;
}
.psv .psv__back:hover {
  color: var(--psv-violet);
  text-decoration-color: currentColor;
}
.psv .psv__back:focus-visible {
  outline: 2px solid var(--psv-violet-2);
  outline-offset: 2px;
}
.psv__privacy {
  font-size: 11.5px;
  color: var(--psv-muted);
  text-align: center;
  margin-top: 14px;
  line-height: 1.5;
}

/* --- result: bucket + title --------------------------------------------- */

.psv__bucket {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--psv-tint);
  border: 1px solid var(--psv-tint-border);
  border-radius: 20px;
  padding: 5px 13px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--psv-violet);
  margin-bottom: 14px;
}
.psv__bucket svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.psv__rtitle {
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  letter-spacing: -0.02em;
  font-size: clamp(22px, 5cqw, 28px);
  line-height: 1.16;
  color: var(--psv-ink);
}

/* --- result: donut ------------------------------------------------------ */

.psv__donut {
  margin-top: 20px;
  border: 1px solid var(--psv-line);
  border-radius: 14px;
  padding: 18px;
  background: var(--psv-surface);
  display: flex;
  align-items: center;
  gap: 18px;
}
@container (max-width: 420px) {
  .psv__donut {
    flex-direction: column;
    text-align: center;
    gap: 14px;
  }
}
.psv__ring {
  position: relative;
  flex: 0 0 auto;
  width: 140px;
  height: 140px;
}
.psv__ring svg {
  width: 140px;
  height: 140px;
  transform: rotate(-90deg);
}
.psv__ring circle {
  fill: none;
  stroke-width: 18;
}
.psv__ring .track {
  stroke: var(--psv-lavender);
}
.psv__ring .arc {
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s cubic-bezier(0.4, 0, 0.1, 1);
}
.psv__ringctr {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.psv__ringctr b {
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  font-size: 30px;
  color: var(--psv-violet);
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.psv__ringctr span {
  font-size: 10.5px;
  color: var(--psv-muted);
  margin-top: 4px;
  max-width: 82px;
  font-weight: 500;
}
.psv__legend {
  flex: 1;
  min-width: 0;
}
.psv__leg {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  margin-bottom: 9px;
}
.psv__leg:last-child {
  margin-bottom: 0;
}
.psv__leg i {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex: 0 0 auto;
}
.psv__leg i.soft {
  background: linear-gradient(135deg, var(--psv-violet), var(--psv-violet-2));
}
.psv__leg i.hand {
  background: var(--psv-lavender);
}
.psv__leg .lt {
  font-weight: 600;
}
.psv__leg .lv {
  margin-left: auto;
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding-left: 10px;
}

/* --- result: hero figure ------------------------------------------------ */

.psv__hero {
  margin-top: 14px;
  background: var(--psv-hero-grad);
  border-radius: 16px;
  padding: 26px 22px;
  color: #fff;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.psv__hero::after {
  content: "";
  position: absolute;
  right: -40px;
  top: -50px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.2), transparent 70%);
}
.psv__herolab {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.9;
  position: relative;
}
.psv__herobig {
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  font-size: clamp(46px, 12cqw, 62px);
  line-height: 1;
  letter-spacing: -0.03em;
  margin: 8px 0 4px;
  font-variant-numeric: tabular-nums;
  position: relative;
}
.psv__herounit {
  font-size: 15px;
  font-weight: 600;
  opacity: 0.95;
  position: relative;
}
.psv__herosub {
  font-size: 14px;
  opacity: 0.95;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.25);
  position: relative;
}
.psv__herosub b {
  font-weight: 700;
  font-size: 17px;
}

/* --- result: stats + wage ----------------------------------------------- */

.psv__rstats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 12px;
}

/* Must come AFTER the rule above: a container query adds no specificity, so
   placing this earlier in the file loses the cascade. Side by side at phone
   width the value wraps mid-phrase ("Up to 895 / hrs"); one column is taller
   but reads as written. */
@container (max-width: 420px) {
  .psv__rstats {
    grid-template-columns: 1fr;
  }
}
.psv__rstat {
  background: var(--psv-surface);
  border: 1px solid var(--psv-line);
  border-radius: 13px;
  padding: 14px;
}
.psv__rstat .k {
  font-size: 11.5px;
  color: var(--psv-muted);
  font-weight: 500;
}
.psv__rstat .v {
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  font-size: 20px;
  margin-top: 3px;
  font-variant-numeric: tabular-nums;
}
.psv__growth {
  font-size: 12px;
  font-weight: 600;
  color: var(--psv-violet-2);
  margin-left: 3px;
  white-space: nowrap;
}

.psv__wage {
  margin-top: 12px;
  border: 1px dashed var(--psv-line);
  border-radius: 13px;
  padding: 13px 15px;
  background: var(--psv-surface);
}
.psv__wagetop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 12.5px;
  color: var(--psv-muted);
}
.psv__wagetop b {
  color: var(--psv-ink);
  font-weight: 600;
}
.psv .psv__wagebtn {
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--psv-violet);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.psv__wagebtn:hover {
  text-decoration: underline;
}
.psv__wagebody {
  display: block;
  margin-top: 12px;
}
.psv .psv__range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(
    90deg,
    var(--psv-violet) var(--psv-fill, 21%),
    var(--psv-lavender) var(--psv-fill, 21%)
  );
  cursor: pointer;
}
.psv .psv__range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--psv-violet);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.psv .psv__range::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff;
  border: 2.5px solid var(--psv-violet);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}
.psv__scale {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--psv-muted);
  margin-top: 7px;
}
.psv__loadednote {
  font-size: 11.5px;
  color: var(--psv-muted);
  margin-top: 9px;
}
.psv__loadednote b {
  color: var(--psv-violet);
  font-weight: 600;
}

/* --- result: task breakdown --------------------------------------------- */

.psv__rlist {
  margin-top: 20px;
}
.psv__rlisthead {
  font-size: 12.5px;
  color: var(--psv-muted);
  margin-bottom: 6px;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 14px;
}
.psv__rrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 0;
  border-bottom: 1px solid var(--psv-line);
  font-size: 14.5px;
}
.psv__rrow:last-child {
  border-bottom: none;
}
.psv__rrow .nm {
  font-weight: 600;
}
.psv__rrow .hr {
  margin-left: auto;
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  color: var(--psv-violet);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.psv .psv__editlink {
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--psv-violet);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}
.psv__editlink:hover {
  text-decoration: underline;
}

/* --- result: recommended plan ------------------------------------------- */

/* Tier accent lives here, not in JS. A hex set from script can't respond to
   the theme, which is exactly how Professional (#7440E8) and Enterprise
   (#4316AD) ended up darker than the dark-mode card they sit on.
   Light mode keeps the tier ramp as a signal; dark mode collapses to the logo
   purple, which is the only violet that reads correctly on a dark surface. */
.psv__plan[data-tier="starter"] {
  --psv-tier-color: #8a8a8a;
}
.psv__plan[data-tier="essential"] {
  --psv-tier-color: #9f78fa;
}
.psv__plan[data-tier="professional"] {
  --psv-tier-color: #7440e8;
}
.psv__plan[data-tier="enterprise"] {
  --psv-tier-color: #4316ad;
}

html[data-pk-theme-resolved="dark"] .psv__plan[data-tier] {
  --psv-tier-color: var(--psv-violet);
}
@media (prefers-color-scheme: dark) {
  html:not([data-pk-theme-resolved="light"]) .psv__plan[data-tier] {
    --psv-tier-color: var(--psv-violet);
  }
}

.psv__plan {
  margin-top: 20px;
  border: 1.5px solid var(--psv-tier-color, var(--psv-violet-2));
  border-radius: 14px;
  padding: 18px;
  background: var(--psv-tint);
}
.psv__plantop {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.psv__plank {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--psv-tier-color, var(--psv-violet));
}
.psv__planname {
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  font-size: 19px;
  color: var(--psv-tier-color, var(--psv-ink));
}
.psv__planwhy {
  font-size: 13px;
  color: var(--psv-muted);
  margin-top: 6px;
  line-height: 1.45;
  font-style: italic;
}
.psv__planbullets {
  list-style: none;
  margin-top: 12px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.psv__planbullets li {
  font-size: 13.5px;
  color: var(--psv-ink);
  padding-left: 20px;
  position: relative;
  line-height: 1.4;
}
.psv__planbullets li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--psv-tier-color, var(--psv-violet));
  font-weight: 700;
}
.psv__plancost {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--psv-tint-border);
}
.psv__plancostlabel {
  font-size: 12.5px;
  color: var(--psv-muted);
  font-weight: 500;
}
.psv__plancostvalue {
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 700;
  font-size: 17px;
  color: var(--psv-tier-color, var(--psv-violet));
}
.psv__plancostvalue a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
}
.psv__plancostvalue a:hover {
  opacity: 0.8;
}
.psv__plannet {
  font-size: 12px;
  color: var(--psv-muted);
  margin-top: 6px;
  line-height: 1.4;
}
.psv__plandisclaimer {
  font-size: 12px;
  color: var(--psv-ink);
  background: var(--psv-lavender);
  border-left: 2.5px solid var(--psv-tier-color, var(--psv-violet));
  border-radius: 0 8px 8px 0;
  padding: 9px 11px;
  margin-top: 10px;
  line-height: 1.5;
}

/* --- result: CTAs and demo ---------------------------------------------- */

.psv__cta {
  margin-top: 22px;
  display: block;
  width: 100%;
  font: inherit;
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 600;
  font-size: 16px;
  background: var(--psv-violet);
  color: var(--psv-on-violet);
  border: none;
  border-radius: 13px;
  padding: 17px;
  cursor: pointer;
  text-align: center;
  text-decoration: none;
  transition: background 0.15s;
}
.psv__cta:hover {
  background: var(--psv-violet-deep);
}
.psv .psv__cta2 {
  margin-top: 10px;
  display: block;
  width: 100%;
  font: inherit;
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 600;
  font-size: 15px;
  background: var(--psv-surface);
  color: var(--psv-violet);
  border: 1.5px solid var(--psv-violet);
  border-radius: 13px;
  padding: 14px;
  cursor: pointer;
  text-align: center;
  transition: 0.15s;
}
.psv .psv__cta2:hover {
  background: var(--psv-tint);
}
.psv__ctasub {
  font-size: 12.5px;
  color: var(--psv-muted);
  text-align: center;
  margin-top: 12px;
}
.psv .psv__restart {
  display: block;
  margin: 14px auto 0;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--psv-muted);
  background: none;
  border: none;
  cursor: pointer;
}
.psv .psv__restart:hover {
  color: var(--psv-violet);
}
.psv__fine {
  font-size: 11.5px;
  color: var(--psv-muted);
  text-align: center;
  margin-top: 18px;
  line-height: 1.5;
}
.psv__fine--top {
  text-align: left;
  margin-top: 8px;
  margin-bottom: 0;
}

.psv__demo {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.psv__demo > span {
  font-size: 12.5px;
  color: var(--psv-muted);
  font-weight: 600;
}
.psv__slcard {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  width: 100%;
  max-width: 500px;
  text-decoration: none;
  color: inherit;
  background: linear-gradient(160deg, var(--psv-tint) 0%, var(--psv-surface) 100%);
  border: 1.5px solid var(--psv-violet-2);
  border-radius: 16px;
  padding: 34px 22px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.psv__slcard:hover {
  border-color: var(--psv-violet);
  transform: translateY(-1px);
}
.psv__slicon {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--psv-violet);
  color: var(--psv-on-violet);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.psv__slicon svg {
  width: 26px;
  height: 26px;
}
.psv__slcard-title {
  font-family: var(--pk-font-heading, "Poppins", "Avenir Next", "Segoe UI", sans-serif);
  font-weight: 600;
  font-size: 15px;
  color: var(--psv-ink);
  text-align: center;
  line-height: 1.35;
  max-width: 360px;
}
.psv__slcard-cta {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--psv-violet);
}
.psv__videolink-print {
  display: none;
}

/* --- screen transitions -------------------------------------------------- */

.psv__screen {
  display: none;
}
.psv__screen.is-on {
  display: block;
  animation: psvIn 0.35s cubic-bezier(0.2, 0.7, 0.3, 1);
}
@keyframes psvIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-reduced-motion: reduce) {
  .psv__screen.is-on {
    animation: none;
  }
  .psv__bar i,
  .psv__ring .arc,
  .psv__slcard {
    transition: none;
  }
}

/* --- print --------------------------------------------------------------
   Scoped to the instance whose PDF button was pressed. The prototype hid
   `body *` unconditionally, which would print every instance on a page
   carrying more than one.
   ------------------------------------------------------------------------ */

@media print {
  body:has(.psv--printing) * {
    visibility: hidden !important;
  }
  .psv--printing,
  .psv--printing * {
    visibility: visible !important;
  }
  .psv--printing {
    padding: 0 !important;
    background: #fff !important;
    display: block !important;
    position: absolute;
    inset: 0 auto auto 0;
    width: 100%;
  }
  .psv--printing .psv__shell {
    max-width: 100% !important;
  }
  .psv--printing .psv__top,
  .psv--printing .psv__cta,
  .psv--printing .psv__cta2,
  .psv--printing .psv__restart,
  .psv--printing .psv__wagebtn,
  .psv--printing .psv__wagebody,
  .psv--printing .psv__ctasub,
  .psv--printing .psv__demo,
  .psv--printing .psv__editlink {
    display: none !important;
  }
  .psv--printing .psv__videolink-print {
    display: block !important;
    text-align: center;
    font-size: 12.5px;
    margin-top: 10px;
  }
  .psv--printing .psv__videolink-print a {
    color: var(--psv-violet);
    font-weight: 600;
  }
  .psv--printing .psv__card {
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  .psv--printing .psv__hero,
  .psv--printing .psv__ring .arc,
  .psv--printing .psv__bucket,
  .psv--printing .psv__leg i,
  .psv--printing .psv__plan {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .psv--printing .psv__screen {
    display: none !important;
  }
  .psv--printing .psv__screen[data-roi-screen="4"] {
    display: block !important;
  }
}

/* --- surrounding landing copy -------------------------------------------
   These rules style content that lives in the PAGE, not in this module, and
   they are here rather than in main.css on purpose: this stylesheet only
   loads on pages that place the assessment, so the whitepaper and signup
   landings are unaffected.

   Why they exist: the landing template puts the hero and CTA inside dnd
   sections carrying pk-dnd-section--whitepaper-* classes, which is what
   supplies the container width. Twice now a page has been created where
   those section/column classes did not survive, leaving the headline flush
   against the viewport edge with no gutter. Depending on the template's dnd
   classes for basic readability is too fragile, so the copy blocks now
   carry their own gutter regardless of how the page was assembled.
   ------------------------------------------------------------------------ */

.psv-page-copy,
.pk-whitepaper-hero,
.pk-whitepaper-post {
  padding-inline: clamp(1.25rem, 5vw, 3rem);
}

.pk-whitepaper-hero,
.pk-whitepaper-post__inner {
  max-width: 1160px;
  margin-inline: auto;
}

/* The CTA strip reads as a floating slab when it spans the full width with a
   large radius and no inset. Give it the same measure as everything else. */
.pk-whitepaper-post {
  max-width: 1160px;
  margin-inline: auto;
}