/* FitSideHustle — "Second Shift" theme: deep teal ink, warm paper, lantern amber.
   One lockup, never recolored. Light components carry scoped rules that beat
   section rules on specificity in every flavor (plain/alt/dark/hero). */
:root{
  --paper:#FBF5E8; --paper2:#FFFDF6; --tint:#EDF1E6;
  --ink:#12312C; --ink2:#0B231F; --teal:#17554A;
  --muted:#43584F; --mutedlt:#BCD2C8;
  --accent:#A83E12; --amber:#E9A13B; --amberlt:#F5C168;
  --line:#DCCFB2; --good:#1E6B4F; --bad:#9E2B1B;
  --radius:14px;
  --font-body:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --font-display:"Iowan Old Style",Palatino,Palatino Linotype,Georgia,serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--font-body);font-size:17px;line-height:1.6}
h1,h2,h3{font-family:var(--font-display);line-height:1.18;margin:0 0 .5em}
h1{font-size:2.35rem} h2{font-size:1.75rem} h3{font-size:1.22rem}
p{margin:0 0 1em}
a{color:var(--accent);text-decoration:underline;text-underline-offset:2px}
a:hover{color:var(--ink)}
.wrap{max-width:1060px;margin:0 auto;padding:0 20px}
section{padding:52px 0}
section.alt{background:var(--tint)}
section.dark{background:var(--ink2);color:var(--paper)}
section.dark h2,section.dark h3{color:var(--paper)}
section.dark p,section.dark li{color:var(--paper)}
section.dark a{color:var(--amberlt)}
.hero{background:linear-gradient(160deg,var(--ink2) 55%,var(--teal));color:var(--paper);padding:60px 0 56px}
.hero h1,.hero h2,.hero h3{color:var(--paper)}
.hero p,.hero li{color:var(--paper)}
.hero a{color:var(--amberlt)}
.tagline{font-size:1.14rem;max-width:44em}
.kicker{font-family:var(--font-body);font-weight:700;letter-spacing:.14em;text-transform:uppercase;font-size:.78rem;color:var(--accent);margin:0 0 .8em}
.hero .kicker{color:var(--amber)}
.small{font-size:.88rem}
.muted{color:var(--muted)}
section.dark .muted,.hero .muted{color:var(--mutedlt)}
/* header + one lockup */
.site-head{background:var(--paper);border-bottom:1px solid var(--line);padding:12px 0}
.site-head .wrap{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}
.lockup{display:inline-flex;align-items:center;gap:10px;text-decoration:none}
.lockup .mark{flex:none}
.lockup .word{font-family:var(--font-display);font-weight:700;font-size:1.42rem;color:var(--ink);letter-spacing:.01em}
.lockup .word .a2{color:var(--accent)}
nav.main{display:flex;gap:4px;flex-wrap:wrap}
nav.main a{color:var(--ink);text-decoration:none;font-weight:600;font-size:.95rem;padding:7px 10px;border-radius:8px}
nav.main a:hover{background:var(--tint);color:var(--ink)}
/* buttons */
.btn{display:inline-block;background:var(--ink);color:var(--paper);font-weight:700;text-decoration:none;padding:13px 22px;border-radius:10px;border:2px solid var(--ink);font-size:1rem;cursor:pointer}
.btn:hover{background:var(--teal);color:var(--paper)}
.btn.alt{background:var(--amber);border-color:var(--amber);color:var(--ink)}
.btn.alt:hover{background:var(--amberlt);color:var(--ink)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn.ghost:hover{background:var(--tint);color:var(--ink)}
section.dark .btn.ghost,.hero .btn.ghost{color:var(--paper);border-color:var(--paper)}
/* light components on any background */
.panel,.card,.result,.lock-panel{background:var(--paper2);color:var(--ink);border:1px solid var(--line);border-radius:var(--radius);padding:24px;margin:0 0 20px}
.panel h2,.panel h3,.card h2,.card h3,.result h2,.result h3,.lock-panel h2,.lock-panel h3{color:var(--ink)}
.panel p,.card p,.result p,.lock-panel p,.panel li,.card li,.result li,.lock-panel li{color:var(--ink)}
section.dark .panel h3,section.dark .card h3,section.dark .result h3,section.dark .lock-panel h3{color:var(--ink)}
section.dark .panel p,section.dark .card p,section.dark .result p,section.dark .lock-panel p,section.dark .panel li,section.dark .card li,section.dark .result li,section.dark .lock-panel li{color:var(--ink)}
section.dark .panel a,section.dark .card a,section.dark .result a,section.dark .lock-panel a{color:var(--accent)}
.hero .panel h3,.hero .card h3,.hero .result h3,.hero .lock-panel h3{color:var(--ink)}
.hero .panel p,.hero .card p,.hero .result p,.hero .lock-panel p,.hero .panel li,.hero .card li,.hero .result li,.hero .lock-panel li{color:var(--ink)}
.hero .panel a,.hero .card a,.hero .result a,.hero .lock-panel a{color:var(--accent)}
section .panel a.btn,section .card a.btn,section .result a.btn,section .lock-panel a.btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.hero .panel a.btn,.hero .card a.btn,.hero .result a.btn,.hero .lock-panel a.btn{background:var(--ink);color:var(--paper);border-color:var(--ink)}
section .panel .btn.alt,section .card .btn.alt,section .result .btn.alt{background:var(--amber);color:var(--ink);border-color:var(--amber)}
/* result figures */
.result .big{font-size:2rem;font-family:var(--font-display);font-weight:700;color:var(--ink)}
.result table,.panel table,.card table,.kit-body table{width:100%;border-collapse:collapse;margin:0 0 1em;font-size:.95rem}
.result th,.result td,.panel th,.panel td,.card th,.card td,.kit-body th,.kit-body td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
.result th,.panel th,.card th,.kit-body th{font-weight:700}
.num{text-align:right;font-variant-numeric:tabular-nums}
.chip{display:inline-block;font-size:.74rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:3px 9px;border-radius:20px;border:1px solid var(--teal);color:var(--teal);margin:0 6px 6px 0}
.chip.partial{border-color:var(--accent);color:var(--accent)}
.chip.dark{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.stamp{font-size:.82rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:8px;margin-top:12px}
section.dark .stamp,.hero .stamp{color:var(--mutedlt)}
.panel .stamp,.card .stamp,.result .stamp{color:var(--muted)}
/* forms */
form.tool label{display:block;font-weight:600;margin:0 0 4px;font-size:.95rem}
form.tool input[type=number],form.tool input[type=text],form.tool select{width:100%;padding:10px 12px;border:1px solid #B9A87F;border-radius:8px;font-size:1rem;background:#fff;color:var(--ink);margin:0 0 14px}
form.tool fieldset{border:1px solid var(--line);border-radius:10px;margin:0 0 16px;padding:12px 16px}
form.tool legend{font-weight:700;padding:0 6px}
form.tool .checks label{display:flex;gap:8px;font-weight:400;align-items:flex-start;margin:0 0 6px}
form.tool .checks input{margin-top:5px}
/* form text on dark surfaces (hero / section.dark): labels, legends and
   check labels take the section's paper. These are direct rules on the
   elements, scoped above the bare .tool ink color they would otherwise
   inherit onto the dark background (ink on ink2 measured 1.18:1). */
section.dark form.tool label,section.dark form.tool legend,section.dark form.tool .checks label,
.hero form.tool label,.hero form.tool legend,.hero form.tool .checks label{color:var(--paper)}
/* Primary action buttons inside the checker forms (Fit Finder submit,
   Real Pay submit): the base .btn ink pill disappeared on the hero — its
   ink background measured 1.18:1 against the ink2 gradient stop, so only
   the paper text floated. These take the lantern amber with ink text
   (6.41:1) so the one action on the page reads as the action on every
   background it appears on. Desktop gets real presence below; the
   mobile full-row .btn block further down is untouched. */
form.tool button.btn[type=submit]{background:var(--amber);border-color:var(--amber);color:var(--ink)}
form.tool button.btn[type=submit]:hover{background:var(--amberlt);border-color:var(--amberlt);color:var(--ink)}
@media (min-width:761px){
  form.tool button.btn[type=submit]{padding:16px 34px;font-size:1.05rem;min-width:340px}
}
/* Pack strip: the paid pack named at the top of the two tool doors.
   Added after the 2026-10-23 user catch — the Pack sales page was
   reachable from the homepage only ~81% down the page (+ footer nav).
   A light card in brand colors: paper2 fill, amber frame, ink text,
   the .btn.alt amber button. It owns its text color like every light
   component (also listed in the component color rule at the bottom). */
.packband{padding:30px 0 2px}
.pack-strip{background:var(--paper2);border:2px solid var(--amber);border-radius:var(--radius);padding:22px 24px;display:flex;gap:12px 28px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.pack-strip .ps-text{flex:1 1 430px}
.pack-strip .ps-body{margin:0}
.pack-strip h2{font-size:1.45rem}
.pack-strip .ps-cta{flex:none;margin:0}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
/* tax module inside every result */
.taxbox{border:2px solid var(--teal);border-radius:10px;padding:16px 18px;margin-top:16px;background:#F2F7EE}
.taxbox h3{color:var(--ink);margin-top:0}
.taxbox p,.taxbox li{color:var(--ink)}
/* footer */
.site-foot{background:var(--ink2);color:var(--paper);padding:44px 0 34px;margin-top:0}
.site-foot p,.site-foot li{color:var(--paper)}
.site-foot a{color:var(--amberlt)}
.site-foot .plate{display:inline-block;background:var(--paper);border-radius:12px;padding:10px 16px;margin:0 0 18px}
.site-foot nav.foot{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 18px}
.site-foot nav.foot a{padding:5px 8px;text-decoration:none;font-weight:600;font-size:.93rem}
.footline{border-top:1px solid #2E4A43;padding-top:14px;font-size:.9rem;color:var(--mutedlt)}
/* kit */
.kit-body{background:var(--paper2);border:1px solid var(--line);border-radius:var(--radius);padding:28px}
.kit-body h2{border-top:2px solid var(--ink);padding-top:22px;margin-top:34px}
.kit-body h2:first-child{border-top:none;padding-top:0;margin-top:0}
.sheet{border:1.5px dashed #B9A87F;border-radius:10px;padding:16px 18px;margin:0 0 16px;background:#fff}
.sheet h3{margin-top:0}
.fill{border-bottom:1.5px solid #B9A87F;min-height:1.5em;display:block;margin:2px 0 10px}
/* Every light component owns its text color wherever it is placed —
   plain/alt/dark/hero section, or injected at runtime by the checkers. */
.panel,.sheet,.tool,.result,.taxbox,.card,.lock-panel,.pack-strip{color:var(--ink)}
@media print{.site-head,.site-foot,.no-print{display:none}}
/* mobile */
@media (max-width:760px){
  body{font-size:16px}
  h1{font-size:1.8rem} h2{font-size:1.45rem}
  section{padding:38px 0}
  .site-head .wrap{flex-direction:column;align-items:flex-start}
  nav.main{display:flex;flex-wrap:wrap;gap:2px;width:100%;justify-content:space-between}
  nav.main a{padding:8px 7px;font-size:.9rem}
  .grid2,.grid3{grid-template-columns:1fr}
  .panel,.card,.result,.lock-panel{padding:18px}
  .btn{display:block;text-align:center;width:100%;margin:0 0 10px}
  .result table,.panel table{font-size:.88rem}
  .pack-strip{padding:18px}
  .pack-strip .ps-cta{flex:1 1 100%}
}