/* ========================================
   ACCESSIBILITY & MOTION PREFERENCES
   ======================================== */
@media (prefers-reduced-motion: reduce) {
    .suboxone-quiz *,
    .suboxone-quiz *::before,
    .suboxone-quiz *::after {
        animation: none !important;
        transition-duration: 0.05s !important;
    }
}

/* ========================================
   QUIZ-SCOPED VARIABLES
   ======================================== */
.suboxone-quiz {
    --primary-color: var(--color-action);
    --primary-dark: hsl(186 100% 28%);
    --primary-light: hsl(186 100% 43%);
    --action-10: oklch(0.62 0.11 200 / 0.1);
    --action-20: oklch(0.62 0.11 200 / 0.2);
    --action-30: oklch(0.62 0.11 200 / 0.3);
    --secondary-color: #10b981;
    --error-color: #ef4444;
    --text-primary: #1f2937;
    --text-secondary: #6b7280;
    --bg-primary: #ffffff;
    --bg-secondary: #f9fafb;
    --bg-info: #F5FAFD;
    --border-color: #e5e7eb;
    --pricing-border-color: #CDEBF1;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --transition: all 0.3s ease;
}

/* ========================================
   RESET & BASE STYLES
   ======================================== */
.suboxone-quiz * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.suboxone-quiz {
    font-family: "Outfit", BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    background: var(--color-base);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0;
    color: var(--text-primary);
    line-height: 1.6;
    transition: none;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
}

/* ========================================
   WELCOME SCREEN TRIANGLE ACCENTS
   ======================================== */
.suboxone-quiz .welcome-hero-triangle-accent-bottom {
    position: absolute;
    bottom: 0;
    left: -2%;
    z-index: 1;
    pointer-events: none;
    transition: transform 0.5s ease-in-out;
    transform: translateY(60%);
}

.suboxone-quiz .welcome-hero-triangle-accent-bottom img {
    width: 633px;
    height: auto;
}

.suboxone-quiz.expanded .welcome-hero-triangle-accent-bottom {
    transform: translateY(45%);
}

.suboxone-quiz.quiz-started .welcome-hero-triangle-accent-bottom {
    transform: translateY(100%);
}

.suboxone-quiz .welcome-hero-triangle-accent-top {
    position: absolute;
    top: -124px;
    right: 82px;
    z-index: 1;
    pointer-events: none;
    transition: top 0.5s ease-in-out;
}

/* Expanded: triangles wrapper repositions per Figma 40008433:6291 — wrapper
   aligns to banner top instead of being vertically centered, shifting the
   top-right triangle down 76.56px (-123.68 → -47.12). Animates via the
   existing transition on .welcome-hero-triangle-accent-top. */
.suboxone-quiz.expanded .welcome-hero-triangle-accent-top {
    top: -47.12px;
}

.suboxone-quiz .welcome-hero-triangle-accent-top img {
    width: 216px;
    height: auto;
}

.suboxone-quiz.quiz-started .welcome-hero-triangle-accent-top {
    top: -15rem;
}

/* ========================================
   BACKGROUND TRANSITIONS
   ======================================== */
.suboxone-quiz.background-transition {
    background: white !important;
    transition: background 0.3s ease-in-out;
}

.suboxone-quiz.questions.background-transition {
    background: white !important;
    background-image: var(--quiz-triangle-bg) !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

.suboxone-quiz.showing-qualified.background-transition {
    background: var(--color-base) !important;
}

.suboxone-quiz.background-transition-to-welcome {
    background: var(--color-base) !important;
    transition: background 0.3s ease-in-out;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */
@media (min-width: 768px) {
    .suboxone-quiz {
        min-height: 500px;
    }

    .suboxone-quiz.questions {
        max-height: none;
    }

}

@media (min-width: 2000px) {
    .suboxone-quiz {
        min-height: 500px;
    }
}

.suboxone-quiz.questions {
    background: white;
    background-image: var(--quiz-triangle-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

@media (max-width: 767px) {
    .suboxone-quiz.questions {
        background-image: none;
        padding: 30px 0 30px 0;
        overflow: visible;
    }

    .suboxone-quiz.questions .welcome-hero-triangle-accent-bottom,
    .suboxone-quiz.questions .welcome-hero-triangle-accent-top {
        display: none;
    }

    .suboxone-quiz .container.questions {
        margin: 0 auto;
    }

    .suboxone-quiz.showing-qualified .container {
        max-height: 85vh;
        overflow-y: auto;
        scroll-behavior: smooth;
    }

    .suboxone-quiz #comparison .screen-content {
        padding: 0;
    }

    .suboxone-quiz .comparison-column {
        padding: 0;
    }

    .suboxone-quiz #comparison .pricing-item {
        padding: .8rem;
    }

    .suboxone-quiz #comparison .pricing-item-price {
        font-size: 0.8rem;
    }

    .suboxone-quiz #comparison .pricing-item-type {
        font-size: calc(0.875rem * .8);
    }

    .suboxone-quiz #comparison h2 {
        font-size: 1.5rem;
        font-weight: 700;
        padding-top: 2.5rem;
    }

    .suboxone-quiz.showing-comparison .back-arrow {
        top: 6px !important;
        left: -8px;
    }

    .suboxone-quiz #qualified .info-box {
        font-size: 0.875rem;
    }

    .suboxone-quiz .comparison-info-box {
        padding: 1rem;
    }

    .suboxone-quiz .pricing-feature {
        font-size: 0.8rem;
    }

    .suboxone-quiz .welcome-hero-triangle-accent-bottom img {
        width: 245px;
    }

    .suboxone-quiz .qualified-layout {
        display: flex !important;
        flex-direction: column !important;
        padding-top: 1.5rem !important;
    }

    .suboxone-quiz .qualified-left {
        text-align: center !important;
    }

    .suboxone-quiz #qualified-title {
        text-align: left !important;
    }

    .suboxone-quiz .qualified-right > h2 {
        text-align: left !important;
    }

    .suboxone-quiz .pricing-card {
        padding: 1rem !important;
    }

    .suboxone-quiz .pricing-product {
        flex-direction: column !important;
    }

    .suboxone-quiz .product-image-wrapper {
        width: 100%;
    }

    .suboxone-quiz .product-image-img {
        width: 12rem !important;
        height: auto !important;
    }

    .suboxone-quiz .pricing-amount-container {
        flex-direction: column;
        text-align: left !important;
        align-items: flex-start !important;
    }

    .suboxone-quiz .product-details {
        gap: 1rem !important;
        display: flex;
        flex-direction: column;
    }

    .suboxone-quiz .pricing-features {
        display: flex;
        flex-direction: column;
        gap: 1rem;
    }

    .suboxone-quiz .qualified-left .info-box {
        flex-direction: column;
        gap: 1rem !important;
        padding: 1rem !important;
    }

    .suboxone-quiz #qualified .chat-icon {
        width: 30px;
        height: 30px;
    }

    .suboxone-quiz .screen-content {
        padding-block: 2.5rem;
        padding-inline: 1rem !important;
        display: flex;
        flex-direction: column;
        gap: 2rem;
        text-align: center;
    }

    .suboxone-quiz .welcome-hero-triangle-accent-bottom {
        transform: translateY(40%);
    }
}

/* ========================================
   LAYOUT & CONTAINERS
   ======================================== */
.suboxone-quiz .container {
    background: transparent;
    border-radius: 12px;
    position: relative;
    z-index: 10;
}

.suboxone-quiz .container.questions {
    background: white;
    box-shadow: 3px 3px 26.3px 0 rgba(0, 0, 0, 0.09);
    min-height: 500px;
    display: flex;
    flex-direction: column;
}

