/* =========================================================
   NORMAN PETERMANN
   PERFORMANCE BASELINE
   PRODUCTION STYLESHEET V1.0
   VISUAL SOURCE: FROZEN UX/UI V3.6
========================================================= */


/* =========================================================
   ROOT
========================================================= */

#npb-prototype,
#npb-prototype * {
  box-sizing:
    border-box;
}


#npb-prototype {
  --npb-bg:
    #080A0C;

  --npb-white:
    #F2F1ED;

  --npb-grey:
    #8C949C;

  --npb-blue:
    #4169FF;

  --npb-border:
    rgba(242,241,237,0.09);

  --npb-border-strong:
    rgba(242,241,237,0.18);

  --npb-surface:
    rgba(242,241,237,0.018);

  --npb-surface-hover:
    rgba(242,241,237,0.035);

  --npb-blue-soft:
    rgba(65,105,255,0.10);

  --npb-max:
    1500px;

  position:
    relative;

  width:
    100vw;

  max-width:
    100vw;

  margin-left:
    calc(50% - 50vw);

  overflow-x:
    clip;

  background:
    var(--npb-bg);

  color:
    var(--npb-white);

  font-family:
    "Inter",
    sans-serif;

  -webkit-font-smoothing:
    antialiased;

  text-rendering:
    optimizeLegibility;
}



/* =========================================================
   LOCAL RESET
========================================================= */

#npb-prototype button {
  -webkit-appearance:
    none !important;

  appearance:
    none !important;

  border-radius:
    0;

  box-shadow:
    none !important;

  text-shadow:
    none !important;

  font:
    inherit;
}



/* =========================================================
   SHELL
========================================================= */

.npb__shell {
  position:
    relative;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  min-height:
    100svh;

  overflow-x:
    clip;

  background:
    var(--npb-bg);
}



/* =========================================================
   TOP BAR
========================================================= */

.npb__topbar {
  position:
    absolute;

  z-index:
    20;

  top:
    0;

  left:
    50%;

  width:
    min(
      calc(100% - 80px),
      var(--npb-max)
    );

  min-height:
    76px;

  transform:
    translateX(-50%);

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  border-bottom:
    1px solid
    rgba(242,241,237,0.07);

  pointer-events:
    none;
}


.npb__brand,
.npb__topbar-meta {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    500;

  line-height:
    1;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;
}


.npb__brand {
  color:
    rgba(242,241,237,0.72);
}


.npb__topbar-meta {
  color:
    rgba(140,148,156,0.60);
}



/* =========================================================
   SCREENS
========================================================= */

.npb__screen {
  display:
    none;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  min-height:
    100svh;

  overflow-x:
    clip;
}


.npb__screen--active {
  display:
    block;
}



/* =========================================================
   GENERAL
========================================================= */

.npb__eyebrow {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1;

  letter-spacing:
    0.14em;

  text-transform:
    uppercase;

  color:
    rgba(140,148,156,0.72);
}


.npb__outline {
  color:
    transparent;

  -webkit-text-stroke:
    1px rgba(242,241,237,0.52);
}



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

.npb__intro {
  width:
    min(
      calc(100% - 80px),
      var(--npb-max)
    );

  min-width:
    0;

  min-height:
    100svh;

  margin:
    0 auto;

  padding:
    140px 0 90px;

  display:
    grid;

  grid-template-columns:
    minmax(0,1.08fr)
    minmax(400px,0.72fr);

  align-items:
    center;

  gap:
    clamp(80px,9vw,150px);
}


.npb__intro-copy {
  max-width:
    850px;

  min-width:
    0;
}


.npb__hero-title {
  max-width:
    100%;

  margin:
    30px 0 0;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    clamp(76px,8.2vw,142px);

  font-weight:
    800;

  line-height:
    0.84;

  letter-spacing:
    -0.06em;

  text-transform:
    uppercase;
}


.npb__hero-title span {
  display:
    block;
}


.npb__hero-title .npb__outline {
  margin-top:
    0.06em;
}


.npb__hero-lead {
  width:
    min(100%,620px);

  margin:
    45px 0 0;

  font-size:
    clamp(15px,1.05vw,17px);

  line-height:
    1.75;

  color:
    rgba(242,241,237,0.58);
}


.npb__intro-meta {
  margin-top:
    35px;

  display:
    flex;

  align-items:
    center;

  gap:
    12px;

  flex-wrap:
    wrap;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    10px;

  font-weight:
    500;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;

  color:
    rgba(140,148,156,0.70);
}


.npb__intro-meta i {
  width:
    4px;

  height:
    4px;

  border-radius:
    50%;

  background:
    var(--npb-blue);
}



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

.npb__intro-panel {
  min-width:
    0;

  padding:
    28px 30px;

  border:
    1px solid
    var(--npb-border);

  background:
    var(--npb-surface);
}


.npb__intro-panel-label {
  margin-bottom:
    12px;

  padding-bottom:
    20px;

  border-bottom:
    1px solid
    var(--npb-border);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    10px;

  font-weight:
    500;

  letter-spacing:
    0.08em;

  color:
    rgba(140,148,156,0.76);

  text-transform:
    uppercase;
}


.npb__intro-item {
  display:
    grid;

  grid-template-columns:
    38px
    minmax(0,1fr);

  gap:
    15px;

  padding:
    20px 0;

  border-bottom:
    1px solid
    var(--npb-border);
}


.npb__intro-item:last-child {
  border-bottom:
    0;
}


.npb__intro-item > div {
  min-width:
    0;
}


.npb__intro-number {
  padding-top:
    2px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    11px;

  font-weight:
    600;

  color:
    var(--npb-blue);
}


.npb__intro-item strong {
  display:
    block;

  margin-bottom:
    7px;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    14px;

  font-weight:
    600;

  letter-spacing:
    -0.01em;

  color:
    rgba(242,241,237,0.92);
}


