/* Homepage v2 — scoped UX rework. No site-wide rules.

   Typography: production home / homepage.css computed px (1440), not ad-hoc rem. */



#magtek-home {

  --hp-ink: #263c50;

  --hp-ink-muted: #4a5568;

  --hp-surface: #ffffff;

  --hp-surface-alt: #f4f6f8;

  --hp-red: #d21242;

  --hp-max: 1170px;

  /* Match .container / mt-home-section rhythm on legacy MagTek.com */

  --hp-pad-x: 15px;

  --hp-pad-y: 60px;

  --hp-font-h2: clamp(28px, 3.2vw, 45px);

  --hp-font-h3: 25px;

  --hp-font-lead: 20px;

  --hp-font-body: 18px;

  --hp-font-body-sm: 15px;

  --hp-font-eyebrow: 12px;

  --hp-font-proof-h: 18px;

  --hp-font-proof-body: 14px;

  color: var(--hp-ink);

}



#magtek-home .hp-container {

  width: 100%;

  max-width: var(--hp-max);

  margin: 0 auto;

  padding-left: var(--hp-pad-x);

  padding-right: var(--hp-pad-x);

}



#magtek-home .hp-section {

  padding-top: var(--hp-pad-y);

  padding-bottom: var(--hp-pad-y);

}



#magtek-home .hp-section--tight {

  padding-top: 48px;

  padding-bottom: 48px;

}



#magtek-home .hp-section--white {

  background: var(--hp-surface);

}



#magtek-home .hp-section--alt {

  background: var(--hp-surface-alt);

}



#magtek-home .hp-section--dark {

  background: var(--hp-ink);

  color: #f8fafc;

  border-top: 1px solid rgb(15 23 42 / 0.35);

}



#magtek-home .hp-eyebrow {

  margin: 0 0 12px;

  font-size: var(--hp-font-eyebrow);

  font-weight: 700;

  letter-spacing: 0.08em;

  text-transform: uppercase;

  color: var(--hp-red);

}



#magtek-home .hp-section--dark .hp-eyebrow {

  color: #fda4af;

}



#magtek-home .hp-title {

  margin: 0 0 16px;

  padding-bottom: 0;

  font-size: var(--hp-font-h2);

  font-weight: 700;

  line-height: 1.2;

  letter-spacing: -0.02em;

  color: var(--hp-ink);

}



#magtek-home .hp-section--dark .hp-title {

  color: #ffffff;

}



#magtek-home .hp-lead {

  margin: 0;

  max-width: 700px;

  font-size: var(--hp-font-lead);

  line-height: 1.6;

  font-weight: 400;

  color: var(--hp-ink-muted);

}



#magtek-home .hp-split__copy .hp-lead {

  font-size: var(--hp-font-body);

  line-height: 1.65;

}



#magtek-home .hp-section--dark .hp-lead {

  color: rgb(248 250 252 / 0.88);

}



#magtek-home .hp-title--center {

  text-align: center;

  margin-left: auto;

  margin-right: auto;

}



#magtek-home .hp-lead--center {

  text-align: center;

  margin-left: auto;

  margin-right: auto;

}



/* Proof strip */

#magtek-home .hp-proof-strip {

  position: relative;

  padding: 36px 0;

  background: var(--hp-surface-alt);

  border-block: 1px solid rgb(38 60 80 / 0.08);

}



#magtek-home .hp-proof-grid {

  display: grid;

  gap: 20px;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  list-style: none;

  margin: 0;

  padding: 0;

}



#magtek-home .hp-proof-item {

  margin: 0;

  padding: 0 16px 0 0;

  background: transparent;

  border: none;

  border-radius: 0;

  box-shadow: none;

  border-right: 1px solid rgb(38 60 80 / 0.12);

}



#magtek-home .hp-proof-item:last-child {

  border-right: none;

}



#magtek-home .hp-proof-item h3 {

  margin: 0 0 6px;

  font-size: var(--hp-font-proof-h);

  font-weight: 700;

  line-height: 1.2;

  color: var(--hp-ink);

}



#magtek-home .hp-proof-item p {

  margin: 0;

  font-size: var(--hp-font-proof-body);

  line-height: 1.5;

  color: var(--hp-ink-muted);

}



#magtek-home .hp-section--intro .hp-lead {

  max-width: 608px;

}



#magtek-home .hp-pillars {

  display: grid;

  gap: 28px 24px;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  margin: 32px 0 0;

  padding: 0;

  list-style: none;

}



#magtek-home .hp-pillar {

  margin: 0;

  padding: 0 0 0 16px;

  border-left: 3px solid var(--hp-red);

}



#magtek-home .hp-pillar h3 {

  margin: 0 0 8px;

  font-size: var(--hp-font-h3);

  font-weight: 700;

  line-height: 1.25;

  color: var(--hp-ink);

}



#magtek-home .hp-pillar p {

  margin: 0 0 12px;

  font-size: var(--hp-font-body-sm);

  line-height: 1.6;

  color: var(--hp-ink-muted);

}



/* Editorial split */

#magtek-home .hp-split {

  display: grid;

  gap: 32px;

  align-items: center;

  grid-template-columns: 1fr 1fr;

}



#magtek-home .hp-split--reverse .hp-split__media {

  order: 2;

}



#magtek-home .hp-split__media img {

  display: block;

  width: 100%;

  height: auto;

  border-radius: 12px;

  box-shadow: 0 8px 28px rgb(15 23 42 / 0.1);

}



#magtek-home .hp-split--product .hp-split__media img {

  border-radius: 8px;

  box-shadow: 0 4px 20px rgb(15 23 42 / 0.08);

}