.suboxone-quiz .screen {
    display: none;
}

.suboxone-quiz .screen.active {
    display: block;
    animation: quizFadeInUp 0.3s ease;
}

.suboxone-quiz #welcome.active {
    animation: none;
}

.suboxone-quiz .screen-content {
    padding-block: 2.5rem;
    padding-inline: 2.5rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    text-align: center;
}

/* ========================================
   ANIMATIONS & KEYFRAMES
   ======================================== */
@keyframes quizFadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes quizFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ========================================
   WELCOME SCREEN STYLES
   ======================================== */
/* White text for welcome's main copy. Narrowed from the original
   `#welcome p` rule so the welcome-time can keep its --color-base-20
   per Figma without an !important fight. */
.suboxone-quiz #welcome h1,
.suboxone-quiz #welcome .welcome-title,
.suboxone-quiz #welcome .welcome-description {
    color: white !important;
}

.suboxone-quiz .welcome-description {
    color: white;
    text-align: center;
    margin: 0 auto;
    font-size: var(--text-body-l);
    line-height: 1.2;
    max-width: 30ch;
    text-wrap: balance;
}

.suboxone-quiz .question-title {
    text-align: left;
    margin-top: 1.5rem;
}

.suboxone-quiz .question-title h2 {
    font-size: clamp(1.4375rem, 1.25rem + 0.76vw, 1.9375rem);
}

/* ========================================
   TYPOGRAPHY & TEXT STYLES
   ======================================== */
/* Tightly groups heading + description per Figma 40008433:6291 — gap-20
   keeps them visually as one unit, with the gap-49 below (to cta-block)
   framing them as the screen's hero copy. The logo lives in .quiz-header
   above (absolute-positioned), so the gap-30 between logo and heading is
   created by the welcome screen-content's padding-top, not a flex gap. */
.suboxone-quiz .welcome-title-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
}

/* Pairs the "Takes about 1 minute" time row with the Get Started button
   per Figma 40008433:6303 — gap-20 ties them as the action unit. */
.suboxone-quiz .welcome-cta-block {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
}

.suboxone-quiz .welcome-title {
    font-size: var(--text-h1, clamp(2.23125rem, calc(2.07665rem + 0.65963vw), 2.7rem));
    line-height: var(--text-h1--line-height, clamp(2.46875rem, calc(2.21108rem + 1.0994vw), 3.25rem));
    font-weight: 700;
    margin-bottom: 0;
    color: white !important;
    text-align: center;
    z-index: 10;
}

.suboxone-quiz h2 {
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--text-primary);
}

.suboxone-quiz h3 {
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.suboxone-quiz .subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 24px;
}

.suboxone-quiz .body-text {
    color: var(--color-base);
    margin-bottom: 32px;
}

/* ========================================
   ICONS & VISUAL ELEMENTS
   ======================================== */
.suboxone-quiz .icon {
    width: 64px;
    height: 64px;
    margin: 0 auto 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
}

.suboxone-quiz .icon.clock {
    background: var(--bg-info);
    border-radius: 50%;
    color: var(--color-action);
}

.suboxone-quiz #welcome .icon.clock {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

.suboxone-quiz .icon.success {
    background: var(--secondary-color);
    border-radius: 50%;
    color: white;
}

.suboxone-quiz .icon.home {
    color: var(--color-action);
}

/* ========================================
   TIME INDICATOR & STATUS ELEMENTS
   ======================================== */
.suboxone-quiz .time-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 24px;
    background: var(--bg-info);
    border-radius: 8px;
    color: var(--color-action);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 32px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.suboxone-quiz #welcome .time-indicator {
    background: rgba(255, 255, 255, 0.15);
    color: white;
}

/* ========================================
   OPTIONS & INTERACTIVE ELEMENTS
   ======================================== */
.suboxone-quiz .options {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 32px;
}

.suboxone-quiz .option {
    padding: 16px 20px;
    border: 1px solid var(--border-color);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 15px;
    text-align: center;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-weight: 500;
    font-family: "Outfit", BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    position: relative;
    overflow: hidden;
}

.suboxone-quiz .option::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: #4FC7EA;
    transition: width 0.3s ease;
    z-index: 0;
    -webkit-mask-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 71"><path d="M43.7332 22.8077C53.4266 28.4089 53.4266 42.4118 43.7332 48.013L7.67362 68.8493C-2.01981 74.4505 -14.1366 67.449 -14.1366 56.2467L-14.1366 14.574C-14.1366 3.37163 -2.01981 -3.62983 7.67363 1.97134L43.7332 22.8077Z" fill="black"/></svg>'),
        linear-gradient(to right, black, black);
    mask-image:
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 71"><path d="M43.7332 22.8077C53.4266 28.4089 53.4266 42.4118 43.7332 48.013L7.67362 68.8493C-2.01981 74.4505 -14.1366 67.449 -14.1366 56.2467L-14.1366 14.574C-14.1366 3.37163 -2.01981 -3.62983 7.67363 1.97134L43.7332 22.8077Z" fill="black"/></svg>'),
        linear-gradient(to right, black, black);
    -webkit-mask-size: 52px 100%, calc(100% - 45px) 100%;
    mask-size: 52px 100%, calc(100% - 45px) 100%;
    -webkit-mask-position: right center, left center;
    mask-position: right center, left center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.suboxone-quiz .option span {
    position: relative;
    z-index: 1;
    display: block;
}

.suboxone-quiz .option:hover {
    border-color: #ABB2B8;
    background: #CDEAF0;
}

.suboxone-quiz .option:active {
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.suboxone-quiz .option.animating {
    border: 1px solid transparent;
    pointer-events: none;
    outline: none !important;
    background: var(--bg-primary) !important;
}

.suboxone-quiz .option.animating:hover {
    background: var(--bg-primary) !important;
    border-color: transparent !important;
}

.suboxone-quiz .option.animating:focus {
    outline: none !important;
    border: 1px solid transparent;
}

.suboxone-quiz .option.animating::before {
    width: 100%;
}

.suboxone-quiz .option.animating span {
    color: #253746;
}

.suboxone-quiz .option.complete {
    border: 1px solid transparent;
    pointer-events: none;
    outline: none !important;
    background: var(--bg-primary) !important;
}

.suboxone-quiz .option.complete:hover {
    background: var(--bg-primary) !important;
    border-color: transparent !important;
}

.suboxone-quiz .option.complete:focus {
    outline: none !important;
    border: 1px solid transparent;
}

.suboxone-quiz .option.complete::before {
    width: 100%;
}

.suboxone-quiz .option.complete span {
    color: #253746;
}

/* ========================================
   BUTTONS & INTERACTIVE COMPONENTS
   ======================================== */
/* Welcome's Get Started button per Figma:
   - desktop 40008420:45987: bg Lagoon, text Deep Navy, Outfit Bold 21.6/25.9,
     px-30 py-13, rounded-44.973 (effectively full pill)
   - mobile 40008433:17851: same color/weight, text 16.2/21.4, px-24 py-10,
     rounded-28.875 (also full pill)
   Other quiz screens (qualified, comparison, notqualified, newpatient) keep
   the existing styling via their own #screen-id overrides — this rule is
   intentionally not !important so those scoped rules can layer on top. */
.suboxone-quiz .btn-primary {
    background: var(--color-action-accent);
    color: var(--color-base);
    padding: 10px 24px;
    line-height: 1.32;
    font-family: inherit;
    font-size: var(--text-body-m);
    font-weight: 700;
    font-style: normal;
    text-transform: none;
    letter-spacing: 0;
    text-decoration: none;
    border: none;
    border-radius: 9999px;
    justify-content: center;
    text-align: center;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    margin: 0 auto;
}

@media (min-width: 768px) {
    .suboxone-quiz #welcome .btn-primary {
        padding: 13px 30px;
        font-size: var(--text-h6);
        line-height: 1.2;
    }
}

