/* industry-manufacturing.css — LiquidPixels Manufacturing vertical */
/* Every font-family: var(--f-serif) carries explicit font-weight: 400  */

/* ═══════════════════════════════════════════════════
   REVEAL ANIMATIONS
═══════════════════════════════════════════════════ */
.rv { opacity: 0; transform: translateY(16px); transition: opacity .5s, transform .5s; }
.rv.v { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .1s; }
.rv.d2 { transition-delay: .2s; }
.rv.d3 { transition-delay: .3s; }

/* ═══════════════════════════════════════════════════
   SHARED ELEMENTS
═══════════════════════════════════════════════════ */
.section-tag {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amber);
  display: block;
  margin-bottom: 12px;
}

.section-header { margin-bottom: 56px; }
.section-header h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  color: var(--ink-900);
  margin-bottom: 14px;
  max-width: 640px;
}
.section-header p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-600);
  max-width: 480px;
}
.section-header--dark h2 { color: #f5f4f0; }
.section-header--dark p  { color: rgba(245,244,240,.65); }
.section-header--dark .section-tag { color: var(--amber); }

/* Buttons — page has no inline CTAs.
   btn-white for the closing CTA is handled by shared
   component closing-section.css (scoped to .closing-section .btn-white) */

/* Tags */
.mfg-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-500);
  background: var(--warm-100);
  border-radius: var(--r-sm);
  padding: 3px 8px;
}
.mfg-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; }

/* Shared diagram image — fills its container */
.mfg-diagram-img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--r-xl);
  border: 1px solid var(--warm-200);
  box-shadow: var(--shadow-md);
}

/* ═══════════════════════════════════════════════════
   PAGE HERO — Tier 1: typographic only
═══════════════════════════════════════════════════ */
/* ═══════════════════════════════════════════════════
   DEMO SECTION — browser chrome below the rail
═══════════════════════════════════════════════════ */
.mfg-demo-section {
  background: var(--white);
  padding: 64px 0;
}

.demo-browser {
  border-radius: var(--r-xl);
  overflow: hidden;
  border: 1px solid var(--warm-200);
  box-shadow: var(--shadow-lg);
  background: var(--white);
  max-width: 960px;
  margin: 0 auto;
}

.demo-browser .browser-chrome {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  background: var(--warm-50);
  border-bottom: 1px solid var(--warm-200);
}

.demo-browser .chrome-dots { display: flex; gap: 5px; }
.demo-browser .chrome-dots i { width: 9px; height: 9px; border-radius: 50%; display: block; }
.demo-browser .chrome-dots i:nth-child(1) { background: #f97275; }
.demo-browser .chrome-dots i:nth-child(2) { background: #fbbf24; }
.demo-browser .chrome-dots i:nth-child(3) { background: #34d399; }

.demo-browser .chrome-url {
  flex: 1;
  background: var(--white);
  border: 1px solid var(--warm-200);
  border-radius: 5px;
  padding: 4px 11px;
  font-family: var(--f-mono);
  font-size: 10px;
  color: var(--ink-400);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.demo-browser .chrome-tag {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  padding: 2px 7px;
  border-radius: 3px;
  background: var(--green-soft);
  color: var(--green);
  border: 1px solid rgba(21,128,61,.15);
  letter-spacing: .06em;
}

.demo-viewport {
  aspect-ratio: 16 / 9;
  position: relative;
  overflow: hidden;
  background: linear-gradient(155deg, var(--warm-50) 0%, var(--warm-100) 100%);
}

.demo-viewport iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* ═══════════════════════════════════════════════════
   CAPABILITY RAIL
═══════════════════════════════════════════════════ */
.mfg-rail {
  background: var(--navy);
  padding: 22px 0;
  overflow: hidden;--amber:#f59e0b;}

.mfg-rail-items {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}

.mfg-rail-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--r-md);
  color: rgba(250,250,248,.65);
  font-size: 12px;
  font-weight: 400;
  white-space: nowrap;
  transition: color .2s, background .2s;
  min-height: 44px;
}

.mfg-rail-item:hover {
  color: #fafaf8;
  background: rgba(255,255,255,.06);
}

.mfg-rail-item img {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  opacity: .6;
  filter: invert(1);
}

.mfg-rail-item:hover img { opacity: 1; }

/* ═══════════════════════════════════════════════════
   STATEMENT SECTION
═══════════════════════════════════════════════════ */
.mfg-statement {
  padding: 104px 0;
  background: var(--warm-100);
}

.mfg-statement-inner { max-width: 860px; }

.stmt-overline {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amber);
  display: block;
  margin-bottom: 20px;
}

.sh-light {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(20px, 2.6vw, 38px);
  line-height: 1.2;
  color: var(--ink-500);
  margin-bottom: 8px;
}

.sh-bold {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 4vw, 52px);
  line-height: 1.1;
  color: var(--ink-900);
  margin-bottom: 28px;
}

.stmt-spine {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-600);
  max-width: 680px;
}

