/* ============================================================
   MEDICAL ALERT QUIZ  —  Gutter iOS UI template
   Design reused as-is from Funnels/form-business-loans (same
   base template family: gutter-services / quiz-gold-4).
   Steps/copy are original to this medical-alert quiz.
   ============================================================ */

:root {
    --primary: #047857;
    --primary-light: #ECFDF5;
    --primary-dark: #065F46;
    --navy: #0F172A;
    --orange: #F59E0B;
    --text-dark: #0F172A;
    --text-secondary: #475569;
    --text-gray: #64748B;
    --border: #E2E8F0;
    --bg: #EDF5F5; /* v2: light clinical mint-blue (was #F2F4F7) */
    --white: #FFFFFF;
    --hairline: rgba(60, 60, 67, 0.12);
    --fill-tertiary: rgba(118, 118, 128, 0.12);
    --radius-card: 20px;
    --radius-btn: 14px;
    --ease-ios: cubic-bezier(0.25, 0.1, 0.25, 1);
    --container-padding: 16px;
}

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
    background-color: var(--bg);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', 'Segoe UI', sans-serif;
    background-color: transparent;
    color: var(--text-dark);
    min-height: 100%;
    -webkit-tap-highlight-color: transparent;
    -webkit-font-smoothing: antialiased;
    font-size: 17px;
    line-height: 1.4;
}

.layout {
    display: flex;
    flex-direction: column;
    height: auto;
    overflow: hidden;
}

/* ---------- Header ---------- */
.header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px var(--container-padding);
    height: 32px;
    flex-shrink: 0;
    margin-bottom: 30px;
    /* Same width as the form column (.screen-container + side padding),
       so the logo lines up with the form's left edge and Advertiser
       Disclosure with its right edge instead of the screen edges. */
    width: 100%;
    max-width: calc(560px + 2 * var(--container-padding));
    margin-left: auto;
    margin-right: auto;
}

.logo { height: 24px; width: auto; background-image: none; }

.disclosure-link {
    font-size: 10px;
    font-weight: 400;
    color: rgba(100, 116, 139, 0.65);
    cursor: pointer;
    text-decoration: underline;
    text-decoration-color: rgba(100, 116, 139, 0.3);
    text-underline-offset: 2px;
    white-space: nowrap;
    background: none;
    padding: 0;
    border-radius: 0;
}

.disclosure-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    display: none;
    align-items: flex-end;
    justify-content: center;
}

.disclosure-overlay.active { display: flex; }

.disclosure-popup {
    background: var(--white);
    border-radius: 20px 20px 0 0;
    padding: 24px 20px 34px;
    max-width: 560px;
    width: 100%;
    position: relative;
}

.disclosure-popup::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: var(--hairline);
}

.disclosure-popup-title {
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: -0.2px;
}

.disclosure-popup-text {
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.disclosure-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 30px;
    height: 30px;
    background: var(--fill-tertiary);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    color: var(--text-gray);
}

/* ---------- Quiz nav (sticky, blurred) ---------- */
.quiz-nav {
    display: flex;
    flex-direction: column;
    padding: 3px 0 3px;
    position: sticky;
    top: 0;
    z-index: 50;
    background: rgba(237, 245, 245, 0.85); /* v2: matches new --bg */
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-bottom: 0.5px solid var(--hairline);
}

.quiz-nav[hidden] { display: none; }

.quiz-nav-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
}

.quiz-back-btn {
    display: flex;
    align-items: center;
    gap: 2px;
    font-size: 18px;
    font-weight: 400;
    color: var(--primary);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 0;
    font-family: inherit;
}

.quiz-back-btn svg { width: 18px; height: 18px; }

.quiz-step-text {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.6px;
    color: var(--text-gray);
    text-transform: uppercase;
    white-space: nowrap;
}

.quiz-step-text .step-num {
    color: var(--primary);
    font-weight: 700;
}

.quiz-progress-bar {
    position: relative;
    flex: 1;
    min-width: 0;
    height: 8px;
    background: var(--fill-tertiary);
    border-radius: 100px;
}

/* Heartbeat-monitor style fill: a scrolling pulse-line pattern plus a
   pinging dot at the leading edge, in keeping with the medical-alert
   theme. */
