/* Styles for the crawlable HTML pages generated by tool/seo_pages.py.
   Palette = WColors (lib/core/constants/colors.dart). On Flutter pages this
   copy shows only while the app loads, then the app draws over it, so nothing
   here may be positioned or layered above the Flutter view. */

html { background: #061406; }
.sp-page { margin: 0; }
.sp {
  background: #061406; color: #B0D4B0;
  font: 16px/1.6 Arial, Helvetica, sans-serif;
  min-height: 100vh; overflow-wrap: anywhere;
}
.sp a { color: #4CD964; }
.sp h1, .sp h2, .sp h3 { color: #fff; line-height: 1.2; }
.sp h1 { font-size: clamp(2rem, 6vw, 3.25rem); font-weight: 900; margin: .4em 0 .3em; }
.sp h2 { font-size: 1.6rem; margin: 2em 0 .6em; }
.sp h3 { font-size: 1.15rem; margin: 1.4em 0 .5em; }
.sp main { max-width: 1100px; margin: 0 auto; padding: 8px 16px 48px; }

.sp-header {
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
  padding: 12px 16px; background: #0D2B0D; border-bottom: 1px solid #1E5C1E;
}
.sp-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sp-brand img { border-radius: 10px; }
.sp-brand span { color: #fff; font-weight: 900; font-size: 1.2rem; line-height: 1; }
.sp-brand small { display: block; color: #2DB84B; font-size: .6rem; letter-spacing: .15em; margin-top: 3px; }
.sp-header nav { display: flex; flex-wrap: wrap; gap: 6px 16px; flex: 1; }
.sp-header nav a { color: #B0D4B0; text-decoration: none; font-size: .9rem; }
.sp-header nav a:hover, .sp-header nav a[aria-current] { color: #2DB84B; }

.sp-btn {
  display: inline-block; padding: 10px 18px; border-radius: 12px;
  background: linear-gradient(135deg, #1B5E20, #2DB84B); color: #fff !important;
  font-weight: 700; text-decoration: none; font-size: .95rem;
}
.sp-btn-alt { background: #0F2A0F; border: 1px solid #1E5C1E; }
.sp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }

.sp-hero { padding: 24px 0 8px; }
.sp-eyebrow { color: #2DB84B; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 2em 0 0; }
.sp-hero .sp-eyebrow { margin-top: 0; }
.sp-lead { font-size: 1.1rem; max-width: 760px; }
.sp-note { color: #6A926A; font-size: .9rem; }
.sp-crumbs { font-size: .85rem; color: #6A926A; padding-top: 12px; }

.sp-chips, .sp-links, .sp-stats { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.sp-chips li, .sp-links li {
  background: #0D2B0D; border: 1px solid #1E5C1E; border-radius: 8px;
  padding: 6px 12px; font-size: .85rem;
}
.sp-stats { gap: 32px; }
.sp-stats strong { display: block; color: #2DB84B; font-size: 1.8rem; font-weight: 900; }

.sp-grid { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.sp-card { background: #0F2A0F; border: 1px solid #1E5C1E; border-radius: 16px; padding: 20px; }
.sp-card h3 { margin-top: 0; }
.sp-card img, .sp-vehicles img { width: 100%; height: auto; }

.sp-vehicles { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.sp-vehicles figure { margin: 0; background: #0F2A0F; border: 1px solid #1E5C1E; border-radius: 16px; padding: 12px; }
.sp-vehicles figcaption { color: #fff; font-weight: 700; text-align: center; }

.sp-table-wrap { overflow-x: auto; margin: 16px 0; }
.sp-table { border-collapse: collapse; width: 100%; min-width: 420px; background: #0F2A0F; }
.sp-table caption { text-align: left; color: #fff; font-weight: 700; padding-bottom: 8px; }
.sp-table th, .sp-table td { border: 1px solid #1E5C1E; padding: 10px 12px; text-align: left; }
.sp-table thead th { color: #fff; background: #122812; }
.sp-table thead small { display: block; color: #6A926A; font-weight: 400; font-size: .75rem; }
.sp-table td { color: #fff; font-weight: 700; }

.sp details { background: #0F2A0F; border: 1px solid #1E5C1E; border-radius: 12px; padding: 12px 16px; margin: 10px 0; }
.sp summary { color: #fff; font-weight: 700; cursor: pointer; }

.sp-footer { background: #0D2B0D; border-top: 1px solid #1E5C1E; font-size: .9rem; }
.sp-footer-cols {
  max-width: 1100px; margin: 0 auto; padding: 32px 16px;
  display: grid; gap: 24px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.sp-footer h2 { font-size: .8rem; letter-spacing: .15em; text-transform: uppercase; margin: 0 0 12px; }
.sp-footer ul { list-style: none; padding: 0; margin: 0; }
.sp-footer li { margin-bottom: 8px; }
.sp-footer a { color: #B0D4B0; text-decoration: none; }
.sp-footer a:hover { color: #2DB84B; }
.sp-footer-brand { color: #fff; font-weight: 900; font-size: 1.1rem; margin-top: 0; }
.sp-footer-bottom {
  background: #061406; color: #6A926A; font-size: .8rem;
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px;
  padding: 14px 16px;
}