/* ============================================================
   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: #FFFFFF; /* v3: white (answers now have visible borders). v2 used #F5F8F7 */
    --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(255, 255, 255, 0.85); /* v3: matches --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)
   ============================================================ */


/* ---------- 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: Secure Form stacked above Advertiser Disclosure on the right (all steps; disclosure step 1 only) */

/* ---------- 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; }

.secure-note { text-wrap: balance; }

/* ============================================================
   v3: ANSWER BUTTONS - clearly clickable
   Visible border on every answer, hover/press feedback, and the
   heart icon replaced by a radio-style circle (rows) / removed (step-1 tiles).
   ============================================================ */
.option {
    border: 2px solid #D5DEDB;
    box-shadow: 0 3px 10px rgba(15, 23, 42, 0.09);
}
@media (hover: hover) {
    .option:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(4, 120, 87, 0.12); }
}
.option.selected { border-color: var(--primary); }

/* Radio circle instead of the heart */
.option-check {
    width: 22px;
    height: 22px;
    border: 2px solid #C3CCC9;
    border-radius: 50%;
    background: var(--white);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s var(--ease-ios), border-color 0.2s var(--ease-ios);
}
.option-check .shield-icon { display: none; }
.option.selected .option-check { background: var(--primary); border-color: var(--primary); }
.option.selected .option-check::after {
    content: "";
    width: 5px;
    height: 10px;
    border: solid var(--white);
    border-width: 0 2px 2px 0;
    transform: translateY(-1px) rotate(45deg);
}
/* Step-1 image tiles: the original heart in the corner (as on the live page), not the radio circle */
#screen1 .option-check {
    width: 24px;
    height: 26px;
    border: none;
    border-radius: 0;
    background: none;
}
#screen1 .option-check .shield-icon { display: block; }
#screen1 .option.selected .option-check { background: none; }
#screen1 .option.selected .option-check::after { content: none; }
#screen1 .option-title { font-weight: 600; }

/* ============================================================
   v3: STEP-1-ONLY CONTENT UNDER THE QUIZ - full-width bands,
   one idea per band, no boxes inside boxes
   ============================================================ */
