/* ==========================================================================
   THE CONNECTION PROTOCOL — QUIZ STYLES
   Paste into: Quiz Maker -> Edit Quiz -> Styles tab -> "Custom CSS" box.
   (If your version has no Custom CSS box, use Appearance -> Customize ->
   Additional CSS instead — it applies site-wide but is harmless here.)

   PART A styles the result card and is self-contained — it will work.
   PART B nudges the plugin's own chrome. Those class names change between
   AYS releases, so if a rule appears to do nothing, right-click the element
   on your phone-width browser, choose Inspect, and swap in the real class.
   ========================================================================== */

/* ----------  DESIGN TOKENS  ---------- */
.cp-result,
.ays-quiz-container {
  --cp-ink:      #1a1a1a;
  --cp-ink-soft: #55565a;
  --cp-line:     #e2e2e4;
  --cp-bg:       #ffffff;
  --cp-tint:     #f7f7f8;
  --cp-accent:   #1f3a5f;   /* deep navy — calm, clinical, not shouty */
  --cp-accent-d: #16293f;
}


/* =======================================================================
   PART A — RESULTS CARD
   ======================================================================= */

.cp-result {
  max-width: 620px;
  margin: 0 auto;
  padding: 4px 0 8px;
  background: var(--cp-bg);
  color: var(--cp-ink);
  font-size: 17px;
  line-height: 1.6;
  text-align: left !important;
  -webkit-font-smoothing: antialiased;
}

/* Themes commonly centre everything inside the quiz result container.
   These override that for the reading copy while keeping the score box
   and the callout box centred, which is where centring belongs. */
.cp-result .cp-body,
.cp-result .cp-note,
.cp-result .cp-coach-wrap { text-align: left !important; }
.cp-result .cp-score,
.cp-result .cp-callout    { text-align: center !important; }

/* ---- hide Quiz Maker's own default result lines ----
   The card prints the score itself, so the plugin's "Your score is X / 40",
   "The average score is N%" and the bar underneath are duplicates.
   Turn them off in the quiz settings if you can find the toggles; these
   rules are the belt-and-braces version. Class names vary between AYS
   releases - if the lines are still visible, inspect them and send me the
   real class name. */
.ays_quiz_results .ays_score_str,
.ays-quiz-container .ays_quiz_average_score,
.ays-quiz-container .ays-average-score,
.ays-quiz-container .ays_average_score,
.ays-quiz-container .ays-quiz-score-bar,
.ays-quiz-container .ays_quiz_progress_line_result { display: none !important; }

/* ---- score block ---- */
.cp-score {
  display: block;
  padding: 22px 20px;
  margin-bottom: 22px;
  border: 1px solid var(--cp-line);
  border-radius: 10px;
  background: var(--cp-tint);
  text-align: center;
}
.cp-score-label {
  display: block;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cp-ink-soft);
  margin-bottom: 6px;
}
.cp-score-value {
  display: block;
  font-size: 42px;
  line-height: 1.1;
  font-weight: 700;
  color: var(--cp-ink);
  margin-bottom: 10px;
}
.cp-stage {
  display: block;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--cp-accent);
}
/* optional per-stage accent; delete if Michael wants all three identical */
.cp-stage-1 { color: #2f6b46; }
.cp-stage-2 { color: #8a5a12; }
.cp-stage-3 { color: #96341f; }

/* ---- body copy ---- */
.cp-body {
  margin: 0 0 22px;
  color: var(--cp-ink);
}
.cp-note {
  margin: 0 0 14px;
  font-size: 15px;
  color: var(--cp-ink-soft);
}

/* ---- AI coach button (secondary) ---- */
.cp-coach-wrap { margin: 0 0 30px; }
.cp-coach-btn,
.cp-result a.cp-coach-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 15px 20px;
  border: 1.5px solid var(--cp-accent);
  border-radius: 8px;
  background: var(--cp-bg);
  color: var(--cp-accent);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
}
.cp-coach-btn:hover,
.cp-coach-btn:focus { background: var(--cp-tint); color: var(--cp-accent-d); }

/* ---- $27 callout box ---- */
.cp-callout {
  padding: 24px 20px;
  border: 1px solid var(--cp-line);
  border-radius: 12px;
  background: var(--cp-tint);
  text-align: center;
}
.cp-callout-kicker {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cp-ink-soft);
}
.cp-callout-text {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--cp-ink);
}
.cp-cta-btn,
.cp-result a.cp-cta-btn,
.cp-result label.cp-cta-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 18px 22px;
  border: none;
  border-radius: 8px;
  background: var(--cp-accent);
  color: #fff;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.cp-cta-btn:hover,
