/* BhutiFuel SEO pages, shared styles. Lightweight, mobile-first, no JS dependencies. */
:root {
  --green: #007749;
  --green-dark: #005a38;
  --yellow: #ffd447;
  --paper: #f4f0e6;
  --ink: #22271f;
  --muted: #5c6357;
  --card: #ffffff;
  --line: #e3ddcd;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: var(--paper);
  line-height: 1.6;
}
h1, h2, h3 { font-family: "Baloo 2", "Nunito", sans-serif; line-height: 1.2; }
a { color: var(--green-dark); }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: .7rem 1.1rem;
  background: rgba(255, 252, 245, 0.94);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 10;
}
/* Brand is the full logo lockup image (same as the landing header) —
   no text wordmark, so the old Bhuti/Buthi spelling split is gone. */
.brand { display: inline-flex; align-items: center; text-decoration: none; flex-shrink: 0; }
.brand img { display: block; height: 28px; width: auto; }
.header-cta {
  background: var(--green); color: #fff; font-weight: 800;
  padding: .55rem 1.2rem; border-radius: 999px; text-decoration: none; font-size: .9rem;
  white-space: nowrap; flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(0, 119, 73, 0.35);
}
main { max-width: 760px; margin: 0 auto; padding: 1.4rem 1.1rem 3rem; }
.eyebrow {
  color: var(--green-dark); font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; font-size: .78rem; margin: 0 0 .4rem;
}
h1 { font-size: 2rem; margin: .2rem 0 .6rem; }
h2 { font-size: 1.35rem; margin: 2rem 0 .5rem; }
h3 { font-size: 1.05rem; margin: 1.2rem 0 .3rem; }
.lede { font-size: 1.05rem; color: var(--muted); margin: 0 0 1.4rem; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  padding: 1.1rem 1.1rem 1.25rem; margin: 1.2rem 0;
}
/* Profit-report capture card (acquisition machine step 3) · HubSpot's embed
   brings its own form styles; this just gives it breathing room. */
.capture [data-hs-form] { margin-top: .6rem; }
/* Native lead-queue fallback form (shown when HubSpot is blocked or
   unconfigured) · mirrors the calculator input treatment. */