.npb__intro-item div > span {
  display:
    block;

  font-size:
    12px;

  line-height:
    1.6;

  color:
    rgba(140,148,156,0.82);
}



/* =========================================================
   BUTTONS
========================================================= */

.npb__primary-button,
.npb__secondary-button,
.npb__continue {
  min-height:
    60px;

  padding:
    0 22px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    35px;

  border:
    1px solid
    var(--npb-white) !important;

  background:
    var(--npb-white) !important;

  color:
    var(--npb-bg) !important;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    11px;

  font-weight:
    600;

  line-height:
    1;

  letter-spacing:
    0.12em;

  text-transform:
    uppercase;

  cursor:
    pointer;

  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease;
}


.npb__primary-button {
  min-width:
    245px;

  margin-top:
    46px;
}



/* =========================================================
   BUILD YOUR BASELINE
   EXACT BRAND CTA TYPOGRAPHY
   MATCHES SECTION 09
========================================================= */

#npb-prototype
.npb__primary-button--baseline {
  min-height:
    82px;

  padding:
    0
    clamp(24px,2.4vw,34px);

  font-family:
    "IBM Plex Mono",
    monospace !important;

  font-size:
    11px !important;

  font-weight:
    600 !important;

  line-height:
    1 !important;

  letter-spacing:
    0.12em !important;

  text-transform:
    uppercase !important;
}


#npb-prototype
.npb__primary-button--baseline
.npb__baseline-button-text {
  font-family:
    "IBM Plex Mono",
    monospace !important;

  font-size:
    11px !important;

  font-weight:
    600 !important;

  line-height:
    1 !important;

  letter-spacing:
    0.12em !important;

  text-transform:
    uppercase !important;
}


/* =========================================================
   BASELINE CTA ARROW
   MATCHES SECTION 09
========================================================= */

#npb-prototype
.npb__primary-button--baseline
.npb__arrow {
  width:
    22px;

  height:
    12px;

  flex:
    0 0 22px;

  color:
    var(--npb-bg);
}


#npb-prototype
.npb__primary-button--baseline
.npb__arrow::before {
  width:
    20px;
}


#npb-prototype
.npb__primary-button--baseline
.npb__arrow::after {
  width:
    7px;

  height:
    7px;
}



.npb__secondary-button {
  width:
    100%;

  max-width:
    310px;

  margin-top:
    27px;
}


.npb__continue {
  min-width:
    180px;

  border-color:
    var(--npb-blue) !important;

  background:
    var(--npb-blue) !important;

  color:
    #FFFFFF !important;
}


.npb__continue .npb__arrow {
  color:
    #FFFFFF;
}


.npb__continue:disabled {
  cursor:
    default;

  border-color:
    rgba(242,241,237,0.10) !important;

  background:
    rgba(242,241,237,0.035) !important;

  color:
    rgba(140,148,156,0.40) !important;
}


.npb__continue:disabled .npb__arrow {
  color:
    rgba(140,148,156,0.30);
}


.npb__arrow {
  position:
    relative;

  width:
    18px;

  height:
    10px;

  flex:
    0 0 18px;

  color:
    var(--npb-blue);
}


.npb__arrow::before {
  content:
    "";

  position:
    absolute;

  left:
    0;

  top:
    50%;

  width:
    16px;

  height:
    1px;

  background:
    currentColor;

  transform:
    translateY(-50%);
}


.npb__arrow::after {
  content:
    "";

  position:
    absolute;

  right:
    0;

  top:
    50%;

  width:
    6px;

  height:
    6px;

  border-top:
    1px solid currentColor;

  border-right:
    1px solid currentColor;

  transform:
    translateY(-50%)
    rotate(45deg);
}



/* =========================================================
   ASSESSMENT
========================================================= */

.npb__assessment {
  width:
    min(
      calc(100% - 80px),
      var(--npb-max)
    );

  max-width:
    100%;

  min-width:
    0;

  min-height:
    100svh;

  margin:
    0 auto;

  padding:
    118px 0 60px;

  display:
    flex;

  flex-direction:
    column;
}


.npb__question-meta {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    30px;

  min-width:
    0;

  padding-bottom:
    0;

  border-bottom:
    0;
}


.npb__question-meta > div {
  min-width:
    0;
}