.cp-cta-btn:focus { background: var(--cp-accent-d); color: #fff; }
.cp-callout-fine {
  margin: 12px 0 0;
  font-size: 13px;
  color: var(--cp-ink-soft);
}

/* ---- CSS-only modal (demand-gate fallback) ---- */
.cp-gate-toggle { position: absolute; opacity: 0; pointer-events: none; }
.cp-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  padding: 24px;
  align-items: center;
  justify-content: center;
}
.cp-gate-toggle:checked ~ .cp-modal-overlay { display: flex; }
.cp-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(16,18,22,.55);
  cursor: pointer;
}
.cp-modal {
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 30px 26px 24px;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.24);
  text-align: center;
}
.cp-modal-text {
  margin: 0 0 22px;
  font-size: 17px;
  line-height: 1.55;
  color: var(--cp-ink);
}
.cp-modal-close {
  display: inline-block;
  padding: 12px 30px;
  border-radius: 8px;
  background: var(--cp-accent);
  color: #fff;
  font-weight: 600;
  cursor: pointer;
}


/* =======================================================================
   PART B — QUIZ SHELL (plugin chrome)
   Clean white, dark text, big tap targets, no bright colours.
   ======================================================================= */

.ays-quiz-container,
.ays_quiz_container {
  max-width: 620px !important;
  margin: 0 auto !important;
  background: #fff !important;
  color: #1a1a1a !important;
  border: none !important;
  box-shadow: none !important;
  font-size: 17px !important;
}

/* question text */
.ays-quiz-container .ays_quiz_question,
.ays-quiz-container .ays-question-container h3,
.ays-quiz-container .ays_question_text {
  font-size: 20px !important;
  line-height: 1.45 !important;
  font-weight: 600 !important;
  color: #1a1a1a !important;
  text-align: left !important;
}

/* answer rows — full-width tap targets, generous spacing for thumbs */
.ays-quiz-container .ays-field,
.ays-quiz-container .ays_quiz_answers label,
.ays-quiz-container .ays-question-container label {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  margin: 0 0 12px !important;
  padding: 16px 18px !important;
  min-height: 56px !important;
  border: 1px solid #e2e2e4 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #1a1a1a !important;
  font-size: 16px !important;
  line-height: 1.45 !important;
  text-align: left !important;
  cursor: pointer !important;
}
.ays-quiz-container .ays-field:hover,
.ays-quiz-container .ays-field:focus-within {
  border-color: #1f3a5f !important;
  background: #f7f7f8 !important;
}

/* progress bar */
.ays-quiz-container .ays_quiz_progress_bar,
.ays-quiz-container .ays-progress-bar,
.ays-quiz-container .ays-progress {
  background: #ececee !important;
  border-radius: 999px !important;
  height: 8px !important;
  overflow: hidden !important;
}
.ays-quiz-container .ays_progress_bar_line,
.ays-quiz-container .ays-progress-bar > div,
.ays-quiz-container .ays-progress-value {
  background: #1f3a5f !important;
  border-radius: 999px !important;
}

/* navigation + submit buttons */
.ays-quiz-container button,
.ays-quiz-container .ays_next_button,
.ays-quiz-container .ays_prev_button,
.ays-quiz-container .ays_finish_button,
.ays-quiz-container input[type="submit"] {
  border-radius: 8px !important;
  padding: 15px 26px !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  border: none !important;
  background: #1f3a5f !important;
  color: #fff !important;
  box-shadow: none !important;
}
.ays-quiz-container .ays_prev_button {
  background: #fff !important;
  color: #55565a !important;
  border: 1px solid #e2e2e4 !important;
}

/* lead-capture form fields */
.ays-quiz-container input[type="text"],
.ays-quiz-container input[type="email"] {
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 15px 16px !important;
  font-size: 16px !important;   /* 16px stops iOS zooming on focus */
  border: 1px solid #e2e2e4 !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #1a1a1a !important;
}

/* phone tuning */
@media (max-width: 600px) {
  .cp-result           { font-size: 16px; }
  .cp-score-value      { font-size: 36px; }
  .cp-stage            { font-size: 15px; }
  .cp-callout          { padding: 20px 16px; }
  .cp-modal            { padding: 26px 20px 20px; }
  .ays-quiz-container .ays_quiz_question,
  .ays-quiz-container .ays_question_text { font-size: 18px !important; }
}


