/* =====================================================================
   TRY A PIT STOP · the live-site simulator (waypointdrive.app #demo),
   ported into v8. Tokens are scoped here so the rest of v8 is untouched.
   ===================================================================== */
.v8-pit {
  --wp-teal: #157A6B; --wp-teal-deep: #0F5A4E; --wp-coral: #FF6B5C; --wp-coral-deep: #E2503F;
  --wp-green: #2FA876; --wp-green-deep: #1E8A5E; --wp-sun: #FFC44D; --wp-sun-deep: #E0A02A;
  --wp-ink: #1C2A28; --wp-muted: #5C6A66; --wp-card-alt: #FBFAF5;
  --wp-on-dark-16: rgba(255,255,255,.16); --wp-on-dark-28: rgba(255,255,255,.28);
  --wp-r-full: 999px; --wp-r-panel: 24px; --wp-ease: cubic-bezier(.22,.61,.36,1);
}

/* --------------------------------------------------------------------------
   10a. Pit Stop simulator — walks the whole loop: locked app → shield →
        notification → three questions → unlocked. Mirrors the real flow.
   -------------------------------------------------------------------------- */
/* Roughly phone-proportioned (~1:2) — at 390x640 it read as a squat tablet. */
.wp-sim {
  position: relative;
  width: 100%;
  max-width: 328px;
  margin-inline: auto;
  background: #0B463C;
  border: 1px solid var(--wp-on-dark-28);
  border-radius: 32px;
  padding: 1.125rem;
  height: 640px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .34);
}
@media (max-width: 420px) { .wp-sim { height: 610px; border-radius: 26px; padding: 1rem; } }

/* flex-basis auto (not 0) so a tall stage grows the frame past its min-height
   instead of being clipped by overflow:hidden — the question card is taller
   than 600px on narrow screens. */
.wp-sim__stage { display: none; flex: 1 1 0; min-height: 0; flex-direction: column; }
.wp-sim__stage.is-active { display: flex; animation: wp-stage-in .34s var(--wp-ease) both; }
@keyframes wp-stage-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.wp-sim__eyebrow {
  display: block;
  text-align: center;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .58);
  margin-bottom: 1rem;
}

/* Progress dots across the three questions */
.wp-sim__dots { display: flex; gap: 6px; justify-content: center; margin-bottom: 1rem; }
.wp-sim__dots span {
  width: 26px; height: 4px;
  border-radius: 99px;
  background: var(--wp-on-dark-28);
  transition: background-color .25s var(--wp-ease);
}
.wp-sim__dots span.is-done { background: var(--wp-sun); }

/* --- Stage: home screen ------------------------------------------------- */
.wp-apps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem .5rem;
  margin: auto 0;
}
.wp-app {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;
  background: none;
  border: none;
  padding: 0;
}
.wp-app__tile {
  width: 58px; height: 58px;
  border-radius: 17px;
  overflow: hidden;
  display: grid;
  place-items: center;
  transition: transform .18s var(--wp-ease), box-shadow .18s var(--wp-ease);
}
.wp-app__tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Apps Waypoint isn't guarding in the demo stay real but visually "off" -
   grayscale rather than a generic placeholder, so the six icons still read
   as the real apps at a glance. */
.wp-app:not(.wp-app--target) .wp-app__tile img { filter: grayscale(1); opacity: .55; }
.wp-app span { font-size: .6875rem; font-weight: 600; color: rgba(255, 255, 255, .62); }

button.wp-app { cursor: pointer; }
button.wp-app:hover .wp-app__tile { transform: scale(1.06); }
.wp-app--target .wp-app__tile {
  animation: wp-app-pulse 2.2s ease-out infinite;
}
.wp-app--target span { color: #fff; font-weight: 800; }
@keyframes wp-app-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(255, 107, 92, .55); }
  70%  { box-shadow: 0 0 0 16px rgba(255, 107, 92, 0); }
  100% { box-shadow: 0 0 0 0 rgba(255, 107, 92, 0); }
}
@media (prefers-reduced-motion: reduce) { .wp-app--target .wp-app__tile { animation: none; } }