/* 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 bands fill the space below the quiz */
.layout:has(#screen1.active) .main { min-height: 0; padding-bottom: 32px; }

/* Sections differ by STRUCTURE (not by stripes/lines): logos open on white,
   steps = 3 bordered cards with big numbers, benefits = one soft mint block */
.band { padding: 0 var(--container-padding); text-align: center; }
.band-inner { max-width: 620px; margin: 0 auto; padding: 28px 0; }
.band-title {
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.25;
    color: var(--text-dark);
    margin-bottom: 18px;
    text-wrap: balance;
}

/* Centered section titles: not bold (Shahar). The benefits title in the mint block stays bold. */
.band-partners .band-title,
.band-steps .band-title,
.band-faq .band-title { font-weight: 500; }
.band-faq .band-title { font-size: 26px; }
@media (min-width: 600px) { .band-faq .band-title { font-size: 32px; } }

/* Footer pushed down on steps 2+ (Alex: 150px from the top) */
.layout:has(.screen.active:not(#screen1)) .site-footer { margin-top: 150px; }

/* Band 1: partners */
/* One subtle full-width strip: closes the quiz and frames the logos as a trust strip */
.band-partners { background: #F1F5F4; }
.band-partners .band-inner { padding: 22px 0 24px; }
.band-partners .band-title { margin-bottom: 14px; }
.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; }

/* Band 2: how it works - 3 cards, big number. Mobile: compact rows (number beside text) */
.band-steps { background: var(--white); }
.steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 420px;
    margin: 0 auto;
}
.step {
    display: flex;
    align-items: center;
    gap: 16px;
    text-align: left;
    padding: 14px 18px;
    background: var(--white);
    border: 1px solid #DDE5E2;
    border-radius: 14px;
}
/* Scoped to .steps - the quiz percent (#quizStepText .step-num) shares the class name */
.steps .step-num {
    flex: none;
    min-width: 40px;
    font-size: 28px;
    font-weight: 700;
    letter-spacing: -0.5px;
    line-height: 1;
    color: var(--primary);
}
.step-title { display: block; font-size: 16px; font-weight: 700; line-height: 1.3; color: var(--text-dark); }
.step-text { display: block; font-size: 14px; line-height: 1.4; color: var(--text-secondary); margin-top: 2px; text-wrap: pretty; }

/* Band 3: benefits - one soft mint block with 2x2 small white cards */
.band-benefits { background: var(--white); }
.benefits-box {
    background: #EEF5F2;
    border-radius: 20px;
    padding: 24px 14px 14px;
}
.benefits {
    list-style: none;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.benefit {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 3px;
    padding: 14px 12px;
    background: var(--white);
    border-radius: 12px;
}
.benefits-eyebrow,
.benefits-intro { display: none; }
.benefit-icon {
    color: var(--primary);
    display: flex;
    margin-bottom: 6px;
}
.benefit-icon svg { width: 22px; height: 22px; }
.benefit-title { font-size: 15px; font-weight: 700; line-height: 1.25; color: var(--text-dark); text-wrap: balance; }
.benefit-text { font-size: 13.5px; line-height: 1.4; color: var(--text-secondary); text-wrap: pretty; }

/* FAQ - collapsible <details>, no JS. Objection-handling only. */
.faq-list { max-width: 620px; margin: 0 auto; text-align: left; border-top: 1px solid #DDE5E2; }
.faq-item { border-bottom: 1px solid #DDE5E2; }
.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 2px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
    text-wrap: balance;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
    content: "+";
    flex: none;
    font-size: 22px;
    font-weight: 400;
    line-height: 1;
    color: var(--primary);
}
.faq-item[open] summary::after { content: "\2212"; }
.faq-item p {
    padding: 0 2px 16px;
    font-size: 15px;
    line-height: 1.55;
    color: var(--text-secondary);
}

/* Band 4: image + one line + CTA back to the quiz */
.band-story .band-inner { padding-bottom: 40px; }
.story-img { display: block; width: 100%; max-width: 420px; height: auto; margin: 0 auto; border-radius: 16px; }
.story-line {
    font-size: 16px;
    line-height: 1.5;
    color: var(--text-secondary);
    max-width: 420px;
    margin: 18px auto 20px;
    text-wrap: balance;
}
.story-line strong { color: var(--text-dark); font-weight: 600; }
.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 (max-width: 360px) {
    .partner-logos { gap: 12px 20px; }
    .partner-logos img { height: 26px; }
    .partner-logos img[alt="ADT"] { height: 34px; }
    .benefits-box { padding: 22px 8px 8px; }
    .benefits { gap: 8px; }
    .benefit { padding: 12px 10px; }
    .benefit-title { font-size: 14.5px; }
    .benefit-text { font-size: 13px; }
    .step { padding: 12px 14px; gap: 12px; }
}

@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; }

    .band { padding: 0 32px; }
    .band-inner { padding: 40px 0; }
    .band-story .band-inner { padding-bottom: 48px; }
    .band-title { font-size: 24px; margin-bottom: 24px; }
    .band-partners .band-inner { padding: 28px 0 30px; }
    .band-partners .band-title { margin-bottom: 18px; }
    .partner-logos { gap: 14px 48px; }
    .partner-logos img { height: 40px; }
    .partner-logos img[alt="ADT"] { height: 48px; }
    .benefits-box { padding: 28px 24px 24px; }
    .benefit { padding: 18px 16px; }
}

@media (min-width: 900px) {
    .band-inner { max-width: 960px; }
    /* Steps: 3 cards in a row, number above */
    .steps { flex-direction: row; max-width: none; gap: 20px; }
    .step { flex: 1; flex-direction: column; align-items: flex-start; gap: 12px; padding: 24px; }
    .steps .step-num { font-size: 36px; }
    /* Benefits: title on the left, 2x2 cards on the right */
    .benefits-box {
        display: grid;
        grid-template-columns: 1fr 1.5fr;
        align-items: center;
        gap: 40px;
        padding: 40px;
        text-align: left;
    }
    /* Bigger closing image on Desktop only (mobile already full width) */
    .story-img { max-width: 600px; }
    .story-line { max-width: 520px; font-size: 17px; }
    .benefits-box .band-title { font-size: 30px; line-height: 1.2; margin-bottom: 14px; }
    .benefits-eyebrow {
        display: block;
        margin-bottom: 10px;
        font-size: 13px;
        font-weight: 700;
        letter-spacing: 1.2px;
        text-transform: uppercase;
        color: var(--primary);
    }
    .benefits-intro {
        display: block;
        font-size: 16px;
        line-height: 1.55;
        color: var(--text-secondary);
        text-wrap: pretty;
    }
}