#magtek-home .hp-split__media--contain img {

  width: auto;

  max-width: 100%;

  min-height: 280px;

  max-height: min(520px, 52vh);

  margin-inline: auto;

  object-fit: contain;

  object-position: center;

  box-shadow: none;

  background: transparent;

}



#magtek-home .hp-section--dark .hp-split__media img {

  border: 1px solid rgb(255 255 255 / 0.12);

}



#magtek-home .hp-link-row {

  display: flex;

  flex-direction: column;

  gap: 12px;

  margin-top: 24px;

}



#magtek-home .hp-link-row a {

  font-size: 16px;

  font-weight: 700;

  color: var(--hp-ink);

  text-decoration: none;

}



#magtek-home .hp-link-row a:hover {

  color: var(--hp-red);

}



#magtek-home .hp-link-row a::after {

  content: " →";

  color: var(--hp-red);

}



#magtek-home .hp-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 12px;

  margin-top: 28px;

}



/* Trust list on dark band */

#magtek-home .hp-trust-list {

  margin: 20px 0 0;

  padding: 0;

  list-style: none;

}



#magtek-home .hp-trust-list li {

  position: relative;

  margin: 0 0 12px;

  padding-left: 20px;

  font-size: var(--hp-font-body-sm);

  line-height: 1.55;

  color: rgb(248 250 252 / 0.9);

}



#magtek-home .hp-trust-list li::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0.55em;

  width: 6px;

  height: 6px;

  border-radius: 50%;

  background: var(--hp-red);

}



#magtek-home .hp-trust-list strong {

  color: #fff;

  font-weight: 700;

}



/* Final CTA band */

#magtek-home .hp-cta-band {

  text-align: center;

  padding: 60px var(--hp-pad-x);

  background: var(--hp-surface-alt);

  border-top: 1px solid rgb(38 60 80 / 0.08);

}



#magtek-home .hp-cta-band .hp-title {

  max-width: 640px;

  margin-left: auto;

  margin-right: auto;

}



#magtek-home .hp-cta-band .hp-lead {

  margin-top: 12px;

  max-width: 608px;

}



#magtek-home .hp-cta-band .hp-actions {

  justify-content: center;

  margin-top: 24px;

}



@media (max-width: 991px) {

  #magtek-home .hp-proof-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  #magtek-home .hp-pillars {

    grid-template-columns: 1fr;

  }



  #magtek-home .hp-split {

    grid-template-columns: 1fr;

  }



  #magtek-home .hp-split--reverse .hp-split__media {

    order: 0;

  }

}



@media (max-width: 767px) {

  #magtek-home {

    --hp-pad-y: 48px;

  }



  #magtek-home .hp-title {

    font-size: clamp(24px, 6vw, 32px);

  }



  #magtek-home .hp-lead {

    font-size: 18px;

  }

}



@media (max-width: 575px) {

  #magtek-home .hp-proof-grid {

    grid-template-columns: 1fr;

  }



  #magtek-home .hp-proof-item {

    padding: 0 0 16px;

    border-right: none;

    border-bottom: 1px solid rgb(38 60 80 / 0.12);

  }



  #magtek-home .hp-proof-item:last-child {

    border-bottom: none;

  }

}



/* Proof strip: refined stat band (overrides the earlier .hp-proof-* rules above) */
#magtek-home .hp-proof-strip {
  position: relative;
  padding: 46px 0 44px;
  background: var(--hp-surface-alt);
  border-top: 1px solid rgb(38 60 80 / 0.08);
  border-bottom: 1px solid rgb(38 60 80 / 0.08);
}
#magtek-home .hp-proof-grid {
  display: grid;
  gap: 0;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
#magtek-home .hp-proof-item {
  margin: 0;
  padding: 2px clamp(22px, 3vw, 48px);
  background: transparent;
  border: 0;
  border-left: 1px solid rgb(38 60 80 / 0.1);
  border-radius: 0;
  box-shadow: none;
}
#magtek-home .hp-proof-item:first-child { padding-left: 0; border-left: 0; }
#magtek-home .hp-proof-item:last-child { padding-right: 0; }
#magtek-home .hp-proof-item h3 {
  position: relative;
  margin: 0 0 10px;
  padding-top: 16px;
  font-size: clamp(22px, 2.1vw, 30px);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--hp-ink);
  font-variant-numeric: tabular-nums;
}
#magtek-home .hp-proof-item h3::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 24px;
  height: 3px;
  background: var(--hp-red);
}
#magtek-home .hp-proof-item p {
  margin: 0;
  max-width: 34ch;
  font-size: var(--hp-font-proof-body);
  line-height: 1.55;
  color: var(--hp-ink-muted);
}
@media (max-width: 991px) {
  #magtek-home .hp-proof-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 30px; }
  #magtek-home .hp-proof-item { padding: 0 clamp(20px, 3vw, 40px); border-left: 1px solid rgb(38 60 80 / 0.1); }
  #magtek-home .hp-proof-item:nth-child(odd) { padding-left: 0; border-left: 0; }
  #magtek-home .hp-proof-item:nth-child(even) { padding-right: 0; }
}
@media (max-width: 575px) {
  #magtek-home .hp-proof-grid { grid-template-columns: 1fr; row-gap: 0; }
  #magtek-home .hp-proof-item { padding: 18px 0; border-left: 0; border-top: 1px solid rgb(38 60 80 / 0.1); }
  #magtek-home .hp-proof-item:first-child { padding-top: 0; border-top: 0; }
}