/* ============================================================
   MHDev — /demos/job-management-software-for-trades/ only
   Shared layout lives in ../base.css
   Accent: field green, to sit apart from the manufacturing example
   ============================================================ */

:root{
  --accent:#3E7A52;
  --accent-deep:#2C5B3C;
  --accent-tint:#E5F0E8;
}

/* ---------- Hero ---------- */
.hero{padding:34px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.02fr .98fr;gap:52px;align-items:center}
.hero h1{max-width:13ch}
.hero .lede{font-size:1.14rem;max-width:none}
.hero-tags{
  margin-top:16px;font-weight:600;font-size:.93rem;color:var(--ink-soft);letter-spacing:.02em;
}
/* Buttons deliberately keep the site green everywhere. The industry
   accent is used only for quiet cues: eyebrows, chips, workflow rules. */
.hero-ctas{display:flex;gap:14px;margin-top:32px;flex-wrap:wrap}
.hero-meta{
  margin-top:22px;font-size:.9rem;color:var(--ink-faint);
  display:flex;align-items:center;gap:9px;
}
.hero-meta .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* Eyebrows keep the site green rather than the industry accent. The accent
   is only 4.38:1 on the cream band, just under the 4.5 needed at this size,
   so this matches the home page and the other pages instead. */
.chip{background:var(--accent-tint);color:var(--accent-deep)}
.list-check li::before{border-color:var(--accent)}

/* ---------- Problems as cards ---------- */
.problem-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.problem{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 24px 28px;box-shadow:var(--shadow);
}
.problem .num{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;border-radius:9px;
  background:var(--terra-tint);color:var(--terra-ink);
  font-size:.84rem;font-weight:700;margin-bottom:14px;
}
.problem h3{font-family:var(--font-body);font-size:1.02rem;font-weight:700;line-height:1.35}
.problem p{font-size:.94rem;margin-top:9px}

/* The problem cards sit on the dark band, so they lift off it rather
   than sitting as white blocks */
.band-dark .problem{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);box-shadow:none;
}
.band-dark .problem h3{color:#fff}
.band-dark .problem p{color:#C4D9CF}
.band-dark .problem .num{background:rgba(196,99,47,.22);color:#F0C4A6}

/* ---------- Workflow ---------- */
.flow li{border-left:3px solid var(--accent);border-top:none}
.flow li:nth-child(3),.flow li:nth-child(6){border-left-color:var(--terra)}
/* The accent is too dark to read as a rule against the dark band */
.band-dark .flow li{border-left-color:#68A87F}
.band-dark .flow li:nth-child(3),.band-dark .flow li:nth-child(6){border-left-color:#D98A56}
.flow-note{margin-top:22px;font-size:.94rem;max-width:760px}

/* ---------- Included vs possible ---------- */
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:start}
.scope{border-radius:var(--radius);padding:30px 30px 34px}
.scope-in{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow)}
.scope-more{background:transparent;border:1px dashed #D6C4AF}
.scope h3{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:1.14rem}
.scope .badge{
  font-family:var(--font-body);font-size:.68rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;border-radius:999px;padding:4px 10px;
}
.scope-in .badge{background:var(--accent-tint);color:var(--accent-deep)}
.scope-more .badge{background:var(--terra-tint);color:var(--terra-ink)}
.scope p.sub{font-size:.93rem;margin-top:10px}

/* ---------- Interactive preview band ---------- */
.try-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.try-grid h2{margin-bottom:18px}
.try-actions{display:flex;flex-wrap:wrap;gap:14px;margin:28px 0 26px}

/* ---------- Who it is for ---------- */
.for-list{display:flex;flex-wrap:wrap;gap:10px;list-style:none;margin-top:24px}
.for-list li{
  background:var(--card);border:1px solid var(--line);border-radius:999px;
  padding:9px 18px;font-size:.92rem;color:var(--ink-soft);
}

/* ---------- Build vs buy ---------- */
.vs-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.vs h3{font-size:1.08rem;margin-bottom:14px}

@media(max-width:960px){
  .problem-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:900px){
  .hero-grid,.try-grid{grid-template-columns:1fr;gap:38px}
  .hero h1{max-width:none}
  .scope-grid,.vs-grid{grid-template-columns:1fr}
}
@media(max-width:760px){
  .hero{padding:24px 0 54px}
  .problem-grid{grid-template-columns:1fr}
  .hero-ctas .btn{width:100%;justify-content:center}
  .try-actions .btn{width:100%;justify-content:center}
}