/* ============================================================
   Leahy Consulting Documentation hub — Material overrides.
   Matches pulse-extra.css used by the product doc sites, plus the
   hub's brand components (figures, logo banners, logo strip, cards).
   ============================================================ */

/* ── Brand colour overrides ── */
:root {
  --md-primary-fg-color: #4051B5;
  --md-primary-fg-color--light: #5D6CC0;
  --md-primary-fg-color--dark: #303FA1;
  --md-accent-fg-color: #526CFE;
  --pulse-danger: #EF5350;
  --pulse-warn: #FFA726;
  --pulse-success: #66BB6A;
}

/* ── Header logo ── */
/* The wordmark is dark type on white, and the header bar is indigo, so it sits
   on a white chip. Sized by height; Material's default .md-header__button box
   is square and would letterbox a wide mark. */
.md-header__button.md-logo {
  padding: 0;
  margin: .2rem .4rem .2rem .2rem;
}
.md-header__button.md-logo img,
.md-header__button.md-logo svg {
  width: auto;
  height: 1.55rem;
  padding: .18rem .32rem;
  border-radius: 5px;
  background: #fff;
  box-sizing: content-box;
}
@media screen and (max-width: 76.1875em) {
  .md-header__button.md-logo img { height: 1.35rem; }
}

/* ── Header sign-in ── */
/* Sign in or Sign out, added at the right-hand end of the header by
   hub-assets/sign-in.js. Every other control on the bar is an icon, so this
   one carries a hairline outline to read as a control rather than as more of
   the title, at the height of the search box beside it. It keeps Material's
   header-button hover and colour, and replaces the accent focus ring, which
   barely shows against the primary colour, with one in the bar's text colour. */
.md-header__button.ldn-signin {
  flex-shrink: 0;
  margin: 0 .4rem 0 .6rem;
  padding: .25rem .6rem;
  border: .05rem solid var(--md-primary-bg-color--light);
  border-radius: .1rem;
  font-size: .7rem;
  font-weight: 700;
  line-height: 1.2rem;
  white-space: nowrap;
}
.md-header__button.ldn-signin:focus-visible {
  outline: .1rem solid var(--md-primary-bg-color);
  outline-offset: .1rem;
}
@media screen and (max-width: 44.98em) {
  .md-header__button.ldn-signin { margin: 0 .2rem; padding: .25rem .45rem; }
}

/* ── Navigation tweaks (same as doc sites) ── */
.md-nav__title { font-weight: 700; }
.md-sidebar--primary { border-right: 1px solid var(--md-default-fg-color--lightest); }

/* The sidebar is one collapsible tree. Root entries (Home, Pulse Dashboard,
   each product, Support & Services) are bold whether or not they have
   children, so the top level reads as one list. */
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__link,
.md-nav--primary > .md-nav__list > .md-nav__item > .md-nav__container > .md-nav__link {
  font-weight: 700;
}

/* ── Table improvements (same as doc sites) ── */
.md-typeset table:not([class]) {
  width: 100%;
  border-collapse: collapse;
}
.md-typeset table:not([class]) th {
  background-color: var(--md-primary-fg-color);
  color: #fff;
  padding: .5rem .75rem;
}
.md-typeset table:not([class]) td { padding: .45rem .75rem; }
.md-typeset table:not([class]) tr:nth-child(even) td {
  background-color: var(--md-code-bg-color);
}

/* ── Front-page product cards ── */
.md-typeset .grid.cards > ul > li,
.md-typeset .grid.cards > :is(ul, ol) > li {
  border-radius: 8px;
}
.md-typeset .grid.cards img.card-logo {
  height: 30px;
  width: auto;
  max-width: 100%;
  display: inline-block;
  margin: .1rem 0;
  padding: .25rem .5rem;
  border-radius: 6px;
  box-sizing: content-box;
}

