/* ============================================================================
   product-detail.css — Premium product-detail page (Mamta light theme)
   ----------------------------------------------------------------------------
   Lovable Smart Print 250 supplies the LAYOUT / UX / interaction patterns.
   Mamta supplies the BRAND: white + navy #033051 + green #25d366.
   The SCO document supplies the content. The three never mix.

   Every rule is scoped under `body.mc-prd-rich`. Only product pages that have a
   file in /product-content/ carry that class (build-products.js adds it), so
   the other 14 product pages and every other page on the site are untouched.
   Class prefix is `sp-` so nothing here can collide with product-mobile.css.

   Load order per page:
     1. /css/Style.css            (global brand: header, footer, social rail)
     2. inline <style> in the page (legacy .product-page / .specs-table base)
     3. /css/product-mobile.css   (body.mc-product mobile fixes — social bar)
     4. /css/product-detail.css   (this file)

   Written MOBILE FIRST: base rules are the 320px layout, min-width queries add
   capability upward. Targets 320/360/375/390/414/430/480 and up.

   Contents
      1. Tokens
      2. Page shell + section furniture
      3. Buttons
      4. Sticky product nav
      5. Hero
      6. Marquee
      7. Stat cards
      8. Quick technical highlights
      9. Machine features (list + detail / accordion)
     10. How it works
     11. Process timeline
     12. Spec dashboard
     13. Data tables (materials + comparison)
     14. Industries
     15. Applications
     16. Support + Why Choose
     17. Gallery
     18. FAQ
     19. Quote configurator
     20. Final navy CTA band
     21. Reveal animations
     22. Tablet / desktop
     23. Narrow phones
     24. Reduced motion / touch / print
   ========================================================================== */


/* ==========================================================================
   1. TOKENS — all sourced from the existing Mamta site, none invented
   ========================================================================== */

body.mc-prd-rich {
  --sp-navy: #033051;
  --sp-navy-2: #0b5285;
  --sp-navy-3: #1a4a6b;
  --sp-blue: #0b7fab;
  --sp-green: #25d366;
  --sp-green-dark: #1eb455;
  --sp-green-tint: #f2fbf5;

  --sp-bg: #ffffff;
  --sp-band: #f5f8fa;
  --sp-band-2: #eef4f9;
  --sp-zebra: #fafcfe;

  --sp-ink: #033051;
  --sp-body: #556;
  --sp-muted: #6b7a88;

  --sp-line: #e3e9ef;
  --sp-line-2: #d7dde3;

  --sp-shadow: 0 2px 4px rgba(3, 48, 81, .04), 0 12px 28px -18px rgba(3, 48, 81, .22);
  --sp-shadow-lg: inset 0 1px 0 #fff, 0 18px 40px -24px rgba(3, 48, 81, .28);

  --sp-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --sp-display: "Archivo", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;

  /* TWO offsets, deliberately separate:

     --sp-headerh   the space the fixed global header OCCUPIES. Static: changes
                    only on resize. Drives the <main> offset and every
                    scroll-margin, so it must not move while scrolling or the
                    whole page would reflow under the reader.

     --sp-stickytop where the header's bottom edge ACTUALLY IS right now. The
                    site-wide js/script.js hides the header on scroll-down with
                    translateY(-100%) and brings it back on scroll-up, so this
                    travels between 0 and --sp-headerh. Only the sticky sub-nav
                    reads it — a constant here is what left the bar floating in
                    a gap with hero content showing through above it.

     Both are seeded from a measurement of the real header and re-measured at
     runtime by product-detail.js. */
  /* ---- type scale -------------------------------------------------
     Nine near-identical body sizes (.84 .86 .9 .92 .93 .95 .97 1 1.02rem)
     had accumulated across the sections, which is what made each block read
     like a different site. Everything now resolves to these three. */
  --sp-fs-body: 1rem;       /* section leads and prose            */
  --sp-fs-sm: .9375rem;     /* card copy, table cells, FAQ answers */
  --sp-fs-h3: 1.0625rem;    /* every card heading                 */
  --sp-lh-body: 1.7;
  --sp-lh-sm: 1.65;

  --sp-headerh: 99px;
  --sp-stickytop: 99px;
  --sp-navh: 52px;

  /* `clip`, not `hidden`: `hidden` would turn <body> into a scroll container
     and break `position: sticky` for the product sub-nav. */
  overflow-x: clip;
  background: var(--sp-bg);
}

@media (min-width: 760px) {
  body.mc-prd-rich { --sp-navh: 56px; }
}


/* ==========================================================================
   2. PAGE SHELL + SECTION FURNITURE
   ========================================================================== */

body.mc-prd-rich .sp-wrap {
  width: 100%;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 16px;
}

body.mc-prd-rich .sp img,
body.mc-prd-rich .sp svg,
body.mc-prd-rich .sp iframe {
  max-width: 100%;
  height: auto;
}

body.mc-prd-rich .sp h1,
body.mc-prd-rich .sp h2,
body.mc-prd-rich .sp h3,
body.mc-prd-rich .sp h4,
body.mc-prd-rich .sp p,
body.mc-prd-rich .sp li,
body.mc-prd-rich .sp td,
body.mc-prd-rich .sp th,
body.mc-prd-rich .sp a,
body.mc-prd-rich .sp summary,
body.mc-prd-rich .sp button {
  overflow-wrap: break-word;
  word-break: break-word;
}

/* anchor targets must clear the fixed header + sticky product nav */
body.mc-prd-rich .sp [id] {
  scroll-margin-top: calc(var(--sp-headerh) + var(--sp-navh) + 12px);
}

body.mc-prd-rich .sp-section {
  position: relative;
  padding: 32px 0;
  background: var(--sp-bg);
}

body.mc-prd-rich .sp-section--band { background: var(--sp-band); }
body.mc-prd-rich .sp-section--band2 { background: var(--sp-band-2); }

body.mc-prd-rich .sp-section + .sp-section { border-top: 1px solid var(--sp-line); }

/* blueprint grid — navy lines on white, the light-theme reading of Lovable's
   grid-blueprint. Decorative only. */
body.mc-prd-rich .sp-grid-bp::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(3, 48, 81, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(3, 48, 81, .05) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 78%);
  mask-image: linear-gradient(to bottom, #000, transparent 78%);
}

body.mc-prd-rich .sp-grid-bp > * { position: relative; }

/* the small uppercase technical label used throughout */
body.mc-prd-rich .sp-label {
  display: block;
  font-family: var(--sp-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sp-muted);
  line-height: 1.5;
}


/* plain eyebrow — the supporting sections that carry no story numeral */
body.mc-prd-rich .sp-eyebrow {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 14px;
}

body.mc-prd-rich .sp-eyebrow::before {
  content: "";
  flex: 0 0 auto;
  width: 26px;
  height: 2px;
  margin-top: .72em;
  background: var(--sp-green);
}

body.mc-prd-rich .sp-h2 {
  font-family: var(--sp-display);
  font-size: clamp(1.45rem, 6vw, 2.6rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--sp-ink);
  margin: 0 0 14px;
  text-wrap: balance;
}

body.mc-prd-rich .sp-h2 em {
  font-style: normal;
  color: var(--sp-blue);
}

body.mc-prd-rich .sp-h3 {
  font-family: var(--sp-display);
  font-size: clamp(1.02rem, 4.2vw, 1.2rem);
  line-height: 1.3;
  font-weight: 700;
  color: var(--sp-ink);
  margin: 0 0 8px;
}

body.mc-prd-rich .sp-lead {
  font-size: var(--sp-fs-body);
  line-height: var(--sp-lh-body);
  color: var(--sp-body);
  margin: 0 0 12px;
  max-width: 74ch;
}

/* ---------------------------------------------------------------------------
   SECTION INTRO — the run of lead paragraphs under a section heading.

   `.sp-lead` on its own only caps the LINE length (74ch = 638px). Inside the
   1192px content column that is 54% of the width, and since a paragraph is a
   block, the other 46% was dead space — the empty right-hand area that used to
   appear under every section heading. Capping the measure is right; capping
   the BLOCK was the bug.

   Two columns unconditionally was the wrong cure, though: a three-line intro
   got sliced 2 + 1, so the reader met "…Manufacturer," and then had to jump
   back up to a lone "international markets." in column two.

   So the column count now follows the amount of copy:

     one paragraph   -> no columns. It fills the full content width, which is
                        what removes the dead space, and it cannot be split.
     two or more     -> two columns, with break-inside: avoid so each paragraph
                        stays whole. One paragraph per column, no sentence ever
                        broken across the gutter.

   Below 1000px none of this applies: always a single column, with the 74ch cap
   doing the work.
   --------------------------------------------------------------------------- */

@media (min-width: 1000px) {
  body.mc-prd-rich .sp-intro .sp-lead {
    max-width: none;          /* fill the content column, no dead right edge */
    margin: 0 0 12px;
  }

  body.mc-prd-rich .sp-intro .sp-lead:last-child { margin-bottom: 0; }

  /* Only a multi-paragraph intro has enough copy to justify two columns.
     Engines without :has() simply keep the single-column full-width layout
     above, which is a correct result rather than a broken one. */
  body.mc-prd-rich .sp-intro:not(.sp-intro--full-width):has(.sp-lead + .sp-lead) {
    columns: 2;
    column-gap: 44px;
  }

  body.mc-prd-rich .sp-intro:not(.sp-intro--full-width):has(.sp-lead + .sp-lead) .sp-lead {
    break-inside: avoid;
  }

  /* Opt-out: intros that must stay plain stacked paragraphs instead of a
     two-column standfirst. The two-column rule above already excludes this
     modifier, so nothing has to be undone — these declarations are stated
     explicitly so the intent is readable at the point of use, and so the
     result is right even if the rule above is ever re-ordered.

     The leads keep `max-width: none`, so each fills the whole content column
     and they simply sit one below the other: no columns, no dead right edge,
     and no fall back to the 74ch cap. Sections without the modifier keep the
     two-column flow untouched. */
  body.mc-prd-rich .sp-intro--full-width {
    columns: auto;
    column-gap: normal;
  }
}

