/* Torvi design tokens.
   Fonts: <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;600&family=Geist:wght@400;500;600&family=Geist+Mono:wght@400;500&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── white page, warm cream cards, sand insets; one deep-brown band */
  --bg: #FFFFFF;
  --surface: #FCF8F4;        /* cream card (steps, features, testimonials, pricing frame) */
  --surface-2: #F8F3EC;      /* chip / pill fill, step badge */
  --surface-3: #EFE1D2;      /* sand: code-card header, icon box border, table head */
  --card: #FFFFFF;           /* white mock-up card floating on photos */
  --deep: #2C180B;           /* deep-brown band (story block), dark buttons */
  --deep-2: #3A2416;
  --deep-rgb: 44, 24, 11;

  /* ── Text ── one warm ink, one warm grey */
  --text: #2C180B;           /* headings + strong text */
  --text-2: #5C4C3F;         /* body copy */
  --muted: #80746D;          /* captions, the grey half of the reveal headline */
  --on-dark: #FFFFFF;
  --on-dark-2: #CBBFB6;

  /* ── Lines ── */
  --line: #F1E9DF;           /* card border (hairline, warm) */
  --line-2: #EFE1D2;         /* stronger divider, icon box border */
  --line-dark: rgba(255, 255, 255, .14);
  --grid-line: #F2EFEB;      /* CTA grid paper */

  /* ── Brand / accent ── one orange: buttons, checks, dots, icon strokes, the highlighted column */
  --accent: #FF6C02;
  --accent-strong: #F26300;  /* button hover (ink text stays readable) */
  --accent-ink: #B84A00;     /* accent used as small text on white (contrast-safe) */
  --accent-soft: #FFF1E6;    /* "Save 20%" pill, faint orange fills */
  --accent-rgb: 255, 108, 2;
  --on-accent: #2C180B;      /* warm ink on orange: 6.6:1 (white would be 2.8:1) */
  --mark: #C94232;           /* the 2px vertical rule on section chips */

  /* ── Data / status (mock-ups only) ── */
  --success: #2FBF71;  --success-ink: #177A44;
  --warning: #F5A524;
  --danger: #EF3622;  --danger-ink: #C42A16;
  --info: #7DB4D0;
  --violet: #B48CC0;
  --node-green: #4ADE80;     /* node-graph header colours */
  --node-red: #D23A1E;

  /* ── Fonts ── */
  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font: "Geist", "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* ── Radii ── soft but not round: 8 buttons, 12 mock-ups, 16 cards, 20 big panels */
  --r-xs: 6px; --r-sm: 8px; --r: 12px; --r-lg: 16px; --r-xl: 20px; --r-pill: 9999px;

  /* ── Spacing / layout ── */
  --container: 1280px;
  --gutter: 80px;            /* 1440 − 1280 = 2 × 80 */
  --section: 112px;          /* gap between sections (90–130 band) */
  --gap: 24px;
  --gap-lg: 32px;
  --head-gap: 64px;          /* section head → content */

  /* ── Shadows ── barely there: white cards on photos get one soft lift */
  --shadow-1: 0 1px 2px color-mix(in srgb, var(--deep) 5%, transparent);
  --shadow-2: 0 18px 40px -18px color-mix(in srgb, var(--deep) 28%, transparent), 0 2px 6px color-mix(in srgb, var(--deep) 6%, transparent);
  --shadow-3: 0 30px 70px -30px color-mix(in srgb, var(--deep) 45%, transparent);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94); --ease-out: cubic-bezier(.16, 1, .3, 1); --dur: .6s;
  --glide: color-mix(in srgb, var(--deep) 7%, transparent);

  /* ── Illustration (isometric line art) ── */
  --il-line: #55453A;        /* the one warm hairline */
  --il-face: var(--surface); /* faces take the card colour */
}

/* ── Type scale ── Archivo 500 headlines, tight tracking; Geist body 1.7 */
.t-display { font: 500 64px/1.08 var(--font-display); letter-spacing: -2.2px; text-wrap: balance; }
.t-h1 { font: 500 60px/1.1 var(--font-display); letter-spacing: -2px; text-wrap: balance; }
.t-h2 { font: 500 48px/1.15 var(--font-display); letter-spacing: -1.5px; text-wrap: balance; }
.t-h3 { font: 500 32px/1.2 var(--font-display); letter-spacing: -.6px; text-wrap: balance; }
.t-h4 { font: 500 20px/1.35 var(--font-display); letter-spacing: -.2px; text-wrap: balance; }
.t-quote { font: 500 24px/1.42 var(--font-display); letter-spacing: -.3px; }
.t-lead { font: 400 18px/1.7 var(--font); }
.t-body { font: 400 16px/1.7 var(--font); }
.t-small { font: 400 14px/1.6 var(--font); }
.t-label { font: 400 15px/1.4 var(--mono); letter-spacing: 0; }
.t-stat { font: 500 40px/1 var(--font-display); letter-spacing: -1px; }

@media (max-width: 900px) {
  .t-display { font-size: 48px; letter-spacing: -1.6px; }
  .t-h1 { font-size: 44px; letter-spacing: -1.4px; }
  .t-h2 { font-size: 36px; letter-spacing: -1px; }
  .t-h3 { font-size: 26px; }
  .t-quote { font-size: 20px; }
  .t-lead { font-size: 17px; }
}
@media (max-width: 480px) {
  .t-display { font-size: 40px; }
  .t-h1 { font-size: 38px; letter-spacing: -1.2px; }
  .t-h2 { font-size: 31px; letter-spacing: -.8px; }
}

/* ── Motion off: reduced motion + ?static (the JS adds .static to <html>) ── */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }
.static *, .static *::before, .static *::after { transition: none !important; animation: none !important; }