/* ==========================================================================
   ABOUT · 01 OUR PHILOSOPHY — "The Scoreboard" in motion (assets/s7-score.js).
   Desktop: the short copy and the four part bullets on the left, one square
   on the right that carries the rest — vanity metrics struck out, the only
   scoreboard we play for, built right and used day one, and the partners we
   say yes to. The bullet for the part on screen lights up and fills as it
   plays; click one to jump there. Phones and tablets: copy, the square, then
   the bullets (chapters under the picture).
   Without the script the square shows a plain violet card.
   ========================================================================== */
.svc-section.s7score-section {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  grid-template-rows: 1fr auto auto 1fr;                 /* copy + bullets sit centred against the square */
  grid-template-areas:
    ".     box"
    "head  box"
    "parts box"
    ".     box";
  column-gap: 70px;
  row-gap: 0;
}
/* desktop: the homepage's split-section gutters (.audit-pitch-wrap, 105px) so the square can grow */
@media (min-width: 1001px) {
  .svc-section.s7score-section { max-width: none; padding: 100px 105px; }
}
.s7score-section > .svc-section-head { grid-area: head; margin: 0; }
.s7score-section > .s7score-parts { grid-area: parts; }
.s7score-section > .s7score-box { grid-area: box; align-self: center; }

.s7score-box {
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 1 / 1;
  margin: 0 0 0 auto;
  border-radius: 26px;
  overflow: hidden;
  background: #7c5cf0;
  box-shadow: 0 40px 90px rgba(46, 22, 128, 0.22), 0 12px 30px rgba(46, 22, 128, 0.1);
}
.s7score {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(135deg, #4f2bd8 0%, #7c5cf0 55%, #c4b5fd 100%);
}
.s7score-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.s7score:not(.is-live) .s7score-svg { visibility: hidden; }

/* ---- the four part bullets ---------------------------------------------- */
.s7score-parts {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.s7score-part {
  -webkit-appearance: none;
  appearance: none;
  border: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  position: relative;
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr);
  column-gap: 16px;
  align-items: start;
  width: 100%;
  padding: 14px 20px 17px 14px;
  border-radius: 18px;
  background: transparent;
  -webkit-tap-highlight-color: transparent;
  transition: background-color .4s ease, box-shadow .4s ease;
}
.s7score-part:hover { background: #faf8ff; }
.s7score-part:focus { outline: none; }
.s7score-part:focus-visible { outline: 2px solid #6d3ef0; outline-offset: 2px; }
.s7score-part-num {
  grid-row: 1 / span 2;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  font-weight: 500;
  color: #8f8aa8;
  background: #ffffff;
  box-shadow: inset 0 0 0 1.5px #e4def5;
  transition: background-color .4s ease, color .4s ease, box-shadow .4s ease;
}
.s7score-part-title {
  margin-top: 4px;
  font-family: 'Geist', sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.012em;
  color: rgba(12, 13, 18, 0.58);
  transition: color .4s ease;
}
.s7score-part-desc {
  margin-top: 3px;
  font-family: 'Geist', sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(74, 74, 85, 0.7);
  transition: color .4s ease;
}
/* how far through its part the graphic is (--p, set by the script) */
.s7score-part-bar {
  position: absolute;
  left: 62px;
  right: 20px;
  bottom: 8px;
  height: 2px;
  border-radius: 2px;
  background: rgba(109, 62, 240, 0.14);
  overflow: hidden;
  opacity: 0;
  transition: opacity .3s ease;
}
.s7score-part-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: #6d3ef0;
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}
.s7score-part.is-on { background: #f5f1ff; }
.s7score-part.is-on .s7score-part-num { background: #6d3ef0; color: #ffffff; box-shadow: 0 0 0 5px rgba(109, 62, 240, 0.14); }
.s7score-part.is-on .s7score-part-title { color: #0c0d12; }
.s7score-part.is-on .s7score-part-desc { color: #4a4a55; }
.s7score-part.is-on .s7score-part-bar { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .s7score-part-bar { display: none; }
}

/* ---- tablets + phones: copy, the square, then the bullets ---------------- */
@media (max-width: 1000px) {
  .svc-section.s7score-section {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
    grid-template-areas: "head" "box" "parts";
    row-gap: 32px;
  }
  .s7score-box { margin: 0 auto; }
  .s7score-section > .s7score-parts { margin: 0 auto; width: 100%; max-width: 760px; }
}
@media (max-width: 620px) {
  .s7score-box { border-radius: 20px; }
  .s7score-section > .s7score-parts { margin-top: -6px; }
  .s7score-part { padding: 12px 14px 15px 10px; column-gap: 13px; border-radius: 16px; }
  .s7score-part-title { font-size: 16px; }
  .s7score-part-desc { font-size: 14.5px; }
  .s7score-part-bar { left: 55px; right: 14px; bottom: 7px; }
}