/* ============================================================
   Type scale correction.

   Material sets html{font-size:20px}, so every rem here rendered 25% larger
   than the marketing site, whose html stays at the 16px default. Rather than
   rewrite every value, load the fonts properly and state the sizes in px so
   both sites agree.
   ============================================================ */

/* The @import in p1-docs.css is unreliable: an @import is only honoured at
   the very top of the FIRST stylesheet, and this file loads after it, so
   Literata was never fetched and every heading fell back to a default serif. */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@300;400;500;600&family=Literata:opsz,wght@7..72,300;7..72,400;7..72,500;7..72,600&display=swap');

/* Shared site footer (every page). Self-contained: no dependency on .homepage or page-level vars. */
.footer--site {
  --f-bg: #10100f; --f-text: #f4f2eb; --f-muted: #b8b6ae; --f-dim: #898781; --f-label: #8d8b84; --f-accent: #d9f99d;
  --f-font: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --f-serif: 'Literata', Georgia, serif;
  margin-top: clamp(6rem, 12vw, 10rem);
  padding: clamp(5.5rem, 11vw, 10rem) 0 1.5rem;
  background: var(--f-bg) !important;
  border: 0 !important;
  color: var(--f-text) !important;
  font-family: var(--f-font);
}
.footer--site .footer-shell {
  width: min(100% - 48px, 76rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(17rem, 1.15fr) minmax(0, 2.2fr);
  gap: clamp(3rem, 9vw, 8rem);
  align-items: start;
}
.footer--site .footer-intro { max-width: 24rem; }
footer.footer--site .logo {
  display: inline-flex !important;
  color: var(--f-text) !important;
  font-family: var(--f-font) !important;
  font-size: clamp(1.75rem, 3vw, 2.25rem) !important;
  font-weight: 600 !important;
  letter-spacing: -.045em !important;
  line-height: 1 !important;
  text-decoration: none !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}
footer.footer--site .logo strong { font-weight: 600 !important; color: var(--f-text) !important; -webkit-text-fill-color: currentColor !important; }
footer.footer--site .logo span { color: var(--f-accent) !important; font-weight: 400 !important; -webkit-text-fill-color: currentColor !important; }
.footer--site .footer-intro > p {
  margin: 1.65rem 0 0;
  color: var(--f-muted) !important;
  font-family: var(--f-font);
  font-size: 1rem;
  line-height: 1.6;
}
.footer--site .footer-start {
  display: inline-flex; gap: .6rem; margin-top: 2rem;
  color: var(--f-text) !important;
  font-family: var(--f-font); font-size: .95rem; font-weight: 600; text-decoration: none;
}
.footer--site .footer-start span { color: var(--f-accent); transition: transform .2s ease; }
.footer--site .footer-start:hover span { transform: translateX(.2rem); }
/* The 6.5rem track floor could not shrink, so below about 1620px the five
   columns demanded more width than the container had and punched out of the
   viewport (245px of horizontal scroll at 1025px). minmax(0, 1fr) lets them
   shrink, which is what .docs-keyparts .dk-shell alongside already does.
   `min-width: 0` on the child defeats the default `min-width: auto` on a grid
   item, without which a long link re-inflates the track. */
.footer--site .footer-nav {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 4rem);
  padding-top: .9rem;
}
.footer--site .footer-group { min-width: 0; }
footer.footer--site .footer-group h2 {
  margin: 0 0 1.25rem !important;
  color: var(--f-label) !important;
  font-family: var(--f-font) !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  -webkit-text-fill-color: currentColor !important;
  background: none !important;
}
.footer--site .footer-group a {
  display: block; width: max-content; max-width: 100%;
  margin: 0 0 .8rem;
  color: #e1dfd8 !important;
  font-family: var(--f-font); font-size: .95rem; line-height: 1.35; text-decoration: none;
  transition: color .15s ease;
}
.footer--site .footer-group a:hover,
.footer--site .footer-start:hover { color: var(--f-accent) !important; }
.footer--site a:focus-visible { outline: 2px solid var(--f-accent); outline-offset: 4px; }
.footer--site .footer-meta {
  width: min(100% - 48px, 76rem);
  margin: clamp(5rem, 10vw, 9rem) auto 0;
  padding-top: 1.2rem;
  border-top: 1px solid rgba(244, 242, 235, .15);
  display: flex; justify-content: space-between; gap: 1rem;
}
.footer--site .footer-meta p {
  margin: 0; color: var(--f-dim) !important;
  font-family: var(--f-font); font-size: .75rem; line-height: 1.5;
}
/* Five columns stop being readable well before 900px: at 1025px they are 76px
   wide and the longer labels clip. Drop to two columns at the same 1220px
   boundary the rest of the theme uses. */
@media (max-width: 1219px) {
  .footer--site .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
}
@media (max-width: 900px) {
  .footer--site .footer-shell { grid-template-columns: 1fr; gap: 3.5rem; }
}
@media (max-width: 760px) {
  .footer--site { padding-top: 5rem; }
  .footer--site .footer-shell, .footer--site .footer-meta { width: min(100% - 36px, 76rem); }
  .footer--site .footer-meta { margin-top: 4rem; display: block; }
  .footer--site .footer-meta p + p { margin-top: .35rem; }
}
@media (max-width: 480px) {
  .footer--site .footer-nav { grid-template-columns: 1fr; gap: 2rem; }
}


/* ---- Header: one row, not three stacked bands ---- */
/* Logo | search (centre) | site links (right), all on the header line. */

