/* =========================================================================
   RequestMe — Base
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  color-scheme: light dark;
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg-page);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: var(--text-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  transition: background-color var(--duration-base) var(--ease-standard),
              color var(--duration-base) var(--ease-standard);
}

img, picture, svg, video { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }

ul, ol { list-style: none; padding: 0; }

h1, h2, h3, h4 { font-weight: 600; line-height: 1.15; letter-spacing: -0.02em; }

table { border-collapse: collapse; width: 100%; }

::selection { background: var(--brand-200); color: var(--grey-950); }

:focus-visible {
  outline: 2px solid var(--action-focus);
  outline-offset: 2px;
  border-radius: var(--radius-s);
}

/* ---- Numbers: tabular figures everywhere ------------------------------ */
.num, .price, .stat-value, td.num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
}

/* ---- Layout utilities --------------------------------------------------- */
.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.wrap-wide {
  max-width: var(--content-max-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
}
.wrap-narrow {
  max-width: 760px;
  margin-inline: auto;
  padding-inline: var(--space-6);
}

section { position: relative; }
.section { padding-block: var(--space-24); }
.section-tight { padding-block: var(--space-16); }
@media (max-width: 720px) {
  .section { padding-block: var(--space-16); }
  .section-tight { padding-block: var(--space-10); }
}

.section-subtle { background: var(--bg-subtle); }
.section-inverse {
  background: var(--bg-inverse);
  color: var(--text-inverse);
}
.section-inverse .eyebrow { color: var(--text-inverse-secondary); }
.section-inverse p { color: var(--text-inverse-secondary); }
.section-inverse h2, .section-inverse h3 { color: var(--text-inverse); }

.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.gap-1 { gap: var(--space-1); } .gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); } .gap-4 { gap: var(--space-4); }
.gap-6 { gap: var(--space-6); } .gap-8 { gap: var(--space-8); }

.grid { display: grid; gap: var(--space-6); }

.center { text-align: center; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ---- Typography ---------------------------------------------------------- */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-caption);
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--action-primary);
}
.eyebrow::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

.display-xl { font-family: var(--font-serif); font-size: var(--text-display-xl); font-weight: 500; letter-spacing: -0.02em; }
.display-l  { font-family: var(--font-serif); font-size: var(--text-display-l);  font-weight: 500; letter-spacing: -0.02em; }
.display-m  { font-family: var(--font-serif); font-size: var(--text-display-m);  font-weight: 500; letter-spacing: -0.01em; }

h2.section-title { font-size: var(--text-display-m); font-family: var(--font-serif); font-weight: 500; }
.section-kicker { margin-bottom: var(--space-4); }
.section-head { max-width: 640px; margin-bottom: var(--space-12); }
.section-head p { color: var(--text-secondary); font-size: var(--text-body-l); margin-top: var(--space-4); }
.section-head.center { margin-inline: auto; text-align: center; }

.lead { font-size: var(--text-body-l); color: var(--text-secondary); }
.muted { color: var(--text-secondary); }
.tiny { font-size: var(--text-caption); color: var(--text-tertiary); }

p { max-width: 62ch; }
p.measure-none { max-width: none; }