.style-guide__scheme-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sg-space-m);
}
.style-guide__link-surface {
  display: flex;
  flex-direction: column;
  padding: var(--sg-space-l);
  border-radius: var(--sg-radius);
  gap: var(--sg-space-m);
border: var(--sg-border-width) solid var(--sg-border);
}
#etch-o9wuqtr {
  gap: 1rem;
}
.mega-menu-nova__content-group {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: start;
  gap: 1rem;

  :has(> &) {
    container-type: inline-size;
  }

  @container (inline-size > 64rem) {
    border-right: solid 1px silver;
  }
}
.bpn-section[data-background="dark"] .bpn-core-pattern-label, .bpn-section[data-background="ultra-dark"] .bpn-core-pattern-label {
  color: var(--text-light-muted);
background: color-mix(in srgb, var(--black) 35%, transparent);
}
.bpn-content-header[data-width="wide"] {
  inline-size: 100%;
max-inline-size: var(--width-80);
}
.bpn-card {
  display: flex;
flex-direction: column;
width: 100%;
padding: var(--space-m);
background: var(--card-background);
border: none;
border-radius: var(--card-radius);
box-shadow: var(--box-shadow-2);
color: var(--text-dark);
}
.style-guide__bpn-icon-row {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sg-space-m, var(--space-m, 1.25rem));
margin-block-start: var(--sg-space-s, var(--space-s, 1rem));
}
.style-guide__text-row {
  flex-direction: row;
  align-items: baseline;
  gap: var(--sg-space-m);
  padding-block: var(--sg-space-2xs);
  border-block-end: var(--sg-border-width) solid var(--sg-border);
  flex-wrap: wrap;
}
.bpn-card[data-shadow="none"] {
  box-shadow: none;
}
.style-guide__para-link-demo {
  margin: 0;
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
}
.bpn-card .bpn-content-header[data-color-mode="light"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]) {
  color: var(--text-dark);
}
.splide {
  --gutter: initial;
  --section-padding-block: initial;
  gap: 0;
  /* overflow: clip; */
  /* block-size: calc(var(--slide-height-active) + (var(--slider-padding-block) * 2)); */
  & .splide__track {
    padding-block: var(--slider-padding-block);
  }

  &[data-static-layout] {
    padding-inline: var(--slider-padding-inline);
  }

  & .splide__slide {
    display: flex;
    perspective: var(--slide-perspective);
  }

  &[data-overflow='true'] .splide__track {
    overflow: visible !important;
  }

  [data-slider-wrapper] & {
    inline-size: 100%;
  }

  & .slide-content {
    block-size: 100%;
    inline-size: min(100%, 100vw);
  }

  /*# INSIDE ETCH  */

  /*### SCROLL BAR  */

  @supports (scrollbar-width: auto) {
    html:has(&) {
      scrollbar-color: inherit;
    }
  }

  .etch-builder-block .splide {
    scrollbar-width: thin !important;
    scrollbar-color: #4a4a4a #1a1a1a;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar {
    width: 8px;
    height: 12px;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar-track {
    background: #1a1a1a;
    border-radius: 10px;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar-thumb {
    background: #4a4a4a;
    border-radius: 10px;
    transition: background 0.3s ease;
  }

  .etch-builder-block.splide__track:hover::-webkit-scrollbar-thumb {
    background: linear-gradient(to left, #ff4d6a, blue) !important;
  }

  .etch-builder-block.splide__track::-webkit-scrollbar-thumb:hover {
    background: #5a5a5a;
  }
  /*### SCROLLBAR ENDS  */

  /*# INSIDE ETCH ENDS  */
}
.style-guide__gap-demo-wrap {
  gap: var(--sg-space-l);
}
.bpn-flex {
  container-type: inline-size;
container-name: bpn-flex;
display: flex;
width: 100%;
flex-direction: row;
flex-wrap: wrap;
gap: var(--space-m);
align-items: stretch;
justify-content: flex-start;
}
.bpn-content-header[data-width="wide"][data-centered="true"] {
  margin-inline: auto;
align-self: center;
}
.style-guide__var-dt {
  font-family: var(--sg-mono);
  font-size: var(--sg-label-size);
  color: currentColor;
  margin: 0;
  white-space: nowrap;
}
.bpn-card__content[data-content-gap="tight"] {
  gap: var(--space-s);
}
.etch-h576kui {
  font-size: var(--text-m);
}
.style-guide__toc-row {
  display: flex;
align-items: flex-start;
gap: var(--sg-space-2xs);
}
.bpn-card[data-padding="tight"] {
  padding: var(--space-s);
}
.bpn-flex[data-justify="space-evenly"] {
  justify-content: space-evenly;
}
.style-guide__font-card-sample {
  font-size: var(--sg-text-xl);
  line-height: 1.3;
}
.style-guide__page-title {
  /* Chrome, so the size is fixed; family and colour inherit from the site,
   same contract as every other heading in the guide's frame. */
font-size: 2.25rem;
line-height: 1.15;
margin: 0;
}
.bpn-flex[data-align="bottom"] {
  align-items: flex-end;
}
.style-guide__panel-note {
  /* Explains a result that otherwise reads as a broken palette. Sized like a
   label, not like body copy, so it annotates rather than competes. */
font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
line-height: 1.5;
color: var(--sg-muted);
margin: 0;
max-inline-size: var(--sg-measure);
}
.style-guide__focus-note {
  font-size: var(--sg-text-s);
color: var(--sg-muted);
}
.bpn-flex[data-justify="space-around"] {
  justify-content: space-around;
}
.style-guide__contextual-card-label {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
color: var(--sg-muted);
}
.style-guide__var-dd {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  margin: 0;
  text-align: end;
}
.mega-menu-quantum__nav-group--b {
  padding: 0;
}
.bpn-content-header[data-color-mode="dark"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]) {
  color: var(--text-light);
}
.mega-menu-nova__link {
  font-size: 1rem;
  font-weight: 400;
  color: black;
  padding-inline: 0rem;
  padding-block: 0.5rem;
  inline-size: 100%;
  text-decoration: none;
}
.bpn-flex[data-justify="end"] {
  justify-content: flex-end;
}
.bpn-section__container[data-content-width="narrow"] {
  max-width: var(--content-width-narrow, 48rem);
margin-inline: auto;
}
.style-guide__unset {
  /* A specimen whose token does not resolve. Not a defect in the guide: the
   colour slot is switched off in the ACSS dashboard, or the setting is empty.
   An empty box reads as a bug, a hatched box labelled "not set" reads as a
   finding, which is the whole point of dropping fallbacks (SPEC D1).

   Applied at runtime by the script, so a block has to carry this class or
   Etch ships only the style tracker and none of these declarations.

   !important is deliberate and narrow. The inline declaration that painted
   this surface is invalid at computed-value time, so it computes to nothing
   while still winning the cascade. Nothing is overridden here except a
   declaration that is already dead. */
background-image: repeating-linear-gradient(-45deg,
  var(--sg-hatch) 0 var(--sg-border-width),
  transparent var(--sg-border-width) 0.5rem) !important;
background-color: transparent !important;
border-style: dashed !important;
display: flex;
align-items: center;
justify-content: center;
padding: var(--sg-space-3xs);
min-block-size: 1.75em;
}
.style-guide__scheme-text {
  font-size: var(--sg-text-s);
  line-height: 1.5;
}
.bpn-section-media__media {
  position: absolute;
inset: 0;
z-index: 0;
overflow: hidden;
pointer-events: none;
}
.dwc-slider-vars-o73c4f {
  /* Controls styles for built in slider navigation elements only: 
  - Arrows (nav buttons) 
  - Pagination
  - Play/Pause button
  - Progress
*/

  /*# ALL ARROWS  */

  /*## Normal */
  --arrow-bg: rgba(255, 255, 255, 0.06);
  --arrow-clr: color-mix(in oklch, white 50%, transparent);
  --arrow-radius: 50%;
  --arrow-width: 2.75rem;
  --arrow-height: var(--arrow-width);
  --arrow-padding: 0;
  --arrow-aspect-ratio: 1;
  --arrow-icon-size: 1.125rem;
  --arrow-bg-blur: 10px;
  --arrow-border: 1px solid rgba(255, 255, 255, 0.1);
  --arrow-opacity: 0;
  --arrow-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*## Hover */
  --arrow-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --arrow-hover-clr: var(--white, white);
  --arrow-hover-opacity: 1;
  --arrow-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */

  /*### PREV ARROW  */
  --prev-arrow-top: 50%;
  --prev-arrow-bottom: auto;
  --prev-arrow-right: auto;
  --prev-arrow-left: 0.875rem;
  --prev-arrow-transform: translateY(-50%);

  /*### NEXT ARROW  */
  --next-arrow-top: 50%;
  --next-arrow-bottom: auto;
  --next-arrow-right: 0.875rem;
  --next-arrow-left: auto;
  --next-arrow-transform: translateY(-50%);

  /*# PAGINATION  */

  /*## WRAPPER  */
  --pagination-position: absolute;
  --pagination-padding: 12px 14px;
  --pagination-bg: rgba(0, 0, 0, 0.35);
  --pagination-bg-blur: 8px;
  --pagination-radius: 1.25rem;
  --pagination-gap: 0.5rem;

  /*### POSITIONING  */
  --pagination-top: auto;
  --pagination-bottom: 1rem;
  --pagination-left: 50%;
  --pagination-right: auto;
  --pagination-transform: translateX(-50%);

  /*## DOTS  */

  /*### Normal  */
  --dot-size: 8px;
  --dot-radius: 50%;
  --dot-clr: rgba(255, 255, 255, 0.2);
  --dot-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*### Hover  */
  --dot-hover-clr: rgba(255, 255, 255, 0.5);

  /*### Active */
  --dot-clr-active: var(--primary, #ff4d6a);
  --dot-transform-active: scale(1.3);

  /*# PLAY/PAUSE BUTTON  */

  /*## Normal */
  --play-pause-size: 32px;
  --play-pause-radius: 50vw;
  --play-pause-border: 1px solid rgba(255, 255, 255, 0.1);
  --play-pause-clr: var(--white, white);
  --play-pause-bg: rgba(0, 0, 0, 0.4);
  --play-pause-bg-blur: 8px;

  /*## Hover */
  --play-pause-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --play-pause-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */
  --play-pause-top: auto;
  --play-pause-bottom: 14px;
  --play-pause-left: auto;
  --play-pause-right: 14px;
  --play-pause-z-index: 10;

  /*# PROGRESS  */

  /*## Normal */
  --progress-fill-clr: var(--primary, #ff4d6a);
  --progress-fill-clr-2: var(--primary-ultra-light, #ff8fa3); /* bar progress*/
  --progress-bg: rgba(0, 0, 0, 0.4); /* non cirular counter*/
  --progress-bg-blur: 8px; /* non cirular counter*/
  --progress-border-radius: 20px; /* non cirular counter*/
  --progress-border: 1px solid rgba(255, 255, 255, 0.08); /* non cirular counter*/
  --progress-padding: 4px 12px; /* non cirular counter*/
  --progress-track-clr: rgba(255, 255, 255, 0.1);
  --progress-separator-clr: var(--progress-clr-total);
  --progress-separator-gap: 0.1em;
  --progress-separator-size: var(--progress-font-size-total);

  /*## Current text */
  --progress-clr-current: var(--primary, #ff4d6a);
  --progress-font-size-current: 0.8rem;

  /*## Total text */
  --progress-clr-total: #8888a0;
  --progress-font-size-total: 0.6rem;

  /*## POSITIONING  */
  --progress-top: auto;
  --progress-bottom: 0;
  --progress-left: 14px;
  --progress-right: auto;
  --progress-z-index: 10;

  /*### Counter  */
  & [data-auto-generated][data-progress-type='counter'] {
    --progress-top: auto;
    --progress-bottom: 12px;
    --progress-left: auto;
    --progress-right: 12px;
  }

  /*### Circular  */
  & [data-auto-generated][data-progress-type='circular'] {
    --progress-top: 14px;
    --progress-bottom: auto;
    --progress-left: 14px;
    --progress-right: auto;
  }

  /*# LIGHTBOX  */

  --lightbox-bg: color-mix(in oklch, black 90%, transparent);
  --lightbox-z: 99999;
  --lightbox-close-size: 2.75rem;
  --lightbox-padding: clamp(16px, 4vw, 48px);
  --lightbox-img-height: 90vh;
  --lightbox-arrow-bg: color-mix(in oklch, white 12%, transparent);
  --lightbox-arrow-hover-bg: color-mix(in oklch, white 25%, transparent);
  --lightbox-clr: #fff;
  --lightbox-slide-height: 70vh;
}
#dwce-nav-nested {
  @media (width <= 64rem) {
    inline-size: auto;
  }
}
.bpn-section[data-background="dark"] {
  background-color: var(--bg-dark);
color: var(--text-light);
}
.bpn-card[data-fill-height="true"] .bpn-content-header__footer {
  margin-block-start: auto;
}
.bpn-content-header[data-gap="tight"] {
  gap: var(--space-xs);
}
.style-guide__gap-demo-label {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
  background: var(--sg-chip-bg);
  padding: 0.15em 0.5em;
  border-radius: var(--sg-radius);
  white-space: nowrap;
  flex-shrink: 0;
  align-self: flex-start;
}
.style-guide__bridge-box {
  background: hsl(25 80% 90%);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
}
.bpn-content-header__title[data-visual-style="eyebrow"] {
  font-size: var(--text-s);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--accent);
}
.style-guide__heading-specimen {
  gap: var(--sg-space-xs);
}
.style-guide__bpn-icon-item {
  display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
min-inline-size: 6rem;
}
.dev-note {
  display: none;
flex-direction: column;
gap: 0.5em;
background-color: #fff8dc;
border-left: 4px solid #f0ad4e;
padding: 15px 20px;
border-radius: 4px;
font-family: Arial, sans-serif;
line-height: 1.6;
inline-size: 100%;
max-inline-size: max-content;
&[data-display='Etch Only' i].etch-builder-block { display: flex; }
&[data-display='Gutenberg Only' i].wp-block { display: flex; }
&[data-display='Etch and Gutenberg' i]:is(.wp-block, .etch-builder-block) { display: flex; }
&::before { content: 'Developer Note'; font-weight: bold; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
}
.dwc-nest-menu-top {
  padding-inline: var(--menu-item-inline-padding);
  padding-block: var(--menu-item-block-padding);
  &:not(.dwc-mobile &){
    display:none;
  }
}
.style-guide__swatch {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  text-align: center;
}
.bpn-section-media .bpn-content-header, .bpn-section-media .bpn-content-header__body-text, .bpn-section-media .bpn-content-header__sub-heading:not([data-accent="true"]), .bpn-section-media .bpn-content-header__cta:not([class*="btn--"]) {
  color: light-dark(#ffffff, #ffffff);
}
.style-guide {
  /* Chrome design system. Fixed and project-independent: these build the
   guide. ACSS tokens are SPECIMENS and never appear in a chrome position.
   See SPEC-v2.md 3.4. Geometry is literal; colour derives from currentColor
   so it adapts to any surface without ever touching the palette. */

/* geometry */
--sg-space-3xs: 0.25rem;
--sg-space-2xs: 0.5rem;
--sg-space-xs: 0.75rem;
--sg-space-s: 1rem;
--sg-space-m: 1.5rem;
--sg-space-l: 2.5rem;
--sg-space-xl: 4rem;
--sg-space-2xl: 6rem;

/* type. Sizes are fixed so layout cannot deform; families inherit so the
   guide still reads as part of the site. */
--sg-text-2xs: 0.6875rem;
--sg-text-xs: 0.75rem;
--sg-text-s: 0.875rem;
--sg-text-m: 1rem;
--sg-text-l: 1.125rem;
--sg-text-xl: 1.5rem;
--sg-text-heading: 1.75rem;
--sg-label-size: var(--sg-text-xs);
--sg-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

/* structure */
--sg-radius: 0.25rem;
--sg-radius-l: 0.5rem;
--sg-border-width: 1px;
--sg-rule-width: 2px;
--sg-label-col: 5rem;
/* A swatch column is as wide as the longest token name it has to carry.
   --secondary-ultra-light is the longest in the ACSS palette and renders
   139px at 11px mono, measured live; 9.5rem leaves room for a different
   monospace fallback. Below this the name wraps mid-word and stops being
   something you can read at a glance or copy.
   Height is separate on purpose: tying it to the width via aspect-ratio
   made the colour blocks grow to 159px just because the label got wider. */
--sg-swatch-min: 9.5rem;
--sg-swatch-height: 6rem;
--sg-measure: 65ch;
/* Where the sticky table of contents pins, and how far a heading has to clear
   it when an anchor is jumped to. Both come from one token so they cannot
   drift apart: raise the bar and the anchor offset follows.

   The WordPress admin bar is position:fixed over the top 32px, so at 0.5rem
   the guide's own bar slid underneath it. That only happens for logged-in
   users, which is to say for everyone looking at their own style guide.

   The two rules below are the no-JavaScript fallback and they follow
   WordPress's own breakpoint. The script measures the bar for real and
   overrides them, because under 600px WordPress stops fixing the bar and lets
   it scroll away, and an offset for a bar that is not there is just a gap. */
--sg-toc-top: var(--sg-space-2xs);
/* Bar height plus room to breathe. The closed bar measures 42px and is driven
   by --sg-label-size, which is fixed chrome, so it does not move with the
   project's type scale. 6rem leaves roughly 54px of clear page under it: at
   4rem the heading cleared the bar by 22px and still read as pinned to it. */
--sg-toc-offset: calc(var(--sg-toc-top) + 6rem);

/* ACSS's own hook. It ships [id] { scroll-margin-top: var(--offset, 0) }, and
   that rule has the same weight as ours but sits later in automatic.css, so it
   won and every anchor jump landed under the bar with 0 offset. Setting
   --offset here makes ACSS's rule compute the number we want, for every id in
   the guide including any added later. Scoped to .style-guide, so nothing
   outside it is touched. */
--offset: var(--sg-toc-offset);

body.admin-bar & { --sg-toc-top: calc(32px + var(--sg-space-2xs)); }
@media screen and (max-width: 782px) {
  body.admin-bar & { --sg-toc-top: calc(46px + var(--sg-space-2xs)); }
}

/* colour, from currentColor and never from the palette. A border derived
   this way cannot equal the swatch it outlines (TODO 3.12).

   These are the color-mix() fallbacks. color-mix() with transparent
   MULTIPLIES alpha, and that is the bug they carry: ACSS ships
   --text-color: var(--text-dark-muted), which is itself
   color-mix(in srgb, var(--text-dark) 80%, transparent). So currentColor
   arrives at 0.8 alpha on a stock ACSS site, 65% of it lands at 0.52, and
   the muted labels measured 3.84:1 against a 4.5:1 requirement. 134 of 217
   text elements failed. Not this site's quirk: it is the ACSS default, so
   every stock install hits it.

   The @supports block below replaces each one with relative colour syntax,
   which SETS alpha instead of multiplying it. The result no longer depends
   on how transparent the site's own text happens to be. The fallbacks stay
   for Firefox 120 to 127, which has light-dark() but not relative colour. */
--sg-border: color-mix(in oklch, currentColor 20%, transparent);
--sg-chip-bg: color-mix(in oklch, currentColor 8%, transparent);
--sg-surface: color-mix(in oklch, currentColor 4%, transparent);
--sg-muted: color-mix(in oklch, currentColor 65%, transparent);
/* accent for rules and underlines. Was var(--primary); one line to restore
   brand colour here if the risk is acceptable. */
--sg-accent: color-mix(in oklch, currentColor 40%, transparent);

/* Hatch for a specimen that has nothing to paint. Lighter than a border:
   it has to read as texture behind the label, not as a second frame. */
--sg-hatch: color-mix(in oklch, currentColor 14%, transparent);

/* A swatch edge that survives its own fill, from two fixed colours.
   Neither may derive from currentColor. The first attempt kept the
   currentColor border and added only the light ring, which fixed dark fills
   and then failed on --black inside .scheme--dark: there the palette flips
   the swatch to white AND currentColor to white, so border and ring were
   both white on white, edge 1.000. One light ring plus one dark border
   means at least one of the two is visible on any fill, in any scheme.
   Measured over all 64 swatches: 1 invisible edge before, 0 after. */
--sg-swatch-ring: rgba(255, 255, 255, 0.5);
--sg-swatch-edge: rgba(0, 0, 0, 0.28);

/* Illustrations with fixed fills need fixed ink, so currentColor must not
   follow the page inside the spacing rings. */
--sg-illustration-ink: #16181d;
--sg-illustration-paper: #ffffff;

/* Scheme toggle, adapted from the Scheme Switch Bravo pattern. The icon is
   box-shadow art driven by [data-current-scheme] on the root element; the
   colours are fixed chrome, same argument as the illustration ink: fixed
   art needs fixed colours, and the palette is what the toggle inspects. */
/* 16% filled the box to the rims; Manuel tuned this live to 8%. */
--sg-switch-size: 8%;
--sg-switch-icon: 10em;
--sg-switch-moon: #d9fbff;
--sg-switch-star: var(--sg-switch-moon);
--sg-switch-sun: #ffc233;
/* Matches the measured 42px closed toc bar, so the row reads as one unit. */
--sg-switch-box: 2.625rem;

/* stop Etch Builder reserving space for the 74 empty swatch elements */
--empty-element-size: 0;

/* Every ring paints a different token, so the ring geometry has to come from
   the element. The root holds only the neutral default: a ring that lost its
   inline values degrades to an unpainted box instead of vanishing. */
--sg-ring-fill: transparent;
--sg-ring-line: currentColor;
--sg-ring-space: 0;

/* Placed last on purpose. Every token above is redefined here, and a later
   declaration of equal specificity wins. Sitting earlier, the --sg-hatch
   override was silently overwritten by the plain declaration further down,
   which is the failure mode this file keeps running into: a declaration that
   is present, valid, and dead. */
@supports (color: oklch(from red l c h)) {
  & {
    --sg-border: oklch(from currentColor l c h / 0.2);
    --sg-chip-bg: oklch(from currentColor l c h / 0.08);
    --sg-surface: oklch(from currentColor l c h / 0.04);
    /* 0.65 is measured, not chosen. Below 0.6 the labels drop under AA on
       the --bg-light panel, which is the darkest surface the chrome sits on.
       Above 0.7 they stop reading as secondary against 0.8 body text. */
    --sg-muted: oklch(from currentColor l c h / 0.65);
    --sg-accent: oklch(from currentColor l c h / 0.4);
    --sg-hatch: oklch(from currentColor l c h / 0.14);
  }
}
}
.bpn-content-header__sub-heading[data-scale="page-title"] {
  font-size: var(--h1);
font-weight: var(--heading-font-weight);
line-height: 1.1;
letter-spacing: -0.02em;
}
.bpn-grid[data-gap="tight"] {
  gap: var(--space-s);
}
.hero__figure {
  position: absolute;
    top: 0px;
    right: 0px;
    bottom: 0px;
    left: 0px;
    width: 100%;
    z-index: -1;
    height: 100%;
    border-radius: 0;
    margin-bottom: 0;
}
.bpn-flex[data-wrap="nowrap"] {
  flex-wrap: nowrap;
}
.bpn-section-media {
  position: relative;
isolation: isolate;
display: flex;
flex-direction: column;
align-items: stretch;
align-self: stretch;
inline-size: 100%;
overflow: hidden;
color: light-dark(#ffffff, #ffffff);
}
.style-guide__font-card-var {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
}
.style-guide__gap-grid-cell {
  block-size: 3rem;
  background: hsl(160 60% 90%);
  border: var(--sg-border-width) dashed hsl(160 60% 70%);
  border-radius: var(--sg-radius);
}
.bpn-content-header[data-centered="true"] .bpn-content-header__body {
  align-items: center;
}
.style-guide__text-specimen {
  gap: var(--sg-space-xs);
}
.style-guide__gap-container-block {
  padding: var(--sg-space-m);
  background: hsl(45 80% 90%);
  border: var(--sg-border-width) dashed hsl(45 80% 70%);
  border-radius: var(--sg-radius);
  font-size: var(--sg-label-size);
  color: var(--sg-illustration-ink);
  text-align: center;
/* Fixed fill, so the text on it has to be fixed too. currentColor follows
   the page and flips white under a dark scheme, which left this label at
   1.1:1 on its own background. Same reason the spacing rings carry
   --sg-illustration-ink. */
}
.bpn-flex[data-align="center"] {
  align-items: center;
}
.dwc-skip-link {
  position: fixed;
  top: 0;
  inset-inline-start: 1rem;
  z-index: 100000;
  transform: translateY(-150%);

  /* Appearance when revealed */
  padding: var(--skip-link-padding);
  background: var(--skip-link-bg);
  color: var(--skip-link-color);
  font-size: var(--skip-link-font-size);
  font-weight: var(--skip-link-weight);
  line-height: 1.2;
  text-decoration: none;
  border-radius: 0 0 0.5rem 0.5rem;
  box-shadow: var(--skip-link-shadow);

  transition: transform 0.2s ease;
  
  &:hover{
    background: var(--skip-link-hover-bg);
  color: var(--skip-link-hover-color);
  }

  /* Reveal on focus */
  &:focus,
  &:focus-visible {
    transform: translateY(calc(0px + var(--wp-admin--admin-bar--height, 0px)));
    outline: var(--skip-link-outline);
    outline-offset: 2px;
  }

  .dwc-skip-links:has(&) {
    display: contents;
  }

  /* Respect reduced-motion preferences */
  @media (prefers-reduced-motion: reduce) {
    & {
      transition: none;
    }
  }
}
.bpn-section__content[data-item-gap="spacious"] {
  gap: var(--space-l);
}
.info {
  container-type: inline-size;
  container-name: info-layout;
  width: 100%;
  margin-top: 0;
  margin-bottom: 0;
  padding-block: var(--space-xl);
  align-self: flex-start !important;
  justify-content: flex-start;
  background-color: var(--base-light);
}
.style-guide__spacing-nest-wrap {
  gap: var(--sg-space-l);
color: var(--sg-illustration-ink);

/* The concentric diagram is a measurement: every ring paints its token's real
   padding, and the label next to it names that token. At a narrow container
   the six paddings alone need more width than exists. Measured on the
   frontend at a 390px viewport: 396px of padding and border inside a 341px
   box, before any content. Shrinking the rings to fit would leave the label
   --space-xxl next to something that is not --space-xxl, which is the exact
   class of quiet falsehood this guide exists to remove.

   So the rings keep their true size and the diagram scrolls instead.
   container-type does two jobs here: it makes the switch queryable from the
   rings, and its inline-size containment stops a max-content ring from
   stretching this box in the first place. */
container-type: inline-size;
overflow-x: auto;
overscroll-behavior-inline: contain;
scrollbar-width: thin;
scrollbar-color: var(--sg-border) transparent;

}
.dwc-nest-menu__mobile-logo {
  transition: opacity 0.45s 0.15s var(--mobile-menu-ttf);
  block-size: var(--dwc-nest-header-height);
  max-block-size: var(--mobile-logo-size);
}
.bpn-section-media[data-padding="spacious"] {
  padding-block: var(--section-space-l);
}
.dwc-nav-btn-instruction {
  color: white;
  font-size: 0.6rem;
  font-weight: 500;
  letter-spacing: 1px;
  background-color: var(--etch-info, deepskyblue);
  border-radius: 0.4em;
  padding: 0.45 0.75em;
  max-inline-size: 250px;
  white-space: wrap;
}
.style-guide__toc-section {
  /* Carries the gutter, and nothing else: the block padding every other section
   in the guide gets would put 6rem of air above a bar that is 42px tall. */
padding-block: 0;
position: sticky;
inset-block-start: var(--sg-toc-top);
z-index: 10;
}
.style-guide__scheme-switch-icon {
  font-size: var(--sg-switch-size);
min-inline-size: 0;
min-block-size: 0;
display: flex;
inline-size: 100%;
block-size: 100%;
position: absolute;
inset-block-start: 50%;
inset-inline-start: 50%;
translate: -50% -50%;
border-radius: 50%;
transition:
  rotate 400ms ease-in-out,
  box-shadow 400ms ease-in-out,
  background 400ms ease-in-out;

@media (prefers-reduced-motion: reduce) {
  & { transition: none; }
}

/* Sun */
[data-current-scheme='sun' i] & {
  font-size: calc(var(--sg-switch-size) * 1.2);
  background: var(--sg-switch-sun);
  inline-size: calc(var(--sg-switch-icon) * 0.7);
  block-size: calc(var(--sg-switch-icon) * 0.7);
  rotate: 0deg;
  box-shadow:
    3em 3em 0 5em var(--sg-switch-sun) inset,
    0 -5em 0 -2.7em var(--sg-switch-sun),
    3.5em -3.5em 0 -3em var(--sg-switch-sun),
    5em 0 0 -2.7em var(--sg-switch-sun),
    3.5em 3.5em 0 -3em var(--sg-switch-sun),
    0 5em 0 -2.7em var(--sg-switch-sun),
    -3.5em 3.5em 0 -3em var(--sg-switch-sun),
    -5em 0 0 -2.7em var(--sg-switch-sun),
    -3.5em -3.5em 0 -3em var(--sg-switch-sun);
}

/* Moon */
[data-current-scheme='moon' i] & {
  font-size: calc(var(--sg-switch-size) * 1);
  inline-size: var(--sg-switch-icon);
  block-size: var(--sg-switch-icon);
  background: transparent;
  rotate: -75deg;
  box-shadow:
    3em 2.5em 0 0em var(--sg-switch-moon) inset,
    /* stars */
    color-mix(in hsl, var(--sg-switch-star) 70%, transparent) 0em -7em 0 -4.5em,
    var(--sg-switch-star) 2em 6em 0 -4em,
    var(--sg-switch-star) -4em -7em 0 -4.3em,
    var(--sg-switch-star) 6em 2em 0 -4.2em,
    color-mix(in hsl, var(--sg-switch-star) 70%, transparent) 4.5em 4em 0 -4.5em,
    var(--sg-switch-star) -8em 0.5em 0 -4.4em,
    color-mix(in hsl, var(--sg-switch-star) 70%, transparent) -6em -4em 0 -4.5em,
    color-mix(in hsl, var(--sg-switch-star) 70%, transparent) -1em 7em 0 -4.5em;
}
}
.mega-menu-nova__nav-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  inline-size:100%;
}
.style-guide__subsection-title {
  font-size: var(--sg-text-l);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding-block-end: var(--sg-space-2xs);
border-block-end: var(--sg-rule-width) solid var(--sg-accent);
align-self: flex-start;
}
.bpn-section-media[data-min-height="compact"] {
  min-block-size: 20rem;
}
.bpn-content-header__body-text {
  font-family: var(--text-font-family);
line-height: 1.6;
color: var(--text-dark);
}
.mega-menu-quantum__txt--large {
  font-size: 16px;
}
.dwce-toggle__label {
  font-size: var(--label-font-size);
  color: var(--label-color);
  text-transform: uppercase;
  font-weight: 500;
}
.mega-menu-quantum__link {
  padding-inline: 0rem;
  padding-block: 0.5rem;
  font-weight: 600;
  color: #000;
  display: flex;
  align-items: center;
  letter-spacing: 0;
  text-decoration: none;
  font-size: 1rem;
  flex-direction: row;

  /* clickable parent */

  &::after {
    content: '';
    position: absolute;
    inset: 0;
    cursor: pointer !important;
    display: flex;
    z-index: 1;
  }

  &:hover {
    color: var(--primary-clr, crimson);
    
    & svg path{
      stroke:var(--primary-clr, crimson)
    }
  }

  & svg {
    transition: transform 0.25s;
  }

  &:hover svg {
    transform: translateY(0.25em);
  }
}
.dwce-toggle {
  --toggle-align: 0;

  &[data-flip-toggle='true'] {
    --toggle-align: auto;
    --toggle-horizontal-offset: auto;

    & .dwce-toggle__label-wrap {
      order: -1;
    }
  }

  &[data-toggle-style='techno'] {
    --toggle-line-height: 2px;
    --toggle-line-variance: 1px;
    --iw: var(--toggle-size);
    --aw: var(--toggle-size);

    &:not(.is-active) .dwca-inner {
      inline-size: 75%;
    }
  }

  &[data-equalize='true']:not([data-toggle-style='techno'], .is-active) {
    --toggle-line-variance: 1px;
    --iw: var(--toggle-size);
    --aw: var(--toggle-size);
  }
}
.dwc-megamenu-instruction {
  padding: 3rem;
  display: flex;
  flex-direction: column;
  height: 100%;
}
.style-guide__dark-panel {
  /* No color here on purpose. The panel carries .bg--dark / .bg--ultra-dark,
   so ACSS Automatic Color Relationships assign the foreground, which also
   keeps currentColor correct for every --sg-* chrome token inside.
   v1.3 set color: var(--white), which light-dark() can resolve to black
   on a dark panel. That was TODO 3.1. */
display: flex;
flex-direction: column;
padding: var(--sg-space-l);
border-radius: var(--sg-radius-l);
gap: var(--sg-space-l);
}
.style-guide__heading-label {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  min-inline-size: var(--sg-label-col);
  flex-shrink: 0;
}
.bpn-section[data-background="dark"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]), .bpn-section[data-background="ultra-dark"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]), .bpn-section[data-use-surface="true"][data-surface="surface-3"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]), .bpn-section[data-use-surface="true"][data-surface="surface-4"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]), .bpn-section[data-use-surface="true"][data-surface="surface-5"] .bpn-content-header__title:not([data-visual-style="eyebrow"]):not([data-visual-style="pill"]) {
  color: var(--text-light);
}
.style-guide__divider-line {
  /* The specimen. Its border comes from the inline style, nothing else. */
flex: 1 1 auto;
min-inline-size: 4rem;
}
.style-guide__bpn-surface-card[data-relationship="light"] {
  color: #111 !important;
}
.style-guide__bpn-card-label {
  margin: 0;
font-size: var(--text-xs, 0.75rem);
font-weight: 600;
letter-spacing: 0.02em;
text-transform: uppercase;
opacity: 0.85;
}
.style-guide__scheme-card {
  display: flex;
flex-direction: column;
padding: var(--sg-space-l);
border-radius: var(--sg-radius-l);
border: var(--sg-border-width) solid var(--sg-border);
gap: var(--sg-space-m);
/* specimen: --bg-light and --text-dark are the subject here, they show
   the light-dark() inversion inside .scheme--light / .scheme--dark */
background: var(--bg-light);
color: var(--text-dark);
}
.bpn-grid[data-vertical-align="top"] {
  align-items: start;
}
.bpn-flex[data-gap="spacious"] {
  gap: var(--space-l);
}
.style-guide__zone-band {
  background: hsl(210 80% 92%);
border: var(--sg-border-width) dashed hsl(210 80% 70%);
border-radius: var(--sg-radius);
padding: var(--sg-space-2xs) var(--sg-space-xs);
display: flex;
align-items: center;
gap: var(--sg-space-xs);
min-inline-size: 0;
color: var(--sg-illustration-ink);
}
.style-guide__section-intro {
  gap: var(--sg-space-2xs);
  padding-block-end: var(--sg-space-m);
  border-block-end: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__bpn-scheme-row {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sg-space-m, var(--space-m, 1.25rem));
margin-block-start: var(--sg-space-s, var(--space-s, 1rem));
padding: var(--sg-space-m, var(--space-m, 1.25rem));
border: var(--sg-border-width, 1px) solid var(--sg-border, var(--border-color, #ccc));
border-radius: var(--sg-radius, var(--radius, 5px));
background: var(--bg-ultra-light, #f5f5f5);
}
.bpn-grid__slot {
  display: flex;
flex-direction: column;
gap: var(--space-m);
width: 100%;
min-width: 0;
}
.style-guide__contextual-card {
  padding: var(--sg-space-m);
  border-radius: var(--sg-radius);
  border: 1px solid var(--sg-border);
  gap: var(--sg-space-2xs);
}
.bpn-section[data-padding="tight"] {
  padding-block: var(--section-space-s);
}
.style-guide__divider-stack {
  /* No gap: the spacing is the token itself, carried inline on every item after
   the first as margin above the rule and padding below it, which is how the
   ?divider-all recipe lays dividers out. The rule between the items is chrome
   so the spacing is the only thing the token controls, and it reads on both
   sides of the line, not just above it. */
gap: 0;
& > * + * { border-block-start: var(--sg-border-width) solid currentColor; }
}
.bpn-grid[data-vertical-align="bottom"] {
  align-items: end;
}
.dwc-top-level-items-vars {
  /*## DEFAULT STATE */
  --menu-item-clr: var(--black, #000);
  --menu-item-font-size: 0.75rem;
  --menu-item-font-weight: 500;
  --menu-item-bg: initial;

  /*## HOVER STATE */
  --menu-item-hover-clr: var(--primary-clr);
  --menu-item-hover-bg: hsl(from var(--primary-clr, crimson) h s l / 0.05);
  --menu-item-hover-border-bg: var(--menu-item-active-border-bg);
  --menu-item-hover-border-height: var(--menu-item-active-border-height);

  /*## ACTIVE STATE - Current Page Link*/
  /*(to exclude a link from this style, 
  add the attribute 'dwc-exclude' to its container)*/
  --menu-item-active-clr: var(--menu-item-hover-clr);
  --menu-item-active-bg: initial;
  --menu-item-active-border-bg: var(--primary-clr);
  --menu-item-active-border-height: 0px;

  /*## PADDING | GAP */
  --menu-item-inline-padding: clamp(0.75rem, 0.61rem + 0.56vw, 1.1rem);
  --menu-item-block-padding: 1rem;
  /*when menu item hover effect is set to 'Text Roll'*/
  --roll-padding: 1rem;

  /*## BORDERS | RADIUS */
  --menu-item-border: initial;
  --menu-item-radius: 50vw;

  /*## CHEVRON (dropdown arrow) */
  --chevron-size: 1.2em;
  --chevron-clr: var(--menu-item-clr);
  --chevron-hover-clr: var(--menu-item-hover-clr);
  --chevron-gap: 0.625rem;

  /*# ===== CTA BUTTONS (ALL) ===== */

  /*## non last button breakout items   */
  --breakout-border: solid 1px color-mix(in oklch, var(--primary-clr) 50%, transparent);
  --breakout-block-padding: 0.25em;
  --breakout-inline-padding: 0.5em;

  /*## all cta buttons padding */
  --cta-inline-padding: calc(var(--menu-item-inline-padding) * 1.3);
  --cta-block-padding: var(--menu-item-block-padding);

  /*## all cta buttons max width on mobile */
  --cta-width: 100%;

  /*## gap offset between 2 or 3 cta buttons on mobile/offcanvas/sidebar*/
  --cta-gap-offset: 0;

  /*## gap between breakout cta and menu toggle on mobile */
  --cta-breakout-gap: 1.25rem;

  /*# ===== CTA 1 (LAST) ===== */

  /*## DEFAULT STATE */
  --menu-cta-clr: var(--white, #fff);
  --menu-cta-bg: var(--black, #000);
  --menu-cta-inline-padding: var(--cta-inline-padding);
  --menu-cta-block-padding: var(--cta-block-padding);
  --menu-cta-border: none;
  --menu-cta-radius: 50vw;

  /*## HOVER STATE */
  --menu-cta-hover-clr: var(--white, #fff);
  --menu-cta-hover-bg: var(--primary-clr);

  /*# ===== CTA 2 (SECOND) ===== */

  /*## DEFAULT STATE */
  --menu-cta-2-clr: var(--white, #fff);
  --menu-cta-2-bg: var(--black, #000);
  --menu-cta-2-inline-padding: var(--cta-inline-padding);
  --menu-cta-2-block-padding: var(--cta-block-padding);
  --menu-cta-2-border: var(--menu-cta-border);
  --menu-cta-2-radius: var(--menu-cta-radius);

  /*## HOVER STATE */
  --menu-cta-2-hover-clr: var(--white, #fff);
  --menu-cta-2-hover-bg: var(--primary-clr);

  /*# ===== CTA 3 (THIRD) ===== */

  /*## DEFAULT STATE */
  --menu-cta-3-clr: var(--white, #fff);
  --menu-cta-3-bg: var(--black, #000);
  --menu-cta-3-inline-padding: var(--cta-inline-padding);
  --menu-cta-3-block-padding: var(--cta-block-padding);
  --menu-cta-3-border: var(--menu-cta-border);
  --menu-cta-3-radius: var(--menu-cta-radius);

  /*## HOVER STATE */
  --menu-cta-3-hover-clr: var(--white, #fff);
  --menu-cta-3-hover-bg: var(--primary-clr);

  /*# ===== STICKY/OVERLAY HEADER SPECIAL STYLES ===== */
  /*===== this styles only apply when the header div attribute [data-sticky-overlay-special-style] attribute is set to true, and sticky header is enabled =====*/

  /*## STYLES BEFORE SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) .dwc-nav-nested-items > & {
    /* add any of the variables above and update value*/
  }

  /*## STYLES BEFORE SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items > & {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) .dwc-nav-nested-items > & {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING - HOVER*/
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items > & {
    /* add any of the variables above and update value*/
  }

  /*## BADGE STYLES AFTER SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) .dwc-nav-nested-items > & .dwc-menu-item-badge {
    /* --badge-color: #fff !important;
    --badge-bg-color: var(--primary-clr) !important; */
  }

  /*## BADGE STYLES AFTER SCROLLING - HOVER*/
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items > & .dwc-menu-item-badge {
    /* 
    --badge-color: #fff !important;
    --badge-bg-color: gray !important;  
    */
  }

  /*# ===== MOBILE ONLY STYLES ===== */
  /* add and modify varibales for mobile breakpoint */

  html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) & {
    --menu-item-font-size: 1.125rem;
    --menu-item-border: 1px solid rgba(0, 0, 0, 0.1);
  }
}
.bpn-content-header__title[data-visual-style="section-title"] {
  font-size: var(--h2);
font-weight: var(--heading-font-weight);
}
.style-guide__contextual-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: var(--sg-space-xs);
}
.bpn-section__surface {
  position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
}
.style-guide__text-label {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  min-inline-size: var(--sg-label-col);
  flex-shrink: 0;
}
.dwc-nest-menu__logo {
  --centered-logo-inline-padding: 2rem;
  padding-block: 0rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  z-index: 9999;

  /* logo size */

  & > :is(svg, img) {
    width: auto;
    height: 50px;
  }

  /* when in centered logo */
  .dwc-header-logo-item &,
  .dwc-nav-nested-items:has(li &) & {
    padding-inline: var(--centered-logo-inline-padding);
  }
}
.info__text {
  text-align: center;
}
.bpn-content-header__sub-heading[data-accent="true"] {
  color: var(--accent);
}
.style-guide__scheme-switch {
  /* Adapted from Scheme Switch Bravo. The box is guide chrome: opaque like
   the toc bar because it pins over scrolling content, edged and rounded
   from the same tokens. The art inside is the source pattern's, em-driven. */
inline-size: var(--sg-switch-box);
block-size: var(--sg-switch-box);
aspect-ratio: 1;
min-inline-size: 0;
min-block-size: 0;
display: grid;
place-items: center;
padding: 0;
position: relative;
overflow: hidden;
background: Canvas;
color: inherit;
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius-l);
cursor: pointer;

/* display: grid above would defeat the UA's [hidden] rule, and hidden is how
   the script retires the button on a single-scheme site. */
&[hidden] { display: none; }
}
.bpn-content-header[data-centered="true"] .bpn-content-header__header {
  align-items: center;
}
.style-guide__scheme-heading {
  margin: 0;
font-size: var(--sg-text-l);
}
.bpn-section-media__image {
  display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
position: relative;
z-index: -1;
}
.slider-navigation-vars {
  /* Controls styles for built in slider navigation elements only: 
  - Arrows (nav buttons) 
  - Pagination
  - Play/Pause button
  - Progress
*/

  /*# ALL ARROWS  */

  /*## Normal */
  --arrow-bg: rgba(255, 255, 255, 0.06);
  --arrow-clr: color-mix(in oklch, white 50%, transparent);
  --arrow-radius: 50%;
  --arrow-width: 2.75rem;
  --arrow-height: var(--arrow-width);
  --arrow-padding: 0;
  --arrow-aspect-ratio: 1;
  --arrow-icon-size: 1.125rem;
  --arrow-bg-blur: 10px;
  --arrow-border: 1px solid rgba(255, 255, 255, 0.1);
  --arrow-opacity: 0;
  --arrow-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*## Hover */
  --arrow-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --arrow-hover-clr: var(--white, white);
  --arrow-hover-opacity: 1;
  --arrow-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */

  /*### PREV ARROW  */
  --prev-arrow-top: 50%;
  --prev-arrow-bottom: auto;
  --prev-arrow-right: auto;
  --prev-arrow-left: 0.875rem;
  --prev-arrow-transform: translateY(-50%);

  /*### NEXT ARROW  */
  --next-arrow-top: 50%;
  --next-arrow-bottom: auto;
  --next-arrow-right: 0.875rem;
  --next-arrow-left: auto;
  --next-arrow-transform: translateY(-50%);

  /*# PAGINATION  */

  /*## WRAPPER  */
  --pagination-position: absolute;
  --pagination-padding: 12px 14px;
  --pagination-bg: rgba(0, 0, 0, 0.35);
  --pagination-bg-blur: 8px;
  --pagination-radius: 1.25rem;
  --pagination-gap: 0.5rem;

  /*### POSITIONING  */
  --pagination-top: auto;
  --pagination-bottom: 1rem;
  --pagination-left: 50%;
  --pagination-right: auto;
  --pagination-transform: translateX(-50%);

  /*## DOTS  */

  /*### Normal  */
  --dot-size: 8px;
  --dot-radius: 50%;
  --dot-clr: rgba(255, 255, 255, 0.2);
  --dot-transition: 0.3s cubic-bezier(0.4, 0, 0.2, 1);

  /*### Hover  */
  --dot-hover-clr: rgba(255, 255, 255, 0.5);

  /*### Active */
  --dot-clr-active: var(--primary, #ff4d6a);
  --dot-transform-active: scale(1.3);

  /*# PLAY/PAUSE BUTTON  */

  /*## Normal */
  --play-pause-size: 32px;
  --play-pause-radius: 50vw;
  --play-pause-border: 1px solid rgba(255, 255, 255, 0.1);
  --play-pause-clr: var(--white, white);
  --play-pause-bg: rgba(0, 0, 0, 0.4);
  --play-pause-bg-blur: 8px;

  /*## Hover */
  --play-pause-hover-bg: color-mix(in oklch, var(--primary) 20%, transparent);
  --play-pause-hover-border-clr: var(--primary, #ff4d6a);

  /*## POSITIONING  */
  --play-pause-top: auto;
  --play-pause-bottom: 14px;
  --play-pause-left: auto;
  --play-pause-right: 14px;
  --play-pause-z-index: 10;

  /*# PROGRESS  */

  /*## Normal */
  --progress-fill-clr: var(--primary, #ff4d6a);
  --progress-fill-clr-2: var(--primary-ultra-light, #ff8fa3); /* bar progress*/
  --progress-bg: rgba(0, 0, 0, 0.4); /* non cirular counter*/
  --progress-bg-blur: 8px; /* non cirular counter*/
  --progress-border-radius: 20px; /* non cirular counter*/
  --progress-border: 1px solid rgba(255, 255, 255, 0.08); /* non cirular counter*/
  --progress-padding: 4px 12px; /* non cirular counter*/
  --progress-track-clr: rgba(255, 255, 255, 0.1);
  --progress-separator-clr: var(--progress-clr-total);
  --progress-separator-gap: 0.1em;
  --progress-separator-size: var(--progress-font-size-total);

  /*## Current text */
  --progress-clr-current: var(--primary, #ff4d6a);
  --progress-font-size-current: 0.8rem;

  /*## Total text */
  --progress-clr-total: #8888a0;
  --progress-font-size-total: 0.6rem;

  /*## POSITIONING  */
  --progress-top: auto;
  --progress-bottom: 0;
  --progress-left: 14px;
  --progress-right: auto;
  --progress-z-index: 10;

  /*### Counter  */
  & [data-auto-generated][data-progress-type='counter'] {
    --progress-top: auto;
    --progress-bottom: 12px;
    --progress-left: auto;
    --progress-right: 12px;
  }

  /*### Circular  */
  & [data-auto-generated][data-progress-type='circular'] {
    --progress-top: 14px;
    --progress-bottom: auto;
    --progress-left: 14px;
    --progress-right: auto;
  }

  /*# LIGHTBOX  */

  --lightbox-bg: color-mix(in oklch, black 90%, transparent);
  --lightbox-z: 99999;
  --lightbox-close-size: 2.75rem;
  --lightbox-padding: clamp(16px, 4vw, 48px);
  --lightbox-img-height: 90vh;
  --lightbox-arrow-bg: color-mix(in oklch, white 12%, transparent);
  --lightbox-arrow-hover-bg: color-mix(in oklch, white 25%, transparent);
  --lightbox-clr: #fff;
  --lightbox-slide-height: 70vh;
}
.style-guide__link-surface-grid {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sg-space-l);
  align-items: flex-start;
}
.bpn-section[data-background="ultra-light"] {
  background-color: var(--bg-ultra-light);
color: var(--text-dark);
}
.dwc-slider-wrapper {
  min-block-size: var(--slider-wrapper-height);
  background-color: var(--slider-wrapper-bg);
  overflow-x: clip;
}
.dwc-nest-toggle--close {
  margin-inline-start: auto !important;
}
.style-guide__content-grid-demo {
  /* Same contract as the grid demos: .content-grid on this element is the
   specimen. The fallback stack below only shows when the feature is off. */
display: flex;
flex-direction: column;
gap: var(--sg-space-2xs);
padding-block: var(--sg-space-s);
border-block: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__divider-surfaces {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
gap: var(--sg-space-s);
}
.style-guide__changelog {
  /* The same <details> idiom as the table of contents, and the native marker is
   kept for the same reason: it is the affordance that says this opens, and it
   is already keyboard and screen-reader correct. Closed by default, because a
   changelog is reference, not what anyone opened the page for. */
margin-block-start: var(--sg-space-s);
max-inline-size: var(--sg-measure);
}
.bpn-card[data-shadow="subtle"] {
  box-shadow: var(--box-shadow-1);
}
.bpn-section-media > [data-etch-element="container"][data-item-gap="spacious"] {
  gap: var(--space-l);
}
.mega-menu-quantum__nav-group {
  padding: 1rem;
  position: relative;
  gap: 1rem;
}
.bpn-card[data-padding="spacious"] {
  padding: var(--space-l);
}
.splide__slide {
  & > div:has(.slide-placeholder-info) {
    min-block-size: 200px;
    background-color: color-mix(in oklch, black 30%, transparent);
    background-image: radial-gradient(circle, white 1px, transparent 1px);
    background-size: 24px 24px;
    height: 100%;
  }
}
.bpn-card .bpn-content-header[data-color-mode="light"] .bpn-content-header__body, .bpn-card .bpn-content-header[data-color-mode="light"] .bpn-content-header__sub-heading {
  color: var(--text-dark-muted);
}
.bpn-section-media[data-min-height="viewport"] {
  min-block-size: 100svh;
}
.style-guide__bpn-specimen-grid {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
gap: var(--sg-space-s, var(--space-s, 1rem));
margin-block-start: var(--sg-space-s, var(--space-s, 1rem));
}
.etch-hzzm98j {
  position: relative;
}
.style-guide__link-surface-label {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0;
color: var(--sg-muted);
}
.mega-menu-nova__nav-group {
  padding: 1rem;
  display: flex;
  flex-direction: row;
  gap: 1rem;
	align-items: start;
}
.mega-menu-quantum__content-inner {
  display: grid;
  align-items: initial;
  grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  grid-gap: 1rem;
  width: 100%;
  background-color: #ffffff;
  padding-block: 1rem;
  container-type: inline-size;


  @container (inline-size < 768px) {
    & {
      grid-template-columns: repeat(auto-fill, minmax(min(400px, 100%), 1fr)) !important;
    }
  }
}
.bpn-content-header[data-gap="spacious"] {
  gap: var(--space-l);
}
.style-guide__gap-container-demo {
  gap: var(--container-gap);
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border: var(--sg-border-width) solid var(--sg-border);
  border-radius: var(--sg-radius);
}
.style-guide__shade-label {
  font-size: var(--sg-text-s);
  font-weight: 600;
  margin: 0;
  margin-block-start: var(--sg-space-2xs);
}
.upcdc-contact {
  border: 0;
padding: 0;
max-inline-size: 28rem;
inline-size: calc(100% - 2rem);
border-radius: var(--radius-m, 0.75rem);
background: var(--white);
color: var(--text-dark);
&::backdrop { background: rgba(0, 0, 0, 0.55); }
& .upcdc-contact__form {
  display: flex;
  flex-direction: column;
  gap: var(--space-s, 0.75rem);
  padding: var(--space-l, 1.5rem);
  margin: 0;
}
& .upcdc-contact__title { margin: 0; font-size: var(--h4, 1.35rem); }
& .upcdc-contact__field { display: flex; flex-direction: column; gap: 0.35rem; font-size: 0.95rem; }
& .upcdc-contact__field input,
& .upcdc-contact__field textarea {
  font: inherit;
  padding: 0.6rem 0.75rem;
  border: 1px solid light-dark(rgba(0, 0, 0, 0.2), rgba(255, 255, 255, 0.28));
  border-radius: 0.4rem;
  background: light-dark(#fff, #141414);
  color: inherit;
}
& .upcdc-contact__field textarea { min-block-size: 7rem; resize: vertical; }
& .upcdc-contact__status { margin: 0; min-block-size: 1.25rem; }
& .upcdc-contact__actions { display: flex; gap: 0.75rem; justify-content: flex-end; align-items: center; }
& .upcdc-contact__bot { position: absolute; left: -9999px; }
& .upcdc-contact__close { background: transparent; border: 0; color: inherit; cursor: pointer; }
}
.style-guide__font-card-label {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.style-guide__shadow-item {
  display: flex;
flex-direction: column;
align-items: center;
gap: var(--sg-space-2xs);
}
.style-guide__button-group {
  display: flex;
  flex-direction: column;
  gap: var(--sg-space-2xs);
  align-items: center;
}
.style-guide__toc-current {
  /* Filled by the script with the section you are currently in. Empty until
   then, and the separator only appears once there is something to separate,
   so the closed bar never shows a dangling slash. */
font-family: var(--sg-mono);
text-transform: none;
letter-spacing: normal;
font-weight: 400;
color: currentColor;
&:not(:empty)::before { content: " / "; }
}
.mega-menu-quantum__media-group {
  & img {
    border-radius: 0;
    height: 100%;
    width:100%;
    object-fit: cover;
  }

  @container (width > 500px) {
    & {
      grid-column: span 2;
    }
  }

  display: grid;
  align-items: initial;
  grid-gap: 0.5rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
  grid-auto-rows: 100px;
  align-content: center;
}
.style-guide__gap-content-stack {
  gap: var(--content-gap);
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border: var(--sg-border-width) solid var(--sg-border);
  border-radius: var(--sg-radius);
}
.bpn-section-media .bpn-core-pattern-label {
  color: light-dark(#ffffff, #ffffff);
background: color-mix(in srgb, var(--black) 45%, transparent);
}
.bpn-content-header[data-centered="true"] {
  text-align: center;
align-items: center;
}
.mega-menu-quantum__txt {
  font-size: 12px;
  font-weight: 500;
}
.style-guide__section-desc {
  font-size: var(--sg-text-m);
  color: var(--sg-muted);
  max-inline-size: var(--sg-measure);
}
.bpn-core-patterns-intro {
  padding-block: var(--space-l);
padding-inline: var(--space-m);
}
.dwc-default-slider-nav-icon {
  width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  fill: var(--arrow-clr);
}
:where([data-etch-element="container"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  max-inline-size: var(--content-width, 1366px);
  align-self: center; margin-inline: auto;
}
:where([data-etch-element="flex-div"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
}
:where([data-etch-element="iframe"]) {
  inline-size: 100%;
  height: auto;
 aspect-ratio: 16/9;
}
:where([data-etch-element="section"]) {
  inline-size: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.style-guide__scheme-card-label {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
color: var(--sg-muted);
}
.bpn-flex__slot {
  display: flex;
flex-direction: column;
gap: var(--space-m);
width: 100%;
min-width: 0;
}
.mega-menu-nova__dropdown-title {
  inline-size: 100%;
  border-bottom: solid 1px silver;
  padding-bottom: 0.5rem;
  font-size: 1rem;
  font-weight: 500;
}
.bpn-section__content {
  display: flex;
flex-direction: column;
gap: var(--space-m);
width: 100%;
}
.h-ruled-grid {
  --gap: 1rem;
  --line-thickness: 1px;
  --line-color: #d5d5d5;
  --line-offset: calc(var(--gap) / 10);
  gap: var(--gap);
  overflow: hidden;
  display: grid;
  align-items: initial;
  grid-column: span 3;
  grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr));

  & > div {
    position: relative;
  }

  & > div::before,
  & > div::after {
    content: '';
    background-color: var(--line-color);
    position: absolute;
  }

  & > div::before {
    width: var(--line-thickness);
    height: 100%;
    inset-block: calc(var(--gap) / 2);
    left: calc(var(--line-offset) * -1);
  }

  & > div::after {
    width: 100vw;
    height: var(--line-thickness);
    top: calc(var(--line-offset) * -1);
    left: 0;
  }

  & > div:last-child::before,
  & > div:last-child::after {
    display: none;
  }

  @container (width <= 1040px) {
    & {
      grid-column: 1/-1;
    }
  }
}
.style-guide__radius-cell {
  /* A square, because --radius-50 and --radius-circle only read correctly on
   one: on a wide bar 50% is an ellipse and 999px is a pill, and neither says
   anything about how the token behaves on a card or an avatar. */
inline-size: 100%;
aspect-ratio: 1;
display: grid;
place-items: center;
background: hsl(260 60% 92%);
border: var(--sg-border-width) dashed hsl(260 60% 75%);
font-size: var(--sg-label-size);
font-family: var(--sg-mono);
/* Fixed fill, fixed ink, same reason as the gap blocks. */
color: var(--sg-illustration-ink);
}
.style-guide__heading-row {
  flex-direction: row;
  align-items: baseline;
  gap: var(--sg-space-m);
  padding-block: var(--sg-space-2xs);
  border-block-end: var(--sg-border-width) solid var(--sg-border);
  flex-wrap: wrap;
}
.dwc-nav-vars {
  /*# ===== BACK TEXT ===== */
  --back-text-clr: var(--black, #000);
  --back-text-font-size: 1rem;
  --back-text-font-weight: 500;
  --back-text-transform: uppercase;
  --back-text-bg: var(--mobile-menu-bg);
  --back-text-icon-size: 20px;

  /*# ===== MENU ITEMS GAP ===== */
  --menu-items-gap: 0rem;

  /*# ===== MOBILE ONLY STYLES ===== */
  /* Add & update varibale values for mobile breakpoint */
  html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) & {
    --mobile-menu-radius: var(--overlay-header-radius);
  }

  /*# =====  #MOBILE/OFFCANVAS extras ===== */

  /*## Transitions */
  --mobile-menu-ttf: cubic-bezier(0.3, 0.68, 0.1, 1);

  /*# BREAKIN CONTAINER  (see docs) */
  & .breakin-container {
    padding-inline: var(--menu-item-inline-padding);
    padding-block: var(--menu-item-block-padding);
    background: var(--white, #fff);
    z-index: 99999;
    display: flex;
    flex-direction: column;
    &:has(.dwc-is-cta-2):not(:has(.dwc-is-cta-3)) {
      flex-direction: row;
      gap: 1rem;
    }
  }
}
.style-guide__strip-label {
  font-size: var(--sg-label-size);
font-family: var(--sg-mono);
background: var(--sg-chip-bg);
padding: 0.15em 0.5em;
border-radius: var(--sg-radius);
white-space: nowrap;
}
.bpn-card[data-add-border="true"] {
  border: var(--border);
}
.style-guide__shadow-stage {
  /* Shadows need a lit surface: a shadow on a dark page is invisible, which
   is a property of shadows and not of the tokens. Fixed paper, fixed ink,
   in both schemes, same contract as the spacing rings. */
background: var(--sg-illustration-paper);
color: var(--sg-illustration-ink);
padding: var(--sg-space-l);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sg-space-l);
}
.style-guide__changelog-version {
  font-family: var(--sg-mono);
font-size: var(--sg-label-size);
color: var(--sg-muted);
}
.style-guide__divider-panel {
  /* No color here on purpose, same as .style-guide__dark-panel: the dark one
   carries .bg--dark so ACSS assigns the foreground and currentColor follows. */
gap: var(--sg-space-s);
padding: var(--sg-space-m);
border-radius: var(--sg-radius);
border: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__swatch-name {
  font-size: var(--sg-text-2xs);
  font-family: var(--sg-mono);
  color: var(--sg-muted);
  overflow-wrap: break-word;
  line-height: 1.3;
  padding-block-start: 0.25rem;
}
.style-guide__spacing-band {
  /* The section-spacing diagram shows vertical rhythm, so its bands carry block
   padding only and span the full width. They have no inline padding to run out
   of room with, which is why this one never overflowed. */
background: var(--sg-ring-fill);
border: 2px dashed var(--sg-ring-line);
border-radius: var(--sg-radius-l);
padding-block: var(--sg-ring-space);
}
.style-guide__link-sample {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.style-guide__focus-row {
  display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--sg-space-s);
}
.dwc-header-vars {
  --fallback-section-padding: 83px;
  --dropdown-content-width: 75rem;
  --dropdown-content-default-width: 1200px;
  --header-inline-padding: 1rem;
  --header-block-padding: 0.5rem;
  --header-min-height: 0px;
  --header-bottom-border: 1px solid color-mix(in oklch, black 7%, transparent) !important;

  /* when liquid glass is enabled */
  --liquid-glass-shadow: inset 0 0 2px 1px color-mix(in oklch, white 8%, transparent), inset 0 0 10px 4px color-mix(in oklch, white 10%, transparent), 0 6px 24px color-mix(in oklch, #11111a 6%, transparent), 0 12px 40px color-mix(in oklch, #11111a 5%, transparent);

  /*# ===== SKIP LINKS ===== */
  --skip-link-bg: #111;
  --skip-link-hover-bg: #111;
  --skip-link-font-size: 1rem;
  --skip-link-color: var(--white, #fff);
  --skip-link-hover-color: var(--white, #fff);
  --skip-link-padding: 0.75rem 1.25rem;
  --skip-link-outline: 3px solid var(--primary, #4da3ff);
  --skip-link-radius: 0 0 0.5rem 0.5rem;
  --skip-link-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
  --skip-link-weight: 600;

  /*# ===== ADAPTIVE HEIGHT/STRIPE ====== */
  --adaptive-height-bg: var(--dropdown-content-bg); /*also controls stripe background*/
  --adaptive-height-border: var(--dropdown-content-border-size) solid var(--dropdown-content-border-color);
  --adaptive-height-shadow: 0 0 30px rgb(39 50 59 / 10%);

  /*# ===== STRIPE only ===== */
  --stripe-border-radius: 1rem;

  /*# ===== STICKY/OVERLAY HEADER SPECIAL STYLES ===== */
  /*===== this styles only apply when Special Sticky/Overlay Styles and sticky header is enabled =====*/

  /*# NOTE: */
  /* to change the values that are set on the component options, use !important e.g.   
   --overlay-header-bg:black !important;
  */

  /*## SVG STYLES BEFORE SCROLLING  */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) & :is(path, .cls-1):not(.dwce-dropdown path) {
    /* fill: white; */
  }

  /*## SVG STYLES BEFORE SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) &:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) :is(path, .cls-1):not(.dwce-dropdown path) {
    /* fill: hsl(from #fff h s l / 0.3); */
  }

  /*## SVG STYLES AFTER SCROLLING  */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) & :is(path, .cls-1):not(.dwce-dropdown path) {
    /* fill: url(#GradientFill_1); */
  }

  /*## SVG STYLES AFTER SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) &:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) :is(path, .cls-1):not(.dwce-dropdown path) {
    /* fill: hsl(from #000 h s l / 0.3); */
  }

  /*## STYLES BEFORE SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom &:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) {
    /* add any of the variables above and update value*/
  }

  /*## STYLES BEFORE SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) &:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) &:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING - HOVER*/
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) &:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) {
    /* add any of the variables above and update value*/
  }

  /*## MOBILE STYLES WHEN MENU IS OPEN*/
  .dwc-mobile:has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom &:has(.dwce-toggle.is-active) {
    /* add any of the variables above and update value*/
    /* --overlay-header-bg: white !important; */
  }

  /*# ===== END STICKY/OVERLAY HEADER SPECIAL STYLES ===== */

  /*# ===== MOBILE ONLY STYLES ===== */
  /* add and modify varibales for mobile breakpoint OR use media query if you experience FOUC*/

  html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) & {
    /* --header-inline-padding: 1rem; */
  }
}
#mega-menu-quantum__nav-group--a {
  background: rgb(241 241 241);
      grid-column: 1/-1;
    display: grid;
    align-items: initial;
    grid-template-columns: subgrid;
}
.style-guide__divider-anatomy {
  display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
gap: var(--sg-space-s);
}
.mega-menu-nova__btn {
  padding-inline: 1.5em;
  padding-block: 0.5em;
  background-color: white;
  border: solid var(--primary-clr, crimson) 1px;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 0.5em;
  line-height: 1;

  &:hover {
    background-color: var(--primary-clr, crimson);
    color: white;

    & svg path {
      stroke: white;
    }
  }

  & svg {
    /* --multiplier is define in :root, it flips rotate for RTL layout */
    rotate: calc(var(--multiplier, 1) * -90deg);
    inline-size: 1.125rem;
  }
}
.slide-placeholder-info {
  margin: auto;
  color: white;
  font-size: 14px;
  letter-spacing: 1px;
}
.dwc-slider-nav-custom-svg {
  & svg{
      width: var(--arrow-icon-size);
  height: var(--arrow-icon-size);
  fill: var(--arrow-clr);
  }
}
.style-guide__bpn-surface-card {
  min-block-size: 9rem;
padding: var(--sg-space-m, var(--space-m, 1.25rem));
border: var(--sg-border-width, 1px) solid var(--sg-border, var(--border-color, #ccc));
border-radius: var(--sg-radius, var(--radius, 5px));
display: flex;
flex-direction: column;
justify-content: flex-end;
gap: var(--sg-space-xs, 0.5rem);
&[data-relationship="light"] {
  color: #111 !important;
}
&[data-relationship="dark"] {
  color: #fff !important;
}
}
.bpn-section-media__overlay {
  position: absolute;
inset: 0;
--overlay-z-index: 0;
}
.style-guide__heading-var {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
  background: var(--sg-chip-bg);
  padding: 0.15em 0.5em;
  border-radius: var(--sg-radius);
  white-space: nowrap;
  flex-shrink: 0;
}
.bpn-content-header[data-color-mode="dark"] .bpn-content-header__body-text {
  color: var(--text-light-muted);
}
.style-guide__radius-grid {
  display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 8rem), 1fr));
gap: var(--sg-space-s);
}
.bpn-grid {
  container-type: inline-size;
container-name: bpn-grid;
display: grid;
width: 100%;
gap: var(--space-m);
align-items: stretch;
grid-template-columns: 1fr;
}
.style-guide__var-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
  gap: var(--sg-space-2xs);
  margin: 0;
  padding: 0;
}
.upcdc-footer {
  display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding-block: 0.65rem;
padding-inline: 1rem;
font-size: 0.8125rem;
line-height: 1.4;
text-align: center;
background: var(--base-light);
color: var(--text-dark);
}
.mega-menu-nova__content-inner {
  display: grid;
  gap: 1rem;
  padding: 1.5rem;
  background-color:white;

  :has(> &) {
    container-type: inline-size;
  }

  @container (inline-size >= 67.5rem) {
    grid-template-columns: 0.35fr auto;
  }
}
.style-guide__gap-block {
  padding: var(--sg-space-xs);
  background: hsl(210 80% 92%);
  border: var(--sg-border-width) dashed hsl(210 80% 75%);
  border-radius: var(--sg-radius);
  font-size: var(--sg-label-size);
  color: var(--sg-illustration-ink);
/* Fixed fill, so the text on it has to be fixed too. currentColor follows
   the page and flips white under a dark scheme, which left this label at
   1.1:1 on its own background. Same reason the spacing rings carry
   --sg-illustration-ink. */
}
.hero__image {
  width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.style-guide__bpn-card-demo {
  display: grid;
grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
gap: var(--sg-space-s, var(--space-s, 1rem));
}
.bpn-content-header__sub-heading {
  font-size: var(--text-m);
line-height: 1.6;
color: var(--text-dark);
}
.bpn-scheme-switch {
  display: inline-flex;
align-items: center;
gap: 2px;
padding: 3px;
border-radius: 999px;
border: 1px solid light-dark(rgba(0, 0, 0, 0.14), rgba(255, 255, 255, 0.35));
background: light-dark(rgba(0, 0, 0, 0.05), rgba(255, 255, 255, 0.18));
inline-size: max-content;
max-inline-size: 100%;
line-height: 0;
vertical-align: middle;

:where(
  .bpn-section[data-background="dark"],
  .bpn-section[data-background="ultra-dark"],
  .scheme--dark,
  .bg--dark,
  .bg--ultra-dark
) & {
  color-scheme: dark;
  border-color: rgba(255, 255, 255, 0.55);
  background: rgba(0, 0, 0, 0.35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}

& > button {
  display: inline-grid !important;
  place-items: center;
  inline-size: 1.75rem !important;
  block-size: 1.75rem !important;
  min-inline-size: 1.75rem !important;
  min-block-size: 1.75rem !important;
  padding: 0 !important;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: light-dark(rgba(0, 0, 0, 0.58), rgba(255, 255, 255, 0.92));
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

:where(
  .bpn-section[data-background="dark"],
  .bpn-section[data-background="ultra-dark"],
  .scheme--dark,
  .bg--dark,
  .bg--ultra-dark
) & > button {
  color: #ffffff;
}

& > button:hover {
  color: light-dark(rgba(0, 0, 0, 0.92), #ffffff);
}

& > button:focus-visible {
  outline: 2px solid var(--primary, #2563eb);
  outline-offset: 2px;
}

& > button[aria-checked="true"] {
  background: #ffffff;
  color: rgba(0, 0, 0, 0.92);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

& svg {
  inline-size: 0.95rem !important;
  block-size: 0.95rem !important;
  width: 0.95rem !important;
  height: 0.95rem !important;
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}

:where(
  .bpn-section[data-background="dark"],
  .bpn-section[data-background="ultra-dark"],
  .scheme--dark,
  .bg--dark,
  .bg--ultra-dark
) & svg {
  stroke-width: 2.15;
}
}
.dwc-nest-header {
  &:not(.dwc-mobile [data-overlay-header-mobile='true']:has([data-slide-in-direction='top']) &) {
    padding-inline: var(--header-inline-padding);
    padding-block: var(--header-block-padding);
  }

  background-color: var(--header-bg);
  transition:
    opacity 0.1s,
    transform 0.4s,
    background-color 0.4s;

  :is(.scroll-down, .scroll-up) [data-sticky-header='true'] & {
    background-color: var(--header-bg-sticky);
    --overlay-header-bg: var(--header-bg-sticky);
  }
}
.style-guide__bridge-inner {
  background: var(--sg-surface);
border: var(--sg-border-width) dashed hsl(25 80% 70%);
border-radius: var(--sg-radius);
padding: var(--sg-space-2xs);
font-size: var(--sg-label-size);
color: var(--sg-illustration-ink);
text-align: center;
}
.bpn-section-media__video {
  display: block;
inline-size: 100%;
block-size: 100%;
object-fit: cover;
object-position: center;
position: relative;
z-index: -1;
}
#dwc-header {
  padding-block: 0;
  z-index: 9999;

  body:has([dark-body-bg='true']&) main.etch-builder-block {
    background-color: #15151e;
  }

  /* liquid glass  */
  [data-liquid-glass='true']& .dwc-nest-header:not(.etch-builder-block) {
    --overlay-header-shadow: var(--liquid-shadow);
    border: var(--liquid-glass-border);

    html:not(.dwc-mobile) & {
      backdrop-filter: url(#dwc-liquid-glass) saturate(var(--liquid-glass-saturate));

      /* Safari Specific Fallback Override */
      -webkit-backdrop-filter: blur(var(--header-blur)) saturate(var(--liquid-glass-saturate));

      /* Firefox Specific Fallback Override */
      @supports (-moz-appearance: none) {
        backdrop-filter: blur(var(--header-blur)) saturate(var(--liquid-glass-saturate));
      }
    }

    .dwc-mobile &::before {
      display: block !important;
      content: '';
      position: absolute;
      inset: 0;
      inset-block-start: calc(var(--wp-admin--admin-bar--height, 0px) + 0px);
      z-index: -1;
      backdrop-filter: url(#dwc-liquid-glass) saturate(var(--liquid-glass-saturate));
      border-radius: var(--overlay-header-radius);

      /* Safari Specific Fallback Override */
      -webkit-backdrop-filter: blur(var(--header-blur)) saturate(var(--liquid-glass-saturate));

      /* Firefox Specific Fallback Override */
      @supports (-moz-appearance: none) {
        backdrop-filter: blur(var(--header-blur)) saturate(var(--liquid-glass-saturate));
      }
    }
  }
}
.bpn-section__container {
  position: relative;
z-index: 1;
display: flex;
flex-direction: column;
}
.bpn-card[data-fill-height="true"] {
  height: 100%;
}
.style-guide__text-var {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
  background: var(--sg-chip-bg);
  padding: 0.15em 0.5em;
  border-radius: var(--sg-radius);
  white-space: nowrap;
  flex-shrink: 0;
}
.style-guide__gap-gutter-inner {
  background: var(--sg-surface);
  border: var(--sg-border-width) dashed hsl(25 80% 70%);
  border-radius: var(--sg-radius);
  padding: var(--sg-space-m);
  font-size: var(--sg-label-size);
  color: var(--sg-illustration-ink);
  text-align: center;
/* Fixed fill, so the text on it has to be fixed too. currentColor follows
   the page and flips white under a dark scheme, which left this label at
   1.1:1 on its own background. Same reason the spacing rings carry
   --sg-illustration-ink. */
}
.bpn-content-header[data-centered="true"] .bpn-content-header__footer {
  align-self: stretch;
justify-content: center;
inline-size: 100%;
}
.bpn-section-media[data-padding="tight"] {
  padding-block: var(--section-space-s);
}
.dwc-slider-nav-button-wrapper {
  width: fit-content;
height: fit-content;
}
.bpn-scheme-switch-float {
  position: fixed;
inset-block-end: 1.25rem;
inset-inline-end: 1.25rem;
z-index: 99990;
}
.bpn-content-header__footer {
  display: flex;
flex-flow: row wrap;
align-items: center;
column-gap: var(--space-xs);
row-gap: var(--space-xs);
gap: var(--space-xs);
}
.style-guide__font-card {
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
  gap: var(--sg-space-xs);
}
.bpn-card[data-background="transparent"] {
  background: transparent;
}
.hero__content {
  background-color: var(--white);
  padding-top: var(--space-xl);
  padding-right: var(--space-xl);
  padding-bottom: var(--space-xl);
  padding-left: var(--space-xl);
  width: 600px;
  row-gap: var(--content-gap);
  border-radius: var(--radius-m);
  align-items: flex-start;
}
.dwc-toggle-vars {
  /*# ===== STICKY/OVERLAY HEADER SPECIAL STYLES ===== */
  /*===== this styles only apply when the header div attribute [data-sticky-overlay-special-style] attribute is set to true, and sticky header is enabled =====*/

  /*## STYLES BEFORE SCROLLING */
  html:has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style], .dwce-nav-nested.dwc-open)) .dwc-headroom:not(.scroll-up, .scroll-down) & {
    /* 
    --toggle-color: white !important;
    --toggle-bg: color-mix(in oklch, white 10%, transparent) !important; 
    --label-color: white !important;
    */
  }

  /*## STYLES BEFORE SCROLLING - OPEN */
  html:has([data-sticky-overlay-special-style='true'][data-sticky-header='true'] .dwce-nav-nested.dwc-open):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) & {
    /* --toggle-color: black !important; */
  }

  /*## STYLES AFTER SCROLLING */
  html:has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:not(:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover)) & {
    /* add any of the toggle variables and update value*/
  }

  /*## STYLES AFTER SCROLLING - OPEN */
  html:has([data-sticky-overlay-special-style='true'][data-sticky-header='true'] .dwce-nav-nested.dwc-open):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) & {
    /* --toggle-color: red !important; */
  }
}
.style-guide__bpn-overlay-stage {
  position: relative;
min-block-size: 10rem;
border-radius: var(--sg-radius, var(--radius, 5px));
overflow: hidden;
border: var(--sg-border-width, 1px) solid var(--sg-border, var(--border-color, #ccc));
background-image: url(/wp-content/uploads/bpn-qa/bpn-qa-hero-community.png);
background-size: cover;
background-position: center;
display: flex;
align-items: flex-end;
padding: var(--sg-space-m, var(--space-m, 1.25rem));
color: #fff;
}
.style-guide__contextual-card-sample {
  font-size: var(--sg-text-m);
}
.bpn-content-header__sub-heading[data-bold="true"] {
  font-weight: 700;
}
.style-guide__grid-cell {
  min-block-size: 3rem;
display: grid;
place-items: center;
background: hsl(260 60% 92%);
border: var(--sg-border-width) dashed hsl(260 60% 75%);
border-radius: var(--sg-radius);
font-size: var(--sg-label-size);
font-family: var(--sg-mono);
/* Fixed fill, fixed ink, same reason as the gap blocks. */
color: var(--sg-illustration-ink);
}
.bpn-flex[data-align="top"] {
  align-items: flex-start;
}
.nav-group-wrapper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr));
}
.bpn-section[data-padding="spacious"] {
  padding-block: var(--section-space-l);
}
.bpn-card[data-background="light"] {
  background: var(--bg-light);
}
.style-guide__bpn-overlay-copy {
  position: relative;
z-index: 1;
margin: 0;
max-inline-size: 36rem;
color: #fff;
text-shadow: 0 1px 2px color-mix(in srgb, #000 45%, transparent);
}
.info__heading {
  font-size: var(--h1);
}
.bpn-section-media[data-min-height="standard"] {
  min-block-size: 28rem;
}
.bpn-section__content[data-item-gap="tight"] {
  gap: var(--space-s);
}
.dwc-slider-controls-wrapper {
  display: flex;
}
.style-guide__toc-link {
  font-size: var(--sg-text-s);
font-weight: 600;
color: currentColor;
text-decoration: none;
&:hover { text-decoration: underline; }
/* The section you are in is marked by weight and a rule, never by colour
   alone: colour alone fails for anyone who cannot separate the two. */
&[data-sg-current] {
  text-decoration: underline;
  text-decoration-thickness: var(--sg-rule-width);
  text-underline-offset: 0.3em;
}
}
.bpn-flex[data-direction="column"] {
  flex-direction: column;
}
.style-guide__var-pair {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sg-space-xs);
  padding: var(--sg-space-2xs) var(--sg-space-xs);
  background: var(--sg-surface);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
}
.bpn-core-pattern-label {
  display: inline-block;
font-size: var(--text-s, 0.875rem);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--text-dark-muted, #71717a);
margin-block-end: var(--space-s);
padding: var(--space-2xs) var(--space-xs);
border-radius: var(--radius-s, 0.375rem);
background: color-mix(in srgb, var(--white) 88%, transparent);
}
.bpn-section-media > [data-etch-element="container"] {
  position: relative;
z-index: 1;
flex: 1;
display: flex;
flex-direction: column;
gap: var(--space-m);
justify-content: flex-start;
inline-size: 100%;
}
.slider-wrapper-instructions {
  display: flex;
  flex-direction: column;
  min-block-size: 20vh;
  max-block-size: none;
  align-items: center;
	justify-content: center;
}
.bpn-section {
  position: relative;
isolation: isolate;
/* Base band — vertical padding from etch-section-style unless data-padding overrides */
}
.style-guide__grid-demo {
  /* Frame only. The grid itself is the inline declaration on the block,
   which is the ACSS 4 idiom: variables on your own class, no .grid--*
   utility classes (removed in 4.0). */
padding: var(--sg-space-m);
background: var(--sg-surface);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
}
.bpn-card[data-background="primary"] {
  background: var(--primary-ultra-light);
}
.style-guide__gap-demo-section {
  gap: var(--sg-space-2xs);
}
.bpn-content-header__body {
  display: flex;
flex-direction: column;
gap: var(--card-gap);
}
.bpn-section-media > [data-etch-element="container"][data-content-width="narrow"] {
  max-width: var(--content-width-narrow, 48rem);
margin-inline: auto;
}
.style-guide__gap-gutter-demo {
  background: hsl(25 80% 90%);
  border: var(--sg-border-width) solid var(--sg-border);
  border-radius: var(--sg-radius);
  padding-inline: var(--gutter);
  padding-block: var(--sg-space-m);
}
.bpn-card__content[data-content-gap="spacious"] {
  gap: var(--space-l);
}
.style-guide__font-family-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  gap: var(--sg-space-m);
}
.mega-menu-quantum__content-group {
  padding-inline: 1rem;
  padding-block-start: 1rem;
  inline-size: 100%;
  row-gap: 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: start;

  @container (width > 1041px) {
    & {
      border-right: 1px solid lightgray;
    }
  }

  @container (width <= 1040px) {
    & {
      grid-column: 1/-1;
    }

    & > img {
      max-block-size: 300px;
      object-fit: cover;
      object-position: bottom;
      inline-size: 100%;
    }
  }
}
.bpn-section-media > [data-etch-element="container"][data-vertical-align="bottom"] {
  justify-content: flex-end;
}
.style-guide__unset-label {
  /* The chip that names the absence. Sized and coloured like every other
   label in the guide, so it reads as annotation rather than as content. */
font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
line-height: 1.2;
color: var(--sg-muted);
background: var(--sg-surface);
border: var(--sg-border-width) solid var(--sg-border);
padding: 0.2em 0.45em;
border-radius: var(--sg-radius);
white-space: nowrap;
align-self: center;
}
.bpn-content-header[data-color-mode="dark"] {
  color: var(--text-light);
}
.style-guide__divider-bar {
  /* One token at a time: height or width comes from the inline style, the ink
   is currentColor so the bar stays visible on any surface. */
inline-size: 100%;
block-size: var(--sg-rule-width);
background: currentColor;
}
.bpn-content-header__footer .bpn-content-header__cta:not(.btn--primary):not(.btn--secondary):not(.btn--accent):not(.btn--base) {
  font-weight: 600;
color: var(--primary);
text-decoration: none;
}
.style-guide__strip-sample {
  font-size: var(--sg-text-s);
margin: 0;
}
.style-guide__changelog-list {
  display: flex;
flex-direction: column;
gap: var(--sg-space-2xs);
margin-block: var(--sg-space-xs) 0;
padding-inline-start: 0;
list-style: none;
font-size: var(--sg-text-s);
}
.bpn-grid[data-vertical-align="stretch"] .bpn-grid__cell > .bpn-grid__slot, .bpn-grid:not([data-vertical-align]) .bpn-grid__cell > .bpn-grid__slot {
  flex: 1 1 auto;
min-height: 100%;
}
.style-guide__subsection {
  gap: var(--sg-space-m);
/* [id] because that is what ACSS's competing rule selects, and a bare class
   ties with it and loses on order. This also says the true thing: the scroll
   margin only matters on an element something can jump to. */
&[id] { scroll-margin-block-start: var(--sg-toc-offset); }
}
.bpn-card__content {
  display: flex;
flex-direction: column;
gap: var(--space-m);
width: 100%;
flex: 1 1 auto;
min-width: 0;
}
.style-guide__toc-summary {
  /* The native marker is kept on purpose: it is the only affordance that says
   this thing opens, and it is already keyboard and screen-reader correct. */
cursor: pointer;
font-size: var(--sg-label-size);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--sg-muted);

/* Pinned to the switch's box, minus the bar's own padding and border, so the
   closed bar and the scheme switch are the same height by construction. The
   bar's height used to be font-dependent: the chrome font SIZE is fixed but
   the family inherits from the site, and 12px Mada renders a 19.2px line
   where the reference font rendered taller. Measured: bar 37.6px against
   the 42px button on one site, 42.4px on another. One token now drives
   both. */
block-size: calc(var(--sg-switch-box) - 2 * var(--sg-space-2xs) - 2 * var(--sg-border-width));
/* line-height equal to the block centres the single line without display:
   flex, which would silently remove the native disclosure marker kept on
   purpose above. */
line-height: calc(var(--sg-switch-box) - 2 * var(--sg-space-2xs) - 2 * var(--sg-border-width));
}
.bpn-section-media > [data-etch-element="container"][data-item-gap="tight"] {
  gap: var(--space-s);
}
.style-guide__shadow-text {
  font-size: var(--sg-text-xl);
font-weight: 700;
margin: 0;
}
.bpn-section-media[data-min-height="tall"] {
  min-block-size: 36rem;
}
.style-guide__text-sample {
  margin: 0;
line-height: 1.4;
}
.style-guide__surface-strip {
  padding: var(--sg-space-s) var(--sg-space-m);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: var(--sg-space-xs) var(--sg-space-m);
}
.bpn-flex__item {
  min-width: 0;
display: flex;
flex-direction: column;
}
.info__media-wrapper {
  justify-content: flex-start;
}
.style-guide__font-card-name {
  /* The family the token resolves to, read off the rendered specimen by the
   script. Static text is a single space so the slot exists before the script
   runs and the card does not jump when it is filled. */
font-size: var(--sg-text-m);
font-weight: 600;
color: currentColor;
min-block-size: 1.5em;
}
.mega-menu-nova__title-icon {
  width: 30px;
  height: auto;
}
.style-guide__bpn-surface-card[data-relationship="dark"] {
  color: #fff !important;
}
.mega-menu-quantum__btn {
  inline-size: 100%;
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: var(--content-gap, 0.5rem);
  background-color: black;
  color: white;
  text-transform: capitalize;
  padding-block: 0.5rem;
  padding-inline: 1rem;
  margin-top: auto;
  text-decoration: none;

  &:hover {
    background-color: var(--primary-clr, crimson);
    color: white;
  }

  & svg path {
    stroke: white;
  }
}
.style-guide__scheme-swatch-name {
  font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
color: var(--sg-muted);
white-space: nowrap;
}
.style-guide__shadow-drop {
  /* filter on the parent, clip-path on the child: clipping and filtering the
   same element would clip the shadow away with it. */
display: grid;
place-items: center;
}
.hero__text-tagline {
  line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: .095em;
}
.bpn-section[data-background="ultra-dark"] {
  background-color: var(--bg-ultra-dark);
color: var(--text-light);
}
.style-guide__container {
  gap: var(--sg-space-l);
}
.bpn-content-header[data-width="narrow"][data-centered="true"] {
  margin-inline: auto;
align-self: center;
}
.style-guide__spacing-ring {
  background: var(--sg-ring-fill);
border: 2px dashed var(--sg-ring-line);
border-radius: var(--sg-radius-l);
padding: var(--sg-ring-space);

/* Above the threshold the rings stretch to the wrap, which is what makes the
   diagram read as one nested object. Below it they take their natural size
   and the wrap scrolls, instead of being squeezed until their contents spill.

   The threshold is measured, not chosen: the diagram needs 539px in a 524px
   wrap at a 600px viewport, and clears with 100px to spare by 768px, so it
   crosses at roughly 34rem of container. 36rem leaves room for a longer label
   or a different monospace fallback. */
@container (inline-size < 36rem) {
  & { min-inline-size: max-content; }
}
}
.info__container {
  display: grid;
  align-items: center;
 grid-template-columns: 1fr; 
  margin-bottom: 0;
  margin-left: auto;
  margin-right: auto;
 
  @container info-layout (min-width: 768px) {
    grid-template-columns: repeat(2, 1fr);
    max-width: 1100px;
}
}
.style-guide__bpn-card-sample {
  margin: 0;
font-size: var(--text-m, 1rem);
line-height: 1.45;
}
.style-guide__dark-panel-label {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  margin: 0;
color: var(--sg-muted);
}
.style-guide__divider-item {
  gap: var(--sg-space-2xs);
padding: var(--sg-space-xs);
background: var(--sg-surface);
border-radius: var(--sg-radius);
border: var(--sg-border-width) solid var(--sg-border);
}
.hero__media-wrapper {
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  z-index: -1;
  &::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Black overlay with 60% opacity - change 0.6 to adjust darkness */
    background-color: rgba(0, 0, 0, 0.4); 
    z-index: 1; /* Ensures overlay sits on top of the image */
    pointer-events: none;
}
}
.bpn-section-media > [data-etch-element="container"][data-vertical-align="center"] {
  justify-content: center;
}
.mega-menu-quantum__dropdown-title {
  font-size: 1.125rem;
  font-weight: 500
}
.bpn-section-media > [data-etch-element="container"][data-content-width="full"] {
  max-width: none;
width: 100%;
}
.bpn-section__container[data-content-width="full"] {
  max-width: none;
width: 100%;
}
.dwc-nest-header__container {
  justify-content: space-between;
  flex-direction: row;
  min-height: var(--header-min-height);
  margin-inline: auto;
  align-items: center;

  /*when overlay header is active on mobile, and menu slides in from top, use the header padding  */
  .dwc-mobile [data-overlay-header-mobile='true']:has([data-slide-in-direction='top']) & {
    padding-inline: var(--header-inline-padding);
    padding-block: var(--header-block-padding);
  }
}
.style-guide__shadow-box {
  inline-size: 9rem;
block-size: 5.5rem;
background: var(--sg-illustration-paper);
border-radius: var(--sg-radius);
display: grid;
place-items: center;
font-size: var(--sg-label-size);
font-family: var(--sg-mono);
}
.style-guide__divider-row {
  flex-direction: row;
align-items: center;
gap: var(--sg-space-xs);
}
.bpn-card[data-fill-height="true"] .bpn-card__content .bpn-content-header {
  display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.mega-menu-quantum-link__icon {
  /* --multiplier is define in :root, it flips rotate for RTL layout */
  rotate: calc(var(--multiplier, 1) * 270deg); 
  inline-size: 1.125rem;
}
.style-guide__hidden-demo {
  padding: var(--sg-space-s) var(--sg-space-m);
background: var(--sg-surface);
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius);
}
.upcdc-hide-header {
  display: none;
}
.info__image {
  object-fit: contain;
}
.style-guide__body-text-demo {
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
  max-inline-size: var(--sg-measure);
  gap: var(--sg-space-xs);
}
.bpn-grid[data-vertical-align="center"] {
  align-items: center;
}
.dwc-nav-wrapper {
  inline-size: 100%;
  max-inline-size: 100%
}
.style-guide__dark-panel-section-label--first {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 0;
color: var(--sg-muted);
}
.bpn-flex[data-align="stretch"] .bpn-flex__item > .bpn-flex__slot > .bpn-card, .bpn-flex[data-align="stretch"] .bpn-flex__item > .bpn-card {
  flex: 1 1 auto;
min-height: 100%;
}
.style-guide__scheme-group {
  display: flex;
flex-direction: column;
gap: var(--sg-space-2xs);
}
.style-guide__gap-grid-demo {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--grid-gap);
  padding: var(--sg-space-m);
  background: var(--sg-surface);
  border: var(--sg-border-width) solid var(--sg-border);
  border-radius: var(--sg-radius);
}
.style-guide__subsection-desc {
  font-size: var(--sg-text-s);
color: var(--sg-muted);
margin: 0;
max-inline-size: var(--sg-measure);
}
.bpn-flex[data-gap="tight"] {
  gap: var(--space-s);
}
.style-guide__divider-styled {
  /* Shows --divider-style on its own: width and colour are chrome so the
   dashed / dotted / solid keyword is the only variable in the picture. */
inline-size: 100%;
border-block-start-width: var(--sg-rule-width);
border-block-start-color: currentColor;
}
.autoplay-toggle-container {
  inline-size: var(--play-pause-size);
  block-size: var(--play-pause-size);
  flex-shrink: 0;
  & > button {
    inline-size: 100%;
    block-size: 100%;
  }
}
.bpn-content-header__cta {
  display: inline-flex;
align-items: center;
flex-shrink: 0;
}
.style-guide__swatch-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(var(--sg-swatch-min), 1fr));
  gap: var(--sg-space-2xs);
}
.bpn-grid[data-vertical-align="stretch"] .bpn-grid__cell > .bpn-grid__slot > .bpn-card, .bpn-grid:not([data-vertical-align]) .bpn-grid__cell > .bpn-grid__slot > .bpn-card, .bpn-grid[data-vertical-align="stretch"] .bpn-grid__cell > .bpn-card, .bpn-grid:not([data-vertical-align]) .bpn-grid__cell > .bpn-card {
  flex: 1 1 auto;
min-height: 100%;
}
.dwc-slider-pagination-wrapper {
  /*  General pagination styles */
  display: flex;
  gap: var(--gap);
  flex-direction: var(--direction);
  position: var(--position);
  z-index: var(--z-index);
  block-size: fit-content;

  /*  Default pagination styles */
  [data-custom-pagination='default']& {
    padding: var(--padding);
    background-color: var(--bg);
    backdrop-filter: blur(var(--blur));
    border-radius: var(--radius);
    font-size: var(--font-size);

    & .splide__pagination__page {
      width: var(--dot-size);
      height: var(--dot-size);
      border-radius: var(--dot-radius);
      border: none;
      color: var(--dot-color);
      background: var(--dot-bg);
      cursor: pointer;
      padding: 0;
      transition: all var(--sc-transition);
      line-height: 1;

      &.is-active {
        background: var(--dot-bg-active);
        transform: scale(1.3);
        color: var(--active-dot-color);
      }
    }
  }
  /*  END Default pagination styles */
}
.style-guide__toc-list {
  /* Same auto-fill idiom as every other grid in the guide, so the column count
   follows the width without a breakpoint. Capped and scrollable: open, 26
   entries would otherwise cover the viewport the bar is meant to help you
   move around in. */
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, 13rem), 1fr));
gap: var(--sg-space-s);
list-style: none;
margin: var(--sg-space-s) 0 0;
padding: 0;
max-block-size: min(60vh, 28rem);
overflow-y: auto;
& li { margin: 0; }
}
.bpn-card[data-shadow="elevated"] {
  box-shadow: var(--box-shadow-3);
}
.bpn-card[data-fill-height="true"] .bpn-card__content {
  display: flex;
flex-direction: column;
flex: 1 1 auto;
min-height: 0;
}
.style-guide__scheme-swatch-item {
  /* Chip beside its name rather than above it. The names are the reason this
   section exists and --primary-ultra-light is three times the width of a 3rem
   chip, so stacking them would set the column width from the label and leave
   the colours floating in space. */
display: flex;
align-items: center;
gap: var(--sg-space-3xs);
}
.style-guide__divider-panel--light {
  background: var(--sg-surface);
}
.dwc-dropdown-items-vars {
  /*## DROPDOWN CONTENT */
  --dropdown-content-bg: var(--white, #fff);
  --dropdown-content-block-padding: var(--dropdown-content-inline-padding);
  --dropdown-content-inline-padding: min(calc(var(--dropdown-item-radius) / 3), 0.5em);

  /*## DEFAULT STATE */
  --dropdown-item-clr: var(--black, #000);
  --dropdown-item-font-size: var(--menu-item-font-size);
  --dropdown-item-bg: initial;
  --dropdown-indent-bg: rgb(40 60 150 / 5%);
  --dropdown-heading-clr: var(--primary-clr);

  /*## HOVER STATE */
  --dropdown-item-hover-clr: var(--menu-item-hover-clr);
  --dropdown-item-hover-bg: hsl(from var(--primary-clr) h s l / 5%);

  /*## EXPANDED STATE (PARENT) - mobile */
  /* when [data-submenu-reveal="expand"] */
  --dropdown-expanded-clr: var(--white, #fff);
  --dropdown-expanded-bg: var(--black, #000);

  /*## PADDING | GAP | INDENT */
  --dropdown-item-inline-padding: var(--menu-item-inline-padding);
  --dropdown-item-block-padding: var(--menu-item-block-padding);
  --dropdown-indent: 0.6rem;
  --dropdown-indent-item-pad-offset: 0.5;
  --dropdown-indent-line: solid 1px rgb(40 60 150 / 20%);

  /*## RADIUS */
  --dropdown-item-radius: var(--dropdown-content-border-radius);
  /*  --dropdown-content-border-radius is set in the DWC Nav component props > DROPDOWN > Dropdown Content Radius
  When stripe style is enabled, the dropdown content radius inherits the stripe radius, found in DWC Header variables
  */

  /*# ===== APPEARANCE: BUTTON ===== */

  &[appearance='button'] > .dwc-submenu-toggle {
    --menu-item-bg: var(--black, #000);
    --menu-item-clr: var(--white, #fff);
    --menu-item-hover-clr: var(--white, #fff);
    --menu-item-hover-bg: var(--black, #000);
    --menu-item-radius: 50vw;
    --menu-item-hover-border-height: 0;
    --icon-size: 0;
    --icon-clr: var(--white, #fff);
    --icon-hover-clr: var(--white, #fff);
    --menu-item-inline-padding: 1.5rem;
    --menu-item-block-padding: 1rem;
    --chevron-clr: var(--icon-clr);
    --chevron-hover-clr: var(--icon-hover-clr);
    --chevron-size: var(--icon-size);

    /*## mobile only*/
    --menu-item-width: 200px;
    --menu-item-border: solid 1px transparent;
    --menu-item-hover-border: solid 1px transparent;
  }

  /*# ===== APPEARANCE: ICON ===== */

  &[appearance='icon'] {
    --icon-button-inline-padding: var(--menu-item-inline-padding);
  }

  &[appearance='icon'] > .dwc-submenu-toggle {
    --menu-item-bg: var(--black, #000);
    --menu-item-clr: var(--white, #fff);
    --menu-item-hover-clr: var(--white, #fff);
    --menu-item-hover-bg: var(--black, #000);
    --icon-clr: var(--white, #fff);
    --icon-hover-clr: var(--white, #fff);
    --icon-size: 0.875rem;
    --menu-item-inline-padding: 1.1rem;
    --button-max-diameter: 2.8125rem;
    --menu-item-radius: 50vw;
    --menu-item-border: solid 1px transparent;
    --menu-item-hover-border: solid 1px transparent;
    --chevron-clr: var(--icon-clr);
    --chevron-hover-clr: var(--icon-hover-clr);
    --chevron-size: var(--icon-size);
  }

  /*# ===== STICKY/OVERLAY HEADER SPECIAL STYLES ===== */
  /*===== this styles only apply when the header div attribute [data-sticky-overlay-special-style] attribute is set to true, and sticky header is enabled =====*/

  /*## STYLES BEFORE SCROLLING - HOVER */
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:not(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items & {
    /* add any of the variables above and update value*/
  }

  /*## STYLES AFTER SCROLLING - HOVER*/
  html:not(.dwc-mobile):has([data-sticky-overlay-special-style='true'][data-sticky-header='true']):not(:has([data-no-sticky], [data-no-overlay-style])) .dwc-headroom:is(.scroll-up, .scroll-down) .dwce-nav-nested:has(.dwce-dropdown.open, .dwc-nav-nested-items > li:hover) .dwc-nav-nested-items & {
    /* add any of the variables above and update value*/
  }

  /*# ===== MOBILE ONLY STYLES ===== */
  /* add and modify varibales for mobile breakpoint */

  html:is(.dwc-mobile:not(:has([data-offcanvas='true'])), .dwc-offcanvas-mobile) & {
    --dropdown-item-font-size: var(--menu-item-font-size);
  }
}
.dwc-nest-toggle--open {
  gap: var(--label-gap);
}
.style-guide__version {
  /* The Dev Note carries the same line, but it is builder-only and gated on
   user.loggedIn, so on the front end this is the only place the version
   exists at all. Chrome, so it reads --sg-* and never a project token. */
margin: var(--sg-space-2xs) 0 0;
font-family: var(--sg-mono);
font-size: var(--sg-label-size);
color: var(--sg-muted);
}
.bpn-card[data-background="accent"] {
  background: var(--accent-ultra-light);
}
.bpn-flex[data-align="stretch"] .bpn-flex__item > .bpn-flex__slot {
  flex: 1 1 auto;
min-height: 100%;
}
.bpn-flex[data-justify="space-between"] {
  justify-content: space-between;
}
.style-guide__section-title {
  font-size: var(--sg-text-heading);
line-height: 1.2;
margin: 0;
}
.style-guide__toc-sublink {
  font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
color: var(--sg-muted);
text-decoration: none;
&:hover { text-decoration: underline; }
}
.style-guide__swatch-color {
  block-size: var(--sg-swatch-height);
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
/* A painted swatch gets both fixed edges, so one of them is always visible
   (see --sg-swatch-edge). An unset swatch keeps the currentColor border
   instead: it is transparent and hatched, so its edge belongs to whatever
   surface shows through, not to a fill of its own. */
&:not([data-sg-unset]) {
  border-color: var(--sg-swatch-edge);
  box-shadow: inset 0 0 0 var(--sg-border-width) var(--sg-swatch-ring);
}
}
.style-guide__button-group-label {
  font-size: var(--sg-label-size);
  color: var(--sg-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
}
.bpn-content-header__header {
  display: flex;
flex-direction: column;
gap: var(--space-xs);
}
.style-guide__divider-swatch {
  block-size: 2rem;
border-radius: var(--sg-radius);
border: var(--sg-border-width) solid var(--sg-border);
}
.style-guide__button-grid {
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--sg-space-xs);
  align-items: center;
}
.dwc-slider-nav-btn {
  /* max-inline-size: fit-content; */
  display: grid;
  place-items: center;
  white-space: nowrap;

  &:has(.dwc-default-slider-nav-icon, .dwc-slider-nav-custom-svg, [data-slide-title]) {
    color: var(--arrow-clr);
    font-size: var(--arrow-icon-size);
    min-width: calc(var(--arrow-width) + var(--title-width, 0px));
    min-height: var(--arrow-height);
    border: var(--arrow-border);
    border-radius: var(--arrow-radius);
    background: var(--arrow-bg);
    backdrop-filter: blur(var(--arrow-bg-blur));
    -webkit-backdrop-filter: blur(var(--arrow-bg-blur));
    cursor: pointer;
    transition: var(--arrow-transition);
    padding: var(--arrow-padding);
    aspect-ratio: var(--arrow-aspect-ratio);

    &:hover {
      background: var(--arrow-hover-bg);
      border-color: var(--arrow-hover-border-clr);
      color: var(--arrow-hover-clr);

      & svg {
        fill: var(--arrow-hover-clr);
      }
    }
  }
}
.bpn-content-header[data-width="narrow"] {
  inline-size: 100%;
max-inline-size: var(--content-width-narrow, 48rem);
}
.style-guide__changelog-item {
  /* The version gets its own column so the labels line up and the eye can scan
   down them. Below 30rem there is no room for two columns and it stacks. */
display: grid;
grid-template-columns: minmax(2.75rem, auto) 1fr;
gap: var(--sg-space-xs);
align-items: baseline;

@media (width < 30rem) {
  & {
    grid-template-columns: 1fr;
    gap: var(--sg-space-3xs);
  }
}
}
.bpn-grid__cell {
  min-width: 0;
display: flex;
flex-direction: column;
}
.style-guide__title-section {
  /* The page header, not a guide section: tighter than the section rhythm
   and no anchor, so the TOC check has nothing unlisted to complain about. */
padding-block: var(--sg-space-l) 0;
}
.style-guide__section {
  /* ACSS gives top-level sections --section-space-m block padding, which
   would let a project token drive the guide own rhythm. Pin it. */
padding-block: var(--sg-space-2xl);
/* [id] because that is what ACSS's competing rule selects, and a bare class
   ties with it and loses on order. This also says the true thing: the scroll
   margin only matters on an element something can jump to. */
&[id] { scroll-margin-block-start: var(--sg-toc-offset); }
}
.style-guide__toc {
  /* The panel is pinned by its container, and being pinned forces one decision
   here: it has to be opaque. Every colour in the chrome is translucent by
   design, and a list of links with the page scrolling through it is unreadable.

   Canvas is the browser's own page background. It follows color-scheme, so it
   is correct in light and dark without inventing a colour and without reaching
   for a project token, which SPEC 3.4 forbids. */
background: Canvas;
border: var(--sg-border-width) solid var(--sg-border);
border-radius: var(--sg-radius-l);
padding: var(--sg-space-2xs) var(--sg-space-s);
margin-block-end: var(--sg-space-m);

/* The bar shares its sticky row with the scheme toggle and gives up the
   width the button needs. min-inline-size so a long section name cannot
   push the button off the row. */
flex: 1 1 auto;
min-inline-size: 0;
}
.style-guide__scheme-group-label {
  /* The whole point of this section, and it was missing: which of these move.
   Sized as a caption, not a heading, so it labels the row without competing
   with the card title above it. */
font-size: var(--sg-text-2xs);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--sg-muted);
}
.style-guide__changelog-summary {
  cursor: pointer;
font-size: var(--sg-label-size);
text-transform: uppercase;
letter-spacing: 0.1em;
font-weight: 600;
color: var(--sg-muted);
}
.info__content {
  row-gap: var(--content-gap);

  justify-content: center;
  padding-top: var(--space-l);
  padding-bottom: var(--space-l);
  padding-inline: var(--space-m);
  max-width: 540px;
  display: flex;
  flex-direction: column;
  align-items: center;
   margin-left: auto;
  margin-right: auto;
}
.style-guide__radius-item {
  gap: var(--sg-space-2xs);
align-items: center;

/* The flex-div's own display would defeat the UA [hidden] rule, and hidden
   is how an optional step leaves when its dashboard switch is off. */
&[hidden] { display: none; }
}
.style-guide__dark-panel-section-label {
  font-size: var(--sg-label-size);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  margin: 0;
  margin-block-start: var(--sg-space-l);
  padding-block-start: var(--sg-space-l);
  border-block-start: var(--sg-border-width) solid currentColor;
color: var(--sg-muted);
}
.mega-menu-nova__li {
  font-weight: 600;
  color: black;
  display: flex;
  align-items: baseline;
  letter-spacing: 0;
  justify-content: center;
  list-style-type: none;
  /* Removes default bullets */
  position: relative;
  padding-inline-start: 20px;
  flex-direction: column;
  /* Space for custom bullet */

  &::before {
    content: '•';
    /* Custom bullet (can be changed) */
    position: absolute;
    inset-inline-start: 0;
    color: var(--menu-item-hover-clr);
    /* Adjust bullet color */
    font-size: 16px;
  }

  &:hover a {
    color: var(--primary-clr, crimson);
  }
}
.bpn-content-header__title[data-visual-style="card-title"] {
  font-size: var(--h3);
font-weight: var(--heading-font-weight);
}
.style-guide__scheme-swatch {
  inline-size: 3rem;
  block-size: 2rem;
  border-radius: var(--sg-radius);
  border: var(--sg-border-width) solid var(--sg-border);
/* A painted swatch gets both fixed edges, so one of them is always visible
   (see --sg-swatch-edge). An unset swatch keeps the currentColor border
   instead: it is transparent and hatched, so its edge belongs to whatever
   surface shows through, not to a fill of its own. */
&:not([data-sg-unset]) {
  border-color: var(--sg-swatch-edge);
  box-shadow: inset 0 0 0 var(--sg-border-width) var(--sg-swatch-ring);
}
}
.bpn-card[data-background="dark"] {
  background: var(--bg-dark);
}
.style-guide__spacing-nest-label {
  font-size: var(--sg-label-size);
  font-family: var(--sg-mono);
  color: currentColor;
  background: var(--sg-chip-bg);
  padding: 0.15em 0.5em;
  border-radius: var(--sg-radius);
  white-space: nowrap;
  flex-shrink: 0;
}
.style-guide__toc-sublist {
  list-style: none;
margin: var(--sg-space-3xs) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--sg-space-3xs);
}
.hero__container {
  display: flex;
	flex-direction: row;
}
.info__figure {
  display: flex;
  flex-direction: row;
	justify-content: center;
}
.bpn-content-header__title[data-visual-style="item-title"] {
  font-size: var(--h4);
font-weight: var(--heading-font-weight);
}
.style-guide__zone-label {
  font-size: var(--sg-label-size);
font-family: var(--sg-mono);
overflow-wrap: anywhere;
}
.style-guide__spacing-nest-core {
  background: var(--sg-illustration-ink);
color: var(--sg-illustration-paper);
padding: var(--sg-space-xs);
border-radius: var(--sg-radius);
font-size: var(--sg-label-size);
font-family: var(--sg-mono);
text-align: center;
white-space: nowrap;
}
.hero {
  position: relative;
  isolation: isolate;
  min-height: 100dvh;
  justify-content: center;
  background-color: var(--base-light);
padding-block: 0;
}
.style-guide__heading-sample {
  margin: 0;
line-height: 1.2;
}
.bpn-flex[data-justify="center"] {
  justify-content: center;
}
.bpn-section-media .bpn-content-header__title[data-visual-style="page-title"], .bpn-section-media .bpn-content-header__title[data-visual-style="section-title"], .bpn-section-media .bpn-content-header__title[data-visual-style="card-title"] {
  color: light-dark(#ffffff, #ffffff);
}
.style-guide__scheme-swatch-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.style-guide__link-sample-label {
  font-size: var(--sg-text-2xs);
font-family: var(--sg-mono);
color: var(--sg-muted);
}
.bpn-content-header {
  display: flex;
flex-direction: column;
gap: var(--space-s);
}
.dwc-progress-container {
  & > .sc-bar-progress{
    block-size: var(--progress-height);
  }
}
.bpn-section[data-background="light"] {
  background-color: var(--bg-light);
color: var(--text-dark);
}
.style-guide__shadow-drop-shape {
  inline-size: 4rem;
aspect-ratio: 1;
background: var(--sg-illustration-ink);
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
.bpn-grid[data-gap="spacious"] {
  gap: var(--space-l);
}