/* AftLog multi-page styles (DEEPSEEK STEP 7).
   Uses ONLY the canonical palette variables from aftlog.css — no new
   colors, no gradients, no redesign. These are page-level patterns for
   the SEO pages generated by tools/generate_site.py. */

.pg-main { min-height: 60vh; }

.pg-hero { padding: 64px 0 40px; }
.pg-hero-inner { flex-direction: column; text-align: left; }
.pg-hero-inner h1 { font-size: 2.1rem; line-height: 1.15; margin: 10px 0; }
.pg-hero-inner p { color: var(--muted-dark); max-width: 40em; font-size: 1.05rem; }

.pg-list { margin: 8px 0 16px; padding-left: 20px; line-height: 1.6; }
.pg-list li { margin-bottom: 6px; }
.pg-list ol, .pg-list ul { padding-left: 20px; }

.pg-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.pg-muted { color: var(--muted-light); font-size: .92rem; }
.pg-count { color: var(--accent); font-size: 1.2rem; }

.btn-sm { padding: 8px 14px; font-size: .85rem; }

/* Pricing cards */
.pg-price-grid { align-items: stretch; }
.pg-price-card { display: flex; flex-direction: column; gap: 8px; padding: 24px; }
.pg-price-card h3 { margin: 0; }
.pg-price-card--pro { border: 1px solid var(--accent2); }
.pg-price { font-size: 2rem; font-weight: 700; color: var(--text-light); }
.pg-price span { font-size: .85rem; color: var(--muted-light); font-weight: 400; }

/* FAQ */
.pg-faq { border-bottom: 1px solid var(--line); padding: 10px 0; }
.pg-faq summary { cursor: pointer; font-weight: 600; color: var(--text-light); }
.pg-faq p { margin: 8px 0 4px; color: var(--muted-light); line-height: 1.55; }

/* Ask AftLog widget */
.ai-widget { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 18px; max-width: 640px; }
.ai-widget label { font-weight: 600; display: block; margin-bottom: 8px; }
.ai-widget textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 10px; font: inherit; color: var(--text-light); background: #fff; resize: vertical; }
.ai-widget-row { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.ai-status { color: var(--muted-light); font-size: .9rem; }
.ai-answer { margin-top: 14px; padding: 14px; background: var(--bg-light); border-left: 3px solid var(--accent2); border-radius: 6px; line-height: 1.55; white-space: pre-wrap; }

/* Articles */
.pg-article { max-width: 720px; line-height: 1.65; }
.pg-article h1 { font-size: 1.8rem; }
.pg-article li { margin-bottom: 8px; }

/* Footer columns */
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 28px; padding: 36px 0 20px; }
.footer-col { display: flex; flex-direction: column; gap: 8px; }
.footer-col h4 { margin: 0 0 4px; color: var(--text-dark); font-size: .95rem; }
.footer-col a { color: var(--muted-dark); text-decoration: none; font-size: .9rem; }
.footer-col a:hover { color: var(--accent2); }

@media (max-width: 860px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 520px) {
  .footer-grid { grid-template-columns: 1fr; }
}

/* Screenshot figure (STEP 7.1: VEA visual lives on /ai.html) */
.pg-shot { margin: 18px 0 6px; }
.pg-shot img { width: 100%; max-width: 640px; border: 1px solid var(--line); border-radius: 12px; display: block; }
.pg-shot figcaption { margin-top: 8px; font-size: .88rem; }

/* Shared brand header (STEP 7.2) — logo + slogan before every H1.
   Mirrors the homepage hero exactly (160px logo, 12px uppercase pill
   slogan, same spacing) — left-aligned for the page heroes. */
.brand-block { margin: 0; }
.brand-logo { width: 160px; height: auto; display: block; margin: 0 0 24px; filter: drop-shadow(0 0 14px rgba(80, 120, 255, 0.22)); }
.brand-slogan { display: block; width: fit-content; margin: 0 0 20px; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent2); border: 1px solid rgba(255,75,75,.5); border-radius: 999px; padding: 6px 14px; font-weight: 700; text-align: left; }
.pg-hero-inner .pg-hero-inner h1 { margin-top: 0; }

