/* ==========================================================================
   Mixel IP  (/products/design/design-ip/mixel-ip/)

   Rebuilt from the MIPI page to the client's Mixel IP review (WF-01,
   2026-10-08). Shared pieces from product-family.css: .pf-cards (the six
   cards), .pf-res-card (resources), .pf-ptable (the product tables) and
   .pf-related. Page-local pieces:
     .mxl-banner__layout  hero copy beside the image placeholder (A)
     .mxl-media           neutral image placeholder, never a TCAD graphic
                          (DEP-01): A in the hero, B in the CTA
     .mxl-jump            the jump-link row, one link per table
     .mxl-cards__grid     six cards, two rows of three, equal height
     .mxl-uses            five use-case rows, each a short paragraph with
                          inline links to the tables
     .mxl-proof__row      three visibly distinct rows: track record (tinted
                          stats), available now as PRO IP (white foundry cards
                          with a brand rule), resources
     .mxl-cta             the "Ask about your process" band with image B
     .mxl-tables          seven tables; each scrolls sideways on phones

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100; neutral-2-000 is the conversion band.
     §1  banner      white            §5  CTA          neutral-2-000
         jump row    white            §6  FAQ          white
     §2  cards       neutral-2-100    §7  related      neutral-2-100
     §3  use cases   white            §8  tables       white
     §4  proof       neutral-2-100
   ========================================================================== */

/* Section anchors clear the sticky header */
#interface-ip,#applications,#proven-in-silicon,#products,.mxl-table{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   §1 Hero: copy and image side by side from 1024
   -------------------------------------------------------------------------- */
