/* Shared stylesheet for Fuel Snapshot content pages (guides, pillars, hubs,
   methodology) - same design tokens as index.html/privacy.html (lime/ink/paper,
   Inter, 22px/14px radii), factored out here once this became a multi-page
   site rather than one landing page. index.html and privacy.html keep their
   own inline styles; only pages built after that split use this file. */
:root{
  --bg:#f5f7f8; --paper:#ffffff; --ink:#101820; --muted:#5c6670; --line:#dee3e6;
  --lime:#d7ff63; --lime2:#e9ff86; --lime-soft:#f7ffe0;
  --radius:22px; --radius2:14px; --shadow:0 12px 30px rgba(16,24,32,.08);
  --maxw:760px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{overflow-x:hidden;max-width:100%}
body{margin:0;background:linear-gradient(180deg,#f9fafb 0%,#eef1f3 100%);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.6}
a{color:var(--ink)}
img,svg{display:block;max-width:100%}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}

.nav{position:sticky;top:0;z-index:20;background:rgba(249,250,251,.86);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.nav-inner{display:flex;align-items:center;gap:12px;padding:14px 18px;max-width:960px;margin:0 auto}
.brand{display:flex;align-items:center;gap:12px;text-decoration:none}
.logo{width:34px;height:34px;border-radius:10px;background:var(--ink);display:grid;place-items:center;flex:none}
.logo-bars{height:18px;display:flex;align-items:end;gap:2px}
.logo-bars i{display:block;width:3px;background:linear-gradient(#e9ff86,var(--lime));border-radius:2px}
.logo-bars i:nth-child(1){height:7px}.logo-bars i:nth-child(2){height:11px}.logo-bars i:nth-child(3){height:16px}.logo-bars i:nth-child(4){height:18px}.logo-bars i:nth-child(5){height:14px}.logo-bars i:nth-child(6){height:10px}.logo-bars i:nth-child(7){height:6px}
.brand-name{font-weight:800;letter-spacing:.16em;font-size:12px}
.nav-cta{margin-left:auto;background:var(--ink);color:#fff;border-radius:999px;padding:10px 16px;font-weight:700;font-size:13px;text-decoration:none;white-space:nowrap}

main{padding:40px 0 64px}
.breadcrumb{font-size:12.5px;color:var(--muted);margin-bottom:18px}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{color:var(--ink)}
.kicker{font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#5a6b28}
h1{font-size:clamp(28px,6vw,42px);letter-spacing:-.02em;margin:12px 0 0;line-height:1.1}
.dek{color:var(--muted);font-size:16.5px;margin-top:16px;line-height:1.6}

h2{font-size:23px;margin:40px 0 12px;letter-spacing:-.01em}
h3{font-size:17.5px;margin:24px 0 8px}
p,li{color:#2b333a;font-size:15.5px}
article p{margin:12px 0}
article ul,article ol{padding-left:20px;margin:12px 0}
article li{margin:6px 0}
strong{color:var(--ink)}

table{width:100%;border-collapse:collapse;margin:18px 0;font-size:14.5px}
th,td{text-align:left;padding:10px 8px;border-bottom:1px solid var(--line);vertical-align:top}
th{color:var(--muted);font-weight:700;font-size:12px;text-transform:uppercase;letter-spacing:.04em}

.quick-answer{margin:28px 0;background:var(--lime-soft);border:1px solid #e3f2a8;border-radius:var(--radius2);padding:20px 22px}
.quick-answer .kicker{color:#4b5a1f}
.quick-answer p{color:#3a4520;margin-top:8px}

.pill-row{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.pill{border:1px solid var(--line);background:#fff;border-radius:999px;padding:9px 15px;font-size:13.5px;font-weight:700;color:#3f4a44;text-decoration:none}

.related{display:grid;gap:12px;margin-top:16px}
.related a{display:block;background:var(--paper);border:1px solid var(--line);border-radius:var(--radius2);padding:16px 18px;text-decoration:none;box-shadow:var(--shadow)}
.related a strong{display:block;font-size:15px}
.related a span{display:block;color:var(--muted);font-size:13.5px;margin-top:4px}

.faq-list{display:grid;gap:12px;margin-top:16px}
.faq-item{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius2);padding:18px 20px;box-shadow:var(--shadow)}
.faq-item summary{cursor:pointer;font-weight:700;font-size:15px;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-weight:800;font-size:18px;color:var(--muted);flex:none}
.faq-item[open] summary::after{content:'−'}
.faq-item p{color:var(--muted);font-size:14.5px;margin-top:12px}

.cta{margin-top:44px;background:var(--ink);color:#fff;border-radius:var(--radius);padding:32px;text-align:center}
.cta h2{color:#fff;margin-top:0}
.cta p{color:rgba(255,255,255,.72);font-size:15px;max-width:460px;margin:10px auto 0}
.cta .btn{display:inline-block;margin-top:18px;background:linear-gradient(90deg,var(--lime2),var(--lime));color:var(--ink);border-radius:999px;padding:14px 22px;font-weight:800;font-size:14.5px;text-decoration:none}

footer{border-top:1px solid var(--line);padding:28px 0;text-align:center;color:var(--muted);font-size:12.5px}
footer a{text-decoration:none}

.consent-banner{position:fixed;left:16px;right:16px;bottom:16px;z-index:50;max-width:520px;margin:0 auto;background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);padding:16px 18px;font-size:13.5px;line-height:1.5;color:var(--ink)}
.consent-banner p{margin:0 0 12px}
.consent-banner a{text-decoration:underline}
.consent-actions{display:flex;gap:10px;justify-content:flex-end}
.consent-actions button{border-radius:999px;padding:9px 16px;font-weight:700;font-size:13px;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink)}
.consent-actions button#consent-accept{background:var(--ink);color:#fff;border-color:var(--ink)}
@media(max-width:480px){.consent-banner{left:12px;right:12px;bottom:12px;padding:14px}}