/* FirstDollarCheck — Creator Cream & Deep Green
   Cascade discipline: light components (.card .tool .result .notice .faq
   .lock-panel .tablewrap) always carry ink text on light backgrounds.
   Component text rules use doubled-class scope (0,2,x) so they beat every
   section flavor rule (0,1,x) in plain / alt / dark / hero sections. */
:root{
  --paper:#FAF6EC; --cream:#FFFDF6; --tint:#EFF5EA; --ink:#1C2420;
  --green:#14532D; --green2:#166B45; --go:#1D9E6C; --amber:#E8A13A;
  --danger:#B3402A; --line:#D9D2BE; --dark:#0E3520;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:17px;line-height:1.6}
h1,h2,h3,h4{line-height:1.25;margin:0 0 .5em;font-weight:800}
h1{font-size:2rem} h2{font-size:1.5rem} h3{font-size:1.2rem} h4{font-size:1.05rem}
p{margin:0 0 1em}
a{color:var(--green2);text-decoration:underline}
ul,ol{margin:0 0 1em;padding-left:1.3em}
li{margin-bottom:.4em}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
.small{font-size:.88rem}
.tagline{font-weight:700;letter-spacing:.02em}

/* header / footer */
header.site{background:var(--cream);border-bottom:3px solid var(--green)}
header.site .wrap{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;padding-top:14px;padding-bottom:14px}
.logo{font-size:1.35rem;font-weight:900;text-decoration:none;color:var(--ink)}
.logo .w2{color:var(--green2)}
.logo small{display:block;font-size:.72rem;font-weight:600;color:var(--green);letter-spacing:.06em;text-transform:uppercase}
nav.main{display:flex;flex-wrap:wrap;gap:6px 18px;margin-left:auto}
nav.main a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.98rem}
nav.main a:hover{text-decoration:underline}
footer.site{background:var(--dark);color:var(--paper);padding:36px 0 30px;margin-top:0}
footer.site a{color:var(--amber)}
footer.site p{color:var(--paper)}
footer.site .fine{font-size:.85rem;opacity:.92}