.wp-sim__foot {
  text-align: center;
  font-size: .8125rem;
  font-weight: 600;
  color: rgba(255, 255, 255, .62);
  margin-top: 1.25rem;
}

/* --- Stage: shield + notification --------------------------------------- */
.wp-notif {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
  text-align: left;
  background: rgba(255, 255, 255, .96);
  color: #1C2A28;
  border-radius: 17px;
  padding: .75rem .875rem;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .32);
  cursor: pointer;
  animation: wp-notif-drop .45s var(--wp-ease) both;
}
@keyframes wp-notif-drop { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }
.wp-notif__icon {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: var(--wp-teal-deep);
  display: grid; place-items: center; flex: none;
}
.wp-notif__icon svg { width: 17px; height: 17px; }
.wp-notif strong { display: block; font-size: .8125rem; font-weight: 800; }
.wp-notif small { font-size: .75rem; color: var(--wp-muted); }
.wp-notif__now { margin-left: auto; font-size: .6875rem; color: var(--wp-muted); font-weight: 600; flex: none; }

.wp-sim__shield { margin: auto 0; text-align: center; }
.wp-sim__shield-mark {
  width: 84px; height: 84px;
  margin: 0 auto 1.5rem;
  border-radius: 26px;
  background: var(--wp-on-dark-16);
  display: grid; place-items: center;
}
.wp-sim__shield-mark svg { width: 40px; height: 40px; color: #fff; }
.wp-sim__shield h3 { font-size: 1.5rem; color: #fff; margin-bottom: .5rem; }
.wp-sim__shield p { font-size: .9375rem; color: rgba(255, 255, 255, .74); }

/* --- Stage: white cards (question + success) ---------------------------- */
.wp-sim__card {
  /* Always the light palette, like the real in-app card on teal */
  --wp-ink: #1C2A28;
  --wp-muted: #5C6A66;
  --wp-card-alt: #FBFAF5;
  background: #fff;
  color: var(--wp-ink);
  border-radius: 22px;
  padding: 1.125rem;
  margin: auto 0;
}

.wp-sim__q {
  background: var(--wp-card-alt);
  border-radius: 15px;
  padding: 1.125rem;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-align: center;
  margin-bottom: .875rem;
}
.wp-sim__meta {
  display: flex;
  justify-content: space-between;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp-muted);
  margin-bottom: .75rem;
}
.wp-sim__meta .tag { color: var(--wp-coral-deep); }

/* --- Stage: success ------------------------------------------------------ */
.wp-sim__win { text-align: center; }
.wp-sim__tick {
  width: 76px; height: 76px;
  margin: 0 auto 1.25rem;
  border-radius: 50%;
  background: var(--wp-green);
  display: grid; place-items: center;
  box-shadow: 0 0 0 10px rgba(47, 168, 118, .16);
  animation: wp-tick-in .45s var(--wp-ease) both;
}
@keyframes wp-tick-in { from { opacity: 0; transform: scale(.7); } to { opacity: 1; transform: none; } }
.wp-sim__tick svg { width: 36px; height: 36px; color: #fff; }
.wp-sim__win .label {
  font-size: .6875rem; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--wp-green-deep);
}
.wp-sim__win h3 { font-size: 1.875rem; margin: .375rem 0 .5rem; }
.wp-sim__win .sub { font-size: .9375rem; color: var(--wp-muted); }
.wp-sim__tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: 1.25rem;
}
.wp-sim__tiles div {
  background: var(--wp-card-alt);
  border-radius: 14px;
  padding: .75rem .375rem;
}
.wp-sim__tiles b { display: block; font-size: 1.0625rem; font-weight: 800; }
.wp-sim__tiles small { font-size: .625rem; font-weight: 600; color: var(--wp-muted); line-height: 1.3; display: block; margin-top: 2px; }
.wp-sim__win .note {
  margin-top: 1.125rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(20, 40, 36, .1);
  font-size: .8125rem;
  color: var(--wp-muted);
  line-height: 1.5;
}