.bhuti-queue-form label { display: block; font-weight: 700; margin: .7rem 0 .15rem; font-size: .92rem; }
.bhuti-queue-form input, .bhuti-queue-form select, .bhuti-queue-form textarea {
  width: 100%; padding: .6rem .7rem; font-size: 1rem; font-family: inherit;
  border: 2px solid var(--line); border-radius: 10px; background: #fffdf7;
}
.bhuti-queue-form input:focus, .bhuti-queue-form select:focus, .bhuti-queue-form textarea:focus {
  outline: 3px solid var(--yellow); border-color: var(--green);
}
.bhuti-queue-form button[type="submit"] {
  margin-top: .8rem; padding: .65rem 1.2rem; font-size: 1rem; font-weight: 800;
  font-family: inherit; color: #fff; background: var(--green); border: none;
  border-radius: 10px; cursor: pointer;
}
.bhuti-queue-form button[type="submit"]:disabled { opacity: .6; cursor: wait; }
.bhuti-queue-note { font-size: .9rem; color: var(--muted); margin: .5rem 0 0; }
.formula {
  background: #0b3d27; color: #eafff3; border-radius: 10px;
  padding: .8rem 1rem; font-family: ui-monospace, Menlo, monospace;
  font-size: .95rem; overflow-x: auto;
}
.table-wrap { overflow-x: auto; margin: .8rem 0; }
table { width: 100%; max-width: 100%; border-collapse: collapse; font-size: .92rem; margin: .8rem 0; }
th, td { text-align: left; padding: .5rem .55rem; border-bottom: 1px solid var(--line); white-space: normal; }
@media (min-width: 641px) {
  th, td { white-space: nowrap; }
}
th { background: #ece7d8; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }

/* Calculator form */
.calc label { display: block; font-weight: 700; margin: .7rem 0 .15rem; font-size: .92rem; }
.calc input {
  width: 100%; padding: .6rem .7rem; font-size: 1rem; font-family: inherit;
  border: 2px solid var(--line); border-radius: 10px; background: #fffdf7;
}
.calc input:focus { outline: 3px solid var(--yellow); border-color: var(--green); }
.calc .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem .9rem; }
.calc button {
  margin-top: 1rem; width: 100%; padding: .75rem;
  background: var(--green); color: #fff; font-weight: 800; font-size: 1rem;
  border: 0; border-radius: 999px; cursor: pointer; font-family: inherit;
}
.calc button:hover { background: var(--green-dark); }
.calc .hint { font-weight: 400; color: var(--muted); font-size: .8rem; }
.results { margin-top: 1rem; border-top: 2px dashed var(--line); padding-top: .8rem; }
.results dl { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem .9rem; margin: 0; }
.results dt { color: var(--muted); font-size: .85rem; }
.results dd { margin: 0; font-weight: 800; font-size: 1.15rem; font-variant-numeric: tabular-nums; }
.results .big dd { font-size: 1.45rem; color: var(--green-dark); }
.results .big dd.neg { color: #b3261e; }
.results .placeholder { color: var(--muted); font-weight: 400; font-size: .95rem; grid-column: 1 / -1; }
.faq details { border-bottom: 1px solid var(--line); padding: .4rem 0; }
.faq summary { font-weight: 800; cursor: pointer; padding: .35rem 0; }
.faq p { margin: .3rem 0 .6rem; color: var(--muted); }
.note {
  background: #fdf6de; border: 1px solid #eedf9a; border-radius: 10px;
  padding: .7rem .9rem; font-size: .9rem; color: #5c5222; margin: 1rem 0;
}
.site-footer { background: #10241a; color: #cfe0d5; padding: 1.8rem 1.1rem 2.4rem; }
.site-footer .wrap { max-width: 960px; margin: 0 auto; }
.site-footer .footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; margin-bottom: 1.4rem; }
.site-footer .footer-col h2 { color: #fff; font-size: .95rem; margin: 0 0 .6rem; letter-spacing: .02em; }

/* Free fleet audit form (src/seo/fleet.html) */
.audit-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem 1rem; margin: .6rem 0 .2rem; }
.audit-form-grid label { display: grid; gap: .25rem; font-size: .9rem; color: var(--text, #2a2a25); }
.audit-form-grid label i { color: var(--muted, #7a7268); font-style: normal; font-size: .8rem; }
.audit-form-grid input,
.audit-form-grid select { font: inherit; padding: .55rem .7rem; border: 1px solid var(--line, #d6d3ca); border-radius: 8px; background: #fff; color: inherit; }
.audit-form-grid input:focus { outline: 2px solid var(--green, #007749); outline-offset: 1px; border-color: var(--green, #007749); }
.audit-form-grid input:invalid:not(:placeholder-shown) { border-color: #b94a3f; }
.audit-form-grid .span-all { grid-column: 1 / -1; }
.audit-fine-note { font-size: .8rem; color: var(--muted, #7a7268); margin: .4rem 0 .8rem; }
.audit-status { font-size: .9rem; margin: .5rem 0 0; min-height: 1.2em; }
.audit-status-success { color: #0b3d27; font-weight: 700; }
.audit-status-error { color: #8a1f12; font-weight: 700; }
.audit-result { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line, #d6d3ca); }
.audit-result h3 { margin-top: 0; }
.audit-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin: .4rem 0 1rem; }
.audit-stats div { background: #f7fcf8; border: 1px solid rgba(0,119,73,.25); border-radius: 10px; padding: .7rem .8rem; }
.audit-stats span { display: block; font-size: .75rem; color: var(--muted, #7a7268); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.audit-stats strong { display: block; font-size: 1.3rem; margin-top: .15rem; color: #0b3d27; }
.audit-tips { padding-left: 1.1rem; margin: .3rem 0 .9rem; }
.audit-tips li { margin-bottom: .35rem; font-size: .92rem; }
.audit-followup { font-size: .9rem; color: var(--text, #2a2a25); margin: 0; }
#audit-form .hp { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }
#audit-form button[type="submit"] { margin-top: .2rem; }
@media (max-width: 560px) {
  .audit-form-grid { grid-template-columns: 1fr; }
  .audit-stats { grid-template-columns: 1fr; }
}
.site-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; }
.site-footer li { line-height: 1.25; }
.site-footer a { color: #cfe0d5; text-decoration: none; }
.site-footer a:hover { color: var(--yellow); }
.site-footer .footer-bottom { border-top: 1px solid rgba(207,224,213,.15); padding-top: 1rem; }
.site-footer .app-cta {
  display: inline-block; margin: .4rem 0 .8rem; background: var(--yellow); color: #3a2f00;
  font-weight: 800; padding: .55rem 1.1rem; border-radius: 999px; text-decoration: none;
}
.fineprint { font-size: .8rem; color: #8fa79a; margin: .6rem 0 0; }
@media (max-width: 760px) {
  .site-footer .footer-cols { grid-template-columns: 1fr 1fr; gap: 1.4rem; }
}
@media (max-width: 560px) {
  h1 { font-size: 1.6rem; }
  .calc .field-grid { grid-template-columns: 1fr; }
  .results dl { grid-template-columns: 1fr; }
  .site-footer .footer-cols { grid-template-columns: 1fr; gap: 1.2rem; }
}
.results .app-link { margin: .9rem 0 0; font-weight: 800; }
/* The SARS page renders its output into #calc-out, which sits outside .results,
   so the same "take this into the app" link needs to carry its own styling. */
#calc-out .app-link { margin: .9rem 0 0; font-weight: 800; }