/* Muyinza Media · industry landing pages. Layers on /assets/free-website/fw.css.
   Refero references: Aboard (heading rail + flush numbered matrix, ruled index list, coral close),
   Harvey (institutional ruled lists for "what's included"), Typewolf (framed specimens, labeled samples). */

/* Why a website: heading rail beside a shared-edge numbered matrix */
.why{padding:clamp(48px,7vw,104px) 0;border-top:1px solid var(--rule)}
.why-grid{display:grid;gap:28px}
.why .rail h2{max-width:14ch}
.matrix{display:grid;border-top:1px solid var(--ink)}
.matrix article{padding:24px 0 28px;border-bottom:1px solid var(--rule)}
.matrix .n{display:block;font:400 20px/1 var(--serif);color:var(--ink-2);margin-bottom:22px}
.matrix h3{margin-bottom:10px;max-width:22ch}
.matrix p{color:var(--ink-2);margin:0;max-width:46ch}
@media (min-width:760px){
  .matrix{grid-template-columns:1fr 1fr;border-left:1px solid var(--rule)}
  .matrix article{padding:28px 28px 32px;border-right:1px solid var(--rule)}
}
@media (min-width:1080px){
  .why-grid{grid-template-columns:4fr 8fr;gap:48px;align-items:start}
  .why .rail{position:sticky;top:96px}
}

/* What's included: ruled two-column index */
.included{padding:clamp(48px,7vw,96px) 0;background:var(--paper-2);border-block:1px solid var(--rule)}
.included h2{max-width:20ch}
.inc-list{list-style:none;margin:32px 0 0;padding:0;display:grid;border-top:1px solid var(--ink)}
.inc-list li{display:grid;gap:6px;padding:18px 0 20px;border-bottom:1px solid var(--rule)}
.inc-list strong{font:400 26px/1.1 var(--serif)}
.inc-list span{color:var(--ink-2);max-width:52ch}
@media (min-width:800px){.inc-list{grid-template-columns:1fr 1fr;column-gap:48px}}

/* Samples: the strip comes from fw.css; keep the top spacing for a section of its own */
.samples{padding-top:clamp(48px,7vw,96px)}

/* Other industries index (internal links) */
.ind-index{padding:clamp(40px,6vw,72px) 0;border-top:1px solid var(--rule)}
.ind-index ul{list-style:none;margin:8px 0 20px;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:0 24px}
.ind-index li a{display:flex;align-items:center;min-height:44px;border-bottom:1px solid var(--rule);text-decoration:none;font-size:16px}
.ind-index li a:hover{text-decoration:underline;text-underline-offset:4px}