.hero { background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); min-height: 65vh; display: flex; align-items: center; justify-content: center; color: var(--color-bg-card); padding: var(--space-32) var(--space-4) var(--space-16); text-align: center; position: relative; } .hero__headline { font-family: var(--font-heading); font-size: var(--text-5xl); font-weight: var(--font-bold); line-height: var(--leading-tight); margin-bottom: var(--space-4); color: var(--color-bg-card); } .hero__subtitle { font-size: var(--text-xl); color: var(--color-slate-300); margin-bottom: var(--space-8); max-width: 600px; margin-left: auto; margin-right: auto; } .hero__search { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); max-width: 600px; margin: 0 auto; } .hero__search .form-input { width: 100%; text-align: center; font-size: var(--text-lg); color: var(--color-text); } .hero__search .btn { width: 100%; max-width: 280px; } .hero__trust { margin-top: var(--space-8); color: var(--color-slate-300); font-size: var(--text-sm); } .hero__trust-item { display: inline-flex; align-items: center; gap: var(--space-2); } .hero__trust-item .icon { color: var(--color-green-400); } .hero__stats { margin-top: var(--space-4); color: var(--color-slate-400); font-size: var(--text-sm); } .hero__tabs { justify-content: center; border-bottom-color: rgba(255, 255, 255, 0.2); margin-bottom: var(--space-4); } .hero__tabs .tabs__tab { color: rgba(255, 255, 255, 0.6); border-bottom-color: transparent; font-size: var(--text-sm); font-weight: var(--font-semibold); } .hero__tabs .tabs__tab--active { color: #fff; border-bottom-color: var(--color-cta); } .hero__tabs .tabs__tab:hover:not(.tabs__tab--active) { color: rgba(255, 255, 255, 0.85); } .hero__tab-panel { } .hero__plate-row { display: flex; gap: var(--space-3); width: 100%; align-items: center; } .hero__state-select { max-width: 160px; flex-shrink: 0; } .hero--collapsed .hero__tabs { display: none; } .hero--collapsed .hero__plate-row { flex-direction: row; flex: 1; } .hero--collapsed .sample-report-cta-row, .hero--collapsed .trust-row { display: none; } .navbar--glass { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); background: rgba(30, 41, 59, 0.85); border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background-color var(--transition-slow), backdrop-filter var(--transition-slow), box-shadow var(--transition-slow); } @supports (backdrop-filter: blur(12px)) { .navbar--glass { background: rgba(30, 41, 59, 0.3); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } } .navbar--glass .navbar__brand, .navbar--glass .navbar__link { color: rgba(255, 255, 255, 0.9); } .navbar--glass .navbar__link:hover, .navbar--glass .navbar__link--active { color: var(--color-bg-card); background-color: rgba(255, 255, 255, 0.1); } .navbar--solid { position: fixed; top: 0; left: 0; right: 0; z-index: var(--z-sticky); background: var(--color-slate-800); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: var(--shadow-md); border-bottom: 1px solid transparent; transition: background-color var(--transition-slow), backdrop-filter var(--transition-slow), box-shadow var(--transition-slow); } .navbar--solid .navbar__brand, .navbar--solid .navbar__link { color: rgba(255, 255, 255, 0.9); } .navbar--solid .navbar__link:hover, .navbar--solid .navbar__link--active { color: var(--color-bg-card); background-color: rgba(255, 255, 255, 0.1); } .navbar--glass .btn--ghost, .navbar--solid .btn--ghost { color: rgba(255, 255, 255, 0.9); border-color: rgba(255, 255, 255, 0.3); } .navbar--glass .btn--ghost:hover, .navbar--solid .btn--ghost:hover { background-color: rgba(255, 255, 255, 0.15); color: #fff; border-color: rgba(255, 255, 255, 0.5); } .navbar--glass .btn--primary, .navbar--solid .btn--primary { background-color: var(--color-cta); color: #fff; } .navbar--glass .btn--secondary, .navbar--solid .btn--secondary { background-color: rgba(255, 255, 255, 0.15); color: rgba(255, 255, 255, 0.9); border: 1px solid rgba(255, 255, 255, 0.3); } .navbar--glass .btn--secondary:hover, .navbar--solid .btn--secondary:hover { background-color: rgba(255, 255, 255, 0.25); color: #fff; } .navbar .dropdown__menu { right: 0; left: auto; } .section { padding: var(--space-20) var(--space-4); } .section--gray { background: var(--color-slate-50); } .section--white { background: var(--color-bg-card); } .reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .reveal.is-visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } } .steps { display: flex; gap: var(--space-6); justify-content: center; flex-wrap: wrap; } .steps > .card { flex: 1; min-width: 200px; max-width: 320px; box-shadow: var(--shadow-md); border: 1px solid var(--color-border); } .steps__icon { color: var(--color-primary); margin-bottom: var(--space-2); } .testimonials { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-6); max-width: 960px; margin: 0 auto; } .testimonial-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-6); } .testimonial-card__stars { color: var(--color-amber-400); margin-bottom: var(--space-3); display: flex; gap: var(--space-0-5); } .testimonial-card__quote { font-size: var(--text-base); color: var(--color-text-muted); line-height: var(--leading-relaxed); margin-bottom: var(--space-4); font-style: italic; } .testimonial-card__author { font-weight: var(--font-semibold); color: var(--color-text); font-size: var(--text-sm); } .pricing-section { display: block; max-width: 960px; margin: 0 auto; } .pricing-card { background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: var(--space-8); text-align: center; transition: box-shadow var(--transition-base), transform var(--transition-base); } .pricing-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); } .pricing-card--featured { border-color: var(--color-primary); box-shadow: var(--shadow-lg); position: relative; } .pricing-card--featured::before { content: 'Most Popular'; position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); background: var(--color-primary); color: var(--color-bg-card); font-size: var(--text-xs); font-weight: var(--font-semibold); padding: var(--space-1) var(--space-4); border-radius: var(--radius-full); text-transform: uppercase; letter-spacing: 0.05em; } .pricing-card__name { font-size: var(--text-lg); font-weight: var(--font-semibold); color: var(--color-text); margin-bottom: var(--space-2); } .pricing-card__price { font-size: var(--text-4xl); font-weight: var(--font-bold); color: var(--color-text); margin-bottom: var(--space-1); } .pricing-card__price span { font-size: var(--text-base); font-weight: var(--font-regular); color: var(--color-text-muted); } .pricing-card__features { list-style: none; padding: 0; margin: var(--space-6) 0; text-align: left; } .pricing-card__features li { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) 0; color: var(--color-text-muted); font-size: var(--text-sm); } .pricing-card__features li .icon { color: var(--color-success); flex-shrink: 0; } .faq__item { border-bottom: 1px solid var(--color-border); } .faq__question { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: var(--space-5) 0; background: none; border: none; cursor: pointer; font-size: var(--text-base); font-weight: var(--font-medium); color: var(--color-text); text-align: left; font-family: inherit; line-height: var(--leading-normal); } .faq__question:hover { color: var(--color-primary); } .faq__question:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: var(--radius-sm); } .faq__chevron { flex-shrink: 0; transition: transform var(--transition-slow); color: var(--color-text-muted); } .faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .faq__answer-inner { padding: 0 0 var(--space-5) 0; color: var(--color-text-muted); line-height: var(--leading-relaxed); font-size: var(--text-sm); } .faq__item--open .faq__chevron { transform: rotate(180deg); } .faq__item--open .faq__answer { max-height: 500px; } .footer { background: var(--color-slate-800); color: var(--color-slate-200); padding: var(--space-16) var(--space-4) var(--space-8); } .footer__grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1.5fr 1fr; gap: var(--space-8); margin-bottom: var(--space-12); } .footer__heading--stacked { margin-top: var(--space-6); } .footer__column--brand .footer__logo { text-decoration: none; color: var(--color-bg-card); font-family: var(--font-heading); font-weight: var(--font-bold); font-size: var(--text-xl); margin-bottom: var(--space-3); display: inline-flex; align-items: center; gap: var(--space-2); } .footer__logo img { width: 32px; height: 32px; max-height: 32px; object-fit: contain; flex-shrink: 0; } .footer__tagline { color: var(--color-slate-400); font-size: var(--text-sm); line-height: var(--leading-relaxed); margin-top: var(--space-3); } .footer__heading { font-family: var(--font-heading); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-bg-card); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-4); } .footer__links { list-style: none; padding: 0; margin: 0; } .footer__links li { margin-bottom: var(--space-2); } .footer__link { color: var(--color-slate-400); text-decoration: none; font-size: var(--text-sm); transition: color var(--transition-fast); } .footer__link:hover { color: var(--color-bg-card); } .footer__bottom { border-top: 1px solid var(--color-slate-700); padding-top: var(--space-6); text-align: center; font-size: var(--text-sm); color: var(--color-slate-500); } .bottom-tab-bar { position: fixed; bottom: 0; left: 0; right: 0; background: var(--color-bg-card); display: flex; justify-content: space-around; align-items: center; padding: var(--space-2) 0 var(--space-3); box-shadow: 0 -2px 10px rgba(15, 23, 42, 0.08); z-index: var(--z-sticky); } .tab-item { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); text-decoration: none; color: var(--color-slate-400); font-size: var(--text-xs); padding: var(--space-1) var(--space-3); transition: color var(--transition-fast); min-width: 44px; min-height: 44px; justify-content: center; } .tab-item:hover, .tab-item--active { color: var(--color-primary); } .tab-item__icon { display: flex; align-items: center; justify-content: center; } .tab-item__label { font-weight: var(--font-medium); } @media (max-width: 767px) { body { padding-bottom: 70px; } .hero { min-height: 55vh; padding: var(--space-24) var(--space-4) var(--space-12); } .hero__headline { font-size: var(--text-3xl); } .hero__subtitle { font-size: var(--text-base); } .hero__trust { flex-direction: column; gap: var(--space-2); } .hero__stats { flex-direction: column; gap: var(--space-2); } .hero__plate-row { flex-direction: column; } .hero__state-select { max-width: 100%; } .steps { flex-direction: column; align-items: center; } .steps > .card { max-width: 100%; } .testimonials { grid-template-columns: 1fr; } .pricing-grid > * { flex: 1 1 100%; max-width: none; } .footer__grid { grid-template-columns: 1fr; gap: var(--space-6); } .section { padding: var(--space-12) var(--space-4); } } @media (min-width: 768px) { .bottom-tab-bar { display: none; } } @media (min-width: 768px) and (max-width: 1023px) { .hero__headline { font-size: var(--text-4xl); } .footer__grid { grid-template-columns: 1fr 1fr; gap: var(--space-6); } .testimonials { grid-template-columns: repeat(2, 1fr); } } #report-options { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--space-6); margin-bottom: var(--space-10); } #results-section { padding: var(--space-10) 0; } #results-section h2 { font-family: var(--font-heading); font-weight: var(--font-bold); margin-bottom: var(--space-2); } .report-card { background: var(--color-bg-card); border-radius: var(--radius-lg); padding: var(--space-6) var(--space-5); text-align: center; width: 280px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06); border: 1px solid var(--color-border); transition: transform 0.2s ease, box-shadow 0.2s ease; cursor: pointer; } .report-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .report-card h3 { font-family: var(--font-heading); font-weight: var(--font-bold); font-size: var(--text-lg); margin-bottom: var(--space-3); color: var(--color-text); } .report-card .btn { margin-top: var(--space-4); width: 100%; cursor: pointer; transition: background 0.2s ease, transform 0.1s ease; } .report-card .btn:active { transform: scale(0.98); } .report-card.both-reports { background: var(--color-bg-card); color: var(--color-text); border: 2px solid #d4a017; position: relative; overflow: hidden; box-shadow: 0 4px 20px rgba(212, 160, 23, 0.18); } .report-card.both-reports:hover { box-shadow: 0 8px 32px rgba(212, 160, 23, 0.28); } .report-card.both-reports h3 { color: var(--color-primary); font-size: var(--text-xl); } .report-card.both-reports .report-circle-text { color: var(--color-text); } .report-card.both-reports .btn { background: #d4a017; color: #fff; border-color: #d4a017; font-weight: var(--font-semibold); } .report-card.both-reports .btn:hover { background: #b8900f; } .report-circle { width: 150px; height: 150px; margin: 0 auto var(--space-4); position: relative; } .report-circle svg { width: 100%; height: 100%; } .report-circle-bg { fill: none; stroke: var(--color-border); stroke-width: 10; } .report-circle-progress { fill: none; stroke: var(--color-cta); stroke-width: 10; stroke-linecap: round; transition: stroke-dashoffset 1s ease; } .report-card.both-reports .report-circle-progress { stroke: #d4a017; } .report-circle-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-text); } .discount-banner { background: #d4a017; color: #fff; padding: var(--space-1) var(--space-3); font-size: var(--text-xs); font-weight: var(--font-bold); text-transform: uppercase; position: absolute; top: 12px; right: -32px; transform: rotate(45deg); width: 150px; text-align: center; } .vin-loading-state { padding: var(--space-8); text-align: center; } .vin-loading-state h3 { font-family: var(--font-heading); font-weight: var(--font-semibold); margin-bottom: var(--space-2); } .vin-loading-state p { color: var(--color-text-muted); margin-bottom: var(--space-6); } .vin-loading-spinner { width: 48px; height: 48px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; margin: 0 auto var(--space-4); } .vin-loading-steps { display: flex; flex-direction: column; gap: var(--space-3); max-width: 280px; margin: 0 auto; text-align: left; } .vin-loading-step { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--text-sm); } .vin-loading-step.done { color: var(--color-success); } .vin-loading-step.active { color: var(--color-primary); font-weight: var(--font-semibold); } .step-icon { width: 24px; height: 24px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: var(--text-xs); background: var(--color-bg); } .vin-loading-step.done .step-icon { background: var(--color-success); color: var(--color-bg-card); } .vin-loading-step.active .step-icon { background: var(--color-primary); color: var(--color-bg-card); } #reportViewer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; background: rgba(0, 0, 0, 0.6); backdrop-filter: blur(4px); } .report-viewer-content { background: var(--color-bg-card); margin: 3vh auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); width: 92%; max-width: 1200px; max-height: 94vh; display: flex; flex-direction: column; position: relative; overflow: hidden; } .report-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-2) var(--space-3); background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .report-toolbar button { display: inline-flex; align-items: center; gap: var(--space-1); padding: var(--space-1) var(--space-2); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-card); color: var(--color-text); cursor: pointer; font-size: var(--text-sm); transition: background var(--transition-fast), border-color var(--transition-fast); } .report-toolbar button:hover { background: var(--color-bg); border-color: var(--color-primary); } .report-toolbar button svg { width: 16px; height: 16px; } .report-toolbar .close-btn { font-size: 1.2rem; font-weight: var(--font-bold); color: var(--color-text-muted); } .report-toolbar .close-btn:hover { color: var(--color-error); border-color: var(--color-error); } .report-container { flex: 1; overflow: hidden; position: relative; } .reports-wrapper { display: flex; width: 200%; height: 100%; transition: transform var(--transition-base); } .report-div { flex: 0 0 50%; height: 100%; } .report-frame { width: 100%; height: calc(94vh - 60px); border: none; } .report-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); gap: var(--space-4); color: var(--color-text-muted); } .report-loading .spinner { width: 40px; height: 40px; border: 3px solid var(--color-border); border-top-color: var(--color-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .report-error { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-12); gap: var(--space-4); text-align: center; color: var(--color-text-muted); } .report-error .error-icon { font-size: 2rem; color: var(--color-error); } .report-error .retry-btn { padding: var(--space-2) var(--space-6); background: var(--color-primary); color: var(--color-bg-card); border: none; border-radius: var(--radius-md); cursor: pointer; font-size: var(--text-sm); transition: background var(--transition-fast); } .report-error .retry-btn:hover { opacity: 0.9; } .report-error .support-link { font-size: var(--text-sm); color: var(--color-primary); } .purchase-summary { background: var(--color-bg); border-radius: var(--radius-md); padding: var(--space-4); margin-bottom: var(--space-4); border: 1px solid var(--color-border); } .purchase-row { display: flex; justify-content: space-between; align-items: center; padding: var(--space-2) 0; font-size: var(--text-sm); color: var(--color-text-muted); } .purchase-row + .purchase-row { border-top: 1px solid var(--color-border); } .purchase-value { font-weight: var(--font-medium); color: var(--color-text); } .purchase-row.purchase-total { font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); padding-top: var(--space-3); margin-top: var(--space-1); border-top: 2px solid var(--color-border); } .purchase-row.purchase-total .purchase-value { color: var(--color-cta); font-size: var(--text-lg); } .purchase-divider { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-4) 0; color: var(--color-text-muted); font-size: var(--text-sm); } .purchase-divider::before, .purchase-divider::after { content: ''; flex: 1; height: 1px; background: var(--color-border); } .credit-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: var(--space-4); } @media (max-width: 480px) { .credit-options { grid-template-columns: 1fr; } } .credit-option { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-4); transition: border-color var(--transition-fast); text-align: center; } .credit-option:hover { border-color: var(--color-primary); } .credit-info { display: flex; align-items: center; gap: var(--space-3); margin-bottom: var(--space-3); justify-content: center; } .credit-amount-badge { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--color-primary); color: var(--color-bg-card); font-weight: var(--font-bold); font-size: var(--text-lg); border-radius: var(--radius-full); flex-shrink: 0; } .credit-details h4 { margin: 0; font-family: var(--font-heading); font-weight: var(--font-semibold); font-size: var(--text-base); color: var(--color-text); } .credit-price { font-size: var(--text-2xl); font-weight: var(--font-bold); color: var(--color-primary); margin: var(--space-2) 0; } .credit-unit-price { font-size: var(--text-sm); color: var(--color-text-muted); } .paypal-button-container { min-height: 45px; } .credit-breakdown-popup { position: absolute; top: calc(100% + var(--space-2)); right: 0; background: var(--color-bg-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: var(--space-4); min-width: 220px; z-index: var(--z-dropdown); font-size: var(--text-sm); } .credit-breakdown-row { display: flex; justify-content: space-between; padding: var(--space-1) 0; color: var(--color-text-muted); } .credit-breakdown-row span:last-child { font-weight: var(--font-medium); color: var(--color-text); } .credit-breakdown-divider { height: 1px; background: var(--color-border); margin: var(--space-2) 0; } .credit-breakdown-row.credit-breakdown-total { font-weight: var(--font-semibold); color: var(--color-text); } .credit-breakdown-row.credit-breakdown-total span:last-child { color: var(--color-cta); } .credit-breakdown-buy { margin-top: var(--space-3); width: 100%; } .my-reports-search { position: relative; margin-bottom: var(--space-4); } .my-reports-search input { width: 100%; padding: var(--space-3) var(--space-4) var(--space-3) var(--space-10); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--color-bg); color: var(--color-text); transition: border-color 0.2s ease; } .my-reports-search input:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(30, 41, 59, 0.1); } .my-reports-search .search-icon { position: absolute; left: var(--space-3); top: 50%; transform: translateY(-50%); color: var(--color-text-muted); pointer-events: none; display: flex; align-items: center; } .my-reports-list { max-height: 360px; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-2); } .my-reports-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-bg-card); transition: border-color 0.2s ease, box-shadow 0.2s ease; } .my-reports-item:hover { border-color: var(--color-primary); box-shadow: var(--shadow-sm); } .my-reports-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-4); text-align: center; color: var(--color-text-muted); gap: var(--space-3); } .my-reports-empty p { margin: 0; font-size: var(--text-sm); } .report-type-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: var(--space-1) var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-semibold); text-transform: uppercase; letter-spacing: 0.025em; flex-shrink: 0; } .report-type-badge.carfax { background: rgba(59, 130, 246, 0.1); color: var(--color-info); } .report-type-badge.autocheck { background: rgba(34, 197, 94, 0.1); color: var(--color-success); } .report-type-badge.both { background: rgba(234, 179, 8, 0.1); color: var(--color-warning); } .report-info { display: flex; flex-direction: column; gap: var(--space-0-5); flex: 1; min-width: 0; } .report-vin { font-weight: var(--font-semibold); font-family: monospace; font-size: var(--text-sm); color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .report-meta { font-size: var(--text-xs); color: var(--color-text-muted); } .report-view-btn { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-1) var(--space-3); background: var(--color-primary); color: var(--color-bg-card); border: none; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: var(--font-semibold); cursor: pointer; white-space: nowrap; transition: background 0.2s ease; flex-shrink: 0; } .report-view-btn:hover { background: var(--color-primary-hover, var(--color-primary)); opacity: 0.9; } .vin-credit-indicator { font-size: var(--text-sm); color: var(--color-slate-700, #334155); text-align: center; margin-top: var(--space-2); } .vin-credit-indicator a { color: var(--landing-accent, #F97316); text-decoration: underline; text-underline-offset: 2px; } .vin-credit-indicator a:hover { color: var(--landing-accent-hover, #EA580C); } .vin-credit-empty .vin-credit-icon { color: var(--color-cta, #DC2626); } .vin-credit-icon { color: var(--color-success); font-size: var(--text-xs); margin-right: var(--space-1); } .slider-container { padding: var(--space-2) var(--space-4); text-align: center; background: var(--color-bg); } .slider { -webkit-appearance: none; appearance: none; width: 100%; max-width: 300px; height: 8px; border-radius: var(--radius-full); background: var(--color-border); outline: none; } .slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); cursor: pointer; } .slider::-moz-range-thumb { width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary); cursor: pointer; border: none; } .slider-labels { display: flex; justify-content: space-between; max-width: 300px; margin: var(--space-1) auto 0; font-size: var(--text-sm); color: var(--color-text-muted); } @media (max-width: 767px) { #report-options { flex-direction: column; align-items: center; } .report-card { width: 100%; max-width: 340px; } .report-viewer-content { margin: 0; width: 100%; max-height: 100vh; border-radius: 0; } .report-frame { height: calc(100vh - 60px); } } .custom-popup { position: fixed; top: var(--space-4, 1rem); right: var(--space-4, 1rem); max-width: 420px; padding: var(--space-3, 0.75rem) var(--space-4, 1rem); border-radius: var(--radius-lg, 0.75rem); font-size: var(--text-sm, 0.875rem); font-weight: var(--font-medium, 500); color: #fff; background: var(--color-slate-800, #1e293b); box-shadow: 0 8px 24px rgba(0,0,0,0.2); z-index: 10000; opacity: 0; transform: translateY(-12px); transition: opacity 0.3s ease, transform 0.3s ease; display: flex; align-items: center; gap: var(--space-2, 0.5rem); } .custom-popup.show { opacity: 1; transform: translateY(0); } .custom-popup.success { background: var(--color-green-600, #16a34a); } .custom-popup.error { background: var(--color-red-600, #dc2626); } .custom-popup.info { background: var(--color-blue-600, #2563eb); } .custom-popup.warning { background: var(--color-amber-500, #f59e0b); color: var(--color-slate-900, #0f172a); } .popup-dismiss { background: none; border: none; color: inherit; font-size: 1.25rem; cursor: pointer; padding: 0 0 0 var(--space-2, 0.5rem); opacity: 0.7; line-height: 1; flex-shrink: 0; } .popup-dismiss:hover { opacity: 1; } .landing-scope, .landing-scope-island { --landing-accent: #F97316; --landing-accent-hover: #EA580C; --landing-trust-tint: #0EA5E9; --landing-popup-inset: var(--space-4); --leading-display: 1.1; } .landing-scope { --landing-hero-bg: linear-gradient(135deg, #1E293B 0%, #0F172A 100%); } .landing-scope .btn--primary, .landing-scope-island .btn--primary { background-color: var(--landing-accent); } .landing-scope .btn--primary:hover, .landing-scope-island .btn--primary:hover { background-color: var(--landing-accent-hover); } .landing-scope .btn--primary:focus-visible, .landing-scope-island .btn--primary:focus-visible { outline: 3px solid rgba(249, 115, 22, 0.5); outline-offset: 2px; } .vin-card { background: var(--color-bg-card); border: 1px solid var(--color-slate-200, #E2E8F0); border-radius: 12px; overflow: visible; box-shadow: var(--shadow-lg); transition: box-shadow 150ms ease; } .vin-card:focus-within { box-shadow: var(--shadow-xl); } .vin-card__tab-row { display: flex; gap: var(--space-2); padding: var(--space-2); border-bottom: 1px solid var(--color-slate-100, #F1F5F9); } .vin-card__tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: 10px var(--space-4); min-height: 44px; border: 0; background: transparent; color: var(--color-slate-500, #64748B); font-size: var(--text-sm); font-weight: var(--font-semibold); border-radius: 8px; cursor: pointer; transition: background-color 150ms ease, color 150ms ease; } .vin-card__tab[aria-selected="true"] { background: var(--color-slate-100, #F1F5F9); color: var(--color-slate-900, #0F172A); } .vin-card__tab:hover:not([aria-selected="true"]) { background: var(--color-slate-50, #F8FAFC); color: var(--color-slate-700, #334155); } .vin-card__tab:focus-visible { outline: 3px solid rgba(249, 115, 22, 0.5); outline-offset: 2px; } .vin-card__input-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4); border-bottom: 1px solid var(--color-slate-100, #F1F5F9); } .vin-card__input-row[hidden] { display: none; } .vin-card__leading-icon { width: 32px; height: 32px; background: var(--color-slate-100, #F1F5F9); border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-slate-500, #64748B); flex: none; } .vin-card__input { flex: 1 1 auto; min-width: 0; border: 0; outline: 0; background: transparent; font-size: var(--text-base); font-weight: var(--font-semibold); color: var(--color-text); } .vin-card__input--vin { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.04em; text-transform: uppercase; } .vin-card__input--plate { font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; letter-spacing: 0.12em; text-transform: uppercase; font-size: 18px; } .vin-card__counter { flex: none; font-size: 13px; font-weight: var(--font-regular); font-variant-numeric: tabular-nums; color: var(--color-slate-500, #64748B); } .vin-card__counter--valid { color: var(--color-success); } .vin-card__state-picker { display: inline-flex; align-items: center; gap: 6px; padding: var(--space-3) var(--space-4); background: var(--color-slate-100, #F1F5F9); color: var(--color-slate-700, #334155); font-size: 15px; font-weight: var(--font-semibold); border-radius: 8px; border: 0; cursor: pointer; min-height: 40px; flex: none; transition: background-color 150ms ease; } .vin-card__state-picker:hover, .vin-card__state-picker[aria-expanded="true"] { background: var(--color-slate-200, #E2E8F0); } .vin-card__footer-strip { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-4); background: var(--color-slate-50, #F8FAFC); border-radius: 0 0 12px 12px; color: var(--color-slate-700, #334155); } .vin-card__footer-copy { font-size: var(--text-sm); color: var(--color-slate-600, #475569); line-height: 1.4; } .vin-card__footer-copy strong { color: var(--color-slate-900, #0F172A); font-weight: var(--font-semibold); } .vin-card__footer-copy .accent { color: var(--landing-accent); font-weight: var(--font-semibold); } .vin-card__cta { padding: var(--space-3) var(--space-5); border-radius: 8px; font-size: var(--text-sm); font-weight: var(--font-semibold); color: #fff; background: var(--landing-accent); border: 0; min-height: 44px; cursor: pointer; white-space: nowrap; display: inline-flex; align-items: center; gap: var(--space-2); transition: background-color 150ms ease; } .vin-card__cta:hover { background: var(--landing-accent-hover); } @media (max-width: 767px) { .vin-card__footer-strip { flex-direction: column; align-items: stretch; gap: var(--space-3); } .vin-card__cta { width: 100%; justify-content: center; } } .plan-card { background: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); padding: var(--space-6); transition: transform 200ms ease, box-shadow 200ms ease; position: relative; } .plan-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); } .plan-card__ribbon { position: absolute; top: 12px; right: 12px; background: var(--landing-accent); color: #fff; font-size: var(--text-sm); font-weight: var(--font-semibold); text-transform: uppercase; padding: var(--space-2) var(--space-3); border-radius: 4px; } .plan-card__price { font-size: var(--text-5xl); font-weight: var(--font-semibold); line-height: var(--leading-display); color: var(--color-slate-900, #0F172A); } .sample-report-cta-row { display: flex; justify-content: center; padding: var(--space-4) var(--space-4) 0; } .sample-report-cta { display: inline-flex; align-items: center; gap: var(--space-2); padding: 10px var(--space-4); background: transparent; border: 1px dashed var(--color-slate-300, #CBD5E1); border-radius: 8px; color: var(--color-slate-700, #334155); font-family: inherit; font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.4; text-decoration: none; cursor: pointer; transition: border-color 150ms ease, color 150ms ease, background-color 150ms ease; } .sample-report-cta:hover { border-color: var(--landing-accent, #F97316); color: var(--landing-accent, #F97316); background: rgba(249, 115, 22, 0.05); } .sample-report-cta:focus-visible { outline: 3px solid rgba(249, 115, 22, 0.5); outline-offset: 2px; } .sample-report-cta__hint { color: var(--color-slate-500, #64748B); font-weight: var(--font-regular); margin-left: var(--space-1, 4px); } .sample-report-cta:hover .sample-report-cta__hint { color: var(--landing-accent, #F97316); } @media (max-width: 479px) { .sample-report-cta__hint { display: none; } } .trust-row { display: flex; justify-content: center; align-items: center; gap: var(--space-6); padding: var(--space-6) var(--space-4); color: var(--color-slate-600, #475569); flex-wrap: wrap; } .trust-row__item { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--font-semibold); color: inherit; } .trust-row__icon { color: var(--landing-trust-tint); } .trust-row__star { color: var(--landing-accent); } .comparison-table { background: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 960px; margin: 0 auto; position: relative; } .comparison-table__rollup { position: absolute; top: -12px; right: 24px; background: var(--landing-accent); color: #fff; padding: var(--space-2) var(--space-3); border-radius: 999px; font-size: var(--text-base); font-weight: var(--font-semibold); } .comparison-table__struck { color: var(--color-error); text-decoration: line-through; font-size: 18px; font-weight: var(--font-regular); } .comparison-table__ours { color: var(--color-success); font-size: 24px; font-weight: var(--font-semibold); } .comparison-table__save-chip { display: inline-block; background: var(--landing-accent); color: #fff; padding: 2px var(--space-2); border-radius: 4px; font-size: var(--text-sm); font-weight: var(--font-semibold); } .social-popup { position: fixed; bottom: var(--landing-popup-inset); left: var(--landing-popup-inset); width: 360px; max-width: calc(100vw - 32px); background: var(--color-bg-card); border: 1px solid var(--color-slate-200, #E2E8F0); border-left: 4px solid var(--landing-accent); border-radius: var(--radius-lg); box-shadow: 0 10px 25px -5px rgba(15, 23, 42, 0.18), 0 4px 10px -3px rgba(15, 23, 42, 0.08); padding: var(--space-4); z-index: 200; display: flex; align-items: flex-start; gap: var(--space-3); transition: opacity 300ms ease, transform 300ms ease; opacity: 0; transform: translateY(16px); } .social-popup--visible { opacity: 1; transform: translateY(0); } .social-popup__icon { flex: none; color: var(--landing-accent); } .social-popup__body { flex: 1 1 auto; } .social-popup__copy { font-size: var(--text-sm); color: var(--color-text); line-height: 1.4; margin: 0; } .social-popup__timestamp { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: var(--font-semibold); color: var(--color-text-muted, #64748B); margin-top: 4px; } .social-popup__dismiss { flex: none; width: 32px; height: 32px; background: transparent; border: 0; color: var(--color-text-muted, #64748B); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; border-radius: 4px; } .social-popup__dismiss:hover { background: var(--color-slate-100, #F1F5F9); } @media (prefers-reduced-motion: reduce) { .social-popup { transition: opacity 200ms ease; transform: none; } } @media (max-width: 767px) { .social-popup { bottom: calc(70px + var(--landing-popup-inset)); left: 50%; transform: translateX(-50%) translateY(16px); } .social-popup--visible { transform: translateX(-50%) translateY(0); } } .landing-scope .vin-card-compact { display: flex; align-items: stretch; gap: 6px; background: var(--color-bg-card, #FFFFFF); border: 1px solid var(--color-slate-200, #E2E8F0); border-radius: var(--radius-lg); padding: 6px; box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08); max-width: 560px; margin: 0 auto var(--space-6); min-height: 52px; } .landing-scope .vin-card-compact[hidden] { display: none; } .landing-scope .vin-card-compact__mode { display: inline-flex; align-items: center; justify-content: center; gap: 3px; padding: 0 10px; background: var(--color-slate-100, #F1F5F9); border: 0; border-radius: calc(var(--radius-lg) - 2px); font-size: 13px; font-weight: var(--font-semibold); color: var(--color-text, #0F172A); cursor: pointer; min-width: 64px; transition: background 150ms ease; } .landing-scope .vin-card-compact__mode:hover, .landing-scope .vin-card-compact__mode:focus-visible { background: var(--color-slate-200, #E2E8F0); outline: none; } .landing-scope .vin-card-compact__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-size: 15px; font-weight: var(--font-semibold); padding: 0 10px; outline: none; color: var(--color-text, #0F172A); font-family: var(--font-mono, ui-monospace, SFMono-Regular, monospace); letter-spacing: 0.06em; text-transform: uppercase; } .landing-scope .vin-card-compact__input::placeholder { color: var(--color-text-muted, #64748B); font-weight: var(--font-normal); letter-spacing: normal; text-transform: none; } .landing-scope .vin-card-compact__input:focus-visible { box-shadow: 0 0 0 2px var(--landing-accent, #F97316); border-radius: calc(var(--radius-lg) - 2px); } .landing-scope .vin-card-compact__state { display: inline-flex; align-items: center; justify-content: center; gap: 2px; padding: 0 8px; background: var(--color-slate-100, #F1F5F9); border: 0; border-radius: calc(var(--radius-lg) - 2px); font-size: 12px; font-weight: var(--font-semibold); color: var(--color-text, #0F172A); cursor: pointer; min-width: 48px; transition: background 150ms ease; } .landing-scope .vin-card-compact__state:hover, .landing-scope .vin-card-compact__state:focus-visible { background: var(--color-slate-200, #E2E8F0); outline: none; } .landing-scope .vin-card-compact__state[hidden] { display: none; } .landing-scope .vin-card-compact__submit { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; padding: 0 14px; background: var(--landing-accent, #F97316); border: 0; border-radius: calc(var(--radius-lg) - 2px); color: #FFFFFF; cursor: pointer; transition: background 150ms ease; } .landing-scope .vin-card-compact__submit:hover, .landing-scope .vin-card-compact__submit:focus-visible { background: var(--landing-accent-hover, #EA580C); outline: none; } .pillar-prose { max-width: 68ch; margin: 0 auto; font-size: var(--text-base); line-height: var(--leading-normal); } .pillar-prose h2 { font-size: var(--text-3xl); font-weight: var(--font-semibold); margin-top: var(--space-12); margin-bottom: var(--space-4); } .pillar-prose h3 { font-size: var(--text-xl); font-weight: var(--font-semibold); margin-top: var(--space-8); margin-bottom: var(--space-3); } .pillar-prose p { margin-bottom: var(--space-4); } .pillar-prose a { color: var(--color-cta); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; } .pillar-prose a:hover { text-decoration-thickness: 2px; } .keyword-zone { color: var(--color-slate-400, #94A3B8); font-size: var(--text-sm); max-height: 120px; overflow: auto; } .author-bio { background: var(--color-bg-card); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); display: flex; gap: var(--space-4); align-items: flex-start; } .author-bio__avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; flex: none; } .author-bio__initials { width: 80px; height: 80px; border-radius: 50%; background: var(--color-primary); color: #fff; font-size: 24px; font-weight: var(--font-semibold); display: inline-flex; align-items: center; justify-content: center; flex: none; } .author-bio__name { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--color-text); } .author-bio__title { font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-text-muted); letter-spacing: 0.02em; } .author-bio__text { font-size: var(--text-base); color: var(--color-text); line-height: var(--leading-normal); } @media (max-width: 767px) { .author-bio { flex-direction: column; text-align: center; } .author-bio__avatar, .author-bio__initials { margin: 0 auto; } } .hero--landing { padding: calc(var(--navbar-h, 64px) + var(--space-8)) 0 var(--space-8); min-height: 0; } .hero--landing .vin-card { max-width: 640px; margin: var(--space-5) auto 0; text-align: left; } .vin-card__footer-actions { display: inline-flex; align-items: center; gap: var(--space-2); } .vin-card__feedback { padding: var(--space-2) var(--space-4); font-size: var(--text-sm); color: var(--color-error, #DC2626); min-height: 0; } .vin-card__feedback:empty { display: none; } .vin-card__input-row { position: relative; } .vin-card__state-listbox { position: absolute; top: 100%; right: var(--space-4); margin: 0; padding: var(--space-2) 0; list-style: none; background: var(--color-bg-card, #fff); border: 1px solid var(--color-slate-200, #E2E8F0); border-radius: 8px; box-shadow: var(--shadow-xl); max-height: 320px; overflow-y: auto; z-index: 150; min-width: 240px; margin-top: 4px; } .vin-card__state-listbox li[role="option"] { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); min-height: 40px; cursor: pointer; font-size: var(--text-sm); color: var(--color-slate-700, #334155); outline: none; } .vin-card__state-listbox li[role="option"]:hover, .vin-card__state-listbox li[role="option"]:focus { background: var(--color-slate-50, #F8FAFC); } .vin-card__state-listbox li[role="option"][aria-selected="true"] { background: var(--color-slate-100, #F1F5F9); color: var(--color-slate-900, #0F172A); font-weight: var(--font-semibold); } .vin-card__state-listbox-code { display: inline-block; min-width: 28px; font-family: "JetBrains Mono", "SF Mono", Menlo, monospace; font-weight: var(--font-semibold); color: var(--color-slate-900, #0F172A); } .vin-card__state-listbox-name { color: inherit; } .plan-pack-grid-section { position: relative; z-index: 2; margin-top: calc(-1 * var(--space-8)); background: transparent; padding-top: 0; } .plan-pack-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-6); margin-bottom: var(--space-6); } .plan-pack-grid__compare-entry { margin-top: var(--space-4); } @media (max-width: 1023px) { .plan-pack-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 767px) { .plan-pack-grid { grid-template-columns: 1fr; } } .plan-card__name { font-size: var(--text-xl); font-weight: var(--font-semibold); color: var(--color-slate-900, #0F172A); margin: 0 0 var(--space-2); } .plan-card__price-suffix { font-size: var(--text-sm); font-weight: var(--font-regular); color: var(--color-slate-500, #64748B); margin-left: 4px; } .plan-card__features { list-style: none; padding: 0; margin: var(--space-4) 0; display: flex; flex-direction: column; gap: var(--space-2); } .plan-card__features li { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-base); color: var(--color-slate-700, #334155); } .plan-card__features li svg { color: var(--color-success, #16A34A); flex: none; } .plan-card__cta { margin-top: var(--space-4); gap: var(--space-2); } .plan-card--featured { border: 2px solid var(--landing-accent, #F97316); } .plan-card--pack .plan-card__price { color: var(--color-success, #16A34A); } .comparison-table__table { width: 100%; border-collapse: collapse; padding: var(--space-6); } .comparison-table__table thead th { text-align: center; padding: var(--space-4); font-size: var(--text-sm); font-weight: var(--font-semibold); color: var(--color-slate-600, #475569); border-bottom: 1px solid var(--color-slate-200, #E2E8F0); } .comparison-table__table thead th:first-child { text-align: left; } .comparison-table__table tbody td { padding: var(--space-3) var(--space-4); text-align: center; vertical-align: middle; border-bottom: 1px solid var(--color-slate-100, #F1F5F9); font-size: var(--text-base); color: var(--color-slate-700, #334155); } .comparison-table__table tbody td:first-child { text-align: left; font-weight: var(--font-semibold); color: var(--color-slate-900, #0F172A); } .comparison-table__check { color: var(--color-slate-500, #64748B); } .comparison-table__check--ours { color: var(--color-success, #16A34A); } .comparison-table__save-chip { margin-left: var(--space-2); } .comparison-table__save-chip:empty { display: none; } .comparison-table__cta-row { margin-top: var(--space-6); padding: var(--space-4); } @media (max-width: 767px) { .comparison-table__table thead { display: none; } .comparison-table__table tbody tr { display: grid; grid-template-columns: 1fr; gap: 4px; padding: var(--space-3); border-bottom: 1px solid var(--color-slate-100, #F1F5F9); } .comparison-table__table tbody td { border: 0; padding: 2px var(--space-2); text-align: left; } } .trust-row__link { color: var(--color-slate-700, #334155); text-decoration: underline; text-underline-offset: 2px; } .trust-row__item--muted { opacity: 0.85; font-weight: var(--font-regular); }