body.mc-prd-rich .sp-note {
  font-family: var(--sp-mono);
  font-size: .78rem;
  line-height: 1.7;
  letter-spacing: .02em;
  color: var(--sp-muted);
  margin-top: 16px;
}


/* ==========================================================================
   3. BUTTONS
   Green = primary CTA (matches the site's existing .btn-primary convention).
   Green is used for fills and indicators only, never small text on white.
   ========================================================================== */

body.mc-prd-rich .sp-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 22px;
}

body.mc-prd-rich .sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  min-height: 52px;
  padding: 14px 22px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-family: var(--sp-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background .22s ease, color .22s ease, border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}

body.mc-prd-rich .sp-btn i { font-size: .95rem; }

body.mc-prd-rich .sp-btn--primary {
  background: var(--sp-green);
  border-color: var(--sp-green);
  color: #fff;
}

body.mc-prd-rich .sp-btn--primary:hover {
  background: var(--sp-green-dark);
  border-color: var(--sp-green-dark);
  box-shadow: 0 10px 22px -12px rgba(37, 211, 102, .8);
}

body.mc-prd-rich .sp-btn--navy {
  background: #fff;
  border-color: var(--sp-navy);
  color: var(--sp-navy);
}

body.mc-prd-rich .sp-btn--navy:hover {
  background: var(--sp-navy);
  color: #fff;
}

body.mc-prd-rich .sp-btn--ghost {
  background: transparent;
  border-color: var(--sp-line-2);
  color: var(--sp-navy);
}

body.mc-prd-rich .sp-btn--ghost:hover {
  border-color: var(--sp-blue);
  color: var(--sp-blue);
}

/* on the navy band */
body.mc-prd-rich .sp-cta-band .sp-btn--navy {
  background: transparent;
  border-color: rgba(255, 255, 255, .7);
  color: #fff;
}

body.mc-prd-rich .sp-cta-band .sp-btn--navy:hover {
  background: #fff;
  color: var(--sp-navy);
}


@keyframes sp-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: .45; transform: scale(.82); }
}


/* ==========================================================================
   4. LAYOUT ARCHITECTURE — global header / product sub-nav / hero
   --------------------------------------------------------------------------
   The global .main-header is `position: fixed`, and Style.css reserves room for
   it with `main { padding-top: 88px }`. The product sub-nav therefore lives
   INSIDE <main>, after that padding: its resting position is already flush
   under the header, so at rest the sticky position equals the resting position.
   The bar keeps its own height in the flow and can never travel over the hero.

       .main-header   fixed, 0 .. --sp-headerh  (slides away on scroll-down)
       main.sp        padding-top: --sp-headerh (static, reserves the space)
         .sp-nav      sticky at --sp-stickytop, owns --sp-navh of flow
         .sp-hero     starts below the bar

   The bar's `top` tracks --sp-stickytop rather than --sp-headerh, because
   js/script.js hides the global header while scrolling down: a constant offset
   would pin the bar 99px down the viewport with content visible above it.
   Both values are measured at runtime, never guessed.
   ========================================================================== */

body.mc-prd-rich .sp {
  padding-top: var(--sp-headerh);
  background: var(--sp-bg);
}

body.mc-prd-rich .sp-nav {
  position: sticky;
  top: var(--sp-stickytop);
  z-index: 900;
  background: #fff;
  border-bottom: 1px solid var(--sp-line);
  transition: box-shadow .25s ease;
}

/* the lift only appears once the bar is actually pinned */
body.mc-prd-rich .sp-nav.is-stuck {
  box-shadow: 0 14px 26px -22px rgba(3, 48, 81, .55);
}

body.mc-prd-rich .sp-nav__bar {
  display: flex;
  align-items: stretch;
  max-width: 1240px;
  margin: 0 auto;
  min-height: 52px;
}

/* ---- brand block: phones give the whole bar to the links ---- */
body.mc-prd-rich .sp-nav__brand { display: none; }

/* ---- section links: one scrollable line at every width ---- */
body.mc-prd-rich .sp-nav__rail {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
}

/* edge fades so it reads as scrollable rather than clipped */
body.mc-prd-rich .sp-nav__rail::before,
body.mc-prd-rich .sp-nav__rail::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 24px;
  z-index: 2;
  pointer-events: none;
}

/* Each fade shows only when there really is more rail in that direction, so
   the first and last labels are never dimmed for no reason. Without JS the
   right-hand fade stays on, which is true at rest, and the rail still scrolls. */
