/* ============================================================
   MHDev — /demos/manufacturing-management-system/ only
   Shared layout lives in ../base.css
   Accent: industrial steel, to sit apart from the trades example
   ============================================================ */

:root{
  --accent:#35566B;
  --accent-deep:#26404F;
  --accent-tint:#E6EDF2;
}

/* ---------- 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:12ch}
.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}

.eyebrow{color:var(--accent)}
.chip{background:var(--accent-tint);color:var(--accent-deep)}
.list-check li::before{border-color:var(--accent)}

/* ---------- Problem list ---------- */
.problems{display:grid;grid-template-columns:1fr 1fr;gap:14px 40px;list-style:none;margin-top:8px}
.problems li{
  position:relative;padding-left:34px;font-size:.98rem;color:var(--ink-soft);
  padding-bottom:14px;border-bottom:1px solid var(--line);
}
.problems li::before{
  content:"";position:absolute;left:0;top:.28em;width:18px;height:18px;border-radius:5px;
  background:var(--terra-tint);border:1px solid #EBCDB8;
}
.problems li::after{
  content:"";position:absolute;left:5px;top:.62em;width:8px;height:8px;
  border-left:2px solid var(--terra);border-bottom:2px solid var(--terra);
  transform:rotate(-45deg) translate(1px,-1px);
}
.problems li strong{color:var(--ink);font-weight:600}

/* The problem list sits on the dark band */
.band-dark .problems li{color:#C4D9CF;border-bottom-color:rgba(255,255,255,.13)}
.band-dark .problems li strong{color:#fff}
.band-dark .problems li::before{background:rgba(196,99,47,.22);border-color:rgba(196,99,47,.55)}
.band-dark .problems li::after{border-color:#E8A87C}

/* ---------- Workflow ---------- */
.flow li{border-top:3px solid var(--accent)}
.flow li:nth-child(5),.flow li:nth-child(7){border-top-color:var(--terra)}
/* The accent is too dark to read as a rule against the dark band */
.band-dark .flow li{border-top-color:#7196AF}
.band-dark .flow li:nth-child(5),.band-dark .flow li:nth-child(7){border-top-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;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:900px){
  .hero-grid,.try-grid{grid-template-columns:1fr;gap:38px}
  .hero h1{max-width:none}
  .scope-grid,.vs-grid{grid-template-columns:1fr}
  .problems{grid-template-columns:1fr;gap:0}
}
@media(max-width:760px){
  .hero{padding:24px 0 54px}
  .hero-ctas .btn{width:100%;justify-content:center}
  .try-actions .btn{width:100%;justify-content:center}
}