/* ============================================================
   Braap landing page design tokens — measured from supaste.com,
   used as this page's structural/rhythm reference (2026-09-11),
   not from Braap's own brand. Keep this file as the single
   source of truth for colors, type, spacing, and radii. Every
   section stylesheet should reference these custom properties
   instead of hard-coding values.
   ============================================================ */

:root {
  /* ---- color ---- */
  --color-bg: #ffffff;
  --color-bg-soft: #f7f7f7;
  --color-bg-card: #f5f5f7;
  --color-text: #000000;
  --color-text-muted: #6b6b6b;
  --color-text-on-dark: #ffffff;
  --color-text-on-dark-muted: rgba(255, 255, 255, 0.7);
  --color-border: #e6e6e6;
  --color-accent: #0080ff;
  --color-accent-dark: #0a3cff;

  --color-nav-bg: #000000;

  --color-btn-dark-bg: #000000;
  --color-btn-dark-text: #ffffff;
  --color-btn-light-bg: #ffffff;
  --color-btn-light-text: #000000;

  --color-star: #000000;

  /* ---- type ---- */
  --font-display: "Inter", -apple-system, "SF Pro Display", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, "SF Pro Text", system-ui, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;

  /* Hero h1 is 80px/80px/-4px on the live site at desktop widths. */
  --fs-h1: clamp(2.5rem, 7vw, 5rem);
  /* Section headings are 60px/700/-3px on the live site at desktop. */
  --fs-h2: clamp(2.25rem, 4.6vw, 3.75rem);
  --fs-h3: clamp(1.375rem, 2.4vw, 1.75rem);
  --fs-eyebrow: 1.25rem;
  --fs-body-lg: 1.125rem;
  --fs-body: 1rem;
  --fs-small: 0.875rem;

  --lh-tight: 1.05;
  --lh-normal: 1.5;
  --ls-tight: -0.05em;

  /* ---- spacing ---- */
  --space-section-y: clamp(4rem, 9vw, 7.5rem);
  --space-section-gap: clamp(1.5rem, 4vw, 3rem);
  --container-max: 1180px;
  --container-pad: clamp(1.25rem, 4vw, 2rem);

  /* ---- radii / shadow ---- */
  --radius-pill: 999px;
  --radius-lg: 24px;
  --radius-md: 20px;
  --radius-sm: 10px;
  --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.06);
  --shadow-nav: 0 8px 30px rgba(0, 0, 0, 0.25);

  /* ---- motion ---- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 150ms;
  --dur-normal: 300ms;
}

/* The source uses "Inter Display" for headings and UI chrome. Google's
   variable Inter carries the same optical-size axis; pinning opsz to 32
   reproduces Inter Display's tighter, narrower cut so line breaks and
   widths match the original. Body copy stays on automatic sizing. */
.nav, .mock, h1, h2, h3,
.section-title, .footer__headline, .footer__wordmark,
.features-intro__pill, .awards__ring {
  font-optical-sizing: none;
  font-variation-settings: "opsz" 32;
}
.mock__menutext {
  font-optical-sizing: auto;
  font-variation-settings: normal;
}

/* ---- reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---- layout helpers ---- */
.container {
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.section {
  padding-block: var(--space-section-y);
}
.section-head {
  max-width: 640px;
  margin-bottom: clamp(2rem, 5vw, 3.5rem);
}
.section-head--center { margin-inline: auto; text-align: center; }
.eyebrow {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
}
h2.section-title {
  font-family: var(--font-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  letter-spacing: var(--ls-tight);
  line-height: 1;
}
p.section-lede {
  margin-top: 20px;
  color: rgba(0, 0, 0, 0.6);
  font-size: 20px;
  line-height: 28px;
}

/* ---- buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.5rem;
  border-radius: var(--radius-pill);
  font-weight: 600;
  font-size: var(--fs-body);
  border: none;
  transition: transform var(--dur-fast) var(--ease-standard), opacity var(--dur-fast) var(--ease-standard);
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); opacity: 0.92; }
.btn-dark { background: var(--color-btn-dark-bg); color: var(--color-btn-dark-text); }
.btn-light { background: var(--color-btn-light-bg); color: var(--color-btn-light-text); }
.btn-icon { width: 1.1em; height: 1.1em; flex-shrink: 0; }

/* ---- cards ---- */
.card {
  background: var(--color-bg-card);
  border-radius: var(--radius-lg);
  padding: clamp(1.5rem, 3vw, 2.25rem);
}

/* ---- pills / chips ---- */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 0.5rem 1rem;
  border-radius: var(--radius-pill);
  background: var(--color-bg-card);
  font-size: var(--fs-small);
  font-weight: 600;
  border: 1px solid var(--color-border);
}

/* ---- utility ---- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.grid {
  display: grid;
  gap: var(--space-section-gap);
}
@media (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } }

.stars { display: inline-flex; gap: 2px; color: var(--color-star); }
.stars svg { width: 16px; height: 16px; }