.mxl-banner__layout{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media (min-width:1024px){.mxl-banner__layout{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
.mxl-banner__line{margin:20px 0 0;color:var(--ps-color-secondary-5-500)}

/* The image placeholders: a plain tinted panel, no text, no graphic */
.mxl-media{
  width:100%;aspect-ratio:16 / 10;border-radius:20px;
  background:var(--ps-color-neutral-2-100);
  border:1px solid var(--ps-color-neutral-2-300);
}
.mxl-media--b{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   The jump-link row
   -------------------------------------------------------------------------- */
.mxl-jump{padding-block:0 32px}
.mxl-jump__list{
  grid-column-end:span var(--ps-grid-columns);
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:8px;
}
.mxl-jump__link{
  display:inline-flex;align-items:center;min-height:36px;padding:6px 14px;
  border:1px solid var(--ps-color-neutral-2-300);border-radius:999px;
  font:500 14px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);background:var(--sv-white);
  transition:border-color .2s ease-out,color .2s ease-out;
}
.mxl-jump__link:hover{border-color:var(--ps-color-brand-500);color:var(--ps-color-brand-500)}

/* --------------------------------------------------------------------------
   §2 Cards: two rows of three from 1024, two across from 640, equal height
   -------------------------------------------------------------------------- */
.mxl-cards{background:var(--ps-color-neutral-2-100)}
.mxl-cards .pf-card{background:var(--sv-white)}
@media (min-width:640px){.mxl-cards__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.mxl-cards__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --------------------------------------------------------------------------
   §3 Where Mixel IP is used: five rows, a name beside a paragraph
   -------------------------------------------------------------------------- */
.mxl-uses{padding-block:48px}
.mxl-uses__inner{grid-column-end:span var(--ps-grid-columns)}
.mxl-uses__title{margin:0 0 28px;color:var(--ps-color-neutral-3-500)}
.mxl-uses__list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ps-color-neutral-2-300)}
.mxl-use{
  display:grid;grid-template-columns:1fr;gap:8px;padding:20px 0;
  border-bottom:1px solid var(--ps-color-neutral-2-300);
}
@media (min-width:1024px){.mxl-use{grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px}}
.mxl-use__name{margin:0;color:var(--ps-color-neutral-3-500)}
.mxl-use__text{margin:0;max-width:75ch;font:400 16px/26px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
.mxl-use__text a{
  font-weight:500;color:var(--ps-color-brand-600);
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ps-color-neutral-2-500);
}
.mxl-use__text a:hover{color:var(--ps-color-brand-500);text-decoration-color:currentColor}

/* --------------------------------------------------------------------------
   §4 Proven in silicon: three rows that read as different things
   -------------------------------------------------------------------------- */
.mxl-proof{padding-block:48px;background:var(--ps-color-neutral-2-100)}
.mxl-proof__inner{grid-column-end:span var(--ps-grid-columns);display:grid;gap:36px}
.mxl-proof__title{margin:0 0 12px;color:var(--ps-color-neutral-3-500)}
.mxl-proof__lead{margin:0;max-width:70ch;color:var(--ps-color-secondary-5-500)}
.mxl-proof__label{margin:0 0 14px;color:var(--ps-color-neutral-3-500)}
.mxl-proof__caption{margin:-6px 0 14px;font:400 14px/22px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
/* row 1: the track record, figures on tinted tiles */
.mxl-stats,.mxl-foundries{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:12px}
@media (min-width:640px){.mxl-stats,.mxl-foundries{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.mxl-stats,.mxl-foundries{grid-template-columns:repeat(4,minmax(0,1fr))}}
.mxl-stat{
  display:flex;flex-direction:column;gap:6px;padding:18px 20px;border-radius:12px;
  background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-neutral-2-300);
}
.mxl-stat__big{font:500 18px/26px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.mxl-stat__what{font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
/* row 2: what is available now as PRO IP, white cards with a brand rule on top */
.mxl-proof__row--pro{padding:24px 22px;border-radius:16px;background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300)}
.mxl-foundry{
  display:flex;flex-direction:column;gap:6px;padding:16px 18px;border-radius:12px;
  background:var(--sv-white);border:1px solid var(--ps-color-neutral-2-300);
  border-top:3px solid var(--ps-color-brand-500);
}
.mxl-foundry__name{font:500 16px/24px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-3-500)}
.mxl-foundry__what{font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500)}
/* row 3: resources, four across from 1024 */
.mxl-res__grid .pf-res-card{background:var(--sv-white)}
@media (min-width:640px){.mxl-res__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.mxl-res__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* --------------------------------------------------------------------------
   §5 CTA: copy beside image B from 1024
   -------------------------------------------------------------------------- */
.mxl-cta{padding-block:48px;background:var(--ps-color-neutral-2-000)}
.mxl-cta__inner{grid-column-end:span var(--ps-grid-columns);display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media (min-width:1024px){.mxl-cta__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
.mxl-cta__title{margin:0 0 14px;color:var(--ps-color-neutral-3-500)}
.mxl-cta__body{margin:0 0 24px;max-width:65ch;color:var(--ps-color-secondary-5-500)}
.mxl-cta__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}

/* §7 Related: three tiles, three across from 1024 */
.mxl-related{background:var(--ps-color-neutral-2-100)}
@media (min-width:1024px){.mxl-related .pf-related__list{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* --------------------------------------------------------------------------
   §8 Product tables
   -------------------------------------------------------------------------- */
.mxl-tables{padding-block:48px}
.mxl-tables__inner{grid-column-end:span var(--ps-grid-columns);display:grid;gap:40px;min-width:0}
.mxl-table{min-width:0}
.mxl-table__title{margin:0 0 14px;color:var(--ps-color-neutral-3-500)}
.mxl-ptable{min-width:760px}
.mxl-ptable__pn,.mxl-ptable__grade{white-space:nowrap}
.mxl-ptable .pf-ptable__part a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--ps-color-neutral-2-500)}
.mxl-ptable .pf-ptable__part a:hover{color:var(--ps-color-brand-500);text-decoration-color:currentColor}
.mxl-tables__legend{margin:-16px 0 0;font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900)}

@media (min-width:1350px){
  .mxl-jump__list,.mxl-uses__inner,.mxl-proof__inner,.mxl-cta__inner,.mxl-tables__inner{grid-column-start:2;grid-column-end:span 10}
}
/* phones: the large buttons can be wider than a 320px column; let them wrap */
@media (max-width:639.98px){
  .mxl-banner .ps-btn--large,.mxl-cta .ps-btn--large{max-width:100%}
  .mxl-banner .ps-btn--large .ps-btn__text,.mxl-cta .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}