/* ═══════════════════════════════════════════════════
   SECTION WRAPPER
═══════════════════════════════════════════════════ */
.mfg-section        { padding: 104px 0; }
/* Visual Production leads with an eyebrow + panel (no section heading), so trim the top */
#visual-production  { padding-top: 64px; }
.mfg-section--warm  { background: var(--warm-100); }
.mfg-section--white { background: var(--white); }
.mfg-section--navy  { background: var(--navy);--amber:#f59e0b;}

/* ═══════════════════════════════════════════════════
   FEATURE GRID (DATA INTEGRATION)
═══════════════════════════════════════════════════ */
.mfg-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.mfg-feature-card {
  background: var(--white);
  border: 1px solid var(--warm-200);
  border-radius: var(--r-lg);
  padding: 32px;
}

.mfg-feature-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--r-md);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.mfg-feature-icon img { width: 22px; height: 22px; }

.mfg-feature-icon--blue   { background: var(--blue-soft);   color: var(--blue);   }
.mfg-feature-icon--teal   { background: var(--teal-soft);   color: var(--teal);   }
.mfg-feature-icon--amber  { background: var(--amber-soft);  color: var(--amber);  }
.mfg-feature-icon--violet { background: var(--violet-soft); color: var(--violet); }

.mfg-feature-icon--blue   img { filter: invert(28%) sepia(96%) saturate(1231%) hue-rotate(212deg) brightness(97%); }
.mfg-feature-icon--teal   img { filter: invert(34%) sepia(77%) saturate(530%) hue-rotate(162deg) brightness(90%); }
.mfg-feature-icon--amber  img { filter: invert(36%) sepia(79%) saturate(650%) hue-rotate(11deg) brightness(90%); }
.mfg-feature-icon--violet img { filter: invert(20%) sepia(80%) saturate(1200%) hue-rotate(260deg) brightness(90%); }

.mfg-feature-card h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink-900);
  margin-bottom: 8px;
}

.mfg-feature-lead {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-700);
  margin-bottom: 10px;
}

.mfg-feature-card p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-600);
}

/* ═══════════════════════════════════════════════════
   PANEL COLUMNS (VISUAL PRODUCTION)
═══════════════════════════════════════════════════ */
.mfg-panel-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.mfg-panel-text h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 32px);
  line-height: 1.1;
  color: var(--ink-900);
  margin-bottom: 16px;
}

.mfg-panel-text p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-600);
  margin-bottom: 14px;
}

.mfg-panel-visual { width: 100%; }

/* ═══════════════════════════════════════════════════
   AI GRID
═══════════════════════════════════════════════════ */
.mfg-ai-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mfg-ai-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--r-lg);
  padding: 32px;
}

.mfg-ai-num {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  letter-spacing: .08em;
  color: var(--amber);
  display: block;
  margin-bottom: 14px;
}

.mfg-ai-card h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: #f5f4f0;
  margin-bottom: 12px;
}

.mfg-ai-card p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(245,244,240,.65);
}

/* ═══════════════════════════════════════════════════
   ORNAMENTS
═══════════════════════════════════════════════════ */
.mfg-ornaments-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
}

.mfg-ornaments-text h2 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(28px, 3.2vw, 42px);
  line-height: 1.1;
  color: var(--ink-900);
  margin-bottom: 20px;
}

.mfg-ornaments-text p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-600);
  margin-bottom: 14px;
  max-width: 460px;
}

.mfg-ornaments-visual { width: 100%; }

/* ═══════════════════════════════════════════════════
   B2B BUYER EXPERIENCE SECTION
═══════════════════════════════════════════════════ */
.mfg-b2c-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
  margin-bottom: 48px;
}

.mfg-b2c-text p {
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--ink-600);
  margin-bottom: 18px;
}

.mfg-b2c-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.mfg-b2c-card {
  background: var(--warm-50);
  border: 1px solid var(--warm-200);
  border-radius: var(--r-lg);
  padding: 20px 20px 18px;
}

