/* GENERATED by apps/sites/tools/build.mjs from the Calvio repo's brand tokens. */
@font-face { font-family: "Archivo"; src: url("/fonts/archivo-latin-standard-normal.woff2") format("woff2"); font-display: swap; font-weight: 100 900; font-stretch: 62% 125%; }
:root {
  --bg: #FFFFFF;
  --surface: #F2F3F3;
  --text: #121417;
  --text2: #3E4247;
  --muted: #5C6167;
  --border: #D8DADC;
  --borderStrong: #888D93;
  --accent: #9B5A24;
  --accentHover: #7E4819;
  --onAccent: #FFFFFF;
  --accentTint: #F6ECE3;
  --accentText: #7E4819;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121417;
    --surface: #1B1E22;
    --text: #EEF0F1;
    --text2: #C3C7CB;
    --muted: #9298A0;
    --border: #2B2F34;
    --borderStrong: #666C74;
    --accent: #DE9A5E;
    --accentHover: #EAB283;
    --onAccent: #121417;
    --accentTint: #2C2119;
    --accentText: #DE9A5E;
  }
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--bg); color: var(--text); font: 400 16px/1.6 "Archivo", "Segoe UI", "Helvetica Neue", Arial, sans-serif; padding: 0 16px; }
main { max-width: 56rem; margin: 0 auto; padding: 72px 0 24px; display: flex; flex-direction: column; gap: 56px; }
.hero { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 4px; }
h1 { margin: 0 0 24px; line-height: 0; font-family: "Archivo", sans-serif; font-stretch: 125%; font-weight: 700; }
h2 { margin: 0 0 12px; font-family: "Archivo", sans-serif; font-stretch: 125%; font-weight: 700; font-size: 1.6rem; line-height: 1.2; }
h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 650; }
.mark { height: auto; max-width: 100%; }
p { margin: 0 0 12px; }
.lead { font-size: 1.25rem; color: var(--text); max-width: 40rem; }
.tagline { font-size: 1.1rem; color: var(--text2); }
.note { color: var(--text2); font-weight: 600; }
.eyebrow { font-family: 'Archivo', sans-serif; font-weight: 600; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accentText); margin: 0 0 8px; }
h2.eyebrow { font-weight: 600; font-stretch: 100%; }
ul { list-style: none; margin: 0; padding: 0; }
.highlights { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 16px; margin: 20px 0; text-align: left; }
.highlights li { display: flex; gap: 14px; align-items: flex-start; padding: 18px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.highlights p, .approach p { margin: 0; color: var(--text2); }
.icon { flex: 0 0 auto; color: var(--accentText); margin-top: 2px; }
.approach { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 24px; }
.approach li { border-top: 2px solid var(--accent); padding-top: 12px; }
.product { text-align: center; display: flex; flex-direction: column; align-items: center; }
.product .highlights { width: 100%; }
.contact { text-align: center; }
a { color: var(--accentText); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
.button { display: inline-block; margin-top: 8px; padding: 12px 22px; border-radius: 10px; background: var(--accent); color: var(--onAccent); font-weight: 600; text-decoration: none; }
.button:hover { background: var(--accentHover); }
footer { max-width: 56rem; margin: 24px auto 0; padding: 20px 0 28px; border-top: 1px solid var(--border); text-align: center; font-size: 0.875rem; color: var(--muted); }
@media (max-width: 480px) { main { padding-top: 48px; gap: 40px; } .lead { font-size: 1.125rem; } }
@media (prefers-reduced-motion: no-preference) { .button { transition: background 120ms; } }