.osq {
box-sizing: border-box;
margin-inline: auto;
max-width: 720px;
}
.osq *,
.osq *::before,
.osq *::after {
box-sizing: inherit;
} .osq__heading,
.osq__intro {
text-align: center;
}
.osq__intro {
margin: 0 auto 1.75rem;
max-width: 34rem;
}
.osq__noscript {
padding: 1rem;
} .osq__stage {
position: relative;
}
.osq__stage.is-entering {
animation: osq-fade-up 0.45s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes osq-fade-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: none;
}
} .osq__progress {
height: 3px;
margin-bottom: 1.25rem;
background: currentColor;
opacity: 0.15;
overflow: hidden;
}
.osq__progress-bar {
display: block;
height: 100%;
background: currentColor;
opacity: 1;
transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.osq__step {
margin: 0 0 0.4rem;
} .osq__question {
margin: 0 0 0.35rem;
text-wrap: balance;
}
.osq__question-sub {
margin: 0 0 1.25rem;
opacity: 0.8;
}
.osq__answers {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.6rem;
}
.osq__answers-item {
margin: 0;
} .osq__answer {
display: flex;
gap: 0.75rem;
align-items: flex-start;
width: 100%;
margin: 0;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
-webkit-appearance: none;
appearance: none;
transition: transform 0.18s ease, box-shadow 0.18s ease;
-webkit-tap-highlight-color: transparent;
}
.osq__answer:hover {
transform: translateY(-1px);
}
.osq__answer:focus-visible {
outline: 3px solid currentColor;
outline-offset: 2px;
}
.osq__answer:active,
.osq__answer.is-chosen {
transform: scale(0.985);
}
.osq__answer-mark {
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
margin-top: 0.3rem;
border: 2px solid currentColor;
border-radius: 50%;
opacity: 0.55;
transition: opacity 0.18s ease, background-color 0.18s ease;
}
.osq__answer.is-chosen .osq__answer-mark {
background: currentColor;
opacity: 1;
}
.osq__answer-text {
flex: 1 1 auto;
overflow-wrap: anywhere;
}
.osq__back,
.osq__reset {
display: inline-flex;
align-items: center;
min-height: 44px;
margin: 0;
border: 0;
background: none;
color: inherit;
font: inherit;
font-size: 0.9rem;
cursor: pointer;
opacity: 0.75;
-webkit-appearance: none;
appearance: none;
}
.osq__back {
margin-top: 0.8rem;
padding: 0.5rem 0.6rem 0.5rem 0;
}
.osq__reset {
justify-content: center;
margin: 1.2rem auto 0;
padding: 0.5rem 0.9rem;
text-decoration: underline;
text-underline-offset: 3px;
}
.osq__back:hover,
.osq__reset:hover,
.osq__back:focus-visible,
.osq__reset:focus-visible {
opacity: 1;
} .osq__loading {
padding: 2.5rem 0.5rem;
text-align: center;
}
.osq__loading-title,
.osq__loading-sub {
margin-inline: auto;
}
.osq__orb {
position: relative;
width: 84px;
height: 84px;
margin: 0 auto 1.5rem;
}
.osq__orb span {
position: absolute;
inset: 0;
border: 2px solid transparent;
border-top-color: currentColor;
border-radius: 50%;
animation: osq-spin 1.6s linear infinite;
}
.osq__orb span:nth-child(2) {
inset: 12px;
opacity: 0.6;
animation-duration: 2.3s;
animation-direction: reverse;
}
.osq__orb span:nth-child(3) {
inset: 24px;
opacity: 0.35;
animation-duration: 3s;
}
@keyframes osq-spin {
to {
transform: rotate(360deg);
}
}
.osq__loading-title {
margin: 0 0 0.4rem;
}
.osq__loading-sub {
margin: 0 auto;
max-width: 26rem;
opacity: 0.8;
} .osq__result {
text-align: center;
}
.osq__result-eyebrow,
.osq__result-title,
.osq__result-intro {
margin-inline: auto;
text-align: center;
} .osq__roadmap,
.osq__card {
text-align: left;
}
.osq__result-eyebrow {
margin: 0 0 0.25rem;
}
.osq__result-title {
margin: 0 0 0.4rem;
}
.osq__result-intro {
margin: 0 auto 1.75rem;
max-width: 34rem;
opacity: 0.85;
text-wrap: pretty;
}
.osq__roadmap {
margin: 0;
padding: 0;
list-style: none;
display: grid;
gap: 0.9rem;
} .osq__card {
display: flex;
gap: 0.85rem;
animation: osq-card-in 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
animation-delay: var(--osq-delay, 0ms);
}
@keyframes osq-card-in {
from {
opacity: 0;
transform: translateY(14px);
}
to {
opacity: 1;
transform: none;
}
}
.osq__card-rail {
flex: 0 0 auto;
display: flex;
justify-content: center;
width: 2.4rem;
} .osq {
--osq-dot-bg: #091A3E;
--osq-dot-fg: #ffffff;
--osq-dot-bg-gold: #FCB903;
--osq-dot-fg-gold: #091A3E;
}
.osq__card-dot {
display: flex;
align-items: center;
justify-content: center;
width: 2.4rem;
height: 2.4rem;
border: 0;
border-radius: 50%;
background: var(--osq-dot-bg);
color: var(--osq-dot-fg);
font-size: 1.05rem;
font-weight: 700;
line-height: 1;
font-variant-numeric: tabular-nums;
} .osq__card--mid .osq__card-dot,
.osq__card--premium .osq__card-dot {
background: var(--osq-dot-bg-gold);
color: var(--osq-dot-fg-gold);
}
.osq__card-body {
flex: 1 1 auto;
min-width: 0;
}
.osq__card-step {
margin: 0 0 0.3rem;
}
.osq__card-head {
display: flex;
flex-wrap: wrap;
gap: 0.3rem 0.75rem;
align-items: baseline;
justify-content: space-between;
}
.osq__card-title {
margin: 0;
overflow-wrap: anywhere;
}
.osq__card-price {
flex: 0 0 auto;
font-weight: 700;
white-space: nowrap;
}
.osq__card-badge {
display: inline-block;
margin-top: 0.45rem;
padding: 0.15rem 0.6rem;
border: 1px solid currentColor;
font-size: 0.8rem;
font-weight: 600;
opacity: 0.75;
}
.osq__card-teaser {
margin: 0.5rem 0 0.9rem;
overflow-wrap: anywhere;
} .osq__card-cta,
.osq__form-actions {
margin-top: 0.25rem;
}
.osq__card-cta .wp-block-button,
.osq__form-actions .wp-block-button {
margin: 0;
} .osq__optin {
margin-top: 1.75rem;
padding-top: 1.5rem;
border-top: 1px solid currentColor;
border-color: color-mix(in srgb, currentColor 20%, transparent);
text-align: center;
}
.osq__optin-title {
margin: 0 0 0.25rem;
}
.osq__optin-text {
margin: 0 0 1rem;
opacity: 0.85;
}
.osq__form {
display: grid;
gap: 0.7rem;
max-width: 500px;
margin: 0 auto;
text-align: left;
}
.osq__honeypot {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.osq__field {
display: grid;
gap: 0.25rem;
}
.osq__field-label {
font-size: 0.85rem;
font-weight: 600;
opacity: 0.8;
} .osq__field input {
width: 100%;
padding: 12px;
border: 1px solid #979797;
border-radius: 6px;
background: #fff;
color: #000;
font-family: inherit;
font-size: 16px; }
.osq__field input:focus-visible {
outline: 2px solid currentColor;
outline-offset: 1px;
}
.osq__consent {
display: flex;
gap: 8px;
align-items: flex-start;
min-height: 44px;
padding: 0.35rem 0;
font-size: 12px;
line-height: 1.5;
cursor: pointer;
}
.osq__consent input {
flex: 0 0 auto;
width: 1.15rem;
height: 1.15rem;
margin-top: 3px;
}
.osq__consent a {
color: inherit;
text-decoration: underline;
}
.osq__form .osq__optin-cta {
width: 100%;
border: 0;
cursor: pointer;
font: inherit;
}
.osq__form .osq__optin-cta:disabled {
cursor: default;
opacity: 0.5;
}
.osq__form-msg {
margin: 0;
min-height: 1.2em;
font-size: 0.9rem;
text-align: center;
}
.osq__form-msg.is-error {
color: #a1332f;
}
.osq__form-msg.is-success {
font-weight: 700;
} @media (prefers-reduced-motion: reduce) {
.osq *,
.osq *::before,
.osq *::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
} .osq-editor-placeholder {
padding: 1.5rem;
border: 1px dashed rgba(0, 0, 0, 0.25);
text-align: center;
}
.osq-editor-placeholder p {
margin: 0.4rem 0 0;
font-size: 0.9rem;
opacity: 0.75;
}
.osq-editor-placeholder__hint {
font-size: 0.8rem !important;
}