.npb__question-kicker,
.npb__question-context,
.npb__counter {
  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.npb__question-kicker {
  color:
    rgba(242,241,237,0.78);
}


.npb__question-kicker--blue {
  color:
    var(--npb-blue);
}


.npb__question-context {
  margin-left:
    13px;

  color:
    rgba(140,148,156,0.58);
}


.npb__counter {
  flex:
    0 0 auto;

  color:
    rgba(140,148,156,0.66);
}



/* =========================================================
   QUESTION LAYOUT
========================================================= */

.npb__question-layout {
  flex:
    1;

  min-width:
    0;

  width:
    100%;

  display:
    grid;

  grid-template-columns:
    minmax(0,0.92fr)
    minmax(0,0.78fr);

  align-items:
    center;

  gap:
    clamp(70px,8vw,140px);

  padding:
    clamp(55px,7vh,90px)
    0;
}


.npb__question-copy {
  max-width:
    780px;

  min-width:
    0;
}


.npb__question-number,
.npb__adaptive-label {
  margin-bottom:
    24px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    12px;

  font-weight:
    600;

  letter-spacing:
    0.04em;

  color:
    var(--npb-blue);
}


.npb__adaptive-label {
  font-size:
    10px;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;
}


.npb__question-title {
  width:
    100%;

  max-width:
    820px;

  min-width:
    0;

  margin:
    0;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    clamp(38px,4.2vw,70px);

  font-weight:
    700;

  line-height:
    1.02;

  letter-spacing:
    -0.045em;

  color:
    var(--npb-white);

  overflow-wrap:
    break-word;

  word-break:
    normal;
}


.npb__question-note {
  width:
    min(100%,590px);

  max-width:
    100%;

  margin:
    31px 0 0;

  font-size:
    13px;

  line-height:
    1.7;

  color:
    rgba(140,148,156,0.82);

  overflow-wrap:
    break-word;
}



/* =========================================================
   ANSWERS
========================================================= */

.npb__answers {
  display:
    grid;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  gap:
    9px;
}


.npb__answer {
  width:
    100% !important;

  max-width:
    100% !important;

  min-width:
    0 !important;

  min-height:
    76px;

  padding:
    14px 17px;

  display:
    grid;

  grid-template-columns:
    36px
    minmax(0,1fr);

  align-items:
    center;

  gap:
    13px;

  overflow:
    hidden;

  white-space:
    normal !important;

  border:
    1px solid
    var(--npb-border) !important;

  background:
    var(--npb-surface) !important;

  color:
    var(--npb-white) !important;

  text-align:
    left;

  cursor:
    pointer;

  transition:
    border-color 160ms ease,
    background 160ms ease,
    transform 160ms ease;
}


.npb__answer-marker {
  width:
    31px;

  height:
    31px;

  flex:
    0 0 31px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(242,241,237,0.13);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    600;

  color:
    rgba(140,148,156,0.86);

  transition:
    background 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}


.npb__answer-text {
  display:
    block;

  width:
    100%;

  max-width:
    100%;

  min-width:
    0;

  font-size:
    13px;

  line-height:
    1.5;

  color:
    rgba(242,241,237,0.74);

  white-space:
    normal !important;

  overflow-wrap:
    break-word !important;

  word-wrap:
    break-word !important;

  word-break:
    normal !important;
}


.npb__answer--selected {
  border-color:
    rgba(65,105,255,0.72) !important;

  background:
    var(--npb-blue-soft) !important;
}


.npb__answer--selected
.npb__answer-marker {
  border-color:
    var(--npb-blue);

  background:
    var(--npb-blue);

  color:
    #FFFFFF;
}


.npb__answer--selected
.npb__answer-text {
  color:
    rgba(242,241,237,0.96);
}



/* =========================================================
   NAVIGATION
========================================================= */

.npb__navigation {
  width:
    100%;

  min-width:
    0;

  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    20px;

  padding-top:
    20px;

  border-top:
    1px solid
    var(--npb-border);
}


.npb__back {
  min-height:
    46px;

  padding:
    0;

  border:
    0 !important;

  background:
    transparent !important;

  color:
    rgba(140,148,156,0.70) !important;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.10em;

  text-transform:
    uppercase;

  cursor:
    pointer;
}



/* =========================================================
   PROGRESS
========================================================= */

.npb__progress {
  width:
    100%;

  min-width:
    0;

  padding-top:
    20px;
}


.npb__progress-meta {
  margin-bottom:
    9px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    8.5px;

  font-weight:
    500;

  letter-spacing:
    0.08em;

  color:
    rgba(140,148,156,0.52);

  text-transform:
    uppercase;
}


.npb__progress-track {
  width:
    100%;

  height:
    2px;

  overflow:
    hidden;

  background:
    rgba(242,241,237,0.07);
}


.npb__progress-track span {
  display:
    block;

  height:
    100%;

  background:
    var(--npb-blue);
}



/* =========================================================
   ANALYSIS
========================================================= */

.npb__analysis {
  width:
    min(
      calc(100% - 40px),
      900px
    );

  max-width:
    100%;

  min-width:
    0;

  min-height:
    100svh;

  margin:
    0 auto;

  padding:
    120px 0 80px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  text-align:
    center;
}


.npb__analysis-mark {
  margin-bottom:
    38px;

  display:
    flex;

  gap:
    8px;
}


.npb__analysis-mark span {
  width:
    6px;

  height:
    6px;

  border-radius:
    50%;

  background:
    var(--npb-blue);
}


.npb__analysis-mark span:nth-child(2) {
  opacity:
    0.55;
}


.npb__analysis-mark span:nth-child(3) {
  opacity:
    0.24;
}


.npb__analysis-title {
  width:
    100%;

  max-width:
    100%;

  margin:
    30px 0 0;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    clamp(60px,8vw,126px);

  font-weight:
    800;

  line-height:
    0.85;

  letter-spacing:
    -0.06em;

  text-transform:
    uppercase;
}


.npb__analysis-title span {
  display:
    block;
}


.npb__analysis-copy {
  width:
    min(100%,650px);

  margin:
    42px auto 0;

  font-size:
    14px;

  line-height:
    1.75;

  color:
    rgba(140,148,156,0.84);
}


.npb__analysis-status {
  margin-top:
    34px;

  display:
    flex;

  align-items:
    center;

  gap:
    9px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.10em;

  color:
    rgba(242,241,237,0.70);

  text-transform:
    uppercase;
}


.npb__analysis-status-dot {
  width:
    5px;

  height:
    5px;

  border-radius:
    50%;

  background:
    var(--npb-blue);
}



/* =========================================================
   RESULT
========================================================= */

.npb__screen--result {
  min-height:
    auto;
}


.npb__result {
  width:
    min(
      calc(100% - 80px),
      var(--npb-max)
    );

  max-width:
    100%;

  min-width:
    0;

  margin:
    0 auto;

  padding:
    145px 0 100px;
}



/* =========================================================
   RESULT HERO
========================================================= */

.npb__result-hero {
  padding-bottom:
    clamp(70px,8vw,120px);

  border-bottom:
    1px solid
    var(--npb-border);
}


.npb__result-title {
  max-width:
    1250px;

  margin:
    30px 0 0;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    clamp(66px,7.6vw,132px);

  font-weight:
    800;

  line-height:
    0.86;

  letter-spacing:
    -0.06em;

  text-transform:
    uppercase;
}


.npb__result-title span {
  display:
    block;
}


.npb__result-lead {
  max-width:
    760px;

  margin:
    47px 0 0;

  font-size:
    clamp(16px,1.25vw,20px);

  line-height:
    1.65;

  color:
    rgba(242,241,237,0.66);
}


.npb__result-summary {
  margin-top:
    60px;

  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    10px;

  max-width:
    960px;
}


.npb__result-summary > div {
  min-width:
    0;

  min-height:
    112px;

  padding:
    21px 23px;

  border:
    1px solid
    var(--npb-border);

  background:
    var(--npb-surface);
}


/* =========================================================
   RESULT SUMMARY HIERARCHY
   BOTH CARDS = CENTRAL DIAGNOSIS
   PRIMARY BOTTLENECK = SLIGHTLY STRONGER
========================================================= */

.npb__result-summary > div:first-child {
  border-color:
    rgba(65,105,255,0.20);

  background:
    rgba(65,105,255,0.045);
}


.npb__result-summary > div:nth-child(2) {
  border-color:
    rgba(65,105,255,0.34);

  background:
    rgba(65,105,255,0.075);
}


.npb__result-summary > div:first-child > span {
  color:
    rgba(242,241,237,0.74);
}


.npb__result-summary > div:nth-child(2) > span {
  color:
    rgba(65,105,255,0.92);
}


.npb__result-summary > div > span {
  display:
    block;

  margin-bottom:
    16px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.08em;

  color:
    rgba(140,148,156,0.70);

  text-transform:
    uppercase;
}


.npb__result-summary strong {
  display:
    block;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    clamp(16px,1.4vw,21px);

  font-weight:
    600;

  line-height:
    1.2;

  color:
    rgba(242,241,237,0.94);
}



/* =========================================================
   RESULT SECTIONS
========================================================= */

.npb__result-section {
  display:
    grid;

  grid-template-columns:
    95px
    minmax(250px,0.75fr)
    minmax(0,1.25fr);

  gap:
    clamp(30px,4vw,70px);

  min-width:
    0;

  padding:
    clamp(55px,6vw,90px)
    0;

  border-bottom:
    1px solid
    var(--npb-border);
}


.npb__result-index {
  padding-top:
    4px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    12px;

  font-weight:
    600;

  color:
    var(--npb-blue);
}


.npb__result-section-heading,
.npb__result-section-copy {
  min-width:
    0;
}


.npb__result-section-heading > span {
  display:
    block;

  margin-bottom:
    18px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.08em;

  color:
    rgba(140,148,156,0.72);

  text-transform:
    uppercase;
}


.npb__result-section-heading h3 {
  margin:
    0;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    clamp(28px,3vw,46px);

  font-weight:
    650;

  line-height:
    1;

  letter-spacing:
    -0.04em;

  text-transform:
    uppercase;

  color:
    rgba(242,241,237,0.96);

  overflow-wrap:
    break-word;
}


.npb__result-section-copy {
  max-width:
    690px;
}


.npb__result-section-copy p {
  margin:
    0 0 18px;

  font-size:
    14px;

  line-height:
    1.75;

  color:
    rgba(140,148,156,0.92);
}


.npb__result-section-copy p:last-child {
  margin-bottom:
    0;
}


.npb__result-callout {
  margin-top:
    30px;

  padding:
    16px 18px;

  border-left:
    2px solid
    var(--npb-blue);

  background:
    var(--npb-blue-soft);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    10px;

  font-weight:
    500;

  line-height:
    1.6;

  letter-spacing:
    0.04em;

  color:
    rgba(242,241,237,0.82);
}



/* =========================================================
   7-DAY ACTION
========================================================= */

.npb__action-box {
  padding:
    26px 28px;

  border:
    1px solid
    rgba(65,105,255,0.42);

  background:
    var(--npb-blue-soft);
}


.npb__action-label {
  display:
    block;

  margin-bottom:
    18px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    600;

  letter-spacing:
    0.09em;

  color:
    var(--npb-blue);

  text-transform:
    uppercase;
}


.npb__action-box strong {
  display:
    block;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    clamp(20px,2vw,28px);

  font-weight:
    600;

  line-height:
    1.35;

  letter-spacing:
    -0.025em;

  color:
    rgba(242,241,237,0.96);
}


.npb__action-box p {
  margin-top:
    21px;

  color:
    rgba(242,241,237,0.58);
}



/* =========================================================
   SEND RESULT BY EMAIL
========================================================= */

.npb__sr-only {
  position:
    absolute !important;

  width:
    1px !important;

  height:
    1px !important;

  padding:
    0 !important;

  margin:
    -1px !important;

  overflow:
    hidden !important;

  clip:
    rect(0,0,0,0) !important;

  white-space:
    nowrap !important;

  border:
    0 !important;
}


.npb__email-result {
  position:
    relative;

  margin-top:
    clamp(90px,9vw,145px);

  padding:
    clamp(45px,5vw,70px);

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(360px,0.72fr);

  gap:
    clamp(70px,8vw,130px);

  overflow:
    hidden;

  border:
    1px solid
    rgba(65,105,255,0.38);

  background:
    linear-gradient(
      118deg,
      rgba(65,105,255,0.075) 0%,
      rgba(65,105,255,0.028) 42%,
      rgba(242,241,237,0.012) 100%
    );
}


.npb__email-result > div {
  min-width:
    0;
}


.npb__email-result-label,
.npb__email-success-label {
  display:
    block;

  margin-bottom:
    23px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.09em;

  color:
    var(--npb-blue);

  text-transform:
    uppercase;
}


.npb__email-result h3,
.npb__email-success h4 {
  margin:
    0;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    clamp(38px,4.4vw,68px);

  font-weight:
    700;

  line-height:
    0.98;

  letter-spacing:
    -0.05em;

  color:
    rgba(242,241,237,0.96);

  text-transform:
    uppercase;
}


.npb__email-result h3 span,
.npb__email-success h4 span {
  display:
    block;
}


.npb__email-result-intro {
  margin:
    0 0 28px;

  max-width:
    620px;

  font-size:
    14px;

  line-height:
    1.75;

  color:
    rgba(140,148,156,0.92);
}


.npb__email-form {
  position:
    relative;
}


.npb__email-field {
  display:
    block;

  width:
    100%;
}


#npb-prototype .npb__email-field input[type="email"] {
  width:
    100%;

  min-height:
    62px;

  margin:
    0;

  padding:
    0 20px;

  border:
    1px solid
    rgba(242,241,237,0.17) !important;

  border-radius:
    0 !important;

  outline:
    none;

  background:
    rgba(242,241,237,0.022) !important;

  color:
    var(--npb-white) !important;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    11px;

  font-weight:
    500;

  line-height:
    1;

  letter-spacing:
    0.07em;

  text-transform:
    none;

  box-shadow:
    none !important;

  transition:
    border-color 180ms ease,
    background 180ms ease;
}


