/* Reusable, opt-in starter components — recommended extension of the homepage.
 * Load tokens.css first. No legacy .button/.card/global h1/em overrides.
 * Colors, fonts and surface treatment follow the live homepage; body/control
 * sizes prioritize readability on app, article and account pages.
 */
.ms-theme {
  margin: 0;
  color: var(--ms-color-text);
  background: var(--ms-color-page);
  font-family: var(--ms-font-body);
  font-size: var(--ms-text-body);
  line-height: var(--ms-leading-body);
  -webkit-font-smoothing: antialiased;
}
.ms-theme *, .ms-theme *::before, .ms-theme *::after { box-sizing: border-box; }
.ms-theme :where(h1,h2,h3,p,figure) { margin: 0; }
.ms-theme :where(img,svg) { max-width: 100%; }
.ms-theme img { display: block; height: auto; }
.ms-theme :where(button,input,select,textarea) { font: inherit; }
.ms-theme :where(button,a,input,select,textarea,summary) { touch-action: manipulation; }
.ms-theme :where(button,a,input,select,textarea,summary,[tabindex]):focus-visible {
  outline: 3px solid var(--ms-color-focus);
  outline-offset: 5px;
}
.ms-wrap { width: min(var(--ms-content-max), calc(100% - 2 * var(--ms-gutter))); margin-inline: auto; }
.ms-section { padding-block: var(--ms-space-20); }
.ms-stack > * + * { margin-block-start: var(--ms-space-6); }
.ms-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--ms-space-4); }
.ms-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--ms-space-8); }
.ms-grid > *, .ms-split > * { min-width: 0; }
.ms-split { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--ms-space-12); }
.ms-readable { max-width: var(--ms-reading-max); }
.ms-title, .ms-section-title, .ms-hero-title {
  font-family: var(--ms-font-display);
  font-weight: 400;
  line-height: var(--ms-leading-heading);
  letter-spacing: -.035em;
  overflow-wrap: anywhere;
}
.ms-title { font-size: var(--ms-text-title); }
.ms-section-title { font-size: var(--ms-text-section); }
.ms-hero-title { font-size: var(--ms-text-hero); line-height: 1.02; }
.ms-title em, .ms-section-title em, .ms-hero-title em { color: var(--ms-olive); font-weight: 400; }
.ms-card-title { font-size: var(--ms-text-card); font-weight: 600; line-height: 1.35; letter-spacing: -.02em; }
.ms-eyebrow { font-size: .75rem; font-weight: 700; letter-spacing: .12em; line-height: 1.7; text-transform: uppercase; }
.ms-lead { font-size: var(--ms-text-lead); line-height: 1.5; }
.ms-muted { color: var(--ms-color-text-secondary); }
.ms-small { font-size: var(--ms-text-small); }
.ms-surface-sage { background: var(--ms-sage); }
.ms-surface-peach { background: var(--ms-peach); }
.ms-surface-butter { background: var(--ms-butter); }
/* Muted normal text does not meet 4.5:1 on tinted surfaces. */
:is(.ms-surface-sage,.ms-surface-peach,.ms-surface-butter) .ms-muted { color: var(--ms-ink); }
.ms-card { padding: var(--ms-space-8); background: var(--ms-cream); border: 1px solid var(--ms-line); border-radius: var(--ms-radius-card); }
.ms-card--raised { box-shadow: var(--ms-shadow-card); }
.ms-feature { padding: var(--ms-space-10); border-radius: var(--ms-radius-feature); }
.ms-button {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--ms-space-6); min-height: var(--ms-target-min); min-width: var(--ms-target-min);
  padding: 19px 24px; border: 1px solid var(--ms-color-action);
  border-radius: var(--ms-radius-button); background: var(--ms-color-action);
  color: var(--ms-color-on-action); font-size: .875rem; font-weight: 600;
  line-height: 1.4; text-align: center; text-decoration: none; cursor: pointer;
  transition: background var(--ms-motion-duration) var(--ms-motion-easing), transform var(--ms-motion-duration) var(--ms-motion-easing);
}
@media (hover: hover) {
  .ms-button:not(:disabled):hover { background: var(--ms-color-action-hover); transform: translateY(-2px); }
  .ms-button--secondary:not(:disabled):hover { background: var(--ms-sage); }
  .ms-button--danger:not(:disabled):hover { background: #7b302a; }
}
.ms-button--secondary { background: transparent; color: var(--ms-green); }
.ms-button--compact { padding: 10px 16px; }
.ms-button--danger { background: var(--ms-color-error); border-color: var(--ms-color-error); }
.ms-button:disabled { background: var(--ms-sage); border-color: var(--ms-line); color: var(--ms-muted); cursor: not-allowed; transform: none; }
.ms-link { color: var(--ms-green); text-decoration: underline; text-underline-offset: 4px; }
.ms-link:hover { text-decoration-thickness: 2px; }
.ms-wordmark { display: inline-flex; align-items: center; gap: 10px; color: var(--ms-ink); text-decoration: none; font-size: 31px; font-weight: 700; letter-spacing: -1.7px; line-height: 1.2; }
.ms-wordmark__light { font-weight: 400; }
.ms-wordmark svg { width: 25px; height: 34px; fill: none; stroke: var(--ms-green); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ms-header { border-bottom: 1px solid var(--ms-line); }
.ms-nav { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: var(--ms-space-6); min-height: 100px; padding-block: var(--ms-space-4); }
.ms-nav a:not(.ms-wordmark) { min-height: var(--ms-target-min); display: inline-flex; align-items: center; }
.ms-field { display: grid; gap: var(--ms-space-2); max-width: var(--ms-form-max); }
.ms-field label, .ms-field legend { font-size: .875rem; font-weight: 600; }
.ms-input { width: 100%; min-height: 48px; padding: 12px 14px; background: var(--ms-cream); color: var(--ms-ink); border: 1px solid var(--ms-color-control-border); border-radius: var(--ms-radius-control); font-size: 1rem; }
.ms-input::placeholder { color: var(--ms-muted); opacity: 1; }
.ms-input[aria-invalid="true"] { border-color: var(--ms-color-error); border-width: 2px; }
.ms-input:disabled { background: var(--ms-sage); color: var(--ms-muted); cursor: not-allowed; }
textarea.ms-input { min-height: 8rem; resize: vertical; }
.ms-choice { display: flex; align-items: center; gap: var(--ms-space-3); min-height: var(--ms-target-min); cursor: pointer; }
.ms-choice input { width: 20px; height: 20px; accent-color: var(--ms-green); flex: none; }
.ms-error { color: var(--ms-color-error); font-size: var(--ms-text-small); }
.ms-notice { border: 1px solid currentColor; border-radius: var(--ms-radius-control); padding: var(--ms-space-4); font-size: var(--ms-text-small); }
.ms-notice--success { color: var(--ms-color-success); background: var(--ms-color-success-surface); }
.ms-notice--warning { color: var(--ms-color-warning); background: var(--ms-color-warning-surface); }
.ms-notice--error { color: var(--ms-color-error); background: var(--ms-color-error-surface); }
.ms-badge { display: inline-flex; align-items: center; gap: var(--ms-space-2); padding: 4px 10px; border-radius: 999px; font-size: .875rem; color: var(--ms-ink); background: var(--ms-sage); }
.ms-table-region { overflow-x: auto; border: 1px solid var(--ms-line); border-radius: var(--ms-radius-panel); }
.ms-table { width: 100%; border-collapse: collapse; font-size: .875rem; }
.ms-table caption { text-align: start; padding: 16px; font-weight: 600; }
.ms-table th, .ms-table td { padding: 14px 16px; text-align: start; border-top: 1px solid var(--ms-line); vertical-align: top; }
.ms-table th { background: var(--ms-sage); color: var(--ms-ink); font-weight: 600; }
.ms-table .ms-numeric { text-align: end; font-variant-numeric: tabular-nums; }
.ms-disclosure { border-block-end: 1px solid var(--ms-line); }
.ms-disclosure summary { cursor: pointer; min-height: var(--ms-target-min); padding: 20px 0; font-weight: 500; }
.ms-disclosure > div { padding-block-end: 20px; }
.ms-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-tab { min-height: var(--ms-target-min); padding: 12px 16px; background: transparent; border: 1px solid var(--ms-color-control-border); border-radius: 8px; color: var(--ms-ink); cursor: pointer; }
.ms-tab[aria-selected="true"], .ms-tab[aria-pressed="true"] { background: var(--ms-sage); border-color: var(--ms-green); box-shadow: inset 0 -3px var(--ms-green); font-weight: 600; }
.ms-dialog { width: min(38rem, calc(100% - 40px)); max-height: 90dvh; margin: auto; padding: 28px; border: 1px solid var(--ms-line); border-radius: 12px; background: var(--ms-cream); color: var(--ms-ink); overflow: auto; }
.ms-dialog::backdrop { background: #152d23bf; }
.ms-photo-arch { aspect-ratio: 4/5; overflow: hidden; border-radius: 48% 48% 18px 18px; }
.ms-photo-arch img { width: 100%; height: 100%; object-fit: cover; }
.ms-screenshot { border: 5px solid white; border-radius: 14px; box-shadow: var(--ms-shadow-product); overflow: hidden; }
.ms-skip-link { position: fixed; left: 12px; top: -100px; z-index: 20; padding: 12px; background: var(--ms-green); color: white; }
.ms-skip-link:focus { top: 12px; }
.ms-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 950px) { .ms-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 650px) {
  .ms-section { padding-block: 56px; }
  .ms-grid, .ms-split { grid-template-columns: minmax(0,1fr); gap: 24px; }
  .ms-card, .ms-feature { padding: 24px; }
  .ms-nav { min-height: 77px; gap: 16px; }
  .ms-wordmark { font-size: 27px; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-theme *, .ms-theme *::before, .ms-theme *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}