.quiz-progress-fill {
    position: relative;
    height: 100%;
    min-width: 8px;
    background-color: var(--primary);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='8'><path d='M0 4H10L13 1L16 7L19 4H40' fill='none' stroke='white' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.6'/></svg>");
    background-repeat: repeat-x;
    background-size: 40px 8px;
    background-position: 0 center;
    border-radius: 100px;
    transition: width 0.45s var(--ease-ios);
    width: 0%;
    animation: heartbeatScroll 1.1s linear infinite;
}

.quiz-progress-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--primary);
    transform: translate(50%, -50%);
    box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.55);
    animation: heartbeatPulse 1.1s ease-out infinite;
}

@keyframes heartbeatScroll {
    from { background-position-x: 0; }
    to { background-position-x: 40px; }
}

@keyframes heartbeatPulse {
    0% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0.55); }
    70% { box-shadow: 0 0 0 9px rgba(4, 120, 87, 0); }
    100% { box-shadow: 0 0 0 0 rgba(4, 120, 87, 0); }
}

/* ---------- Main / screens ---------- */
.main {
    flex: 1;
    padding: 0 var(--container-padding) 100px;
    -webkit-overflow-scrolling: touch;
    min-height: calc(100vh - 40px);
    min-height: calc(100dvh - 40px);
}

.screen-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
}

.screen {
    display: none;
    flex-direction: column;
    padding: 8px 0;
}

.screen.active {
    display: flex;
    animation: iosIn 0.35s var(--ease-ios);
}

@keyframes iosIn {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

.screen-header {
    text-align: left;
    margin-bottom: 6px;
}

.screen-title {
    font-family: inherit;
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-dark);
    margin-bottom: 10px;
    line-height: 1.2;
}

/* Highlights the visitor's own first name once it's known (screen 11's
   "Last Step, {name}!" and the results heading) so it reads as
   personalized rather than a generic template string. */
.name-highlight { color: var(--primary); }

/* Small eyebrow kicker above screen 1's question, matching the
   quiz-wealth-management-3 pattern. */
.hero-text { text-align: left; padding-top: 2px; margin-bottom: 2px; }
.hero-compact { margin-bottom: 3px; }

.hero-text h1 {
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 0.2px;
    text-transform: uppercase;
    line-height: 1.3;
    color: var(--primary);
    margin: 0 0 2px;
}

.screen-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.35;
    margin-top: 2px;
    margin-bottom: 10px;
}

/* Screen 1 options: 2-up image tile grid instead of the plain
   text-only rows used on every other screen. Headline/subtitle and
   everything else on this screen are unchanged. Swap files in
   assets/images/options/ for real product photography later. */
#screen1 .options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    /* Always full-width on phones, edge-to-edge with the page's normal
       side padding — no centering/gutters. A height-based cap is
       applied separately for wide desktop/tablet windows only, where
       it doesn't read as an odd gutter the way it would here. */
    max-width: 100%;
    margin: 0 auto;
}

#screen1 .option {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
    overflow: hidden;
}

#screen1 .option-icon {
    width: 100%;
    height: auto;
    flex: none;
    aspect-ratio: 1 / 1;
    background: var(--white);
    border-radius: 0;
}

#screen1 .option-icon img {
    width: 60%;
    height: 60%;
    object-fit: contain;
    display: block;
}

/* "No preference" tile: no product shot, so it reuses the "I'm not
   sure" icon glyph centered on a plain white tile instead of a photo
   — only the icon itself is colored, not its background. The color
   has to be set on the svg directly (not just the wrapper) since the
   shared `.option-icon svg` rule elsewhere already sets its own
   color and would otherwise win over inheritance. */
#screen1 .option-icon-glyph {
    display: flex;
    align-items: center;
    justify-content: center;
}

#screen1 .option-icon-glyph svg {
    color: var(--orange);
    width: 42%;
    height: 42%;
}

#screen1 .option-text {
    flex: none;
    width: 100%;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3px 6px;
}

#screen1 .option-title { font-size: 13px; line-height: 1.2; }

#screen1 .option-check {
    position: absolute;
    top: 10px;
    right: 10px;
    margin-left: 0;
}

/* ---------- Options: single-column stacked rows ---------- */
.options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.option {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    text-align: left;
    gap: 12px;
    padding: 16px;
    background: var(--white);
    border: 2px solid transparent;
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    cursor: pointer;
    position: relative;
    transition: background 0.15s var(--ease-ios), border-color 0.2s var(--ease-ios), transform 0.15s var(--ease-ios);
    opacity: 0;
    transform: translateY(8px);
}