#npb-prototype .npb__email-field input[type="email"]::placeholder {
  color:
    rgba(140,148,156,0.60);

  opacity:
    1;

  text-transform:
    uppercase;
}


#npb-prototype .npb__email-field input[type="email"]:focus {
  border-color:
    rgba(65,105,255,0.78) !important;

  background:
    rgba(65,105,255,0.035) !important;
}


#npb-prototype .npb__email-field input[type="email"]:disabled {
  opacity:
    0.56;

  cursor:
    wait;
}


.npb__email-honeypot {
  position:
    absolute !important;

  left:
    -9999px !important;

  width:
    1px !important;

  height:
    1px !important;

  overflow:
    hidden !important;
}


.npb__email-consent {
  position:
    relative;

  margin-top:
    22px;

  display:
    grid;

  grid-template-columns:
    20px minmax(0,1fr);

  gap:
    12px;

  align-items:
    start;

  cursor:
    pointer;
}


.npb__email-consent input {
  position:
    absolute;

  opacity:
    0;

  pointer-events:
    none;
}


.npb__email-consent-box {
  width:
    18px;

  height:
    18px;

  margin-top:
    2px;

  border:
    1px solid
    rgba(242,241,237,0.24);

  background:
    rgba(242,241,237,0.018);

  transition:
    border-color 160ms ease,
    background 160ms ease;
}