body.mc-prd-rich .sp-nav__rail::before {
  left: 0;
  width: 20px;
  opacity: 0;
  background: linear-gradient(90deg, #fff 30%, rgba(255, 255, 255, 0));
  transition: opacity .2s ease;
}

body.mc-prd-rich .sp-nav__rail::after {
  right: 0;
  width: 30px;
  background: linear-gradient(270deg, #fff 34%, rgba(255, 255, 255, 0));
  transition: opacity .2s ease;
}

body.mc-prd-rich .sp-nav.is-rail-start .sp-nav__rail::before { opacity: 1; }

body.mc-prd-rich .sp-nav.is-rail-end .sp-nav__rail::after { opacity: 1; }

body.mc-prd-rich .sp-nav.is-rail-ready .sp-nav__rail::after { opacity: 0; }

body.mc-prd-rich .sp-nav.is-rail-ready.is-rail-end .sp-nav__rail::after { opacity: 1; }

body.mc-prd-rich .sp-nav__list {
  display: flex;
  align-items: stretch;
  list-style: none;
  margin: 0;
  padding: 0 6px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
  scroll-padding-inline: 24px;
}

body.mc-prd-rich .sp-nav__list::-webkit-scrollbar { display: none; }

body.mc-prd-rich .sp-nav__list li { flex: 0 0 auto; }

body.mc-prd-rich .sp-nav__list a {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 0 11px;
  color: var(--sp-muted);
  text-decoration: none;
  font-family: var(--sp-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color .2s ease;
}

body.mc-prd-rich .sp-nav__list a::after {
  content: "";
  position: absolute;
  left: 9px;
  right: 9px;
  bottom: 0;
  height: 2px;
  background: var(--sp-green);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .3s cubic-bezier(.16, 1, .3, 1);
}

body.mc-prd-rich .sp-nav__list a:hover,
body.mc-prd-rich .sp-nav__list a:focus-visible { color: var(--sp-navy); }

body.mc-prd-rich .sp-nav__list a.is-active { color: var(--sp-navy); }

body.mc-prd-rich .sp-nav__list a.is-active::after { transform: scaleX(1); }

/* ---- quote CTA: always reachable, never part of the scroll ---- */
body.mc-prd-rich .sp-nav__quote {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0 12px 0 4px;
  padding: 9px 12px;
  border-radius: 6px;
  background: var(--sp-green);
  color: #fff;
  text-decoration: none;
  font-family: var(--sp-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: background .2s ease;
}

body.mc-prd-rich .sp-nav__quote:hover { background: var(--sp-green-dark); }

body.mc-prd-rich .sp-nav__quote-long { display: none; }

body.mc-prd-rich .sp-nav__progress {
  height: 2px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: var(--sp-green);
  will-change: transform;
}


/* ==========================================================================
   5. HERO — product showcase
   Copy, machine plate and a hairline metric strip. Mobile order comes straight
   from the DOM (machine first), so no CSS reordering is involved on phones.
   ========================================================================== */

body.mc-prd-rich .sp-hero {
  position: relative;
  isolation: isolate;
  /* contains the blueprint field and the blue wash, both of which are sized
     past the section edges on purpose */
  overflow: hidden;
  padding: 12px 0 28px;
  background: linear-gradient(180deg, #fbfdff 0%, #f3f8fc 46%, #ffffff 100%);
}

/* blueprint field, faded out so it never competes with the copy */
body.mc-prd-rich .sp-hero__bp {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(3, 48, 81, .055) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(3, 48, 81, .055) 1px, transparent 1px);
  background-size: 46px 46px;
  -webkit-mask-image: radial-gradient(115% 85% at 72% 14%, #000 0%, transparent 74%);
  mask-image: radial-gradient(115% 85% at 72% 14%, #000 0%, transparent 74%);
}

/* one soft brand-blue wash, no glow stack */
body.mc-prd-rich .sp-hero__glow {
  position: absolute;
  z-index: -1;
  top: -16%;
  right: -22%;
  width: 78vw;
  height: 78vw;
  max-width: 740px;
  max-height: 740px;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(11, 127, 171, .13), rgba(11, 127, 171, 0) 72%);
}

body.mc-prd-rich .sp-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 0 14px;
  color: var(--sp-muted);
  text-decoration: none;
  font-family: var(--sp-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  transition: color .2s ease;
}

body.mc-prd-rich .sp-back:hover { color: var(--sp-navy); }

body.mc-prd-rich .sp-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ---- machine plate ---------------------------------------------------- */

body.mc-prd-rich .sp-hero__media { margin: 0; }

body.mc-prd-rich .sp-plate {
  position: relative;
  padding: 30px 14px 22px;
  border-radius: 16px;
  border: 1px solid var(--sp-line);
  background: radial-gradient(125% 120% at 50% 4%, #ffffff 0%, #eaf1f7 100%);
  box-shadow: inset 0 1px 0 #fff, 0 26px 48px -32px rgba(3, 48, 81, .45);
}

/* fine grid behind the machine, faded away from the edges */
body.mc-prd-rich .sp-plate::before {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: 15px;
  pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(3, 48, 81, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(3, 48, 81, .05) 1px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: radial-gradient(72% 70% at 50% 48%, #000 18%, transparent 80%);
  mask-image: radial-gradient(72% 70% at 50% 48%, #000 18%, transparent 80%);
}

body.mc-prd-rich .sp-plate picture { position: relative; z-index: 1; }

body.mc-prd-rich .sp-plate img {
  display: block;
  width: 100%;
  max-height: 205px;
  object-fit: contain;
  filter: drop-shadow(0 20px 26px rgba(3, 48, 81, .22));
}

/* engineering crop marks */
body.mc-prd-rich .sp-plate__mark {
  position: absolute;
  width: 13px;
  height: 13px;
  border: 0 solid var(--sp-blue);
  opacity: .45;
  pointer-events: none;
}

body.mc-prd-rich .sp-plate__mark--tl { top: 9px; left: 9px; border-top-width: 1.5px; border-left-width: 1.5px; }
body.mc-prd-rich .sp-plate__mark--tr { top: 9px; right: 9px; border-top-width: 1.5px; border-right-width: 1.5px; }
body.mc-prd-rich .sp-plate__mark--bl { bottom: 9px; left: 9px; border-bottom-width: 1.5px; border-left-width: 1.5px; }
body.mc-prd-rich .sp-plate__mark--br { bottom: 9px; right: 9px; border-bottom-width: 1.5px; border-right-width: 1.5px; }

/* Machine-level plates. Anchored to the frame corners, never to a part of the
   photo, so nothing on the machine is being labelled. */
body.mc-prd-rich .sp-plate__id,
body.mc-prd-rich .sp-plate__spec {
  position: absolute;
  z-index: 2;
  display: flex;
  flex-direction: column;
  padding: 6px 11px;
  border: 1px solid var(--sp-line);
  border-radius: 8px;
  background: rgba(255, 255, 255, .93);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-plate__id { top: 12px; left: 12px; }

body.mc-prd-rich .sp-plate__spec {
  bottom: 12px;
  left: 12px;
  align-items: flex-start;
  border-color: #cdebd7;
  background: rgba(242, 251, 245, .95);
}

body.mc-prd-rich .sp-plate__id b,
body.mc-prd-rich .sp-plate__spec span {
  font-family: var(--sp-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--sp-muted);
  line-height: 1.5;
}

body.mc-prd-rich .sp-plate__id span,
body.mc-prd-rich .sp-plate__spec b {
  font-family: var(--sp-display);
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--sp-navy);
  line-height: 1.2;
}

body.mc-prd-rich .sp-plate__spec b { color: var(--sp-green-dark); }

/* ---- copy ------------------------------------------------------------- */

body.mc-prd-rich .sp-chip {
  /* phones: the MODEL plate on the image already says Smart Print 250, so the
     chip would only push the product name further down the first screen */
  display: none;
}

body.mc-prd-rich .sp-chip__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--sp-green);
  animation: sp-pulse 2s ease-in-out infinite;
}

/* The H1 wording is untouched. Only the two halves are sized differently so
   the product name reads as the headline and the SEO positioning line reads
   as the strapline directly under it. */
body.mc-prd-rich .sp-h1 {
  font-family: var(--sp-display);
  font-size: clamp(1.72rem, 8.4vw, 2.55rem);
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.032em;
  color: var(--sp-ink);
  margin: 0 0 16px;
}

body.mc-prd-rich .sp-h1__lead {
  display: block;
  background: linear-gradient(172deg, #05436f 0%, #033051 52%, #0b5285 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

body.mc-prd-rich .sp-h1__tail {
  display: block;
  margin-top: .44em;
  font-size: clamp(.88rem, 3.7vw, 1.05rem);
  font-weight: 700;
  line-height: 1.34;
  letter-spacing: -.004em;
  color: var(--sp-blue);
}

body.mc-prd-rich .sp-hero__value {
  font-size: var(--sp-fs-body);
  line-height: 1.64;
  color: var(--sp-body);
  margin: 0 0 18px;
  max-width: 58ch;
}

body.mc-prd-rich .sp-hero__value strong { color: var(--sp-navy); }

/* third CTA as a quiet link, so the button row can never wrap raggedly */
body.mc-prd-rich .sp-textlink {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 15px;
  color: var(--sp-navy-2);
  text-decoration: none;
  font-family: var(--sp-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--sp-line-2);
  padding-bottom: 4px;
  transition: color .2s ease, border-color .2s ease;
}

body.mc-prd-rich .sp-textlink:hover {
  color: var(--sp-blue);
  border-color: var(--sp-blue);
}

body.mc-prd-rich .sp-textlink__arrow {
  font-size: .7rem;
  transition: transform .22s cubic-bezier(.16, 1, .3, 1);
}

body.mc-prd-rich .sp-textlink:hover .sp-textlink__arrow { transform: translateX(4px); }

/* ---- hairline metric strip ------------------------------------------- */

body.mc-prd-rich .sp-strip {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  background: var(--sp-line);
  overflow: hidden;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-metric {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 17px 14px 15px;
  background: #fff;
}

/* short green tick — the accent that makes the strip read as instrumentation */
body.mc-prd-rich .sp-metric::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 2px;
  background: var(--sp-green);
}

body.mc-prd-rich .sp-metric__val {
  font-family: var(--sp-display);
  font-size: clamp(1.2rem, 5.6vw, 1.85rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -.025em;
  color: var(--sp-navy);
}

body.mc-prd-rich .sp-metric__val--text {
  font-size: clamp(1.02rem, 4.4vw, 1.4rem);
  letter-spacing: -.02em;
}

body.mc-prd-rich .sp-metric__unit {
  display: block;
  margin-top: 3px;
  font-family: var(--sp-mono);
  font-size: .78rem;
  font-weight: 500;
  color: var(--sp-blue);
  line-height: 1.4;
}

body.mc-prd-rich .sp-metric__label {
  margin-top: 9px;
  color: var(--sp-muted);
}

body.mc-prd-rich .sp-scrollcue { display: none; }

@keyframes sp-bob {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(5px); }
}


/* ==========================================================================
   7. STORY SECTION FURNITURE
   Eight numbered beats carry a story header, a measurement rule and a very
   faint background numeral, so the page reads as a sequence of chapters in a
   product story instead of a run of identical content blocks.
   ========================================================================== */

body.mc-prd-rich .sp-section--story { position: relative; }

/* ::after, not ::before — #specs and #quote already use ::before for their
   blueprint grid (.sp-grid-bp), and the two would fight over `content`. */
body.mc-prd-rich .sp-section--story::after {
  content: attr(data-story);
  position: absolute;
  top: 14px;
  right: 12px;
  left: auto;
  z-index: 0;
  font-family: var(--sp-display);
  font-size: min(17vw, 176px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: rgba(3, 48, 81, .038);
  pointer-events: none;
  -webkit-user-select: none;
  user-select: none;
}

body.mc-prd-rich .sp-section--story > .sp-wrap {
  position: relative;
  z-index: 1;
}

/* fine measurement rule opening each beat */
body.mc-prd-rich .sp-section--story > .sp-wrap::before {
  content: "";
  display: block;
  height: 1px;
  margin-bottom: 22px;
  background: repeating-linear-gradient(90deg, var(--sp-line-2) 0 1px, transparent 1px 7px);
}

body.mc-prd-rich .sp-shead {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 11px;
  margin-bottom: 13px;
}

body.mc-prd-rich .sp-shead__num {
  flex: 0 0 auto;
  padding: 3px 9px;
  border: 1px solid #cdebd7;
  border-radius: 5px;
  background: var(--sp-green-tint);
  font-family: var(--sp-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--sp-green-dark);
}

body.mc-prd-rich .sp-shead__line {
  flex: 0 1 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--sp-line-2), rgba(215, 221, 227, 0));
}

body.mc-prd-rich .sp-shead__kick {
  flex: 1 1 auto;
  min-width: 0;
  color: var(--sp-muted);
}

/* ---- editorial prose block ------------------------------------------- */

body.mc-prd-rich .sp-prose { max-width: 74ch; }

body.mc-prd-rich .sp-prose p {
  font-size: var(--sp-fs-body);
  line-height: var(--sp-lh-body);
  color: var(--sp-body);
  margin: 0 0 16px;
}

body.mc-prd-rich .sp-prose p:last-child { margin-bottom: 0; }

body.mc-prd-rich .sp-prose strong { color: var(--sp-navy); }

/* the one highlighted phrase. Italic across twenty words read as a font
   change rather than as emphasis, so it is weight + colour instead. */
body.mc-prd-rich .sp-prose em {
  font-style: normal;
  font-weight: 600;
  color: var(--sp-navy);
}


/* ==========================================================================
   4b/5b/7b. TABLET AND DESKTOP for the blocks above
   ========================================================================== */

@media (min-width: 480px) {
  body.mc-prd-rich .sp-nav__quote-long { display: inline; }
  body.mc-prd-rich .sp-nav__quote-short { display: none; }
}

@media (min-width: 600px) {
  body.mc-prd-rich .sp-chip {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 13px;
    border: 1px solid var(--sp-line);
    border-radius: 999px;
    background: #fff;
    box-shadow: var(--sp-shadow);
    margin-bottom: 15px;
  }

  body.mc-prd-rich .sp-hero { padding: 26px 0 40px; }
  body.mc-prd-rich .sp-plate { padding: 34px 22px 26px; }
  body.mc-prd-rich .sp-plate img { max-height: 320px; }
  body.mc-prd-rich .sp-metric { padding: 20px 18px 18px; }
}

@media (min-width: 760px) {
  body.mc-prd-rich .sp-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.mc-prd-rich .sp-nav__bar { min-height: 56px; }
  body.mc-prd-rich .sp-nav__list a { min-height: 56px; }
  body.mc-prd-rich .sp-plate img { max-height: 360px; }
}

@media (min-width: 900px) {
  /* brand block appears only where there is room for it beside the rail */
  body.mc-prd-rich .sp-nav__brand {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 6px 18px 6px 16px;
    margin-right: 4px;
    border-right: 1px solid var(--sp-line);
    text-decoration: none;
  }

  body.mc-prd-rich .sp-nav__model {
    font-family: var(--sp-display);
    font-size: .92rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.015em;
    color: var(--sp-navy);
    white-space: nowrap;
  }

  body.mc-prd-rich .sp-nav__series {
    margin-top: 1px;
    font-family: var(--sp-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--sp-muted);
    white-space: nowrap;
  }

  /* hero becomes copy-left / machine-right, strip spanning underneath */
  body.mc-prd-rich .sp-hero { padding: 34px 0 48px; }

  body.mc-prd-rich .sp-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr);
    grid-template-areas:
      "body  media"
      "strip strip";
    column-gap: 40px;
    row-gap: 28px;
    align-items: center;
  }

  body.mc-prd-rich .sp-hero__body { grid-area: body; }
  body.mc-prd-rich .sp-hero__media { grid-area: media; }
  body.mc-prd-rich .sp-strip { grid-area: strip; }

  body.mc-prd-rich .sp-h1 { font-size: clamp(2.3rem, 4.4vw, 3rem); }
  body.mc-prd-rich .sp-h1__tail { font-size: clamp(1rem, 1.55vw, 1.15rem); }
  body.mc-prd-rich .sp-plate img { max-height: 330px; }
  body.mc-prd-rich .sp-shead__line { flex: 0 1 70px; }
}

@media (min-width: 1000px) {
  body.mc-prd-rich .sp-hero { padding: 42px 0 54px; }
  body.mc-prd-rich .sp-hero__grid { column-gap: 48px; }
  body.mc-prd-rich .sp-plate { padding: 40px 26px 30px; }
  body.mc-prd-rich .sp-plate img { max-height: 370px; }
  /* the ten section links have to share the bar with the brand block and the
     quote button: tighten tracking rather than let the rail clip a label */
  body.mc-prd-rich .sp-nav__list a {
    padding: 0 11px;
    letter-spacing: .09em;
  }
  body.mc-prd-rich .sp-metric { padding: 22px 20px 19px; }
  body.mc-prd-rich .sp-hero__value {
    font-size: var(--sp-fs-body);
    line-height: var(--sp-lh-body);
    max-width: 62ch;
    margin-bottom: 18px;
  }

  /* the overview beat reads as a two-column editorial spread */
  body.mc-prd-rich .sp-prose {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 40px;
    max-width: none;
  }

  /* This paragraph used to be set 1.2rem in navy, which tinted the whole
     passage and made it read as a different typeface from the column beside
     it. It is ordinary body copy now; only the deliberate emphasis inside it
     (<strong>, <em>) carries colour. */
  body.mc-prd-rich .sp-prose p:first-child {
    font-size: var(--sp-fs-body);
    line-height: var(--sp-lh-body);
    color: var(--sp-body);
    margin: 0;
  }

  /* desktop scroll affordance under the strip */
  body.mc-prd-rich .sp-scrollcue {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 24px 0 0;
  }

  body.mc-prd-rich .sp-scrollcue i {
    color: var(--sp-green);
    font-size: .82rem;
    animation: sp-bob 1.9s ease-in-out infinite;
  }
}

@media (min-width: 1240px) {
  /* sized so "Shaftless Rotogravure" holds one line and the product name reads
     as two lines rather than three — the same rhythm as the design reference */
  body.mc-prd-rich .sp-h1 { font-size: 3.05rem; }
  body.mc-prd-rich .sp-h1__tail { font-size: 1.18rem; }
  body.mc-prd-rich .sp-plate img { max-height: 366px; }
  body.mc-prd-rich .sp-metric__val { font-size: 2rem; }
  body.mc-prd-rich .sp-metric__val--text { font-size: 1.5rem; }
}

@media (min-width: 1400px) {
  body.mc-prd-rich .sp-h1 { font-size: 3.3rem; }
  body.mc-prd-rich .sp-plate img { max-height: 392px; }
}

@media (max-width: 359px) {
  body.mc-prd-rich .sp-nav__list a { padding: 0 9px; letter-spacing: .1em; }
  body.mc-prd-rich .sp-nav__quote { margin-right: 8px; padding: 9px 10px; }
  body.mc-prd-rich .sp-plate { padding: 26px 11px 18px; }
  body.mc-prd-rich .sp-plate img { max-height: 176px; }
  body.mc-prd-rich .sp-metric { padding: 14px 11px 13px; }
}


/* ==========================================================================
   6. MARQUEE
   ========================================================================== */

body.mc-prd-rich .sp-marquee {
  overflow: hidden;
  border-top: 1px solid var(--sp-line);
  border-bottom: 1px solid var(--sp-line);
  background: var(--sp-band-2);
  padding: 11px 0;
}

body.mc-prd-rich .sp-marquee__track {
  display: flex;
  width: max-content;
  animation: sp-marquee 34s linear infinite;
}

body.mc-prd-rich .sp-marquee__group {
  display: flex;
  align-items: center;
  gap: 34px;
  padding-right: 34px;
  flex: 0 0 auto;
}

body.mc-prd-rich .sp-marquee span {
  font-family: var(--sp-mono);
  font-size: .6875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--sp-navy);
  white-space: nowrap;
}

body.mc-prd-rich .sp-marquee i {
  width: 5px;
  height: 5px;
  background: var(--sp-green);
  transform: rotate(45deg);
  flex: 0 0 auto;
}

@keyframes sp-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}


/* ==========================================================================
   8. QUICK TECHNICAL HIGHLIGHTS
   ========================================================================== */

body.mc-prd-rich .sp-highlights {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
}

body.mc-prd-rich .sp-hcard {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  padding: 13px 10px;
  text-align: center;
  min-width: 0;
  box-shadow: var(--sp-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.mc-prd-rich .sp-hcard__icon {
  width: 34px;
  height: 34px;
  margin: 0 auto 8px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sp-band-2);
  color: var(--sp-blue);
  font-size: 1.05rem;
}

body.mc-prd-rich .sp-hcard h3 {
  font-family: var(--sp-display);
  font-size: var(--sp-fs-h3);
  font-weight: 700;
  color: var(--sp-ink);
  margin: 0 0 5px;
  line-height: 1.3;
}

body.mc-prd-rich .sp-hcard p {
  font-size: var(--sp-fs-sm);
  line-height: var(--sp-lh-sm);
  color: var(--sp-body);
  margin: 0;
}


/* ==========================================================================
   9. MACHINE FEATURES — accordion on phones, list + detail panel on desktop
   All 14 descriptions live in the DOM; JS only collapses them.
   ========================================================================== */

body.mc-prd-rich .sp-features { margin-top: 16px; }

body.mc-prd-rich .sp-feat-media { display: none; }

body.mc-prd-rich .sp-feat-list {
  display: grid;
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

body.mc-prd-rich .sp-feat {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-feat__btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 58px;
  padding: 13px 14px;
  border: 0;
  background: #fff;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: var(--sp-ink);
}

body.mc-prd-rich .sp-feat__num {
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  display: grid;
  place-items: center;
  background: var(--sp-band-2);
  color: var(--sp-blue);
  font-family: var(--sp-mono);
  font-size: .72rem;
  font-weight: 500;
  transition: background .25s ease, color .25s ease;
}

body.mc-prd-rich .sp-feat__name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--sp-display);
  font-size: var(--sp-fs-sm);
  font-weight: 700;
  line-height: 1.3;
}

body.mc-prd-rich .sp-feat__chev {
  flex: 0 0 auto;
  color: var(--sp-muted);
  font-size: .8rem;
  transition: transform .28s ease, color .25s ease;
}

body.mc-prd-rich .sp-feat.is-open .sp-feat__num {
  background: var(--sp-green);
  color: #fff;
}

body.mc-prd-rich .sp-feat.is-open .sp-feat__chev {
  transform: rotate(180deg);
  color: var(--sp-green-dark);
}

body.mc-prd-rich .sp-feat__panel {
  padding: 0 14px 15px;
  border-top: 1px solid var(--sp-line);
  padding-top: 13px;
}

body.mc-prd-rich .sp-feat__panel p {
  margin: 0;
  font-size: var(--sp-fs-sm);
  line-height: 1.68;
  color: var(--sp-body);
}

/* JS collapses; without JS every panel stays visible */
body.mc-prd-rich .sp-feat[hidden-panel] .sp-feat__panel { display: none; }


/* ==========================================================================
   10. HOW IT WORKS
   ========================================================================== */

body.mc-prd-rich .sp-works {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

body.mc-prd-rich .sp-work {
  position: relative;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  padding: 15px 14px;
  min-width: 0;
  box-shadow: var(--sp-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

body.mc-prd-rich .sp-work__n {
  font-family: var(--sp-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--sp-green-dark);
  display: block;
  margin-bottom: 7px;
}

body.mc-prd-rich .sp-work h3 {
  font-family: var(--sp-display);
  font-size: var(--sp-fs-h3);
  font-weight: 700;
  color: var(--sp-ink);
  margin: 0 0 6px;
  line-height: 1.32;
}

body.mc-prd-rich .sp-work p {
  margin: 0;
  font-size: var(--sp-fs-sm);
  line-height: 1.68;
  color: var(--sp-body);
}


/* ==========================================================================
   11. PROCESS TIMELINE + DIAGRAM
   ========================================================================== */

body.mc-prd-rich .sp-figure {
  margin: 22px 0 26px;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 10px;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-figure__scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: 9px;
}

body.mc-prd-rich .sp-figure img {
  display: block;
  width: 100%;
  border-radius: 9px;
}

/* the wide infographic stays legible on phones by scrolling inside its own
   box — the page itself never scrolls sideways */
body.mc-prd-rich .sp-figure__scroll img { min-width: 700px; }

body.mc-prd-rich .sp-figure figcaption {
  font-family: var(--sp-mono);
  font-size: .76rem;
  letter-spacing: .06em;
  color: var(--sp-muted);
  text-align: center;
  padding: 11px 6px 4px;
  line-height: 1.6;
}

body.mc-prd-rich .sp-timeline {
  position: relative;
  list-style: none;
  margin: 0;
  padding: 0 0 0 44px;
}

/* the rail + the green fill that tracks scroll */
body.mc-prd-rich .sp-timeline__rail {
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  background: var(--sp-line);
  border-radius: 2px;
}

body.mc-prd-rich .sp-timeline__fill {
  position: absolute;
  left: 15px;
  top: 6px;
  bottom: 6px;
  width: 2px;
  border-radius: 2px;
  background: linear-gradient(180deg, var(--sp-green), var(--sp-blue));
  transform: scaleY(0);
  transform-origin: 50% 0;
  will-change: transform;
}

body.mc-prd-rich .sp-step {
  position: relative;
  min-width: 0;
  padding-bottom: 20px;
}

body.mc-prd-rich .sp-step:last-child { padding-bottom: 0; }

body.mc-prd-rich .sp-step__dot {
  position: absolute;
  left: -44px;
  top: 2px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--sp-line-2);
  display: grid;
  place-items: center;
  font-family: var(--sp-mono);
  font-size: .72rem;
  font-weight: 500;
  color: var(--sp-navy);
  transition: border-color .35s ease, background .35s ease, color .35s ease;
}

body.mc-prd-rich .sp-step.is-reached .sp-step__dot {
  border-color: var(--sp-green);
  background: var(--sp-green);
  color: #fff;
}

body.mc-prd-rich .sp-step__card {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  padding: 14px;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-step h3 {
  font-family: var(--sp-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--sp-ink);
  margin: 0 0 5px;
  line-height: 1.3;
}

body.mc-prd-rich .sp-step p {
  margin: 0;
  font-size: .93rem;
  line-height: 1.65;
  color: var(--sp-body);
}


/* ==========================================================================
   12. SPEC DASHBOARD
   Phones: all 5 groups stacked, nothing hidden.
   Desktop: tab strip, one group at a time.
   ========================================================================== */

body.mc-prd-rich .sp-spec { margin-top: 22px; }

body.mc-prd-rich .sp-spec__tabs { display: none; }

body.mc-prd-rich .sp-spec__group + .sp-spec__group { margin-top: 22px; }

body.mc-prd-rich .sp-spec__grouphead {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 11px;
}

body.mc-prd-rich .sp-spec__grouphead::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--sp-green);
  flex: 0 0 auto;
}

body.mc-prd-rich .sp-spec__rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin: 0;
}

body.mc-prd-rich .sp-spec__row {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  overflow: hidden;
  min-width: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-spec__row dt {
  padding: 9px 13px;
  background: var(--sp-band);
  border-bottom: 1px solid var(--sp-line);
  color: var(--sp-navy);
  font-family: var(--sp-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.5;
}

body.mc-prd-rich .sp-spec__row dd {
  margin: 0;
  padding: 10px 13px;
  font-family: var(--sp-display);
  font-size: var(--sp-fs-h3);
  font-weight: 700;
  line-height: 1.5;
  color: var(--sp-ink);
}


/* ==========================================================================
   13. DATA TABLES — materials (9x4) + comparison (8x3)
   Phones: each row becomes a labelled card. Desktop: a real table.
   ========================================================================== */

body.mc-prd-rich .sp-tablewrap { margin-top: 22px; }

body.mc-prd-rich .sp-table,
body.mc-prd-rich .sp-table thead,
body.mc-prd-rich .sp-table tbody,
body.mc-prd-rich .sp-table tr,
body.mc-prd-rich .sp-table th,
body.mc-prd-rich .sp-table td {
  display: block;
  width: 100%;
}

body.mc-prd-rich .sp-table {
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

body.mc-prd-rich .sp-table thead {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

body.mc-prd-rich .sp-table tbody tr {
  margin-bottom: 10px;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-table tbody tr:last-child { margin-bottom: 0; }

body.mc-prd-rich .sp-table tbody th {
  padding: 10px 13px;
  background: var(--sp-navy);
  color: #fff;
  text-align: left;
  font-family: var(--sp-display);
  font-size: var(--sp-fs-h3);
  font-weight: 700;
  border-bottom: none;
}

body.mc-prd-rich .sp-table tbody td {
  padding: 9px 13px;
  border-bottom: 1px solid var(--sp-line);
  font-size: var(--sp-fs-sm);
  line-height: 1.62;
  color: var(--sp-body);
  text-align: left;
}

/* Card layout only. This belongs to the stacked mobile card, where the last
   cell must not draw a rule inside the rounded corner. Unscoped it also hit the
   real table from 900px up, which stripped the row separators from the final
   column — "Typical Applications" then read as one continuous block with no
   grid. Bounded to the card layout, the desktop table keeps all four columns
   ruled on both axes. */
@media (max-width: 899px) {
  body.mc-prd-rich .sp-table tbody tr td:last-child { border-bottom: none; }
}

body.mc-prd-rich .sp-table td[data-label]::before {
  content: attr(data-label);
  display: block;
  font-family: var(--sp-mono);
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--sp-blue);
  margin-bottom: 4px;
}

/* comparison: the shaftless column is the highlighted one */
body.mc-prd-rich .sp-table--cmp td.sp-yes {
  background: var(--sp-green-tint);
  color: var(--sp-ink);
  font-weight: 500;
}

body.mc-prd-rich .sp-table--cmp td.sp-yes::before { color: var(--sp-green-dark); }

body.mc-prd-rich .sp-table--cmp td.sp-yes .sp-mark { color: var(--sp-green-dark); }

body.mc-prd-rich .sp-table--cmp td.sp-no { color: var(--sp-muted); }

body.mc-prd-rich .sp-table--cmp td.sp-no .sp-mark { color: var(--sp-muted); }

body.mc-prd-rich .sp-mark {
  margin-right: 7px;
  font-size: .85em;
}


/* ==========================================================================
   14. INDUSTRIES
   ========================================================================== */

body.mc-prd-rich .sp-industries {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

body.mc-prd-rich .sp-industry {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  padding: 13px 9px;
  min-width: 0;
  box-shadow: var(--sp-shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

body.mc-prd-rich .sp-industry i {
  font-size: 1.2rem;
  color: var(--sp-blue);
}

body.mc-prd-rich .sp-industry span {
  font-size: var(--sp-fs-sm);
  font-weight: 600;
  color: var(--sp-ink);
  line-height: 1.35;
}


/* ==========================================================================
   15. APPLICATIONS
   ========================================================================== */

body.mc-prd-rich .sp-apps { margin-top: 16px; }

body.mc-prd-rich .sp-apps__tabs { display: none; }

body.mc-prd-rich .sp-apps__panels {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
}

body.mc-prd-rich .sp-app {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  padding: 15px 14px;
  min-width: 0;
  box-shadow: var(--sp-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

body.mc-prd-rich .sp-app__icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sp-navy);
  color: #fff;
  font-size: 1.02rem;
  margin-bottom: 10px;
}

body.mc-prd-rich .sp-app h3 {
  font-family: var(--sp-display);
  font-size: var(--sp-fs-h3);
  font-weight: 700;
  color: var(--sp-ink);
  margin: 0 0 7px;
}

body.mc-prd-rich .sp-app p {
  margin: 0;
  font-size: var(--sp-fs-sm);
  line-height: 1.68;
  color: var(--sp-body);
}


/* ==========================================================================
   16. SUPPORT + WHY CHOOSE
   ========================================================================== */

body.mc-prd-rich .sp-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 16px;
  list-style: none;
  padding: 0;
}

body.mc-prd-rich .sp-card {
  position: relative;
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  padding: 15px 14px;
  min-width: 0;
  box-shadow: var(--sp-shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

body.mc-prd-rich .sp-card__icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: var(--sp-band-2);
  color: var(--sp-blue);
  font-size: 1rem;
  margin-bottom: 12px;
}

body.mc-prd-rich .sp-card h3 {
  font-family: var(--sp-display);
  font-size: var(--sp-fs-h3);
  font-weight: 700;
  color: var(--sp-ink);
  margin: 0 0 6px;
}

body.mc-prd-rich .sp-card p {
  margin: 0;
  font-size: var(--sp-fs-sm);
  line-height: 1.68;
  color: var(--sp-body);
}

/* Why-choose cards carry a green accent bar */
body.mc-prd-rich .sp-card--why { padding-left: 18px; }

body.mc-prd-rich .sp-card--why::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  bottom: 14px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--sp-green);
}


/* ==========================================================================
   17. GALLERY
   ========================================================================== */

body.mc-prd-rich .sp-gallery {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 22px;
}

body.mc-prd-rich .sp-shot {
  position: relative;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--sp-line);
  background: #fff;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-shot img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16, 1, .3, 1);
}

body.mc-prd-rich .sp-shot figcaption {
  padding: 11px 13px;
  border-top: 1px solid var(--sp-line);
  background: #fff;
}


/* ==========================================================================
   18. FAQ
   ========================================================================== */

body.mc-prd-rich .sp-faq {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}

body.mc-prd-rich .sp-faq details {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-faq summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 58px;
  padding: 14px 15px;
  cursor: pointer;
  list-style: none;
  font-family: var(--sp-display);
  font-size: var(--sp-fs-h3);
  font-weight: 700;
  color: var(--sp-ink);
  line-height: 1.4;
}

body.mc-prd-rich .sp-faq summary::-webkit-details-marker { display: none; }

body.mc-prd-rich .sp-faq summary::after {
  content: "";
  flex: 0 0 auto;
  margin-left: auto;
  width: 11px;
  height: 11px;
  border-right: 2px solid var(--sp-muted);
  border-bottom: 2px solid var(--sp-muted);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .28s ease, border-color .25s ease;
}

body.mc-prd-rich .sp-faq details[open] summary::after {
  transform: rotate(-135deg) translate(-3px, -3px);
  border-color: var(--sp-green-dark);
}

body.mc-prd-rich .sp-faq details[open] summary {
  background: var(--sp-band);
  border-bottom: 1px solid var(--sp-line);
  box-shadow: inset 3px 0 0 var(--sp-green);
}

body.mc-prd-rich .sp-faq__a {
  margin: 0;
  padding: 14px 15px;
  font-size: var(--sp-fs-sm);
  line-height: 1.72;
  color: var(--sp-body);
}


/* ==========================================================================
   19. QUOTE CONFIGURATOR
   ========================================================================== */

body.mc-prd-rich .sp-quote {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-top: 22px;
}

body.mc-prd-rich .sp-quote__panel {
  background: #fff;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  padding: 18px 15px;
  min-width: 0;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-quote__panel--config { background: var(--sp-band); }

body.mc-prd-rich .sp-step-label {
  color: var(--sp-green-dark);
  margin-bottom: 16px;
}

/* sliders — enhancement only; without JS these stay plain number inputs */
body.mc-prd-rich .sp-slider { margin-bottom: 20px; }

body.mc-prd-rich .sp-slider__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 9px;
}

body.mc-prd-rich .sp-slider__val {
  font-family: var(--sp-display);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--sp-ink);
}

body.mc-prd-rich .sp-slider__val span { color: var(--sp-blue); }

body.mc-prd-rich .sp-slider input[type="range"] {
  width: 100%;
  height: 34px;
  background: transparent;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
}

body.mc-prd-rich .sp-slider input[type="range"]::-webkit-slider-runnable-track {
  height: 5px;
  border-radius: 3px;
  background: var(--sp-line-2);
}

body.mc-prd-rich .sp-slider input[type="range"]::-moz-range-track {
  height: 5px;
  border-radius: 3px;
  background: var(--sp-line-2);
}

body.mc-prd-rich .sp-slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 24px;
  height: 24px;
  margin-top: -9.5px;
  border-radius: 50%;
  background: var(--sp-green);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(3, 48, 81, .28);
}

body.mc-prd-rich .sp-slider input[type="range"]::-moz-range-thumb {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--sp-green);
  border: 3px solid #fff;
  box-shadow: 0 2px 8px rgba(3, 48, 81, .28);
}

body.mc-prd-rich .sp-slider__scale {
  display: flex;
  justify-content: space-between;
  font-family: var(--sp-mono);
  font-size: .6875rem;
  color: var(--sp-muted);
}

body.mc-prd-rich .sp-chipset {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin: 10px 0 20px;
}

body.mc-prd-rich .sp-chipbtn {
  padding: 9px 12px;
  min-height: 40px;
  border: 1px solid var(--sp-line-2);
  border-radius: 6px;
  background: #fff;
  color: var(--sp-body);
  font-family: var(--sp-mono);
  font-size: .6875rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}

body.mc-prd-rich .sp-chipbtn.is-active {
  border-color: var(--sp-green);
  background: var(--sp-green-tint);
  color: var(--sp-ink);
  font-weight: 500;
}

body.mc-prd-rich .sp-summary {
  border: 1px dashed var(--sp-line-2);
  border-radius: 10px;
  background: var(--sp-band);
  padding: 12px 13px;
  margin-top: 16px;
}

body.mc-prd-rich .sp-summary p {
  margin: 7px 0 0;
  font-family: var(--sp-mono);
  font-size: .78rem;
  line-height: 1.7;
  color: var(--sp-navy);
}

body.mc-prd-rich .sp-form__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 13px;
}

body.mc-prd-rich .sp-field { min-width: 0; }

body.mc-prd-rich .sp-field--full { grid-column: 1 / -1; }

body.mc-prd-rich .sp-field label {
  display: block;
  font-family: var(--sp-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--sp-navy);
  margin-bottom: 6px;
}

/* 16px minimum stops iOS Safari zooming the page on focus */
body.mc-prd-rich .sp-field input,
body.mc-prd-rich .sp-field textarea {
  width: 100%;
  min-height: 50px;
  padding: 13px 12px;
  border: 1px solid var(--sp-line-2);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 16px;
  color: var(--sp-ink);
  box-sizing: border-box;
}

body.mc-prd-rich .sp-field textarea {
  min-height: 120px;
  resize: vertical;
  line-height: 1.6;
}

body.mc-prd-rich .sp-field input:focus,
body.mc-prd-rich .sp-field textarea:focus {
  outline: none;
  border-color: var(--sp-blue);
  box-shadow: 0 0 0 3px rgba(11, 127, 171, .13);
}

body.mc-prd-rich .sp-req { color: #c0392b; }

body.mc-prd-rich .sp-form__actions {
  margin-top: 17px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

body.mc-prd-rich .sp-assurance {
  display: grid;
  gap: 9px;
  margin-top: 17px;
  padding-top: 15px;
  border-top: 1px solid var(--sp-line);
  list-style: none;
}

body.mc-prd-rich .sp-assurance li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: var(--sp-mono);
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--sp-muted);
}

body.mc-prd-rich .sp-assurance i { color: var(--sp-green-dark); }


/* ==========================================================================
   20. FINAL NAVY CTA BAND — the single dark surface, sitting directly above
   the already-navy footer so it reads as a close, not a theme break.
   ========================================================================== */

body.mc-prd-rich .sp-cta-band {
  background: linear-gradient(135deg, var(--sp-navy) 0%, var(--sp-navy-3) 100%);
  color: #fff;
  padding: 44px 0;
}

body.mc-prd-rich .sp-cta-band .sp-h2 { color: #fff; }

body.mc-prd-rich .sp-cta-band .sp-h2 em { color: #7fe3a6; }

body.mc-prd-rich .sp-cta-band .sp-lead { color: rgba(255, 255, 255, .88); }

body.mc-prd-rich .sp-cta-band .sp-label { color: rgba(255, 255, 255, .66); }

body.mc-prd-rich .sp-cta-band .sp-eyebrow::before { background: var(--sp-green); }


/* ==========================================================================
   21. REVEAL ANIMATIONS
   `.sp-reveal` is only added by JS, so content is never invisible without it.
   ========================================================================== */

body.mc-prd-rich .sp-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s cubic-bezier(.16, 1, .3, 1), transform .7s cubic-bezier(.16, 1, .3, 1);
}

body.mc-prd-rich .sp-reveal.is-in {
  opacity: 1;
  transform: none;
}


/* ==========================================================================
   22. TABLET / DESKTOP
   ========================================================================== */

@media (min-width: 560px) {

  body.mc-prd-rich .sp-ctas {
    flex-direction: row;
    flex-wrap: wrap;
  }

  body.mc-prd-rich .sp-btn { width: auto; }

  body.mc-prd-rich .sp-highlights {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
  }

  body.mc-prd-rich .sp-industries { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  body.mc-prd-rich .sp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body.mc-prd-rich .sp-form__actions { flex-direction: row; }
}

@media (min-width: 768px) {

  body.mc-prd-rich .sp-section { padding: 44px 0; }

  body.mc-prd-rich .sp-wrap { padding: 0 24px; }
  
  
  

  body.mc-prd-rich .sp-works,
  body.mc-prd-rich .sp-apps__panels,
  body.mc-prd-rich .sp-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.mc-prd-rich .sp-spec__rows { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body.mc-prd-rich .sp-form__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  body.mc-prd-rich .sp-figure__scroll img { min-width: 0; }

  body.mc-prd-rich .sp-timeline { padding-left: 56px; }

  body.mc-prd-rich .sp-timeline__rail,
  body.mc-prd-rich .sp-timeline__fill { left: 19px; }

  body.mc-prd-rich .sp-step__dot {
    left: -56px;
    width: 40px;
    height: 40px;
    font-size: .78rem;
  }

  body.mc-prd-rich .sp-step__card { padding: 17px 18px; }
}

/* ---- data tables become real tables ---- */
@media (min-width: 900px) {

  body.mc-prd-rich .sp-table { display: table; border-collapse: collapse; width: 100%; background: #fff; }
  body.mc-prd-rich .sp-table thead { display: table-header-group; position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  body.mc-prd-rich .sp-table tbody { display: table-row-group; }

  body.mc-prd-rich .sp-table tr,
  body.mc-prd-rich .sp-table tbody tr {
    display: table-row;
    width: auto;
    margin: 0;
    border: 0;
    border-radius: 0;
    overflow: visible;
    box-shadow: none;
  }

  /* Every cell carried a bottom border only, so the four columns had no
     vertical separation and the last one ("Typical Applications") read as if
     it were outside the table. Columns are ruled on both axes now. */
  body.mc-prd-rich .sp-table tbody td,
  body.mc-prd-rich .sp-table tbody th + td { border-left: 1px solid var(--sp-line); }

  body.mc-prd-rich .sp-table thead th + th { border-left: 1px solid rgba(255, 255, 255, .18); }

  body.mc-prd-rich .sp-table thead th {
    display: table-cell;
    width: auto;
    padding: 13px 15px;
    background: var(--sp-navy);
    color: #fff;
    text-align: left;
    font-family: var(--sp-mono);
    font-size: .6875rem;
    font-weight: 500;
    letter-spacing: .13em;
    text-transform: uppercase;
    border: 0;
  }

  body.mc-prd-rich .sp-table tbody th {
    display: table-cell;
    width: 15%;
    padding: 13px 15px;
    background: var(--sp-band);
    color: var(--sp-ink);
    font-family: var(--sp-display);
    font-size: var(--sp-fs-h3);
    font-weight: 700;
    border-bottom: 1px solid var(--sp-line);
    vertical-align: top;
  }

  body.mc-prd-rich .sp-table tbody td {
    display: table-cell;
    width: auto;
    padding: 13px 15px;
    border-bottom: 1px solid var(--sp-line);
    vertical-align: top;
    font-size: var(--sp-fs-sm);
  }

  body.mc-prd-rich .sp-table td[data-label]::before { display: none; }

  body.mc-prd-rich .sp-table tbody tr:nth-child(even) td { background: var(--sp-zebra); }
  body.mc-prd-rich .sp-table--cmp tbody tr:nth-child(even) td.sp-yes { background: #eaf8f0; }

  /* the outer frame */
  body.mc-prd-rich .sp-tablewrap {
    border: 1px solid var(--sp-line);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--sp-shadow);
  }
}

@media (min-width: 1000px) {

  body.mc-prd-rich .sp-section { padding: 56px 0; }
  

  /* ---- desktop composition -------------------------------------------
     These rules used to sit inside an unterminated comment, so none of them
     reached the browser: the highlight, industry, support and gallery blocks
     all stayed at their narrow tablet column counts on a 1440px screen and
     left the right-hand third of each section empty. Column counts are chosen
     so no row is left with a hole in it. */

  /* 9 highlight chips and 9 industry chips: five to a row divides them
     5 + 4, so the short row is centred rather than parked on the left with a
     gap on the right. Fixed basis, so both rows keep the same card width. */
  body.mc-prd-rich .sp-highlights,
  body.mc-prd-rich .sp-industries {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
  }

  body.mc-prd-rich .sp-hcard,
  body.mc-prd-rich .sp-industry {
    flex: 0 0 calc((100% - 4 * 12px) / 5);
  }

  /* 8 "how it works" cards -> 4 x 2 */
  body.mc-prd-rich .sp-works { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* .sp-cards is shared by two sections with different card counts, so each
     gets the column count that divides it exactly:
       #support  6 cards -> 3 x 2      #why  8 cards -> 4 x 2 */
  body.mc-prd-rich #support .sp-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  body.mc-prd-rich #why .sp-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); }

  /* ---- features: list + detail panel ---- */
  body.mc-prd-rich .sp-features {
    display: grid;
    grid-template-columns: minmax(0, 22rem) minmax(0, 1fr);
    gap: 22px;
    align-items: start;
  }

  body.mc-prd-rich .sp-feat-list {
    gap: 0;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--sp-shadow);
    max-height: 620px;
    overflow-y: auto;
  }

  body.mc-prd-rich .sp-feat {
    border: 0;
    border-bottom: 1px solid var(--sp-line);
    border-radius: 0;
    box-shadow: none;
  }

  body.mc-prd-rich .sp-feat:last-child { border-bottom: 0; }

  body.mc-prd-rich .sp-feat__btn { min-height: 54px; }

  body.mc-prd-rich .sp-feat__btn:hover { background: var(--sp-band); }

  body.mc-prd-rich .sp-feat.is-open .sp-feat__btn {
    background: var(--sp-band);
    box-shadow: inset 3px 0 0 var(--sp-green);
  }

  body.mc-prd-rich .sp-feat__chev { display: none; }

  /* on desktop the copy moves into the detail panel */
  body.mc-prd-rich .sp-feat__panel { display: none !important; }

  body.mc-prd-rich .sp-feat-media {
    display: block;
    position: sticky;
    top: calc(var(--sp-stickytop) + var(--sp-navh) + 20px);
  }

  body.mc-prd-rich .sp-feat-media__img {
    margin-top: 12px;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    overflow: hidden;
    background: linear-gradient(160deg, #fff 0%, #f2f6fa 100%);
    padding: 14px;
    box-shadow: var(--sp-shadow);
  }

  body.mc-prd-rich .sp-feat-media__img img {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    object-fit: contain;
  }

  body.mc-prd-rich .sp-feat-detail {
    margin-top: 0;
    border: 1px solid var(--sp-line);
    border-left: 3px solid var(--sp-green);
    border-radius: 12px;
    background: #fff;
    padding: 18px 20px;
    box-shadow: var(--sp-shadow-lg);
  }

  body.mc-prd-rich .sp-feat-detail h3 {
    font-family: var(--sp-display);
    font-size: 1.2rem;
    font-weight: 800;
    color: var(--sp-ink);
    margin: 11px 0 9px;
  }

  body.mc-prd-rich .sp-feat-detail p {
    margin: 0;
    font-size: var(--sp-fs-body);
    line-height: var(--sp-lh-body);
    color: var(--sp-body);
  }

  /* ---- spec dashboard: tabs ---- */
  body.mc-prd-rich .sp-spec__tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    border-bottom: 1px solid var(--sp-line);
    margin-bottom: 22px;
  }

  body.mc-prd-rich .sp-spec__tab {
    position: relative;
    padding: 13px 17px;
    border: 0;
    background: transparent;
    color: var(--sp-muted);
    font-family: var(--sp-mono);
    font-size: .6875rem;
    letter-spacing: .13em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color .2s ease;
  }

  body.mc-prd-rich .sp-spec__tab::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 2px;
    background: var(--sp-green);
    transform: scaleX(0);
    transition: transform .28s cubic-bezier(.16, 1, .3, 1);
  }

  body.mc-prd-rich .sp-spec__tab:hover { color: var(--sp-navy); }

  body.mc-prd-rich .sp-spec__tab.is-active { color: var(--sp-navy); font-weight: 500; }

  body.mc-prd-rich .sp-spec__tab.is-active::after { transform: scaleX(1); }

  body.mc-prd-rich .sp-spec__group + .sp-spec__group { margin-top: 0; }

  body.mc-prd-rich .sp-spec__grouphead { display: none; }

  body.mc-prd-rich .sp-spec__rows { grid-template-columns: repeat(3, minmax(0, 1fr)); }

  /* ---- applications: tab list + detail ---- */
  body.mc-prd-rich .sp-apps {
    display: grid;
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    gap: 22px;
    align-items: stretch;
  }

  body.mc-prd-rich .sp-apps__tabs {
    display: grid;
    list-style: none;
    margin: 0;
    padding: 0;
    border: 1px solid var(--sp-line);
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    box-shadow: var(--sp-shadow);
  }

  body.mc-prd-rich .sp-apps__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    width: 100%;
    min-height: 52px;
    padding: 13px 15px;
    border: 0;
    border-bottom: 1px solid var(--sp-line);
    background: #fff;
    color: var(--sp-ink);
    font-family: var(--sp-display);
    font-size: var(--sp-fs-sm);
    font-weight: 700;
    text-align: left;
    cursor: pointer;
    transition: background .2s ease, box-shadow .2s ease;
  }

  body.mc-prd-rich .sp-apps__tabs li:last-child .sp-apps__tab { border-bottom: 0; }

  body.mc-prd-rich .sp-apps__tab:hover { background: var(--sp-band); }

  body.mc-prd-rich .sp-apps__tab.is-active {
    background: var(--sp-band);
    box-shadow: inset 3px 0 0 var(--sp-green);
  }

  body.mc-prd-rich .sp-apps__tab::after {
    content: "";
    width: 16px;
    height: 2px;
    background: var(--sp-line-2);
    flex: 0 0 auto;
    transition: width .28s ease, background .28s ease;
  }

  body.mc-prd-rich .sp-apps__tab.is-active::after {
    width: 30px;
    background: var(--sp-green);
  }

  body.mc-prd-rich .sp-apps__panels { grid-template-columns: minmax(0, 1fr); }

  body.mc-prd-rich .sp-app {
    padding: 30px;
    min-height: 0;
  }

  body.mc-prd-rich .sp-app h3 { font-size: 1.2rem; }

  body.mc-prd-rich .sp-app p { font-size: var(--sp-fs-body); }

  /* The panel now matches the height of the nine-item tab column beside it,
     so the two sides of the section end level. One application is on screen
     at a time and its copy is a single sentence, so the copy is centred in
     that height and the surface carries the same soft gradient as the feature
     photo frame — otherwise the extra height reads as a blank box. */
  body.mc-prd-rich .sp-apps__panels { align-items: stretch; }

  /* :not([hidden]) matters. The tab script hides the eight inactive panels with
     the `hidden` attribute, and an author `display` declaration outranks the UA
     sheet's [hidden]{display:none} — declaring it unconditionally here put all
     nine applications on screen at once. */
  body.mc-prd-rich .sp-app:not([hidden]) {
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: linear-gradient(160deg, #fff 0%, #f7fafc 100%);
  }

  body.mc-prd-rich .sp-app[hidden] { display: none; }

  /* All 14 features fit, so the inner scrollbar that hid the last three is
     gone. The detail panel opposite is sticky, so it stays alongside. */
  body.mc-prd-rich .sp-feat-list {
    max-height: none;
    overflow-y: visible;
  }

  /* ---- quote: two panels ---- */
  body.mc-prd-rich .sp-quote {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: 0;
    border: 1px solid var(--sp-line);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: var(--sp-shadow);
  }

  body.mc-prd-rich .sp-quote__panel {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 34px;
  }

  body.mc-prd-rich .sp-quote__panel--config { border-right: 1px solid var(--sp-line); }

  /* ---- card hover lift ---- */
  body.mc-prd-rich .sp-hcard:hover,
  body.mc-prd-rich .sp-work:hover,
  body.mc-prd-rich .sp-industry:hover,
  body.mc-prd-rich .sp-card:hover {
    transform: translateY(-3px);
    border-color: #cfe0ec;
    box-shadow: 0 4px 8px rgba(3, 48, 81, .05), 0 18px 34px -20px rgba(3, 48, 81, .3);
  }

  body.mc-prd-rich .sp-shot:hover img { transform: scale(1.05); }
}

/* between 1000 and 1300 the links need the whole bar to themselves */
@media (min-width: 1000px) and (max-width: 1300px) {
  body.mc-prd-rich .sp-nav__title { display: none; }
}


/* ==========================================================================
   23. NARROW PHONES
   ========================================================================== */

@media (max-width: 380px) {

  body.mc-prd-rich .sp-wrap,
  body.mc-prd-rich .sp-nav__bar { padding-left: 14px; padding-right: 14px; }

  body.mc-prd-rich .sp-hero__media img { max-height: 200px; }

  body.mc-prd-rich .sp-hcard { padding: 14px 9px; }
  body.mc-prd-rich .sp-hcard h3 { font-size: .84rem; }
  body.mc-prd-rich .sp-hcard p { font-size: .78rem; }

  body.mc-prd-rich .sp-industry span { font-size: .8rem; }
}

@media (max-width: 340px) {

  body.mc-prd-rich .sp-highlights,
  body.mc-prd-rich .sp-industries {
    grid-template-columns: minmax(0, 1fr);
  }

  body.mc-prd-rich .sp-figure__scroll img { min-width: 560px; }
  
}


/* ==========================================================================
   23b. SAFE AREA FOR THE GLOBAL SOCIAL RAIL
   From 769px up, .social-media-bar is position:fixed at right:0, 64px wide and
   vertically centred, so it floats over whatever the content area puts there.
   Measured ink overlap without this rule: up to 40px of real text and imagery
   (timeline steps, gallery figures, feature list, comparison cells, headings).

   Below 769px product-mobile.css turns the same bar into a bottom action bar and
   already reserves 66px of body padding, so only the rail case is handled here.
   Above 1335px the centred 1240px wrap clears the rail on its own, so the gutter
   is dropped and the page goes back to symmetric padding.

   This block sits last on purpose: `.sp-wrap` gets a `padding` shorthand in the
   desktop section above, which would otherwise reset the right side back to 24px.
   ========================================================================== */

@media (min-width: 769px) and (max-width: 1335px) {
  body.mc-prd-rich .sp-wrap { padding-right: 88px; }

  /* the marquee is decorative and full-bleed, so it keeps the whole width */
  body.mc-prd-rich .sp-marquee .sp-wrap { padding-right: 24px; }
}


/* ==========================================================================
   24. REDUCED MOTION / TOUCH / PRINT
   ========================================================================== */

/* ==========================================================================
   25. STACKED MODEL METRIC  (hero stat strip, 4th cell)
   "Smart Print 250" ran as one line and wrapped unpredictably, and the cell
   had no unit line, so its MACHINE MODEL label sat higher than the other
   three. Stacking the name over the numeral fixes both: the numeral occupies
   the unit row, so all four labels align, and the model reads deliberately.
   ========================================================================== */

body.mc-prd-rich .sp-metric__mname,
body.mc-prd-rich .sp-metric__mnum {
  display: block;
}

body.mc-prd-rich .sp-metric__val--text {
  line-height: 1.14;
}

body.mc-prd-rich .sp-metric__mnum {
  color: var(--sp-blue);
}


/* ==========================================================================
   26. MACHINE GALLERY — carousel
   CSS scroll-snap does the work, so the strip is swipeable on touch and
   scrollable by keyboard with no script at all. product-detail.js only adds
   the arrows and dots, which is why they stay hidden until it marks the
   component ready.
   ========================================================================== */

body.mc-prd-rich .sp-gal {
  position: relative;
  margin-top: 16px;
}

body.mc-prd-rich .sp-gal__track {
  display: flex;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}

body.mc-prd-rich .sp-gal__track::-webkit-scrollbar { display: none; }

body.mc-prd-rich .sp-gal__track:focus-visible {
  outline: 2px solid var(--sp-blue);
  outline-offset: 4px;
  border-radius: 14px;
}

body.mc-prd-rich .sp-gal__slide {
  flex: 0 0 100%;
  min-width: 0;
  scroll-snap-align: center;
}

/* `contain`, not `cover`: these are whole machines on a light ground, and
   cropping a press in half to fill a box is exactly what made the old grid
   look like stock photography. Nothing is stretched — the ratio is fixed and
   the image is fitted inside it. */
body.mc-prd-rich .sp-gal .sp-shot img {
  aspect-ratio: 16 / 10;
  object-fit: contain;
  background: linear-gradient(160deg, #fff 0%, #f2f6fa 100%);
  padding: 10px;
}

body.mc-prd-rich .sp-gal__arrow {
  position: absolute;
  top: calc(50% - 22px);
  z-index: 2;
  display: none;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--sp-line-2);
  border-radius: 50%;
  background: rgba(255, 255, 255, .94);
  color: var(--sp-navy);
  font-size: .95rem;
  cursor: pointer;
  box-shadow: var(--sp-shadow);
  transition: background .2s ease, color .2s ease, opacity .2s ease;
}

body.mc-prd-rich .sp-gal.is-ready .sp-gal__arrow { display: grid; }

body.mc-prd-rich .sp-gal__arrow--prev { left: 10px; }
body.mc-prd-rich .sp-gal__arrow--next { right: 10px; }

body.mc-prd-rich .sp-gal__arrow:hover {
  background: var(--sp-navy);
  color: #fff;
}

body.mc-prd-rich .sp-gal__arrow[disabled] {
  opacity: .3;
  cursor: default;
}

body.mc-prd-rich .sp-gal__dots {
  display: flex;
  justify-content: center;
  gap: 7px;
  margin-top: 12px;
}

body.mc-prd-rich .sp-gal__dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: 99px;
  background: var(--sp-line-2);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}

body.mc-prd-rich .sp-gal__dot.is-active {
  width: 22px;
  background: var(--sp-blue);
}

@media (min-width: 760px) {
  /* two at a time once there is room, so the strip reads as a gallery rather
     than a single hero image, and the third slide is visibly reachable */
  body.mc-prd-rich .sp-gal__slide { flex-basis: calc((100% - 12px) / 2); }
  body.mc-prd-rich .sp-gal__slide { scroll-snap-align: start; }
}

@media (min-width: 1000px) {
  body.mc-prd-rich .sp-gal .sp-shot img { aspect-ratio: 16 / 11; }
  body.mc-prd-rich .sp-gal__arrow--prev { left: -6px; }
  body.mc-prd-rich .sp-gal__arrow--next { right: -6px; }
}


/* ==========================================================================
   27. GLOBAL PRESENCE

   Desktop layout is an intro block (eyebrow + heading + copy) on the left, the
   three approved figures as a full-height hairline rail on the right, and the
   map spanning the whole content width beneath. The figures reuse the hero
   stat-strip treatment (white cells, 1px seams, short green tick) so the
   section reads as part of the same instrument panel rather than a new idiom.

   Two structural points, because the earlier version left two large blank
   areas and both were caused by the grid rather than by padding:

   1. The heading used to sit OUTSIDE this grid, as a direct child of .sp-wrap.
      That put the rail's first cell below the heading's bottom edge, so the
      area to the right of the (balance-wrapped, therefore short) heading lines
      had nothing in it at all. The heading is now a grid item -- .sp-gp__head
      -- and the rail spans the head and copy rows, so it starts level with the
      eyebrow and that area is the stats panel.

   2. The rail's natural height (three cells, 250px) was greater than the
      single copy paragraph (109px at 1440px). With align-items: start that
      sized row 1 to the rail and left the difference -- a measured 163px --
      empty between the paragraph and the map, which is also why the map always
      began 489px into the section. The rail now stretches to the height the
      left column sets and shares it between the three cells (grid-auto-rows:
      1fr), so the taller column is the one with the words in it and the void
      cannot re-appear. Because the rail spans two tracks, grid still
      distributes its min-content across them, so it can never be clipped
      either -- no min-height guard is needed.
   ========================================================================== */

body.mc-prd-rich .sp-gp {
  display: grid;
  gap: 16px;
  /* no top margin: .sp-gp__head is the first thing in the grid, and the
     section's own padding already sets the space above it */
  margin-top: 0;
}

/* the grid gap owns the space under the heading, so the h2 gives up its own */
body.mc-prd-rich .sp-gp__head { min-width: 0; }
body.mc-prd-rich .sp-gp__head .sp-h2 { margin-bottom: 0; }

body.mc-prd-rich .sp-gp__copy { margin: 0; }

body.mc-prd-rich .sp-gp__stats {
  display: grid;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--sp-line);
  border: 1px solid var(--sp-line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--sp-shadow);
}

body.mc-prd-rich .sp-gp__stat {
  position: relative;
  background: #fff;
  padding: 14px 15px 13px;
  min-width: 0;
  /* the rail takes its height from the copy column on desktop, so the cells
     get whatever is left over -- centring keeps them looking deliberate at
     any height instead of top-heavy */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body.mc-prd-rich .sp-gp__stat::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 26px;
  height: 2px;
  background: var(--sp-green);
}

body.mc-prd-rich .sp-gp__num {
  display: block;
  font-family: var(--sp-display);
  font-size: clamp(1.5rem, 5.6vw, 2rem);
  font-weight: 800;
  line-height: 1.05;
  letter-spacing: -.025em;
  color: var(--sp-navy);
}

body.mc-prd-rich .sp-gp__unit {
  margin-top: 5px;
  color: var(--sp-muted);
}

/* ---- the map ---- */
body.mc-prd-rich .sp-gp__map {
  margin: 0;
  padding: 14px 14px 0;
  border: 1px solid var(--sp-line);
  border-radius: 14px;
  background: linear-gradient(160deg, #fff 0%, #f4f8fb 100%);
  box-shadow: var(--sp-shadow);
  overflow: hidden;
}

/* width:100% + height:auto keeps the 1000x373 artwork in ratio at every
   breakpoint, so it scales instead of overflowing */
body.mc-prd-rich .sp-gp__map img {
  display: block;
  width: 100%;
  height: auto;
}

body.mc-prd-rich .sp-gp__map figcaption {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-top: 8px;
  padding: 8px 2px 10px;
  border-top: 1px solid var(--sp-line);
}

body.mc-prd-rich .sp-gp__key {
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sp-green);
  box-shadow: 0 0 0 3px rgba(37, 211, 102, .18);
}

@media (min-width: 560px) {
  /* the three figures fit side by side before the two-column split kicks in */
  body.mc-prd-rich .sp-gp__stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
  body.mc-prd-rich .sp-gp {
    grid-template-columns: minmax(0, 1fr) minmax(0, 20rem);
    grid-template-areas:
      "head stats"
      "copy stats"
      "map  map";
    column-gap: 40px;
    row-gap: 18px;
    align-items: start;
  }

  body.mc-prd-rich .sp-gp__head { grid-area: head; }
  body.mc-prd-rich .sp-gp__copy { grid-area: copy; max-width: none; }

  body.mc-prd-rich .sp-gp__stats {
    grid-area: stats;
    /* stretch across both intro rows: this is what puts the rail beside the
       heading and what stops it from being the row-defining element */
    align-self: stretch;
    /* a stack, not three across: a 20rem rail is too narrow for that */
    grid-template-columns: minmax(0, 1fr);
    grid-auto-rows: 1fr;
  }

  body.mc-prd-rich .sp-gp__map {
    grid-area: map;
    /* 18px row-gap + 6px = the map keeps a slightly wider separation than the
       rows inside the intro block, without needing per-row gaps */
    margin-top: 6px;
    padding: 12px 12px 0;
  }
}

@media (max-width: 600px) {
  /* the decorative rule costs 55px that the longer SCO labels need */
  body.mc-prd-rich .sp-shead__line { display: none; }
}


@media (prefers-reduced-motion: reduce) {

  body.mc-prd-rich .sp-gal__track { scroll-behavior: auto; }


  body.mc-prd-rich .sp-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  body.mc-prd-rich .sp-marquee__track,
  body.mc-prd-rich .sp-chip__dot { animation: none !important; }

  body.mc-prd-rich .sp-timeline__fill { transform: scaleY(1) !important; }

  body.mc-prd-rich .sp *,
  body.mc-prd-rich .sp *::before,
  body.mc-prd-rich .sp *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

@media (hover: none) {

  body.mc-prd-rich .sp-hcard:hover,
  body.mc-prd-rich .sp-work:hover,
  body.mc-prd-rich .sp-industry:hover,
  body.mc-prd-rich .sp-card:hover,
  body.mc-prd-rich .sp-app:hover {
    transform: none;
    box-shadow: var(--sp-shadow);
  }

  body.mc-prd-rich .sp-shot:hover img { transform: none; }
}

@media print {

  body.mc-prd-rich .sp-marquee { display: none; }

  body.mc-prd-rich .sp-reveal { opacity: 1; transform: none; }
  body.mc-prd-rich .sp-feat__panel { display: block !important; }
}