/* =======================================================================
   PART C - ACCOUNT GATE
   Shown before question one when the quiz is limited to logged-in users.
   Same white ground and navy accent as the rest of the funnel, so it does
   not feel like WordPress has interrupted the experience.
   ======================================================================= */

.cpk-auth {
  max-width: 460px;
  margin: 0 auto;
  padding: 4px 0 8px;
  color: var(--cp-ink, #1a1a1a);
  font-size: 16px;
  line-height: 1.6;
  text-align: left;
}

.cpk-auth-head { margin-bottom: 22px; text-align: center; }

.cpk-auth-title {
  margin: 0 0 8px;
  font-size: 24px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--cp-ink, #1a1a1a);
}
.cpk-auth-sub {
  margin: 0;
  font-size: 15px;
  color: var(--cp-ink-soft, #55565a);
}

/* ---- tabs ---- */
.cpk-auth-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 20px;
  padding: 4px;
  border: 1px solid var(--cp-line, #e2e2e4);
  border-radius: 10px;
  background: var(--cp-tint, #f7f7f8);
}
.cpk-auth-tab {
  flex: 1;
  padding: 11px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--cp-ink-soft, #55565a);
  font: 600 14px/1.2 inherit;
  cursor: pointer;
}
.cpk-auth-tab.is-active {
  background: #fff;
  color: var(--cp-accent, #1f3a5f);
  box-shadow: 0 1px 3px rgba(20,24,31,.10);
}
.cpk-auth-tab:focus-visible {
  outline: 2px solid var(--cp-accent, #1f3a5f);
  outline-offset: 2px;
}

/* ---- fields ---- */
.cpk-auth-label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
}
.cpk-auth-input,
.cpk-auth-form input[type="text"],
.cpk-auth-form input[type="email"],
.cpk-auth-form input[type="password"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin: 0 0 16px;
  padding: 14px 15px;
  border: 1px solid var(--cp-line, #e2e2e4);
  border-radius: 8px;
  background: #fff;
  color: var(--cp-ink, #1a1a1a);
  font-family: inherit;
  font-size: 16px;   /* 16px stops iOS zooming the page on focus */
  line-height: 1.4;
}
.cpk-auth-input:focus,
.cpk-auth-form input:focus {
  border-color: var(--cp-accent, #1f3a5f);
  outline: none;
  box-shadow: 0 0 0 3px rgba(31,58,95,.12);
}

.cpk-auth-hint {
  margin: -10px 0 18px;
  font-size: 13px;
  color: var(--cp-ink-soft, #55565a);
}

.cpk-auth-submit,
.cpk-auth-form .button,
.cpk-auth-form input[type="submit"],
.cpk-auth-form #wp-submit {
  display: block;
  width: 100%;
  padding: 16px 20px;
  border: none;
  border-radius: 8px;
  background: var(--cp-accent, #1f3a5f);
  color: #fff;
  font-family: inherit;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.35;
  text-align: center;
  cursor: pointer;
}
.cpk-auth-submit:hover,
.cpk-auth-form #wp-submit:hover { background: var(--cp-accent-d, #16293f); }

.cpk-auth-error {
  margin: 0 0 18px;
  padding: 12px 14px;
  border: 1px solid #e6c3bb;
  border-left: 3px solid #96341f;
  border-radius: 6px;
  background: #fdf4f2;
  color: #7c2b19;
  font-size: 14px;
}

/* WordPress's own login form, tidied to match */
.cpk-auth .login-remember { margin: 0 0 16px; font-size: 14px; color: var(--cp-ink-soft, #55565a); }
.cpk-auth .login-remember input { width: auto; margin-right: 6px; }
.cpk-auth p.login-submit { margin: 0; }

/* Honeypot - visible to bots, never to people */
.cpk-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

@media (max-width: 600px) {
  .cpk-auth-title { font-size: 21px; }
}


/* =======================================================================
   PART D - ORDER SUMMARY, GUARANTEE AND THE ONE-CLICK BUMP
   Drawn above the $27 button, inside the callout box. Stripe's own
   checkout page cannot be edited from outside, so everything that has to
   reassure the buyer has to live here, before they leave the page.
   ======================================================================= */

.cp-order {
  margin: 0 0 18px;
  padding: 16px 16px 6px;
  border: 1px solid var(--cp-line, #e2e2e4);
  border-radius: 10px;
  background: #fff;
  text-align: left;
}

.cp-order-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 0 0 12px;
  font-size: 15px;
  line-height: 1.45;
  color: var(--cp-ink, #1a1a1a);
}
.cp-order-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }

.cp-order-total {
  margin-top: 4px;
  padding-top: 12px;
  border-top: 1px solid var(--cp-line, #e2e2e4);
  font-weight: 700;
  font-size: 16px;
}

/* ---- the bump ---- */
.cp-bump {
  display: flex;
  gap: 12px;
  margin: 2px 0 14px;
  padding: 14px 15px;
  border: 2px dashed #c9a227;
  border-radius: 8px;
  background: #fffaf0;
  cursor: pointer;
  text-align: left;
  transition: border-color .15s ease, background .15s ease;
}
.cp-bump:hover { border-color: #a8861d; background: #fef6e6; }

/* Ticked, the box says so at a glance and not only by the tick itself. */
.cp-bump:has(.cp-bump-check:checked) {
  border-style: solid;
  border-color: #a8861d;
  background: #fdf3e0;
}

/* Keyboard focus has to be visible on the box, not only on the input. */
.cp-bump:focus-within {
  outline: 2px solid var(--cp-accent, #1f3a5f);
  outline-offset: 2px;
}

.cp-bump-check {
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
  margin: 1px 0 0;
  accent-color: #a8861d;
  cursor: pointer;
}

.cp-bump-text { display: block; }

.cp-bump-head {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cp-ink, #1a1a1a);
}

.cp-bump-note {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cp-ink-soft, #55565a);
}

/* ---- reassurance under the button ---- */
.cp-assure { margin-top: 12px; }

.cp-guarantee,
.cp-trust {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: var(--cp-ink-soft, #55565a);
  text-align: center;
}
.cp-guarantee {
  font-weight: 600;
  color: var(--cp-ink, #1a1a1a);
  margin-bottom: 4px;
}

@media (max-width: 600px) {
  .cp-order      { padding: 14px 13px 4px; }
  .cp-order-row  { font-size: 14px; }
  .cp-bump-head  { font-size: 14px; }
}


/* ---- security badge ---------------------------------------------------- */

.cp-badge-wrap {
  margin: 0 0 6px;
  text-align: center;
}

.cp-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 13px;
  border: 1px solid var(--cp-line, #e2e2e4);
  border-radius: 999px;
  background: #fff;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  color: var(--cp-ink, #1a1a1a);
  white-space: nowrap;
}

.cp-badge-lock {
  display: block;
  flex: 0 0 auto;
  color: #2f6b46;   /* a padlock reads as green; the accent is used elsewhere */
}

@media (max-width: 380px) {
  .cp-badge { font-size: 11px; padding: 6px 11px; }
}


/* =======================================================================
   PART E - WHAT IS INCLUDED, AND THE GUARANTEE BOX
   The buyer is about to leave for Stripe, where nothing can be added.
   What they are getting and what happens if it disappoints both have to
   be legible here.
   ======================================================================= */

.cp-incl {
  margin: 0 0 18px;
  padding: 16px 17px 14px;
  border: 1px solid var(--cp-line, #e2e2e4);
  border-radius: 10px;
  background: #fff;
  text-align: left;
}

.cp-incl-head {
  margin: 0 0 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--cp-ink-soft, #55565a);
}

/*
 * Two across, so four items land as a 2x2 block that reads as a package
 * rather than a list of promises. Each cell is its own bordered box - the
 * point is for the toolkit to look like it has parts.
 */
.cp-incl-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cp-incl-item {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 13px 13px 14px;
  border: 1px solid var(--cp-line, #e2e2e4);
  border-radius: 9px;
  background: #fcfcfd;
}

/* An odd last item spans both columns instead of leaving a gap. */
.cp-incl-item:last-child:nth-child(odd) { grid-column: 1 / -1; }

.cp-incl-tick {
  flex: 0 0 auto;
  margin-top: 2px;
  color: #2f6b46;
}

.cp-incl-text { display: block; }

.cp-incl-title {
  display: block;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--cp-ink, #1a1a1a);
}

.cp-incl-desc {
  display: block;
  margin-top: 3px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--cp-ink-soft, #55565a);
}

/*
 * Framed like a certificate: a double rule, a seal and the promise set
 * apart from the running copy. The seal is drawn here rather than being a
 * trust-badge image, because this is the seller's own guarantee and must
 * not be mistaken for a third-party certification.
 */
.cp-guar {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  margin: 0 0 16px;
  padding: 15px 17px;
  border: 2px solid #3f7a5c;
  border-radius: 10px;
  background: #f4f9f6;
  box-shadow: inset 0 0 0 1px #ffffff, inset 0 0 0 3px #e2efe8;
  text-align: left;
}

.cp-guar-seal {
  flex: 0 0 auto;
  display: block;
  margin-top: 1px;
  color: #3f7a5c;
}
.cp-guar-seal svg { display: block; }

.cp-guar-text { min-width: 0; }

.cp-guar-title {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  line-height: 1.35;
  color: #23543c;
}

.cp-guar-body {
  margin: 5px 0 0;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--cp-ink-soft, #55565a);
}

/* Two narrow columns on a phone would break every title across lines. */
@media (max-width: 560px) {
  .cp-incl-list { grid-template-columns: 1fr; gap: 8px; }
}

@media (max-width: 380px) {
  .cp-incl       { padding: 14px 12px 12px; }
  .cp-incl-item  { padding: 12px; }
  .cp-incl-title { font-size: 14px; }
  .cp-incl-desc  { font-size: 13px; }
  .cp-guar       { padding: 13px 13px; gap: 11px; }
  .cp-guar-body  { font-size: 13px; }
}

/* =======================================================================
   PART F - QUIZ START PAGE
   The eyebrow, the three trust points and the three-stage picture that
   sit above the Start button. Drawn with type and borders rather than an
   image file, so nothing has to load and nothing breaks on a phone.

   The cards are .cp-track-*, not .cp-stage-*: .cp-stage already means the
   coloured stage name on the results page, and reusing it here would
   repaint that.
   ======================================================================= */

.cp-eyebrow {
  margin: 0 0 18px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-align: center;
  color: var(--cp-ink-soft, #55565a);
}

.cp-points {
  max-width: 470px;
  margin: 0 auto 26px;
  padding: 0;
  list-style: none;
  text-align: left;
}

.cp-points li {
  display: flex;
  gap: 10px;
  margin: 0;
  padding: 0 0 10px;
  font-size: 15.5px;
  line-height: 1.45;
  color: var(--cp-ink, #1a1a1a);
}
.cp-points li:last-child { padding-bottom: 0; }

.cp-points li::before {
  content: "";
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  margin-top: 3px;
  border-radius: 50%;
  background:
    url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.6 8.4l3 3 5.8-6.8' fill='none' stroke='%23ffffff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
    center / 13px 13px no-repeat,
    var(--cp-accent, #1f3a5f);
}

.cp-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin: 0 0 26px;
}

.cp-track-card {
  padding: 15px 12px 14px;
  border-radius: 10px;
  background: #16304f;
  text-align: center;
}

/*
 * Each stage is one step lighter, so the three read as a scale. All three
 * grounds clear 7:1 against white text, which leaves room for the theme's
 * own font rendering without the words going muddy.
 */
.cp-track-2 { background: #24466e; }
.cp-track-3 { background: #325a89; }

/*
 * These cards sit inside the theme's content area and inside Quiz Maker's
 * own container, and both set colours on the elements underneath them with
 * more specificity than a plain class. Inheriting white from the card is
 * therefore not enough - it came out near-black on navy on the live site.
 * Every line states its own colour, and states it loudly enough to win.
 *
 * The softer lines use a solid rgba rather than opacity: opacity fades
 * whatever colour actually won, so if the theme forced dark text, dimming
 * it only made it harder to read.
 */
.cp-track-card,
.cp-track-card span {
  color: #ffffff !important;
}

.cp-track-card .cp-track-n {
  display: block;
  margin: 0 0 7px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82) !important;
}

.cp-track-card .cp-track-name {
  display: block;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.3;
  color: #ffffff !important;
}

.cp-track-card .cp-track-band {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  line-height: 1.35;
  color: rgba(255, 255, 255, .86) !important;
  font-variant-numeric: tabular-nums;
}

.cp-track-note {
  margin: -18px 0 24px;
  font-size: 12.5px;
  line-height: 1.5;
  text-align: center;
  color: var(--cp-ink-soft, #55565a);
}

@media (max-width: 560px) {
  .cp-track       { grid-template-columns: 1fr; gap: 8px; }
  .cp-track-card        { padding: 12px 14px; text-align: left; }
  .cp-track-n      { display: inline; margin: 0 8px 0 0; }
  .cp-track-name   { display: inline; font-size: 14.5px; }
  .cp-track-band   { margin-top: 4px; }
  .cp-points li    { font-size: 15px; }
}