*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: #fff; color: #111; line-height: 1.6; } a { color: #0057FF; } img { max-width: 100%; border-radius: 10px; } .container { max-width: 760px; margin: 0 auto; padding: 0 24px; } .prose h1 { font-size: 2rem; font-weight: 800; line-height: 1.2; margin: 32px 0 16px; letter-spacing: -0.5px; } .prose h2 { font-size: 1.4rem; font-weight: 700; margin: 32px 0 12px; } .prose h3 { font-size: 1.15rem; font-weight: 600; margin: 24px 0 10px; } .prose p { margin: 0 0 16px; color: #333; } .prose ul, .prose ol { margin: 0 0 16px 24px; color: #333; } .prose li { margin-bottom: 6px; } .prose strong { font-weight: 700; } .prose em { font-style: italic; } .prose a { color: #0057FF; } .prose blockquote { border-left: 3px solid #0057FF; padding-left: 16px; color: #555; margin: 0 0 16px; } .prose pre { background: #f5f5f5; padding: 16px; border-radius: 8px; overflow-x: auto; margin: 0 0 16px; } .prose code { font-family: monospace; font-size: 0.9em; background: #f5f5f5; padding: 2px 5px; border-radius: 3px; } .badge { display:inline-block; background:#eff6ff; color:#0057FF; font-size:12px; font-weight:600; padding:3px 10px; border-radius:20px; text-transform:uppercase; letter-spacing:0.4px; } .hero-image { width:100%; height:380px; object-fit:cover; border-radius:12px; margin:24px 0; } .cta-box { background:#eff6ff; border:1px solid #bfdbfe; border-radius:12px; padding:28px 24px; margin:40px 0; text-align:center; } .cta-box h3 { color:#1d3461; font-size:1.1rem; margin-bottom:8px; } .cta-box p { color:#374151; font-size:14px; margin-bottom:16px; } .cta-btn { background:#0057FF; color:#fff; font-weight:700; padding:11px 28px; border-radius:8px; text-decoration:none; font-size:15px; display:inline-block; } .blog-hero { position:relative;overflow:hidden;padding:128px 48px 80px;background:#fff; } .blog-hero-inner { max-width:1152px;margin:0 auto; } .blog-content { max-width:1152px;margin:0 auto;padding:56px 48px 112px; } .cat-bar { position:sticky;top:56px;z-index:30;background:rgba(255,255,255,0.96);border-bottom:1px solid #f1f5f9;backdrop-filter:blur(16px); } .cat-bar-inner { max-width:1152px;margin:0 auto;padding:12px 48px;display:flex;gap:10px;overflow-x:auto;scrollbar-width:none; } .cat-bar-inner::-webkit-scrollbar { display:none; } .blog-cta { margin-top:80px;position:relative;border-radius:24px;overflow:hidden;background:linear-gradient(135deg,#0057FF,#003db3);padding:56px 64px;display:flex;align-items:center;justify-content:space-between;gap:32px; } /* Tablet: 2-col grid, second row stacks, CTA vertical */ @media (max-width:900px) { .blog-hero { padding:96px 24px 60px; } .blog-content { padding:40px 24px 80px; } .cat-bar-inner { padding:10px 24px; } .second-row-grid { grid-template-columns:1fr !important; } .post-grid { grid-template-columns:repeat(2,1fr) !important; } .blog-cta { flex-direction:column;align-items:flex-start;padding:40px 32px;border-radius:20px; } } /* Mobile: 1-col grid, featured card shrinks */ @media (max-width:640px) { .post-grid { grid-template-columns:1fr !important; } .featured-card { height:400px !important;border-radius:16px !important; } .featured-content { left:20px !important;right:20px !important;bottom:20px !important; } .blog-cta { padding:32px 24px;border-radius:16px; } } @media (max-width:480px) { .featured-card { height:340px !important; } } WrapMyRide AI