/* ============================================================ LANDING PAGE V2 - TACTILE MAXIMALISM (High Conversion) Extends the claymorphic depth system with new conversion-focused sections: social proof, comparison, testimonials, trust badges, urgency, risk reversal, and final CTA. Depends on --hiw-* variables from HowItWorksTactile.css and shared classes from TactileEligibility.css ============================================================ */ /* =========================== 0. BASE – ensure all V2 elements use Montserrat MUI CssBaseline sets it on , but some HTML elements (blockquote, cite, figcaption, etc.) may override via UA stylesheet. =========================== */ .lp-hero, .lp-hero blockquote, .lp-hero cite, .lp-hero figcaption, .lp-hero mark, .lp-hero li, [class^='lpv2-'], [class^='lpv2-'] blockquote, [class^='lpv2-'] cite, [class^='lpv2-'] figcaption, [class^='lpv2-'] mark, [class^='lpv2-'] li { font-family: 'Montserrat Variable', sans-serif; } /* =========================== 0B. SECTION SPACING Increase breathing room between all V2 sections =========================== */ .hiw-noise-bg article > * { margin-bottom: 64px; } .hiw-noise-bg .lp-section-heading { text-align: left; } .hiw-noise-bg article > *:last-child { margin-bottom: 0; } /* =========================== 1. HERO ENHANCEMENTS =========================== */ .lpv2-hero-badge { display: inline-flex; align-items: center; gap: 7px; font-size: 0.82rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: #b45309; background: rgba(254, 243, 199, 0.9); border: 1.5px solid rgba(180, 83, 9, 0.25); padding: 8px 18px; border-radius: 100px; margin-bottom: 20px; box-shadow: 0 2px 8px rgba(180, 83, 9, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.7); } .lpv2-hero-badge iconify-icon { display: block; width: 13px; height: 13px; flex-shrink: 0; color: #d97706; } .lpv2-hero-badge__icon-slot { width: 16px; height: 16px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; position: relative; overflow: hidden; flex-shrink: 0; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.85) 0%, transparent 48%), linear-gradient(145deg, rgba(245, 158, 11, 0.28), rgba(217, 119, 6, 0.18)); } .lpv2-hero-badge__icon-slot::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(180, 83, 9, 0.16), inset 0 1px 2px rgba(255, 255, 255, 0.45); } .lpv2-hero-badge__icon { position: relative; z-index: 1; transition: opacity 180ms ease-out; } .lpv2-hero-ctas { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; justify-content: center; } /* Make both CTA buttons the same width */ .lpv2-hero-ctas .hiw-hero-cta, .lpv2-hero-ctas .lpv2-hero-cta-secondary { min-width: 280px; text-align: center; } .lpv2-hero-cta-secondary { display: inline-flex; align-items: center; justify-content: center; /* Match .hiw-hero-cta sizing exactly */ padding: 14px 32px; border-radius: 14px; font-size: 16px; font-weight: 700; color: var(--sapphire-main, #4338ca); text-decoration: none; background: #ffffff; border: 2px solid var(--sapphire-light, #6366f1); box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.04), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.7); transition: transform 450ms var(--hiw-spring-easing, ease), box-shadow 300ms ease, background 200ms ease; white-space: nowrap; } .lpv2-hero-cta-secondary:hover { transform: translateY(-2px); background: rgba(67, 56, 202, 0.04); box-shadow: 6px 8px 18px rgba(0, 0, 0, 0.06), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.7); } .lpv2-hero-cta-secondary:active { transform: translateY(1px) scale(0.99); } .lpv2-hero-anchor { display: block; font-size: 0.85rem; color: #94a3b8; margin-bottom: 4px; } .lpv2-hero-anchor__strike { text-decoration: line-through; color: #cbd5e1; font-weight: 500; } .lpv2-hero-anchor__label { color: #94a3b8; margin-left: 4px; font-weight: 400; } .lpv2-hero-trust-line { font-size: 0.85rem; margin-top: 16px; color: #64748b; text-align: center; } .lpv2-hero-trust-points { display: flex; align-items: center; justify-content: center; gap: 20px; list-style: none; padding: 0; margin: 36px 0 0; } .lpv2-hero-trust-points li { display: flex; align-items: center; gap: 6px; font-size: 0.95rem; color: #64748b; font-weight: 500; } .lpv2-hero-trust-points iconify-icon { display: block; width: 16px; height: 16px; flex-shrink: 0; color: #0d7377; } /* =========================== 1A. HERO SPLIT LAYOUT (text left, checklist right) =========================== */ .lpv2-hero-split { display: grid; grid-template-columns: 1fr 320px; gap: 32px; align-items: center; margin-bottom: 24px; } /* I-751 hero badge text changes width after hydration/font swap. Reserve minimum width to prevent pill reflow in first viewport. min-width (not width) so longer text/copy changes don't overflow. */ .lpv2-hero-split--i751 .lpv2-hero-badge { min-width: 362px; max-width: 100%; justify-content: center; } /* Override .lp-hero defaults for split mode */ .lpv2-hero-split .lp-hero { text-align: left; align-items: flex-start; padding: 32px 0 24px; margin-bottom: 0; background: none; border-radius: 0; } .lpv2-hero-split .lpv2-hero-ctas { justify-content: flex-start; } /* Remove forced min-width so buttons fit the narrower column */ .lpv2-hero-split .lpv2-hero-ctas .hiw-hero-cta, .lpv2-hero-split .lpv2-hero-ctas .lpv2-hero-cta-secondary { min-width: 0; } .lpv2-hero-split .lpv2-hero-trust-line { text-align: left; } .lpv2-hero-split .lpv2-hero-trust-points { justify-content: flex-start; flex-direction: column; align-items: flex-start; gap: 8px; margin-top: 24px; } .lpv2-hero-split__checklist { display: flex; align-items: center; justify-content: flex-end; } /* Tablet: stack vertically */ @media (max-width: 899px) { .lpv2-hero-split { grid-template-columns: 1fr; gap: 8px; } .lpv2-hero-split .lp-hero { text-align: center; align-items: center; } .lpv2-hero-split .lpv2-hero-ctas { justify-content: center; } .lpv2-hero-split .lpv2-hero-trust-line { text-align: center; } .lpv2-hero-split .lpv2-hero-trust-points { justify-content: center; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 20px; } .lpv2-hero-split--i751 .lpv2-hero-badge { width: auto; white-space: normal; } .lpv2-hero-split__checklist { justify-content: center; } } /* Mobile: tighten spacing */ @media (max-width: 599px) { .lpv2-hero-split .lpv2-hero-trust-points { flex-direction: column; align-items: flex-start; gap: 6px; } } /* =========================== 1B. HIGHLIGHTED WORD Italic + orange accent to draw the eye to the key word in the headline. =========================== */ .lpv2-marker-highlight { color: #fb8500; background-color: transparent; font-style: italic; } /* =========================== 1C. PAIN POINTS → SOLUTIONS Five two-panel cards: pain (left) → solution (right) =========================== */ .lpv2-pain-eyebrow { display: block; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #dc2626; margin-bottom: 8px; } .lpv2-pain-cards { display: flex; flex-direction: column; gap: 20px; } .lpv2-pain-card { display: grid; grid-template-columns: 2fr 3fr; background: #ffffff; border-radius: 20px; box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.04), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.5); overflow: hidden; transition: box-shadow 0.25s var(--hiw-spring-easing, ease), transform 0.25s var(--hiw-spring-easing, ease); } .lpv2-pain-card:hover { box-shadow: 6px 8px 18px rgba(0, 0, 0, 0.06), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.5); transform: translateY(-2px); } /* --- Pain side --- */ .lpv2-pain-card__pain { padding: 28px 24px; border-right: 1px solid rgba(0, 0, 0, 0.04); display: flex; flex-direction: column; gap: 8px; } .lpv2-pain-card__number { font-size: 1.8rem; font-weight: 800; line-height: 1; color: rgba(0, 0, 0, 0.06); letter-spacing: -0.02em; } .lpv2-pain-card__pain-title { font-size: 1.05rem; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.3; } .lpv2-pain-card__pain-desc { font-size: 0.85rem; line-height: 1.6; color: #475569; margin: 0; } /* --- Solution side --- */ .lpv2-pain-card__solution { padding: 28px 24px; display: flex; flex-direction: column; gap: 10px; } /* Badges */ .lpv2-pain-card__badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 12px; border-radius: 10px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; width: fit-content; } .lpv2-pain-card__badge iconify-icon { display: block; width: 14px; height: 14px; flex-shrink: 0; } .lpv2-pain-card__badge--solves { background: #ecfdf5; color: #2e7d32; box-shadow: inset 0 1px 2px rgba(46, 125, 50, 0.08); } .lpv2-pain-card__badge--partial { background: #fffbeb; color: #92400e; } .lpv2-pain-card__solution-title { font-size: 1rem; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.3; } .lpv2-pain-card__solution-desc { font-size: 0.85rem; line-height: 1.6; color: #475569; margin: 0; } /* Feature checkmarks */ .lpv2-pain-card__features { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-direction: column; gap: 8px; } .lpv2-pain-card__features li { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #334155; font-weight: 500; } .lpv2-pain-card__check { display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: linear-gradient(145deg, #5eead4 0%, #14b8a6 40%, #0d9488 100%); color: #ffffff; flex-shrink: 0; box-shadow: 0 1px 3px rgba(13, 148, 136, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.3); } .lpv2-pain-card__check iconify-icon { display: block; width: 12px; height: 12px; } /* Honest note box (card 5) */ .lpv2-pain-card__honest-note { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; background: #fffbeb; border-left: 5px solid #fb8500; margin-top: 4px; box-shadow: 2px 2px 6px rgba(251, 133, 0, 0.06), inset 0 1px 2px rgba(255, 255, 255, 0.8); } .lpv2-pain-card__honest-note iconify-icon { display: block; width: 18px; height: 18px; color: #d97706; flex-shrink: 0; margin-top: 2px; } .lpv2-pain-card__honest-note p { font-size: 0.82rem; line-height: 1.6; color: #92400e; margin: 0; } /* =========================== 1D. PROCESS SECTION HEADER =========================== */ .lpv2-process-eyebrow { display: block; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sapphire-main, #4338ca); margin-bottom: 8px; } .lpv2-process-subtitle { text-align: left; font-size: 0.95rem; line-height: 1.6; color: #475569; max-width: 560px; margin: -8px 0 28px; } /* =========================== 1B. WAIT TIMELINE (I-751) =========================== */ .lpv2-wait { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; } .lpv2-wait__intro { position: sticky; top: 100px; } .lpv2-wait__timeline { position: relative; padding-left: 36px; } .lpv2-wait__timeline::before { content: ''; position: absolute; left: 8px; top: 8px; bottom: 0; width: 1px; background: rgba(226, 232, 240, 0.8); } .lpv2-wait__item { position: relative; margin-bottom: 28px; display: flex; gap: 0; } .lpv2-wait__item:last-child { margin-bottom: 0; } .lpv2-wait__marker { position: absolute; left: -32px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: #e2e8f0; border: 2px solid #cbd5e1; flex-shrink: 0; } .lpv2-wait__item--danger .lpv2-wait__marker { background: rgba(220, 38, 38, 0.15); border-color: #dc2626; } .lpv2-wait__item--active .lpv2-wait__marker { background: rgba(13, 115, 119, 0.15); border-color: #0d7377; } .lpv2-wait__content { flex: 1; } .lpv2-wait__month { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: #94a3b8; margin-bottom: 3px; } .lpv2-wait__item--danger .lpv2-wait__month { color: #dc2626; } .lpv2-wait__item--active .lpv2-wait__month { color: #0d7377; } .lpv2-wait__title { font-size: 0.88rem; font-weight: 700; color: #0f172a; margin-bottom: 4px; line-height: 1.3; } .lpv2-wait__body { font-size: 0.78rem; color: #64748b; line-height: 1.55; } @media (max-width: 640px) { .lpv2-wait { grid-template-columns: 1fr; gap: 32px; } .lpv2-wait__intro { position: static; } } /* =========================== 2. SOCIAL PROOF BAR =========================== */ .lpv2-social-bar { display: flex; align-items: stretch; justify-content: center; gap: 0; padding: 24px 32px; border-radius: 24px; background: linear-gradient(135deg, #eef2ff 0%, #f1f5f9 100%); border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: inset 3px 3px 8px rgba(0, 0, 0, 0.04), inset -2px -2px 5px rgba(255, 255, 255, 0.8), 0 1px 3px rgba(0, 0, 0, 0.03); margin-top: 64px; margin-bottom: 56px; } .lpv2-social-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; text-align: center; padding: 4px 24px; border-right: 1px solid rgba(203, 213, 225, 0.7); } .lpv2-social-stat:last-child { border-right: none; } .lpv2-social-stat__number { font-size: 2rem; font-weight: 800; letter-spacing: -0.03em; line-height: 1; } .lpv2-social-stat__label { font-size: 0.82rem; color: #475569; font-weight: 500; line-height: 1.35; max-width: 160px; } /* =========================== 3. STICKY NAV ENHANCEMENT =========================== */ .lpv2-sticky-nav__trust { font-size: 0.72rem; color: #64748b; font-weight: 400; white-space: nowrap; } /* =========================== 4. COMPARISON TABLE =========================== */ .lpv2-comparison { margin-bottom: 8px; } .lpv2-comparison__subheading { text-align: center; font-size: 0.95rem; color: #475569; margin-bottom: 24px; margin-top: -16px; } .lpv2-comparison__table { width: 100%; border-collapse: separate; border-spacing: 0; border-radius: 20px; overflow: hidden; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 4px 4px 14px rgba(0, 0, 0, 0.04), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.5); } .lpv2-comparison__table thead th { padding: 20px 16px; font-size: 0.9rem; font-weight: 700; color: #0f172a; text-align: center; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 2px solid rgba(226, 232, 240, 0.8); } .lpv2-comparison__table thead th:first-child { text-align: left; color: #64748b; font-weight: 600; width: 22%; } .lpv2-comparison__table tbody td { padding: 16px; font-size: 0.88rem; color: #334155; text-align: center; border-bottom: 1px solid rgba(226, 232, 240, 0.5); transition: background 200ms ease; } .lpv2-comparison__table tbody td:first-child { text-align: left; font-weight: 600; color: #475569; font-size: 0.85rem; } .lpv2-comparison__table tbody tr:last-child td { border-bottom: none; } .lpv2-comparison__table tbody tr:hover td { background: rgba(241, 245, 249, 0.5); } /* Highlighted Immiva column */ .lpv2-comparison__highlight { background: rgba(67, 56, 202, 0.03) !important; border-left: 3px solid var(--sapphire-main, #4338ca); border-right: 3px solid var(--sapphire-main, #4338ca); } .lpv2-comparison__highlight-header { background: linear-gradient(180deg, rgba(67, 56, 202, 0.06), rgba(67, 56, 202, 0.03)) !important; border-left: 3px solid var(--sapphire-main, #4338ca); border-right: 3px solid var(--sapphire-main, #4338ca); border-top: 3px solid var(--sapphire-main, #4338ca); border-top-left-radius: 16px; border-top-right-radius: 16px; } .lpv2-comparison__highlight:last-child { border-bottom: 3px solid var(--sapphire-main, #4338ca); border-bottom-left-radius: 16px; border-bottom-right-radius: 16px; } .lpv2-comparison__badge { display: inline-block; padding: 3px 10px; border-radius: 10px; font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #ffffff; background: linear-gradient(135deg, var(--sapphire-light, #6366f1), var(--sapphire-main, #4338ca)); box-shadow: 0 2px 6px var(--sapphire-main-30, rgba(67, 56, 202, 0.3)); margin-top: 6px; } .lpv2-comparison__cell--positive { color: #0d7377; font-weight: 600; } .lpv2-comparison__cell--negative { color: #94a3b8; } .lpv2-comparison__cell--neutral { color: #64748b; } /* Mobile comparison cards */ .lpv2-comparison-cards { display: none; flex-direction: column; gap: 16px; } .lpv2-comparison-card { padding: 24px 20px; border-radius: 20px; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.04), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.5); } .lpv2-comparison-card--highlight { border: 2px solid var(--sapphire-main, #4338ca); background: linear-gradient(135deg, rgba(67, 56, 202, 0.02), rgba(67, 56, 202, 0.01)); } .lpv2-comparison-card__header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; } .lpv2-comparison-card__name { font-size: 1.1rem; font-weight: 700; color: #0f172a; } .lpv2-comparison-card__rows { display: flex; flex-direction: column; gap: 12px; } .lpv2-comparison-card__row { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .lpv2-comparison-card__row-label { font-size: 0.82rem; color: #64748b; font-weight: 500; } .lpv2-comparison-card__row-value { font-size: 0.85rem; text-align: right; flex-shrink: 0; } /* =========================== 5. MID-PAGE CTA =========================== */ .lpv2-mid-cta { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-bottom: 40px; } .lpv2-mid-cta__price-note { font-size: 0.82rem; color: #64748b; } /* =========================== 6. TESTIMONIALS =========================== */ .lpv2-testimonials-eyebrow { display: block; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #0d7377; margin-bottom: 8px; } .lpv2-testimonials { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .lpv2-testimonial-card { position: relative; padding: 28px 24px 20px; border-radius: 20px; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 4px 4px 12px rgba(0, 0, 0, 0.04), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.5); transition: transform 450ms var(--hiw-spring-easing, ease), box-shadow 300ms ease; display: flex; flex-direction: column; gap: 14px; } .lpv2-testimonial-card:hover { transform: translateY(-2px); box-shadow: 6px 8px 18px rgba(0, 0, 0, 0.06), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.5); } .lpv2-testimonial__quotemark { position: absolute; top: 12px; left: 16px; font-size: 2.5rem; line-height: 1; color: rgba(67, 56, 202, 0.08); font-family: Georgia, serif; pointer-events: none; } .lpv2-testimonial__quote { font-size: 0.9rem; line-height: 1.6; color: #334155; font-style: italic; margin: 0; flex: 1; } .lpv2-testimonial__stars { display: flex; gap: 2px; color: #fbbf24; } .lpv2-testimonial__footer { display: flex; flex-direction: column; gap: 2px; } .lpv2-testimonial__author { font-size: 0.88rem; font-weight: 600; color: #0f172a; } .lpv2-testimonial__meta { font-size: 0.75rem; color: #64748b; } /* =========================== 6B. FORMS INCLUDED (Filing Packet) Stacked cards with label / title / description =========================== */ .lpv2-forms-eyebrow { display: block; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #7c3aed; margin-bottom: 8px; } /* =========================== 6C. ORIGIN STORY Founder backstory with callout =========================== */ .lpv2-origin-eyebrow { display: block; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #b45309; margin-bottom: 8px; } .lpv2-origin-body { text-align: left; margin-bottom: 20px; } .lpv2-origin-body p { font-size: 0.95rem; line-height: 1.7; color: #334155; margin: 0 0 14px; } .lpv2-origin-body p:last-child { margin-bottom: 0; } .lpv2-origin-callout { display: flex; align-items: center; gap: 10px; margin-top: 20px; padding: 14px 18px; background: #fffbeb; border-left: 4px solid #f59e0b; border-radius: 12px; font-size: 0.88rem; font-weight: 600; color: #92400e; line-height: 1.4; } /* =========================== 7. TRUST BADGES =========================== */ .lpv2-trust-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; list-style: none; padding: 0; margin: 0; } .lpv2-trust-badge { display: flex; align-items: center; gap: 10px; padding: 12px 18px; border-radius: 16px; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.03), -2px -2px 5px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.6); transition: transform 300ms var(--hiw-spring-easing, ease), box-shadow 300ms ease; } .lpv2-trust-badge:hover { transform: translateY(-1px); box-shadow: 4px 5px 12px rgba(0, 0, 0, 0.05), -2px -2px 5px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.6); } .lpv2-trust-badge__icon { flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.9) 0%, transparent 40%), linear-gradient(145deg, #5eead4, #14b8a6, #0d9488); color: #ffffff; box-shadow: 0 2px 5px rgba(13, 148, 136, 0.3), inset 0 -2px 3px rgba(0, 0, 0, 0.15); } .lpv2-trust-badge__text { font-size: 0.82rem; font-weight: 500; color: #334155; } /* =========================== 8. URGENCY SECTION =========================== */ .lpv2-urgency { padding: 28px 24px; border-radius: 20px; background: linear-gradient(135deg, #ecfeff 0%, #e0f7f4 100%); border-left: 5px solid var(--hiw-teal, #0d7377); box-shadow: 4px 4px 12px rgba(13, 115, 119, 0.06), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.6); display: flex; gap: 20px; align-items: flex-start; } .lpv2-urgency__icon-wrapper { flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: linear-gradient(145deg, #e0f7f4 0%, #ccfbf1 100%); box-shadow: 2px 2px 6px rgba(13, 115, 119, 0.1), inset 0 1px 2px rgba(255, 255, 255, 0.8); color: var(--hiw-teal, #0d7377); font-size: 24px; } .lpv2-urgency__content { flex: 1; } .lpv2-urgency__stat-value { font-size: 1.4rem; font-weight: 800; color: var(--hiw-teal, #0d7377); letter-spacing: -0.02em; margin-bottom: 4px; } .lpv2-urgency__stat-label { font-size: 0.8rem; font-weight: 600; color: #0d7377; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 10px; } .lpv2-urgency__note { font-size: 0.9rem; color: #115e59; line-height: 1.6; margin: 0; } /* =========================== 9. RISK REVERSAL / GUARANTEE =========================== */ .lpv2-guarantee-eyebrow { display: block; text-align: left; font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: #16a34a; margin-bottom: 8px; } .lpv2-guarantee-body { font-size: 0.92rem; color: #334155; line-height: 1.6; text-align: left; margin: 0 0 24px; } .lpv2-guarantee-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .lpv2-guarantee-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 24px 16px; border-radius: 16px; background: #ffffff; border: 1px solid rgba(226, 232, 240, 0.8); box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.03), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.5); transition: transform 300ms var(--hiw-spring-easing, ease), box-shadow 300ms ease; } .lpv2-guarantee-card:hover { transform: translateY(-2px); box-shadow: 5px 6px 16px rgba(0, 0, 0, 0.05), -2px -2px 6px rgba(255, 255, 255, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.5); } .lpv2-guarantee-card__icon { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%); color: var(--sapphire-main, #4338ca); box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.7), 0 1px 3px var(--sapphire-main-10); } .lpv2-guarantee-card__title { font-size: 0.95rem; font-weight: 700; color: #0f172a; margin: 0; line-height: 1.3; } .lpv2-guarantee-card__desc { font-size: 0.85rem; color: #1e293b; line-height: 1.5; margin: 0; } /* =========================== 10. FINAL CTA SECTION =========================== */ .lpv2-final-cta { text-align: center; padding: 40px 24px; border-radius: 28px; background: linear-gradient(180deg, #f1f5f9 0%, rgba(241, 245, 249, 0) 100%); } .lpv2-final-cta .lpv2-hero-ctas { justify-content: center; } .lpv2-final-cta__heading { font-size: 1.5rem; font-weight: 700; color: #0f172a; letter-spacing: -0.025em; margin: 0 0 12px; } .lpv2-final-cta__subheading { font-size: 1rem; color: #475569; margin: 0 0 24px; line-height: 1.6; } .lpv2-final-cta__price-compare { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 24px; flex-wrap: wrap; } .lpv2-final-cta__price-old { font-size: 1rem; color: #94a3b8; text-decoration: line-through; } .lpv2-final-cta__price-divider { color: #cbd5e1; font-weight: 300; } .lpv2-final-cta__price-new { font-size: 1.25rem; font-weight: 800; color: #0d7377; } .lpv2-final-cta__trust-line { font-size: 0.78rem; color: #64748b; margin-top: 16px; } /* =========================== 11. RESPONSIVE =========================== */ @media (max-width: 599px) { .lpv2-hero-ctas { flex-direction: column; width: 100%; } .lpv2-hero-cta-secondary { padding: 14px 28px; font-size: 0.92rem; } .lpv2-hero-trust-points { flex-direction: column; gap: 6px; align-items: flex-start; } .lpv2-pain-card { grid-template-columns: 1fr; } .lpv2-pain-card__pain { border-right: none; border-bottom: 1px solid rgba(0, 0, 0, 0.04); padding: 20px 20px 16px; } .lpv2-pain-card__solution { padding: 16px 20px 20px; } .lpv2-social-bar { flex-wrap: wrap; gap: 0; padding: 20px 16px; border-radius: 20px; } .lpv2-social-stat { flex: 0 0 calc(50% - 8px); border-right: none; border-bottom: 1px solid rgba(203, 213, 225, 0.7); padding: 12px 16px; } .lpv2-social-stat:nth-child(odd) { border-right: 1px solid rgba(203, 213, 225, 0.7); } .lpv2-social-stat:nth-last-child(-n + 2) { border-bottom: none; } .lpv2-social-stat__number { font-size: 1.6rem; } .lpv2-comparison__table { display: none; } .lpv2-comparison-cards { display: flex; } .lpv2-testimonials { grid-template-columns: 1fr; gap: 16px; } .lpv2-trust-badges { gap: 10px; } .lpv2-trust-badge { flex: 0 0 calc(50% - 5px); padding: 10px 12px; } .lpv2-trust-badge__text { font-size: 0.75rem; } .lpv2-urgency { flex-direction: column; padding: 20px 16px; border-radius: 16px; gap: 12px; } .lpv2-urgency__icon-wrapper { width: 36px; height: 36px; font-size: 20px; } .lpv2-guarantee-grid { grid-template-columns: 1fr; gap: 12px; } .lpv2-final-cta { padding: 28px 16px; border-radius: 24px; } .lpv2-final-cta__heading { font-size: 1.25rem; } .lpv2-sticky-nav__trust { display: none; } } @media (max-width: 899px) and (min-width: 600px) { .lpv2-testimonials { grid-template-columns: 1fr 1fr; } .lpv2-testimonials > :last-child { grid-column: 1 / -1; max-width: 50%; justify-self: center; } } /* =========================== 12. FEATURES DEMO SECTION =========================== */ .lpv2-features { position: relative; margin-top: 56px; margin-bottom: 80px; border-radius: 32px; overflow: hidden; } /* Animated mesh gradient background */ .lpv2-features__gradient-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 10% 70%, rgba(99, 102, 241, 0.18) 0%, transparent 55%), radial-gradient(ellipse 70% 50% at 90% 20%, rgba(139, 92, 246, 0.14) 0%, transparent 50%), radial-gradient(ellipse 60% 40% at 50% 100%, rgba(67, 56, 202, 0.10) 0%, transparent 55%), linear-gradient(135deg, #f0f4ff 0%, #faf5ff 50%, #f5f3ff 100%); animation: lpv2-mesh-drift 12s ease-in-out infinite alternate; z-index: 0; } @keyframes lpv2-mesh-drift { 0% { background-position: 0% 0%, 100% 0%, 50% 100%, 0% 0%; } 100% { background-position: 20% 10%, 80% 10%, 50% 90%, 0% 0%; } } .lpv2-features__content { position: relative; z-index: 1; padding: 48px 32px; } .lpv2-features__header { text-align: left; margin-bottom: 48px; } .lpv2-features__eyebrow { display: block; font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sapphire-main, #4338ca); margin-bottom: 10px; } .lpv2-features__heading { margin-bottom: 0 !important; } /* Bento layout: video (65%) left, compact 2x3 grid (35%) right */ .lpv2-features__layout { display: grid; grid-template-areas: "video selector"; grid-template-columns: 65fr 35fr; gap: 32px; align-items: start; } .lpv2-features__video-panel { grid-area: video; display: flex; align-items: stretch; } .lpv2-features__selector { grid-area: selector; } /* --- Clean video container with deep layered shadows (floating effect) --- */ .lpv2-features__video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(145deg, #eef2ff 0%, #e0e7ff 100%); /* Multi-stage layered shadow for high tactile depth */ box-shadow: /* Ambient glow - diffused brand halo */ 0 0 60px rgba(99, 102, 241, 0.08), 0 0 100px rgba(139, 92, 246, 0.04), /* Primary elevation shadow */ 0 50px 100px -20px rgba(67, 56, 202, 0.2), /* Mid-range shadow */ 0 25px 50px -12px rgba(67, 56, 202, 0.12), /* Close shadow for crispness */ 0 10px 20px -6px rgba(0, 0, 0, 0.06), /* Contact shadow */ 0 4px 8px -2px rgba(0, 0, 0, 0.04); border: 1px solid rgba(255, 255, 255, 0.8); } /* Poster sits behind video, visible during loading/transitions */ .lpv2-features__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Video layered on top of poster */ .lpv2-features__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; opacity: 0; transform: scale(0.97); transition: opacity 300ms ease-out, transform 350ms linear(0, 0.3772, 0.8604, 1.0738, 1.0846, 1.0353, 1.0006, 0.991, 0.9941, 0.9985, 1.0006, 1); } .lpv2-features__video--visible { opacity: 1; transform: scale(1); } /* --- Feature selector (single column, compact list matching 16:9 video height) --- */ .lpv2-features__selector { display: flex; flex-direction: column; gap: 6px; align-content: start; } .lpv2-features__tab { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; padding: 10px 14px; border-radius: 14px; /* Glassmorphism: frosted glass effect */ background: rgba(255, 255, 255, 0.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 0.5px solid rgba(255, 255, 255, 0.6); /* Subtle low-elevation shadow for inactive state */ box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03), 0 1px 2px rgba(0, 0, 0, 0.02), inset 0 1px 1px rgba(255, 255, 255, 0.8); cursor: pointer; text-align: left; position: relative; overflow: hidden; font-family: 'Montserrat Variable', sans-serif; /* Spring animation for premium tactile feel */ transition: transform 350ms linear(0, 0.3772, 0.8604, 1.0738, 1.0846, 1.0353, 1.0006, 0.991, 0.9941, 0.9985, 1.0006, 1), box-shadow 300ms ease-out, border-color 300ms ease-out, background 300ms ease-out, padding 300ms ease-out; } .lpv2-features__tab:hover:not(.lpv2-features__tab--active) { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(99, 102, 241, 0.08), 0 2px 6px rgba(0, 0, 0, 0.04), inset 0 1px 1px rgba(255, 255, 255, 0.9); border-color: rgba(99, 102, 241, 0.15); background: rgba(255, 255, 255, 0.6); } .lpv2-features__tab:active { transform: translateY(0) scale(0.98); transition-duration: 100ms; } .lpv2-features__tab:focus-visible { outline: 3px solid var(--sapphire-light, #6366f1); outline-offset: 2px; } .lpv2-features__tab--active { /* Active "lift" - card rises toward user */ transform: translateY(-3px) scale(1.02); padding: 12px 16px; border-color: rgba(99, 102, 241, 0.25); background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); /* Deep multi-layered shadow for elevated feel */ box-shadow: /* Ambient glow */ 0 0 0 1px rgba(99, 102, 241, 0.08), 0 0 24px rgba(99, 102, 241, 0.08), /* Primary elevation - large diffused shadow */ 0 20px 40px -10px rgba(67, 56, 202, 0.18), /* Mid-range shadow */ 0 10px 20px -8px rgba(67, 56, 202, 0.12), /* Close contact shadow */ 0 4px 8px -4px rgba(0, 0, 0, 0.06), /* Inner highlight for surface gloss */ inset 0 1px 2px rgba(255, 255, 255, 1); } /* Icon wrapper with progress ring */ .lpv2-features__tab-icon-wrap { position: relative; flex-shrink: 0; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } /* Progress ring (SVG) */ .lpv2-features__progress-ring { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(-90deg); pointer-events: none; } .lpv2-features__progress-ring-fill { transition: stroke-dashoffset 0.15s linear; } /* Icon with 3D/gradient style */ .lpv2-features__tab-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 8px; background: linear-gradient(145deg, #e8ecff 0%, #d4dbff 100%); color: #6366f1; box-shadow: 0 2px 4px rgba(99, 102, 241, 0.08), inset 0 1px 1px rgba(255, 255, 255, 0.9); transition: transform 350ms linear(0, 0.3772, 0.8604, 1.0738, 1.0846, 1.0353, 1.0006, 0.991, 0.9941, 0.9985, 1.0006, 1), background 300ms ease-out, color 300ms ease-out, box-shadow 300ms ease-out; } .lpv2-features__tab--active .lpv2-features__tab-icon { background: linear-gradient(145deg, #6366f1 0%, #8b5cf6 100%); color: #ffffff; box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4), 0 2px 4px rgba(99, 102, 241, 0.2), inset 0 1px 2px rgba(255, 255, 255, 0.25); } .lpv2-features__tab-text { display: flex; flex-direction: column; gap: 2px; text-align: left; flex: 1; min-width: 0; } .lpv2-features__tab-label { display: block; font-size: 0.8rem; font-weight: 600; color: #1e1b4b; line-height: 1.3; } .lpv2-features__tab--active .lpv2-features__tab-label { font-weight: 700; color: var(--sapphire-main, #4338ca); } /* Description hidden by default, shown only on active card */ .lpv2-features__tab-desc { font-size: 0.75rem; font-weight: 500; color: #64748b; line-height: 1.35; margin-top: 0; max-height: 0; opacity: 0; overflow: hidden; transition: all 300ms ease-in-out; } .lpv2-features__tab--active .lpv2-features__tab-desc { max-height: 40px; opacity: 1; margin-top: 2px; } /* --- Trust footer --- */ .lpv2-features__trust-footer { display: flex; justify-content: center; gap: 32px; margin-top: 48px; padding-top: 32px; border-top: 1px solid rgba(99, 102, 241, 0.1); } .lpv2-features__trust-badge { display: flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 600; color: #475569; font-family: 'Montserrat Variable', sans-serif; } .lpv2-features__trust-badge iconify-icon, .lpv2-features__trust-badge svg { color: var(--sapphire-main, #4338ca); opacity: 0.85; } /* =========================== 12B. FEATURES — RESPONSIVE =========================== */ /* Tablet: stack layout for better readability */ @media (max-width: 899px) and (min-width: 600px) { .lpv2-features__content { padding: 44px 28px; } .lpv2-features__layout { grid-template-areas: "video" "selector"; grid-template-columns: 1fr; gap: 20px; } .lpv2-features__video-wrap { max-width: 100%; } .lpv2-features__selector { flex-direction: row; flex-wrap: wrap; gap: 8px; } .lpv2-features__tab { flex: 1 1 calc(50% - 4px); padding: 10px 12px; gap: 8px; border-radius: 12px; } .lpv2-features__tab-icon-wrap { width: 32px; height: 32px; } .lpv2-features__tab-icon { width: 24px; height: 24px; border-radius: 6px; } .lpv2-features__progress-ring { transform: translate(-50%, -50%) rotate(-90deg) scale(0.7); } .lpv2-features__tab-label { font-size: 0.72rem; } .lpv2-features__tab-desc { font-size: 0.65rem; } .lpv2-features__trust-footer { gap: 24px; flex-wrap: wrap; } .lpv2-features__trust-badge { font-size: 0.72rem; } } /* Mobile: video on top, horizontal scrollable tabs below */ @media (max-width: 599px) { .lpv2-features { border-radius: 24px; } .lpv2-features__content { padding: 36px 18px; } .lpv2-features__header { margin-bottom: 28px; } .lpv2-features__layout { display: flex; flex-direction: column; gap: 16px; } .lpv2-features__video-panel { width: 100%; } .lpv2-features__video-wrap { border-radius: 20px; /* 16:9 aspect ratio maintained on mobile */ } .lpv2-features__selector { display: flex; flex-direction: row; overflow-x: auto; gap: 10px; padding-bottom: 8px; scrollbar-width: none; -ms-overflow-style: none; scroll-snap-type: x mandatory; } .lpv2-features__selector::-webkit-scrollbar { display: none; } .lpv2-features__tab { flex-shrink: 0; flex-direction: column; align-items: center; justify-content: center; text-align: center; width: 90px; padding: 12px 8px; gap: 6px; border-radius: 16px; scroll-snap-align: start; } .lpv2-features__tab-text { text-align: center; } .lpv2-features__tab-icon-wrap { width: 40px; height: 40px; } .lpv2-features__tab-icon { width: 28px; height: 28px; border-radius: 8px; } .lpv2-features__progress-ring { transform: translate(-50%, -50%) rotate(-90deg) scale(0.7); } .lpv2-features__tab-label { font-size: 0.62rem; white-space: normal; line-height: 1.2; } /* Hide description on mobile for compact tabs */ .lpv2-features__tab--active .lpv2-features__tab-desc { display: none; } .lpv2-features__trust-footer { flex-direction: column; align-items: center; gap: 14px; margin-top: 32px; padding-top: 24px; } .lpv2-features__trust-badge { font-size: 0.72rem; } } /* =========================== 13. REDUCED MOTION =========================== */ @media (prefers-reduced-motion: reduce) { .lpv2-pain-card, .lpv2-hero-cta-secondary, .lpv2-testimonial-card, .lpv2-trust-badge, .lpv2-comparison__table tbody td, .lpv2-features__tab, .lpv2-features__tab-icon, .lpv2-features__gradient-bg, .lpv2-features__progress-ring-fill { animation: none; transition: none; } } /* ============================================================ PRE-FILING CHECKLIST - Animated scan report card ============================================================ */ @keyframes pfc-spin { to { transform: rotate(360deg); } } @keyframes pfc-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes pfc-fade-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } /* ---- Claymorphic card shell ---- */ .pfc-card { font-family: 'Montserrat Variable', system-ui, sans-serif; background: #ffffff; border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 24px; box-shadow: 8px 8px 20px rgba(0, 0, 0, 0.06), -4px -4px 12px rgba(255, 255, 255, 0.9), inset 0 1px 2px rgba(255, 255, 255, 0.6); overflow: hidden; width: 320px; } /* ---- Header ---- */ .pfc-header { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 20px 12px; background: linear-gradient(135deg, #312e81, #4338ca); border-bottom: none; } .pfc-header__title { color: #ffffff; font-size: 0.9rem; font-weight: 700; letter-spacing: -0.015em; } .pfc-header__subtitle { color: rgba(255, 255, 255, 0.82); font-size: 0.68rem; font-weight: 500; line-height: 1.25; min-height: 0.85rem; font-variant-numeric: tabular-nums; margin-top: 2px; } /* Badge — clay pill */ .pfc-header__badge { display: flex; align-items: center; justify-content: flex-start; gap: 6px; font-size: 0.66rem; font-weight: 600; color: #ffffff; background: rgba(255, 255, 255, 0.18); padding: 4px 10px; border-radius: 20px; white-space: nowrap; width: 106px; min-height: 24px; box-shadow: inset 0 1px 2px rgba(255, 255, 255, 0.15); } .pfc-badge-slot { width: 11px; height: 11px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; } .pfc-badge-pulse, .pfc-badge-check { width: 11px; height: 11px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; } .pfc-header__badge-text { min-width: 72px; display: inline-block; text-align: left; } .pfc-header__badge--done { color: #ffffff; background: rgba(13, 210, 180, 0.25); } .pfc-badge-pulse { border-radius: 50%; background: rgba(255, 255, 255, 0.8); animation: pfc-pulse 1.2s ease-in-out infinite; } .pfc-badge-check { font-weight: 700; } .pfc-badge-alert { font-weight: 800; font-size: 0.58rem; line-height: 1; } /* ---- Progress bar ---- */ .pfc-progress-track { height: 3px; background: rgba(67, 56, 202, 0.06); margin: 0 20px; border-radius: 2px; } .pfc-progress-fill { height: 100%; border-radius: 2px; background: linear-gradient(90deg, #4338ca, #6366f1); transition: width 0.35s ease-out; } /* ---- Check rows ---- */ .pfc-checks { position: relative; padding: 6px 0 0; } /* Fixed-height window — rows expand inside but card height stays stable */ .pfc-checks__list { height: 260px; overflow: hidden; } .pfc-checks__fade { height: 24px; background: linear-gradient(to bottom, transparent, #ffffff); pointer-events: none; } .pfc-checks__more { text-align: center; font-size: 0.68rem; font-weight: 600; color: #475569; padding: 0 0 10px; letter-spacing: 0.01em; } .pfc-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 20px; transition: background 0.25s, opacity 0.25s; } .pfc-row--pending { opacity: 0.3; } .pfc-row--active { opacity: 1; background: rgba(67, 56, 202, 0.04); border-left: 3px solid #6366f1; padding-left: 17px; } .pfc-row--passed { opacity: 1; } .pfc-row--warn { opacity: 1; } .pfc-row--warn .pfc-row__label { color: #92400e; font-weight: 600; } /* Icons */ .pfc-icon { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; margin-top: 2px; } .pfc-icon--pending { width: 8px; height: 8px; margin: 4px; border-radius: 50%; background: #cbd5e1; } .pfc-icon--active { width: 10px; height: 10px; margin: 3px; border-radius: 50%; border: 2px solid #6366f1; border-top-color: transparent; animation: pfc-spin 0.7s linear infinite; } .pfc-icon--passed svg, .pfc-icon--warn svg { display: block; } /* Row content */ .pfc-row__content { flex: 1; min-width: 0; } .pfc-row__label { font-size: 0.75rem; font-weight: 500; color: #475569; line-height: 1.3; } .pfc-row--active .pfc-row__label { color: #312e81; font-weight: 600; } .pfc-row--passed .pfc-row__label { color: #0f172a; font-weight: 600; } .pfc-row__desc { font-size: 0.65rem; color: #64748b; margin-top: 1px; line-height: 1.35; animation: pfc-fade-in 0.3s ease-out; } /* ---- Footer ---- */ .pfc-footer { padding: 10px 20px 14px; border-top: 1px solid rgba(67, 56, 202, 0.06); font-size: 0.7rem; } .pfc-footer__remaining { color: #64748b; } .pfc-footer__done { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .pfc-footer__result { color: #0d7377; font-weight: 600; } .pfc-footer__replay { background: none; border: none; color: #64748b; font-size: 0.68rem; cursor: pointer; padding: 4px 8px; border-radius: 8px; transition: color 0.2s, background 0.2s; font-family: inherit; } .pfc-footer__replay:hover { color: #4338ca; background: rgba(67, 56, 202, 0.06); } /* ---- Mobile adjustments ---- */ @media (max-width: 480px) { .pfc-card { width: 100%; border-radius: 20px; } .pfc-header { padding: 12px 16px 10px; flex-wrap: wrap; } .pfc-progress-track { margin: 0 16px; } .pfc-row { padding: 7px 16px; } .pfc-row--active { padding-left: 13px; } .pfc-footer { padding: 10px 16px 12px; } .pfc-footer__done { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ================================================================ I-751 PRE-FILING CHECKLIST Extends pfc-card / pfc-header / pfc-footer — adds pass/warn/block ================================================================ */ /* Header badge variants */ .pfc-header__badge--warn { background: rgba(180, 83, 9, 0.2); color: #fbbf24; } .pfc-header__badge--block { background: rgba(220, 38, 38, 0.2); color: #fca5a5; } /* Footer result warn variant */ .pfc-footer__result--warn { color: #b45309; } /* Check rows container */ .i751pfc-checks { padding: 6px 0; } /* Row base */ .i751pfc-row { display: flex; align-items: flex-start; gap: 10px; padding: 9px 20px; transition: background 0.2s, opacity 0.2s; } .i751pfc-row--idle { opacity: 0.3; } .i751pfc-row--scanning { opacity: 1; background: rgba(67, 56, 202, 0.04); border-left: 3px solid #6366f1; padding-left: 17px; } .i751pfc-row--pass, .i751pfc-row--warn, .i751pfc-row--block { opacity: 1; } /* Icons */ .i751pfc-icon { flex-shrink: 0; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; margin-top: 1px; transition: all 0.25s; } .i751pfc-icon--idle { background: #f1f5f9; border: 1.5px solid #e2e8f0; } @keyframes i751pfc-shimmer { 0% { transform: translateX(-100%); } 100% { transform: translateX(100%); } } .i751pfc-icon--scanning { background: rgba(99, 102, 241, 0.1); border: 1.5px solid rgba(99, 102, 241, 0.3); position: relative; overflow: hidden; } .i751pfc-icon--scanning::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0%, rgba(99, 102, 241, 0.35) 50%, transparent 100%); animation: i751pfc-shimmer 1.2s ease-in-out infinite; } .i751pfc-icon--pass { background: rgba(13, 115, 119, 0.1); border: 1.5px solid rgba(13, 115, 119, 0.35); color: #0d7377; } .i751pfc-icon--warn { background: rgba(180, 83, 9, 0.1); border: 1.5px solid rgba(180, 83, 9, 0.3); color: #b45309; } .i751pfc-icon--block { background: rgba(220, 38, 38, 0.1); border: 1.5px solid rgba(220, 38, 38, 0.3); color: #dc2626; } /* Content */ .i751pfc-content { flex: 1; min-width: 0; } .i751pfc-label { font-size: 0.75rem; font-weight: 500; color: #475569; line-height: 1.3; } .i751pfc-row--scanning .i751pfc-label { color: #312e81; font-weight: 600; } .i751pfc-row--pass .i751pfc-label, .i751pfc-row--warn .i751pfc-label, .i751pfc-row--block .i751pfc-label { color: #0f172a; font-weight: 600; } .i751pfc-desc { font-size: 0.65rem; color: #64748b; margin-top: 1px; line-height: 1.35; animation: pfc-fade-in 0.3s ease-out; } /* Tag labels */ .i751pfc-tag { flex-shrink: 0; font-size: 0.58rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-top: 2px; animation: pfc-fade-in 0.25s ease-out; } .i751pfc-tag--pass { background: rgba(13, 115, 119, 0.1); color: #0d7377; } .i751pfc-tag--warn { background: rgba(180, 83, 9, 0.1); color: #b45309; } .i751pfc-tag--block { background: rgba(220, 38, 38, 0.1); color: #dc2626; } @media (max-width: 480px) { .i751pfc-row { padding: 7px 16px; } .i751pfc-row--scanning { padding-left: 13px; } }