/* OASIS Answers Knowledge Check – inherits the theme's fonts. Colors and corners come from the
   --oa-kc-* variables below; Knowledge Checks › Settings › Appearance overrides them inline. */
.oa-kc {
	--oa-kc-accent: #7f438a;
	--oa-kc-ink: #1f1a22;
	--oa-kc-ink-2: #4b4450;
	--oa-kc-ink-3: #7a7280;
	--oa-kc-line: #e4d7e8;
	--oa-kc-tint: #f4eef6;
	--oa-kc-card: #fbf9fc;
	--oa-kc-ok: #1f8a4c;
	--oa-kc-ok-tint: #e7f5ec;
	--oa-kc-bad: #c62f3b;
	--oa-kc-bad-tint: #fbe9eb;
	--oa-kc-on-accent: #ffffff;
	--oa-kc-surface: #ffffff;
	--oa-kc-radius: 14px;
	--oa-kc-radius-sm: 10px;
	--oa-kc-btn-radius: 999px;
	max-width: 900px;
	margin: 0 auto;
	color: var(--oa-kc-ink);
	font-size: 16px;
	line-height: 1.55;
	text-align: left;
}
.oa-kc *, .oa-kc *::before, .oa-kc *::after { box-sizing: border-box; }
.oa-kc [hidden] { display: none !important; }
.oa-kc-card {
	background: var(--oa-kc-card);
	border: 1px solid var(--oa-kc-line);
	border-radius: var(--oa-kc-radius);
	padding: clamp(20px, 4vw, 40px);
	scroll-margin-top: 120px;
}
.oa-kc-title { font-size: clamp(26px, 3.4vw, 34px); line-height: 1.15; margin: 0 0 8px; color: var(--oa-kc-ink); }
.oa-kc-eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--oa-kc-accent); font-weight: 600; margin: 0 0 4px; }
.oa-kc-meta { display: flex; flex-wrap: wrap; gap: 6px 18px; color: var(--oa-kc-ink-3); font-size: 14px; margin: 0 0 18px; }
.oa-kc-intro { color: var(--oa-kc-ink-2); max-width: 64ch; margin-bottom: 18px; }

/* sign-up form */
.oa-kc-gate { max-width: 560px; margin: 0; }
.oa-kc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.oa-kc-field { display: grid; gap: 4px; margin: 0 0 14px; align-content: start; }
.oa-kc-field label { font-size: 14px; font-weight: 500; color: var(--oa-kc-ink-2); }
.oa-kc-field input {
	width: 100%; border: 1px solid var(--oa-kc-line); border-radius: var(--oa-kc-radius-sm); padding: 11px 12px;
	font: inherit; background: var(--oa-kc-surface); color: var(--oa-kc-ink); margin: 0;
}
.oa-kc-field input:focus { outline: 2px solid var(--oa-kc-accent); outline-offset: 0; border-color: var(--oa-kc-accent); }
.oa-kc-consent { font-size: 13px; color: var(--oa-kc-ink-3); margin: 0 0 16px; }
.oa-kc-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }
.oa-kc-error { color: var(--oa-kc-bad); font-size: 14px; margin: 0 0 12px; }

/* buttons */
.oa-kc .oa-kc-btn {
	display: inline-block; border: 0; border-radius: var(--oa-kc-btn-radius); background: var(--oa-kc-accent); color: var(--oa-kc-on-accent);
	padding: 12px 28px; font: inherit; font-weight: 600; cursor: pointer; line-height: 1.2; text-transform: none; letter-spacing: normal;
}
.oa-kc .oa-kc-btn:hover { filter: brightness(.9); background: var(--oa-kc-accent); color: var(--oa-kc-on-accent); }
.oa-kc .oa-kc-btn[disabled] { opacity: .55; cursor: wait; }
.oa-kc .oa-kc-btn.is-ghost { background: transparent; color: var(--oa-kc-accent); border: 1px solid var(--oa-kc-line); }
.oa-kc .oa-kc-btn.is-ghost:hover { background: var(--oa-kc-tint); filter: none; }
.oa-kc-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 14px; margin: 22px 0 0; }
.oa-kc :focus-visible { outline: 2px solid var(--oa-kc-accent); outline-offset: 2px; }