.mfg-b2c-card-num {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: clamp(32px, 3.5vw, 44px);
  line-height: 1;
  color: var(--ink-900);
  display: block;
  margin-bottom: 8px;
}

.mfg-b2c-card p {
  font-size: 12px;
  font-weight: 300;
  line-height: 1.55;
  color: var(--ink-500);
  margin: 0;
}

/* Channel strip */
.mfg-channel-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  background: var(--warm-50);
  border: 1px solid var(--warm-200);
  border-radius: var(--r-lg);
  padding: 24px 32px;
  gap: 0;
}

.mfg-channel-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 0 20px;
}

.mfg-channel-item:first-child { padding-left: 0; }
.mfg-channel-item:last-child  { padding-right: 0; }

.mfg-channel-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-900);
  line-height: 1.2;
}

.mfg-channel-sub {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--ink-400);
}

.mfg-channel-divider {
  width: 1px;
  height: 36px;
  background: var(--warm-200);
  flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════
   DEPLOYMENT GRID
═══════════════════════════════════════════════════ */
.mfg-deploy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.mfg-deploy-card {
  background: var(--warm-50);
  border: 1px solid var(--warm-200);
  border-radius: var(--r-lg);
  padding: 32px;
}

.mfg-deploy-tag {
  font-family: var(--f-mono);
  font-size: 9px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--amber);
  display: block;
  margin-bottom: 12px;
}

.mfg-deploy-card h3 {
  font-family: var(--f-serif);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.2;
  color: var(--ink-900);
  margin-bottom: 10px;
}

.mfg-deploy-card p {
  font-size: 14px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--ink-600);
}

/* ═══════════════════════════════════════════════════
   CTA SECTION — navy, centered
   Moved to shared component: closing-section.css
   (btn-white styles scoped to .closing-section .btn-white
   in the shared stylesheet)
═══════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════
   CALCULATOR IFRAME EMBED
═══════════════════════════════════════════════════ */
.calc-embed {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--warm-200);
  box-shadow: var(--shadow-md);
  /* Height will be set by JS resize listener */
  height: 640px;
  transition: height .2s ease;
}

.calc-embed iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

@media (max-width: 700px) {
  .calc-embed { height: 900px; }
}
@media (max-width: 480px) {
  .calc-embed { height: 1100px; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — TABLET (≤1024px)
═══════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .mfg-feature-grid  { grid-template-columns: 1fr 1fr; gap: 16px; }
  .mfg-b2c-cols      { grid-template-columns: 1fr; gap: 40px; }
  .mfg-channel-strip { grid-template-columns: 1fr 1fr; gap: 16px; padding: 20px 24px; }
  .mfg-panel-cols    { grid-template-columns: 1fr; gap: 40px; }
  .mfg-ai-grid       { grid-template-columns: 1fr 1fr; gap: 16px; }
  .mfg-ornaments-cols { grid-template-columns: 1fr; gap: 40px; }
  .mfg-deploy-grid   { grid-template-columns: 1fr 1fr; }
  .mfg-section    { padding: 80px 0; }
  .mfg-statement  { padding: 80px 0; }
  .wrap { padding: 0 32px; }
}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — MOBILE (≤768px)
═══════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .mfg-feature-grid  { grid-template-columns: 1fr; }
  .mfg-b2c-cards     { grid-template-columns: 1fr 1fr; }
  .mfg-channel-strip { grid-template-columns: 1fr; gap: 12px; }
  .mfg-channel-divider { width: 100%; height: 1px; }
  .mfg-ai-grid       { grid-template-columns: 1fr; }
  .mfg-deploy-grid   { grid-template-columns: 1fr; }
  .mfg-section    { padding: 64px 0; }
  .mfg-statement  { padding: 64px 0; }
  .wrap { padding: 0 20px; }

  .section-header     { margin-bottom: 36px; }
  .section-header h2  { max-width: 100%; }

}

/* ═══════════════════════════════════════════════════
   RESPONSIVE — SMALL MOBILE (≤480px)
═══════════════════════════════════════════════════ */
@media (max-width: 480px) {
  .wrap { padding: 0 16px; }
  .mfg-section   { padding: 52px 0; }
  .mfg-statement { padding: 52px 0; }
  .mfg-feature-card,
  .mfg-deploy-card,
  .mfg-ai-card   { padding: 24px; }

  /* On very small screens, hide the text label and show icon only */
  .mfg-rail-item span  { display: none; }
  .mfg-rail-item       { padding: 10px 12px; }
  .mfg-rail-item img   { opacity: .75; }
}