/* ============================================================
   PET INSURANCE QUIZ  —  based on the Comparisons.org
   medical-alert quiz template (Gutter iOS UI).
   ============================================================ */

: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: #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: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, 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;
}

.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(242, 244, 247, 0.85);
    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;
}

/* Solid fill with a paw pad at the leading edge */
.quiz-progress-fill {
    position: relative;
    height: 100%;
    min-width: 8px;
    background-color: var(--primary);
    border-radius: 100px;
    transition: width 0.45s var(--ease-ios);
    width: 0%;
}

.quiz-progress-fill::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 0;
    width: 24px;
    height: 24px;
    transform: translate(50%, -50%);
    /* Static paw pad on a white knob at the leading edge (no animation) */
    border-radius: 50%;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='%23047857'%3E%3Cellipse cx='4.6' cy='11.4' rx='2.1' ry='2.7' transform='rotate(-28 4.6 11.4)'/%3E%3Cellipse cx='8.9' cy='6.4' rx='2.3' ry='2.9' transform='rotate(-10 8.9 6.4)'/%3E%3Cellipse cx='15.1' cy='6.4' rx='2.3' ry='2.9' transform='rotate(10 15.1 6.4)'/%3E%3Cellipse cx='19.4' cy='11.4' rx='2.1' ry='2.7' transform='rotate(28 19.4 11.4)'/%3E%3Cpath d='M12 12.4c2.5 0 4.4 2 5.7 4.1 1.1 1.8.5 4.3-1.7 4.7-1.5.3-2.6-.6-4-.6s-2.5.9-4 .6c-2.2-.4-2.8-2.9-1.7-4.7 1.3-2.1 3.2-4.1 5.7-4.1z'/%3E%3C/g%3E%3C/svg%3E") center / 15px 15px no-repeat;
    box-shadow: 0 0 0 1.5px var(--primary), 0 2px 6px rgba(15, 23, 42, 0.18);
}

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

/* Steps 2-7: a bit more room between question, answer and button */
.screen:not(#screen1) .screen-header { margin-bottom: 14px; }

.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;
    text-wrap: balance;
}

/* 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 .eyebrow {
    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;
    text-wrap: balance;
}

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

/* Screen 1 options: 2-up image tiles (Dog / Cat) instead of the
   plain rows used on every other screen. */
#screen1 .options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

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

#screen1 .option-icon {
    width: 100%;
    height: auto;
    flex: none;
    aspect-ratio: 4 / 3;
    background: transparent;
    border-radius: 12px;
}

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

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

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

/* Image / logo placeholders — replace with real <img> (with width/height) */
.img-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    background: #EEF1F4;
    border: 1.5px dashed #C7CCD4;
    border-radius: 12px;
    color: var(--text-gray);
    font-size: 12px;
    font-weight: 600;
    text-align: center;
    padding: 6px;
}

#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-icon.tone-rose { background: #FFF1F2; }
.option-icon.tone-rose svg { color: #E11D48; }

.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: 24px; 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,
.field select {
    width: 100%;
    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 select {
    padding: 0 48px 0 16px;
    height: 92px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%2364748B' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 16px center;
    cursor: pointer;
}

.field select:invalid { color: #94A3B8; }
.field select option { color: var(--text-dark); }

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

.field input.invalid,
.field select.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; }

.btn-continue {
    width: 100%;
    padding: 23px 0;
    margin: 30px 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; }

a.btn-continue { text-decoration: none; }

.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); }
}

/* ============================================================
   BELOW-QUIZ SECTIONS (first question only)
   ============================================================ */