.npb__email-consent input:focus-visible +
.npb__email-consent-box {
  outline:
    2px solid
    rgba(65,105,255,0.55);

  outline-offset:
    3px;
}


.npb__email-consent input:checked +
.npb__email-consent-box {
  border-color:
    var(--npb-blue);

  background:
    var(--npb-blue);

  box-shadow:
    inset 0 0 0 4px
    var(--npb-bg);
}


.npb__email-consent-copy {
  font-size:
    12px;

  line-height:
    1.6;

  color:
    rgba(140,148,156,0.86);
}


.npb__email-consent-copy small {
  display:
    inline-block;

  margin-left:
    8px;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    8px;

  font-weight:
    600;

  letter-spacing:
    0.08em;

  color:
    rgba(242,241,237,0.52);

  text-transform:
    uppercase;
}


#npb-prototype .npb__email-submit {
  width:
    100%;

  min-width:
    0;

  margin-top:
    16px;
}


#npb-prototype .npb__email-submit:disabled {
  cursor:
    wait;

  opacity:
    0.68;
}


.npb__email-privacy {
  margin:
    14px 0 0;

  font-size:
    10.5px;

  line-height:
    1.6;

  color:
    rgba(140,148,156,0.57);
}


.npb__email-privacy a {
  margin-left:
    5px;

  color:
    rgba(242,241,237,0.68);

  text-decoration:
    underline;

  text-decoration-color:
    rgba(65,105,255,0.55);

  text-underline-offset:
    2px;
}


.npb__email-privacy a:hover,
.npb__email-privacy a:focus-visible {
  color:
    var(--npb-white);
}


.npb__email-status {
  margin:
    16px 0 0;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    600;

  line-height:
    1.55;

  letter-spacing:
    0.05em;

  text-transform:
    uppercase;
}


.npb__email-status[data-npb-status="error"] {
  color:
    #F2F1ED;
}


.npb__email-status[data-npb-status="info"] {
  color:
    var(--npb-grey);
}


.npb__email-success {
  padding:
    2px 0 0;
}


.npb__email-success h4 {
  font-size:
    clamp(34px,3.7vw,56px);
}


.npb__email-success > p {
  margin:
    24px 0 0;

  font-size:
    14px;

  line-height:
    1.7;

  color:
    rgba(140,148,156,0.92);
}


.npb__email-success-note {
  padding-top:
    16px;

  border-top:
    1px solid
    var(--npb-border);

  font-size:
    11px !important;

  color:
    rgba(140,148,156,0.70) !important;
}


/* =========================================================
   NEXT STEP
========================================================= */

.npb__next-step {
  margin-top:
    clamp(100px,10vw,160px);

  padding:
    clamp(45px,5vw,70px);

  display:
    grid;

  grid-template-columns:
    minmax(0,1fr)
    minmax(330px,0.72fr);

  gap:
    clamp(70px,8vw,130px);

  border:
    1px solid
    var(--npb-border);

  background:
    var(--npb-surface);
}


.npb__next-step > div {
  min-width:
    0;
}


.npb__next-step-label,
.npb__next-step-product {
  display:
    block;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.09em;

  text-transform:
    uppercase;
}


