/* Quillo design tokens — every design value lives here.
   Fonts (same link on every page):
   <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;1,400&family=Manrope:wght@400;500;600&family=Geist+Mono:wght@400&display=swap" rel="stylesheet"> */
:root {
  /* ── Surfaces ── */
  --bg: #F3EFE7;            /* page: warm linen */
  --surface: #FFFBF5;       /* ivory: cards, open FAQ, why-us band, stat cards */
  --surface-2: #E7E1D5;     /* sand: practice band, values panel, testimonial cards, compare table panel */
  --surface-3: #F0EBE2;     /* compare table "on your own" panel */
  --dark: #391D0A;          /* espresso: testimonials card, footer, compare "with us" column, dark buttons */
  --dark-2: #4B2D19;        /* lifted espresso: form card on the CTA photo, newsletter card */
  --dark-3: #2A190D;        /* hero bottom fade */
  --field-dark: rgba(255, 251, 245, .1);  /* inputs on dark cards */
  --scrim-hero: linear-gradient(90.5deg, rgb(41, 18, 5) 0%, rgba(0, 0, 0, 0) 58.7%);
  --scrim-card: linear-gradient(180deg, rgba(0, 0, 0, 0) 55%, rgba(26, 12, 4, .78) 100%);

  /* ── Text ── */
  --text: #391D0A;          /* ink: headlines, labels, card titles */
  --text-2: #655B54;        /* body copy, captions, footer links */
  --muted: rgba(101, 96, 93, .82); /* second phrase of a two-tone statement (40px+ only) */
  --muted-ink: #655B54;     /* small muted text (4.5:1 on linen and ivory) */
  --step-off: #7A6B5F;     /* inactive step number box (white text passes 4.5:1) */
  --on-dark: #FFFBF5;       /* text on espresso and photos */
  --on-dark-2: rgba(243, 238, 231, .8); /* body copy on espresso */

  /* ── Lines ── */
  --line: #E7E1D5;          /* card borders, FAQ borders, table rules */
  --line-2: rgba(57, 29, 10, .1);   /* rules inside cards */
  --line-dark: rgba(255, 251, 245, .1); /* rules on espresso */
  --line-hero: rgba(255, 255, 255, .24); /* rule under the hero rating */

  /* ── Brand / accent (brand slots — see palette/slots.json) ── */
  --accent: #FFC64A;        /* marigold: the one primary button on dark, form submit, newsletter button */
  --accent-rgb: 255, 198, 74;
  --on-accent: #391D0A;
  --accent-2: #CC753A;      /* copper: stars, rating numbers, value icons (decorative + large text) */
  --accent-2-ink: #A85A26;  /* copper as small text on light (4.5:1) */
  --accent-soft: #F6E3C9;

  /* ── Data / status (forms only) ── */
  --success: #3F7F52; --warning: #C98A1E; --danger: #B3402E; --info: #3B6FB6;

  /* ── Fonts ── */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;      /* body, buttons, card titles */
  --font-display: "Lora", Georgia, "Times New Roman", serif;               /* headlines, stats, logo */
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;         /* eyebrows, dates, stat labels (uppercase) */

  /* ── Radii ── */
  --r-sm: 8px;              /* avatars' frames, small icon boxes */
  --r-btn: 10px;            /* every button */
  --r: 12px;                /* cards, photos, FAQ rows, inputs */
  --r-lg: 16px;             /* big panels: testimonials card, values panel, form card */
  --r-pill: 100px;

  /* ── Spacing / layout ── */
  --container: 1272px;      /* content width at 1600 */
  --container-narrow: 1104px; /* content inside an inset panel */
  --gutter: 24px;           /* phone page edge */
  --section: 150px;         /* vertical padding of a section */
  --gap: 12px;              /* card grid gap */
  --head-gap: 24px;         /* eyebrow → headline */
  --head-to-content: 64px;  /* headline block → content */
  --card-pad: 24px;

  /* ── Shadows (flat design) ── */
  --shadow-1: none;
  --shadow-2: 0 24px 60px rgba(57, 29, 10, .22);

  /* ── Motion ── */
  --ease: cubic-bezier(.25, .46, .45, .94);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: .6s;
  --dur-fast: .25s;
}

/* ── Type scale (desktop values from the design; phone sizes in quillo.css) ──
   Headlines: Lora Regular, sentence case, tight tracking. Labels: Geist Mono uppercase. Body: Manrope. */
.t-display { font-family: var(--font-display); font-weight: 400; font-size: 66px; line-height: 1.1; letter-spacing: -2px; }
.t-h1 { font-family: var(--font-display); font-weight: 400; font-size: 66px; line-height: 1.1; letter-spacing: -2px; }
.t-h2 { font-family: var(--font-display); font-weight: 400; font-size: 52px; line-height: 1.2; letter-spacing: -1px; }
.t-h3 { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.25; letter-spacing: -.5px; }
.t-h4 { font-family: var(--font-display); font-weight: 400; font-size: 32px; line-height: 1.3; letter-spacing: -.2px; }
.t-stat { font-family: var(--font-display); font-weight: 400; font-size: 40px; line-height: 1.2; letter-spacing: -.5px; }
.t-title { font-family: var(--font); font-weight: 500; font-size: 20px; line-height: 1.5; letter-spacing: -.2px; }
.t-lead { font-family: var(--font); font-weight: 400; font-size: 18px; line-height: 1.5; }
.t-body { font-family: var(--font); font-weight: 400; font-size: 16px; line-height: 1.5; }
.t-small { font-family: var(--font); font-weight: 400; font-size: 14px; line-height: 1.5; }
.t-label { font-family: var(--mono); font-weight: 400; font-size: 14px; line-height: 1.5; letter-spacing: .04em; text-transform: uppercase; }
.t-btn { font-family: var(--font); font-weight: 500; font-size: 16px; line-height: 1.5; }

/* ── 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; }