/* Django brand tokens, from unfairly.ai/brand-guidelines/django (checked 2026-10-31).
   Sizes, spacing and components were measured on https://www.djangoproject.com/styleguide/ (The Django Web Style Guide (updated December 15, 2014), the Official Django Logos page and the DSF Trademark License, read 2026-10-31, plus the site's open-source SCSS (_utils.scss, _style.scss, _dark-mode.scss, _styleguide.scss at commit bf2d45dc) for exact values).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Django's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F8F8F8;
  --color-ink: #0C3C26;
  --color-ink-muted: #798780;
  --color-accent: #44B78B;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #20AA76;
  --color-night: #0C4B33;
  --color-on-night: #F1FFF7;
  --color-logo-green: #092E20;
  --color-text: #0C3C26;
  --color-dark-green: #0C4B33;
  --color-green: #20AA76;
  --color-light-green: #93D7B7;
  --color-white: #F1FFF7;
  --color-dark-red: #6A0E0E;
  --color-medium-dark-green: #2B8C67;
  --color-medium-green: #44B78B;
  --color-very-light-green: #C9F0DD;
  --color-text-light: #798780;
  --color-gray-line: #CFE3DC;
  --color-red: #BA2121;
  --color-paper-white: #FFFFFF;
  --color-off-white: #F8F8F8;
  --color-gray-medium: #859D94;
  --color-gray-dark: #343940;
  --color-green-dark-text: #3C8866;
  --color-code-border: #EAEAEA;
  --color-warning-banner: #FFE761;
  --color-warning-icon: #E9BD46;
  --color-warning-yellow: #FFFDF1;
  --color-warning-dark-yellow: #F5F1C7;
  --color-orange: #AB5603;
  --color-dark-orange: #F87C04;
  --color-red-light: #FFBABA;
  --color-red-medium: #E46767;
  --color-black: #0E1117;
  --color-dark-mode-text: #C1CAD2;
  --color-logo-ground-dark: #272C27;
  --color-tile-green: #113228;
  --color-link-hover: #1D915C;
  --color-link-visited: #156741;
  --color-link-green-hover: #25C488;
  --color-cta-hover: #51BE95;
  --color-cta-active: #41B085;
  --color-menu-divider: #106142;
  --color-heart-pink: #D9195C;
  --color-heart-hot-pink: #EE2178;
  --color-heart-rose: #D62D75;
  --color-heart-crimson: #AD1D45;
  --color-heart-highlight: #F7B0CF;
  --color-dark-footer-band: #187F58;
  --color-dark-sidebar: #181D27;
  --color-dark-meta: #A1B4AD;
  --color-dark-description: #AFB7B3;
  --color-button-primary-fill: #44B78B;
  --color-button-primary-text: #FFFFFF;
  --color-button-sidebar-fill: #44B78B;
  --color-button-sidebar-text: #FFFFFF;
  --color-button-outline-text: #859D94;
  --color-button-outline-ring: #CFE3DC;
  --color-feature-icon-fill: #20AA76;
  --color-feature-icon-on: #F1FFF7;
  --color-community-card-fill: #C9F0DD;
  --color-sidebar-heading-text: #0C3C26;
  --color-readmore-link-text: #20AA76;
  --color-nav-link-text: #F1FFF7;
  --color-search-field-fill: #FFFFFF;
  --color-search-field-text: #0C3C26;
  --color-footer-link-text: #F1FFF7;
  --color-text-link-text: #20AA76;
  --font-display: Roboto, Roboto, Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
  --font-body: Roboto, Roboto, Corbel, Avenir, "Lucida Grande", "Lucida Sans", sans-serif;
  --font-mono: "Fira Mono", "Fira Mono", Consolas, Menlo, Monaco, "Courier New", Courier, monospace;
  --page-margin: 60px;
  --section-padding: 40px;
  --container-max: 1320px;
  --hero-text-max: 700px;
  --card-gap: 60px;
  --nav-height: 82px;
  --grid-gutter: 106px;
  --grid-columns: 2;
  --text-hero-size: 36px;
  --text-hero-line: 1.3;
  --text-hero-weight: 300;
  --text-hero-tracking: -1px;
  --text-banner-size: 32px;
  --text-banner-line: 1.3;
  --text-banner-weight: 300;
  --text-banner-tracking: -1px;
  --text-h1-size: 32px;
  --text-h1-line: 1.1;
  --text-h1-weight: 400;
  --text-h1-tracking: -1px;
  --text-h2-size: 24px;
  --text-h2-line: 1.6;
  --text-h2-weight: 400;
  --text-feature-title-size: 18px;
  --text-feature-title-line: 1.6;
  --text-feature-title-weight: 400;
  --text-body-size: 18px;
  --text-body-line: 1.6;
  --text-body-weight: 400;
  --text-card-title-size: 20px;
  --text-card-title-line: 1.2;
  --text-card-title-weight: 700;
  --text-side-heading-size: 20px;
  --text-side-heading-line: 1.2;
  --text-side-heading-weight: 400;
  --text-news-title-size: 16px;
  --text-news-title-line: 1.2;
  --text-news-title-weight: 700;
  --text-small-size: 14px;
  --text-small-line: 1.6;
  --text-small-weight: 400;
  --text-meta-size: 14px;
  --text-meta-line: 1.3;
  --text-meta-weight: 400;
  --text-readmore-size: 12px;
  --text-readmore-line: 1.6;
  --text-readmore-weight: 700;
  --text-nav-size: 13px;
  --text-nav-line: 1.23;
  --text-nav-weight: 700;
  --text-cta-size: 18px;
  --text-cta-line: 1.3;
  --text-cta-weight: 700;
  --text-cta-tracking: -1px;
  --text-cta-side-size: 16px;
  --text-cta-side-line: 1.6;
  --text-cta-side-weight: 700;
  --text-cta-outline-size: 18px;
  --text-cta-outline-line: 1.6;
  --text-cta-outline-weight: 400;
  --text-footer-head-size: 16px;
  --text-footer-head-line: 1.2;
  --text-footer-head-weight: 700;
  --text-footer-link-size: 14px;
  --text-footer-link-line: 1.6;
  --text-footer-link-weight: 400;
  --text-credit-size: 20px;
  --text-credit-line: 1.6;
  --text-credit-weight: 400;
  --text-fine-size: 12px;
  --text-fine-line: 1.6;
  --text-fine-weight: 400;
  --text-backtotop-size: 14px;
  --text-backtotop-line: 1.6;
  --text-backtotop-weight: 700;
  --text-h3-size: 20px;
  --text-h3-line: 1.2;
  --text-h3-weight: 700;
  --radius-button-primary: 5px;
  --radius-button-sidebar: 5px;
  --radius-button-outline: 5px;
  --radius-feature-icon: 40px;
  --radius-community-card: 20px;
  --radius-search-field: 4px;
  --ease-menu: ease-out;
  --duration-menu: 300ms;
  --ease-fade: ease-in-out;
  --duration-fade: 200ms;
  --ease-slow: ease-out;
  --duration-slow: 500ms;
  --icon-styleguide: 32px;
}
/* Phone values measured at 390px; Django's CSS switches at 767px. */
@media (max-width: 767px) {
  :root {
    --page-margin: 10px;
    --section-padding: 40px;
    --text-banner-size: 24px;
    --text-feature-title-size: 24px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 61px; padding: 0 50px; border-radius: 5px;
  background: #44B78B; color: #FFFFFF;
  font: 700 18px/1 var(--font-body);
}
.button-primary:hover { background-color: #51BE95; } /* observed */
.button-primary:focus-visible { outline: 2px solid #44B78B; outline-offset: 2px; } /* published */
.button-primary:active { background-color: #41B085; } /* published */
.button-sidebar {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 58px; padding: 0 24px; border-radius: 5px;
  background: #44B78B; color: #FFFFFF;
  font: 700 16px/1 var(--font-body);
}
.button-sidebar:hover { background-color: #51BE95; } /* observed */
.button-sidebar:active { background-color: #41B085; } /* published */
.button-outline {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 67px; padding: 0 27px; border-radius: 5px;
  background: transparent; color: #859D94;
  box-shadow: inset 0 0 0 1px #CFE3DC;
  font: 400 18px/1 var(--font-body);
}
.button-outline:hover { color: #20AA76; box-shadow: inset 0 0 0 1px #20AA76; } /* observed */
.button-outline:active { color: #44B78B; box-shadow: inset 0 0 0 1px #44B78B; } /* published */