/* the wrapper is emptied by the script; only its shell matters */
/* hidden until the script has decided where the links live, to avoid a flash */
.p1-sitebar:not(.is-ready) { display: none; }
.p1-sitebar.is-ready { display: none; }   /* wide screens: links are in the header */
/* the shell is relocated into .md-header__inner by the template script */
.md-header__inner .esb-shell {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin-left: auto;
  padding: 0 .2rem 0 1rem;
  width: auto;
}
.md-header__inner .esb-shell a {
  font-family: var(--md-text-font);
  color: #3f4452; font-size: 14.08px; font-weight: 400; letter-spacing: normal;
  white-space: nowrap; text-decoration: none; transition: color .15s ease;
}
.md-header__inner .esb-shell a:hover { color: #0c0c0f; }
.md-header__inner .esb-shell .esb-cta {
  color: #3b6a00; font-weight: 600;
  padding: .28rem .68rem;
  border: 1px solid rgba(101,163,13,.35); border-radius: 999px;
}
.md-header__inner .esb-shell .esb-cta:hover {
  background: rgba(101,163,13,.08); border-color: rgba(101,163,13,.6);
}

/* Community mirrors the main-site disclosure: the label reserves its active
   weight, the chevron carries the state, and the panel stays out of the header
   flow. These selectors are scoped to the docs shell because it moves at 1220px. */
.esb-group { position: relative; display: inline-block; flex: none; --esb-dropdown-open-dur: 250ms; --esb-dropdown-close-dur: 150ms; --esb-dropdown-pre-scale: .97; --esb-dropdown-closing-scale: .99; --esb-dropdown-ease: cubic-bezier(.22,1,.36,1); }
.esb-group > summary { display: block; list-style: none; cursor: pointer; color: #3f4452; font-family: var(--md-text-font); font-size: 14.08px; font-weight: 400; line-height: normal; white-space: nowrap; }
.esb-group > summary::-webkit-details-marker { display: none; }
.esb-group > summary::marker { content: ""; }
.esb-group > summary:focus-visible { outline: 2px solid #9acb4a; outline-offset: 4px; border-radius: 3px; }
.esb-group-label { display: inline-flex; align-items: center; gap: .3rem; }
.esb-group-text { display: inline-block; }
.esb-group-text::after { content: attr(data-label); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; pointer-events: none; }
.esb-group[open] > summary { color: #0c0c0f; font-weight: 600; }
.esb-chev { flex: none; opacity: .7; transition: transform .25s cubic-bezier(.3,.7,.3,1); }
.esb-group[open] .esb-chev { transform: rotate(180deg); opacity: 1; }
.esb-group:not([open]) .esb-panel { display: none; }
.esb-panel { position: absolute; z-index: 120; top: calc(100% + .85rem); left: 50%; min-width: 13.5rem; padding: .4rem; transform: translateX(-50%); background: #fff; border: 1px solid rgba(8,9,11,.12); border-radius: 4px; box-shadow: 0 8px 28px rgba(8,9,11,.08); }
.esb-group.t-anim .esb-panel { transform-origin: top center; transform: translateX(-50%) scale(var(--esb-dropdown-pre-scale)); opacity: 0; pointer-events: none; transition: transform var(--esb-dropdown-open-dur) var(--esb-dropdown-ease), opacity var(--esb-dropdown-open-dur) var(--esb-dropdown-ease); }
.esb-group.t-anim.is-open .esb-panel { transform: translateX(-50%) scale(1); opacity: 1; pointer-events: auto; }
.esb-group.t-anim.is-closing .esb-panel { transform: translateX(-50%) scale(var(--esb-dropdown-closing-scale)); opacity: 0; pointer-events: none; transition: transform var(--esb-dropdown-close-dur) var(--esb-dropdown-ease), opacity var(--esb-dropdown-close-dur) var(--esb-dropdown-ease); }
.esb-panel::before { content: ""; position: absolute; top: -.85rem; left: 0; right: 0; height: .85rem; }
.md-header__inner .esb-shell .esb-panel a,
.p1-sitebar .esb-panel a { display: block; margin: 0; padding: .6rem .75rem; border-radius: 3px; color: #3f4452; font-size: 14px; font-weight: 400; line-height: 1.3; }
.md-header__inner .esb-shell .esb-panel a + a,
.p1-sitebar .esb-panel a + a { margin-top: 1px; }
.md-header__inner .esb-shell .esb-panel a:hover,
.p1-sitebar .esb-panel a:hover { background: #f4f8ed; color: #0c0c0f; }
.p1-sitebar a {
  color: #6b7180;
  font-size: .72rem;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition: color .15s ease;
}
.p1-sitebar a:hover { color: #0c0c0f; }
.p1-sitebar .esb-cta {
  color: #3b6a00;
  font-weight: 600;
  padding: .3rem .7rem;
  border: 1px solid rgba(101,163,13,.35);
  border-radius: 999px;
  transition: background .15s ease, border-color .15s ease;
}
.p1-sitebar .esb-cta:hover {
  background: rgba(101,163,13,.08);
  border-color: rgba(101,163,13,.6);
  color: #3b6a00;
}

/* give the header itself some presence */
.md-header {
  background: #fbfbf8 !important;
  border-bottom: 1px solid rgba(8,9,11,.10) !important;
}
.md-header__inner { min-height: 3.1rem; }

@media screen and (max-width: 1219px) {
  /* Material hides the header logo and title below its breakpoint, leaving a
     bare hamburger. Put them back -- but scope every rule to .md-header, because
     the nav DRAWER reuses .md-logo and .md-nav__title and would otherwise get a
     giant logo and giant headings too. */
  .md-header .md-header__button.md-logo {
    display: inline-flex !important;
    align-items: center;
    padding: 0 .3rem 0 0;
    margin: 0;
  }
  .md-header .md-header__button.md-logo img,
  .md-header .md-header__button.md-logo svg {
    height: 1.15rem !important;
    width: auto !important;
  }
  .md-header .md-header__title {
    display: flex !important;
    align-items: center;
    margin-left: .2rem;
    font-size: .78rem;
  }
  .md-header .md-header__topic { font-size: .78rem; font-weight: 600; letter-spacing: -.01em; }
  .md-header .md-header__topic:first-child {
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }

  /* The drawer: keep Material's own sizing, do not inherit the header rules */
  .md-nav--primary .md-nav__title {
    font-size: .72rem !important;
    font-weight: 600;
    letter-spacing: .02em;
    text-transform: none;
    /* Material sizes this block for a stacked logo; without one it is 112px of
       empty space at the top of the drawer */
    height: 2.6rem !important;
    min-height: 0 !important;
    line-height: 2.6rem !important;
    padding: 0 .8rem !important;
    background: #fbfbf8;
    color: #0c0c0f;
    box-shadow: none;
    border-bottom: 1px solid rgba(8,9,11,.08);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .md-nav--primary .md-nav__title ~ .md-nav__list { padding-top: .3rem; }
  .md-nav--primary .md-nav__title .md-nav__button.md-logo { display: none !important; }
  .md-nav--primary .md-nav__link {
    font-size: .74rem !important;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    padding: .5rem .8rem;
  }
  .md-nav--primary .md-nav__item--nested > .md-nav__link { font-weight: 600; }

  /* the search box floated mid-header with nothing anchoring it, and stretched
     the full row when given flex:1 */
  .md-header__inner .md-search {
    flex: 0 1 auto;
    width: min(20rem, 42vw);
    min-width: 0;
    margin-left: auto;
    margin-right: .2rem;
  }
  .md-search__form {
    height: 1.9rem;
    border-radius: 10px;
    background: #f1f0ea;
    border: 1px solid rgba(8,9,11,.10);
  }
  .md-search__input { font-size: .76rem; padding-left: 2.1rem; }
  .md-search__input::placeholder { color: #8b8f99; }
  .md-search__icon[for=__search] { width: 1rem; height: 1rem; left: .65rem; color: #8b8f99; }
  .md-header__option { display: none; }   /* colour-scheme toggle, not needed here */

  /* below the breakpoint the links return to their own strip */
  .p1-sitebar.is-ready { display: block; width: 100%; background: #f5f5f0; border-bottom: 1px solid rgba(8,9,11,.08); }
  .p1-sitebar .esb-shell {
    margin: 0; width: 100%; flex-wrap: nowrap; overflow-x: auto;
    scrollbar-width: none;
    gap: 0;
    padding: .4rem max(14px, env(safe-area-inset-left));
    flex-wrap: nowrap;
  }
  /* Tight enough that all seven links fit one row rather than wrapping Login
     onto a second line. The row scrolls sideways if it still cannot fit. */
  .p1-sitebar .esb-shell a {
    font-size: 13px;
    margin-right: .95rem;
    flex: none;
  }
  .p1-sitebar .esb-shell a:last-child { margin-right: 0; }
  .p1-sitebar .esb-shell::-webkit-scrollbar { display: none; }
  .p1-sitebar .esb-cta { border: 0; padding: 0; }
  .p1-sitebar { position: relative; }
  .p1-sitebar .esb-group { position: static; margin-right: .95rem; }
  .p1-sitebar .esb-group > summary { font-size: 13px; }
  .p1-sitebar .esb-panel { top: 100%; right: max(14px, env(safe-area-inset-right)); left: auto; transform: none; }
  .p1-sitebar .esb-group.t-anim .esb-panel { transform: scale(var(--esb-dropdown-pre-scale)); transform-origin: top right; }
  .p1-sitebar .esb-group.t-anim.is-open .esb-panel { transform: scale(1); }
  .p1-sitebar .esb-group.t-anim.is-closing .esb-panel { transform: scale(var(--esb-dropdown-closing-scale)); }
}
@media (prefers-reduced-motion: reduce) {
  .esb-chev { transition: none; }
  .esb-group.t-anim .esb-panel,
  .esb-group.t-anim.is-closing .esb-panel { transition: none !important; }
}

/* ---- Documentation key parts, above the shared footer ---- */
.docs-keyparts {
  background: #10100f;
  padding: clamp(3.5rem, 7vw, 5.5rem) 0 0;
  font-family: 'Hanken Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}
.docs-keyparts .dk-shell {
  width: min(100% - 48px, 76rem);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(1.75rem, 4vw, 3rem);
  padding-bottom: clamp(3rem, 6vw, 4.5rem);
  border-bottom: 1px solid rgba(244,242,235,.15);
}
.docs-keyparts h2 {
  margin: 0 0 1.25rem !important;
  color: #8d8b84 !important;
  font-family: inherit !important;
  font-size: .68rem !important;
  font-weight: 500 !important;
  letter-spacing: .18em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}
.docs-keyparts a {
  display: block;
  margin: 0 0 .8rem;
  color: #e1dfd8 !important;
  font-size: .95rem;
  line-height: 1.35;
  text-decoration: none;
  transition: color .15s ease;
}
.docs-keyparts a:hover { color: #d9f99d !important; }
@media (max-width: 900px) {
  .docs-keyparts .dk-shell { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2.5rem 1.5rem; }
}
@media (max-width: 760px) {
  .docs-keyparts .dk-shell { width: min(100% - 36px, 76rem); }
}
@media (max-width: 480px) {
  .docs-keyparts .dk-shell { grid-template-columns: 1fr; gap: 2rem; }
}

/* the shared footer sits directly under the key-parts strip, no extra gap */
.docs-keyparts + .footer--site { margin-top: 0; padding-top: clamp(3rem, 6vw, 4.5rem); }
/* MkDocs Material puts its own footer styles on .md-footer; ours is separate */
.md-main + .docs-keyparts, .md-container + .docs-keyparts { margin-top: 0; }


/* ---- Modern centred search in the docs header ---- */
.md-header__inner { gap: 1rem; }
.md-header__title { flex: 0 1 auto; }

@media screen and (min-width: 60em) {
  /* Centre against the viewport, not the remaining flex space: the logo and
     title on the left would otherwise push the field to the right. */
  .md-header__inner { position: relative; }
  .md-search {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: min(22rem, 32vw);
    margin: 0;
    padding: 0;
  }
  /* Material widens the inner wrapper when the field is focused, which would
     overflow our centred container. Keep every layer the same width. */
  .md-search__inner,
  [data-md-toggle=search]:checked ~ .md-header .md-search__inner {
    width: 100% !important;
    left: 0 !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
  }
  .md-search__form { width: 100% !important; }

  /* No dimming overlay: a soft shadow on the results panel is enough. */
  .md-search__overlay,
  [data-md-toggle=search]:checked ~ .md-header .md-search__overlay {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  /* results panel: aligned to the field, floating on a soft shadow */
  .md-search__output {
    width: 100%;
    left: 0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 32px rgba(8,9,11,.14), 0 2px 8px rgba(8,9,11,.08);
    border: 1px solid rgba(8,9,11,.08);
  }
  .md-search__scrollwrap { border-radius: 14px; }
  /* square off the join with the input while results are open */
  [data-md-toggle=search]:checked ~ .md-header .md-search__form {
    border-radius: 14px 14px 0 0;
  }
  [data-md-toggle=search]:checked ~ .md-header .md-search__output {
    border-radius: 0 0 14px 14px;
  }
  [data-md-toggle=search]:checked ~ .md-header .md-search__scrollwrap {
    border-radius: 0 0 14px 14px;
  }

  .md-search__form {
    height: 1.95rem;
    border-radius: 12px;
    background: #f1f0ea;
    border: 1px solid rgba(8,9,11,.12);
    box-shadow: none;
    transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .md-search__form:hover {
    background: #ecebe4;
    border-color: rgba(8,9,11,.2);
  }
  .md-search__form:focus-within {
    background: #fff;
    border-color: rgba(101,163,13,.55);
    box-shadow: 0 0 0 3px rgba(101,163,13,.12);
  }

  .md-search__input {
    color: #0c0c0f;
    font-size: .76rem;
    padding-left: 2.2rem;
  }
  .md-search__input::placeholder { color: #8b8f99; }

  /* the magnifier, in grey */
  .md-search__icon[for=__search] {
    width: 1.05rem;
    height: 1.05rem;
    left: .8rem;
    color: #8b8f99;
    opacity: 1;
  }
  .md-search__form:focus-within .md-search__icon[for=__search] { color: #6b7180; }

  /* the reset (x) button */
  .md-search__options .md-icon { color: #8b8f99; }

}

/* results list: a little more air */
.md-search-result__item { border-bottom: 1px solid rgba(8,9,11,.06); }
.md-search-result__link { transition: background .12s ease; }
.md-search-result__link:hover { background: rgba(101,163,13,.06); }
.md-search-result__meta {
  background: transparent;
  color: #6b7180;
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: .8rem 1rem .4rem;
}


/* ---- Mobile corrections ---- */
@media screen and (max-width: 1219px) {
  /* the page title is set for a wide column; bring it back to phone scale */
  .md-typeset h1 { font-size: 1.85rem !important; line-height: 1.15 !important; }
  .md-typeset h2 { font-size: 1.4rem !important; line-height: 1.2 !important; }
  .md-typeset h3 { font-size: 1.1rem !important; }
  .md-typeset { font-size: .8rem; }
  .md-content__inner { padding: .8rem .2rem 1.2rem; }

  /* Material moves search into the header row on small screens: let it be its
     own full-width control rather than our centred desktop field. */
  .md-search { position: static; transform: none; width: auto; max-width: none; }
  .md-search__inner, [data-md-toggle=search]:checked ~ .md-header .md-search__inner {
    width: 100% !important;
    transform: none !important;
  }
  .md-search__form { border-radius: 0; height: auto; }
  .md-search__output { border-radius: 0; box-shadow: none; border: 0; }

  /* The closed nav drawer must sit entirely off-screen. Material offsets it by
     a fixed amount that assumes its own drawer width; when that does not match
     it overlaps the left of the page and clips headings. */
  .md-sidebar--primary {
    left: 0 !important;
    width: 12.1rem !important;
    transform: translateX(-100%) !important;
    will-change: transform;
  }
  [data-md-toggle=drawer]:checked ~ .md-container .md-sidebar--primary {
    transform: translateX(0) !important;
    box-shadow: 0 8px 24px rgba(8,9,11,.18);
  }

  /* footer and key-parts: single column, tighter rhythm */
  .docs-keyparts { padding-top: 2.5rem; }
  .docs-keyparts .dk-shell { padding-bottom: 2.25rem; gap: 1.75rem; }
  .footer--site { margin-top: 0; padding-top: 2.5rem; }
}


/* ============================================================
   Docs typography: editorial hierarchy rather than Material's
   defaults, matching the marketing site's feel.
   ============================================================ */

/* Logo was 156px wide and dominated the header */
.md-header__button.md-logo { padding: 0; margin-right: .4rem; }
.md-header__button.md-logo img,
.md-header__button.md-logo svg { height: 1.35rem; width: auto; }

.md-header { box-shadow: none !important; border-bottom: 1px solid rgba(8,9,11,.08); }
.md-header__topic:first-child { font-weight: 600; letter-spacing: -.01em; }

/* Headings: real hierarchy. h1 was 48px with h2 at 32px, so nothing led the eye. */
.md-typeset h1 {
  font-size: 2.5rem !important;   /* overridden below in px */
  font-family: 'Literata', Georgia, serif !important;
  font-size: 2.4rem !important; font-weight: 600 !important;
  letter-spacing: -.03em !important; line-height: 1.12 !important;
  color: #0c0c0f !important; margin: 0 0 1.1rem !important;
}
.md-typeset h2 {
  font-family: 'Literata', Georgia, serif !important;
  font-size: 1.55rem !important; font-weight: 600 !important;
  letter-spacing: -.02em !important; line-height: 1.2 !important;
  color: #0c0c0f !important; margin: 3rem 0 1.1rem !important;
  padding-top: 1.6rem; border-top: 1px solid rgba(8,9,11,.09);
}
.md-typeset h1 + h2 { margin-top: 2rem !important; border-top: 0; padding-top: 0; }
.md-typeset h3 {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 1.08rem !important; font-weight: 600 !important;
  letter-spacing: -.005em !important; margin: 2rem 0 .6rem !important;
}
.md-typeset h4 {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: .95rem !important; font-weight: 600 !important;
  margin: 1.5rem 0 .5rem !important;
}

/* Body copy */
.md-typeset { font-size: .82rem; line-height: 1.68; color: #3f4452; }
.md-typeset p { margin: 0 0 1.1rem; }
.md-content__inner { padding-top: 1.4rem; }
.md-content__inner > :first-child { margin-top: 0 !important; }

/* The first paragraph after a title reads as a lede */
.md-typeset h1 + p { font-size: 1.06rem; line-height: 1.55; margin-bottom: 1.8rem; }

/* Lists: air, and a quieter marker */
.md-typeset ul li, .md-typeset ol li { margin-bottom: .5rem; }
.md-typeset ul li::marker { color: rgba(8,9,11,.32); }
.md-typeset ul { padding-left: 1.15rem; }

/* Links: the site's lime underline */
.md-typeset a {
  color: #3b6a00; text-decoration: underline;
  text-decoration-color: rgba(101,163,13,.45);
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: text-decoration-color .15s ease;
}
.md-typeset a:hover { text-decoration-color: currentColor; }
/* A heading that is itself a link must still read as a heading, not a link:
   several index pages use "## [Section](path)" and were rendering all-green. */
.md-typeset h1 a, .md-typeset h2 a, .md-typeset h3 a, .md-typeset h4 a {
  color: inherit !important;
  text-decoration: none !important;
  border-bottom: 0 !important;
}
.md-typeset h1 a:hover, .md-typeset h2 a:hover,
.md-typeset h3 a:hover, .md-typeset h4 a:hover {
  color: #3b6a00 !important;
}
/* index pages are mostly link lists: quieter treatment so they do not shout */
.md-typeset ul > li > a:only-child {
  text-decoration: none; font-weight: 500;
  border-bottom: 1px solid rgba(101,163,13,.28); padding-bottom: 1px;
}
.md-typeset ul > li > a:only-child:hover { border-bottom-color: #3b6a00; }

/* Sidebars: legible rather than shrunken */
.md-sidebar { font-size: .68rem; }
.md-nav { font-size: .74rem; }
.md-nav__title {
  font-family: 'Hanken Grotesk', sans-serif; font-size: .68rem; font-weight: 600;
  letter-spacing: .1em; text-transform: uppercase; color: #8b8f99;
}
.md-nav__link { color: #3f4452; font-weight: 400; padding: .16rem 0; }
.md-nav__link:hover { color: #3b6a00; }
.md-nav__link--active, .md-nav__item .md-nav__link--active { color: #3b6a00 !important; font-weight: 600; }

/* Code */
.md-typeset code {
  background: rgba(8,9,11,.05); color: #0c0c0f; border-radius: 3px;
  padding: .12em .38em; font-size: .86em;
}
.md-typeset pre > code { background: transparent; padding: 0; }
.md-typeset .highlight { border: 1px solid rgba(8,9,11,.09); border-radius: 6px; background: #fbfbf8; }

/* Tables: hairlines */
.md-typeset table:not([class]) { border: 0; border-top: 1px solid rgba(8,9,11,.12); font-size: .96em; }
.md-typeset table:not([class]) th {
  background: transparent; font-family: 'Hanken Grotesk', sans-serif;
  font-weight: 600; color: #0c0c0f; border-bottom: 1px solid rgba(8,9,11,.12);
}
.md-typeset table:not([class]) td { border-bottom: 1px solid rgba(8,9,11,.07); }

.md-typeset blockquote {
  border-left: 2px solid rgba(101,163,13,.5); color: #3f4452;
  padding-left: 1rem; margin-left: 0;
}
.md-typeset hr { border-bottom: 1px solid rgba(8,9,11,.09); margin: 2.5rem 0; }

@media screen and (max-width: 1219px) {
  .md-typeset h1 { font-size: 1.85rem !important; }
  .md-typeset h2 { font-size: 1.3rem !important; margin-top: 2.2rem !important; padding-top: 1.2rem; }
  .md-typeset { font-size: .8rem; }
}


/* ---- Scrollbars: fade, rather than blink ---- */
/* `scrollbar-color` cannot be transitioned, and the WebKit pseudo-element only
   animates on hover, so toggling either one snaps. Instead the thumb keeps a
   constant colour and the whole scrollbar's OPACITY is animated, which does
   interpolate. */
* { scrollbar-width: thin; scrollbar-color: rgba(8,9,11,.28) transparent; }

*::-webkit-scrollbar { width: 11px; height: 11px; background: transparent; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: rgba(8,9,11,.28);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: content-box;
}
*::-webkit-scrollbar-thumb:hover { background-color: rgba(8,9,11,.45); }

/* Fade the whole bar by animating opacity on the scrolling element itself.
   Firefox and WebKit both interpolate this cleanly. */
html, .md-sidebar__scrollwrap, .md-search__scrollwrap {
  transition: scrollbar-color .45s ease;
}
html:not(.is-scrolling):not(:hover) { scrollbar-color: transparent transparent; }
html:not(.is-scrolling):not(:hover)::-webkit-scrollbar-thumb { background-color: transparent; }

/* the visible fade: a slow ease out, a quicker ease in */
html::-webkit-scrollbar-thumb { transition: background-color .5s ease .15s; }
html.is-scrolling::-webkit-scrollbar-thumb {
  background-color: rgba(8,9,11,.3);
  transition: background-color .12s ease;
}

.md-sidebar__scrollwrap { scrollbar-color: transparent transparent; }
.md-sidebar:hover .md-sidebar__scrollwrap { scrollbar-color: rgba(8,9,11,.24) transparent; }

@media (prefers-reduced-motion: reduce) {
  html, .md-sidebar__scrollwrap { transition: none; }
  html::-webkit-scrollbar-thumb { transition: none; }
}

/* ---- Sidebars ----
   The rail widths and the reading measure now live together in p1-docs.css,
   which is where the page gutter is budgeted against them. This file loads
   AFTER that one, so a width here silently wins: it is why 12.5rem held the
   primary rail at 275px however wide p1-docs.css asked for. Keep rail sizing
   out of this file.

   `.md-main__inner{max-width:none}` stays: p1-docs.css sets a `width` on that
   element, and Material's own 61rem `max-width` would otherwise clamp it. */
@media screen and (min-width: 1220px) {
  .md-main__inner { max-width: none; }
}
.md-nav__item .md-nav__link { line-height: 1.35; }
.md-nav--secondary .md-nav__list .md-nav__list { padding-left: .5rem; }


/* ---- Sizes in px, so Material's 20px root cannot inflate them ----
   The marketing site renders body copy at 17.6px and section headings at
   ~38px on a 16px root. These match. */
.md-typeset            { font-size: 17px; line-height: 1.68; }
.md-typeset h1         { font-size: 38px !important; line-height: 1.12 !important; }
.md-typeset h2         { font-size: 25px !important; line-height: 1.2 !important; }
.md-typeset h3         { font-size: 18px !important; }
.md-typeset h4         { font-size: 16px !important; }
.md-typeset h1 + p     { font-size: 18px; line-height: 1.55; }
.md-typeset code       { font-size: 14.5px; }
.md-typeset table:not([class]) { font-size: 16px; }

.md-nav                { font-size: 14px; }
.md-nav__title         { font-size: 11.5px; }
.md-sidebar            { font-size: 14px; }
.md-header__topic      { font-size: 15px; }
.md-search__input      { font-size: 15px; }
.md-search-result__meta{ font-size: 12px; }
.md-footer             { font-size: 14px; }

@media screen and (max-width: 1219px) {
  .md-typeset          { font-size: 16.5px; }
  .md-typeset h1       { font-size: 30px !important; }
  .md-typeset h2       { font-size: 21px !important; }
  .md-typeset h3       { font-size: 17px !important; }
  .md-nav--primary .md-nav__link  { font-size: 14.5px !important; }
  .md-nav--primary .md-nav__title { font-size: 12px !important; }
  .p1-sitebar .esb-shell a      { font-size: 13px; }
}


/* ---- Drawer: strip Material's heavy separators and padding ---- */
@media screen and (max-width: 1219px) {
  /* Material draws a full-width rule between every item and gives each one
     ~2.5rem of vertical padding, which reads as a stack of heavy boxes. */
  .md-nav--primary .md-nav__item { border-top: 0 !important; padding: 0 !important; }
  .md-nav--primary .md-nav__item > .md-nav__link {
    margin: 0 !important;
    padding: .62rem .9rem !important;
    line-height: 1.35 !important;
    min-height: 0 !important;
    border: 0 !important;
  }
  .md-nav--primary > .md-nav__list { padding: .35rem 0 !important; }
  .md-nav--primary .md-nav__list .md-nav__list { padding-bottom: .2rem; }

  /* the nested-section back button: the arrow was sitting on top of the label */
  .md-nav--primary .md-nav__title {
    display: flex !important;
    align-items: center;
    gap: .55rem;
    padding: 0 .9rem !important;
  }
  .md-nav--primary .md-nav__title .md-nav__icon,
  .md-nav--primary .md-nav__title .md-nav__button {
    position: static !important;
    margin: 0 !important;
    width: 1.1rem !important;
    height: 1.1rem !important;
    flex: none;
  }

  /* the chevron on nested items */
  .md-nav--primary .md-nav__icon { color: rgba(8,9,11,.3); }

  /* the active item, without the heavy highlight */
  .md-nav--primary .md-nav__link--active { color: #3b6a00 !important; font-weight: 600; }

  /* the toggle icon beside the current page */
  .md-nav--primary .md-nav__link .md-nav__icon:not(:only-child) { opacity: .55; }
}

/* the desktop rails: quieter separators too */
.md-nav--secondary .md-nav__item { border: 0; }
.md-sidebar--primary .md-nav__item { border: 0; }


/* ---- Header: the site links were running under the search box ---- */
@media screen and (min-width: 1220px) {
  /* Give the search a fixed share and let the links keep their own space, so
     "Home" cannot end up beneath the search field. */
  .md-header__inner .md-search {
    position: static !important;
    transform: none !important;
    flex: 0 0 auto;
    width: min(21rem, 30vw) !important;
    margin: 0 auto 0 2rem !important;
  }
  .md-header__inner .esb-shell {
    flex: 0 0 auto;
    margin-left: auto;
    padding-left: 1.25rem;
  }
  /* the title is redundant beside the logo and was crowding the row */
  .md-header__title { display: none !important; }
}

/* ---- All three columns start on the same line ----
   Both rails begin at the same y, but Material adds a 30px margin to the
   content wrapper and a 10px margin to the first nav item, so the three
   started at three different heights. Zero them and set one shared pad. */
@media screen and (min-width: 1220px) {
  .md-sidebar { padding-top: 1.75rem !important; }
  .md-sidebar__inner { padding-top: 0 !important; }

  .md-content__inner { margin-top: 0 !important; padding-top: 1.75rem !important; }
  .md-content__inner > :first-child { margin-top: 0 !important; }
  .md-content__inner::before { display: none; }   /* Material's spacer pseudo-element */

  .md-nav--primary > .md-nav__list { padding-top: 0 !important; }
  .md-nav--primary > .md-nav__list > .md-nav__item:first-child { margin-top: 0 !important; }
  .md-nav--primary > .md-nav__list > .md-nav__item:first-child > .md-nav__link { margin-top: 0 !important; }
  .md-nav--primary > .md-nav__title { display: none; }
  .md-nav--secondary > .md-nav__title { padding-top: 0 !important; margin-top: 0 !important; }
  .md-nav--secondary > .md-nav__list { padding-top: .3rem; }
}


/* ---- Previous / next cards under each page ----
   These belong to the content column, so they are rendered inside the article
   rather than across the full width where they sat over the sidebar.
   Sizes are in PIXELS throughout: Material sets html{font-size:20px}, so a rem
   here is 25% larger than it reads. */
.docs-pagenav {
  border-top: 1px solid rgba(8,9,11,.10);
  margin: 56px 0 0;
  padding: 26px 0 8px;
  background: transparent;
}
.docs-pagenav .dpn-shell {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0;
}
.docs-pagenav .dpn-card {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  padding: 17px 19px 18px;
  border: 1px solid rgba(8,9,11,.10);
  border-radius: 10px;
  background: #fff;
  text-decoration: none !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.docs-pagenav .dpn-card:hover {
  border-color: rgba(101,163,13,.42);
  box-shadow: 0 2px 10px rgba(8,9,11,.05);
  transform: translateY(-1px);
}
.docs-pagenav .dpn-empty { border: 0; background: transparent; pointer-events: none; }

/* The arrow is a direction marker, not a button: small, quiet, and aligned to
   the label row rather than floating against the middle of the card. */
.docs-pagenav .dpn-arrow {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 999px;
  background: rgba(101,163,13,.10);
  color: #3b6a00;
  margin-top: 1px;
  transition: background .15s ease;
}
.docs-pagenav .dpn-arrow svg { width: 14px; height: 14px; display: block; }
.docs-pagenav .dpn-card:hover .dpn-arrow { background: rgba(101,163,13,.18); }

.docs-pagenav .dpn-body { display: flex; flex-direction: column; min-width: 0; }
.docs-pagenav .dpn-dir {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .12em;
  line-height: 1.6;
  text-transform: uppercase;
  color: #9ea2ac;
}
.docs-pagenav .dpn-title {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.01em;
  color: #0c0c0f;
  margin-top: 2px;
}
.docs-pagenav .dpn-card:hover .dpn-title { color: #3b6a00; }
.docs-pagenav .dpn-desc {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 13.5px;
  line-height: 1.5;
  color: #6b7180;
  margin-top: 5px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* the next card reads right-to-left so the eye follows the direction of travel */
.docs-pagenav .dpn-next { flex-direction: row; text-align: right; justify-content: flex-end; }
.docs-pagenav .dpn-next .dpn-body { align-items: flex-end; }

/* One column once two cards would each be narrower than about 300px. In px, not
   em: Material's 20px root makes em breakpoints 25% wider than they read. */
@media screen and (max-width: 880px) {
  .docs-pagenav { margin-top: 44px; padding-top: 22px; }
  .docs-pagenav .dpn-shell { grid-template-columns: 1fr; gap: 12px; }
  .docs-pagenav .dpn-empty { display: none; }
  .docs-pagenav .dpn-next { flex-direction: row; text-align: left; justify-content: flex-start; }
  .docs-pagenav .dpn-next .dpn-body { align-items: flex-start; }
  .docs-pagenav .dpn-next .dpn-arrow { order: 2; }
  /* one narrow column, so the same sentence needs a third line to finish */
  .docs-pagenav .dpn-desc { -webkit-line-clamp: 3; }
}

/* ---- Search field: compact and modern, not a wide flat form box ---- */
@media screen and (min-width: 1220px) {
  /* Let the search occupy the space between the logo and site links, then centre
     its compact field inside that space. The field width must stay fixed in both
     resting and focused states: Material otherwise changes its bounds under the
     pointer as the search toggle opens. */
  .md-header__inner .md-search {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .md-header__inner .md-search__inner,
  [data-md-toggle=search]:checked ~ .md-header .md-search__inner {
    width: 15rem !important;
    max-width: 100%;
    left: auto !important;
    right: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
    transform: none !important;
  }
}

.md-search__form {
  height: 34px !important;
  border-radius: 999px !important;    /* pill, not a rectangle */
  background: rgba(8,9,11,.045) !important;
  border: 1px solid transparent !important;
  box-shadow: none !important;
  transition: background .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.md-search__form:hover { background: rgba(8,9,11,.07) !important; }
.md-search__form:focus-within {
  background: #fff !important;
  border-color: rgba(101,163,13,.45) !important;
  box-shadow: 0 0 0 3px rgba(101,163,13,.10) !important;
}

.md-search__input {
  height: 34px !important;
  font-size: 14px !important;
  padding-left: 2.1rem !important;
  padding-right: .9rem !important;
  color: #0c0c0f !important;
}
.md-search__input::placeholder {
  color: #9498a3 !important;
  font-size: 14px;
  font-weight: 400;
}

/* A smaller, lighter magnifier, vertically centred.
   Material positions this with its own top/margin, and a translateY on top of
   that lands it low. Use flex centring over a full-height box instead, which
   cannot drift regardless of the field height. */
.md-search__icon[for=__search] {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: absolute !important;
  left: .55rem !important;
  top: 0 !important;
  bottom: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  width: 1.6rem !important;
  height: auto !important;
  transform: none !important;
  color: #9498a3 !important;
  opacity: 1 !important;
}
.md-search__icon[for=__search] svg {
  width: 15px !important;
  height: 15px !important;
  display: block;
}
.md-search__form:focus-within .md-search__icon[for=__search] { color: #6b7180 !important; }

/* the clear button, only once there is something to clear */
.md-search__options .md-icon { width: 15px; height: 15px; color: #9498a3; }

@media screen and (max-width: 1219px) {
  .md-search__form { height: 32px !important; }
  .md-search__input { height: 32px !important; font-size: 13.5px !important; }
}


/* ---- Search results panel ----
   The panel is anchored to the field, so a 300px field clipped every result.
   Give it its own width and stop the titles inheriting the page h1 style. */
@media screen and (min-width: 1220px) {
  .md-search__output {
    width: min(30rem, calc(100vw - 4rem)) !important;
    max-width: calc(100vw - 4rem) !important;
    left: 50% !important;
    transform: translateX(-50%);
    border-radius: 10px !important;
    box-shadow: 0 8px 28px rgba(8,9,11,.13), 0 1px 3px rgba(8,9,11,.08) !important;
    border: 1px solid rgba(8,9,11,.08);
  }
  .md-search__scrollwrap { width: 100% !important; max-height: 65vh !important; }
}

/* Titles were rendering as full-size Literata headings.
   The fuzzy-search fallback emits a bare <h1> with no class, so the class
   selector alone never matched and the page h1 rule won. Match the elements. */
.md-search-result h1,
.md-search-result h2,
.md-search-result h3,
.md-search__output h1,
.md-search__output h2,
.md-search__output h3,
.md-search-result__link h1,
.md-search-result__article > h1,
.md-search-result__title,
.md-search-result__link .md-search-result__title {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 14.5px !important;
  font-weight: 600 !important;
  line-height: 1.35 !important;
  letter-spacing: -.005em !important;
  color: #0c0c0f !important;
  margin: 0 0 .15rem !important;
}
.md-search-result p,
.md-search__output p,
.md-search-result__teaser {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 13px !important;
  line-height: 1.5 !important;
  color: #6b7180 !important;
  -webkit-line-clamp: 2 !important;
  margin: 0 !important;
}
.md-search-result__article,
.md-search-result__item .md-search-result__link { padding: .7rem .95rem !important; }
.md-search-result__meta {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 11px !important;
  letter-spacing: .085em !important;
  text-transform: uppercase !important;
  color: #9498a3 !important;
  padding: .7rem .95rem .35rem !important;
}
.md-search-result mark { color: #3b6a00 !important; background: transparent !important; font-weight: 700 !important; }
/* Material renders this as an EMPTY div here (no svg inside), so it was just
   16px of nothing showing as a broken box jammed against each title. */
.md-search-result__icon { display: none !important; }

/* Share / clear buttons were crowding the right edge and the text ran under
   them. Space them, and keep the input clear of both. */
.md-search__options {
  right: .5rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  align-items: center !important;
  gap: .3rem !important;
}
.md-search__options .md-search__icon {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;
  height: 24px !important;
  margin: 0 !important;
  padding: 0 !important;
  border-radius: 999px !important;
  color: #9498a3 !important;
  transform: none !important;
  transition: background .15s ease, color .15s ease;
}
.md-search__options .md-search__icon svg { width: 14px !important; height: 14px !important; }
.md-search__options .md-search__icon:hover { background: rgba(8,9,11,.07) !important; color: #3b6a00 !important; }
/* room for both buttons so typed text never runs beneath them */
.md-search__input, .md-search__suggest { padding-right: 3.6rem !important; }
.md-search-result__more > summary > div {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 12.5px !important;
  color: #3b6a00 !important;
  padding: .5rem .95rem !important;
}
.md-search-result__list { border: 0 !important; }
.md-search-result__item { border-top: 1px solid rgba(8,9,11,.07) !important; box-shadow: none !important; }
.md-search-result__item:first-child { border-top: 0 !important; }

/* ---- Autocomplete ghost text ----
   It sits behind the real input, so any difference in font, size or padding
   shows up as two overlapping strings. Match the input exactly. */
.md-search__suggest {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 34px !important;
  height: 34px !important;
  padding-left: 2.1rem !important;
  padding-right: .9rem !important;
  color: #c3c6cd !important;
  white-space: nowrap;
  overflow: hidden;
}
.md-search__input {
  font-family: 'Hanken Grotesk', sans-serif !important;
  font-weight: 400 !important;
  letter-spacing: normal !important;
  line-height: 34px !important;
}


/* ---- Fade at the foot of a scrollable sidebar ----
   The fade must hang off the SCROLLWRAP, the box that actually scrolls.
   Hanging it off .md-sidebar put it at that element's own bottom edge, which
   sits near the TOP of the visible rail, so the fade appeared above the menu.
   A sticky pseudo-element sits at the end of the content and pins itself to
   the bottom of the visible box instead. */
@media screen and (min-width: 1220px) {
  .md-sidebar--primary .md-sidebar__scrollwrap::after {
    content: "";
    display: block;
    position: sticky;
    bottom: 0;
    height: 3rem;
    margin-top: -3rem;        /* reclaim the space it occupies in the flow */
    pointer-events: none;
    background: linear-gradient(
      to bottom,
      rgba(251,251,248,0) 0%,
      rgba(251,251,248,.75) 55%,
      rgba(251,251,248,.97) 100%
    );
    opacity: 0;
    transition: opacity .18s ease;
    z-index: 2;
  }
  /* only while there is genuinely more to scroll to */
  .md-sidebar--primary[data-esb-overflow="1"] .md-sidebar__scrollwrap::after { opacity: 1; }
}

/* ---- The sticky rail was painting over the footer ----
   Reported as "the sidebar's fade paints a white box across the footer when
   you scroll fast". The fade is the visible part, but it is a symptom: at the
   bottom of the page the scrollwrap's own box extends ~290px PAST the top of
   the footer, so the whole rail overlaps it. Hit-testing inside the footer
   returned .md-nav__link, not the footer - the nav was literally on top of it
   and would have swallowed clicks near the left edge.

   So raising the footer is the right fix rather than hiding the fade: it
   corrects the stacking for the entire rail, not just its last 3rem. Both the
   footer and the key-parts band need it, since they are siblings in the same
   stacking context and the rail spills across both. Verified by scrolling fast
   and hit-testing, not by reading z-index values: 5/5 probe points inside the
   footer hit nav links before, 0/5 after. */
footer.footer--site,
.docs-keyparts { position: relative; z-index: 3; }

/* ---- Footer type: sized for a 16px root, rendered at 20-22px ----
   This footer is shared markup with the marketing site, where the root is
   16px. Material's root here is 20px (22px above 1600px), so every rem-based
   size in the block above renders 25-37% larger: the intro paragraph came out
   at 22px against 18px body text, so the footer shouted louder than the page.
   Pinned in px, a step BELOW the body size, so it reads as a quieter register. */
.footer--site .footer-intro > p      { font-size: 16px; }
.footer--site .footer-group a        { font-size: 15px; }
footer.footer--site .footer-group h2 { font-size: 11.5px !important; }
.footer--site .footer-start          { font-size: 15px; }
.footer--site .footer-meta p         { font-size: 12.5px; }
footer.footer--site .logo            { font-size: 30px !important; }
.docs-keyparts h2                    { font-size: 11.5px !important; }
.docs-keyparts a                     { font-size: 15px; }

/* ---- Footer gutter, matched to the content region ----
   The footer sits OUTSIDE .md-main__inner, so it did not inherit the page
   gutter and stayed on its own `min(100% - 48px, 76rem)`. Same width
   expression as .md-main__inner in p1-docs.css, band for band, so the header,
   the content and the footer share one left edge at every width. */
@media screen and (min-width: 1600px) {
  .footer--site .footer-shell,
  .footer--site .footer-meta,
  .docs-keyparts .dk-shell { width: min(100% - 160px, 80rem); }
}
@media screen and (min-width: 1400px) and (max-width: 1599px) {
  .footer--site .footer-shell,
  .footer--site .footer-meta,
  .docs-keyparts .dk-shell { width: min(100% - 96px, 80rem); }
}
@media screen and (min-width: 1220px) and (max-width: 1399px) {
  .footer--site .footer-shell,
  .footer--site .footer-meta,
  .docs-keyparts .dk-shell { width: min(100% - 48px, 80rem); }
}