/* ==========================================================================
   Design IP  (/products/design/design-ip/)

   The third AI-Driven Design family page, built on product-family.css like
   Circuit Simulation and Analog and Custom IC. It merges the two live IP
   hubs: the argument (§3), then the routing (§4), then the coverage (§5).
   Page-local pieces:
     .dip-group     group head (H3 + one sentence) beside its cards. SECOND USE
                    of Analog and Custom IC's .acic-group, copied rather than
                    moved so that page's round markup stays untouched.
                    TODO(dev): move both to product-family.css as one
                    component.
     .dip-card--wide / __links
                    the one-card Mixel group spans its row; Foundation IP
                    carries four links, not one. Each card's own nodes line
                    (the doc's rule) is .pf-card__nodes in product-family.css,
                    moved there at its second use (MIPI)
     .dip-cover     the coverage table, after the Design hub's release table
                    (.drel / .dtable in design.css, which this page does not
                    load)
     .pf-facts      the proof figures strip, in product-family.css since its
                    second use (MIPI); only the five-across count stays here

   Band rhythm is the homepage's: 48 / 64 / 80. Bands alternate white and
   --ps-color-neutral-2-100; --ps-color-neutral-2-000 is reserved for the
   conversion band. No two adjacent bands share a tint.

     §1  banner        white          §6  proof       neutral-2-100
     §2  what it is    neutral-2-100  §7  evaluate    neutral-2-000
     §3  why license   white          §8  FAQ         white
     §4  portfolio     neutral-2-100  §9  related     neutral-2-100
     §5  coverage      white
   ========================================================================== */

/* --------------------------------------------------------------------------
   Section anchors - 96px clears the sticky header. The three group IDs are
   anchor targets too: the Design hub links #mixel-phy-ip and #foundation-ip.
   -------------------------------------------------------------------------- */
#what-it-is,#why-license,#portfolio,#coverage,#resources,
#mixel-phy-ip,#foundation-ip,#ip-management{scroll-margin-top:96px}

/* --------------------------------------------------------------------------
   §4 The portfolio, in three groups

   Phones: head, then the cards stacked. 640: head, then two across. 1024:
   the head takes a quarter of the row and the cards three columns of the
   rest, as on Analog and Custom IC.
   -------------------------------------------------------------------------- */
.dip-groups{
  grid-column-end:span var(--ps-grid-columns);
  display:grid;gap:36px;
}
.dip-group{display:grid;grid-template-columns:1fr;gap:16px}
.dip-group__name{margin:0 0 8px;color:var(--ps-color-neutral-3-500)}
.dip-group__lead{
  margin:0;max-width:60ch;
  font:400 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.dip-group__grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:1fr;gap:16px;
}
/* on a tinted band the cards go white */
.dip-group .pf-card{background:var(--sv-white)}
.dip-card__links{
  list-style:none;margin:auto 0 0;padding:0;
  display:grid;gap:6px;
}
.dip-card__links a{
  font:500 14px/22px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-brand-600);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ps-color-neutral-2-500);
}
.dip-card__links a:hover{text-decoration-color:currentColor}
@media (min-width:640px){
  .dip-groups{gap:44px}
  .dip-group__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* the Mixel group has one card, so it takes the whole row */
  .dip-card--wide{grid-column:1 / -1}
}
@media (min-width:1024px){
  .dip-group{grid-template-columns:minmax(0,1fr) minmax(0,3fr);gap:28px;align-items:start}
  .dip-group__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dip-groups{padding-top:8px}
  .dip-group + .dip-group{padding-top:36px;border-top:1px solid var(--ps-color-neutral-2-300)}
}
@media (min-width:1350px){
  .dip-groups{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §5 Coverage table
   -------------------------------------------------------------------------- */
.dip-cover{padding-block:48px}
.dip-cover__head{grid-column-end:span var(--ps-grid-columns);margin-bottom:28px}
.dip-cover__title{color:var(--ps-color-neutral-3-500);margin:0 0 12px}
.dip-cover__lead{color:var(--ps-color-secondary-5-500);margin:0;max-width:70ch}
.dip-cover__wrap{grid-column-end:span var(--ps-grid-columns);min-width:0}
.dip-cover__scroll{
  overflow-x:auto;max-width:100%;background:var(--sv-white);
  border:1px solid var(--ps-color-neutral-2-300);border-radius:16px;
}
.dip-cover__scroll:focus-visible{outline:2px solid var(--ps-color-brand-500);outline-offset:2px}
.dip-table{
  width:100%;min-width:640px;border-collapse:collapse;
  font:400 13px/20px var(--ps-font);letter-spacing:normal;color:var(--ps-color-secondary-5-500);
}
.dip-table th,.dip-table td{
  text-align:left;padding:12px 16px;
  border-bottom:1px solid var(--ps-color-neutral-2-300);vertical-align:top;
}
.dip-table thead th{
  font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-3-500);background:var(--ps-color-neutral-2-000);white-space:nowrap;
}
.dip-table tbody tr:last-child th,.dip-table tbody tr:last-child td{border-bottom:0}
.dip-table__line{font-weight:500;color:var(--ps-color-neutral-3-500)}
/* a line whose own page is built links it (MIPI D-PHY, 2026-09-28) */
.dip-table__line a{
  color:var(--ps-color-brand-600);
  text-decoration:underline;text-underline-offset:3px;
  text-decoration-color:var(--ps-color-neutral-2-500);
}
.dip-table__line a:hover{text-decoration-color:currentColor}
.dip-table__group{
  display:block;margin-top:2px;
  font:400 11px/17px var(--ps-font);letter-spacing:normal;color:var(--ps-color-neutral-2-900);
}
.dip-cover__footnote{
  margin:16px 0 0;max-width:80ch;
  font:400 12px/19px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-2-900);
}
@media (min-width:640px){.dip-cover{padding-block:64px}}
@media (min-width:1024px){.dip-cover{padding-block:80px}}
@media (min-width:1350px){
  .dip-cover__head,.dip-cover__wrap{grid-column-start:2;grid-column-end:span 10}
}