/* ── Product page masthead (official wordmark, borderless) ── */
.md-typeset img.product-mark {
  display: block;
  max-width: min(460px, 100%);
  height: auto;
  margin: .2rem 0 1rem;
  padding: .6rem .9rem;
  border-radius: 8px;
  box-sizing: border-box;
}
/* the official wordmark IS the page caption — hide the auto-title above it */
.md-typeset h1:has(+ p > img.product-mark) { display: none; }
/* Dark scheme adds only the surface — never the geometry. */
[data-md-color-scheme="slate"] .md-typeset img.product-mark { background: #fff; }
[data-md-color-scheme="slate"] .md-typeset .grid.cards img.card-logo { background: #fff; }

/* ── Screenshot figures ── */
.md-typeset figure.figure {
  margin: 1.1rem 0 1.5rem;
  max-width: 100%;
}
.md-typeset figure.figure img {
  max-width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  background: #fff;
}
.md-typeset figure.figure figcaption {
  font-size: .68rem;
  color: var(--md-default-fg-color--light);
  margin-top: .45rem;
  text-align: left;
  max-width: none;
}

/* ── Official product wordmark banner ── */
.md-typeset .logo-banner {
  background: #fff;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  padding: 1.1rem 1.3rem;
  margin: 1rem 0 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.md-typeset .logo-banner img { max-width: min(420px, 100%); height: auto; display: block; }

/* ── Partner / marketplace logo strip ── */
.md-typeset .logo-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
  background: #fff;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
  padding: 1rem 1.25rem;
  margin: .5rem 0 1.4rem;
}
.md-typeset .logo-strip img { height: 24px; width: auto; }

/* ── Wide brand photo band ── */
.md-typeset figure.banner-photo { margin: 2rem 0 0; max-width: 100%; }
.md-typeset figure.banner-photo img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
}
.md-typeset figure.banner-photo figcaption {
  font-size: .68rem;
  color: var(--md-default-fg-color--light);
  margin-top: .45rem;
  text-align: left;
  max-width: none;
}

/* ── Dark scheme: keep white surfaces for brand assets ── */
[data-md-color-scheme="slate"] .md-typeset .logo-banner,
[data-md-color-scheme="slate"] .md-typeset .logo-strip,
[data-md-color-scheme="slate"] .md-typeset figure.figure img { background: #fff; }

/* ── Combined caption/fieldname column style (MRP tables) ── */
.md-typeset .field-name {
  display: block;
  font-family: var(--md-code-font-family, monospace);
  font-size: 0.72em;
  opacity: 0.75;
  margin-top: 1px;
}

/* ============================================================
   Annotated screenshots ("shot") — replaces the hand-drawn
   ellipses, boxes and arrows in the original Word white papers
   with vector callouts that stay crisp at any zoom, describe
   exactly one control each, and can be stepped through.
   ============================================================ */

.md-typeset figure.shot { margin: 1.3rem 0 1.7rem; max-width: 100%; }

.md-typeset .shot__frame {
  position: relative;
  display: block;
  overflow: hidden;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .12);
  background: #fff;
  line-height: 0;
}
.md-typeset .shot__frame img {
  display: block;
  width: 100%;
  height: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  /* old 8-bit screenshots enlarge badly with the browser default filter */
  image-rendering: -webkit-optimize-contrast;
}

/* the callout layer sits over the image and never eats pointer events
   except on the marks themselves */
.md-typeset .shot__ink {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* ── one callout ── */
.md-typeset .shot__mark {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  margin: 0;
  padding: 0;
  border: 2px solid var(--md-accent-fg-color);
  border-radius: 4px;
  background: transparent;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .85),
              inset 0 0 0 1px rgba(255, 255, 255, .85);
  cursor: pointer;
  pointer-events: auto;
  z-index: 1;
  transition: box-shadow .18s ease, border-color .18s ease, opacity .18s ease;
  -webkit-appearance: none;
  appearance: none;
}
.md-typeset .shot__mark--ellipse { border-radius: 50%; }
.md-typeset .shot__mark:focus-visible {
  outline: 2px solid var(--md-primary-fg-color--dark);
  outline-offset: 3px;
}

/* the step number, pinned outside the top-left corner of its callout */
.md-typeset .shot__badge {
  position: absolute;
  top: -0.62rem;
  left: -0.62rem;
  min-width: 1.24rem;
  height: 1.24rem;
  padding: 0 .28rem;
  border-radius: 999px;
  background: var(--md-accent-fg-color);
  color: #fff;
  font-family: var(--md-text-font-family, Roboto), sans-serif;
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.24rem;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35);
  pointer-events: none;
}

/* the pointer that runs from a badge to something too small to ring */
.md-typeset .shot__mark--point {
  border: 0;
  box-shadow: none;
  width: 0;
  height: 0;
}
.md-typeset .shot__mark--point .shot__badge { top: -.62rem; left: -.62rem; }

/* ── stepping ── */
/* When one step is active the rest of the screenshot dims, so the reader's
   eye lands on the control the sentence is talking about. */
