/* Marketing homepage (index.php) styles — pulled out of an inline <style> block so this page
   follows the same external-stylesheet convention as the rest of the app (assets/style.css,
   assets/book.css, assets/driver.css), instead of being the one page styled inline. */

* { box-sizing: border-box; }
body {
    margin: 0;
    background: #f8f9fb;
    color: #1a1d29;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    /* Marketing page, not the dashboard — reads noticeably smaller/thinner than comparable
       SaaS landing pages at the browser default of 16px. Everything below is already sized
       in em, so this one change scales the whole page up with it. */
    font-size: 18px;
    line-height: 1.6;
}
a { color: inherit; }

/* One vertical rhythm for every section on the page — a flat 80–90px between sections is right on a
   wide desktop but reads as big empty gaps on a phone, so it scales down with the viewport. */
:root { --section-gap: clamp(48px, 9vw, 90px); }
html { scroll-behavior: smooth; }
#pricing { scroll-margin-top: 70px; }

.btn {
    display: inline-block;
    padding: 10px 22px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    font-size: 1em;
    border: none;
    cursor: pointer;
}
.btn-primary { background: #1568c4; color: #fff; }
.btn-secondary { background: #fff; color: #1568c4; border: 1px solid #1568c4; }

.hero {
    background: linear-gradient(180deg, #e7f0fc 0%, #f8f9fb 100%);
    border-bottom: 1px solid #e5e7eb;
    padding: clamp(44px, 8vw, 64px) 20px clamp(40px, 7vw, 56px);
    text-align: center;
}

/* Small "who it's for" pill above the headline, in the brand blue. */
.hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 22px;
    padding: 6px 16px;
    background: #fff;
    border: 1px solid #b6d3f5;
    border-radius: 999px;
    box-shadow: 0 1px 3px rgba(21, 104, 196, 0.10);
    color: #1568c4;
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.4;
}
/* Inline SVG rather than the flag emoji — Windows renders that as the letters "CA". */
.hero-pill-flag { flex-shrink: 0; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12); }

/* Fluid instead of a flat 3em — a flat size that reads fine at desktop width wraps to 3
   cramped lines on a narrow phone. clamp() scales it down smoothly instead of needing a
   separate breakpoint override, same idiom already used for .app-topbar-brand elsewhere.
   text-wrap: balance avoids a ragged/awkward line break at in-between widths. */
.hero h1 { font-size: clamp(1.9em, 5vw + 1em, 3.4em); font-weight: 500; letter-spacing: -0.03em; margin: 0 0 16px; text-wrap: balance; line-height: 1.15; }
.hero p.tagline { font-size: clamp(1.1em, 1vw + 0.95em, 1.35em); color: #6b7280; margin: 0 auto 32px; max-width: 600px; }
.cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cta-row .btn { padding: 13px 28px; font-size: 1.05em; }
.hero-trial-note { margin: 16px 0 0; font-size: 0.88em; color: #6b7280; }

/* Pricing */
.pricing { max-width: 1220px; margin: var(--section-gap) auto 0; padding: 0 32px 24px; text-align: center; }
.pricing h2 { font-size: clamp(1.55em, 3vw + 0.9em, 2.1em); font-weight: 500; margin: 0 0 10px; line-height: 1.25; }
.pricing-subtitle { color: #6b7280; font-size: 1.1em; margin: 0 0 38px; }
.pricing-subtitle-line { display: block; }
.plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 32px;
    text-align: left;
}
@media (max-width: 800px) { .plan-grid { grid-template-columns: 1fr; } }
.plan-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
}
.plan-card--standard { border-color: #1568c4; box-shadow: 0 0 0 3px #e7f0fc; position: relative; }
.plan-badge {
    position: absolute;
    top: -12px;
    left: 24px;
    background: #1568c4;
    color: #fff;
    font-size: 0.75em;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 999px;
}
.plan-card h3 { font-size: 1.15em; font-weight: 500; margin: 0 0 4px; }
.plan-price { font-size: 2em; font-weight: 600; margin: 6px 0 20px; }
.plan-price span { font-size: 0.45em; font-weight: 600; color: #6b7280; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 24px; flex: 1; }
.plan-card li { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 0.95em; color: #374151; }
.plan-card li i { color: #15803d; flex-shrink: 0; }
.plan-card li.feature-excluded { color: #9ca3af; }
.plan-card li.feature-excluded i { color: #dc2626; }
.plan-card .btn { text-align: center; }

/* Fine-print callout under pricing tying limits back to the exact same enforcement the app
   actually runs, not marketing copy disconnected from reality. */
.pricing-note { max-width: 640px; margin: 24px auto 0; color: #9ca3af; font-size: 0.85em; }

/* Features — icon on the left, title+description on the right within each row, every row
   the same way (not a zig-zag). Two columns on wider screens since 14 rows single-column
   makes for a very long scroll; one column again below 800px, where a column would otherwise
   get too narrow for the description text to breathe. */
.features { max-width: 1220px; margin: var(--section-gap) auto 0; padding: 0 32px; }
.features h2 { font-size: clamp(1.55em, 3vw + 0.9em, 2.1em); font-weight: 500; margin: 0 0 10px; text-align: center; line-height: 1.25; }
.features-subtitle { color: #6b7280; font-size: 1.1em; margin: 0 0 46px; text-align: center; }
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 48px;
    row-gap: 36px;
}
@media (max-width: 800px) {
    .features-grid { grid-template-columns: 1fr; row-gap: 32px; }
}
.feature-row {
    display: flex;
    /* flex-start, not center — with a multi-line description, centering against the whole
       block floats the icon away from the title it's meant to sit next to. */
    align-items: flex-start;
    gap: 24px;
}
.feature-icon {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: #e7f0fc;
    color: #1568c4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
}
.feature-text h3 { font-size: 1.25em; font-weight: 500; margin: 0 0 5px; line-height: 1.3; }
.feature-text p { margin: 0; color: #6b7280; font-size: 1em; line-height: 1.55; }
@media (max-width: 640px) {
    .feature-row { gap: 16px; }
    .feature-icon { width: 50px; height: 50px; font-size: 1.25em; }
}

/* The footer itself is styled by assets/site-footer.css (shared with the FAQ/privacy/terms pages, where
   it sticks to the bottom via margin-top: auto); this page needs a fixed gap above it instead. */
.footer-gap { height: var(--section-gap); }

/* Closing call-to-action band — brand-blue block after the features. */
/* Side gutters are padding, not margin — the page's children are width: 100% (see site-footer.css), so
   horizontal margins would push the band past the viewport. */
.cta-band { margin: var(--section-gap) 0 0; padding: 0 20px; }
.cta-band-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: clamp(36px, 6vw, 56px) 24px;
    background: linear-gradient(135deg, #1568c4 0%, #0d4d90 100%);
    border-radius: 20px;
    color: #fff;
    text-align: center;
}
.cta-band h2 { font-size: clamp(1.4em, 3vw + 0.8em, 2em); font-weight: 500; margin: 0 0 8px; line-height: 1.25; text-wrap: balance; }
.cta-band p { margin: 0 0 24px; color: #dbe9fb; font-size: 1.05em; }
.btn-light { background: #fff; color: #1568c4; }
.btn-outline-light { background: transparent; color: #fff; border: 1px solid rgba(255, 255, 255, 0.7); }
.btn-light:hover { background: #e7f0fc; }
.btn-outline-light:hover { background: rgba(255, 255, 255, 0.12); }
.cta-band .cta-row .btn { padding: 13px 28px; font-size: 1.05em; }

/* Contact section — same form as contact.php, in a centered narrow column. */
.contact-section { max-width: 720px; margin: var(--section-gap) auto 0; padding: 0 20px; }
.contact-section h2 { font-size: clamp(1.55em, 3vw + 0.9em, 2.1em); font-weight: 500; margin: 0 0 10px; text-align: center; line-height: 1.25; }
.contact-subtitle { color: #6b7280; font-size: 1.05em; margin: 0 0 28px; text-align: center; }
.contact-subtitle a { color: #1568c4; }

/* Phones: 18px body text is generous on a desktop landing page but oversized on a narrow screen, and
   the 32px side padding eats a fifth of a 375px viewport. Tighten both, plus the vertical gaps that
   made each section feel detached from the next. */
@media (max-width: 640px) {
    body { font-size: 16px; }
    .pricing, .features { padding-left: 20px; padding-right: 20px; }
    .pricing { padding-bottom: 0; }
    .pricing-subtitle, .features-subtitle { font-size: 1em; margin-bottom: 28px; }
    .plan-grid { gap: 20px; }
    .plan-card { padding: 26px 22px; }
    .features-grid { row-gap: 26px; }
    .feature-text h3 { font-size: 1.1em; }
    .hero p.tagline { margin-bottom: 24px; }
    .hero-pill { font-size: 0.74em; padding: 5px 12px; margin-bottom: 18px; }
    .cta-band { padding: 0 16px; }
    .cta-band-inner { border-radius: 16px; padding: 32px 20px; }
    .cta-band .cta-row .btn { flex: 1 1 100%; text-align: center; }
    .contact-subtitle { font-size: 1em; margin-bottom: 22px; }
    .cta-row .btn { flex: 1 1 100%; text-align: center; }
    .hero-trial-note { margin-top: 12px; }
}