/* --------------------------------------------------------------------------
   §6 Proof: the figures (.pf-facts), then the customer card full width, then three
   resources three across
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  /* five figures, five across (the strip itself is .pf-facts in product-family.css) */
  .pf-facts{grid-template-columns:repeat(5,minmax(0,1fr))}
  .dip-res__grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .dip-res__quote{grid-column:1 / -1}
}
@media (min-width:640px) and (max-width:1023.98px){
  .dip-res__quote{grid-column:1 / -1}
}
/* the quote is .pf-res-card__quote in product-family.css */

/* --------------------------------------------------------------------------
   §9 Related: eleven tiles, four across from 1024 (4 + 4 + 3) rather than
   the shared five (5 + 5 + 1)
   -------------------------------------------------------------------------- */
@media (min-width:1024px){
  .pf-related__list{grid-template-columns:repeat(4,minmax(0,1fr))}
}

/* phones: "Talk to our Technical Experts" is wider than a 375px column at the
   large button size; let it wrap, as the rounds' pages do. TODO(dev): this
   rule has near-identical copies in most page sheets - a candidate for
   product-family.css or page-banner.css. */
@media (max-width:639.98px){
  .page-banner__ctas .ps-btn--large{max-width:100%}
  .page-banner__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}
/* the closing band's button sits beside a text link, so it can be narrower
   than its label at tablet widths; let it wrap at every width, as the
   2026-09-28 audit did */
.section-headings__ctas .ps-btn--large{max-width:100%}
.section-headings__ctas .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}

/* --------------------------------------------------------------------------
   §8 FAQ - sits on white, below the conversion band
   -------------------------------------------------------------------------- */
.faq{background:var(--sv-white)}

/* --------------------------------------------------------------------------
   Band run for this page
   -------------------------------------------------------------------------- */