.screen.active .option { animation: iosRowIn 0.3s var(--ease-ios) forwards; }
.screen.active .option:nth-child(1) { animation-delay: 0ms; }
.screen.active .option:nth-child(2) { animation-delay: 40ms; }
.screen.active .option:nth-child(3) { animation-delay: 80ms; }
.screen.active .option:nth-child(4) { animation-delay: 120ms; }
.screen.active .option:nth-child(5) { animation-delay: 160ms; }

@keyframes iosRowIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

.option:active { transform: scale(0.97); }

.option.selected {
    background: var(--primary-light);
    border-color: var(--primary);
}

/* ---------- Option icon badge (screens 2-8) ---------- */
.option-icon {
    width: 48px;
    height: 48px;
    flex: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-light);
    border-radius: 14px;
    color: var(--primary);
    transition: background 0.2s var(--ease-ios);
}

.option-icon svg {
    width: 50%;
    height: 50%;
    color: var(--primary);
    transition: color 0.2s var(--ease-ios);
}

.option.selected .option-icon { background: var(--primary); }
.option.selected .option-icon svg { color: #FFFFFF; }

/* Icon tone variants (resting state only; .selected always overrides to green) */
.option-icon.tone-slate { background: #F1F5F9; }
.option-icon.tone-slate svg { color: #64748B; }

.option-icon.tone-amber { background: #FFFBEB; }
.option-icon.tone-amber svg { color: var(--orange); }

.option-icon.tone-blue { background: #EFF6FF; }
.option-icon.tone-blue svg { color: #0369A1; }

.option-text { flex: 1; min-width: 0; text-align: left; }

.option-title {
    font-size: 18px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-dark);
    line-height: 1.3;
}

.option-check {
    width: 24px;
    height: 26px;
    flex-shrink: 0;
    margin-left: auto;
}

.option-check .shield-icon { width: 20px; height: 24px; }

.option-check .shield-outline {
    fill: none;
    stroke: #C7CCD4;
    stroke-width: 1.8;
    transition: all 0.2s var(--ease-ios);
}

.option-check .shield-check {
    opacity: 0;
    transform: scale(0);
    transform-origin: center;
    transition: all 0.25s var(--ease-ios);
}

.option.selected .option-check .shield-outline {
    fill: var(--primary);
    stroke: var(--primary);
}

.option.selected .option-check .shield-check {
    opacity: 1;
    transform: scale(1);
}

/* ---------- Trust row ---------- */
.trust-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin-top: 8px;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: rgba(4, 120, 87, 0.08);
    padding: 3px 7px;
    border-radius: 6px;
    white-space: nowrap;
    pointer-events: none;
}

.trust-item svg {
    width: 11px;
    height: 11px;
    color: var(--primary);
    flex-shrink: 0;
}

/* ---------- Contact form fields ---------- */
.field-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.field { display: flex; flex-direction: column; gap: 6px; }

.field input {
    padding: 32px 16px;
    font-family: inherit;
    font-size: 22px;
    color: var(--text-dark);
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: var(--radius-btn);
    outline: none;
    transition: border-color 0.2s var(--ease-ios), box-shadow 0.2s var(--ease-ios);
}

.field input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(4, 120, 87, 0.12);
}

.field input.invalid { border-color: #C0392B; }

.error-message {
    display: none;
    font-size: 13.5px;
    font-weight: 600;
    color: #C0392B;
    text-align: left;
    margin-top: 4px;
}

.error-message.show { display: block; }

/* Screens 9-11 wrapper form (needed by validate.js), no layout box of its own */
.contact-form { display: contents; }

/* Shared validator (validate.js) states, styled like the page's own errors */
.field input.mfvalidate-invalid { border-color: #C0392B; }
.field .mfvalidate-error {
    font-size: 13.5px;
    font-weight: 600;
    color: #C0392B;
    text-align: left;
    margin: 4px 0 0;
}
.btn-continue:disabled { opacity: 0.7; cursor: wait; }

.btn-continue {
    width: 100%;
    padding: 23px 0;
    margin: 22px auto 0;
    background: var(--primary);
    color: #FFFFFF;
    font-size: 22px;
    font-weight: 600;
    letter-spacing: -0.2px;
    font-family: inherit;
    border: none;
    border-radius: var(--radius-btn);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.15s var(--ease-ios), opacity 0.15s;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35);
}

.btn-continue:active { transform: scale(0.97); opacity: 0.9; }

.consent-text {
    font-size: 11.5px;
    color: var(--text-gray);
    line-height: 1.5;
    text-align: center;
    margin-top: 14px;
}

.consent-text a {
    color: var(--primary);
    text-decoration: underline;
}

@keyframes shieldPulse {
    0% { transform: scale(0.6); opacity: 0; }
    70% { transform: scale(1.08); opacity: 1; }
    100% { transform: scale(1); }
}

/* ---------- Footer ---------- */
.site-footer {
    border-top: 1px solid var(--hairline);
    padding: 24px 20px 40px;
    text-align: center;
}

.footer-inner {
    max-width: 560px;
    margin: 0 auto;
}

.footer-referral {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-gray);
    margin-bottom: 12px;
}

.footer-copyright {
    font-size: 10px;
    line-height: 1.6;
    color: var(--text-gray);
}

.footer-links {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
}

.footer-links a {
    color: var(--primary);
    font-size: 12px;
    letter-spacing: -0.2px;
    text-decoration: none;
}

.footer-links a:hover {
    color: var(--primary-dark);
    text-decoration: underline;
}

.footer-logo {
    display: block;
    height: 24px;
    width: auto;
    margin: 0 auto;
}

.footer-links + .footer-copyright { margin-top: 14px; }

/* ============================================================
   MATCHING INTERSTITIAL (brief animated screen shown for ~2.5s
   between the contact-info submit and the results screen)
   ============================================================ */
.matching-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 60vh;
    padding: 40px 20px;
}

.matching-rings {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 28px;
}

.matching-ring {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1.5px solid var(--primary);
    opacity: 0;
    animation: matchingRing 2.4s ease-out infinite;
}

.matching-ring.r2 { animation-delay: 0.8s; }
.matching-ring.r3 { animation-delay: 1.6s; }

@keyframes matchingRing {
    0% { transform: scale(0.35); opacity: 0.45; }
    100% { transform: scale(1); opacity: 0; }
}

.matching-core {
    position: relative;
    width: 152px;
    height: 152px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35);
    animation: matchingBeat 1s ease-in-out infinite;
}

.matching-core svg {
    width: 64px;
    height: 64px;
    color: #fff;
}

/* Two quick pulses per cycle ("lub-dub") instead of one plain beat */
@keyframes matchingBeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.12); }
    30% { transform: scale(1); }
    45% { transform: scale(1.08); }
    60% { transform: scale(1); }
}