.suboxone-quiz .btn-secondary {
    width: 100%;
    padding: 16px 24px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 12px;
}

.suboxone-quiz .btn-secondary:hover {
    background: var(--border-color);
}

/* ========================================
   ACCESSIBILITY & FOCUS STYLES
   ======================================== */
.suboxone-quiz .option:focus {
    outline: 3px solid var(--color-action);
    outline-offset: 2px;
    border-color: var(--color-action);
}

.suboxone-quiz .option:focus:not(:focus-visible) {
    outline: none;
}

.suboxone-quiz .option:focus-visible {
    outline: 3px solid var(--color-action);
    outline-offset: 2px;
}

.suboxone-quiz .btn-primary:focus-visible,
.suboxone-quiz .text-link:focus-visible,
.suboxone-quiz .restart-link:focus-visible {
    outline: 3px solid var(--color-action);
    outline-offset: 2px;
}

.suboxone-quiz .back-arrow:focus-visible {
    outline: 3px solid var(--color-action);
    outline-offset: 2px;
    border-radius: 4px;
}

/* ========================================
   INFO BOXES & CONTENT SECTIONS
   ======================================== */
.suboxone-quiz .info-box {
    background: var(--action-10);
    border-left: 4px solid var(--color-action);
    padding: 1rem;
    border-radius: 8px;
    margin: 24px 0;
}

.suboxone-quiz .info-box.no-border {
    background: var(--bg-info);
    border-left: none;
}

.suboxone-quiz .info-box p {
    color: var(--text-secondary);
    font-size: 15px;
}

/* ========================================
   PRICING & CALL-TO-ACTION COMPONENTS
   ======================================== */
.suboxone-quiz .pricing-callout {
    background: linear-gradient(135deg, var(--color-action) 0%, hsl(186 100% 28%) 100%);
    color: white;
    padding: 28px;
    border-radius: 12px;
    margin: 24px 0;
    box-shadow: var(--shadow-lg);
}

.suboxone-quiz .pricing-callout h3 {
    color: white;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 16px;
    opacity: 0.9;
}

.suboxone-quiz .pricing-details {
    background: rgba(255, 255, 255, 0.15);
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 16px;
}

.suboxone-quiz .pricing-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.suboxone-quiz .pricing-description {
    font-size: 15px;
    font-weight: 500;
}

/* ========================================
   QUALIFIED SCREEN LAYOUT
   ======================================== */
.suboxone-quiz .qualified-layout {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.suboxone-quiz .qualified-left {
    text-align: left;
}

.suboxone-quiz .qualified-left h2 {
    color: white;
    text-align: left;
}

.suboxone-quiz .qualified-left p {
    color: white;
    text-align: left;
}

.suboxone-quiz .qualified-right {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.suboxone-quiz .qualified-right h2 {
    color: white;
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 0;
    text-align: left;
}

.suboxone-quiz #qualified .btn-primary {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 2rem;
    background: #0097A9;
    color: white;
    border-color: #0097A9;
}

.suboxone-quiz #comparison .btn-primary {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    background: #0097A9;
    color: white;
    border-color: #0097A9;
}

.suboxone-quiz #notqualified .btn-primary {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    margin-top: 0;
    margin-bottom: 0;
    background: #0097A9;
    color: white;
    border-color: #0097A9;
}

.suboxone-quiz #newpatient .btn-primary,
    .suboxone-quiz #notqualified .btn-primary {
    background: #0097A9;
    color: white;
    border-color: #0097A9;
}

.suboxone-quiz .notqualified-content-wrapper {
    max-width: 48rem;
    display: flex;
    flex-direction: column;
    gap: 2rem;
    justify-content: center;
    align-items: center;
}

.suboxone-quiz .notqualified-content-wrapper h2 {
    font-size: 3rem;
    max-width: 18ch;
    text-align: center;
    margin-top: 0;
    margin-bottom: 0;
}

.suboxone-quiz .notqualified-content-wrapper .result-subheadline {
    font-size: 1.125rem;
    color: unset;
    margin-top: 0;
    margin-bottom: 0;
}

.suboxone-quiz .notqualified-content-wrapper .info-box {
    margin-top: 0;
    margin-bottom: 0;
    background: rgba(205, 234, 240, 0.2);
}

.suboxone-quiz .notqualified-content-wrapper .info-box p {
    text-align: left !important;
    color: unset;
    font-size: 1rem;
}

.suboxone-quiz .notqualified-content-wrapper .restart-link {
    margin-top: 0;
    margin-bottom: 0;
}

/* ========================================
   SCREEN-SPECIFIC BACKGROUNDS
   ======================================== */
.suboxone-quiz.showing-qualified {
    background: var(--color-base);
}

.suboxone-quiz.showing-qualified .container {
    background: transparent;
    box-shadow: none;
}

.suboxone-quiz.showing-comparison {
    background: white;
}

.suboxone-quiz.showing-comparison .container {
    background: white;
}

.suboxone-quiz.showing-notqualified {
    background: white;
}

.suboxone-quiz.showing-notqualified .container {
    background: white;
    box-shadow: none;
}

/* ========================================
   PRICING CARD COMPONENTS
   ======================================== */
.suboxone-quiz .pricing-card {
    background: white;
    border-radius: 12px;
    padding: 2.5rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    display: flex;
    flex-direction: column;
    gap: 2rem;
    margin-top: auto;
    flex-grow: 1;
}

.suboxone-quiz .pricing-product {
    display: flex;
    gap: 1rem;
}

.suboxone-quiz .product-image {
    flex-shrink: 0;
}

.suboxone-quiz .product-image-wrapper {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    padding: 0.5rem;
}

.suboxone-quiz .product-image-img {
    width: 7rem;
    height: 7rem;
    object-fit: contain;
}

.suboxone-quiz .product-details {
    flex: 1;
}

.suboxone-quiz .pricing-description {
    font-size: 1rem;
    color: #333;
    margin-bottom: 0.75rem;
    text-align: left;
}

.suboxone-quiz .pricing-amount {
    font-size: 1.875rem;
    font-weight: 700;
    color: #333;
    line-height: 1;
}

.suboxone-quiz .pricing-amount-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    position: relative;
    margin-top: auto;
}

.suboxone-quiz .pricing-amount-container::before {
    content: '';
    position: absolute;
    top: calc(2rem / -2);
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e5e7eb;
}

.suboxone-quiz .chat-icon {
    color: #666;
    flex-shrink: 0;
    margin-block: auto;
}

.suboxone-quiz .qualified-left .result-subheadline {
    font-size: 1.125rem;
}

.suboxone-quiz .qualified-left .info-box {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    background: #CDEAF0;
    padding: 1.5rem;
    border-radius: 0.75rem;
    border-left: none;
    margin-bottom: 0;
    margin-top: auto;
}

.suboxone-quiz .qualified-left .info-box p {
    margin: 0;
    color: #333;
    font-size: 1rem;
}

