/* Microsoft brand tokens, from unfairly.ai/brand-guidelines/microsoft (checked 2026-10-29).
   Sizes, spacing and components were measured on https://www.microsoft.com/en-us/ (see spec.md).
   Fonts: --font-* use the open stand-ins (load them from Google Fonts); --font-*-original name Microsoft's own faces, which you may only use if you have a licence. */
:root {
  --color-paper: #FFFFFF;
  --color-surface: #F4FAFD;
  --color-ink: #0E1726;
  --color-ink-muted: #17253D;
  --color-accent: #0078D4;
  --color-on-accent: #FFFFFF;
  --color-accent-secondary: #004275;
  --color-night: #000000;
  --color-on-night: #F4FAFD;
  --color-logo-red: #F25022;
  --color-logo-green: #7FBA00;
  --color-logo-blue: #00A4EF;
  --color-logo-yellow: #FFB900;
  --color-logotype-gray: #737373;
  --color-communication-blue-site-cta: #0078D4;
  --color-link-blue: #0067B8;
  --color-selected-pill-navy: #004275;
  --color-ink-navy: #0E1726;
  --color-body-navy: #17253D;
  --color-control-navy: #2A446F;
  --color-prompt-pill-fill: #E6EFFD;
  --color-hero-warm-white: #FFF9F5;
  --color-ice-ground: #F4FAFD;
  --color-card-footnote-ice: #E6F2FB;
  --color-footer-gray: #F2F2F2;
  --color-footer-text: #616161;
  --color-header-text: #262626;
  --color-promo-plum: #882A8B;
  --color-card-hairline: #E7E7E7;
  --color-field-border: #E1DFDD;
  --color-placeholder-gray: #8D8D8D;
  --color-placeholder-blue-gray: #6F768B;
  --color-underline-teal: #6CD0C2;
  --color-disabled-arrow: #C6CED8;
  --color-card-overlay-black: #000000;
  --color-back-to-top-fill: #F7F7F7;
  --color-brandweb-80-fluent-primary: #0F6CBD;
  --color-brandweb-70: #115EA3;
  --color-brandweb-60: #0F548C;
  --color-brandweb-100: #479EF5;
  --color-brandweb-160: #EBF3FC;
  --color-grey-14: #242424;
  --color-grey-26: #424242;
  --color-grey-82: #D1D1D1;
  --color-grey-98: #FAFAFA;
  --color-grey-96: #F5F5F5;
  --color-grey-16: #292929;
  --color-button-primary-fill: #0078D4;
  --color-button-primary-text: #FFFFFF;
  --color-button-on-dark-fill: #FFFFFF;
  --color-button-on-dark-text: #0E1726;
  --color-ask-field-fill: #FFFFFF;
  --color-suggestion-pill-fill: #E6EFFD;
  --color-suggestion-pill-text: #2A446F;
  --color-tag-fill: #882A8B;
  --color-tag-text: #FFFFFF;
  --color-feature-card-fill: #FFFFFF;
  --color-card-banner-fill: #FFFFFF;
  --color-social-tile-fill: #FFFFFF;
  --color-chat-badge-fill: #0078D4;
  --font-display: "Hanken Grotesk", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-display-original: "Segoe UI Variable Display", "Hanken Grotesk", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-body: "Hanken Grotesk", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-body-original: "Segoe UI Variable Text / Segoe UI", "Hanken Grotesk", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, "Helvetica Neue", sans-serif;
  --font-mono: "JetBrains Mono", Consolas, 'Cascadia Mono', monospace;
  --page-margin: 72px;
  --container-max: 1296px;
  --card-gap: 24px;
  --nav-height: 54px;
  --grid-gutter: 24px;
  --grid-columns: 12;
  --text-hero-greeting-h1-size: 62px;
  --text-hero-greeting-h1-line: 1.16;
  --text-hero-greeting-h1-weight: 500;
  --text-hero-greeting-h1-tracking: -1.55px;
  --text-section-headline-h2-size: 48px;
  --text-section-headline-h2-line: 1.17;
  --text-section-headline-h2-weight: 500;
  --text-section-headline-h2-tracking: -1.2px;
  --text-card-and-banner-headline-size: 32px;
  --text-card-and-banner-headline-line: 1.25;
  --text-card-and-banner-headline-weight: 500;
  --text-card-and-banner-headline-tracking: -0.8px;
  --text-feature-card-title-h3-size: 20px;
  --text-feature-card-title-h3-line: 1.4;
  --text-feature-card-title-h3-weight: 600;
  --text-feature-card-title-h3-tracking: -0.3px;
  --text-body-size: 16px;
  --text-body-line: 1.5;
  --text-body-weight: 400;
  --text-body-tracking: -0.48px;
  --text-italic-prompt-size: 16px;
  --text-italic-prompt-line: 1.5;
  --text-italic-prompt-weight: 400;
  --text-italic-prompt-tracking: -0.48px;
  --text-button-label-size: 15px;
  --text-button-label-line: 1.47;
  --text-button-label-weight: 600;
  --text-button-label-tracking: -0.3px;
  --text-suggestion-pill-size: 15px;
  --text-suggestion-pill-line: 1.47;
  --text-suggestion-pill-weight: 400;
  --text-tag-size: 14px;
  --text-tag-line: 1.43;
  --text-tag-weight: 600;
  --text-tag-tracking: -0.48px;
  --text-header-link-size: 13px;
  --text-header-link-line: 1.2;
  --text-header-link-weight: 400;
  --text-footer-heading-size: 15px;
  --text-footer-heading-line: 1.33;
  --text-footer-heading-weight: 600;
  --text-footer-heading-tracking: -0.375px;
  --text-footer-link-size: 11px;
  --text-footer-link-line: 1.45;
  --text-footer-link-weight: 400;
  --text-footer-link-tracking: -0.48px;
  --text-fluent-display-reference-size: 68px;
  --text-fluent-display-reference-line: 1.35;
  --text-fluent-display-reference-weight: 600;
  --radius-button-primary: 8px;
  --radius-button-on-dark: 8px;
  --radius-ask-field: 4px;
  --radius-suggestion-pill: 16px;
  --radius-promo-card: 24px;
  --radius-tag: 4px;
  --radius-feature-card: 24px;
  --radius-card-banner: 24px;
  --radius-carousel-button: 200px;
  --radius-pause-button: 8px;
  --radius-social-tile: 8px;
  --radius-chat-badge: 18px;
  --radius-avatar-ring: 18px;
  --ease-fluent-in: cubic-bezier(0.1,0.9,0.2,1);
  --ease-fluent-out: cubic-bezier(1,0,1,1);
  --ease-curvedeceleratemid: cubic-bezier(0,0,0,1);
  --ease-curvedeceleratemax: cubic-bezier(0.1,0.9,0.2,1);
  --ease-curveacceleratemid: cubic-bezier(1,0,1,1);
  --ease-curveeasyease: cubic-bezier(0.33,0,0.67,1);
  --ease-curveeasyeasemax: cubic-bezier(0.8,0,0.2,1);
  --ease-curvelinear: cubic-bezier(0,0,1,1);
  --icon-12: 12px;
  --icon-16: 16px;
  --icon-20: 20px;
  --icon-24: 24px;
  --icon-32: 32px;
}
/* Phone values measured at 390px. Microsoft's breakpoint wasn't measured: 600px is our default. */
@media (max-width: 600px) {
  :root {
    --page-margin: 16px;
    --text-hero-greeting-h1-size: 40px;
    --text-section-headline-h2-size: 32px;
    --text-card-and-banner-headline-size: 24px;
    --text-feature-card-title-h3-size: 18px;
  }
}
.button-primary {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 16px; border-radius: 8px;
  background: #0078D4; color: #FFFFFF;
  font: 600 15px/1 var(--font-body);
}
.button-on-dark {
  box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center;
  border: 0; cursor: pointer; text-decoration: none;
  height: 40px; padding: 0 16px; border-radius: 8px;
  background: #FFFFFF; color: #0E1726;
  font: 600 15px/1 var(--font-body);
}