.pf-def,.pf-cards,.pf-res,.pf-related{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
/* stated explicitly rather than left transparent: an inherited body colour
   looks right today and breaks silently the moment anything above it moves */
.pf-cap,.dip-cover{background:var(--sv-white)}
/* the conversion band takes the tint the site reserves for it site-wide */
.section-headings__wrapper--cta{background:var(--ps-color-neutral-2-000)}

/* Design IP round, 2026-09-28 (DIP-01): the definition band (§2) is held,
   which would leave the white banner above the white §3. While it is absent
   the run shifts one band, so no two neighbours share a tint:
   banner white, why-license neutral-2-100, portfolio white, coverage
   neutral-2-100, proof white, then the closing band, FAQ and Related as
   before. Switch §2 back on and the original run applies unchanged. */
body:not(:has(#what-it-is)) .pf-cap,
body:not(:has(#what-it-is)) .dip-cover{
  background:var(--ps-color-neutral-2-100);
  border-block:1px solid var(--ps-color-neutral-2-300);
}
body:not(:has(#what-it-is)) .pf-cards,
body:not(:has(#what-it-is)) .pf-res{background:var(--sv-white);border-block:0}
/* the Mixel cards are white for a tinted band; on white they take the
   shared card tint, as elsewhere on the site */
body:not(:has(#what-it-is)) .dip-group .pf-card{background:var(--ps-color-neutral-2-000)}

/* ==========================================================================
   Design IP round, WF-02 (2026-10-08, record 134): the client's review,
   Page 2. New pieces:
     .dip-banner__layout / .dip-media   hero copy beside image C; the CTA's
                                        image D; neutral placeholders (DEP-01)
     .dip-mixel                         the Mixel block across the full row:
                                        logo slot, text, one link (the logo is
                                        TODO(dev), DPR1)
     .dip-card__note                    one-line cross-links under a card
     .dip-group--outside                "Silvaco IP outside PRO IP", set apart
                                        from the PRO IP families by a heavier rule
     .dip-table__label / __links        the table's two new columns
     .dip-row__label                    the Proof and Resources row labels
     .dip-cta                           the closing band with image D
     .dip-relgroup                      Related in four labelled groups
   ========================================================================== */
#outside-pro-ip{scroll-margin-top:96px}
.dip-banner__layout{display:grid;grid-template-columns:1fr;gap:32px;align-items:center}
@media (min-width:1024px){.dip-banner__layout{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
.dip-banner__line{margin:20px 0 0;color:var(--ps-color-secondary-5-500)}
.dip-banner__line a,.dip-cover__footnote a{
  color:var(--ps-color-brand-600);font-weight:500;
  text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--ps-color-neutral-2-500);
}
.dip-banner__line a:hover,.dip-cover__footnote a:hover{color:var(--ps-color-brand-500);text-decoration-color:currentColor}
.dip-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);
}
.dip-media--d{background:var(--sv-white)}

/* the Mixel block takes the whole row: logo slot beside the text from 640 */
.dip-groups .dip-group--mixel{grid-template-columns:1fr}
.dip-mixel{
  display:grid;grid-template-columns:1fr;gap:20px;align-items:center;
  padding:24px 22px;border-radius:16px;
  background:var(--ps-color-neutral-2-000);border:1px solid var(--ps-color-neutral-2-300);
}
@media (min-width:640px){.dip-mixel{grid-template-columns:180px minmax(0,1fr);gap:32px;padding:28px 32px}}
.dip-mixel__logo{
  width:180px;max-width:100%;aspect-ratio:2 / 1;border-radius:10px;
  background:var(--sv-white);border:1px dashed var(--ps-color-neutral-2-500);
}
.dip-mixel__copy .dip-group__lead{margin-bottom:16px;max-width:80ch}

.dip-card__note{
  margin:12px 0 0;font:400 13px/20px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-secondary-5-500);
}
.dip-card__note a{color:var(--ps-color-brand-600);font-weight:500;text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--ps-color-neutral-2-500)}
.dip-card__note a:hover{color:var(--ps-color-brand-500);text-decoration-color:currentColor}

/* outside PRO IP: a heavier rule above, so it reads apart from the PRO IP families */
.dip-groups .dip-group--outside{padding-top:36px;border-top:2px solid var(--ps-color-neutral-2-500)}

/* the foundry and node table's label and links columns */
.dip-table__label{
  display:inline-block;padding:2px 10px;border-radius:999px;white-space:nowrap;
  font:500 12px/18px var(--ps-font);letter-spacing:normal;
  color:var(--ps-color-neutral-3-500);background:var(--ps-color-neutral-2-100);
}
.dip-table__nodes{white-space:nowrap}
.dip-table__links a{color:var(--ps-color-brand-600);text-decoration:underline;text-underline-offset:2px;text-decoration-color:var(--ps-color-neutral-2-500)}
.dip-table__links a:hover{color:var(--ps-color-brand-500);text-decoration-color:currentColor}

/* Proof and resources: two labelled rows, five figures then four resources */
.dip-row__label{grid-column-end:span var(--ps-grid-columns);margin:0 0 14px;color:var(--ps-color-neutral-3-500)}
.dip-row__label--res{margin-top:8px}
@media (min-width:640px){.dip-proof .dip-res__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1024px){.dip-proof .dip-res__grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1350px){.dip-row__label,.dip-proof .dip-res__grid{grid-column-start:2;grid-column-end:span 10}}

/* the closing band, with image D */
.dip-cta{padding-block:48px;background:var(--ps-color-neutral-2-000)}
.dip-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){.dip-cta__inner{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:48px}}
@media (min-width:1350px){.dip-cta__inner{grid-column-start:2;grid-column-end:span 10}}
.dip-cta__title{margin:0 0 14px;color:var(--ps-color-neutral-3-500)}
.dip-cta__body{margin:0 0 24px;max-width:65ch;color:var(--ps-color-secondary-5-500)}
.dip-cta__ctas{display:flex;flex-wrap:wrap;align-items:center;gap:16px 24px}
@media (min-width:640px){.dip-cta{padding-block:64px}}
@media (min-width:1024px){.dip-cta{padding-block:80px}}
@media (max-width:639.98px){
  .dip-cta .ps-btn--large{max-width:100%}
  .dip-cta .ps-btn--large .ps-btn__text{white-space:normal;min-width:0}
}

/* Related in four labelled groups */
.dip-relgroup{display:grid;gap:10px}
.dip-relgroup + .dip-relgroup{margin-top:24px}
.dip-relgroup__label{
  margin:0;font:500 11px/16px var(--ps-font);letter-spacing:.12em;text-transform:uppercase;
  color:var(--ps-color-neutral-2-900);
}
@media (min-width:1024px){.dip-related .dip-relgroup__list{grid-template-columns:repeat(5,minmax(0,1fr))}}