/* Shared product-page components — auto-extracted from duplicated inline
   <style> blocks across templates/platform/*.html (aps, batch, ebr, oee,
   production, quality). Edit here once instead of in every page. */

.mod-hero{
      display: grid;
      min-height: 86vh;
      grid-template-columns: 1fr;
      position: relative;
      overflow: hidden;
      background: var(--ink);
      color: #fff;
      align-items: center;
      padding: 5rem max(5%, calc((100% - 1280px)/2));
    }

.mod-hero-copy{ position: relative; z-index: 2; max-width: 660px; }

.mod-hero .eyebrow{ color: var(--purple-light); opacity: 1; }

.mod-hero h1{
      font-size: clamp(2.3rem, 5vw, 3.6rem);
      color: #fff; line-height: 1.12;
      margin-bottom: 1.2rem;
    }

.mod-hero h1 em{ font-style: normal; color: var(--purple-light); }

.mod-hero .hero-lead{ color: rgba(255,255,255,.78); font-size: 1.06rem; line-height: 1.65; max-width: 580px; margin-bottom: 1.8rem; }

.hero-stats{
      display: flex; gap: 2rem; margin-bottom: 2rem; flex-wrap: wrap;
    }

.hero-stat strong{ display: block; font-size: 2rem; font-weight: 800; color: #fff; }

.hero-stat span{ font-size: .78rem; color: rgba(255,255,255,.55); text-transform: uppercase; letter-spacing: .06em; }

.hero-badges{ display: flex; gap: .5rem; flex-wrap: wrap; margin-bottom: 1.6rem; }

.hero-badge{
      font-size: .72rem; font-weight: 600;
      font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
      padding: .25rem .6rem; border-radius: 4px;
      border: 1px solid rgba(255,255,255,.18);
      color: rgba(255,255,255,.8);
      letter-spacing: .03em;
    }

.hero-badge.purple{ border-color: rgba(167,139,250,.45); color: var(--purple-light); background: rgba(124,58,237,.15); }

.section-light{ background: var(--paper); }

.section-soft{ background: var(--soft); }

.section-dark{ background: var(--ink); color: #fff; }

.section-dark .eyebrow{ color: var(--purple-light); }

.section-dark > .section-copy h1,
.section-dark > .section-copy h2,
.section-dark > .section-copy h3,
.section-dark > .section-copy h4,
.ba-section > .section-copy h1,
.ba-section > .section-copy h2,
.ba-section > .section-copy h3,
.ba-section > .section-copy h4{
  color: #fff;
}

.section-dark p{ color: rgba(255,255,255,.7); }

.benefits-grid{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1.5rem;
      margin-top: 2rem;
    }

.benefit-card{
      background: var(--paper);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      padding: 1.8rem 1.6rem;
      position: relative;
    }

.benefit-badge{
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      color: var(--purple); background: rgba(124,58,237,.08); padding: .25rem .6rem; border-radius: 4px;
      margin-bottom: 1rem;
    }

.benefit-card h3{ font-size: 1.05rem; font-weight: 700; margin-bottom: .5rem; line-height: 1.3; }

.benefit-card p{ font-size: .84rem; color: var(--muted); line-height: 1.6; margin: 0; }

.ba-section{
      background: #0f1015;
      color: #fff;
      padding: 5.5rem max(5%, calc((100% - 1280px)/2));
      position: relative;
      overflow: hidden;
    }

.ba-section::before{
      content: '';
      position: absolute;
      top: 0; left: 50%; transform: translateX(-50%);
      width: 800px; height: 350px;
      background: radial-gradient(circle, rgba(124,58,237,.15) 0%, rgba(124,58,237,0) 70%);
      pointer-events: none;
    }

.ba-container{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 2rem;
      position: relative;
      z-index: 1;
      margin-top: 3rem;
    }

.ba-card{
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 40px rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.08);
      position: relative;
    }

.ba-card--before{
      background: linear-gradient(180deg, rgba(26,27,35,.9) 0%, rgba(18,19,26,.95) 100%);
      border-color: rgba(239,68,68,.25);
    }

.ba-card--after{
      background: linear-gradient(180deg, rgba(28,24,45,.92) 0%, rgba(18,17,30,.98) 100%);
      border-color: rgba(167,139,250,.45);
      box-shadow: 0 20px 50px rgba(124,58,237,.18);
    }

.ba-card-head{
      padding: 1.8rem 2rem 1.4rem;
      border-bottom: 1px solid rgba(255,255,255,.07);
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

.ba-status-badge{
      font-size: .68rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .08em;
      padding: .3rem .75rem;
      border-radius: 20px;
      display: inline-flex;
      align-items: center;
      gap: .4rem;
    }

.ba-status-badge.red{
      background: rgba(239,68,68,.15);
      color: #fca5a5;
      border: 1px solid rgba(239,68,68,.3);
    }

.ba-status-badge.green{
      background: rgba(124,58,237,.2);
      color: #c4b5fd;
      border: 1px solid rgba(167,139,250,.4);
    }

.ba-card-head h3{
      font-size: 1.25rem;
      font-weight: 700;
      color: #fff;
      margin: 0;
    }

.ba-card-body{
      padding: 2rem;
      display: flex;
      flex-direction: column;
      gap: 1.3rem;
      flex: 1;
    }

.ba-row{
      display: grid;
      grid-template-columns: auto 1fr;
      gap: 1.1rem;
      align-items: flex-start;
      padding-bottom: 1.1rem;
      border-bottom: 1px solid rgba(255,255,255,.05);
    }

.ba-row:last-child{
      border-bottom: none;
      padding-bottom: 0;
    }

.ba-indicator{
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: .8rem;
      font-weight: 800;
      flex-shrink: 0;
      margin-top: .1rem;
    }

.ba-card--before .ba-indicator{
      background: rgba(239,68,68,.12);
      color: #f87171;
      border: 1px solid rgba(239,68,68,.25);
    }

.ba-card--after .ba-indicator{
      background: rgba(16,185,129,.15);
      color: #34d399;
      border: 1px solid rgba(16,185,129,.35);
    }

.ba-content h4{
      font-size: .92rem;
      font-weight: 700;
      color: #f3f4f6;
      margin-bottom: .25rem;
    }

.ba-card--before .ba-content h4{
      color: #e5e7eb;
    }

.ba-card--after .ba-content h4{
      color: #fff;
    }

.ba-content p{
      font-size: .8rem;
      color: rgba(255,255,255,.55);
      line-height: 1.5;
      margin: 0;
    }

.ba-card--after .ba-content p{
      color: rgba(255,255,255,.7);
    }

.ba-card-foot{
      padding: 1.2rem 2rem;
      background: rgba(0,0,0,.25);
      border-top: 1px solid rgba(255,255,255,.06);
      font-size: .78rem;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

.ba-card--before .ba-card-foot{
      color: #f87171;
    }

.ba-card--after .ba-card-foot{
      color: #a78bfa;
      font-weight: 600;
    }

.features-deep{
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 1px;
      background: var(--line);
      border: 1px solid var(--line);
      border-radius: var(--radius);
      overflow: hidden;
    }

.feat-deep{
      background: var(--paper);
      padding: 1.8rem 1.6rem;
      transition: background .15s;
    }

.feat-deep:hover{ background: var(--soft); }

.feat-deep-icon{
      width: 42px; height: 42px;
      background: rgba(124,58,237,.09); border-radius: 10px;
      display: flex; align-items: center; justify-content: center;
      color: var(--purple); margin-bottom: 1rem;
    }

.feat-deep-icon svg{ width: 20px; height: 20px; }

.feat-deep h3{ font-size: .92rem; font-weight: 700; margin-bottom: .5rem; }

.feat-deep p{ font-size: .8rem; color: var(--muted); line-height: 1.6; margin: 0; }

.feat-deep ul{ margin: .6rem 0 0; padding: 0; list-style: none; font-size: .78rem; color: var(--muted); }

.feat-deep ul li{ padding: .2rem 0; }

.feat-deep ul li::before{ content: '→ '; color: var(--purple); }

.scope-matrix{
      display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 2rem;
    }

.scope-box{
      border: 1px solid var(--line); border-radius: var(--radius);
      background: var(--paper); padding: 2rem;
    }

.scope-box-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.2rem; }

.scope-box-tag{
      font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
      padding: .2rem .55rem; border-radius: 4px;
    }

.scope-box-tag.opt{ background: rgba(59,130,246,.1); color: #2563eb; }

.scope-box-tag.sep{ background: rgba(100,116,139,.12); color: #475569; }

.scope-box h3{ font-size: 1.15rem; font-weight: 700; margin-bottom: .5rem; }

.scope-box p.desc{ font-size: .83rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.5rem; }

.scope-list{ list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: .9rem; }

.scope-item{ display: flex; gap: .8rem; align-items: flex-start; }

.scope-icon{
      width: 28px; height: 28px; border-radius: 8px;
      flex-shrink: 0; display: flex; align-items: center; justify-content: center;
      font-size: .75rem; font-weight: 700;
      margin-top: .15rem;
    }

.scope-icon svg{
      width: 14px; height: 14px; stroke-width: 2.2;
    }

.scope-icon.blue{
      background: rgba(59,130,246,.12);
      color: #2563eb;
      border: 1px solid rgba(59,130,246,.25);
    }

.scope-icon.slate{
      background: rgba(239,68,68,.1);
      color: #ef4444;
      border: 1px solid rgba(239,68,68,.22);
    }

.scope-icon.slate svg{
      color: #dc2626;
    }

.scope-item-text h4{ font-size: .88rem; font-weight: 700; margin-bottom: .25rem; }

.scope-item-text p{ font-size: .8rem; color: var(--muted); margin: 0; line-height: 1.5; }

.related-grid{
      display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2rem;
    }

.related-card{
      border: 1px solid var(--line); border-radius: var(--radius);
      background: var(--paper); padding: 1.8rem; display: flex; flex-direction: column;
      justify-content: space-between; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
      text-decoration: none; color: inherit;
    }

.related-card:hover{
      transform: translateY(-3px);
      box-shadow: 0 10px 24px rgba(0,0,0,.06);
      border-color: rgba(124, 58, 237, 0.35);
    }

.related-card h4{ font-size: .95rem; font-weight: 700; margin-bottom: .4rem; color: var(--ink); }

.related-card p{ font-size: .8rem; color: var(--muted); line-height: 1.6; margin-bottom: 1.2rem; flex-grow: 1; }

.related-link{ font-size: .8rem; font-weight: 600; color: var(--purple); text-decoration: none; display: inline-flex; align-items: center; gap: .3rem; transition: gap .15s ease; }

.related-card:hover .related-link{ gap: .5rem; text-decoration: underline; }

.proof-block{
      background: var(--ink); color: #fff;
      border-radius: var(--radius); padding: 2.5rem 2.8rem;
    }

.proof-quote{ font-size: 1.15rem; line-height: 1.65; color: rgba(255,255,255,.85); margin-bottom: 1.5rem; font-style: italic; }

.proof-meta{ display: flex; align-items: center; gap: 1rem; }

.proof-meta-info strong{ display: block; font-size: .87rem; color: #fff; }

.proof-meta-info span{ font-size: .78rem; color: rgba(255,255,255,.45); }

.proof-kpis{ display: flex; gap: 2.5rem; margin-top: 1.8rem; padding-top: 1.8rem; border-top: 1px solid rgba(255,255,255,.08); flex-wrap: wrap; }

.proof-kpi strong{ display: block; font-size: 2rem; font-weight: 800; color: #a78bfa; }

.proof-kpi span{ font-size: .75rem; color: rgba(255,255,255,.45); text-transform: uppercase; letter-spacing: .06em; }

.ba-card{
      border-radius: 16px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      box-shadow: 0 20px 40px rgba(0,0,0,.35);
      border: 1px solid rgba(255,255,255,.08);
    }

/* Shared only by oee.html and quality.html */

.mod-hero-copy{ position: relative; z-index: 2; max-width: 680px; }

.mod-hero .hero-lead{ color: rgba(255,255,255,.78); font-size: 1.06rem; line-height: 1.65; max-width: 600px; margin-bottom: 1.8rem; }