.assessment-hero .hero-note { background: #e0eaf4 !important; color: #244638; }
.assessment-hero .hero-note p { color: #435f61 !important; }
.more-assessments { display: block !important; }
.more-assessments .more-heading { margin-bottom: 28px; }
.library-list { min-width: 0; }
.assessment-scroll-row {
  display: grid !important; grid-auto-flow: column;
  grid-template-columns: none !important;
  grid-auto-columns: min(360px, 85vw);
  gap: 22px !important; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x proximity; padding: 8px 2px 20px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.assessment-scroll-row::-webkit-scrollbar { display: none; }
.assessment-scroll-row > article {
  scroll-snap-align: start; min-width: 0; margin: 0; grid-column: auto !important;
}
.library-list .assessment-scroll-row > article {
  display: flex; flex-direction: column; align-items: flex-start;
  gap: 18px; padding: 26px; border: 1px solid #a7bfb5;
  border-radius: 18px; background: #e0ece5;
}
.guided-category:nth-child(2) article { background: #e8e2f2 !important; }
.guided-category:nth-child(3) article { background: #f5e6bd !important; }
.guided-category:nth-child(4) article { background: #dceaf2 !important; }
.library-list .assessment-scroll-row article > div { min-width: 0; }
.library-list .assessment-scroll-row article > button { margin-top: auto; white-space: normal; }
.guided-category { margin-top: 32px; scroll-margin-top: 110px; }
.guided-category > h3 { font: 500 27px var(--serif); margin-bottom: 12px; }
.assessment-scroll-row:focus-visible { outline: 2px solid #244638; outline-offset: 4px; }
.privacy-strip > div { padding: 24px !important; border-radius: 16px; }
.privacy-strip > div:first-child { background: #cce4db !important; border: 1px solid #8eafa1; }
.privacy-strip > div:last-child { background: #f6e5ae !important; border: 1px solid #c3ac5b; }

/* Assessment-library palette: an intentional echo of Aira's homepage. */
.assessment-hero { background: linear-gradient(118deg, #a9b6c4 0%, #d9e4dd 44%, #ece69d 100%) !important; color: #243c2c; }
.assessment-hero .eyebrow, .assessment-hero > div > p:not(.eyebrow) { color: #243c2c; }
.assessment-hero .aira-eyebrow-star { color: #59789f; }
.assessment-hero .button { background: #243c2c; color: #fff8e7; border: 1px solid #243c2c; }
.assessment-hero .hero-note { background: #fff6df !important; color: #243c2c !important; }
.assessment-hero .hero-note .eyebrow, .assessment-hero .hero-note p:last-child { color: #365052 !important; }
.assessment-library { background: linear-gradient(118deg, #b4d7ee 0%, #c8e2e8 42%, #edf0c0 72%, #fff0bd 100%) !important; }
.assessment-hero .button {
  background: #243c2c !important;
  border-color: #243c2c !important;
  color: #fff6df !important;
}
.assessment-hero .button:hover { background: #365946 !important; border-color: #365946 !important; }
.assessment-hero .hero-note {
  background: #243c2c !important;
  color: #fff6df !important;
}
.assessment-hero .hero-note :is(.eyebrow, h2, p:last-child) { color: #fff6df !important; }
.assessment-hero .hero-note > span { border-color: rgba(255,246,223,.38); }

/* One continuous page canvas keeps the hero and library visually connected. */
body.assessment-body {
  background: linear-gradient(118deg, #b4d7ee 0%, #c8e2e8 44%, #edf0c0 73%, #fff0bd 100%) fixed !important;
}
.assessment-hero,
.assessment-library { background: transparent !important; }

/* Brighter cards and an uninterrupted canvas through the privacy strip. */
#guided-personality .assessment-scroll-row > article {
  background: #d5edf7 !important;
  border-color: #8ebed1 !important;
}
.privacy-strip {
  background: transparent !important;
  border-color: transparent !important;
}
.assessment-card-featured { background: #d8d0ef !important; border-color: #9b8fc5 !important; }
.assessment-card:has([data-start="gad-7"]) { background: #dff0e9 !important; border-color: #8fc8b8 !important; }
.assessment-card-warm { background: #e9d985 !important; border-color: #c5aa4e !important; }
.privacy-strip { background: linear-gradient(110deg, #a9b6c4 0%, #dcecf1 26%, #ece69d 64%, #f4edbd 100%) !important; border-color: #7895a8 !important; }
.privacy-strip > div:first-child { background: #d8e8f0 !important; border-color: #90adbd !important; }
.privacy-strip > div:nth-child(2) { background: #d8d0ef !important; border: 1px solid #a79acb; }
.privacy-strip > div:last-child { background: #f7dce7 !important; border-color: #d7a7bb !important; }
.public-safety-card { background: #963d35 !important; border-left-color: #68241f !important; color: #fffaf7 !important; }
.public-safety-card .eyebrow, .public-safety-card p:not(.eyebrow) { color: #fff0e9 !important; }

/* Brighter category rows, aligned to the homepage palette. */
#guided-personality .assessment-scroll-row > article { background: #f7dce7 !important; border-color: #d7a7bb !important; }
#guided-personality .assessment-scroll-row > article p:not(.eyebrow) { color: #576a60; }
#wellbeing-assessments .assessment-scroll-row > article { background: #d8d0ef !important; border-color: #a89bc9 !important; }
#aira-originals .assessment-scroll-row > article { background: #e9d985 !important; border-color: #c5aa4e !important; }

/* Keep the introductory note useful without letting it dominate a phone screen. */
@media (max-width: 650px) {
  .assessment-hero {
    min-height: auto;
    grid-template-columns: 1fr;
    gap: 28px;
    padding-bottom: 48px;
  }

  .assessment-hero .hero-note {
    width: 100%;
    max-width: none;
    padding: 18px 20px;
    border-radius: 18px;
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    column-gap: 14px;
    row-gap: 3px;
    align-items: center;
    text-align: left;
    animation: none;
  }

  .assessment-hero .hero-note > span {
    grid-row: 1 / 4;
    width: 44px;
    height: 44px;
    margin: 0;
    font-size: 20px;
  }

  .assessment-hero .hero-note .eyebrow,
  .assessment-hero .hero-note h2,
  .assessment-hero .hero-note p:last-child {
    grid-column: 2;
    margin: 0;
    max-width: none;
  }

  .assessment-hero .hero-note h2 {
    font-size: 22px;
    letter-spacing: -.6px;
  }

  .assessment-hero .hero-note p:last-child {
    font-size: 13px;
    line-height: 1.48;
  }
}