/* question screen */
.oa-kc-top { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.oa-kc .oa-kc-nav {
	width: 36px; height: 36px; border-radius: var(--oa-kc-radius-sm); border: 1px solid var(--oa-kc-line); background: var(--oa-kc-surface);
	color: var(--oa-kc-accent); font-size: 20px; line-height: 1; padding: 0; cursor: pointer;
}
.oa-kc .oa-kc-nav[disabled] { opacity: .35; cursor: default; }
.oa-kc-count { font-weight: 600; font-variant-numeric: tabular-nums; min-width: 54px; text-align: center; }
.oa-kc-progress { flex: 1; min-width: 100px; height: 6px; background: var(--oa-kc-line); border-radius: 6px; overflow: hidden; }
.oa-kc-progress i { display: block; height: 100%; background: var(--oa-kc-accent); transition: width .25s; }
.oa-kc .oa-kc-listbtn {
	font: inherit; font-size: 13px; border: 1px solid var(--oa-kc-line); background: var(--oa-kc-surface); border-radius: var(--oa-kc-btn-radius);
	padding: 6px 12px; color: var(--oa-kc-ink-2); cursor: pointer;
}
.oa-kc-list {
	border: 1px solid var(--oa-kc-line); background: var(--oa-kc-surface); border-radius: var(--oa-kc-radius-sm); padding: 8px;
	margin-bottom: 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; max-height: 280px; overflow-x: hidden; overflow-y: auto;
}
.oa-kc .oa-kc-list button {
	display: flex; gap: 10px; align-items: center; text-align: left; border: 0; background: transparent;
	padding: 6px 8px; border-radius: 6px; font: inherit; font-size: 14px; color: var(--oa-kc-ink-2); cursor: pointer; width: 100%;
}
.oa-kc .oa-kc-list button:hover, .oa-kc .oa-kc-list button.is-current { background: var(--oa-kc-tint); }
.oa-kc-list .n {
	flex: none; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center;
	font-size: 12px; background: var(--oa-kc-line); color: var(--oa-kc-ink-2); font-variant-numeric: tabular-nums;
}
.oa-kc-list .is-done .n { background: var(--oa-kc-accent); color: var(--oa-kc-on-accent); }
.oa-kc-list .t { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.oa-kc-qtext { font-size: 18px; margin-bottom: 18px; max-width: 72ch; }
.oa-kc-qtext p { margin: 0 0 12px; }
.oa-kc-qtext ul { margin: 0 0 12px 1.2em; }
.oa-kc table.oa-kc-ref { border-collapse: collapse; font-size: 13px; margin: 6px 0 16px; background: var(--oa-kc-surface); width: auto; max-width: 100%; display: block; overflow-x: auto; }
.oa-kc table.oa-kc-ref td, .oa-kc table.oa-kc-ref th { border: 1px solid var(--oa-kc-line); padding: 5px 8px; vertical-align: top; text-align: left; }
.oa-kc table.oa-kc-ref th { background: #efe9f2; font-weight: 600; }
.oa-kc-qtext img { max-width: 100%; height: auto; }
.oa-kc-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: min(760px, 100%); }
.oa-kc .oa-kc-option {
	display: flex; gap: 12px; align-items: flex-start; text-align: left; width: 100%;
	background: var(--oa-kc-surface); border: 1px solid var(--oa-kc-line); border-radius: var(--oa-kc-radius-sm); padding: 12px 14px;
	font: inherit; font-size: 16px; color: var(--oa-kc-ink); cursor: pointer; line-height: 1.45; text-transform: none; letter-spacing: normal;
}
.oa-kc .oa-kc-option:hover { border-color: var(--oa-kc-accent); background: var(--oa-kc-surface); color: var(--oa-kc-ink); }
.oa-kc .oa-kc-option[aria-checked="true"] { border-color: var(--oa-kc-accent); background: var(--oa-kc-tint); }
.oa-kc-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--oa-kc-line); margin-top: 3px; position: relative; }
.oa-kc-option[aria-checked="true"] .oa-kc-dot { border-color: var(--oa-kc-accent); }
.oa-kc-option[aria-checked="true"] .oa-kc-dot::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--oa-kc-accent); }
.oa-kc-need { color: var(--oa-kc-bad); font-size: 14px; }