.suboxone-quiz .pricing-features {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.suboxone-quiz .pricing-features-comparison {
    display: flex;
    flex-direction: row;
    gap: 8px;
}

.suboxone-quiz .pricing-feature {
    display: flex;
    align-items: center;
    gap: 4px;
    text-align: left;
    line-height: 1;
}

.suboxone-quiz .pricing-feature svg {
    min-width: 16px;
    min-height: 16px;
    flex-shrink: 0;
}

.suboxone-quiz .pricing-features svg circle {
    fill: var(--color-base) !important;
}

.suboxone-quiz .pricing-features-comparison svg circle {
    fill: var(--color-action) !important;
}

/* Shrink the checkmark path on the COMPARISON screen only so the
 * tick reads as more inset (more whitespace around it) without
 * changing the circle wrapper's size. transform-box: fill-box anchors
 * the scale origin to the path's own bounding box, so scaling 0.6
 * shrinks from the path center, not the SVG canvas origin.
 *
 * The qualified screen's checkmarks (.pricing-features) intentionally
 * stay at their default size — only .pricing-features-comparison
 * gets the smaller tick. */
.suboxone-quiz .pricing-features-comparison svg path {
    transform: scale(0.6);
    transform-origin: center;
    transform-box: fill-box;
}

.suboxone-quiz .comparison-info-box {
    background: var(--bg-info);
    padding: 1.5rem;
    border-radius: 8px;
}

.suboxone-quiz .comparison-info-box p {
    margin: 0;
    text-align: left;
}

.suboxone-quiz .comparison-info-box p:not(:first-child) {
    margin-top: 16px;
}

.suboxone-quiz .comparison-additional-info {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.suboxone-quiz .comparison-additional-info svg {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
}

/* Sizing (font-size + line-height) comes from the global `text-disclaimer`
   utility on the markup. Only properties the utility doesn't cover stay
   here. */
.suboxone-quiz .comparison-additional-text {
    margin: 0;
    text-align: left;
}

.suboxone-quiz .home-delivery-quiz-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

/* ========================================
   TEXT LINKS & NAVIGATION
   ======================================== */
.suboxone-quiz .text-link {
    color: #838D96;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s ease;
}

.suboxone-quiz .text-link:hover {
    color: #6a7580;
    text-decoration: underline;
}

.suboxone-quiz .restart-link {
    color: #838D96;
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-decoration: none;
    margin-top: 16px;
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
}

.suboxone-quiz .navigation {
    display: flex;
    gap: 12px;
    margin-top: 24px;
}

/* ========================================
   COMPARISON GRID LAYOUT
   ======================================== */
.suboxone-quiz .comparison-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}

@media (max-width: 768px) {
    .suboxone-quiz .comparison-grid {
        grid-template-columns: 1fr;
    }
}

.suboxone-quiz .comparison-column {
    padding-block: 2.5rem;
    padding-inline: 1rem;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.suboxone-quiz .comparison-column h3 {
    font-size: 1.25rem;
    text-align: left;
}

/* ========================================
   PRICING ITEMS & FEATURES
   ======================================== */
.suboxone-quiz .pricing-items-wrapper {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.suboxone-quiz .pricing-item {
    padding: 16px;
    background: var(--bg-primary);
    border-radius: 8px;
    border: 2px solid var(--pricing-border-color);
}

.suboxone-quiz .pricing-item-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.suboxone-quiz .pricing-item-type {
    color: var(--text-primary);
}

.suboxone-quiz .pricing-item-price {
    font-size: 20px;
    font-weight: 700;
}

.suboxone-quiz .pricing-item-features {
    font-size: 13px;
    color: var(--text-secondary);
}

/* ========================================
   EXPAND BUTTON & WELCOME SCREEN STATES
   ======================================== */
.suboxone-quiz .expand-button {
    display: none;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-top: 0;
    cursor: pointer;
    transition: var(--transition);
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
}

@media (min-width: 768px) {
    .suboxone-quiz .expand-button {
        display: flex;
        opacity: 1;
        transition: opacity 0.3s ease;
    }

    /* Collapsed: hide the welcome-description (inside title-block) and the
       cta-block (time + button). The expand-button shows in their place. */
    .suboxone-quiz:not(.expanded) #welcome .welcome-description,
    .suboxone-quiz:not(.expanded) #welcome .welcome-cta-block {
        display: none;
    }

    .suboxone-quiz.expanded .expand-button {
        opacity: 0;
        pointer-events: none;
    }
}

.suboxone-quiz .expand-button-text {
    color: white !important;
    font-size: var(--text-body-l);
    line-height: 1.2;
    font-weight: 300;
}

.suboxone-quiz .expand-button:hover .expand-button-text {
    opacity: 0.9;
}

.suboxone-quiz .expand-button.hidden {
    display: none !important;
}

/* Time row: clock icon + "Takes about 1 minute".
   Mobile uses 13.2 flat (= Figma "Mobile S Body" / --text-body-s value) and
   16×18 icon per Figma 40008433:17756. md+ uses body-m (16.2 → 18 ramp) and
   19×21.17 icon per Figma 40008433:6304.
   Color tokens out to --color-base-20 (#D4D9DD) so the SVG currentColor + the
   text both pick it up.
   Note: font-size uses the raw 0.825rem instead of var(--text-body-s) because
   TailwindPHP's JIT only emits typography tokens when a matching text-X
   utility class appears on the page (same gotcha as --color-* tokens — see
   feedback_tailwindphp_jit_color_tokens.md in memory). No text-body-s
   utility runs on this page, so the var would resolve to empty. */
.suboxone-quiz .welcome-time {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 0;
    color: var(--color-base-20);
    font-size: 0.825rem;
    line-height: 1.32;
}

.suboxone-quiz .welcome-time svg {
    width: 16px;
    height: 18px;
}

@media (min-width: 768px) {
    .suboxone-quiz .welcome-time {
        gap: 10px;
        font-size: var(--text-body-m);
        line-height: 1.28;
    }

    .suboxone-quiz .welcome-time svg {
        width: 19px;
        height: 21.17px;
    }
}

/* ========================================
   BACK ARROW & NAVIGATION ELEMENTS
   ======================================== */
/* One logo for the whole quiz, anchored absolute. Its top position changes
   with state so the logo APPEARS to live inside the welcome content column
   (matching Figma 40008433:6291) but slides up to the screen-edge anchor
   (2.5rem) once the quiz starts. The `transition: top` makes the slide
   smooth — eliminating the 200px y-jump that caused the flicker between
   the old in-flow welcome-logo and the absolute header-logo. */
.suboxone-quiz .quiz-header {
    position: absolute;
    top: var(--space-section); /* welcome state — 75 mobile / 120 @ 1512 / 150 @ 1728 */
    left: 1rem;
    right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    transition: top 0.4s ease-in-out;
}

.suboxone-quiz.quiz-started .quiz-header {
    top: 2.5rem;
}

.suboxone-quiz .back-arrow {
    position: absolute;
    left: 1.5rem;
    cursor: pointer;
    transition: top 0.3s ease;
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
}

@media (max-width: 767px) {
    .suboxone-quiz .back-arrow {
        left: 0;
    }
}

.suboxone-quiz .back-arrow:hover path {
    stroke: var(--text-primary);
}

.suboxone-quiz.showing-comparison .back-arrow {
    top: calc(2.5rem + 27px);
}

.suboxone-quiz .quiz-logo {
    display: flex;
    align-items: center;
    justify-content: center;
}

.suboxone-quiz .quiz-logo img {
    height: 40.88px;
    width: auto;
    border-radius: 0;
}

.suboxone-quiz.showing-qualified .quiz-logo,
.suboxone-quiz.showing-comparison .quiz-logo,
.suboxone-quiz.showing-notqualified .quiz-logo {
    display: none;
}

.suboxone-quiz .screen-content {
    padding-top: calc(2.5rem + 60px);
}

/* Welcome screen content sits below the absolute .quiz-header logo.
   Padding-top = logo y (--space-section) + logo height (40.88) + Figma's
   logo→heading gap (30) so the heading lands at the same visual position
   the old in-flow .welcome-logo gave us. Bottom padding stays at the
   --space-section token. */
.suboxone-quiz #welcome .screen-content {
    padding-top: calc(var(--space-section) + 70.88px);
    padding-bottom: var(--space-section);
    gap: 49px;
}

/* ========================================
   RESULT SCREEN STYLES
   ======================================== */
.suboxone-quiz .result-subheadline {
    font-size: 18px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 24px;
}

/* ========================================
   FINAL RESPONSIVE ADJUSTMENTS
   ======================================== */
@media (min-width: 768px) {
    .suboxone-quiz .container.questions {
        width: 90%;
        margin-block: 1.5rem;
    }
}

/* ========================================
   MOBILE WELCOME SCREEN OVERRIDES
   ======================================== */
@media (max-width: 767px) {
    .suboxone-quiz {
        min-height: 85vh;
    }

    .suboxone-quiz .welcome-hero-triangle-accent-top {
        top: -1rem;
        right: 0%;
    }

    .suboxone-quiz .welcome-hero-triangle-accent-top img {
        width: 7rem;
        height: 7rem;
    }

    /* (Mobile previously hid .quiz-header on welcome — removed since the
       single-logo refactor shows the same .quiz-header logo across all
       states, just at different `top` positions.) */

    /* Mobile uses the same single .quiz-header logo, sized smaller per
       Figma 40008433:17779 (101 × 27). */
    .suboxone-quiz .quiz-logo img {
        height: 27px;
    }

    /* Mobile Figma 40008433:17751 — heading h2 (32.3/38), not h1. The flat
       2.01875rem matches --text-h2's mobile floor exactly. */
    .suboxone-quiz .welcome-title {
        font-size: 2.01875rem;
        line-height: 1.18;
        max-width: none;
    }

    /* Mobile gaps are tighter and more uniform per Figma 40008433:17747.
       Overall column gap 25, with the heading↔description gap-15 keeping
       the text-block visually cohesive. cta-block keeps gap-25 so the
       time row and button feel like separate items, matching mobile's
       flatter rhythm.
       Padding-top math: --space-section (75 mobile) + logo height (27) +
       mobile logo→heading gap (25) = ~127. */
    .suboxone-quiz #welcome .screen-content {
        gap: 25px;
        padding-top: calc(var(--space-section) + 52px);
        padding-bottom: var(--space-section);
    }

    .suboxone-quiz .welcome-title-block {
        gap: 15px;
    }

    .suboxone-quiz .welcome-cta-block {
        gap: 25px;
    }
}

