.kkb-interactive-guide {
	--guide-gold: #d9b41e;
	--guide-ink: #111;
	--guide-muted: #5f5f5f;
	--guide-line: #e7e7e7;
	max-width: 980px;
	margin: 0 auto 80px;
	color: var(--guide-ink);
	font-family: "Open Sans", sans-serif;
}

.kkb-guide-post .single-post-title,
.kkb-guide-post .entry-title,
.kkb-guide-post .page-header-title {
	font-family: 'Poppins', sans-serif;
	font-weight: 700;
}

.kkb-guide-hero { margin-bottom: 34px; }
.kkb-guide-intro { width: 100%; font-size: 18px; line-height: 1.75; }
.kkb-guide-video { width: 100%; margin-top: 24px; aspect-ratio: 16 / 9; overflow: hidden; border-left: 10px solid var(--guide-gold); background: #000; box-shadow: 7px 7px 0 rgba(217, 180, 30, .24); }
.kkb-guide-video iframe { display: block; width: 100%; height: 100%; border: 0; }

.kkb-guide-progress { margin-top: 28px; padding: 20px 22px; border-left: 10px solid var(--guide-gold); background: #000; color: #fff; border-radius: 0; }
.kkb-guide-progress__copy { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 11px; }
.kkb-guide-progress__copy strong { font-family: 'Poppins', sans-serif; font-weight: 700; }
.kkb-guide-progress__copy span { color: var(--guide-gold); font-weight: 700; }
.kkb-guide-progress__track,
.kkb-account-guide-card__track { display: block; height: 7px; overflow: hidden; background: #3a3a3a; border-radius: 0; }
.kkb-guide-progress__track span,
.kkb-account-guide-card__track i { display: block; height: 100%; background: var(--guide-gold); transition: width .25s ease; }
.kkb-guide-secondary-progress { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin-top: 14px; }
.kkb-guide-mini-progress { padding: 15px 18px 16px; border: 1px solid #111; border-left: 8px solid var(--guide-gold); background: #f5f1e6; color: #111; }
.kkb-guide-mini-progress--flag { border-left-color: #111; background: var(--guide-gold); }
.kkb-guide-mini-progress__copy { display: flex; justify-content: space-between; align-items: baseline; gap: 15px; margin-bottom: 9px; }
.kkb-guide-mini-progress__copy strong { font-family: 'Poppins', sans-serif; font-size: 14px; font-weight: 700; }
.kkb-guide-mini-progress__copy span { font-family: 'Poppins', sans-serif; font-size: 13px; font-weight: 700; }
.kkb-guide-mini-progress__track { display: block; height: 5px; overflow: hidden; background: rgba(0, 0, 0, .2); }
.kkb-guide-mini-progress__track span { display: block; height: 100%; background: #111; transition: width .25s ease; }
.kkb-guide-sign-in { margin: 12px 0 0; font-size: 14px; color: var(--guide-muted); }
.kkb-guide-private { max-width: 760px; margin: 30px auto 60px; padding: 24px; border: 1px solid #d8bf59; border-left: 4px solid #d9b41e; background: #fffbea; }
.kkb-guide-private strong { font-size: 18px; }
.kkb-guide-private p { margin: 7px 0 0; }

.kkb-guide-toc { margin: 40px 0 60px; padding: 0 28px 28px; border: 1px solid #000; background: #fff; box-shadow: 8px 8px 0 rgba(217, 180, 30, .3); }
.kkb-guide-toc__header { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin: -1px -29px 24px; border-left: 10px solid var(--guide-gold); padding: 10px 13px 10px 19px; background: #000; color: #fff; }
.kkb-guide-toc__header strong { font-family: 'Poppins', sans-serif; font-size: 19px; font-weight: 700; line-height: 1; text-transform: uppercase; }
.kkb-guide-resume { min-height: 34px; border: 1px solid var(--guide-gold); border-radius: 0; padding: 6px 12px; background: var(--guide-gold); color: #111; font-family: 'Poppins', sans-serif; font-size: 12px; font-weight: 700; line-height: 1.2; cursor: pointer; transition: background .15s ease, color .15s ease, opacity .15s ease; }
.kkb-guide-resume:hover,
.kkb-guide-resume:focus-visible { background: #fff; color: #111; }
.kkb-guide-resume:disabled { border-color: #777; background: #333; color: #aaa; cursor: not-allowed; opacity: .8; }
.kkb-guide-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; row-gap: 4px; margin: 0; padding-left: 25px; }
.kkb-guide-toc li { padding: 6px 0 6px 4px; break-inside: avoid; border-bottom: 1px solid #ececec; }
.kkb-guide-toc li::marker { color: #a88700; font-family: 'Poppins', sans-serif; font-weight: 700; }
.kkb-guide-toc a { color: #111; font-weight: 600; text-decoration: none; transition: color .15s ease; }
.kkb-guide-toc a:hover,
.kkb-guide-toc a:focus { color: #a88700; }

.kkb-guide-section { scroll-margin-top: 30px; padding: 40px 0; border-top: 1px solid var(--guide-line); }
.kkb-guide-section h2 { display: inline-block; margin: 0 0 22px; border-left: 10px solid var(--guide-gold); padding: 10px 18px 11px; background: #000; color: #fff; font-family: 'Poppins', sans-serif; font-size: clamp(23px, 4vw, 34px); font-weight: 700; line-height: 1.15; }
.kkb-guide-section__content { width: 100%; font-size: 17px; line-height: 1.75; }
.kkb-guide-section__content ul { margin: 15px 0 22px 24px; }
.kkb-guide-section__content h3 { margin: 30px 0 10px; font-family: 'Poppins', sans-serif; font-size: 21px; font-weight: 700; }

.kkb-guide-checklist { display: grid; gap: 10px; margin-top: 25px; }
.kkb-guide-check { position: relative; display: grid; grid-template-columns: 27px 1fr; gap: 14px; align-items: start; padding: 18px; border: 1px solid #000; background: #fff; box-shadow: 6px 6px 0 rgba(217, 180, 30, .22); cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, background .15s, opacity .15s; }
.kkb-guide-check:hover { transform: translateY(-2px); box-shadow: 8px 9px 0 rgba(217, 180, 30, .28); }
.kkb-guide-check input { position: absolute; opacity: 0; pointer-events: none; }
.kkb-guide-check__box { width: 24px; height: 24px; border: 2px solid #111; margin-top: 1px; }
.kkb-guide-check__copy { display: grid; gap: 4px; }
.kkb-guide-check__copy strong { font-family: 'Poppins', sans-serif; font-size: 16px; font-weight: 700; line-height: 1.4; }
.kkb-guide-check__copy small { color: var(--guide-muted); font-size: 14px; line-height: 1.55; }
.kkb-guide-check.is-complete { background: #fffbea; border-color: #000; }
.kkb-guide-check.is-complete .kkb-guide-check__box { border-color: var(--guide-gold); background: var(--guide-gold); }
.kkb-guide-check.is-complete .kkb-guide-check__box::after { content: ''; display: block; width: 10px; height: 6px; margin: 5px 0 0 5px; border: solid #111; border-width: 0 0 2px 2px; transform: rotate(-45deg); }
.kkb-guide-check.is-complete strong { text-decoration: line-through; text-decoration-color: #aa8c10; }
.kkb-guide-check.is-saving { opacity: .55; cursor: wait; }
.kkb-guide-check:focus-visible { outline: 3px solid var(--guide-gold); outline-offset: 4px; }
.kkb-guide-check.is-resume-target { outline: 4px solid var(--guide-gold); outline-offset: 5px; }

.kkb-guide-checklist--milestones { gap: 8px; margin-top: 14px; }
.kkb-guide-check--ending,
.kkb-guide-check--flag { grid-template-columns: 23px 1fr; gap: 11px; padding: 13px 15px; box-shadow: none; }
.kkb-guide-check--ending { border-left: 8px solid var(--guide-gold); background: #f5f1e6; }
.kkb-guide-check--flag { border-left: 8px solid #111; background: var(--guide-gold); }
.kkb-guide-check--ending:hover,
.kkb-guide-check--flag:hover { box-shadow: 4px 4px 0 rgba(0, 0, 0, .16); }
.kkb-guide-check--ending .kkb-guide-check__box,
.kkb-guide-check--flag .kkb-guide-check__box { width: 20px; height: 20px; }
.kkb-guide-check--ending .kkb-guide-check__copy,
.kkb-guide-check--flag .kkb-guide-check__copy { gap: 2px; }
.kkb-guide-check__type { font-family: 'Poppins', sans-serif; font-size: 10px; font-weight: 700; letter-spacing: .12em; line-height: 1.2; text-transform: uppercase; }
.kkb-guide-check--ending.is-complete { border-color: #111; border-left-color: var(--guide-gold); background: #efe4b3; }
.kkb-guide-check--flag.is-complete { border-color: #111; background: #c9a400; }
.kkb-guide-check--ending.is-complete .kkb-guide-check__box,
.kkb-guide-check--flag.is-complete .kkb-guide-check__box { border-color: #111; background: #111; }
.kkb-guide-check--ending.is-complete .kkb-guide-check__box::after,
.kkb-guide-check--flag.is-complete .kkb-guide-check__box::after { width: 8px; height: 5px; margin: 4px 0 0 4px; border-color: var(--guide-gold); }

.kkb-guide-complete { margin-top: 35px; padding: 26px; color: #fff; background: #151515; border-top: 4px solid var(--guide-gold); }
.kkb-guide-complete strong { color: var(--guide-gold); font-family: 'Poppins', sans-serif; font-size: 24px; }
.kkb-guide-complete p { margin: 5px 0 0; }

.kkb-guide-closure { margin: 34px 0 26px; border: 1px solid #000; border-left: 10px solid var(--guide-gold); padding: 25px 28px; background: #000; box-shadow: 7px 7px 0 rgba(217, 180, 30, .28); color: #fff; }
.kkb-guide-closure p { margin: 0; font-family: 'Poppins', sans-serif; font-size: clamp(20px, 3vw, 28px); font-weight: 700; line-height: 1.35; }

.kkb-account-guides { --guide-gold: #d9b41e; margin-top: 38px; padding-top: 32px; border-top: 1px solid #ddd; }
.kkb-account-guides__heading { display: flex; justify-content: space-between; align-items: end; gap: 20px; margin-bottom: 18px; }
.kkb-account-guides__heading h2 { margin: 2px 0 0; }
.kkb-account-guides__heading > span { color: #777; font-size: 13px; }
.kkb-account-guides__empty { padding: 20px; background: #f5f5f5; }
.kkb-account-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.kkb-account-guide-card { display: block; overflow: hidden; color: #222; border: 1px solid #000; background: #fff; box-shadow: 6px 6px 0 rgba(217, 180, 30, .22); text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.kkb-account-guide-card.has-cover { display: grid; grid-template-columns: minmax(105px, 34%) minmax(0, 1fr); }
.kkb-account-guide-card:hover { transform: translateY(-3px); box-shadow: 8px 10px 0 rgba(217, 180, 30, .3); color: #222; }
.kkb-account-guide-card__media { min-height: 210px; overflow: hidden; background: #111; }
.kkb-account-guide-card__media img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); opacity: .76; transition: filter .45s ease, opacity .45s ease, transform .25s ease; }
.kkb-account-guide-card.is-complete .kkb-account-guide-card__media img { filter: grayscale(0); opacity: 1; }
.kkb-account-guide-card:hover .kkb-account-guide-card__media img { transform: scale(1.025); }
.kkb-account-guide-card__body { display: grid; align-content: center; gap: 8px; min-width: 0; padding: 20px; }
.kkb-account-guide-card__status { color: #9b7900; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.kkb-account-guide-card__body > strong { font-family: 'Poppins', sans-serif; }
.kkb-account-guide-card__body > span:not(.kkb-account-guide-card__status):not(.kkb-account-guide-card__track) { font-size: 12px; line-height: 1.45; }
.kkb-account-guide-card__track { background: #ddd; }
.kkb-account-guide-card__body b { justify-self: end; }

@media (max-width: 680px) {
	.kkb-guide-toc { padding-right: 20px; padding-left: 20px; }
	.kkb-guide-toc__header { align-items: stretch; margin-right: -21px; margin-left: -21px; }
	.kkb-guide-toc__header strong { align-self: center; }
	.kkb-guide-toc ol { grid-template-columns: 1fr; }
	.kkb-guide-progress__copy { display: grid; gap: 5px; }
	.kkb-guide-secondary-progress { grid-template-columns: 1fr; }
	.kkb-account-guide-grid { grid-template-columns: 1fr; }
	.kkb-account-guide-card.has-cover { grid-template-columns: minmax(96px, 30%) minmax(0, 1fr); }
	.kkb-account-guide-card__media { min-height: 190px; }
}

@media (max-width: 460px) {
	.kkb-guide-toc__header { display: grid; }
	.kkb-guide-resume { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	.kkb-guide-check,
	.kkb-guide-progress__track span,
	.kkb-guide-mini-progress__track span { transition: none; }
}