.wp-sim__restart {
  display: block;
  margin: 1rem auto 0;
  font-size: .8125rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .7);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.wp-sim__restart:hover { color: #fff; }

/* --------------------------------------------------------------------------
   10b. Shared answer-option styling (used by the simulator)
   -------------------------------------------------------------------------- */
.wp-demo {
  max-width: 34rem;
  margin-inline: auto;
}
.wp-demo__frame {
  /* The in-app Pit Stop card is always a white card on deep teal, in both
     appearances. Re-declaring the surface tokens locally keeps every child
     on the light palette even when the site is in dark mode. */
  --wp-ink: #1C2A28;
  --wp-muted: #5C6A66;
  --wp-card-alt: #FBFAF5;
  --wp-line: rgba(20, 40, 36, .10);
  --wp-faint: rgba(20, 40, 36, .05);

  background: #fff;
  border-radius: var(--wp-r-panel);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
  color: var(--wp-ink);
}
.wp-demo__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.25rem;
}
.wp-demo__shield {
  width: 38px; height: 38px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--wp-sun) 22%, transparent);
  color: var(--wp-sun-deep);
  display: grid; place-items: center; flex: none;
}
.wp-demo__shield svg { width: 19px; height: 19px; }
.wp-demo__bar strong { font-size: .9375rem; font-weight: 800; display: block; }
.wp-demo__bar span { font-size: .75rem; color: var(--wp-muted); font-weight: 600; }

.wp-demo__q {
  background: var(--wp-card-alt);
  border-radius: 16px;
  padding: 1.25rem;
  font-size: 1.0625rem;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: -.01em;
  text-align: center;
  margin-bottom: 1rem;
}
.wp-demo__id {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wp-muted);
  margin-bottom: .75rem;
}
.wp-demo__id .tag { color: var(--wp-coral); }

