/* Industry stories. A photo-led layout, deliberately different from the trade
   pages (split hero with a UI panel): full-bleed photograph, a pain-point band,
   the real product in device frames, a photo beside a shift timeline, and the
   modules that matter for the industry. Scoped to :is(#mh-industry, .mh-industry), the same
   ID-weighted idiom marketing-product.css uses, so these rules outrank
   marketing-system.css's `:is(#muster-concept, .mh-site) a{color:inherit}` and
   no other page is affected. Tokens come from marketing-system.css. */

:is(#mh-industry, .mh-industry){background:var(--mh-paper);color:var(--mh-ink)}
:is(#mh-industry, .mh-industry) .ind-wrap{max-width:1200px;margin:0 auto;padding-inline:40px}
:is(#mh-industry, .mh-industry) .ind-kicker{font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--brand-dark);display:flex;align-items:center;gap:9px;margin-bottom:18px}
:is(#mh-industry, .mh-industry) .ind-kicker .mh-index{font-family:var(--mono);opacity:.8}
:is(#mh-industry, .mh-industry) h1,:is(#mh-industry, .mh-industry) h2,:is(#mh-industry, .mh-industry) h3{font-family:var(--head);font-weight:600;color:var(--mh-ink)}
:is(#mh-industry, .mh-industry) h2{font-size:clamp(30px,3.4vw,46px);letter-spacing:-.045em;line-height:1.08;margin:0}
:is(#mh-industry, .mh-industry) .ind-lead{font-size:16px;line-height:1.75;color:var(--mh-muted);max-width:560px;margin-top:18px}

/* ── Hero: full-bleed photograph under a left-weighted scrim ─────────────── */
:is(#mh-industry, .mh-industry) .ind-hero{position:relative;isolation:isolate;min-height:min(80vh,700px);display:flex;align-items:flex-end;background:var(--mh-dark);color:#f5f7f2;overflow:hidden}
:is(#mh-industry, .mh-industry) .ind-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:var(--focus,70% 50%);z-index:-2}
/* The scrim is what makes white text legible on any photograph. It is dark
   enough on the text side (92% ink) that legibility does not depend on what the
   picture happens to contain there; the contrast sweep cannot see text over an
   image, so this is held by design rather than by the test. */
:is(#mh-industry, .mh-industry) .ind-hero::before{content:"";position:absolute;inset:0;z-index:-1;background:
  linear-gradient(90deg,rgba(16,28,24,.94) 0%,rgba(16,28,24,.88) 34%,rgba(16,28,24,.45) 64%,rgba(16,28,24,.12) 100%),
  linear-gradient(0deg,rgba(16,28,24,.85) 0%,rgba(16,28,24,0) 42%)}
:is(#mh-industry, .mh-industry) .ind-hero-in{width:100%;max-width:1200px;margin:0 auto;padding:150px 40px 56px}
:is(#mh-industry, .mh-industry) .ind-hero .ind-kicker{color:var(--accent-lime)}
:is(#mh-industry, .mh-industry) .ind-hero h1{color:#f8faf6;font-size:clamp(40px,5vw,72px);letter-spacing:-.055em;line-height:1.03;max-width:760px;margin:0}
:is(#mh-industry, .mh-industry) .ind-hero-sub{font-size:17px;line-height:1.75;color:#c9d4cc;max-width:560px;margin-top:22px}
:is(#mh-industry, .mh-industry) .ind-hero .hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:30px}
:is(#mh-industry, .mh-industry) .ind-hero .btn-brand{background:var(--accent-lime);color:#182b1c;border-color:var(--accent-lime)}
:is(#mh-industry, .mh-industry) .ind-hero .btn-ghost{background:rgba(16,28,24,.35);color:#f4f7f1;border-color:#9fb3a5}
:is(#mh-industry, .mh-industry) .ind-proof{display:flex;flex-wrap:wrap;gap:12px 30px;margin-top:44px;padding-top:22px;border-top:1px solid #ffffff26;font-size:13px;color:#d6dfd8}
:is(#mh-industry, .mh-industry) .ind-proof span{display:inline-flex;align-items:center;gap:8px}
:is(#mh-industry, .mh-industry) .ind-proof svg{width:15px;height:15px;color:var(--accent-lime);flex-shrink:0}

/* ── Where it breaks down ───────────────────────────────────────────────── */
:is(#mh-industry, .mh-industry) .ind-pains{padding:96px 0 84px}
:is(#mh-industry, .mh-industry) .ind-pains-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin-top:48px;border-top:1px solid var(--mh-ink)}
:is(#mh-industry, .mh-industry) .ind-pain{padding:28px 32px 6px 0}
:is(#mh-industry, .mh-industry) .ind-pain + .ind-pain{padding-left:32px;border-left:1px solid var(--mh-line)}
:is(#mh-industry, .mh-industry) .ind-pain-n{font-family:var(--mono);font-size:11px;color:var(--brand-dark);letter-spacing:.1em}
:is(#mh-industry, .mh-industry) .ind-pain h3{font-size:21px;letter-spacing:-.03em;line-height:1.25;margin:14px 0 10px}
:is(#mh-industry, .mh-industry) .ind-pain p{font-size:14.5px;line-height:1.75;color:var(--mh-muted);margin:0}

/* ── The product, in frames ─────────────────────────────────────────────── */
:is(#mh-industry, .mh-industry) .ind-product{background:var(--mh-dark);color:#e8eee9;padding:100px 0 110px;overflow:hidden}
:is(#mh-industry, .mh-industry) .ind-product h2{color:#f8faf6}
:is(#mh-industry, .mh-industry) .ind-product .ind-kicker{color:var(--accent-lime)}
:is(#mh-industry, .mh-industry) .ind-product .ind-lead{color:#b4c2b8}
:is(#mh-industry, .mh-industry) .ind-product-grid{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:64px;align-items:center}
:is(#mh-industry, .mh-industry) .ind-points{list-style:none;padding:0;margin:30px 0 0;display:grid;gap:16px}
:is(#mh-industry, .mh-industry) .ind-points li{display:grid;grid-template-columns:22px 1fr;gap:12px;font-size:14.5px;line-height:1.6;color:#d3ddd5}
:is(#mh-industry, .mh-industry) .ind-points svg{width:18px;height:18px;color:var(--accent-lime);margin-top:2px}
:is(#mh-industry, .mh-industry) .ind-stage{position:relative;padding-bottom:40px}
:is(#mh-industry, .mh-industry) .ind-browser{background:#f5f6f2;border-radius:12px;overflow:hidden;box-shadow:0 40px 80px -20px #000a,0 0 0 1px #ffffff1a}
:is(#mh-industry, .mh-industry) .ind-browser-bar{height:30px;background:#e6eae3;display:flex;align-items:center;gap:7px;padding:0 13px}
:is(#mh-industry, .mh-industry) .ind-browser-bar i{width:9px;height:9px;border-radius:50%;background:#c4cdc1}
:is(#mh-industry, .mh-industry) .ind-browser img{display:block;width:100%;height:auto}
:is(#mh-industry, .mh-industry) .ind-phone{position:absolute;right:-18px;bottom:-6px;width:28%;min-width:150px;border-radius:26px;padding:7px;background:#0b120f;box-shadow:0 30px 60px -10px #000c,0 0 0 1px #ffffff26}
:is(#mh-industry, .mh-industry) .ind-phone img{display:block;width:100%;height:auto;border-radius:20px}
:is(#mh-industry, .mh-industry) .ind-caption{font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;color:#8fa295;margin-top:22px}

/* ── A shift, start to finish ───────────────────────────────────────────── */
:is(#mh-industry, .mh-industry) .ind-flow{padding:100px 0}
:is(#mh-industry, .mh-industry) .ind-flow-grid{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:72px;align-items:start}
:is(#mh-industry, .mh-industry) .ind-photo{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:4/5;background:#dfe5dc;position:sticky;top:96px}
:is(#mh-industry, .mh-industry) .ind-photo img{width:100%;height:100%;object-fit:cover;display:block}
:is(#mh-industry, .mh-industry) .ind-timeline{list-style:none;margin:40px 0 0;padding:0;position:relative}
:is(#mh-industry, .mh-industry) .ind-timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:1px;background:linear-gradient(var(--brand-dark),var(--mh-line))}
:is(#mh-industry, .mh-industry) .ind-step{position:relative;display:grid;grid-template-columns:40px 1fr;gap:20px;padding-bottom:30px}
:is(#mh-industry, .mh-industry) .ind-step:last-child{padding-bottom:0}
:is(#mh-industry, .mh-industry) .ind-node{width:40px;height:40px;border-radius:11px;background:#fff;border:1px solid var(--mh-line);display:grid;place-items:center;color:var(--brand-dark);position:relative;z-index:1;box-shadow:0 1px 2px #0b0f140d}
:is(#mh-industry, .mh-industry) .ind-node svg{width:18px;height:18px}
:is(#mh-industry, .mh-industry) .ind-step-time{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;color:var(--brand-dark);text-transform:uppercase}
:is(#mh-industry, .mh-industry) .ind-step h3{font-size:18px;letter-spacing:-.025em;margin:4px 0 6px}
:is(#mh-industry, .mh-industry) .ind-step p{font-size:14px;line-height:1.7;color:var(--mh-muted);margin:0}

/* ── Modules that matter here ───────────────────────────────────────────── */
:is(#mh-industry, .mh-industry) .ind-modules{padding:90px 0 96px;background:#ecefe8;border-block:1px solid var(--mh-line)}
:is(#mh-industry, .mh-industry) .ind-mod-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:44px}
:is(#mh-industry, .mh-industry) .ind-mod{display:flex;flex-direction:column;background:#fff;border:1px solid var(--mh-line);border-radius:12px;padding:24px;text-decoration:none;color:inherit;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,border-color .18s}
:is(#mh-industry, .mh-industry) .ind-mod:hover{transform:translateY(-3px);box-shadow:0 16px 34px #0b0f1417;border-color:#b9c9b1}
:is(#mh-industry, .mh-industry) .ind-mod-ic{width:38px;height:38px;border-radius:10px;background:#d9e3d4;color:var(--brand-dark);display:grid;place-items:center}
:is(#mh-industry, .mh-industry) .ind-mod-ic svg{width:19px;height:19px}
:is(#mh-industry, .mh-industry) .ind-mod h3{font-size:18px;letter-spacing:-.025em;margin:18px 0 8px}
:is(#mh-industry, .mh-industry) .ind-mod p{font-size:14px;line-height:1.7;color:var(--mh-muted);margin:0;flex:1}
:is(#mh-industry, .mh-industry) .ind-mod-go{margin-top:18px;font-size:13px;font-weight:600;color:var(--brand-dark);display:inline-flex;align-items:center;gap:6px}
:is(#mh-industry, .mh-industry) .ind-mod-go svg{width:14px;height:14px;transition:transform .18s}
:is(#mh-industry, .mh-industry) .ind-mod:hover .ind-mod-go svg{transform:translateX(3px)}
:is(#mh-industry, .mh-industry) .ind-also{margin-top:30px;display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px;font-size:13px;color:var(--mh-muted)}
:is(#mh-industry, .mh-industry) .ind-also a{font-weight:600;color:var(--mh-ink);text-decoration:none;border:1px solid #c8d3c4;border-radius:999px;padding:7px 14px;background:#fff}
:is(#mh-industry, .mh-industry) .ind-also a:hover{border-color:var(--brand-dark);color:var(--brand-dark)}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
:is(#mh-industry, .mh-industry) .faq-section{padding:96px 5%;background:var(--mh-paper)}
:is(#mh-industry, .mh-industry) .faq-inner{max-width:760px;margin:0 auto}
:is(#mh-industry, .mh-industry) .faq-h2{font-size:clamp(26px,2.8vw,36px);text-align:left;margin-bottom:28px}
:is(#mh-industry, .mh-industry) .faq-item{border-bottom:1px solid var(--mh-line)}
:is(#mh-industry, .mh-industry) .faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;padding:20px 0;cursor:pointer;font-size:15.5px;font-weight:600;color:var(--mh-ink);list-style:none}
:is(#mh-industry, .mh-industry) .faq-item summary::-webkit-details-marker{display:none}
:is(#mh-industry, .mh-industry) .faq-icon{font-size:20px;color:var(--brand-dark);flex-shrink:0;transition:transform .2s}
:is(#mh-industry, .mh-industry) .faq-item[open] .faq-icon{transform:rotate(45deg)}
:is(#mh-industry, .mh-industry) .faq-answer{font-size:14.5px;line-height:1.8;color:var(--mh-muted);padding-bottom:20px}

/* ── Closing band ───────────────────────────────────────────────────────── */
:is(#mh-industry, .mh-industry) .ind-cta{background:var(--mh-dark);color:#e8eee9;padding:92px 0;text-align:left}
:is(#mh-industry, .mh-industry) .ind-cta-in{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
:is(#mh-industry, .mh-industry) .ind-cta h2{color:#f8faf6;max-width:620px}
:is(#mh-industry, .mh-industry) .ind-cta p{color:#b4c2b8;font-size:15px;margin-top:14px}
:is(#mh-industry, .mh-industry) .ind-cta .hero-cta{display:flex;gap:12px;flex-wrap:wrap}
:is(#mh-industry, .mh-industry) .ind-cta .btn-brand{background:var(--accent-lime);color:#182b1c;border-color:var(--accent-lime)}
:is(#mh-industry, .mh-industry) .ind-cta .btn-ghost{background:transparent;color:#f4f7f1;border-color:#778d7d}

/* ── Hub: industry cards ────────────────────────────────────────────────── */
:is(#mh-industry, .mh-industry) .hub-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px;margin-top:48px}
:is(#mh-industry, .mh-industry) .hub-card{grid-column:span 2;position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:340px;border-radius:14px;overflow:hidden;text-decoration:none;color:#f8faf6;background:var(--mh-dark);isolation:isolate}
:is(#mh-industry, .mh-industry) .hub-card:nth-child(-n+2){grid-column:span 3;min-height:400px}
:is(#mh-industry, .mh-industry) .hub-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .5s cubic-bezier(.2,.7,.3,1)}
:is(#mh-industry, .mh-industry) .hub-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(0deg,rgba(16,28,24,.95) 0%,rgba(16,28,24,.7) 38%,rgba(16,28,24,.1) 75%)}
:is(#mh-industry, .mh-industry) .hub-card:hover img{transform:scale(1.04)}
:is(#mh-industry, .mh-industry) .hub-card-body{padding:26px}
:is(#mh-industry, .mh-industry) .hub-card h3{color:#f8faf6;font-size:24px;letter-spacing:-.035em;margin:0 0 8px}
:is(#mh-industry, .mh-industry) .hub-card p{font-size:14px;line-height:1.6;color:#cdd8cf;margin:0;max-width:440px}
:is(#mh-industry, .mh-industry) .hub-card .ind-mod-go{color:var(--accent-lime);margin-top:14px}
:is(#mh-industry, .mh-industry) .hub-diagram{margin-top:54px;background:#fff;border:1px solid var(--mh-line);border-radius:14px;padding:34px 30px}
:is(#mh-industry, .mh-industry) .hub-diagram svg{display:block;width:100%;height:auto}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width:980px){
  :is(#mh-industry, .mh-industry) .ind-product-grid,:is(#mh-industry, .mh-industry) .ind-flow-grid{grid-template-columns:1fr;gap:48px}
  :is(#mh-industry, .mh-industry) .ind-photo{position:relative;top:auto;aspect-ratio:16/11}
  :is(#mh-industry, .mh-industry) .ind-mod-grid{grid-template-columns:1fr 1fr}
  :is(#mh-industry, .mh-industry) .hub-card,:is(#mh-industry, .mh-industry) .hub-card:nth-child(-n+2){grid-column:span 3;min-height:320px}
}
@media (max-width:720px){
  :is(#mh-industry, .mh-industry) .ind-wrap,:is(#mh-industry, .mh-industry) .ind-hero-in{padding-inline:20px}
  :is(#mh-industry, .mh-industry) .ind-hero{min-height:620px}
  :is(#mh-industry, .mh-industry) .ind-hero-in{padding-top:120px;padding-bottom:40px}
  :is(#mh-industry, .mh-industry) .ind-hero::before{background:linear-gradient(0deg,rgba(16,28,24,.96) 0%,rgba(16,28,24,.9) 55%,rgba(16,28,24,.55) 100%)}
  :is(#mh-industry, .mh-industry) .ind-hero-sub{font-size:15.5px}
  :is(#mh-industry, .mh-industry) .ind-pains,:is(#mh-industry, .mh-industry) .ind-flow{padding:68px 0}
  :is(#mh-industry, .mh-industry) .ind-product,:is(#mh-industry, .mh-industry) .ind-modules{padding:68px 0}
  :is(#mh-industry, .mh-industry) .ind-pains-grid{grid-template-columns:1fr}
  :is(#mh-industry, .mh-industry) .ind-pain,:is(#mh-industry, .mh-industry) .ind-pain + .ind-pain{padding:24px 0 20px;border-left:0;border-bottom:1px solid var(--mh-line)}
  :is(#mh-industry, .mh-industry) .ind-mod-grid{grid-template-columns:1fr}
  :is(#mh-industry, .mh-industry) .ind-phone{right:-4px;bottom:-14px;width:31%;min-width:0;border-radius:18px;padding:5px}
  :is(#mh-industry, .mh-industry) .ind-phone img{border-radius:14px}
  :is(#mh-industry, .mh-industry) .ind-stage .ind-caption{max-width:62%}
  :is(#mh-industry, .mh-industry) .ind-cta{padding:68px 0}
  :is(#mh-industry, .mh-industry) .hub-card,:is(#mh-industry, .mh-industry) .hub-card:nth-child(-n+2){grid-column:span 6;min-height:300px}
  :is(#mh-industry, .mh-industry) .hub-diagram{padding:22px 16px}
}
@media (prefers-reduced-motion:reduce){
  :is(#mh-industry, .mh-industry) .ind-mod,:is(#mh-industry, .mh-industry) .hub-card img,:is(#mh-industry, .mh-industry) .ind-mod-go svg{transition:none}
}