/* Astro brand tokens, from unfairly.ai/brand-guidelines/astro (checked 2026-10-31).
   Sizes, spacing and components were measured on https://astro.build/press/ (Astro publishes no brand PDF. Logo law from the press page (astro.build/press/, read 2026-10-31); brand idea, faces and mascot from the 2023 rebrand post; tokens from the open-source site repo github.com/withastro/astro.build (sparse clone, main, read 2026-10-31); voice and proof from the homepage (observed 2026-10-31)).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Astro's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #060913;
  --color-surface: #0C0F19;
  --color-ink: #F2F6FA;
  --color-ink-muted: #BFC1C9;
  --color-accent: #3245FF;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #F041FF;
  --color-night: #060913;
  --color-on-night: #F2F6FA;
  --color-astro-dark-900-page-ground: #060913;
  --color-black: #0D0F14;
  --color-astro-dark-800-panel: #0C0F19;
  --color-astro-dark-700: #11172A;
  --color-astro-dark-600: #2C2C2C;
  --color-astro-dark-500: #4B4B4B;
  --color-astro-dark-400: #18191E;
  --color-astro-dark-300: #343841;
  --color-astro-dark-100: #858B98;
  --color-astro-gray-100-off-white-ink: #F2F6FA;
  --color-astro-gray-200-muted-ink: #BFC1C9;
  --color-astro-gray-300: #858B98;
  --color-astro-gray-400: #545864;
  --color-astro-gray-500: #343841;
  --color-astro-gray-600: #23262D;
  --color-astro-gray-700: #17191E;
  --color-white: #FFFFFF;
  --color-astro-blue: #3245FF;
  --color-astro-purple: #BC52EE;
  --color-blue-purple-gradient-end: #B845ED;
  --color-astro-purple-dark: #3F224D;
  --color-astro-red: #D83333;
  --color-astro-pink: #F041FF;
  --color-astro-pink-light: #E8C4F9;
  --color-astro-green: #4AF2C8;
  --color-blue-green-gradient-end: #2F4CB3;
  --color-yellow-repo-token-astro-orange: #F8E42E;
  --color-orange-repo-token-astro-yellow: #FF7D54;
  --color-final-cta-teal-ground: #1A3E57;
  --color-homepage-1321ac: #1321AC;
  --color-homepage-881abd: #881ABD;
  --color-homepage-07040f: #07040F;
  --color-homepage-264a89: #264A89;
  --color-homepage-61dafb: #61DAFB;
  --color-homepage-41b883: #41B883;
  --color-homepage-673ab8: #673AB8;
  --color-homepage-ff3e00: #FF3E00;
  --color-homepage-76b3e1: #76B3E1;
  --color-homepage-030712: #030712;
  --color-homepage-3178c6: #3178C6;
  --color-homepage-6b7aab: #6B7AAB;
  --color-homepage-2f3854: #2F3854;
  --color-homepage-8b909d: #8B909D;
  --color-homepage-54b9ff: #54B9FF;
  --color-homepage-4bf3c8: #4BF3C8;
  --color-homepage-ffd493: #FFD493;
  --color-homepage-eef0f9: #EEF0F9;
  --color-homepage-acafff: #ACAFFF;
  --color-homepage-00daef: #00DAEF;
  --color-homepage-40debf: #40DEBF;
  --color-homepage-334ba9: #334BA9;
  --color-homepage-211f2f: #211F2F;
  --color-homepage-074170: #074170;
  --color-homepage-184560: #184560;
  --color-homepage-08203e: #08203E;
  --color-homepage-000328: #000328;
  --color-homepage-103783: #103783;
  --color-homepage-243748: #243748;
  --color-homepage-0a3431: #0A3431;
  --color-homepage-133a94: #133A94;
  --color-homepage-282c34: #282C34;
  --color-homepage-1d2025: #1D2025;
  --color-homepage-2d3039: #2D3039;
  --color-homepage-1a146a: #1A146A;
  --color-homepage-34157c: #34157C;
  --color-homepage-6019a5: #6019A5;
  --color-homepage-140c32: #140C32;
  --color-homepage-111140: #111140;
  --color-homepage-2d7d8b: #2D7D8B;
  --color-homepage-275a8d: #275A8D;
  --color-homepage-16354a: #16354A;
  --color-button-primary-fill: #FFFFFF;
  --color-install-block-text: #BFC1C9;
  --color-button-secondary-text: #BFC1C9;
  --color-panel-fill: #0C0F19;
  --color-category-tab-text: #BFC1C9;
  --color-feature-card-fill: #0C0F19;
  --color-browser-window-fill: #07040F;
  --color-nav-link-text: #BFC1C9;
  --color-text-link-text: #F2F6FA;
  --font-display: "Hubot Sans", "Hubot Sans", Archivo, Verdana, system-ui, sans-serif;
  --font-display-original: Obviously, "Hubot Sans", "Hubot Sans", Archivo, Verdana, system-ui, sans-serif;
  --font-body: Inter, Inter, Arial, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "IBM Plex Mono", monospace;
  --font-mono-original: MDIO, "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, "IBM Plex Mono", monospace;
  --page-margin: 112px;
  --section-padding: 144px;
  --container-max: 1280px;
  --hero-text-max: 704px;
  --card-gap: 16px;
  --nav-height: 80px;
  --grid-gutter: 16px;
  --grid-columns: 3;
  --text-display-xl-size: 48px;
  --text-display-xl-line: 1.1;
  --text-display-xl-weight: 700;
  --text-display-l-size: 36px;
  --text-display-l-line: 1.111;
  --text-display-l-weight: 700;
  --text-statement-size: 36px;
  --text-statement-line: 1.111;
  --text-statement-weight: 290;
  --text-display-m-size: 30px;
  --text-display-m-line: 1.2;
  --text-display-m-weight: 700;
  --text-title-s-size: 20px;
  --text-title-s-line: 1.4;
  --text-title-s-weight: 700;
  --text-lead-size: 18px;
  --text-lead-line: 1.5;
  --text-lead-weight: 300;
  --text-eyebrow-size: 16px;
  --text-eyebrow-line: 1.5;
  --text-eyebrow-weight: 600;
  --text-title-xs-size: 16px;
  --text-title-xs-line: 1.5;
  --text-title-xs-weight: 600;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 300;
  --text-button-size: 16px;
  --text-button-line: 1.5;
  --text-button-weight: 400;
  --text-nav-size: 16px;
  --text-nav-line: 1.5;
  --text-nav-weight: 300;
  --text-score-size: 30px;
  --text-score-line: 1.2;
  --text-score-weight: 600;
  --text-footer-h-size: 16px;
  --text-footer-h-line: 1;
  --text-footer-h-weight: 600;
  --text-small-size: 14px;
  --text-small-line: 1.4286;
  --text-small-weight: 300;
  --text-code-size: 14px;
  --text-code-line: 1.4286;
  --text-code-weight: 300;
  --text-code-s-size: 13.6px;
  --text-code-s-line: 1.65;
  --text-code-s-weight: 400;
  --text-label-mono-size: 12px;
  --text-label-mono-line: 1.333;
  --text-label-mono-weight: 400;
  --text-label-mono-tracking: 0.3px;
  --text-numeral-size: 200px;
  --text-numeral-line: 1;
  --text-numeral-weight: 700;
  --radius-button-primary: 9999px;
  --radius-install-block: 12px;
  --radius-button-secondary: 9999px;
  --radius-release-pill: 9999px;
  --radius-panel: 16px;
  --radius-category-tab: 9999px;
  --radius-feature-card: 16px;
  --radius-browser-window: 16px;
  --radius-theme-tile: 12px;
  --radius-agency-tile: 8px;
  --ease-float: ease-in-out;
  --duration-float: 6000ms;
  --ease-card-hover: ease-out;
  --duration-card-hover: 300ms;
  --ease-link: ease-out;
  --duration-link: 300ms;
  --ease-button: ease-in-out;
  --duration-button: 500ms;
  --ease-logo-reveal: ease;
  --duration-logo-reveal: 500ms;
  --icon-gem-glyph: 20px;
  --icon-ui: 24px;
}
/* Phone values measured at 390px; Astro's CSS switches at 639px. */
@media (max-width: 639px) {
  :root {
    --page-margin: 16px;
    --section-padding: 80px;
    --text-display-xl-size: 30px;
    --text-display-l-size: 20px;
    --text-statement-size: 24px;
    --text-display-m-size: 24px;
    --text-nav-size: 20px;
    --text-score-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: 42px; padding: 0 16px; border-radius: 9999px;
  background: #FFFFFF; color: var(--color-blue-purple-gradient-text-3245ff-to-b845ed);
  font: 400 16px/1 var(--font-body);
}
.button-primary:hover { background-color: #F2F6FA; color: #3245FF; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* observed */
.button-primary:focus-visible { outline: 2px solid; outline-offset: 2px; } /* observed */
.button-secondary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 42px; padding: 0 16px; border-radius: 9999px;
  background: var(--color-rgba-44-44-44-0-3); color: #BFC1C9;
  font: 400 16px/1 var(--font-body);
}
.button-secondary:hover { border-color: rgba(133,139,152,0.6); color: #F2F6FA; transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* observed */