.md-typeset .shot--stepping .shot__mark { opacity: .28; }
.md-typeset .shot--stepping .shot__mark.is-active {
  opacity: 1;
  z-index: 2;
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9),
              inset 0 0 0 1px rgba(255, 255, 255, .9),
              0 0 0 9999px rgba(16, 20, 40, .55);
}
[data-md-color-scheme="slate"] .md-typeset .shot--stepping .shot__mark.is-active {
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .9),
              inset 0 0 0 1px rgba(255, 255, 255, .9),
              0 0 0 9999px rgba(4, 6, 16, .68);
}
.md-typeset .shot--stepping .shot__mark.is-active .shot__badge {
  animation: shot-pulse 1.8s ease-out infinite;
}
@keyframes shot-pulse {
  0%   { box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 0 rgba(82, 108, 254, .55); }
  70%  { box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 .5rem rgba(82, 108, 254, 0); }
  100% { box-shadow: 0 1px 3px rgba(0, 0, 0, .35), 0 0 0 0 rgba(82, 108, 254, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .md-typeset .shot__mark,
  .md-typeset .shot--stepping .shot__mark.is-active .shot__badge { transition: none; animation: none; }
}

/* ── the step list under the screenshot ── */
.md-typeset .shot__steps {
  list-style: none;
  margin: .7rem 0 0;
  padding: 0;
  counter-reset: shot-step;
  font-size: .74rem;
}
.md-typeset .shot__steps > li {
  counter-increment: shot-step;
  margin: 0 0 .18rem;
  padding: 0;
}
/* Deliberately not a grid: a button's inline children and its bare text nodes
   would each become separate grid items, and the text would land in the badge
   column. Relative box, absolute badge, text indented past it. */
.md-typeset .shot__steps > li > button,
.md-typeset .shot__steps > li > .shot__step {
  position: relative;
  display: block;
  width: 100%;
  margin: 0;
  padding: .34rem .5rem .34rem 2.1rem;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: 1.6;
  text-align: left;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  transition: background-color .15s ease;
}
.md-typeset .shot__steps > li > button::before,
.md-typeset .shot__steps > li > .shot__step::before {
  content: counter(shot-step);
  position: absolute;
  left: .5rem;
  top: .42rem;
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: var(--md-default-fg-color--lightest);
  color: var(--md-default-fg-color);
  font-size: .62rem;
  font-weight: 700;
  line-height: 1.3rem;
  text-align: center;
}
.md-typeset .shot__steps > li > button:hover {
  background: var(--md-code-bg-color);
}
.md-typeset .shot__steps > li.is-active > button {
  background: var(--md-code-bg-color);
  box-shadow: inset 2px 0 0 var(--md-accent-fg-color);
}
.md-typeset .shot__steps > li.is-active > button::before {
  background: var(--md-accent-fg-color);
  color: #fff;
}
.md-typeset .shot__steps b { font-weight: 700; }

/* ── walkthrough controls (added by shot-callouts.js) ── */
.md-typeset .shot__bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin-top: .55rem;
  font-size: .68rem;
  color: var(--md-default-fg-color--light);
}
.md-typeset .shot__bar button {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .2rem .55rem;
  border: 1px solid var(--md-default-fg-color--lighter);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease;
}
.md-typeset .shot__bar button:hover {
  background: var(--md-code-bg-color);
  border-color: var(--md-accent-fg-color);
}
.md-typeset .shot__bar button[disabled] { opacity: .45; cursor: default; }
.md-typeset .shot__bar .shot__count { margin-left: auto; font-variant-numeric: tabular-nums; }

.md-typeset figure.shot figcaption {
  font-size: .68rem;
  color: var(--md-default-fg-color--light);
  margin-top: .5rem;
  text-align: left;
  max-width: none;
}

/* narrow screens: the badges alone carry the numbering, the list does the
   explaining, and the dimming still works */
@media screen and (max-width: 44.98em) {
  .md-typeset .shot__badge {
    min-width: 1.05rem;
    height: 1.05rem;
    font-size: .55rem;
    line-height: 1.05rem;
    top: -.5rem;
    left: -.5rem;
  }
}

/* ============================================================
   Transaction flow — the two Visio wall-charts that trace a
   purchase from order through to the finished item, redrawn so
   the text reflows instead of being clipped inside a fixed box.
   ============================================================ */

.md-typeset .flow {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .8rem;
  margin: 1.2rem 0 1.6rem;
}
.md-typeset .flow__stage {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: .85rem .9rem 1rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-top: 3px solid var(--md-primary-fg-color);
  border-radius: 6px;
  background: var(--md-default-bg-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.md-typeset .flow__stage > h4 {
  margin: 0 0 .1rem;
  font-size: .76rem;
  line-height: 1.3;
}
.md-typeset .flow__step {
  display: block;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--md-primary-fg-color);
  margin-bottom: .25rem;
}
.md-typeset .flow__stage p {
  margin: .35rem 0 0;
  font-size: .7rem;
  line-height: 1.55;
}
.md-typeset .flow__stage p:first-of-type { margin-top: .45rem; }

/* the debit / credit block that closes each stage */
.md-typeset .flow__entries {
  margin-top: auto;
  padding-top: .6rem;
}
/* Material wraps every table in .md-typeset__table and makes both the wrapper
   and the table inline-block, which collapses percentage column widths. Inside
   a flow card the table should simply fill the card. */
.md-typeset .flow__entries .md-typeset__table {
  display: block;
  width: 100%;
  overflow: visible;
}
.md-typeset .flow__entries table {
  display: table;
  table-layout: fixed;
  width: 100%;
  margin: .3rem 0 0;
  border-collapse: collapse;
  font-size: .66rem;
  font-variant-numeric: tabular-nums;
}
.md-typeset .flow__entries th:nth-child(2),
.md-typeset .flow__entries th:nth-child(3),
.md-typeset .flow__entries td:nth-child(2),
.md-typeset .flow__entries td:nth-child(3) {
  width: 18%;
  text-align: center;
}
/* a "X — either side" cell spans both columns and reads as a note */
.md-typeset .flow__entries td[colspan] {
  width: auto;
  text-align: center;
  font-style: italic;
}
.md-typeset .flow__entries th {
  padding: .2rem .3rem;
  border-bottom: 1px solid var(--md-default-fg-color--lighter);
  background: transparent;
  font-size: .6rem;
  font-weight: 700;
  text-align: right;
  color: var(--md-default-fg-color--light);
}
.md-typeset .flow__entries tr:nth-child(even) td { background: transparent; }
.md-typeset .flow__entries th:first-child { width: 64%; text-align: left; }
.md-typeset .flow__entries td {
  padding: .18rem .3rem;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  text-align: right;
}
.md-typeset .flow__entries td:first-child { text-align: left; }
.md-typeset .flow__entries .flow__none {
  margin: .3rem 0 0;
  font-size: .66rem;
  font-style: italic;
  color: var(--md-default-fg-color--light);
}
.md-typeset .flow__label {
  display: block;
  margin-top: .5rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
}

/* ============================================================
   How-this-site-works page — inline SVG diagrams. The SVGs take
   their colors from the theme variables, so they follow the
   light/dark palette.
   ============================================================ */

.md-typeset figure.diagram {
  width: 100%;
  max-width: none;
  margin: 1.4rem 0 1.8rem;
}
.md-typeset figure.diagram svg {
  display: block;
  width: 100%;
  height: auto;
}
.md-typeset figure.diagram figcaption {
  margin-top: .5rem;
  font-size: .66rem;
  font-style: normal;
  text-align: center;
  color: var(--md-default-fg-color--light);
  max-width: none;
}

/* ============================================================
   Front page section bands.

   The front page carries four kinds of thing — the PULSE product
   line-up, the Macola® guides, support and services, and the
   archive of source documents. They are told apart by treatment
   rather than by hue, so the page still reads as one indigo
   system: brand imagery for products, a tinted panel for the
   guides, a solid panel for services, and a quiet outlined panel
   for the archive.
   ============================================================ */

.md-typeset .band { margin: 2.2rem 0; }
.md-typeset .band + .band { margin-top: 2.6rem; }

/* the eyebrow above each band heading */
.md-typeset .band__label {
  display: block;
  margin-bottom: .35rem;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--md-primary-fg-color);
}
.md-typeset .band > h2 {
  margin: 0 0 .35rem;
  padding-bottom: .4rem;
  border-bottom: 2px solid var(--md-primary-fg-color);
  font-size: 1.15rem;
  line-height: 1.3;
}
.md-typeset .band > p { margin-top: .7rem; }
.md-typeset .band > p:first-of-type { color: var(--md-default-fg-color--light); }

/* ── Products: brand imagery on white, the heaviest treatment ── */
.md-typeset .band--products .grid.cards > ul > li {
  border-color: var(--md-default-fg-color--lightest);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .07);
}
.md-typeset .band--products .grid.cards > ul > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 10px rgba(64, 81, 181, .16);
}
/* the flagship sits above the grid, at full width */
.md-typeset .band--products .flagship {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.4rem;
  align-items: center;
  margin: 1rem 0 1.2rem;
  padding: 1.1rem 1.3rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 4px solid var(--md-primary-fg-color);
  border-radius: 8px;
  background: var(--md-default-bg-color);
  box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
}
.md-typeset .band--products .flagship img {
  flex: 0 0 auto;
  height: 42px;
  width: auto;
  padding: .3rem .6rem;
  border-radius: 6px;
  box-sizing: content-box;
}
[data-md-color-scheme="slate"] .md-typeset .band--products .flagship img { background: #fff; }
.md-typeset .band--products .flagship > div { flex: 1 1 18rem; }
.md-typeset .band--products .flagship p { margin: 0; font-size: .76rem; }
.md-typeset .band--products .flagship p + p { margin-top: .4rem; }

/* ── Macola guides: a tinted panel, no imagery ── */
.md-typeset .band--guides {
  padding: 1.3rem 1.4rem 1.4rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--md-primary-fg-color) 5%, transparent);
}
[data-md-color-scheme="slate"] .md-typeset .band--guides {
  background: color-mix(in srgb, var(--md-primary-fg-color) 16%, transparent);
}
.md-typeset .band--guides > h2 { border-bottom-color: var(--md-accent-fg-color); }
.md-typeset .band--guides .band__label { color: var(--md-accent-fg-color); }

