:root { --lbc-accent: #8b5e83;
--lbc-accent-strong: #6d4767;
--lbc-accent-soft: #f6eff4;
--lbc-surface: #ffffff;
--lbc-surface-alt: #faf7f9;
--lbc-border: #e4dae0;
--lbc-text: #2c2430;
--lbc-muted: #6b6270;
--lbc-focus: #1a5fb4;
--lbc-radius: 12px;
--lbc-radius-sm: 8px;
--lbc-gap: 1rem;
--lbc-space: clamp(1.25rem, 4vw, 2rem);
--lbc-shadow: 0 1px 2px rgba(44, 36, 48, 0.06), 0 8px 24px rgba(44, 36, 48, 0.06);
} .lbc-quiz,
.lbc-cta,
.lbc-carousel,
.lbc-faq {
box-sizing: border-box;
color: var(--lbc-text);
font: inherit;
margin-block: var(--lbc-space);
max-width: 100%;
}
.lbc-quiz *,
.lbc-cta *,
.lbc-carousel *,
.lbc-faq * {
box-sizing: inherit;
}
.lbc-quiz :focus-visible,
.lbc-cta :focus-visible,
.lbc-carousel :focus-visible,
.lbc-faq :focus-visible {
outline: 3px solid var(--lbc-focus);
outline-offset: 2px;
border-radius: 4px;
}
.lbc-notice {
background: #fff4e5;
border-left: 4px solid #d98324;
border-radius: var(--lbc-radius-sm);
color: #6b4415;
font-size: 0.9375rem;
margin-block: 1rem;
padding: 0.75rem 1rem;
}
.lbc-notice--error {
background: #fdecec;
border-left-color: #c0392b;
color: #7d221a;
} .lbc-quiz {
background: var(--lbc-surface-alt);
border: 1px solid var(--lbc-border);
border-radius: var(--lbc-radius);
padding: var(--lbc-space);
}
.lbc-quiz__head {
margin-bottom: 1.25rem;
}
.lbc-quiz__title {
font-size: clamp(1.25rem, 3.5vw, 1.5rem);
line-height: 1.25;
margin: 0 0 0.5rem;
}
.lbc-quiz__intro {
color: var(--lbc-muted);
margin: 0;
}
.lbc-quiz__progress {
margin-bottom: 1.25rem;
}
.lbc-quiz__progress-bar {
background: var(--lbc-border);
border-radius: 999px;
height: 6px;
overflow: hidden;
}
.lbc-quiz__progress-fill {
background: var(--lbc-accent);
display: block;
height: 100%;
transition: width 240ms ease;
}
.lbc-quiz__progress-label {
color: var(--lbc-muted);
font-size: 0.875rem;
margin: 0.5rem 0 0;
}
.lbc-quiz__form {
margin: 0;
}
.lbc-quiz__step {
border: 0;
margin: 0 0 1.25rem;
min-width: 0; padding: 0;
} .lbc-quiz:not(.is-enhanced) .lbc-quiz__step + .lbc-quiz__step {
border-top: 1px solid var(--lbc-border);
padding-top: 1.25rem;
}
.lbc-quiz__question {
align-items: baseline;
display: flex;
font-size: 1.0625rem;
font-weight: 600;
gap: 0.625rem;
line-height: 1.4;
margin-bottom: 1rem;
padding: 0;
}
.lbc-quiz__question-num {
background: var(--lbc-accent);
border-radius: 999px;
color: #fff;
flex: 0 0 auto;
font-size: 0.8125rem;
font-weight: 700;
height: 1.625rem;
line-height: 1.625rem;
text-align: center;
width: 1.625rem;
}
.lbc-quiz__answers {
display: grid;
gap: 0.5rem;
list-style: none;
margin: 0;
padding: 0;
}
.lbc-quiz__answer {
margin: 0;
position: relative;
} .lbc-quiz__radio {
height: 1px;
opacity: 0;
position: absolute;
width: 1px;
}
.lbc-quiz__label {
align-items: center;
background: var(--lbc-surface);
border: 1.5px solid var(--lbc-border);
border-radius: var(--lbc-radius-sm);
cursor: pointer;
display: flex;
gap: 0.75rem;
line-height: 1.45;
min-height: 48px; padding: 0.75rem 1rem;
transition: border-color 140ms ease, background-color 140ms ease;
}
.lbc-quiz__label::before {
border: 2px solid var(--lbc-border);
border-radius: 50%;
content: "";
flex: 0 0 auto;
height: 1.125rem;
transition: border-color 140ms ease, box-shadow 140ms ease;
width: 1.125rem;
}
.lbc-quiz__label:hover {
border-color: var(--lbc-accent);
}
.lbc-quiz__radio:checked + .lbc-quiz__label {
background: var(--lbc-accent-soft);
border-color: var(--lbc-accent);
}
.lbc-quiz__radio:checked + .lbc-quiz__label::before {
border-color: var(--lbc-accent);
box-shadow: inset 0 0 0 4px var(--lbc-accent);
}
.lbc-quiz__radio:focus-visible + .lbc-quiz__label {
outline: 3px solid var(--lbc-focus);
outline-offset: 2px;
}
.lbc-quiz__feedback {
background: var(--lbc-accent-soft);
border-radius: var(--lbc-radius-sm);
color: var(--lbc-accent-strong);
font-size: 0.9375rem;
margin: 0.75rem 0 0;
padding: 0.625rem 0.875rem;
}
.lbc-quiz__nav {
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.lbc-quiz__btn {
border: 1.5px solid transparent;
border-radius: 999px;
cursor: pointer;
font: inherit;
font-weight: 600;
min-height: 44px;
padding: 0.625rem 1.5rem;
transition: background-color 140ms ease, border-color 140ms ease, opacity 140ms ease;
}
.lbc-quiz__btn--primary {
background: var(--lbc-accent);
color: #fff;
}
.lbc-quiz__btn--primary:hover:not(:disabled) {
background: var(--lbc-accent-strong);
}
.lbc-quiz__btn--ghost {
background: transparent;
border-color: var(--lbc-border);
color: var(--lbc-text);
}
.lbc-quiz__btn--ghost:hover:not(:disabled) {
border-color: var(--lbc-accent);
}
.lbc-quiz__btn:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.lbc-quiz__result {
background: var(--lbc-surface);
border: 1.5px solid var(--lbc-accent);
border-radius: var(--lbc-radius);
padding: var(--lbc-space);
}
.lbc-quiz__result-eyebrow {
color: var(--lbc-accent);
font-size: 0.8125rem;
font-weight: 700;
letter-spacing: 0.08em;
margin: 0 0 0.375rem;
text-transform: uppercase;
}
.lbc-quiz__result-title {
font-size: clamp(1.125rem, 3vw, 1.375rem);
line-height: 1.3;
margin: 0 0 0.75rem;
}
.lbc-quiz__result-body {
color: var(--lbc-text);
}
.lbc-quiz__result-body p:last-child {
margin-bottom: 0;
}
.lbc-quiz__result-cta,
.lbc-quiz__result-actions {
margin: 1rem 0 0;
}
.lbc-quiz__disclaimer {
color: var(--lbc-muted);
font-size: 0.8125rem;
margin: 1rem 0 0;
} .lbc-cta {
display: flex;
flex-direction: column;
gap: 1rem;
}
.lbc-cta__eyebrow {
color: var(--lbc-accent);
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.08em;
margin: 0 0 0.25rem;
text-transform: uppercase;
}
.lbc-cta__title {
font-size: 1.125rem;
font-weight: 700;
line-height: 1.35;
margin: 0 0 0.375rem;
}
.lbc-cta__text {
color: var(--lbc-muted);
margin: 0;
}
.lbc-cta__button {
align-items: center;
background: var(--lbc-accent);
border-radius: 999px;
color: #fff;
display: inline-flex;
font-weight: 600;
justify-content: center;
line-height: 1.2;
min-height: 48px;
padding: 0.75rem 1.75rem;
text-align: center;
text-decoration: none;
transition: background-color 140ms ease;
}
.lbc-cta__button:hover,
.lbc-cta__button:focus {
background: var(--lbc-accent-strong);
color: #fff;
text-decoration: none;
}
.lbc-cta__note {
color: var(--lbc-muted);
font-size: 0.8125rem;
margin: 0.625rem 0 0;
} .lbc-cta--inline {
border-left: 3px solid var(--lbc-accent);
padding-left: 1.125rem;
}
.lbc-cta--boxed,
.lbc-cta--end {
background: var(--lbc-accent-soft);
border: 1px solid var(--lbc-border);
border-radius: var(--lbc-radius);
padding: var(--lbc-space);
}
.lbc-cta--end {
background: var(--lbc-surface-alt);
box-shadow: var(--lbc-shadow);
}
@media (min-width: 640px) {
.lbc-cta--boxed,
.lbc-cta--end {
align-items: center;
flex-direction: row;
justify-content: space-between;
}
.lbc-cta--boxed .lbc-cta__action,
.lbc-cta--end .lbc-cta__action {
flex: 0 0 auto;
}
} .lbc-carousel__label {
color: var(--lbc-muted);
font-size: 0.875rem;
font-weight: 600;
margin: 0 0 0.625rem;
}
.lbc-carousel__frame {
position: relative;
}
.lbc-carousel__track {
display: grid;
gap: var(--lbc-gap);
grid-auto-columns: 100%;
grid-auto-flow: column;
list-style: none;
margin: 0;
overflow-x: auto;
overscroll-behavior-x: contain;
padding: 0;
scroll-snap-type: x mandatory;
scrollbar-width: thin;
-webkit-overflow-scrolling: touch;
}
.lbc-carousel--per-2 .lbc-carousel__track {
grid-auto-columns: 100%;
}
.lbc-carousel--per-3 .lbc-carousel__track {
grid-auto-columns: 100%;
}
@media (min-width: 700px) {
.lbc-carousel--per-2 .lbc-carousel__track {
grid-auto-columns: calc((100% - var(--lbc-gap)) / 2);
}
.lbc-carousel--per-3 .lbc-carousel__track {
grid-auto-columns: calc((100% - 2 * var(--lbc-gap)) / 3);
}
}
.lbc-carousel__slide {
margin: 0;
scroll-snap-align: start;
}
.lbc-carousel__figure {
margin: 0;
}
.lbc-carousel__image {
border-radius: var(--lbc-radius);
display: block;
height: auto;
width: 100%;
}
.lbc-carousel__caption {
color: var(--lbc-muted);
font-size: 0.875rem;
line-height: 1.45;
margin-top: 0.5rem;
}
.lbc-carousel__nav {
align-items: center;
background: var(--lbc-surface);
border: 1px solid var(--lbc-border);
border-radius: 50%;
box-shadow: var(--lbc-shadow);
color: var(--lbc-text);
cursor: pointer;
display: none;
height: 44px;
justify-content: center;
padding: 0;
position: absolute;
top: 50%;
transform: translateY(-50%);
transition: opacity 140ms ease;
width: 44px;
z-index: 2;
}
.lbc-carousel__nav svg {
height: 22px;
width: 22px;
}
.lbc-carousel__nav--prev {
left: 0.5rem;
}
.lbc-carousel__nav--next {
right: 0.5rem;
}
.lbc-carousel__nav:disabled {
cursor: default;
opacity: 0;
pointer-events: none;
} @media (min-width: 700px) and (pointer: fine) {
.lbc-carousel.is-enhanced .lbc-carousel__nav {
display: flex;
}
}
.lbc-carousel__dots {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
justify-content: center;
margin-top: 0.875rem;
} .lbc-carousel__dot {
background: none;
border: 0;
cursor: pointer;
display: grid;
height: 44px;
padding: 0;
place-items: center;
width: 24px;
}
.lbc-carousel__dot::before {
background: var(--lbc-border);
border-radius: 999px;
content: "";
display: block;
height: 8px;
transition: background-color 140ms ease, width 140ms ease;
width: 8px;
}
.lbc-carousel__dot.is-current::before {
background: var(--lbc-accent);
width: 22px;
} .lbc-faq__title {
font-size: clamp(1.25rem, 3.5vw, 1.5rem);
line-height: 1.25;
margin: 0 0 1rem;
}
.lbc-faq__list {
border: 1px solid var(--lbc-border);
border-radius: var(--lbc-radius);
overflow: hidden;
}
.lbc-faq__item + .lbc-faq__item {
border-top: 1px solid var(--lbc-border);
}
.lbc-faq__question {
align-items: center;
cursor: pointer;
display: flex;
font-weight: 600;
gap: 1rem;
justify-content: space-between;
line-height: 1.4;
list-style: none;
min-height: 48px;
padding: 0.875rem 1.125rem;
transition: background-color 140ms ease;
}
.lbc-faq__question::-webkit-details-marker {
display: none;
}
.lbc-faq__question:hover {
background: var(--lbc-accent-soft);
}
.lbc-faq__chevron {
border-bottom: 2px solid var(--lbc-accent);
border-right: 2px solid var(--lbc-accent);
flex: 0 0 auto;
height: 9px;
transform: rotate(45deg);
transform-origin: 70% 70%;
transition: transform 180ms ease;
width: 9px;
}
.lbc-faq__item[open] .lbc-faq__chevron {
transform: rotate(-135deg);
}
.lbc-faq__answer {
color: var(--lbc-muted);
padding: 0 1.125rem 1.125rem;
}
.lbc-faq__answer p {
margin: 0;
} @media (prefers-reduced-motion: reduce) {
.lbc-quiz *,
.lbc-cta *,
.lbc-carousel *,
.lbc-faq * {
animation: none !important;
scroll-behavior: auto !important;
transition: none !important;
}
}
@media (forced-colors: active) {
.lbc-quiz__label,
.lbc-carousel__nav,
.lbc-faq__list {
border: 1px solid CanvasText;
}
.lbc-quiz__radio:checked + .lbc-quiz__label {
outline: 2px solid Highlight;
}
} .lbc-carousel__status.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}.wpj-jtoc.--jtoc-animate .wpj-jtoc--toc{transition-property:max-height;transition-duration:var(--jtoc-transition-duration,.5s);transition-timing-function:var(--jtoc-transition-timing-function,ease)}.wpj-jtoc.--jtoc-title-align-left .wpj-jtoc--title{text-align:left}.wpj-jtoc.--jtoc-toggle-icon .wpj-jtoc--toggle-wrap{height:var(--jtoc-header-height,initial);width:var(--jtoc-header-height,initial)}.wpj-jtoc.--jtoc-toggle-position-right .wpj-jtoc--header-main{flex-direction:row}.wpj-jtoc.--jtoc-headings-full-row-clickable .wpj-jtoc--item-content:hover{cursor:pointer}