.wp-demo__opts { display: grid; gap: .5rem; }
.wp-opt {
  display: flex;
  align-items: flex-start;
  gap: .75rem;
  width: 100%;
  text-align: left;
  padding: .875rem 1rem;
  border-radius: 14px;
  background: var(--wp-card-alt);
  border: 1.5px solid transparent;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.45;
  transition: background-color .15s var(--wp-ease), border-color .15s var(--wp-ease);
}
.wp-opt:hover:not(:disabled) { background: color-mix(in srgb, var(--wp-teal) 6%, var(--wp-card-alt)); }
.wp-opt__letter {
  width: 24px; height: 24px;
  border-radius: var(--wp-r-full);
  background: rgba(20, 40, 36, .07);
  display: grid; place-items: center;
  font-size: .75rem;
  font-weight: 800;
  flex: none;
}
.wp-opt[aria-pressed='true'] {
  border-color: var(--wp-teal);
  background: color-mix(in srgb, var(--wp-teal) 8%, var(--wp-card-alt));
}
.wp-opt[aria-pressed='true'] .wp-opt__letter { background: var(--wp-teal); color: #fff; }
.wp-opt.is-correct {
  border-color: var(--wp-green);
  background: color-mix(in srgb, var(--wp-green) 12%, #fff);
}
.wp-opt.is-correct .wp-opt__letter { background: var(--wp-green); color: #fff; }
.wp-opt.is-wrong {
  border-color: var(--wp-coral);
  background: color-mix(in srgb, var(--wp-coral) 10%, #fff);
}
.wp-opt.is-wrong .wp-opt__letter { background: var(--wp-coral); color: #fff; }
.wp-opt:disabled { cursor: default; }

/* ---- Demo: the Pit Stop screens, drawn like the app --------------------- */
/* Format switch, above the phone */
.wp-simformat {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .25rem;
  width: 100%;
  max-width: 240px;
  margin: 0 auto 1rem;
  padding: .25rem;
  border-radius: var(--wp-r-full);
  background: rgba(255, 255, 255, .12);
}
.wp-simformat button {
  padding: .45rem .75rem;
  border-radius: var(--wp-r-full);
  font-size: .8125rem;
  font-weight: 800;
  color: rgba(255, 255, 255, .78);
  transition: background-color .15s var(--wp-ease), color .15s var(--wp-ease);
}
.wp-simformat button[aria-pressed='true'] { background: #fff; color: #0F5A4E; }

/* A stage that is a full app screen: it covers the frame's padding. */
.wp-sim__stage--screen { margin: -1.125rem; position: relative; }
@media (max-width: 420px) { .wp-sim__stage--screen { margin: -1rem; } }
.wp-qs[hidden], .wp-ss[hidden] { display: none; }

/* Question format (the app's cream practice screen) */
.wp-qs {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem .875rem .875rem;
  background: #F4F1EA;
  color: #1C2A28;
}
.wp-qs__head { display: flex; align-items: center; gap: .625rem; }
.wp-qs__back {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: #fff;
  display: grid; place-items: center;
  box-shadow: 0 1px 3px rgba(20, 40, 36, .08);
  flex: none;
}
.wp-qs__title { flex: 1; min-width: 0; line-height: 1.2; }
.wp-qs__title b { display: block; font-size: .9375rem; font-weight: 800; }
.wp-qs__title small { font-size: .75rem; font-weight: 600; color: #5C6A66; }
.wp-qs__count { font-size: .8125rem; font-weight: 800; color: #5C6A66; }
.wp-qs__bar { height: 4px; border-radius: 99px; background: rgba(20, 40, 36, .08); margin-top: .625rem; }
.wp-qs__bar span { display: block; width: 100%; height: 100%; border-radius: 99px; background: #5CB8E4; }
.wp-qs__topic {
  display: flex; align-items: center; gap: .4rem;
  margin: .625rem 0 .5rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #3E97C4;
}
.wp-qs__card {
  flex: 1 1 0;
  min-height: 96px;
  display: grid;
  place-items: center;
  padding: .875rem 1rem;
  border-radius: 20px;
  background: #FBFAF5;
  text-align: center;
}
.wp-qs__card p { margin: 0; font-size: 1.125rem; font-weight: 800; line-height: 1.3; }

/* The answers area has a fixed height. After an answer the two options that no longer matter fold
   away and the explanation takes their room, so the screen keeps its size. */
.wp-qs__answers {
  flex: none;
  height: 262px;
  margin-top: .625rem;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.wp-qs__opt {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  gap: .625rem;
  width: 100%;
  padding: 0 .75rem;
  border-radius: 15px;
  background: #FBFAF5;
  border: 1.5px solid rgba(20, 40, 36, .10);
  text-align: left;
  font-size: .875rem;
  font-weight: 600;
  line-height: 1.3;
  color: #1C2A28;
  overflow: hidden;
  transition: flex-grow .34s var(--wp-ease), opacity .22s var(--wp-ease), border-color .2s var(--wp-ease),
              background-color .2s var(--wp-ease), margin .34s var(--wp-ease);
}
.wp-qs__opt:hover:not(:disabled) { border-color: rgba(21, 122, 107, .45); }
.wp-qs__opt:disabled { cursor: default; }
.wp-qs__letter {
  width: 24px; height: 24px;
  border-radius: 99px;
  background: rgba(20, 40, 36, .07);
  display: grid; place-items: center;
  font-size: .75rem;
  font-weight: 800;
  color: #5C6A66;
  flex: none;
}
.wp-qs__text { flex: 1; }
.wp-qs__mark { width: 16px; flex: none; font-weight: 800; text-align: center; }
.wp-qs__opt.is-correct { border-color: #2FA876; background: #E4EFE7; }
.wp-qs__opt.is-correct .wp-qs__letter { background: #2FA876; color: #fff; }
.wp-qs__opt.is-correct .wp-qs__mark::before { content: '✓'; color: #1E8A5E; }
.wp-qs__opt.is-wrong { border-color: #FF6B5C; background: #F7E7E2; }
.wp-qs__opt.is-wrong .wp-qs__letter { background: #FF6B5C; color: #fff; }
.wp-qs__opt.is-wrong .wp-qs__mark::before { content: '✕'; color: #E2503F; }
.wp-qs__opt.is-folded { flex-grow: 0; opacity: 0; border-width: 0; margin-bottom: -6px; }
.wp-qs__answers.is-answered .wp-qs__opt:not(.is-folded) { flex: 0 0 52px; }
.wp-qs__why {
  flex: 0 0 0;
  min-height: 0;
  overflow: hidden;
  opacity: 0;
  border-radius: 15px;
  padding: 0 .875rem;
  font-size: .8125rem;
  line-height: 1.45;
  color: #1C2A28;
  transition: flex-grow .34s var(--wp-ease), opacity .3s var(--wp-ease) .12s;
}
.wp-qs__answers:not(.is-answered) .wp-qs__why { margin-top: -6px; }
.wp-qs__answers.is-answered .wp-qs__why {
  flex: 1 1 0;
  opacity: 1;
  padding: .7rem .875rem;
}
.wp-qs__why strong { display: block; font-weight: 800; margin-bottom: .15rem; }
.wp-qs__why.is-correct { background: #E4EFE7; }
.wp-qs__why.is-correct strong { color: #1E8A5E; }
.wp-qs__why.is-wrong { background: #F7E7E2; }
.wp-qs__why.is-wrong strong { color: #E2503F; }
.wp-qs__cta {
  flex: none;
  margin-top: .625rem;
  height: 50px;
  border-radius: 16px;
  background: #157A6B;
  color: #fff;
  font-size: .9375rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
  transition: opacity .2s var(--wp-ease);
}
.wp-qs__cta:disabled { opacity: .3; cursor: not-allowed; }

/* Swipe format (the app's green swipe screen) */
.wp-ss {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
  padding: 1rem .875rem .875rem;
  background: linear-gradient(180deg, #1A5F55 0%, #0F4A40 100%);
  color: #fff;
  position: relative;
  overflow: hidden;
}
.wp-ss__head { display: flex; align-items: center; gap: .625rem; }
.wp-ss__icon {
  width: 34px; height: 34px;
  border-radius: 11px;
  background: rgba(255, 255, 255, .14);
  color: #FFC44D;
  display: grid; place-items: center;
  flex: none;
}
.wp-ss__title { flex: 1; min-width: 0; line-height: 1.2; }
.wp-ss__title b { display: block; font-size: .9375rem; font-weight: 800; }
.wp-ss__title small { font-size: .75rem; font-weight: 600; color: rgba(255, 255, 255, .7); }
.wp-ss__close {
  width: 30px; height: 30px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .16);
  display: grid; place-items: center;
  flex: none;
}
.wp-ss__progress { display: flex; align-items: center; gap: .5rem; margin-top: .625rem; }
.wp-ss__progress b { font-size: .75rem; font-weight: 800; white-space: nowrap; }
.wp-ss__progress span { flex: 1; height: 4px; border-radius: 99px; background: #FFC44D; }
.wp-ss__topic {
  display: flex; align-items: center; gap: .4rem;
  margin: .625rem 0 .5rem;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .88);
}
.wp-ss__card {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 1.125rem 1rem;
  border-radius: 24px;
  background: #fff;
  color: #1C2A28;
  touch-action: pan-y;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
  transition: transform .24s var(--wp-ease);
}
.wp-ss__card.is-dragging { transition: none; cursor: grabbing; }
.wp-ss__label {
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #6E7A76;
  margin-bottom: .5rem;
}
.wp-ss__q { margin: 0 0 .75rem; font-size: 1.1875rem; font-weight: 800; line-height: 1.25; }
.wp-ss__answer {
  display: flex;
  align-items: center;
  gap: .625rem;
  padding: .75rem .75rem;
  border-radius: 15px;
  background: #FBFAF5;
  border: 1.5px solid rgba(20, 40, 36, .10);
  font-size: .9375rem;
  font-weight: 600;
  line-height: 1.3;
}
.wp-ss__quote {
  width: 26px; height: 26px;
  border-radius: 99px;
  background: #FBE3DE;
  color: #E2503F;
  display: grid; place-items: center;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  padding-top: .35rem;
  flex: none;
}
.wp-ss__stamp {
  position: absolute;
  top: .875rem;
  padding: .15rem .5rem;
  border-radius: 8px;
  border: 2px solid currentColor;
  font-size: .6875rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity .12s var(--wp-ease);
}
.wp-ss__stamp--no { left: .875rem; color: #E2503F; transform: rotate(-8deg); }
.wp-ss__stamp--yes { right: .875rem; color: #1E8A5E; transform: rotate(8deg); }
.wp-ss__card.is-no .wp-ss__stamp--no,
.wp-ss__card.is-yes .wp-ss__stamp--yes { opacity: 1; }
.wp-ss__actions { flex: none; display: flex; justify-content: center; gap: 2.25rem; margin-top: .75rem; }
.wp-ss__btn {
  width: 58px; height: 58px;
  border-radius: 99px;
  background: #fff;
  display: grid; place-items: center;
  border: 2px solid transparent;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
  transition: transform .15s var(--wp-ease);
}
.wp-ss__btn--no { color: #FF6B5C; border-color: rgba(255, 107, 92, .5); }
.wp-ss__btn--yes { color: #2FA876; border-color: rgba(47, 168, 118, .5); }
.wp-ss__btn:hover:not(:disabled) { transform: scale(1.06); }
.wp-ss__btn:disabled { cursor: default; }
.wp-ss__dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .5); animation: wp-ss-fade .25s var(--wp-ease) both; }
.wp-ss__dim[hidden], .wp-ss__sheet[hidden] { display: none; }
.wp-ss__sheet {
  position: absolute;
  left: .875rem; right: .875rem; bottom: .875rem;
  padding: 1rem;
  border-radius: 22px;
  background: #fff;
  color: #1C2A28;
  animation: wp-ss-up .32s var(--wp-ease) both;
}
.wp-ss__sheet strong { display: block; font-size: .9375rem; font-weight: 800; margin-bottom: .4rem; }
.wp-ss__sheet.is-correct strong { color: #1E8A5E; }
.wp-ss__sheet.is-wrong strong { color: #E2503F; }
.wp-ss__sheet b { display: block; font-size: .9375rem; font-weight: 700; line-height: 1.3; margin-bottom: .4rem; }
.wp-ss__sheet p { margin: 0 0 .75rem; font-size: .8125rem; line-height: 1.45; color: #5C6A66; }
.wp-ss__continue {
  width: 100%;
  height: 48px;
  border-radius: 15px;
  background: #FFC44D;
  color: #3A2A00;
  font-size: .9375rem;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center; gap: .4rem;
}
@keyframes wp-ss-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes wp-ss-up { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .wp-qs__opt, .wp-qs__why, .wp-ss__card { transition: none; }
  .wp-ss__dim, .wp-ss__sheet { animation: none; }
}

.wp-demo__cta { margin-top: 1rem; }
.wp-demo__cta:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

.wp-demo__result {
  margin-top: 1rem;
  padding: 1rem 1.125rem;
  border-radius: 16px;
  background: var(--wp-card-alt);
  font-size: .9375rem;
  line-height: 1.55;
}
.wp-demo__result[hidden] { display: none; }
.wp-demo__result strong { display: block; font-weight: 800; margin-bottom: .25rem; }
.wp-demo__result.is-correct { background: color-mix(in srgb, var(--wp-green) 12%, #fff); }
.wp-demo__result.is-correct strong { color: var(--wp-green-deep); }
.wp-demo__result.is-wrong { background: color-mix(in srgb, var(--wp-coral) 10%, #fff); }
.wp-demo__result.is-wrong strong { color: var(--wp-coral-deep); }

.wp-demo__foot {
  text-align: center;
  margin-top: 1.25rem;
  color: rgba(255, 255, 255, .78);
  font-size: .875rem;
  font-weight: 600;
}

/* --------------------------------------------------------------------------

/* v8: the live site had a global button reset; scope one here at zero
   specificity so every .wp-* rule above still wins. */
:where(.v8-pit) :where(button) { appearance: none; -webkit-appearance: none; font: inherit; border: 0; background: none; color: inherit; cursor: pointer; }
:where(.v8-pit) :where(button:disabled) { cursor: default; }