/* ========================================
   QUALIFIED SCREEN — Figma 1:1 (node 40011815:78419)
   Desktop 1728px spec — scoped to #qualified so other screens
   (welcome, questions, comparison, notqualified, newpatient)
   are untouched. Mobile (< 1024px) keeps the existing stacked
   layout from the earlier @media (max-width: 767px) rules.
   ======================================== */
@media (min-width: 1024px) {

    /* Outer screen-content — Figma uses 150px top/bottom and 173px
       sides inside the 1728px navy section. */
    .suboxone-quiz #qualified .screen-content {
        padding-block: 150px;
        padding-inline: 173px;
        padding-top: 150px; /* overrides the +60px header offset elsewhere */
        gap: 67.5px;
    }

    .suboxone-quiz #qualified .qualified-layout {
        gap: 67.5px;
    }

    /* 2-col row — Figma: 675px each, gap 30px, justified center.
       .grid--2 is a no-op class in this codebase; we apply grid here. */
    .suboxone-quiz #qualified .grid--2 {
        display: grid;
        grid-template-columns: 675px 675px;
        gap: 30px;
        justify-content: center;
        align-items: stretch;
    }

    /* LEFT column */
    .suboxone-quiz #qualified .qualified-left {
        display: flex;
        flex-direction: column;
        gap: 22.5px;
    }
    .suboxone-quiz #qualified-title {
        font-size: 54px;
        line-height: 65px;
        font-weight: 700;
        margin: 0;
        color: white;
        text-align: left;
    }
    .suboxone-quiz #qualified .qualified-left .result-subheadline {
        font-size: 24px;
        line-height: 28.7px;
        font-weight: 400;
        color: white;
        margin: 0;
        text-align: left;
    }

    /* Info-box: Costal Blue 20 bg, 12.5px rounded, 30px padding, 30px gap */
    .suboxone-quiz #qualified .info-box {
        background: #CDEAF0;
        border-radius: 12.5px;
        padding: 30px;
        gap: 30px;
        border-left: none;
        margin: 0;
        display: flex;
        align-items: center;
        flex-direction: row;
    }
    .suboxone-quiz #qualified .info-box p {
        font-size: 18px;
        line-height: 23.1px;
        color: #253746;
        text-align: left;
        margin: 0;
    }
    .suboxone-quiz #qualified .chat-icon {
        width: 51px;
        height: 44px;
        flex-shrink: 0;
    }

    /* RIGHT column */
    .suboxone-quiz #qualified .qualified-right {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .suboxone-quiz #qualified .qualified-right > h2 {
        font-size: 31px;
        line-height: 35.5px;
        font-weight: 700;
        color: white;
        margin: 0;
        text-align: left;
    }

    /* Pricing card */
    .suboxone-quiz #qualified .pricing-card {
        background: white;
        border-radius: 12.5px;
        padding: 30px;
        gap: 30px;
        box-shadow: none;
        margin-top: 0;
        align-items: center;
        justify-content: center;
    }
    .suboxone-quiz #qualified .pricing-product {
        width: 100%;
        gap: 26.667px;
        align-items: center;
        transform: translateY(8px);
    }
    .suboxone-quiz #qualified .product-image-wrapper {
        width: 117.5px;
        height: 117.5px;
        border-radius: 12.5px;
        border: 1.667px solid #D4D9DD;
        padding: 0;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
    }
    .suboxone-quiz #qualified .product-image-img {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .suboxone-quiz #qualified .product-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 30px;
        height: 117.5px;
        max-width: 335px;
    }
    .suboxone-quiz #qualified .pricing-description {
        font-size: 18px;
        line-height: 23.1px;
        color: #253746;
        margin: 0;
        text-align: left;
    }
    .suboxone-quiz #qualified .pricing-features {
        gap: 8.333px;
    }
    .suboxone-quiz #qualified .pricing-feature {
        font-size: 18px;
        line-height: 23.1px;
        color: #253746;
        gap: 10px;
    }
    .suboxone-quiz #qualified .pricing-feature svg {
        width: 20.833px;
        height: 20.833px;
        min-width: 20.833px;
        min-height: 20.833px;
    }

    /* Price row + compare link */
    .suboxone-quiz #qualified .pricing-amount {
        font-size: 47.5px;
        line-height: 1.2;
        font-weight: 700;
        color: #253746;
    }
    .suboxone-quiz #qualified .pricing-amount-container {
        width: 100%;
        transform: translateY(-8px);
    }
    .suboxone-quiz #qualified .text-link {
        font-size: 18px;
        line-height: 23.1px;
        font-weight: 400;
        color: #838D96;
    }

    /* Desktop divider — centers the 1px line in the 30px gap between
       the product row and the price row (base rule's -16px was for the
       legacy 32px gap; new gap is 30px so midpoint is -15px). */
    .suboxone-quiz #qualified .pricing-amount-container::before {
        top: -15px;
    }

    /* CTA group at bottom */
    .suboxone-quiz #qualified .home-delivery-quiz-button-wrapper {
        gap: 20px;
    }
    .suboxone-quiz #qualified .btn-primary {
        background: #0097A9;
        color: white;
        border-color: #0097A9;
        border-width: 0;
        padding: 13px 30px;
        border-radius: 44.973px;
        font-size: 21.6px;
        line-height: 25.9px;
        font-weight: 700;
        margin-top: 0;
    }
    .suboxone-quiz #qualified .restart-link {
        font-size: 18px;
        line-height: 23.1px;
        font-weight: 400;
        color: #838D96;
    }
}