.npb__next-step-label {
  margin-bottom:
    23px;

  color:
    rgba(140,148,156,0.72);
}


.npb__next-step h3 {
  margin:
    0;

  font-family:
    "Archivo",
    sans-serif;

  font-size:
    clamp(38px,4.4vw,68px);

  font-weight:
    700;

  line-height:
    0.98;

  letter-spacing:
    -0.05em;

  color:
    rgba(242,241,237,0.96);
}


.npb__next-step-product {
  margin-bottom:
    20px;

  color:
    var(--npb-blue);
}


.npb__next-step-content p {
  margin:
    0;

  font-size:
    14px;

  line-height:
    1.7;

  color:
    rgba(140,148,156,0.90);
}


.npb__next-step-meta {
  margin-top:
    23px;

  display:
    flex;

  justify-content:
    space-between;

  gap:
    20px;

  padding-top:
    18px;

  border-top:
    1px solid
    var(--npb-border);

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    9px;

  font-weight:
    500;

  letter-spacing:
    0.07em;

  color:
    rgba(242,241,237,0.72);

  text-transform:
    uppercase;
}



/* =========================================================
   DEMO RESET
========================================================= */

.npb__demo-reset {
  padding-top:
    70px;

  text-align:
    center;
}


.npb__demo-reset button {
  border:
    0 !important;

  background:
    transparent !important;

  color:
    rgba(140,148,156,0.52) !important;

  font-family:
    "IBM Plex Mono",
    monospace;

  font-size:
    8.5px;

  font-weight:
    500;

  letter-spacing:
    0.08em;

  text-transform:
    uppercase;

  cursor:
    pointer;
}



/* =========================================================
   HOVER
========================================================= */

@media
  (hover:hover)
  and
  (pointer:fine) {

  .npb__answer:hover {
    border-color:
      var(--npb-border-strong) !important;

    background:
      var(--npb-surface-hover) !important;
  }


  .npb__primary-button:hover,
  .npb__secondary-button:hover,
  .npb__continue:not(:disabled):hover {
    border-color:
      var(--npb-blue) !important;

    background:
      var(--npb-blue) !important;

    color:
      #FFFFFF !important;
  }


  .npb__primary-button:hover
  .npb__arrow,
  .npb__secondary-button:hover
  .npb__arrow,
  .npb__continue:not(:disabled):hover
  .npb__arrow {
    color:
      #FFFFFF;
  }


  .npb__back:hover,
  .npb__demo-reset button:hover {
    color:
      var(--npb-white) !important;
  }

}



/* =========================================================
   TABLET
========================================================= */

@media
  (max-width:1050px) {

  .npb__intro {
    grid-template-columns:
      1fr;

    gap:
      65px;

    padding-top:
      130px;
  }


  .npb__intro-panel {
    width:
      min(100%,720px);
  }


  .npb__question-layout {
    grid-template-columns:
      1fr;

    gap:
      50px;
  }


  .npb__answers {
    width:
      min(100%,760px);
  }


  .npb__result-section {
    grid-template-columns:
      65px
      minmax(220px,0.75fr)
      minmax(0,1.25fr);

    gap:
      28px;
  }


  .npb__email-result,
  .npb__next-step {
    grid-template-columns:
      1fr;

    gap:
      55px;
  }

}



/* =========================================================
   MOBILE
========================================================= */