/* results */
.oa-kc-res-head { display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; margin-bottom: 26px; }
.oa-kc-ring { width: 150px; height: 150px; position: relative; }
.oa-kc-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.oa-kc-ring circle { fill: none; stroke-width: 12; }
.oa-kc-ring .bg { stroke: var(--oa-kc-line); }
.oa-kc-ring .fg { stroke: var(--oa-kc-accent); stroke-linecap: round; }
.oa-kc-ring .v { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.oa-kc-ring .v b { font-size: 34px; line-height: 1; display: block; }
.oa-kc-ring .v small { color: var(--oa-kc-ink-3); font-size: 13px; }
.oa-kc-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 10px 22px; margin: 12px 0 0; font-variant-numeric: tabular-nums; }
.oa-kc-stats div { border-top: 1px solid var(--oa-kc-line); padding-top: 8px; }
.oa-kc-stats dt { font-size: 12px; color: var(--oa-kc-ink-3); text-transform: uppercase; letter-spacing: .08em; }
.oa-kc-stats dd { margin: 2px 0 0; font-size: 18px; font-weight: 600; white-space: nowrap; }
.oa-kc-stats .ok { color: var(--oa-kc-ok); }
.oa-kc-stats .bad { color: var(--oa-kc-bad); }
.oa-kc-sent { font-size: 14px; color: var(--oa-kc-ink-3); margin: 12px 0 0; }
.oa-kc-rec {
	background: var(--oa-kc-accent); color: var(--oa-kc-on-accent); border-radius: var(--oa-kc-radius-sm); padding: 22px 24px;
	display: grid; grid-template-columns: 1fr; gap: 16px; justify-items: start; margin-bottom: 30px;
}
.oa-kc-rec h3 { color: var(--oa-kc-on-accent); font-size: 24px; margin: 2px 0 4px; }
.oa-kc-rec p { margin: 0; color: var(--oa-kc-on-accent); opacity: .92; max-width: 75ch; }
.oa-kc-rec .oa-kc-eyebrow { color: var(--oa-kc-on-accent); opacity: .8; }
.oa-kc .oa-kc-rec-btn { background: var(--oa-kc-on-accent); color: var(--oa-kc-accent); border-radius: var(--oa-kc-btn-radius); padding: 11px 20px; font-weight: 600; text-decoration: none; max-width: 100%; }
.oa-kc .oa-kc-rec-btn:hover { color: var(--oa-kc-accent); filter: brightness(.95); }
.oa-kc-products { margin-bottom: 32px; }
.oa-kc-products h3 { font-size: 22px; margin: 0 0 12px; }
.oa-kc-pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.oa-kc-product { background: var(--oa-kc-surface); border: 1px solid var(--oa-kc-line); border-radius: var(--oa-kc-radius-sm); overflow: hidden; display: flex; flex-direction: column; }
.oa-kc-pimg { display: block; aspect-ratio: 4 / 3; background: var(--oa-kc-tint); }
.oa-kc-pimg img { width: 100%; height: 100%; object-fit: contain; display: block; }
.oa-kc-pbody { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; min-width: 0; }
.oa-kc .oa-kc-pname { font-weight: 600; color: var(--oa-kc-ink); text-decoration: none; line-height: 1.3; }
.oa-kc .oa-kc-pname:hover { color: var(--oa-kc-accent); }
.oa-kc-pprice { color: var(--oa-kc-accent); font-weight: 600; }
.oa-kc-pprice del { color: var(--oa-kc-ink-3); font-weight: 400; margin-right: 6px; }
.oa-kc-pprice ins { text-decoration: none; }
.oa-kc-psum { font-size: 14px; color: var(--oa-kc-ink-2); margin: 0; }
.oa-kc .oa-kc-pbuy { margin-top: auto; align-self: flex-start; padding: 10px 20px; font-size: 15px; text-decoration: none; }
.oa-kc-review h3 { font-size: 22px; margin: 0 0 12px; }
.oa-kc-ritem { border: 1px solid var(--oa-kc-line); border-radius: var(--oa-kc-radius-sm); background: var(--oa-kc-surface); margin-bottom: 10px; }
.oa-kc-ritem summary { list-style: none; display: flex; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
.oa-kc-ritem summary::-webkit-details-marker { display: none; }
.oa-kc-ritem summary .t { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 15px; }
.oa-kc-pill { flex: none; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; }
.oa-kc-pill.ok { background: var(--oa-kc-ok-tint); color: var(--oa-kc-ok); }
.oa-kc-pill.bad { background: var(--oa-kc-bad-tint); color: var(--oa-kc-bad); }
.oa-kc-rbody { padding: 0 16px 16px; font-size: 15px; }
.oa-kc-rbody ol { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 4px; }
.oa-kc-rbody li { padding: 6px 10px; border-radius: 6px; margin: 0; }
.oa-kc-rbody li.is-correct { background: var(--oa-kc-ok-tint); }
.oa-kc-rbody li.is-wrong { background: var(--oa-kc-bad-tint); }
.oa-kc-rbody li em { font-style: normal; font-size: 12px; font-weight: 600; margin-left: 8px; }
.oa-kc-rbody li.is-correct em { color: var(--oa-kc-ok); }
.oa-kc-rbody li.is-wrong em { color: var(--oa-kc-bad); }
.oa-kc-explain { margin-top: 10px; padding: 10px 12px; background: var(--oa-kc-tint); border-radius: var(--oa-kc-radius-sm); font-size: 14px; }

@media (max-width: 640px) {
	.oa-kc-row { grid-template-columns: 1fr; gap: 0; }
	.oa-kc-res-head { grid-template-columns: 1fr; justify-items: start; }
	.oa-kc-rec { grid-template-columns: 1fr; }
	.oa-kc .oa-kc-rec-btn { justify-self: stretch; text-align: center; }
	.oa-kc-qtext { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.oa-kc-progress i { transition: none; }
}

/* ---------- gated PDF downloads ---------- */
.oa-kc-dl-signup { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 40px; align-items: start; }
.oa-kc-dl-intro .oa-kc-intro { margin-bottom: 12px; }
.oa-kc-dl-badge { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--oa-kc-accent); background: var(--oa-kc-tint); border-radius: 999px; padding: 5px 12px 5px 6px; margin: 0; }
.oa-kc-dl-badge span { background: var(--oa-kc-accent); color: var(--oa-kc-on-accent); border-radius: 999px; padding: 2px 8px; font-size: 11px; letter-spacing: .06em; }
.oa-kc-dl .oa-kc-gate { max-width: none; }
.oa-kc-dl-done-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 24px; margin-bottom: 18px; }
.oa-kc-dl-done-head .oa-kc-intro { margin: 0; }
.oa-kc-dl-buttons { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.oa-kc .oa-kc-dl-buttons a { text-decoration: none; }
.oa-kc-dl-viewer { border: 1px solid var(--oa-kc-line); border-radius: var(--oa-kc-radius-sm); overflow: hidden; background: var(--oa-kc-surface); height: min(80vh, 900px); }
.oa-kc-dl-viewer iframe { display: block; width: 100%; height: 100%; border: 0; }
@media (max-width: 760px) {
	.oa-kc-dl-signup { grid-template-columns: 1fr; }
}

/* Themes (e.g. Hello Elementor) set white-space: nowrap on every button, which stops long answer
   choices and labels from wrapping and pushes them out of the card. Undo that inside the quiz. */
.oa-kc button, .oa-kc .oa-kc-btn, .oa-kc a.oa-kc-btn { white-space: normal; }
.oa-kc .oa-kc-option { max-width: 100%; min-width: 0; }
.oa-kc .oa-kc-option > span:last-child { min-width: 0; overflow-wrap: anywhere; }
.oa-kc .oa-kc-list button .t { white-space: nowrap; }
/* Keep theme button hover/focus colors (e.g. Hello Elementor's pink) off the quiz controls. */
.oa-kc .oa-kc-nav:hover, .oa-kc .oa-kc-nav:focus { background: var(--oa-kc-surface); color: var(--oa-kc-accent); border-color: var(--oa-kc-accent); }
.oa-kc .oa-kc-nav[disabled]:hover { border-color: var(--oa-kc-line); }
.oa-kc .oa-kc-listbtn:hover, .oa-kc .oa-kc-listbtn:focus { background: var(--oa-kc-tint); color: var(--oa-kc-ink-2); border-color: var(--oa-kc-line); }
.oa-kc .oa-kc-option:focus { background: var(--oa-kc-surface); color: var(--oa-kc-ink); }
.oa-kc .oa-kc-option[aria-checked="true"]:focus { background: var(--oa-kc-tint); }