/* ========================================
   QUALIFIED SCREEN — Mobile Figma 1:1 (node 40008433:18982)
   Mobile 366px spec — scoped to #qualified at < 768px.
   ======================================== */
@media (max-width: 767px) {

    /* Outer screen-content — Figma: 30px top/bottom, 25px sides, 25px row gap */
    .suboxone-quiz #qualified .screen-content {
        padding-block: 30px;
        padding-inline: 25px;
        padding-top: 30px;
        gap: 25px;
    }

    .suboxone-quiz #qualified .qualified-layout {
        gap: 25px;
        display: flex;
        flex-direction: column;
    }

    /* On mobile the .grid--2 row stacks as a vertical column. */
    .suboxone-quiz #qualified .grid--2 {
        display: flex;
        flex-direction: column;
        gap: 25px;
    }

    /* LEFT block (heading + subtitle + info-box) */
    .suboxone-quiz #qualified .qualified-left {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }
    .suboxone-quiz #qualified-title {
        font-size: 32.3px;
        line-height: 38px;
        font-weight: 700;
        margin: 0;
        color: white;
        text-align: left !important;
    }
    .suboxone-quiz #qualified .qualified-left .result-subheadline {
        font-size: 16.208px;
        line-height: 21.395px;
        font-weight: 400;
        color: white;
        margin: 0;
        text-align: left;
    }

    /* Info-box — Coastal Blue 20 bg, smaller rounded + padding on mobile */
    .suboxone-quiz #qualified .info-box {
        background: #CDEAF0;
        border-radius: 6.542px;
        padding: 20px 15px;
        gap: 15px;
        flex-direction: row !important;
        align-items: center;
        border-left: none;
        margin: 0;
    }
    .suboxone-quiz #qualified .info-box p {
        font-size: 13.2px;
        line-height: 17.4px;
        color: #253746;
        text-align: left !important;
        margin: 0;
    }
    .suboxone-quiz #qualified .chat-icon {
        width: 25px;
        height: 25px;
        flex-shrink: 0;
    }

    /* RIGHT block (pricing) */
    .suboxone-quiz #qualified .qualified-right {
        display: flex;
        flex-direction: column;
        gap: 9px;
    }
    .suboxone-quiz #qualified .qualified-right > h2 {
        font-size: 18.208px;
        line-height: 21.849px;
        font-weight: 700;
        color: white;
        margin: 0;
        text-align: left !important;
    }

    /* Pricing card */
    .suboxone-quiz #qualified .pricing-card {
        background: white;
        border-radius: 6.542px;
        padding: 20px 15px !important;
        /* Was gap: 15 (Figma 40008433:18864). Bumped to 30 per user
           feedback — the horizontal divider between product info and
           price row sits at the visual midpoint of this gap (see
           ::before { top: -15px } rule below), so doubling the gap
           gives 15px breathing room above and below the line. */
        gap: 30px;
        box-shadow: none;
        margin-top: 0;
    }
    .suboxone-quiz #qualified .pricing-product {
        gap: 10px;
        flex-direction: row !important;
        align-items: center;
    }
    .suboxone-quiz #qualified .product-image-wrapper {
        width: 61.495px !important;
        height: 61.495px;
        border-radius: 6.542px;
        border: 0.872px solid #D4D9DD;
        padding: 0;
        overflow: hidden;
        flex-shrink: 0;
    }
    .suboxone-quiz #qualified .product-image-img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover;
    }
    .suboxone-quiz #qualified .product-details {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 10px !important;
    }
    .suboxone-quiz #qualified .pricing-description {
        font-size: 13.2px;
        line-height: 17.4px;
        color: #253746;
        margin: 0;
    }
    .suboxone-quiz #qualified .pricing-features {
        gap: 3px;
    }
    .suboxone-quiz #qualified .pricing-feature {
        font-size: 13.2px;
        line-height: 17.4px;
        color: #253746;
        gap: 5.234px;
    }
    .suboxone-quiz #qualified .pricing-feature svg {
        width: 10.903px;
        height: 10.903px;
        min-width: 10.903px;
        min-height: 10.903px;
    }

    /* Price row + compare link — Figma flex pattern:
       - container: flex row, gap 58px, items-center, justify-start
       - price: flex-1 (grow to fill) + text-center (centered within its column)
       - compare link: shrink-0 (sized to content) */
    .suboxone-quiz #qualified .pricing-amount-container {
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 58px !important;
        text-align: left;
    }
    /* Mobile-specific divider position — centers the 1px line in the
       30px gap between the product row and the price row (gap bumped
       from Figma's 15 per user feedback). The base rule uses
       `top: calc(2rem / -2)` = -16px for the desktop 2rem gap; this
       override sits at the midpoint of the new mobile gap. */
    .suboxone-quiz #qualified .pricing-amount-container::before {
        top: -15px;
    }
    .suboxone-quiz #qualified .pricing-amount {
        flex: 1;
        font-size: 23.5px;
        line-height: 28.2px;
        font-weight: 700;
        color: #253746;
        /* Was text-align: center per Figma 40008433:18883 spec. Overridden
           to left per user request — the $199 should sit flush-left with
           the pricing card's left padding instead of centered within its
           flex-1 column. */
        text-align: left;
    }
    .suboxone-quiz #qualified .pricing-amount-container .text-link {
        flex-shrink: 0;
        font-size: 9.5px;
        line-height: 14px;
        font-weight: 400;
        color: #838D96;
    }

    /* CTA group at bottom */
    .suboxone-quiz #qualified .home-delivery-quiz-button-wrapper {
        gap: 5px;
    }
    .suboxone-quiz #qualified .btn-primary {
        background: #0097A9;
        color: white;
        border-color: #0097A9;
        border-width: 0;
        padding: 10px 24px;
        border-radius: 44.973px;
        font-size: 16.208px;
        line-height: 21.395px;
        font-weight: 700;
        margin-top: 0;
    }
    .suboxone-quiz #qualified .restart-link {
        font-size: 13.2px;
        line-height: 17.4px;
        font-weight: 400;
        color: #838D96;
        gap: 5.234px;
    }
}

/* ========================================
   COMPARISON SCREEN — Figma 1:1 (node 40011815:78477)
   Desktop 1728×880 white card spec — scoped to #comparison.
   ======================================== */