/* sections */
section{padding:44px 0}
section.alt{background:var(--tint)}
section.dark{background:var(--dark);color:var(--paper)}
section.dark h1,section.dark h2,section.dark h3,section.dark h4{color:var(--paper)}
section.dark p,section.dark li{color:var(--paper)}
section.dark a{color:var(--amber)}
section.hero{background:linear-gradient(160deg,#0E3520 0%,#114527 78%);color:var(--paper);padding:52px 0}
section.hero h1,section.hero h2,section.hero h3{color:var(--paper)}
section.hero p,section.hero li{color:var(--paper)}
section.hero a{color:var(--amber)}
section.hero .tagline{color:var(--amber)}

/* buttons */
.btn.btn{display:inline-block;background:var(--green);color:var(--paper);
  padding:14px 22px;border-radius:10px;font-weight:800;text-decoration:none;
  border:0;cursor:pointer;font-size:1.02rem;min-height:52px;text-align:center}
.btn.btn:hover{background:var(--green2)}
section.dark .btn.btn,section.hero .btn.btn{background:var(--amber);color:var(--ink)}
section.dark .btn.btn:hover,section.hero .btn.btn:hover{background:var(--green2);color:var(--paper)}
.card.card .btn.btn,.tool.tool .btn.btn,.result.result .btn.btn,
.notice.notice .btn.btn,.faq.faq .btn.btn,.lock-panel.lock-panel .btn.btn,
.tablewrap.tablewrap .btn.btn{background:var(--green);color:var(--paper)}
.card.card .btn.btn:hover,.tool.tool .btn.btn:hover,.result.result .btn.btn:hover,
.notice.notice .btn.btn:hover,.faq.faq .btn.btn:hover,.lock-panel.lock-panel .btn.btn:hover,
.tablewrap.tablewrap .btn.btn:hover{background:var(--green2);color:var(--paper)}

/* light components — text */
.card,.tool,.result,.notice,.faq,.lock-panel,.tablewrap{
  background:var(--cream);color:var(--ink);border:1px solid var(--line);
  border-radius:14px;padding:22px;margin:0 0 22px}
.result{background:#EFF7EE}
.notice{background:#FBF3DF;border-color:var(--amber)}
.lock-panel{background:#F3EFE0;border:2px dashed var(--green2)}
.card.card h2,.card.card h3,.card.card h4,.tool.tool h2,.tool.tool h3,.tool.tool h4,
.result.result h2,.result.result h3,.result.result h4,.notice.notice h2,.notice.notice h3,.notice.notice h4,
.faq.faq h2,.faq.faq h3,.faq.faq h4,.lock-panel.lock-panel h2,.lock-panel.lock-panel h3,.lock-panel.lock-panel h4,
.tablewrap.tablewrap h2,.tablewrap.tablewrap h3,.tablewrap.tablewrap h4{color:var(--ink)}
.card.card p,.card.card li,.tool.tool p,.tool.tool li,.result.result p,.result.result li,
.notice.notice p,.notice.notice li,.faq.faq p,.faq.faq li,.lock-panel.lock-panel p,.lock-panel.lock-panel li,
.tablewrap.tablewrap p,.tablewrap.tablewrap li{color:var(--ink)}
.card.card a,.tool.tool a,.result.result a,.notice.notice a,.faq.faq a,
.lock-panel.lock-panel a,.tablewrap.tablewrap a{color:var(--green2);font-weight:600}
.card.card strong,.tool.tool strong,.result.result strong,.notice.notice strong,
.faq.faq strong,.lock-panel.lock-panel strong,.tablewrap.tablewrap strong{color:var(--ink)}
.result.result .warn{color:var(--danger);font-weight:600}
.result.result .good{color:var(--green)}
.result.result .honest{font-size:.9rem;border-top:1px solid var(--line);padding-top:12px}
.tick{color:var(--green2);font-weight:900}
.lock-panel.lock-panel .tick{color:var(--green2)}
section.dark .tick,section.hero .tick{color:var(--amber)}
.card.card .tick,.tool.tool .tick,.result.result .tick,.notice.notice .tick,
.faq.faq .tick,.lock-panel.lock-panel .tick,.tablewrap.tablewrap .tick{color:var(--green2)}

/* kit pack band — light band directly under the hero (homepage) / at the
   top of the risk checker, above the tool. Doubled-class scope (0,2,x)+ so
   its ink-on-tint text and its button beat every section flavor rule. */
.pack-band.pack-band{background:var(--tint);color:var(--ink);
  padding:24px 0;border-bottom:2px solid var(--green2)}
.pack-band.pack-band .wrap{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center}
.pack-band.pack-band h2{color:var(--ink);margin:0;font-size:1.3rem}
.pack-band.pack-band p{color:var(--ink);margin:0}
.pack-band-text{flex:1 1 420px}
.pack-band-cta{flex:0 0 auto}
.pack-band.pack-band a{color:var(--green2);font-weight:600}
.pack-band.pack-band .btn.btn{background:var(--green);color:var(--paper)}
.pack-band.pack-band .btn.btn:hover{background:var(--green2);color:var(--paper)}

/* forms */
label{display:block;font-weight:700;margin:0 0 6px}
.field{margin-bottom:16px}
input[type=number],input[type=date],input[type=text],select{
  width:100%;padding:12px;border:1.5px solid var(--green2);border-radius:9px;
  font-size:1rem;background:#fff;color:var(--ink);min-height:50px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
@media(max-width:720px){.grid2{grid-template-columns:1fr}h1{font-size:1.65rem}}

/* tables */
.tablewrap{overflow-x:auto;padding:14px}
.tablewrap.tablewrap table{border-collapse:collapse;width:100%;min-width:480px}
.tablewrap.tablewrap th,.tablewrap.tablewrap td{border:1px solid var(--line);
  padding:9px 11px;text-align:left;color:var(--ink);background:var(--cream)}
.tablewrap.tablewrap th{background:var(--tint);color:var(--ink)}
table.plain{border-collapse:collapse;width:100%}
table.plain th,table.plain td{border:1px solid var(--line);padding:9px 11px;text-align:left}
section.dark table.plain th,section.dark table.plain td{color:var(--paper);border-color:var(--green2)}
section.hero table.plain th,section.hero table.plain td{color:var(--paper);border-color:var(--green2)}

/* misc */
.case{border-left:5px solid var(--go)}
.case .outcome{font-weight:800}
.pill{display:inline-block;background:var(--tint);border:1px solid var(--green2);
  color:var(--green);border-radius:999px;padding:2px 12px;font-size:.85rem;font-weight:700;margin:0 6px 8px 0}
section.dark .pill,section.hero .pill{background:var(--dark);color:var(--amber);border-color:var(--amber)}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
blockquote{margin:0 0 1em;padding:12px 16px;border-left:4px solid var(--amber);background:var(--cream);color:var(--ink)}
section.dark blockquote,section.hero blockquote{background:var(--cream);color:var(--ink)}
section.dark blockquote p,section.hero blockquote p{color:var(--ink)}