/* ── Features hybrid layout (STEP 7.3) ──────────────────────────────
   Full-width feature rows + a scannable card grid. Canonical palette
   only; page-scoped classes. */
.pg-feature-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 36px; align-items: center; }
.pg-feature-col h2 { font-size: clamp(24px, 3vw, 32px); font-weight: 800; letter-spacing: -.02em; margin-bottom: 14px; line-height: 1.15; }
.pg-feature-col p { color: var(--muted-light); font-size: 1.05rem; line-height: 1.6; }
.pg-feature-bullets { margin-top: 14px; }
.pg-feature-bullets li { font-size: 1rem; color: var(--text-light); }
.pg-feature-bullets li::marker { color: var(--accent2); }
.pg-feature-shot img { width: 100%; border: 1px solid var(--line); border-radius: 14px; display: block; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.pg-card-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
.pg-feature-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 20px; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.pg-feature-icon { font-size: 22px; line-height: 1; margin-bottom: 10px; }
.pg-feature-card h3 { font-size: 1.02rem; font-weight: 700; margin-bottom: 8px; }
.pg-feature-card .pg-list { margin: 0; padding-left: 18px; font-size: .95rem; color: var(--muted-light); }
.pg-feature-card .pg-list li { margin-bottom: 3px; }
.pg-cta { text-align: center; }
.pg-cta h2 { margin-bottom: 8px; }
@media (max-width: 860px) {
  .pg-feature-grid { grid-template-columns: 1fr; gap: 20px; }
  .pg-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .pg-card-grid { grid-template-columns: 1fr; }
}

/* ── Blog hub (STEP 7.9) ─────────────────────────────────────────────
   Featured row + category bar + article grid. Canonical palette only. */
.pg-featured-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.pg-article-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px; }
.pg-blog-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--text-light); display: flex; flex-direction: column; box-shadow: inset 0 1px 0 rgba(255,255,255,.6); }
.pg-blog-card:hover { border-color: var(--accent2); }
.pg-featured-card { padding-bottom: 18px; }
.pg-thumb { width: 100%; height: 130px; object-fit: cover; display: block; border-bottom: 1px solid var(--line); }
.pg-thumb-soon { background: var(--bg2); display: flex; align-items: center; justify-content: center; color: var(--muted-light); font-size: .85rem; font-weight: 600; }
.pg-cat-tag { display: inline-block; margin: 14px 16px 6px; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent2); font-weight: 700; }
.pg-blog-card h3 { margin: 0 16px 8px; font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.pg-blog-card p { margin: 0 16px 12px; color: var(--muted-light); font-size: .95rem; line-height: 1.5; }
.pg-blog-card-soon { opacity: .8; }
.pg-cat-section { padding: 48px 0; }
.pg-cat-bar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 4px; }
.pg-cat-btn { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 999px; padding: 9px 18px; font-size: .92rem; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.pg-cat-btn:hover { border-color: var(--accent2); color: var(--accent2); }
.pg-cat-btn.on { background: var(--red2); border-color: var(--red2); color: #fff; }
@media (max-width: 860px) {
  .pg-featured-row, .pg-article-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .pg-featured-row, .pg-article-grid { grid-template-columns: 1fr; }
}

/* ── v1 Help System (STEP 8.1) ─────────────────────────────────────── */
.pg-help { max-width: 760px; }
.pg-help-search { width: 100%; max-width: 560px; background: var(--card); color: var(--text-light); border: 1px solid var(--line); border-radius: 999px; padding: 12px 18px; font: inherit; margin-bottom: 18px; }
.pg-help-search:focus { outline: none; border-color: var(--accent2); }
.pg-help h1 { font-size: 1.8rem; font-weight: 800; margin: 8px 0 6px; }
.pg-help-desc { font-size: 1.05rem; margin-bottom: 18px; }
.pg-help h2 { font-size: 1.25rem; font-weight: 700; margin: 22px 0 10px; }
.pg-help-step { margin-bottom: 10px; }
.pg-help-img { color: var(--muted-light); font-size: .85rem; font-style: italic; margin-top: 2px; }

/* ── STEP 8.2 Winterization planner tool ──────────────────────────── */
.pg-hint-label{display:block;font-weight:700;margin-bottom:8px}
.pg-select{background:var(--card);color:var(--text-light);border:1px solid var(--line);border-radius:12px;padding:12px 16px;font:inherit;max-width:480px;width:100%}
.pg-select:focus{outline:none;border-color:var(--accent2)}
.wz-window{margin-top:16px;padding:16px 18px;background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:12px;font-size:1.05rem;max-width:480px}
.wz-fill{color:var(--muted-light)}
.wz-window strong{color:var(--text-light)}

/* ── STEP 8.3 Float plan tool ─────────────────────────────────────── */
.fp-form{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px;max-width:640px}
.fp-form h2{font-size:16px;font-weight:800;margin:18px 0 8px}
.fp-form h2:first-child{margin-top:0}
.fp-in{width:100%;background:var(--bg);color:var(--text-light);border:1px solid var(--line);border-radius:10px;padding:11px 14px;font:inherit;margin:4px 0 10px;box-sizing:border-box}
.fp-in:focus{outline:none;border-color:var(--accent2)}
.fp-row{display:flex;gap:12px}
.fp-row>div{flex:1}
.fp-plist{margin:4px 0}
.fp-prow{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.fp-prow .fp-in{flex:1}
.fp-x{background:none;border:none;color:var(--muted-light);font-size:20px;cursor:pointer}
.fp-check{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:14px;cursor:pointer}
.fp-check input{accent-color:var(--accent2);width:16px;height:16px}
.fp-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
@media (max-width:520px){.fp-row{flex-direction:column}}

/* ── STEP 8.4 Buying advisor tool ─────────────────────────────────── */
.ba-types{display:flex;flex-wrap:wrap;gap:8px}
.ba-type{background:var(--card);color:var(--text-light);border:1px solid var(--line);border-radius:999px;padding:8px 16px;cursor:pointer;font-weight:600}
.ba-type.on{background:var(--red2);border-color:var(--red2);color:#fff}
.ba-rating{display:flex;gap:6px;margin-bottom:10px}
.ba-rate{background:var(--card);color:var(--muted-light);border:1px solid var(--line);border-radius:8px;padding:6px 12px;cursor:pointer;font-size:13px}
.ba-rate.on{background:var(--red2);border-color:var(--red2);color:#fff}
.fp-checkbox{display:flex;flex-direction:column}
.fp-checkbox .fp-check{display:flex;align-items:center;gap:10px;padding:4px 0;font-size:14px;cursor:pointer}
.fp-checkbox .fp-check input{accent-color:var(--accent2);width:16px;height:16px}
.ba-warnings{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:12px;padding:14px 16px;font-size:14px;line-height:1.6}

/* ── STEP 8.5 Ramp mode tool ──────────────────────────────────────── */
.rm-tabs{display:flex;gap:8px;margin-bottom:14px}
.rm-mode{background:var(--card);color:var(--text-light);border:1px solid var(--line);border-radius:999px;padding:9px 22px;font-weight:700;cursor:pointer}
.rm-mode.on{background:var(--red2);border-color:var(--red2);color:#fff}
.rm-progress{width:100%;height:14px;border:none;border-radius:8px;background:var(--line);margin:6px 0 12px;display:block}
.rm-ready{background:rgba(46,204,113,.15);color:var(--text-light);border-left:3px solid #2ECC71;border-radius:10px;padding:14px;font-weight:700;margin-bottom:10px}
.rm-remind{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:14px;color:var(--muted-light);margin-bottom:16px}
.rm-items{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.rm-item{display:flex;align-items:center;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px 18px;min-height:58px;cursor:pointer;font-size:16px;font-weight:600}
.rm-item input{accent-color:var(--red2);width:18px;height:18px;flex-shrink:0}
.rm-item:has(input:checked){background:rgba(255,75,75,.12);border-color:var(--red2)}

/* ── STEP 8.6 Calculators tool ────────────────────────────────────── */
.cal-toggle{display:flex;gap:8px;margin-bottom:16px}
.cal-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px;margin-bottom:18px;max-width:640px}
.cal-card h2{font-size:18px;font-weight:800;margin:0 0 6px}
.cal-card .pg-muted{font-size:13px;margin-bottom:14px}
.cal-fields{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:12px}
.cal-fields label{display:flex;flex-direction:column;font-size:12px;color:var(--muted-light);gap:4px}
.cal-fields input{width:130px;background:var(--bg);color:var(--text-light);border:1px solid var(--line);border-radius:8px;padding:9px 12px;font:inherit;font-size:14px}
.cal-fields input:focus{outline:none;border-color:var(--accent2)}
.cal-check{flex-direction:row !important;align-items:center;gap:8px !important;align-self:flex-end;font-size:13px !important;color:var(--text-light) !important}
.cal-check input{width:16px;height:16px;accent-color:var(--accent2)}
.cal-out{font-size:18px;font-weight:800;padding:12px 14px;border-radius:10px;background:var(--bg2);border-left:3px solid var(--accent2)}
.cal-out.green{color:#2ECC71;border-left-color:#2ECC71}
.cal-out.yellow{color:#F5B041;border-left-color:#F5B041}
.cal-out.red{color:#FF6B6B;border-left-color:#FF6B6B}

/* ── STEP 8.7 Visual Engine Assist tool ───────────────────────────── */
.vea-stage{display:flex;gap:18px;margin-top:18px;align-items:flex-start}
.vea-canvas{flex:1;position:relative;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px;min-width:0}
.vea-canvas img{width:100%;display:block;border-radius:8px}
.vea-hotzone{position:absolute;inset:12px;pointer-events:none}
.vea-hotzone svg{width:100%;height:100%;display:block}
.vea-hot{fill:rgba(255,75,75,.25);stroke:#FF4B4B;stroke-width:0.4;cursor:pointer;pointer-events:auto;transition:fill .15s}
.vea-hot:hover{fill:rgba(255,75,75,.55)}
.vea-panel{width:min(380px,100%);background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:14px;padding:20px;display:none;max-height:70vh;overflow:auto}
.vea-panel.open{display:block}
.vea-sev{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.vea-sev-info{background:var(--bg2);color:var(--muted-light)}
.vea-sev-attention,.vea-sev-serious{background:rgba(245,176,65,.18);color:#F5B041}
.vea-sev-stop{background:rgba(255,107,107,.2);color:#FF6B6B}
.vea-panel h3{margin:0 0 6px}
.vea-purpose{color:var(--muted-light);font-size:13px;font-style:italic}
.vea-check{margin:8px 0}
.vea-block{background:var(--bg2);border-radius:10px;padding:12px;margin:10px 0;font-size:14px;line-height:1.5}
.vea-drive{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--accent2);font-weight:700;margin-top:8px}
.vea-stuck{border-left:3px solid #F5B041}
.vea-block ul{margin:4px 0 0;padding-left:18px}
@media (max-width:860px){.vea-stage{flex-direction:column}}

/* ── STEP 8.8 AI Diagnostics tool ─────────────────────────────────── */
.ai-drives{display:flex;flex-wrap:wrap;gap:6px}
.ai-drive{background:var(--card);color:var(--text-light);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:13px;cursor:pointer}
.ai-drive.on{background:var(--red2);border-color:var(--red2);color:#fff}
.ai-file{margin:6px 0 8px;color:var(--muted-light);font-size:13px}
.ai-photo-ok{color:#2ECC71;font-size:13px;margin-bottom:8px}
.ai-diagnosis{background:var(--bg);border:1px solid var(--line);border-left:3px solid var(--accent2);border-radius:12px;padding:16px;line-height:1.55}
.ai-diagnosis h3{margin:6px 0}
.ai-sev{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.1em;padding:3px 10px;border-radius:999px;margin-bottom:8px}
.ai-sev-info{background:var(--bg2);color:var(--muted-light)}
.ai-sev-warn{background:rgba(245,176,65,.18);color:#F5B041}
.ai-sev-stop{background:rgba(255,107,107,.2);color:#FF6B6B}
.ai-block{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px;margin:10px 0;font-size:14px}
.ai-block ul{margin:6px 0 0;padding-left:18px}
.ai-fb{border-left:3px solid #F5B041}

/* ── STEP 8.10 Predictive Planner tool ────────────────────────────── */
.pp-inputs{display:flex;gap:14px;flex-wrap:wrap}
.pp-inputs label{flex:1;min-width:180px}
.pp-head{font-weight:800;font-size:16px;margin:8px 0 12px}
.pp-list{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.pp-item{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pp-row{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.pp-left strong{font-size:14px}
.pp-sev{font-weight:800;font-size:12px}
.pp-reason{color:var(--muted-light);font-size:12.5px;margin-top:6px;line-height:1.4}
.fin{width:100%;max-width:200px;background:var(--bg);color:var(--text-light);border:1px solid var(--line);border-radius:6px;padding:6px 8px;font:inherit;font-size:12px;margin-top:6px}

/* ── STEP 8.11 Trip Patterns tool ─────────────────────────────────── */
.tp-add{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.tp-add .fp-in{flex:1;min-width:90px;margin-bottom:0}
.tp-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.tp-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.tp-stat div{font-size:18px;font-weight:800;color:var(--accent2)}
.tp-stat span{font-size:11px;color:var(--muted-light)}
.tp-bar-row{display:flex;gap:10px;margin:14px 0}
.tp-bar-col{flex:1;text-align:center}
.tp-bar-bg{height:90px;background:var(--bg2);border-radius:6px;position:relative;overflow:hidden;margin-bottom:4px}
.tp-bar-fill{position:absolute;bottom:0;left:0;right:0;background:var(--accent2);border-radius:6px 6px 0 0}
.tp-bar-col span{font-size:11px;color:var(--muted-light)}
.tp-bar-col b{font-size:13px}
.tp-trends{display:flex;gap:14px;flex-wrap:wrap;margin:10px 0;font-size:13px}
.tp-trends b{color:var(--accent2)}
.tp-out{background:var(--bg2);border-left:3px solid #F5B041;border-radius:10px;padding:12px 14px;margin-top:10px;font-size:13px;line-height:1.5}
@media (max-width:560px){.tp-stats{grid-template-columns:repeat(2,1fr)}}

/* ── STEP 7.1 Emergency tool ─────────────────────────────────────── */
.pg-em-pos,.pg-em-contact{max-width:560px}
.pg-em-coord{margin-top:10px;font-size:15px;letter-spacing:.3px}
.pg-em-err{font-size:12.5px;min-height:18px;margin-top:8px}
.em-card{border:1px solid var(--line);border-left:4px solid var(--em,#E02020);border-radius:10px;background:var(--card);margin:10px 0;overflow:hidden}
.em-card summary{cursor:pointer;font-weight:800;font-size:15px;padding:13px 16px;list-style:none}
.em-card summary::-webkit-details-marker{display:none}
.em-card summary::before{content:"▸ ";color:var(--em,#E02020)}
.em-card[open] summary::before{content:"▾ "}
.em-card ol{margin:0;padding:0 26px 14px;font-size:13.5px;line-height:1.4}
.em-card li{margin-bottom:8px}

/* ── STEP 6.1–6.4 Trip & Fuel Log tool ─────────────────────────────── */
.tl-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:16px 0}
.tl-card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.tl-card h2{margin-top:0}
.tl-inline{display:flex;gap:8px}
.tl-inline .fp-in{flex:1;margin-bottom:8px}
.tl-inline .pg-select{margin-bottom:8px;width:auto}
.tl-stats{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:14px 0}
.tl-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.tl-stat div{font-size:17px;font-weight:800;color:var(--accent2)}
.tl-stat span{font-size:11px;color:var(--muted-light)}
.tl-tank-row{display:flex;align-items:center;gap:10px;margin:4px 0}
.tl-tank-row label{margin:0}
.tl-warn{font-size:13px;font-weight:700;color:var(--muted-light);min-height:20px;margin-top:6px}
.tl-warn.on{color:#E02020;background:rgba(224,32,32,.1);border-left:3px solid #E02020;padding:8px 10px;border-radius:6px}
.tl-history h2{margin-bottom:6px}
.tl-row{background:var(--card);border:1px solid var(--line);border-radius:8px;padding:8px 12px;margin:6px 0;font-size:13.5px}
@media(max-width:720px){.tl-grid{grid-template-columns:1fr}.tl-stats{grid-template-columns:repeat(2,1fr)}}

/* ── STEP 6.5–6.8 Checklists tool ──────────────────────────────────── */
.chkl-list{display:flex;flex-direction:column;gap:14px;margin:14px 0}
.chkl{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px}
.chkl-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.chkl-head strong{font-size:15px}
.chkl-pct{font-size:12px;color:var(--accent2);font-weight:700}
.chkl-items{display:flex;flex-direction:column;gap:6px}
.chkl-item{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.35;cursor:pointer}
.chkl-item input{margin-top:3px}
.chkl-bar-bg{height:6px;background:var(--bg2);border-radius:999px;margin-top:12px;overflow:hidden}
.chkl-bar{height:100%;width:0;background:var(--accent2);border-radius:999px;transition:width .2s}
.chkl textarea,.chkl input{font-family:inherit}

/* ── STEP 5.10 Cost of Ownership tool ─────────────────────────────── */
.co-cards{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:14px 0}
.co-big{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;text-align:center}
.co-big div{font-size:30px;font-weight:800;color:var(--accent2)}
.co-big span{font-size:13px;color:var(--muted-light)}
.co-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:14px 0}
.co-metric{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:14px;text-align:center}
.co-metric div{font-size:18px;font-weight:800;color:var(--accent2)}
.co-metric span{font-size:11px;color:var(--muted-light)}
.co-entry{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px;margin:14px 0}
.co-entry h2{margin-top:0;font-size:15px}
@media(max-width:720px){.co-cards{grid-template-columns:1fr}.co-metrics{grid-template-columns:repeat(2,1fr)}}

/* ── STEP 4.10 Parts Locator tool ──────────────────────────────────── */
.pl-country-row{display:flex;gap:8px;align-items:center;margin:6px 0}
.pl-country-row .btn{width:auto}
.pl-country.on{background:var(--accent2);color:var(--dark);border-color:var(--accent2)}
.pl-controls{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:12px 0}
.pl-controls label{display:block}
.pl-controls .pg-select{width:100%}
.pl-results{margin:10px 0}
.pl-links{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.pl-link{width:auto}
@media(max-width:720px){.pl-controls{grid-template-columns:1fr}}

/* ── /tools/ index ─────────────────────────────────────────────────── */
.pg-tools-group{margin:26px 0}
.pg-tools-group h2{border-left:4px solid var(--accent2);padding-left:10px;font-size:20px}
.pg-tools-grid{grid-template-columns:repeat(3,1fr)}
.pg-tool-card{text-decoration:none;display:block}
.pg-tool-card h3{color:var(--text-light);margin:0 0 6px;font-size:15px}
.pg-tool-card p{margin:0;font-size:13px;line-height:1.45}
@media(max-width:860px){.pg-tools-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.pg-tools-grid{grid-template-columns:1fr}}

/* ── Blog article hero screenshot ──────────────────────────────────── */
.blog-hero{width:100%;max-width:640px;display:block;margin:0 auto 20px;border:1px solid var(--line);border-radius:12px;background:var(--bg);}

/* ── Marine Suite cross-promo (CatchTales) ────────────────────────── */
.pg-marine-strip{background:var(--dark);border-top:1px solid var(--line);padding:16px 0}
.pg-marine-strip-inner{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.pg-marine-strip-text strong{color:var(--accent2);font-size:14px}
.pg-marine-strip-text span{color:var(--muted-light);font-size:13px;margin-left:8px}
.pg-marine-suite{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent2);border-radius:12px;padding:18px;max-width:560px;margin:14px 0}
.pg-marine-suite h3{margin:6px 0 8px}
.pg-marine-cta{display:inline-block;font-weight:700;color:var(--accent2);margin-top:8px;text-decoration:none}
.pg-sidecard{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px}
.pg-sidecard-head{font-weight:800;font-size:14px;margin-bottom:8px}
.ms-promo{margin:0 0 18px}