/* Material's `.md-typeset ul:not([hidden])` sets display:flow-root and outranks
   a plain class selector, so match its specificity and then some. */
.md-typeset ul.guide-grid:not([hidden]) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: .7rem;
  margin: 1rem 0 0;
  padding: 0;
  list-style: none;
}
.md-typeset .guide-grid > li {
  margin: 0;
  padding: .75rem .9rem;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-left: 3px solid var(--md-accent-fg-color);
  border-radius: 6px;
  background: var(--md-default-bg-color);
  font-size: .72rem;
  line-height: 1.55;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.md-typeset .guide-grid > li:hover {
  border-color: var(--md-accent-fg-color);
  box-shadow: 0 2px 8px rgba(82, 108, 254, .14);
}
.md-typeset .guide-grid > li > a {
  display: block;
  font-weight: 700;
  margin-bottom: .1rem;
}
.md-typeset .guide-grid > li > span {
  display: block;
  color: var(--md-default-fg-color--light);
}

/* ── Support & services: a solid panel ── */
.md-typeset .band--services > h2 { border-bottom-color: var(--md-primary-fg-color--light); }
.md-typeset .band--services .band__label { color: var(--md-primary-fg-color--light); }
.md-typeset .service-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: .9rem 1.4rem;
  margin-top: 1rem;
  padding: 1.1rem 1.3rem;
  border-radius: 8px;
  background: var(--md-code-bg-color);
  font-size: .73rem;
  line-height: 1.6;
}
.md-typeset .service-panel > div > strong { display: block; margin-bottom: .1rem; }
.md-typeset .service-panel > div > span {
  display: block;
  color: var(--md-default-fg-color--light);
}