@media (min-width: 1024px) {

    /* Outer card: white bg (handled by .showing-comparison), p-100,
       inner content centered at 1380px max, 67.5px row gap. */
    .suboxone-quiz #comparison .screen-content {
        padding: 100px;
        padding-top: 100px;
        gap: 67.5px;
        max-width: 1580px;
        margin-inline: auto;
    }

    /* Title "Compare your options" — Desktop H2, centered */
    .suboxone-quiz #comparison-title,
    .suboxone-quiz #comparison h2 {
        font-size: 48px;
        line-height: 57.6px;
        font-weight: 700;
        color: #253746;
        text-align: center;
        margin: 0;
    }

    /* 2-col row — 30px gap, equal-width columns */
    .suboxone-quiz #comparison .comparison-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 30px;
        align-items: start;
    }

    /* Each column */
    .suboxone-quiz #comparison .comparison-column {
        padding: 0;
        gap: 20px;
        align-self: stretch;
    }
    .suboxone-quiz #comparison .comparison-column h3 {
        font-size: 25px;
        line-height: 30px;
        font-weight: 700;
        color: #253746;
        text-align: left;
        margin: 0;
    }

    /* Pricing grid — 2x3 (Tablets column / Films column), 10px gap */
    .suboxone-quiz #comparison .pricing-items-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    /* Each pricing item — pill-ish rounded rectangle */
    .suboxone-quiz #comparison .pricing-item {
        height: 82px;
        padding: 24px 33px;
        border: 3px solid #CDEAF0;
        border-radius: 10px;
        background: white;
        display: flex;
        align-items: center;
    }
    .suboxone-quiz #comparison .pricing-item-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
    }
    .suboxone-quiz #comparison .pricing-item-type {
        font-size: 18px;
        line-height: 23.1px;
        font-weight: 400;
        color: #253746;
    }
    .suboxone-quiz #comparison .pricing-item-price {
        font-size: 21.6px;
        line-height: 25.9px;
        font-weight: 700;
        color: #253746;
    }

    /* Features footer under the pricing grid (Free shipping / Guaranteed) */
    .suboxone-quiz #comparison .pricing-features-comparison {
        display: flex;
        flex-direction: row;
        gap: 25px;
        align-items: center;
    }
    .suboxone-quiz #comparison .pricing-features-comparison .pricing-feature {
        display: flex;
        align-items: center;
        gap: 10px;
        font-size: 18px;
        line-height: 23.1px;
        color: #253746;
    }
    .suboxone-quiz #comparison .pricing-features-comparison .pricing-feature svg {
        width: 23px;
        height: 23px;
        min-width: 23px;
        min-height: 23px;
    }

    /* Right column info-box */
    .suboxone-quiz #comparison .comparison-info-box {
        background: rgba(205, 234, 240, 0.2);
        border-radius: 15px;
        padding: 30px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .suboxone-quiz #comparison .comparison-info-box p {
        font-size: 18px;
        line-height: 23.1px;
        font-weight: 400;
        color: #253746;
        margin: 0;
        text-align: left;
    }
    .suboxone-quiz #comparison .comparison-info-box p:not(:first-child) {
        margin-top: 0;
    }

    /* Disclaimer warning row (yellow triangle + small print) */
    .suboxone-quiz #comparison .comparison-additional-info {
        display: flex;
        gap: 9px;
        align-items: flex-start;
    }
    .suboxone-quiz #comparison .comparison-additional-info svg {
        width: 17px;
        height: 17px;
        min-width: 17px;
        flex-shrink: 0;
        margin-top: 1px;
    }
    /* Sizing comes from the global `text-disclaimer` utility on the
       markup (= 11.5/14 @ 1728). Only color/weight/margin stay here. */
    .suboxone-quiz #comparison .comparison-additional-text {
        font-weight: 400;
        color: #253746;
        margin: 0;
    }

    /* Bottom CTA group */
    .suboxone-quiz #comparison .home-delivery-quiz-button-wrapper {
        gap: 20px;
        width: 271px;
        margin-inline: auto;
    }
    .suboxone-quiz #comparison .btn-primary {
        background: #0097A9;
        color: white;
        border-color: #0097A9;
        border-width: 0;
        padding: 13px 30px;
        border-radius: 44.973px;
        font-size: 21.6px;
        line-height: 25.9px;
        font-weight: 700;
        margin: 0;
    }
    .suboxone-quiz #comparison .restart-link {
        font-size: 18px;
        line-height: 23.1px;
        font-weight: 400;
        color: #838D96;
    }
}

/* ========================================
   NEW PATIENT SCREEN — Figma 1:1 (node 40011815:78536)
   Desktop 1728×880 white card spec — scoped to #newpatient.
   The .notqualified-content-wrapper class is shared with the
   #notqualified screen; all selectors are namespaced by #newpatient
   so the other screen stays untouched.

   Background: the script.view.js applies .showing-notqualified (NOT
   .showing-newpatient) when the new-patient screen activates, so the
   existing .showing-notqualified { background: white } rule already
   handles the white card backdrop.
   ======================================== */
@media (min-width: 1024px) {

    .suboxone-quiz #newpatient .screen-content,
    .suboxone-quiz #notqualified .screen-content {
        padding: 100px 173px;
        padding-top: 100px;
        gap: 0;
        max-width: 1728px;
        margin-inline: auto;
    }

    /* Wrapper — single 1380px-wide centered column. Use gap 20px so
       the title→subtitle pair sits close (Figma 20px), then the info-
       box and CTA group add their own margin-top to reach the 67.5px
       spec between major sections. */
    .suboxone-quiz #newpatient .notqualified-content-wrapper,
    .suboxone-quiz #notqualified .notqualified-content-wrapper {
        max-width: 1380px;
        width: 100%;
        gap: 20px;
        margin-inline: auto;
        align-items: center;
    }

    /* Title H1 + subtitle */
    .suboxone-quiz #newpatient .notqualified-content-wrapper h2,
    .suboxone-quiz #notqualified .notqualified-content-wrapper h2 {
        font-size: 54px;
        line-height: 65px;
        font-weight: 700;
        color: #253746;
        max-width: none;
        text-align: center;
        margin: 0;
    }
    .suboxone-quiz #newpatient .notqualified-content-wrapper .result-subheadline,
    .suboxone-quiz #notqualified .notqualified-content-wrapper .result-subheadline {
        font-size: 24px;
        line-height: 28.7px;
        font-weight: 400;
        color: #253746;
        text-align: center;
        margin: 0;
    }

    /* Info-box (.info-box.no-border) — Costal Blue 20 @ 20% bg,
       p-100 padding, 15px rounded, 20px between paragraphs. The
       47.5px margin-top combines with the wrapper's 20px gap to
       give a total 67.5px spacing from the subtitle above. */
    .suboxone-quiz #newpatient .notqualified-content-wrapper .info-box,
    .suboxone-quiz #notqualified .notqualified-content-wrapper .info-box {
        background: rgba(205, 234, 240, 0.2);
        border-radius: 15px;
        padding: 100px;
        border-left: none;
        margin-top: 47.5px;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 20px;
        width: 100%;
    }
    .suboxone-quiz #newpatient .notqualified-content-wrapper .info-box p,
    .suboxone-quiz #notqualified .notqualified-content-wrapper .info-box p {
        font-size: 24px;
        line-height: 28.7px;
        font-weight: 400;
        color: #253746;
        text-align: left;
        margin: 0;
    }

    /* CTA group — same +47.5px margin trick for 67.5px spacing
       from the info-box above. */
    .suboxone-quiz #newpatient .home-delivery-quiz-button-wrapper,
    .suboxone-quiz #notqualified .home-delivery-quiz-button-wrapper {
        gap: 20px;
        width: 271px;
        margin-top: 47.5px;
        margin-inline: auto;
    }
    .suboxone-quiz #newpatient .btn-primary,
    .suboxone-quiz #notqualified .btn-primary {
        background: #0097A9;
        color: white;
        border-color: #0097A9;
        border-width: 0;
        padding: 13px 30px;
        border-radius: 44.973px;
        font-size: 21.6px;
        line-height: 25.9px;
        font-weight: 700;
        margin: 0;
    }
    .suboxone-quiz #newpatient .restart-link,
    .suboxone-quiz #notqualified .restart-link {
        font-size: 18px;
        line-height: 23.1px;
        font-weight: 400;
        color: #838D96;
    }
}

/* ========================================
   COMPARISON SCREEN — Mobile Figma 1:1 (node 40008433:19040)
   Mobile 366px white card spec — scoped to #comparison at < 768px.
   ======================================== */
