:root {
  --teal: #2EB6BC;
  --teal-deep: #1F8A8F;
  --teal-soft: #D7F0F1;
  --teal-tint: #F0F9F9;
  --ink: #0E1A1B;
  --ink-2: #34474A;
  --muted: #6B7B7D;
  --line: #E4ECEC;
  --paper: #FAFAF7;
  --paper-2: #F4F4EE;
  --white: #ffffff;
  --warn: #C44A2B;
  --serif: "Fraunces", "Instrument Serif", Georgia, "Times New Roman", serif;
  --sans: "Inter", system-ui, -apple-system, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

[data-typo="b"] { --serif: "Instrument Serif", Georgia, serif; }
[data-typo="b"] h1.headline,
[data-typo="b"] h2.title,
[data-typo="b"] .dz-headline,
[data-typo="b"] .result-headline,
[data-typo="b"] .price-formula,
[data-typo="b"] .foot-brand h3,
[data-typo="b"] .vpp-stat .num,
[data-typo="b"] .price-mini .num {
  font-family: "Instrument Serif", Georgia, serif;
  font-weight: 400;
  letter-spacing: -0.005em;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 16px;
  line-height: 1.5;
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 32px; }

::selection { background: var(--teal); color: var(--ink); }

.btn-primary {
  background: var(--ink); color: var(--white);
  border: 0; border-radius: 999px;
  padding: 16px 26px;
  font-size: 15px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 10px;
  transition: background .2s, transform .15s;
}
.btn-primary:hover { background: var(--teal-deep); transform: translateY(-1px); }
.btn-primary svg { width: 18px; height: 18px; }

.btn-ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 16px 22px;
  font-size: 15px; font-weight: 500;
  transition: border-color .15s, background .15s;
}
.btn-ghost:hover { border-color: var(--ink); background: var(--white); }