.matching-title {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-dark);
}

/* ============================================================
   RESULTS SCREEN (final step of the same quiz — no redirect,
   matching the "answer questions, then see your matches on one
   continuous page" flow this quiz is built around)
   ============================================================ */
.results-hero {
    text-align: center;
    padding: 32px 24px 28px;
    margin-top: 4px;
    background: var(--white);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.results-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.35);
    animation: shieldPulse 0.5s var(--ease-ios);
}

.results-icon svg { width: 32px; height: 32px; color: #fff; }

.results-title {
    font-size: 26px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-dark);
    margin-bottom: 6px;
    line-height: 1.2;
}

.results-subtitle {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    max-width: 420px;
    margin: 0 auto;
}

.matches-section {
    margin-top: 24px;
}

.match-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.match-card {
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: 2px solid transparent;
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    padding: 18px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.2s var(--ease-ios), transform 0.15s var(--ease-ios);
    position: relative;
}

.match-card:active { transform: scale(0.98); }
.match-card:hover { border-color: var(--primary); }

.match-tag {
    display: inline-block;
    align-self: flex-start;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: var(--primary-light);
    padding: 4px 10px;
    border-radius: 6px;
    margin-bottom: 12px;
}

.match-row {
    display: flex;
    flex-direction: column;
}

.match-name {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}

.match-name img {
    display: block;
    height: 56px;
    max-height: 56px;
    width: auto;
    max-width: 100%;
    object-fit: contain;
}

/* Brand name shown in place of the logo until a brand image is uploaded. */
.match-name-text {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: var(--text-dark);
    line-height: 1.2;
}

.match-content {
    display: flex;
    flex-direction: column;
}

.match-pretext {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1.3;
    margin-bottom: 8px;
}

.match-features {
    list-style: none;
    margin: 0 0 16px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
}

.match-features li {
    font-size: 13.5px;
    color: var(--text-secondary);
    padding-left: 18px;
    position: relative;
    line-height: 1.4;
}

/* Fine print inside a bullet, e.g. a <small> disclaimer after a <br>. */
.match-features li small {
    display: inline-block;
    margin-top: 3px;
    font-size: 11.5px;
    line-height: 1.35;
    color: var(--text-gray);
}

