/* Altuva — generated from tokens.json */
:root, [data-theme="light"] {
  --green-900: #0a3626; /* Deepest green. Pressed state for primary buttons in light theme; never used for large fills. */
  --green-700: #0e4a34; /* Altuva Green — the brand color. The mark's left facet, primary buttons, links. 10.3:1 against white. */
  --green-600: #1a5c42; /* Hover state for green-700 fills. */
  --green-500: #237a55; /* Right facet of the logo mark. Not for text. */
  --green-300: #2fa36e; /* Bright green for small decorative fills only — status dots, chart highlights, illustration details. Not for text (fails contrast on white). */
  --green-200: #7fd1a9; /* Light green for illustration fills and progress bars. */
  --green-100: #dce9e2; /* Soft green tint for selected states and highlights in light theme. */
  --green-50: #eef4f0; /* Faintest green wash — a featured card's background. Use sparingly. */
  --ink: #09090b; /* Near-black. Headline and body text. Never a page or section background. */
  --paper: #f7f7f5; /* Off-white. Alternating sections, sunken panels, the secondary button face. */
  --white: #ffffff; /* Pure white. Cards and raised surfaces in light theme; text on green-700. */
  --bg: var(--white); /* Page background. */
  --surface: var(--white); /* Cards, chips, inputs, the floating nav. */
  --surface-sunken: var(--paper); /* Off-white alternating sections, sunken panels. */
  --surface-tint: var(--green-50); /* Faint green wash for one highlight band per page — a closing call-to-action section or a featured strip. The darkest a full-width section ever gets. */
  --text: var(--ink); /* Headlines and body text. 19:1 on white. */
  --text-muted: #565860; /* Subheads, descriptions, nav links. 6.6:1+ on bg and paper. */
  --text-subtle: #636369; /* Captions, metadata, helper text. 4.5:1+; never below 12px. */
  --border: #ebebe9; /* Hairlines: grid dividers, card outlines, section rules. Decorative only. */
  --border-strong: #8e8e93; /* Form control borders. 3:1+ against surface. */
  --action: #121314; /* Primary button fill — near-black, like the headline ink. The main call to action is black, not green. */
  --action-hover: #27282b; /* Hover fill for action. */
  --on-action: #fcfcfc; /* Text on an action fill. 16:1+. */
  --button-face: #fcfcfc; /* Secondary button face. */
  --accent: var(--green-700); /* THE accent. One emphasized phrase per headline, links, check icons, the featured pricing ring, the logo. Not for primary buttons. Under 10% of any screen. */
  --accent-hover: var(--green-600); /* Hover fill for accent. */
  --accent-pressed: var(--green-900); /* Pressed fill for accent. */
  --on-accent: var(--white); /* Text and icons on an accent fill. 10:1+ both themes. */
  --accent-soft: var(--green-50); /* Tinted background for a featured card or selected row. Text on it stays text or accent. */
  --accent-soft-strong: var(--green-100); /* Badge background behind accent text. */
  --focus: var(--green-700); /* 2px focus ring, offset 2px from the control. */
  --warning: #a15c00; /* Warning text and status dots. Use with an icon, never color alone. */
  --danger: #b42318; /* Errors and destructive actions. Use with an icon or text label. */
  --shadow-action: 0 2px 2px rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.9); /* Primary button: a soft drop plus inset highlights, so it reads as a pressable key. */
  --shadow-button: 0 0 0 1px rgba(0,0,0,0.06), inset 0 -1px 0 rgba(0,0,0,0.1), inset 0 1px 0 rgba(255,255,255,0.9); /* Secondary button: a hairline ring with a top highlight. */
  --shadow-ring: 0 0 0 1px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04); /* Inputs, cards and UI chips at rest — replaces a border. */
  --shadow-float: 0 0 0 1px rgba(0,0,0,0.06), 0 4px 8px rgba(0,0,0,0.04), 0 12px 32px rgba(0,0,0,0.06); /* The floating pill nav, featured pricing card, product UI floating over a section. */
}
:root {
  --space-1: 4px; /* Icon-to-label gap, tight inline gaps. */
  --space-2: 8px; /* Gap between related small items; badge padding. */
  --space-3: 12px; /* Input and button vertical padding; list gaps. */
  --space-4: 16px; /* Default gap; mobile page gutter. */
  --space-6: 24px; /* Card padding; gap between cards. */
  --space-8: 32px; /* Large card padding; desktop gutter. */
  --space-12: 48px; /* Gap between a headline block and its content. */
  --space-16: 64px; /* Section padding on mobile. */
  --space-24: 96px; /* Section padding on desktop. */
  --space-32: 128px; /* Hero top padding on desktop. */
  --radius-sm: 6px; /* Badges, chips, checkboxes. */
  --radius-md: 8px; /* Buttons, inputs, small UI chips. */
  --radius-lg: 12px; /* Cards, floating UI illustrations, the pill nav's inner items. */
  --radius-xl: 20px; /* Product screenshots and large media frames. */
  --radius-full: 999px; /* Avatars, status dots. */
  --container-max: 1200px; /* Max content width for website sections. */
  --measure: 640px; /* Max width for paragraphs and centered headline blocks. */
  --font-sans: "Instrument Sans", "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Instrument Serif", Georgia, serif;
  --text-display: 500 64px/68px var(--font-sans); /* Hero headline. One per page, centered, max two lines. */
  --text-h1: 500 52px/56px var(--font-sans); /* Section openers. */
  --text-h2: 500 40px/46px var(--font-sans); /* Section headlines. */
  --text-h3: 400 26px/32px var(--font-sans); /* Feature column and card titles — regular weight, like the rest of the system's quiet tone. */
  --text-h4: 500 18px/26px var(--font-sans); /* Small headings, list titles, pricing plan names. */
  --text-accent: italic 400 64px/66px var(--font-serif); /* One italic serif phrase inside a headline, set at the headline's size, in text or accent color. Never a whole sentence, never body text. */
  --text-body-lg: 400 18px/28px var(--font-sans); /* Hero subheads and section intros, text-muted. */
  --text-body: 400 16px/24px var(--font-sans); /* Default body copy. */
  --text-small: 400 14px/20px var(--font-sans); /* Helper text, captions, footnotes. */
  --text-label: 500 13px/18px var(--font-sans); /* Labels inside UI illustrations, badges, table headers. Sentence case. */
  --text-button: 500 14px/20px var(--font-sans); /* Buttons and nav links. */
  --text-stat: 500 56px/60px var(--font-sans); /* Big standalone numbers: stat tiles, ROI results, prices. */
}
.display {
  font-family: var(--font-sans);
  font-size: 64px;
  line-height: 68px;
  font-weight: 500;
  letter-spacing: -0.025em;
}
.h1 {
  font-family: var(--font-sans);
  font-size: 52px;
  line-height: 56px;
  font-weight: 500;
  letter-spacing: -0.022em;
}
.h2 {
  font-family: var(--font-sans);
  font-size: 40px;
  line-height: 46px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.h3 {
  font-family: var(--font-sans);
  font-size: 26px;
  line-height: 32px;
  font-weight: 400;
  letter-spacing: -0.015em;
}
.h4 {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 26px;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.accent {
  font-family: var(--font-serif);
  font-size: 64px;
  line-height: 66px;
  font-weight: 400;
  letter-spacing: -0.01em;
  font-style: italic;
}
.body-lg {
  font-family: var(--font-sans);
  font-size: 18px;
  line-height: 28px;
  font-weight: 400;
  letter-spacing: 0;
}
.body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 24px;
  font-weight: 400;
  letter-spacing: 0;
}
.small {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 400;
  letter-spacing: 0;
}
.label {
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 18px;
  font-weight: 500;
  letter-spacing: 0;
}
.button {
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 20px;
  font-weight: 500;
  letter-spacing: 0;
}
.stat {
  font-family: var(--font-sans);
  font-size: 56px;
  line-height: 60px;
  font-weight: 500;
  letter-spacing: -0.03em;
}
@font-face {
  font-family: "Instrument Sans";
  src: url("fonts/InstrumentSans-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Instrument Serif";
  src: url("fonts/InstrumentSerif-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}