/* ---- header ---- */
                                /* ---- the test ---- */
    .quiz-card {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 30px 30px 26px;
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.07);
    }

    .quiz-progress {
      height: 5px;
      background: rgba(0, 0, 0, 0.07);
      border-radius: 100px;
      overflow: hidden;
    }

    .quiz-progress-fill {
      height: 100%;
      width: 0;
      background: var(--yellow);
      border-radius: 100px;
      transition: width 0.32s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .quiz-counter {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 18px 0 0;
    }

    .quiz-question {
      font-size: 25px;
      line-height: 1.24;
      letter-spacing: -0.015em;
      margin: 10px 0 24px;
    }

    .quiz-options { display: grid; gap: 10px; }

    .quiz-option {
      width: 100%;
      text-align: left;
      font: inherit;
      font-size: 16px;
      line-height: 1.4;
      font-weight: 600;
      color: var(--ink);
      background: var(--bg);
      border: 1.5px solid transparent;
      border-radius: 14px;
      padding: 16px 18px;
      cursor: pointer;
      transition: border-color 0.14s ease, background 0.14s ease, transform 0.14s ease;
    }

    .quiz-option:hover {
      border-color: var(--yellow);
      transform: translateX(3px);
    }

    .quiz-option.is-chosen {
      border-color: var(--yellow);
      background: rgba(248, 188, 32, 0.16);
    }

    .quiz-back {
      font: inherit;
      font-size: 14px;
      font-weight: 700;
      color: var(--muted);
      background: none;
      border: 0;
      padding: 18px 0 0;
      cursor: pointer;
    }

    .quiz-back:hover { color: var(--ink); }

    /* ---- result ---- */
    .quiz-result { margin-top: 8px; }

    .result-band {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 24px;
      padding: 32px 30px;
      box-shadow: 0 18px 44px rgba(0, 0, 0, 0.07);
    }

    .result-kicker {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--yellow-deep);
    }

    .result-band h2 {
      font-size: 32px;
      line-height: 1.12;
      letter-spacing: -0.02em;
      margin: 10px 0 20px;
    }

    .result-meter {
      height: 10px;
      background: rgba(0, 0, 0, 0.07);
      border-radius: 100px;
      overflow: hidden;
    }

    .result-meter-fill {
      height: 100%;
      width: 0;
      border-radius: 100px;
      background: linear-gradient(90deg, var(--yellow), var(--yellow-deep));
      transition: width 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .result-score {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 10px 0 18px;
    }

    .result-summary {
      font-size: 17.5px;
      line-height: 1.5;
      font-weight: 600;
      margin: 0;
    }

    .result-detail { padding: 26px 4px 4px; }
    .result-detail p {
      font-size: 16px;
      line-height: 1.6;
      color: var(--muted);
      margin: 0 0 14px;
    }

    .result-actions {
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      margin: 12px 0 34px;
    }

    .result-actions .btn {
      flex: 1 1 auto;
      text-align: center;
      font-size: 15.5px;
      font-weight: 800;
      padding: 15px 22px;
      border-radius: 100px;
      border: 1.5px solid transparent;
      cursor: pointer;
      font-family: inherit;
    }

    .result-actions .btn.primary { background: var(--ink); color: #fff; }
    .result-actions .btn.primary:hover { background: #000; }
    .result-actions .btn.primary:disabled { opacity: 0.55; cursor: default; }
    .result-actions .btn.ghost {
      background: transparent;
      color: var(--ink);
      border-color: var(--line);
    }
    .result-actions .btn.ghost:hover { border-color: var(--ink); }

    .result-reads, .result-app {
      background: var(--card);
      border: 1px solid var(--line);
      border-radius: 22px;
      padding: 26px 28px;
      margin-bottom: 18px;
    }

    .result-reads h3, .result-app h3 {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--muted);
      margin: 0 0 14px;
    }

    .result-reads ul { margin: 0; padding: 0; list-style: none; }
    .result-reads li + li { margin-top: 2px; }

    .result-reads a {
      display: block;
      font-size: 16.5px;
      font-weight: 700;
      color: var(--ink);
      text-decoration: none;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
    }
    .result-reads li:last-child a { border-bottom: 0; }
    .result-reads a:hover { color: var(--yellow-deep); }

    .result-app p {
      font-size: 15.5px;
      line-height: 1.55;
      color: var(--muted);
      margin: 0 0 12px;
    }
    .result-app .store-row { margin-top: 18px; }

    .app-quiz-list {
      list-style: none;
      margin: 0 0 4px;
      padding: 0;
      display: grid;
      gap: 1px;
    }

    .app-quiz-list li {
      font-size: 15.5px;
      font-weight: 700;
      color: var(--ink);
      padding: 11px 0 11px 26px;
      border-bottom: 1px solid var(--line);
      position: relative;
    }

    .app-quiz-list li:last-child { border-bottom: 0; }

    .app-quiz-list li::before {
      content: "";
      position: absolute;
      left: 4px;
      top: 18px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--yellow);
    }

    .app-quiz-list span {
      display: block;
      font-size: 13.5px;
      font-weight: 500;
      color: var(--muted);
      margin-top: 1px;
    }

    /* ---- the exported card ----
       Parked off-screen at full size rather than hidden, because
       html2canvas cannot measure a display:none subtree. */
    .card-stage {
      position: absolute;
      left: -10000px;
      top: 0;
      width: 1080px;
      height: 1350px;
      overflow: hidden;
    }

    .share-card {
      width: 1080px;
      height: 1350px;
      background: var(--bg);
      font-family: "Inter", Helvetica, Arial, sans-serif;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 90px;
      box-sizing: border-box;
    }

    .share-inner {
      background: var(--card);
      border-radius: 56px;
      padding: 88px 76px;
      width: 100%;
      text-align: center;
      border: 3px solid var(--ink);
    }

    .share-wordmark {
      display: block;
      font-size: 40px;
      font-weight: 900;
      letter-spacing: 0.02em;
      color: var(--ink);
    }

    .share-kicker {
      display: block;
      margin-top: 44px;
      font-size: 26px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: var(--yellow-deep);
    }

    .share-band {
      font-size: 82px;
      line-height: 1.04;
      font-weight: 900;
      letter-spacing: -0.03em;
      color: var(--ink);
      margin: 26px 0 0;
    }

    .share-line {
      font-size: 34px;
      line-height: 1.35;
      font-weight: 500;
      color: var(--muted);
      margin: 30px 0 52px;
    }

    .share-meter {
      height: 22px;
      background: rgba(0, 0, 0, 0.08);
      border-radius: 100px;
      overflow: hidden;
    }

    .share-meter-fill {
      height: 100%;
      background: var(--yellow);
      border-radius: 100px;
    }

    .share-score {
      font-size: 28px;
      font-weight: 800;
      letter-spacing: 0.08em;
      color: var(--muted);
      margin: 22px 0 56px;
    }

    .share-cta {
      display: inline-block;
      font-size: 30px;
      font-weight: 800;
      color: var(--ink);
      background: var(--yellow);
      padding: 20px 44px;
      border-radius: 100px;
    }

    /* ---- the explainer below ---- */
                        @media (max-width: 640px) {
      .quiz-card, .result-band { padding: 24px 20px; border-radius: 20px; }
      .quiz-question { font-size: 21px; }
      .quiz-option { font-size: 15.5px; padding: 15px 16px; }
      .result-band h2 { font-size: 26px; }
      .result-reads, .result-app { padding: 22px 20px; }
      .result-actions .btn { flex: 1 1 100%; }
    }