.match-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 6px;
    height: 6px;
    background: var(--primary);
    border-radius: 50%;
}

.match-cta {
    width: 100%;
    height: 44px;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.1px;
    border: none;
    border-radius: var(--radius-btn);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.25);
    cursor: pointer;
}

/* ============================================================
   Tablet / desktop
   ============================================================ */
@media (min-width: 600px) {
    :root { --container-padding: 32px; }

    .header { height: 56px; padding: 12px 32px; max-width: calc(620px + 2 * var(--container-padding)); }
    .logo { height: 34px; }

    .screen-container { max-width: 620px; }

    .hero-text h1 { font-size: 24px; }

    /* Desktop/tablet: all 4 options in a single row instead of the
       mobile 2x2 grid, with a roomier gap and caption. A single row
       is already short regardless of window height, so the vh-based
       cap the 2x2 layout needed isn't necessary here. */
    #screen1 .options { grid-template-columns: repeat(4, 1fr); gap: 12px; max-width: 100%; }
    #screen1 .option-text { min-height: 48px; padding: 4px 8px; }
    #screen1 .option-title { font-size: 17px; }

    .disclosure-overlay { align-items: center; padding: 20px; }
    .disclosure-popup { border-radius: 20px; padding: 26px 24px; }
    .disclosure-popup::before { content: none; }
}

@media (min-width: 700px) {
    /* Results page only: the card column runs 30% wider than the rest
       of the quiz's centered container (620px * 1.3 ≈ 806px), so the
       cards read as roomier match panels on desktop instead of the
       same narrow single-column width as a quiz question. Shrinks
       back down naturally via width:100% on narrower desktop windows. */
    .screen-container:has(#screen12.active) {
        max-width: 806px;
    }

    /* Header follows the wider results column too. */
    .layout:has(#screen12.active) .header {
        max-width: calc(806px + 2 * var(--container-padding));
    }

    .results-hero {
        display: flex;
        align-items: center;
        text-align: left;
        gap: 28px;
        padding: 32px 40px;
    }

    .results-icon { margin: 0; flex-shrink: 0; }
    .results-content { text-align: left; }
    .results-subtitle { margin: 0; max-width: none; }

    .match-card { padding: 20px 28px; }

    .match-row {
        flex-direction: row;
        align-items: center;
        gap: 24px;
    }

    /* Narrower name/logo column than before, so the feature bullets
       (the actual comparison content) get more of the card's width. */
    .match-name { flex: 0 0 150px; margin-bottom: 0; }
    .match-content { flex: 1; min-width: 0; }
    .match-pretext { font-size: 15.5px; }
    .match-features { margin-bottom: 0; }
    .match-features li { font-size: 14.5px; }
    .match-cta { width: auto; flex: 0 0 auto; padding: 0 32px; }
}

@media (max-width: 380px) {
    .options { gap: 8px; }
    .option { padding: 14px; }

    /* A little extra vertical trim on the very smallest phones, on top
       of the compact mobile-first defaults above. The eyebrow kicker
       wraps to 2-3 lines at this width even at the requested 16px, so
       line-height (not font-size, which must stay 16px) gets tightened
       here, plus every other bit of slack gets squeezed too, to keep
       that wrap from pushing content below the fold with real margin
       to spare (not just barely passing). */
    .hero-text h1 { line-height: 1.15; }
    .hero-text { padding-top: 0; margin-bottom: 0; }
    .hero-compact { margin-bottom: 0; }
    .screen { padding-top: 6px; }
    .screen-header { margin-bottom: 1px; }
    #screen1 .options { gap: 4px; }
    #screen1 .option-text { min-height: 20px; }
    .trust-item { padding: 1px 5px; }
}

/* ============================================================
   v2 ADDITIONS (medical-alert quiz v2)
   ============================================================ */

