/* nps-score — externalised head <style> (§9.3) */
/* ===================== NPS SCORE — page-scoped styles ===================== */
    /* "Our score" — three gradient rating cards (NPS / CSAT / CES). */
    .score-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 1.75rem); }
    .score-card {
      border-radius: var(--radius); padding: clamp(1.75rem, 3vw, 2.5rem);
      position: relative; overflow: hidden; isolation: isolate;
    }
    .score-card--nps  { background: linear-gradient(135deg, #eaf3e6 0%, #f3f8ef 60%, #fff 100%); }
    .score-card--csat { background: linear-gradient(135deg, #fdfbe9 0%, #fffdf5 60%, #fff 100%); }
    .score-card--ces  { background: linear-gradient(135deg, #e6eef8 0%, #eef4fb 55%, #fbe9e2 100%); }
    .score-stars { display: flex; gap: .3rem; color: var(--orange); margin-bottom: 1.4rem; }
    .score-stars svg { width: 22px; height: 22px; fill: currentColor; }
    .score-card .label { display: block; font-weight: 700; margin-bottom: .3rem; }
    .score-card strong { display: block; font-weight: 900; color: var(--ink); line-height: 1; margin-bottom: .3rem; }
    .score-card span.caption { display: block; font-weight: 700; color: var(--ink); }
    @media (max-width: 900px) { .score-grid { grid-template-columns: 1fr 1fr; } }
    @media (max-width: 560px) { .score-grid { grid-template-columns: 1fr; } }

    /* "What this means" gradient banner. */
    .meaning-banner {
      background: url("../img/nps-score/beige-pink-grads-landscape-01.jpg") center / cover no-repeat;
      border-radius: var(--radius); padding: clamp(2rem, 4.5vw, 3.5rem);
      display: grid; grid-template-columns: 1fr 2px 1fr; gap: clamp(1.75rem, 4vw, 3rem); align-items: center;
    }
    .meaning-banner .eyebrow { margin-bottom: 1.4rem; color: var(--ink); letter-spacing: normal; text-transform: none; font-size: 1rem; }
    .meaning-banner .statement { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--ink); line-height: 1.25; }
    .meaning-banner .statement .accent { color: var(--orange); }
    .meaning-banner .divider { width: 2px; height: 100%; background: #000; justify-self: center; }
    .meaning-banner .aside p { color: var(--ink); margin-bottom: 1.6rem; }
    .meaning-banner .aside .arrow-circle:not(:hover) { border-color: #000; color: #000; }
    @media (max-width: 820px) {
      .meaning-banner { grid-template-columns: 1fr; }
      .meaning-banner .divider { display: none; }
    }

    #measure-what-matters { margin-top: 50px; }
    /* Enlarge the dashboard image so its left edge closes the grid gap and latches the copy column. */
    @media (min-width: 861px) {
      #measure-what-matters .split .media { margin-left: calc(-1 * clamp(2rem, 5vw, 4.5rem)); }
    }
    #stay-excellent { padding-top: calc(var(--section-y) / 2 - 50px); }
    #stay-excellent .feature-col h4 { font-size: 22px; }
    #stay-excellent .feature-col + .feature-col { border-left: 2px solid #000; }
    #our-score .faq-divider { margin-top: calc(clamp(2.5rem, 5vw, 4rem) - 110px); }
    #our-score .score-card strong { font-size: 150px; }
    /* Zero out — the gap to "What this means" below is set entirely by that
       section's own top padding instead, so it can match the score-grid gutter. */
    #our-score { padding-bottom: 0; }
    #project-cta-nps { margin-top: clamp(2rem, 6vw, 4.5rem); }
    /* Pull the "Book a call" row 30px closer to the 3 cards above it. */
    #quality-support-feedback .webshop-quote { margin-top: calc(clamp(2.5rem, 5vw, 4rem) - 30px); }
    /* Match the gap above "What this means" to the gutter between the 3 score
       cards directly above it (.score-grid's gap), instead of the section's
       much larger default top padding. */
    #what-this-means { padding-top: clamp(1.25rem, 3vw, 1.75rem); }
    @media (max-width: 820px) {
      /* Feature row wraps to 2 columns here — "We deliver consistently" starts a new row,
         so its left divider (inherited from the 4-across desktop layout) is stray. */
      #stay-excellent .feature-col:nth-child(3) { border-left: 0; }
    }
    @media (max-width: 600px) {
      /* Stack the 3 "why it matters" cards vertically instead of the forced 3-across inline style. */
      #quality-support-feedback .webshop-cards { grid-template-columns: 1fr !important; }
      /* Score numbers (73 / 93 / 97) are a fixed 150px at every width — scale down 30% on mobile. */
      #our-score .score-card strong { font-size: 105px; }
    }