@media
  (max-width:767px) {

  #npb-prototype {
    overflow-x:
      clip;
  }


  .npb__topbar {
    width:
      calc(100% - 40px);

    min-height:
      62px;
  }


  .npb__brand,
  .npb__topbar-meta {
    font-size:
      8.5px;

    letter-spacing:
      0.10em;
  }


  .npb__topbar-meta {
    display:
      none;
  }


  .npb__eyebrow {
    font-size:
      9.5px;

    letter-spacing:
      0.11em;
  }



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

  .npb__intro {
    width:
      calc(100% - 40px);

    max-width:
      calc(100% - 40px);

    min-height:
      100svh;

    padding:
      105px 0 65px;

    display:
      flex;

    flex-direction:
      column;

    justify-content:
      center;

    align-items:
      stretch;

    gap:
      60px;
  }


  .npb__hero-title {
    margin-top:
      24px;

    font-size:
      clamp(50px,15vw,72px);

    line-height:
      0.86;

    letter-spacing:
      -0.055em;
  }


  .npb__hero-lead {
    margin-top:
      32px;

    font-size:
      14px;

    line-height:
      1.7;
  }


  .npb__intro-meta {
    margin-top:
      27px;

    font-size:
      9px;

    gap:
      9px;
  }


  .npb__primary-button {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin-top:
      37px;
  }


  #npb-prototype
  .npb__primary-button--baseline {
    min-height:
      72px;

    padding:
      0 20px;

    font-size:
      10.5px !important;

    letter-spacing:
      0.12em !important;
  }


  #npb-prototype
  .npb__primary-button--baseline
  .npb__baseline-button-text {
    font-size:
      10.5px !important;

    letter-spacing:
      0.12em !important;
  }


  .npb__intro-panel {
    width:
      100%;

    max-width:
      100%;

    padding:
      22px 20px;
  }


  .npb__intro-panel-label {
    font-size:
      9.5px;
  }


  .npb__intro-item {
    grid-template-columns:
      32px
      minmax(0,1fr);

    padding:
      17px 0;
  }


  .npb__intro-number {
    font-size:
      10.5px;
  }


  .npb__intro-item strong {
    font-size:
      13px;

    line-height:
      1.35;
  }


  .npb__intro-item div > span {
    font-size:
      12px;

    line-height:
      1.6;
  }



  /* =======================================================
     ASSESSMENT
  ======================================================== */

  .npb__assessment {
    width:
      calc(100% - 40px);

    max-width:
      calc(100% - 40px);

    min-width:
      0;

    min-height:
      100svh;

    padding:
      90px 0 30px;
  }


  .npb__question-meta {
    width:
      100%;

    min-width:
      0;

    padding-bottom:
      16px;
  }


  .npb__question-kicker,
  .npb__question-context,
  .npb__counter {
    font-size:
      9.5px;
  }


  .npb__question-context {
    display:
      none;
  }


  .npb__question-layout {
    flex:
      1;

    width:
      100%;

    min-width:
      0;

    display:
      flex;

    flex-direction:
      column;

    justify-content:
      center;

    align-items:
      stretch;

    gap:
      34px;

    padding:
      38px 0 36px;
  }


  .npb__question-copy {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;
  }


  .npb__question-number {
    margin-bottom:
      18px;

    font-size:
      11.5px;
  }


  .npb__adaptive-label {
    margin-bottom:
      18px;

    font-size:
      9.5px;
  }


  .npb__question-title {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    font-size:
      clamp(29px,8.6vw,39px);

    line-height:
      1.04;

    letter-spacing:
      -0.038em;

    white-space:
      normal;

    overflow-wrap:
      break-word;

    word-break:
      normal;
  }


  .npb__question-note {
    width:
      100%;

    max-width:
      100%;

    margin-top:
      23px;

    font-size:
      13px;

    line-height:
      1.65;

    white-space:
      normal;

    overflow-wrap:
      break-word;
  }


  .npb__answers {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    gap:
      8px;
  }


  .npb__answer {
    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    min-height:
      70px;

    height:
      auto;

    padding:
      15px 14px;

    grid-template-columns:
      30px
      minmax(0,1fr);

    align-items:
      start;

    gap:
      12px;

    overflow:
      hidden !important;

    white-space:
      normal !important;
  }


  .npb__answer-marker {
    width:
      30px;

    height:
      30px;

    margin-top:
      1px;

    flex:
      0 0 30px;

    font-size:
      9.5px;
  }


  .npb__answer-text {
    display:
      block !important;

    width:
      100% !important;

    max-width:
      100% !important;

    min-width:
      0 !important;

    margin:
      0 !important;

    padding:
      0 !important;

    font-size:
      13.5px;

    line-height:
      1.5;

    white-space:
      normal !important;

    overflow:
      visible !important;

    text-overflow:
      clip !important;

    overflow-wrap:
      break-word !important;

    word-wrap:
      break-word !important;

    word-break:
      normal !important;
  }


  .npb__navigation {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding-top:
      17px;

    gap:
      16px;
  }


  .npb__back {
    flex:
      0 0 auto;

    min-width:
      70px;

    font-size:
      9.5px;
  }


  .npb__continue {
    flex:
      0 1 170px;

    min-width:
      0;

    max-width:
      170px;

    min-height:
      50px;

    padding:
      0 16px;

    gap:
      20px;

    font-size:
      10.5px;
  }


  /* =======================================================
     PERCEPTION / ANALYZE BASELINE CTA
     Wider only on the final question so the arrow remains
     fully inside the button on mobile.
  ======================================================== */

  #npb-prototype[data-npb-question-kind="perception"]
  .npb__continue {
    flex:
      0 1 210px;

    max-width:
      210px;

    padding:
      0 14px;

    gap:
      12px;
  }


  #npb-prototype[data-npb-question-kind="perception"]
  .npb__continue > span:first-child {
    min-width:
      0;

    white-space:
      nowrap;
  }


  #npb-prototype[data-npb-question-kind="perception"]
  .npb__continue .npb__arrow {
    flex:
      0 0 18px;

    margin-left:
      auto;
  }


  .npb__progress {
    width:
      100%;

    max-width:
      100%;

    padding-top:
      16px;
  }


  .npb__progress-meta {
    font-size:
      9px;
  }



  /* =======================================================
     ANALYSIS
  ======================================================== */

  .npb__analysis {
    width:
      calc(100% - 40px);

    max-width:
      calc(100% - 40px);

    padding:
      100px 0 70px;
  }


  .npb__analysis-title {
    width:
      100%;

    max-width:
      100%;

    font-size:
      clamp(48px,14vw,70px);

    line-height:
      0.87;
  }


  .npb__analysis-copy {
    margin-top:
      32px;

    font-size:
      13.5px;
  }


  .npb__analysis-status {
    font-size:
      9.5px;
  }



  /* =======================================================
     RESULT
  ======================================================== */

  .npb__result {
    width:
      calc(100% - 40px);

    max-width:
      calc(100% - 40px);

    min-width:
      0;

    padding:
      110px 0 80px;
  }


  .npb__result-hero {
    padding-bottom:
      65px;
  }


  .npb__result-title {
    width:
      100%;

    max-width:
      100%;

    margin-top:
      24px;

    font-size:
      clamp(44px,12.5vw,64px);

    line-height:
      0.88;

    overflow-wrap:
      break-word;
  }


  .npb__result-lead {
    margin-top:
      34px;

    font-size:
      15px;

    line-height:
      1.65;
  }


  .npb__result-summary {
    grid-template-columns:
      1fr;

    margin-top:
      42px;
  }


  .npb__result-summary > div {
    min-height:
      0;

    min-width:
      0;
  }


  .npb__result-summary > div > span {
    font-size:
      9.5px;
  }


  .npb__result-section {
    grid-template-columns:
      1fr;

    min-width:
      0;

    gap:
      14px;

    padding:
      45px 0;
  }


  .npb__result-index {
    font-size:
      11.5px;
  }


  .npb__result-section-heading {
    width:
      100%;

    min-width:
      0;
  }


  .npb__result-section-heading > span {
    margin-bottom:
      13px;

    font-size:
      9.5px;
  }


  .npb__result-section-heading h3 {
    max-width:
      100%;

    font-size:
      30px;

    line-height:
      1.03;

    overflow-wrap:
      break-word;
  }


  .npb__result-section-copy {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin-top:
      12px;
  }


  .npb__result-section-copy p {
    font-size:
      13.5px;

    line-height:
      1.7;
  }


  .npb__result-callout {
    font-size:
      10px;
  }


  .npb__action-box {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    padding:
      22px 20px;
  }


  .npb__action-label {
    font-size:
      9.5px;
  }


  .npb__action-box strong {
    font-size:
      21px;
  }


  .npb__email-result {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin-top:
      72px;

    padding:
      30px 22px;

    gap:
      38px;
  }


  .npb__email-result-label,
  .npb__email-success-label {
    font-size:
      9.5px;
  }


  .npb__email-result h3 {
    max-width:
      100%;

    font-size:
      38px;

    overflow-wrap:
      break-word;
  }


  .npb__email-result-intro {
    font-size:
      13.5px;
  }


  #npb-prototype .npb__email-field input[type="email"] {
    min-height:
      58px;

    padding:
      0 16px;

    font-size:
      10.5px;
  }


  .npb__email-privacy {
    font-size:
      10px;
  }


  .npb__email-success h4 {
    font-size:
      34px;
  }


  .npb__next-step {
    width:
      100%;

    max-width:
      100%;

    min-width:
      0;

    margin-top:
      85px;

    padding:
      30px 22px;

    gap:
      40px;
  }


  .npb__next-step-label,
  .npb__next-step-product,
  .npb__next-step-meta {
    font-size:
      9.5px;
  }


  .npb__next-step h3 {
    max-width:
      100%;

    font-size:
      38px;

    overflow-wrap:
      break-word;
  }


  .npb__secondary-button {
    max-width:
      none;

    min-width:
      0;

    min-height:
      56px;

    font-size:
      10.5px;
  }


  .npb__demo-reset button {
    font-size:
      9px;
  }

}