/* Subtle clinical tint at the top of the page, fading into --bg */
html { background: linear-gradient(180deg, #E1EFEF 0, var(--bg) 320px) no-repeat, var(--bg); }

/* ---------- Header: Secure Form badge ---------- */
.header { height: auto; min-height: 32px; }
.header-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11.5px;
    line-height: 14px;
    font-weight: 600;
    color: var(--text-dark);
    white-space: nowrap;
}
.secure-badge svg { width: 12px; height: 12px; color: var(--primary); flex-shrink: 0; }
.header-right .disclosure-link { line-height: 12px; }
/* Mobile, step 1: logo | Secure Form (centered) | Advertiser Disclosure in one row.
   From step 2 (disclosure hidden by JS) Secure Form sits on the right. */
@media (max-width: 599px) {
    .layout:has(#screen1.active) .header-right { display: contents; }
}
@media (max-width: 360px) {
    .header { gap: 6px; }
    .logo { height: 20px; }
    .layout:has(#screen1.active) .secure-badge { font-size: 10.5px; gap: 3px; }
    .layout:has(#screen1.active) .secure-badge svg { width: 10px; height: 10px; }
}

/* ---------- Name step: security note ---------- */
.secure-note {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 6px;
    margin: 4px auto 14px;
    max-width: 360px;
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--text-secondary);
    text-align: left;
}
.secure-note svg { width: 14px; height: 14px; margin-top: 2px; color: var(--primary); flex-shrink: 0; }

/* ---------- Step-1-only info under the quiz ---------- */
/* Hidden as soon as any screen other than #screen1 is active */
.layout:has(.screen.active:not(#screen1)) .step1-info { display: none; }
/* On step 1 the info section fills the space below the quiz,
   so the full-viewport min-height of .main isn't needed */
.layout:has(#screen1.active) .main { min-height: 0; padding-bottom: 36px; }

.step1-info { padding: 0 var(--container-padding) 40px; }
.info-block { max-width: 560px; margin: 0 auto 16px; }

.info-partners { text-align: center; padding: 6px 0 10px; }
.info-eyebrow {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    color: var(--text-gray);
    margin-bottom: 12px;
}
.partner-logos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 14px 18px;
}
.partner-logos img { height: 32px; width: auto; max-width: 180px; object-fit: contain; }
.partner-logos img[alt="ADT"] { height: 40px; }

.info-card {
    background: var(--white);
    border-radius: var(--radius-card);
    padding: 24px 18px;
}
.info-title {
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.25;
    text-align: center;
    margin-bottom: 18px;
}

.benefits {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px 12px;
}
.benefit {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 4px;
}
.benefit:last-child { grid-column: 1 / -1; max-width: 200px; margin: 0 auto; }
.benefit-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.benefit-icon svg { width: 22px; height: 22px; }
.benefit-title { font-size: 14.5px; font-weight: 700; line-height: 1.25; }
.benefit-text { font-size: 13px; line-height: 1.4; color: var(--text-secondary); text-wrap: balance; }
.info-footnote { margin-top: 16px; font-size: 11px; line-height: 1.4; color: var(--text-gray); text-align: center; text-wrap: balance; }
.info-title, .secure-note { text-wrap: balance; }
@media (min-width: 600px) {
    .partner-logos { gap: 14px 48px; }
    .partner-logos img { height: 40px; }
    .partner-logos img[alt="ADT"] { height: 48px; }
}
@media (max-width: 360px) {
    .partner-logos { gap: 12px 20px; }
    .partner-logos img { height: 26px; }
    .partner-logos img[alt="ADT"] { height: 34px; }
}

.info-story { display: flex; flex-direction: column; gap: 16px; }
.story-img { display: block; width: 100%; height: auto; border-radius: 14px; }
.story-text p { font-size: 15px; line-height: 1.55; color: var(--text-secondary); }
.story-text p + p { margin-top: 10px; }
.story-text strong { color: var(--text-dark); font-weight: 600; }

.info-cta-wrap { text-align: center; margin-top: 8px; margin-bottom: 0; }
.info-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 360px;
    margin: 0 auto;
    min-height: 54px;
    padding: 0 20px;
    border-radius: var(--radius-btn);
    background: var(--primary);
    color: var(--white);
    font-size: 17px;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(4, 120, 87, 0.25);
}
.info-cta:hover { background: var(--primary-dark); }

@media (min-width: 600px) {
    .header-right { flex-direction: row; align-items: center; gap: 16px; }
    .secure-badge { font-size: 13px; }
    .secure-badge svg { width: 13px; height: 13px; }
    .header-right .disclosure-link { order: 2; }
    .info-block { max-width: 620px; }
    .info-card { padding: 28px 28px; }
    .info-title { font-size: 22px; }
}

@media (min-width: 900px) {
    .info-block { max-width: 860px; }
    .benefits { grid-template-columns: repeat(5, 1fr); }
    .benefit:last-child { grid-column: auto; max-width: none; margin: 0; }
    .info-story { flex-direction: row; align-items: center; gap: 28px; }
    .story-img { flex: 0 0 320px; width: 320px; }
}