@media (max-width: 767px) {

    /* Outer screen-content — 30px top/bottom, 25px sides, 25px row gap */
    .suboxone-quiz #comparison .screen-content {
        padding: 30px 25px;
        padding-top: 30px;
        gap: 25px;
    }

    /* Title "Compare your options" — Mobile H4, centered */
    .suboxone-quiz #comparison-title,
    .suboxone-quiz #comparison h2 {
        font-size: 23.5px;
        line-height: 28.2px;
        font-weight: 700;
        color: #253746;
        text-align: center;
        margin: 0;
    }

    /* Comparison grid stacks single-column on mobile */
    .suboxone-quiz #comparison .comparison-grid {
        display: flex !important;
        flex-direction: column;
        gap: 25px;
    }

    /* Each column */
    .suboxone-quiz #comparison .comparison-column {
        padding: 0;
        gap: 10px;
    }
    .suboxone-quiz #comparison .comparison-column h3 {
        font-size: 16.208px;
        line-height: 21.395px;
        font-weight: 600;
        color: #253746;
        text-align: left;
        margin: 0;
    }

    /* Pricing grid — 2 internal cols (Tablets / Films), 5px gap */
    .suboxone-quiz #comparison .pricing-items-wrapper {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    /* Each pricing item */
    .suboxone-quiz #comparison .pricing-item {
        height: auto;
        padding: 10px 20px;
        border: 1.339px solid #CDEAF0;
        border-radius: 4.464px;
        background: white;
    }
    /* Mobile-only: stack the quantity label and the price vertically and
       flush-left inside each pricing box (per user request — deviates from
       Figma 40012020:52406 which shows them flex-row justify-between).
       Desktop keeps the row layout from the base .pricing-item-header rule. */
    .suboxone-quiz #comparison .pricing-item-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }
    .suboxone-quiz #comparison .pricing-item-type {
        font-size: 13.2px;
        line-height: 17.4px;
        font-weight: 400;
        color: #253746;
    }
    .suboxone-quiz #comparison .pricing-item-price {
        font-size: 16.208px;
        line-height: 21.395px;
        font-weight: 700;
        color: #253746;
    }

    /* Features footer */
    .suboxone-quiz #comparison .pricing-features-comparison {
        gap: 11.16px;
    }
    .suboxone-quiz #comparison .pricing-features-comparison .pricing-feature {
        gap: 4.91px;
        font-size: 13.2px;
        line-height: 17.4px;
    }
    .suboxone-quiz #comparison .pricing-features-comparison .pricing-feature svg {
        width: 12.053px;
        height: 12.053px;
        min-width: 12.053px;
        min-height: 12.053px;
    }

    /* Right column info-box */
    .suboxone-quiz #comparison .comparison-info-box {
        background: rgba(205, 234, 240, 0.2);
        border-radius: 6.696px;
        padding: 20px 15px;
        gap: 8.928px;
    }
    .suboxone-quiz #comparison .comparison-info-box p {
        font-size: 13.2px;
        line-height: 17.4px;
        font-weight: 400;
        color: #253746;
        margin: 0;
        text-align: left;
    }

    /* Disclaimer warning row */
    .suboxone-quiz #comparison .comparison-additional-info {
        gap: 9px;
        align-items: flex-start;
    }
    .suboxone-quiz #comparison .comparison-additional-info svg {
        width: 12px;
        height: 13px;
        min-width: 12px;
        flex-shrink: 0;
        margin-top: 1px;
    }
    /* Sizing comes from the global `text-disclaimer` utility on the
       markup (= 9.5/12 mobile floor). Only color/weight stay here. */
    .suboxone-quiz #comparison .comparison-additional-text {
        font-weight: 400;
        color: #253746;
    }

    /* CTA group */
    .suboxone-quiz #comparison .home-delivery-quiz-button-wrapper {
        gap: 5px;
        width: 163px;
        margin-inline: auto;
    }
    .suboxone-quiz #comparison .btn-primary {
        background: #0097A9;
        color: white;
        border-color: #0097A9;
        border-width: 0;
        padding: 10px 24px;
        border-radius: 44.973px;
        font-size: 16.208px;
        line-height: 21.395px;
        font-weight: 700;
        margin: 0;
    }
    .suboxone-quiz #comparison .restart-link {
        font-size: 13.2px;
        line-height: 17.4px;
        font-weight: 400;
        color: #838D96;
        gap: 5.234px;
    }
}

/* ========================================
   NEW PATIENT SCREEN — Mobile Figma 1:1 (node 40008433:18991)
   Mobile 366px white card spec — scoped to #newpatient at < 768px.
   Background is provided by the inherited .showing-notqualified rule.
   ======================================== */
@media (max-width: 767px) {

    .suboxone-quiz #newpatient .screen-content,
    .suboxone-quiz #notqualified .screen-content {
        padding: 30px 25px;
        padding-top: 30px;
        gap: 0;
    }

    .suboxone-quiz #newpatient .notqualified-content-wrapper,
    .suboxone-quiz #notqualified .notqualified-content-wrapper {
        max-width: none;
        width: 100%;
        gap: 15px;
        align-items: center;
    }

    /* Title + subtitle */
    .suboxone-quiz #newpatient .notqualified-content-wrapper h2,
    .suboxone-quiz #notqualified .notqualified-content-wrapper h2 {
        font-size: 23.5px;
        line-height: 28.2px;
        font-weight: 700;
        color: #253746;
        max-width: none;
        text-align: center;
        margin: 0;
    }
    .suboxone-quiz #newpatient .notqualified-content-wrapper .result-subheadline,
    .suboxone-quiz #notqualified .notqualified-content-wrapper .result-subheadline {
        font-size: 16.208px;
        line-height: 21.395px;
        font-weight: 400;
        color: #253746;
        text-align: center;
        margin: 0;
    }

    /* Info-box — Costal Blue 20 @ 20%, smaller rounded + padding on mobile.
       The +10px margin-top combines with the wrapper's 15px gap to give
       a 25px total spacing between the subtitle and the info-box. */
    .suboxone-quiz #newpatient .notqualified-content-wrapper .info-box,
    .suboxone-quiz #notqualified .notqualified-content-wrapper .info-box {
        background: rgba(205, 234, 240, 0.2);
        border-radius: 4.165px;
        padding: 20px 15px;
        border-left: none;
        margin-top: 10px;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 10px;
        width: 100%;
    }
    .suboxone-quiz #newpatient .notqualified-content-wrapper .info-box p,
    .suboxone-quiz #notqualified .notqualified-content-wrapper .info-box p {
        font-size: 13.2px;
        line-height: 17.4px;
        font-weight: 400;
        color: #253746;
        text-align: left;
        margin: 0;
    }

    /* CTA group */
    .suboxone-quiz #newpatient .home-delivery-quiz-button-wrapper,
    .suboxone-quiz #notqualified .home-delivery-quiz-button-wrapper {
        gap: 5px;
        width: 163px;
        margin-top: 10px;
        margin-inline: auto;
    }
    .suboxone-quiz #newpatient .btn-primary,
    .suboxone-quiz #notqualified .btn-primary {
        background: #0097A9;
        color: white;
        border-color: #0097A9;
        border-width: 0;
        padding: 10px 24px;
        border-radius: 44.973px;
        font-size: 16.208px;
        line-height: 21.395px;
        font-weight: 700;
        margin: 0;
    }
    .suboxone-quiz #newpatient .restart-link,
    .suboxone-quiz #notqualified .restart-link {
        font-size: 13.2px;
        line-height: 17.4px;
        font-weight: 400;
        color: #838D96;
        gap: 5.234px;
    }
}