/* WC · Readiness check — checklist left, live score right */

.wc-readiness__card {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  border-radius: var(--wc-radius-lg);
  overflow: hidden;
  border: 1px solid rgba(var(--wc-midnight-rgb), 0.1);
}

/* ---------- Left panel: the checklist ---------- */
.wc-readiness__ask {
  background: var(--wc-white);
  color: var(--wc-midnight);
  padding: clamp(28px, 3vw, 40px);
}

.wc-readiness__eyebrow {
  color: var(--wc-marine); /* marine not teal: 12px eyebrow on light panel fails AA */
  margin: 0 0 18px;
}

.wc-readiness__heading {
  margin: 0 0 22px;
}
/* The heading defaults to h2 so the section sits correctly in the page's
   heading order. Every level is normalised to the card scale, so an h2 here
   never picks up the full section-heading size. */
.wc-readiness__heading h1,
.wc-readiness__heading h2,
.wc-readiness__heading h3,
.wc-readiness__heading h4,
.wc-readiness__heading p {
  font-size: clamp(24px, 2.4vw, 30px);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.15;
  margin: 0;
}
.wc-readiness__heading em {
  font-style: italic;
  font-weight: 400;
  color: var(--wc-teal);
}

.wc-readiness__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wc-readiness__item {
  position: relative;
}

.wc-readiness__label {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border-radius: var(--wc-radius-sm);
  border: 1.5px solid rgba(var(--wc-midnight-rgb), 0.12);
  background: transparent;
  cursor: pointer;
  transition: border-color .18s ease, background .18s ease;
}
.wc-readiness__label:hover {
  border-color: rgba(var(--wc-midnight-rgb), 0.3);
}

/* The checkbox itself is visually hidden but still focusable, so the
   focus ring is drawn on its label instead. */
.wc-readiness__input:focus-visible + .wc-readiness__label {
  outline: 3px solid var(--wc-aqua);
  outline-offset: 3px;
}

.wc-readiness__box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex-shrink: 0;
  border: 1.5px solid rgba(var(--wc-midnight-rgb), 0.25);
  background: transparent;
  /* Tick glyph stays in the flow but is invisible until checked, so the
     box never resizes on toggle. */
  color: transparent;
  font-size: 13px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}

.wc-readiness__statement {
  font-size: 15px;
  line-height: 1.45;
  color: var(--wc-midnight);
}

/* Checked state */
.wc-readiness__input:checked + .wc-readiness__label {
  border-color: var(--wc-teal);
  background: var(--wc-mint);
}
@supports (background: color-mix(in srgb, currentColor 8%, transparent)) {
  .wc-readiness__input:checked + .wc-readiness__label {
    background: color-mix(in srgb, var(--wc-teal) 8%, transparent);
  }
}
.wc-readiness__input:checked + .wc-readiness__label .wc-readiness__box {
  background: var(--wc-teal);
  border-color: var(--wc-teal);
  color: var(--wc-white);
}

/* ---------- Right panel: the score ---------- */
.wc-readiness__result {
  background: var(--wc-midnight);
  color: var(--wc-white);
  padding: clamp(28px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.wc-readiness__thread img {
  right: -12%;
  top: -14%;
  width: 82%;
  opacity: 0.3;
  transform: rotate(8deg);
}

.wc-readiness__result-inner {
  position: relative;
  z-index: 1;
}

.wc-readiness__score-eyebrow {
  color: var(--wc-aqua);
  margin: 0 0 20px;
}

.wc-readiness__score {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 20px;
}
.wc-readiness__pct {
  font-size: clamp(52px, 6vw, 72px);
  font-weight: 600;
  color: var(--wc-aqua);
}
.wc-readiness__unit {
  font-size: 22px;
  color: rgba(var(--wc-white-rgb), 0.6);
}

.wc-readiness__track {
  height: 8px;
  border-radius: 999px;
  background: rgba(var(--wc-white-rgb), 0.12);
  overflow: hidden;
  margin: 0 0 24px;
}
.wc-readiness__bar {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: var(--wc-aqua);
  transition: width .4s cubic-bezier(.2, .7, .2, 1);
}

.wc-readiness__verdict {
  font-size: 17px;
  line-height: 1.5;
  color: rgba(var(--wc-white-rgb), 0.85);
  margin: 0 0 28px;
  min-height: 52px;
}

.wc-readiness__cta {
  background: var(--wc-aqua);
  color: var(--wc-midnight);
  justify-content: center;
  width: 100%;
}
.wc-readiness__cta:hover { background: var(--wc-mint); }

.wc-readiness__small-print {
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(var(--wc-white-rgb), 0.6);
  margin: 16px 0 0;
}

@media (max-width: 980px) {
  .wc-readiness__card { grid-template-columns: 1fr; }
  .wc-readiness__verdict { min-height: 0; }
}

@media (max-width: 720px) {
  .wc-readiness__ask,
  .wc-readiness__result { padding: 26px 22px; }
  .wc-readiness__label { padding: 13px 14px; gap: 12px; }
  .wc-readiness__cta { padding: 15px 20px; }
}