/* ── This site & Claude Code: the pages about the documentation itself ── */
.md-typeset .band--site > h2 { border-bottom-color: var(--md-accent-fg-color); }
.md-typeset .band--site .band__label { color: var(--md-accent-fg-color); }

/* ── Source document library: quiet, outlined, clearly an archive ── */
.md-typeset .archive-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.6rem;
  align-items: center;
  justify-content: space-between;
  margin-top: 1rem;
  padding: 1.1rem 1.3rem;
  border: 1px dashed var(--md-default-fg-color--lighter);
  border-radius: 8px;
  background: transparent;
}
.md-typeset .archive-panel > div { flex: 1 1 20rem; }
.md-typeset .archive-panel p { margin: 0; font-size: .73rem; }
.md-typeset .archive-panel p + p { margin-top: .35rem; }
.md-typeset .archive-panel .archive-stat {
  flex: 0 0 auto;
  text-align: center;
  color: var(--md-default-fg-color--light);
}
.md-typeset .archive-panel .archive-stat b {
  display: block;
  font-size: 1.5rem;
  line-height: 1.1;
  color: var(--md-default-fg-color);
  font-variant-numeric: tabular-nums;
}
.md-typeset .archive-panel .archive-stat span {
  font-size: .6rem;
  letter-spacing: .1em;
  text-transform: uppercase;
}

@media screen and (max-width: 44.98em) {
  .md-typeset .band--guides { padding: 1rem .9rem 1.1rem; }
  .md-typeset .band--products .flagship { padding: .9rem 1rem; }
}