.layout:not(:has(#screen1.active)) .page-sections { display: none; }

/* On the first question the sections follow the quiz directly */
.main:has(#screen1.active) {
    min-height: 0;
    padding-bottom: 40px;
}

.section {
    padding: 44px var(--container-padding);
}

.section-white { background: var(--white); }

.section-inner {
    max-width: 620px;
    margin: 0 auto;
}

.section-center { text-align: center; }

.nowrap { white-space: nowrap; }

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

.section-lead {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.55;
    text-wrap: pretty;
}

/* Trusted Providers */
.trustpilot-logo {
    display: block;
    width: auto;
    height: 40px;
    margin: 0 auto 10px;
}

.partner-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.partner-logo {
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Uniform grey logos (also makes the white Embrace / Fetch logos visible) */
.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    filter: brightness(0);
    opacity: 0.45;
}

.logo-placeholder { height: 64px; }

.match-name .logo-placeholder { width: 150px; height: 56px; }

/* How it works */
.steps {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-top: 20px;
}

.step {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    background: var(--white);
    border-radius: var(--radius-card);
    padding: 18px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.step-badge {
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    font-weight: 700;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.step-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-dark);
    line-height: 1.3;
    margin-bottom: 2px;
}

.step-text {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
}

/* FAQ */
.faq {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 20px;
}

.faq-item {
    background: var(--white);
    border-radius: 14px;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.faq-item summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.35;
    color: var(--text-dark);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary::after {
    content: '';
    flex: none;
    width: 10px;
    height: 10px;
    border-right: 2px solid var(--primary);
    border-bottom: 2px solid var(--primary);
    transform: rotate(45deg) translate(-2px, -2px);
    transition: transform 0.2s var(--ease-ios);
}

.faq-item[open] summary::after { transform: rotate(-135deg) translate(-2px, -2px); }

.faq-answer {
    padding: 0 18px 18px;
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Closing CTA */
/* Cropped to a wider frame so the photo doesn't dominate the section */
.closing-photo {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    object-position: 50% 55%;
    border-radius: var(--radius-card);
    margin-bottom: 22px;
}

@media (min-width: 600px) {
    .closing-photo { aspect-ratio: 2 / 1; }
}

.btn-start { margin-top: 24px; }

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

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

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

.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; }
    .logo { height: 34px; }

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

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

    #screen1 .options { gap: 14px; }
    #screen1 .option-title { font-size: 18px; }

    .section { padding: 60px var(--container-padding); }
    .section-title { font-size: 28px; }
    .partner-grid { gap: 14px; }

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

@media (min-width: 960px) {
    /* All 8 logos in one row on wide screens */
    .section-wide { max-width: 1040px; }
    .partner-grid { grid-template-columns: repeat(8, 1fr); }
    .partner-grid { gap: 28px; }
    .partner-logo { height: 52px; }
}

@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. */
    .typ-page .screen-container {
        max-width: 806px;
    }

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

/* Mobile, steps 2-7: drop the question a little away from the progress bar */
@media (max-width: 599px) {
    #screen2, #screen3, #screen4, #screen5, #screen6, #screen7 { padding-top: 28px; }
}

@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 .eyebrow { 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; }
    .trust-row { gap: 4px; }
    .trust-item { letter-spacing: 0; gap: 3px; }
}

/* Very narrow phones: drop the badge icons so all 3 badges stay on one row */
@media (max-width: 359px) {
    .trust-item svg { display: none; }
}

/* ============================================================
   TYP (typ.html) — "Protection for {name}" hero with dog + cat
   illustration. Mobile first: pets on top, text centered below.
   Desktop: text left, pets right.
   ============================================================ */
.typ-page .header { margin-bottom: 16px; }
.typ-page .main { padding-bottom: 60px; }

.typ-hero {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
    gap: 8px;
    padding: 20px 20px 26px;
    background: linear-gradient(180deg, #F3FBF8 0%, var(--white) 100%);
    border-radius: var(--radius-card);
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
    overflow: hidden;
    text-align: center;
}

.typ-title {
    font-size: 27px;
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1.18;
    color: var(--text-dark);
    margin-bottom: 8px;
    overflow-wrap: anywhere;
}

.typ-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
    line-height: 1.45;
}

/* Illustration stage */
.typ-pets {
    position: relative;
    width: 250px;
    height: 180px;
    flex-shrink: 0;
}

.typ-blob {
    position: absolute;
    left: 50%;
    bottom: 6px;
    width: 200px;
    height: 150px;
    transform: translateX(-50%);
    background: #D1FAE5;
    border-radius: 58% 42% 46% 54% / 60% 55% 45% 40%;
    animation: typBlob 8s ease-in-out infinite alternate;
}

@keyframes typBlob {
    to { border-radius: 44% 56% 58% 42% / 48% 62% 38% 52%; }
}

.typ-pet {
    position: absolute;
    bottom: 0;
    height: auto;
    filter: drop-shadow(0 6px 10px rgba(15, 23, 42, 0.12));
    animation: typPetIn 0.5s var(--ease-ios) both;
}

.typ-pet-dog { left: 18px; width: 150px; z-index: 2; }
.typ-pet-cat { right: 14px; width: 122px; z-index: 1; animation-delay: 0.12s; }

/* Chosen species goes in front */
.typ-pets.cat-first .typ-pet-cat { z-index: 3; }

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

.typ-deco { position: absolute; z-index: 4; }
.typ-heart   { top: 18px; left: 4px; width: 34px; height: 34px; animation: typFloat 3s ease-in-out infinite; }
.typ-sparkle { top: 4px; right: 22px; width: 18px; height: 18px; animation: typFloat 3.6s ease-in-out infinite reverse; }
.typ-leaf    { bottom: 0; right: -6px; width: 30px; height: 46px; z-index: 0; }

@keyframes typFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-5px); }
}

@media (prefers-reduced-motion: reduce) {
    .typ-blob, .typ-pet, .typ-heart, .typ-sparkle { animation: none; }
}

@media (min-width: 700px) {
    .typ-hero {
        flex-direction: row;
        justify-content: space-between;
        text-align: left;
        gap: 24px;
        padding: 28px 28px 24px 40px;
        background: linear-gradient(90deg, #F3FBF8 0%, var(--white) 100%);
    }

    .typ-title { font-size: 34px; }
    .typ-subtitle { font-size: 17px; }

    .typ-pets { width: 300px; height: 210px; }
    .typ-blob { width: 240px; height: 175px; }
    .typ-pet-dog { width: 176px; left: 22px; }
    .typ-pet-cat { width: 142px; right: 18px; }
    .typ-heart { width: 40px; height: 40px; }
}

@media (max-width: 359px) {
    .typ-title { font-size: 24px; }
    .typ-pets { width: 220px; height: 160px; }
    .typ-blob { width: 176px; height: 132px; }
    .typ-pet-dog { width: 132px; left: 14px; }
    .typ-pet-cat { width: 108px; right: 10px; }
}

/* Big green trust badge above "Free, private and no obligation" */
.trust-badge {
    width: 88px;
    height: 88px;
    margin: 0 auto 18px;
    border-radius: 50%;
    background: var(--primary-light);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trust-badge svg { width: 52px; height: 52px; }

@media (min-width: 600px) {
    .trust-badge { width: 104px; height: 104px; }
    .trust-badge svg { width: 60px; height: 60px; }
}