/* =========================================================
   SMALL MOBILE
========================================================= */

@media
  (max-width:420px) {

  .npb__hero-title {
    font-size:
      50px;
  }


  #npb-prototype
  .npb__primary-button--baseline {
    font-size:
      10px !important;
  }


  #npb-prototype
  .npb__primary-button--baseline
  .npb__baseline-button-text {
    font-size:
      10px !important;
  }


  .npb__question-title {
    font-size:
      clamp(29px,8.2vw,34px);
  }


  .npb__question-note {
    font-size:
      13px;
  }


  .npb__answer {
    grid-template-columns:
      29px
      minmax(0,1fr);

    padding:
      14px 13px;

    gap:
      11px;
  }


  .npb__answer-marker {
    width:
      29px;

    height:
      29px;

    flex-basis:
      29px;

    font-size:
      9.5px;
  }


  .npb__answer-text {
    font-size:
      13.5px;

    line-height:
      1.5;
  }


  .npb__result-title {
    font-size:
      44px;
  }


  .npb__analysis-title {
    font-size:
      48px;
  }


  .npb__next-step h3 {
    font-size:
      35px;
  }


  .npb__continue,
  .npb__secondary-button {
    font-size:
      10px;
  }


  #npb-prototype[data-npb-question-kind="perception"]
  .npb__continue {
    flex-basis:
      205px;

    max-width:
      205px;

    padding:
      0 12px;

    gap:
      10px;
  }

}





/* =========================================================
   PRODUCTION V1.0 / FROZEN V3.6 ALIGNMENT
========================================================= */

/* Hidden UI states must always win over component display rules. */
#npb-prototype [hidden] {
  display:
    none !important;
}


/* Result CTA is an anchor in production, not a demo button. */
#npb-prototype a.npb__secondary-button {
  text-decoration:
    none !important;
}


/* Final V3.6 ampersand treatment.
   JS may wrap visible ampersands with .npb__amp where required. */
#npb-prototype .npb__amp {
  font-family:
    "Inter",
    sans-serif;

  font-weight:
    inherit;

  letter-spacing:
    -0.02em;
}


/* Final two-line Next Step headline. */
#npb-prototype .npb__next-step h3 span {
  display:
    block;
}


/* Dynamic result body inserted by production JS. */
#npb-prototype .npb__result-copy-body {
  min-width:
    0;
}


#npb-prototype .npb__result-copy-body:empty {
  display:
    none;
}


/* Keep enabled Continue unmistakably cobalt. */
#npb-prototype .npb__continue:not(:disabled) {
  border-color:
    var(--npb-blue) !important;

  background:
    var(--npb-blue) !important;

  color:
    #FFFFFF !important;
}


#npb-prototype .npb__continue:not(:disabled) .npb__arrow {
  color:
    #FFFFFF;
}


/* Accessible keyboard focus without changing the frozen mouse/touch design. */
#npb-prototype button:focus-visible,
#npb-prototype a:focus-visible {
  outline:
    1px solid rgba(65,105,255,0.82);

  outline-offset:
    4px;
}


/* Link / button typography stays in the brand system. */
#npb-prototype .npb__primary-button,
#npb-prototype .npb__secondary-button,
#npb-prototype .npb__continue {
  font-size:
    11px;

  font-weight:
    600;

  letter-spacing:
    0.12em;
}


@media
  (max-width:767px) {

  #npb-prototype .npb__primary-button,
  #npb-prototype .npb__secondary-button,
  #npb-prototype .npb__continue {
    font-size:
      10.5px;
  }

}


@media
  (max-width:420px) {

  #npb-prototype .npb__primary-button,
  #npb-prototype .npb__secondary-button,
  #npb-prototype .npb__continue {
    font-size:
      10px;
  }

}


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

@media
  (prefers-reduced-motion:reduce) {

  .npb__answer,
  .npb__primary-button,
  .npb__secondary-button,
  .npb__continue {
    transition:
      none;
  }

}