/* ============================================================
   Truefold AI — Design Tokens
   Warm neutrals · Orange accent · Dual-mode (light default)
   ============================================================ */

/* ---- Webfonts ---------------------------------------------- */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/e484c178-4ec8-41aa-93e2-12107c70af42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/d7ac37df-3623-409b-99c9-e605f73067d5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/e484c178-4ec8-41aa-93e2-12107c70af42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/d7ac37df-3623-409b-99c9-e605f73067d5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/e484c178-4ec8-41aa-93e2-12107c70af42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/d7ac37df-3623-409b-99c9-e605f73067d5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/e484c178-4ec8-41aa-93e2-12107c70af42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/d7ac37df-3623-409b-99c9-e605f73067d5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/51235db2-baed-4586-92e1-ad76b3248ca4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/d22bf77c-d670-459b-b137-624d7d11242d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/51235db2-baed-4586-92e1-ad76b3248ca4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/d22bf77c-d670-459b-b137-624d7d11242d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/51235db2-baed-4586-92e1-ad76b3248ca4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/d22bf77c-d670-459b-b137-624d7d11242d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/d752f9f1-b233-4d81-995c-cf7cf80a95d7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/f0d260f1-bcb7-4675-8b0c-40965b41650a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/d752f9f1-b233-4d81-995c-cf7cf80a95d7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/f0d260f1-bcb7-4675-8b0c-40965b41650a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/d752f9f1-b233-4d81-995c-cf7cf80a95d7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/f0d260f1-bcb7-4675-8b0c-40965b41650a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/74a898e5-4a97-415a-9d0b-4c2c6c843299.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ee4149ad-15b2-41c1-96c1-25d1130c61c1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/9e47d9f0-ce69-4910-8939-495503c9e28b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/74a898e5-4a97-415a-9d0b-4c2c6c843299.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ee4149ad-15b2-41c1-96c1-25d1130c61c1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/9e47d9f0-ce69-4910-8939-495503c9e28b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/74a898e5-4a97-415a-9d0b-4c2c6c843299.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ee4149ad-15b2-41c1-96c1-25d1130c61c1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/9e47d9f0-ce69-4910-8939-495503c9e28b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ---- Neutrals (warm grays, cream undertone) ---- */
  --neutral-50:  #F5F3EE;
  --neutral-100: #F0EEE8;
  --neutral-200: #E8E6DF;
  --neutral-300: #D6D4CC;
  --neutral-400: #B0AEA5;
  --neutral-500: #7A786F;
  --neutral-600: #4A4840;
  --neutral-700: #2C2B26;
  --neutral-800: #1E1E1A;
  --neutral-900: #141410;
  --neutral-950: #0A0A08;

  /* ---- Orange (primary accent) ---- */
  --orange-50:  #FFF1E6;
  --orange-100: #FFD4AD;
  --orange-200: #FFB070;
  --orange-300: #F58A3A;
  --orange-400: #E06A10; /* primary */
  --orange-500: #B85510;
  --orange-600: #7A3D10;
  --orange-700: #4A2508;

  /* ---- Complementary ---- */
  --teal-50:   #E6F0F0;
  --teal-200:  #7ABCBC;
  --teal-400:  #3D8A8A;
  --teal-600:  #1A4A4A;

  --violet-50:  #F0ECF5;
  --violet-200: #B8A5D4;
  --violet-400: #7B64A8;
  --violet-600: #3A2D5C;

  --gold-50:   #F5F0E6;
  --gold-200:  #D4BE7A;
  --gold-400:  #A8923C;
  --gold-600:  #5C4A20;

  /* ---- Semantic ---- */
  --success-bg: #E8F5E8;  --success: #3DA03D;  --success-fg: #1A4A1A;
  --warning-bg: #FFF5E6;  --warning: #E0A020;  --warning-fg: #6B4A10;
  --danger-bg:  #FAE8E8;  --danger:  #D43030;  --danger-fg:  #6B1A1A;

  /* ---- Semantic surface (LIGHT default) ---- */
  --bg:         #FFFFFF;
  --bg-sidebar: var(--neutral-100);
  --fg:         var(--neutral-800);
  --fg-muted:   var(--neutral-500);
  --fg-subtle:  var(--neutral-400);
  --card:       var(--neutral-100);
  --card-fg:    var(--neutral-800);
  --border:     var(--neutral-300);
  --input:      var(--neutral-300);
  --ring:       var(--orange-400);
  --primary:    var(--orange-400);
  --primary-fg: var(--neutral-50);
  --secondary:  var(--neutral-200);
  --muted:      var(--neutral-200);

  /* ---- Type families ---- */
  --font-logo:    "Instrument Sans", system-ui, sans-serif;
  --font-heading: "Host Grotesk", "Space Grotesk", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Host Grotesk", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-sans:    "DM Sans", system-ui, sans-serif;

  /* ---- Type scale ---- */
  --fs-display: 56px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-eyebrow: 13px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  /* ---- Spacing (8px base) ---- */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ---- Shadows (warm-neutral, never pure black) ---- */
  --shadow-ambient: 0 0 40px rgba(10,10,8,0.05);
  --shadow-lifted:  0 8px 24px rgba(10,10,8,0.08);
  --shadow-float:   0 16px 40px rgba(10,10,8,0.10);

  /* ---- Easing (entrances/fades) ---- */
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1); /* @kind other */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* @kind other */
}

/* ---- DARK MODE (landing, marketing, login) -------------- */
.dark {
  --bg:         var(--neutral-950);
  --bg-sidebar: var(--neutral-900);
  --fg:         var(--neutral-50);
  --fg-muted:   var(--neutral-400);
  --fg-subtle:  var(--neutral-500);
  --card:       var(--neutral-800);
  --card-fg:    var(--neutral-50);
  --border:     var(--neutral-700);
  --input:      var(--neutral-700);
  --secondary:  var(--neutral-700);
  --muted:      var(--neutral-700);
}

/* ============================================================
   Semantic element defaults — apply when you want zero-config
   typographic baseline. Component code can override freely.
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg);
}
h4, .h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--fg);
}

.logo {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -1px;
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange-400);
}

.body-lg { font-size: var(--fs-body-lg); line-height: 1.6; }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.5; }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); }

code, pre, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ---- Primitives ----------------------------------------- */
.card {
  background: var(--card);
  color: var(--card-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
}

.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 160ms var(--ease-out-quart), transform 160ms var(--ease-out-quart);
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: scale(0.98); }

.btn-primary   { background: var(--orange-400); color: var(--neutral-50); }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-dark-primary   { background: var(--neutral-50); color: var(--neutral-950); }
.btn-dark-secondary { background: transparent; color: var(--neutral-50); border-color: rgba(245,243,238,0.3); }

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}


/* ---- next block ---- */

/* ============================================================
   Truefold AI — Design System entry point
   Link this single file; it pulls in tokens + component styles.
   ============================================================ */
/* ============================================================
   Truefold AI — Design Tokens
   Warm neutrals · Orange accent · Dual-mode (light default)
   ============================================================ */

/* ---- Webfonts ---------------------------------------------- */
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/e484c178-4ec8-41aa-93e2-12107c70af42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/d7ac37df-3623-409b-99c9-e605f73067d5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/e484c178-4ec8-41aa-93e2-12107c70af42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/d7ac37df-3623-409b-99c9-e605f73067d5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/e484c178-4ec8-41aa-93e2-12107c70af42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/d7ac37df-3623-409b-99c9-e605f73067d5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/e484c178-4ec8-41aa-93e2-12107c70af42.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("/fonts/d7ac37df-3623-409b-99c9-e605f73067d5.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/51235db2-baed-4586-92e1-ad76b3248ca4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/d22bf77c-d670-459b-b137-624d7d11242d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/51235db2-baed-4586-92e1-ad76b3248ca4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/d22bf77c-d670-459b-b137-624d7d11242d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/51235db2-baed-4586-92e1-ad76b3248ca4.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Host Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/d22bf77c-d670-459b-b137-624d7d11242d.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/d752f9f1-b233-4d81-995c-cf7cf80a95d7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 400;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/f0d260f1-bcb7-4675-8b0c-40965b41650a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/d752f9f1-b233-4d81-995c-cf7cf80a95d7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/f0d260f1-bcb7-4675-8b0c-40965b41650a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/d752f9f1-b233-4d81-995c-cf7cf80a95d7.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Instrument Sans';
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url("/fonts/f0d260f1-bcb7-4675-8b0c-40965b41650a.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/74a898e5-4a97-415a-9d0b-4c2c6c843299.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/ee4149ad-15b2-41c1-96c1-25d1130c61c1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/9e47d9f0-ce69-4910-8939-495503c9e28b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/74a898e5-4a97-415a-9d0b-4c2c6c843299.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/ee4149ad-15b2-41c1-96c1-25d1130c61c1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("/fonts/9e47d9f0-ce69-4910-8939-495503c9e28b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/74a898e5-4a97-415a-9d0b-4c2c6c843299.woff2") format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/ee4149ad-15b2-41c1-96c1-25d1130c61c1.woff2") format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("/fonts/9e47d9f0-ce69-4910-8939-495503c9e28b.woff2") format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}


:root {
  /* ---- Neutrals (warm grays, cream undertone) ---- */
  --neutral-50:  #F5F3EE;
  --neutral-100: #F0EEE8;
  --neutral-200: #E8E6DF;
  --neutral-300: #D6D4CC;
  --neutral-400: #B0AEA5;
  --neutral-500: #7A786F;
  --neutral-600: #4A4840;
  --neutral-700: #2C2B26;
  --neutral-800: #1E1E1A;
  --neutral-900: #141410;
  --neutral-950: #0A0A08;

  /* ---- Orange (primary accent) ---- */
  --orange-50:  #FFF1E6;
  --orange-100: #FFD4AD;
  --orange-200: #FFB070;
  --orange-300: #F58A3A;
  --orange-400: #E06A10; /* primary */
  --orange-500: #B85510;
  --orange-600: #7A3D10;
  --orange-700: #4A2508;

  /* ---- Complementary ---- */
  --teal-50:   #E6F0F0;
  --teal-200:  #7ABCBC;
  --teal-400:  #3D8A8A;
  --teal-600:  #1A4A4A;

  --violet-50:  #F0ECF5;
  --violet-200: #B8A5D4;
  --violet-400: #7B64A8;
  --violet-600: #3A2D5C;

  --gold-50:   #F5F0E6;
  --gold-200:  #D4BE7A;
  --gold-400:  #A8923C;
  --gold-600:  #5C4A20;

  /* ---- Semantic ---- */
  --success-bg: #E8F5E8;  --success: #3DA03D;  --success-fg: #1A4A1A;
  --warning-bg: #FFF5E6;  --warning: #E0A020;  --warning-fg: #6B4A10;
  --danger-bg:  #FAE8E8;  --danger:  #D43030;  --danger-fg:  #6B1A1A;

  /* ---- Semantic surface (LIGHT default) ---- */
  --bg:         #FFFFFF;
  --bg-sidebar: var(--neutral-100);
  --fg:         var(--neutral-800);
  --fg-muted:   var(--neutral-500);
  --fg-subtle:  var(--neutral-400);
  --card:       var(--neutral-100);
  --card-fg:    var(--neutral-800);
  --border:     var(--neutral-300);
  --input:      var(--neutral-300);
  --ring:       var(--orange-400);
  --primary:    var(--orange-400);
  --primary-fg: var(--neutral-50);
  --secondary:  var(--neutral-200);
  --muted:      var(--neutral-200);

  /* ---- Type families ---- */
  --font-logo:    "Instrument Sans", system-ui, sans-serif;
  --font-heading: "Host Grotesk", "Space Grotesk", system-ui, sans-serif;
  --font-display: "Space Grotesk", "Host Grotesk", system-ui, sans-serif;
  --font-body:    "DM Sans", system-ui, sans-serif;
  --font-sans:    "DM Sans", system-ui, sans-serif;

  /* ---- Type scale ---- */
  --fs-display: 56px;
  --fs-h1:      48px;
  --fs-h2:      36px;
  --fs-h3:      24px;
  --fs-h4:      20px;
  --fs-body-lg: 18px;
  --fs-body:    16px;
  --fs-body-sm: 14px;
  --fs-eyebrow: 13px;
  --fs-caption: 12px;
  --fs-micro:   11px;

  /* ---- Spacing (8px base) ---- */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* ---- Radii ---- */
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   12px;
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px;

  /* ---- Shadows (warm-neutral, never pure black) ---- */
  --shadow-ambient: 0 0 40px rgba(10,10,8,0.05);
  --shadow-lifted:  0 8px 24px rgba(10,10,8,0.08);
  --shadow-float:   0 16px 40px rgba(10,10,8,0.10);

  /* ---- Easing (entrances/fades) ---- */
  --ease-out-expo:  cubic-bezier(0.19, 1, 0.22, 1); /* @kind other */
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1); /* @kind other */
}

/* ---- DARK MODE (landing, marketing, login) -------------- */
.dark {
  --bg:         var(--neutral-950);
  --bg-sidebar: var(--neutral-900);
  --fg:         var(--neutral-50);
  --fg-muted:   var(--neutral-400);
  --fg-subtle:  var(--neutral-500);
  --card:       var(--neutral-800);
  --card-fg:    var(--neutral-50);
  --border:     var(--neutral-700);
  --input:      var(--neutral-700);
  --secondary:  var(--neutral-700);
  --muted:      var(--neutral-700);
}

/* ============================================================
   Semantic element defaults — apply when you want zero-config
   typographic baseline. Component code can override freely.
   ============================================================ */
body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, .h1 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-display);
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: var(--fg);
}
h2, .h2 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h2);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--fg);
}
h3, .h3 {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: var(--fs-h3);
  line-height: 1.3;
  color: var(--fg);
}
h4, .h4 {
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--fs-h4);
  line-height: 1.4;
  color: var(--fg);
}

.logo {
  font-family: var(--font-logo);
  font-weight: 400;
  font-size: 28px;
  letter-spacing: -1px;
  color: var(--fg);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: var(--fs-eyebrow);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--orange-400);
}

.body-lg { font-size: var(--fs-body-lg); line-height: 1.6; }
.body-sm { font-size: var(--fs-body-sm); line-height: 1.5; }
.caption { font-size: var(--fs-caption); line-height: 1.5; color: var(--fg-muted); }

code, pre, .mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

/* ---- Primitives ----------------------------------------- */
.card {
  background: var(--card);
  color: var(--card-fg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-ambient);
}

.btn {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 15px;
  line-height: 1;
  padding: 14px 28px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 160ms var(--ease-out-quart), transform 160ms var(--ease-out-quart);
}
.btn:hover { opacity: 0.9; }
.btn:active { transform: scale(0.98); }

.btn-primary   { background: var(--orange-400); color: var(--neutral-50); }
.btn-secondary { background: transparent; color: var(--fg); border-color: var(--border); }
.btn-dark-primary   { background: var(--neutral-50); color: var(--neutral-950); }
.btn-dark-secondary { background: transparent; color: var(--neutral-50); border-color: rgba(245,243,238,0.3); }

/* Focus ring */
*:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
}

/* =====================================================================
   Truefold UI — design system stylesheet
   Scoped under .bui · consumes tokens from colors_and_type.css
   Real interactive states for every control. Day/night via .bui.dark
   ===================================================================== */

.bui{
  /* surface + text — COOL neutral platform palette (decoupled from warm brand cream) */
  --ui-canvas:#F5F6F8; /* page well — cool, slightly present */
  --ui-shell:#FDFDFE;  /* window frame behind the inset content panel */
  --ui-bg:#FFFFFF; --ui-raised:#F1F2F4; --ui-sunken:#ECEEF1;
  --ui-fg:#1B1F24; --ui-muted:#60666D; --ui-subtle:#99A0A8;
  --ui-hair:#E6E8EB; --ui-line:#D7DBDF; --ui-line-h:#C2C7CD;
  --ui-ringline:rgba(17,24,39,.05);
  --ui-ink:#1B1F24; --ui-ink-fg:#FFFFFF; --ui-ink-h:#2A2F36; --ui-ink-a:#0F1216;
  --ui-accent:var(--orange-400); --ui-accent-h:var(--orange-500); --ui-accent-a:#A0480E; --ui-accent-soft:#FFF1E6;
  --ui-danger:var(--danger); --ui-danger-soft:var(--danger-bg); --ui-danger-soft-a:#F3DADA;
  --ui-hover:#F3F4F6; --ui-hover-a:#E9EBEE;
  --ui-selected:rgba(45,111,219,.07); /* subtle, not orange */
  --ui-focus:0 0 0 2px var(--ui-bg), 0 0 0 4px rgba(27,31,36,.22);
  /* elevation — layered key+ambient, low opacity, cool-tinted (Stripe/Linear feel) */
  --ui-e1:0 1px 1px rgba(17,24,39,.04), 0 1px 2px rgba(17,24,39,.05);
  --ui-e2:0 1px 2px rgba(17,24,39,.04), 0 4px 10px rgba(17,24,39,.07);
  --ui-e3:0 4px 10px rgba(17,24,39,.07), 0 14px 30px rgba(17,24,39,.11);
  --ui-e4:0 8px 24px rgba(17,24,39,.12), 0 32px 64px rgba(17,24,39,.20);
  --ui-shadow-sm:var(--ui-e1); --ui-shadow-md:var(--ui-e3); --ui-shadow-lg:var(--ui-e4);
  color:var(--ui-fg); font-family:var(--font-body);
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
.bui.dark{
  --ui-canvas:#0C0E11; /* well */
  --ui-shell:#08090B;  /* window frame */
  --ui-bg:#16191D; --ui-raised:#1D2024; --ui-sunken:#0C0E11;
  --ui-ringline:rgba(255,255,255,.07);
  --ui-fg:#E7E9EC; --ui-muted:#9BA1A8; --ui-subtle:#6A7078;
  --ui-hair:#24272C; --ui-line:#31353B; --ui-line-h:#3E434A;
  --ui-ink:#FFFFFF; --ui-ink-fg:#0C0E11; --ui-ink-h:#F0F1F2; --ui-ink-a:#D0D3D7;
  --ui-accent-soft:rgba(224,106,16,.16);
  --ui-danger:#F06A6A; --ui-danger-soft:rgba(212,48,48,.16); --ui-danger-soft-a:rgba(212,48,48,.24);
  --ui-hover:#1D2024; --ui-hover-a:#24272C;
  --ui-selected:rgba(90,150,255,.12);
  --ui-focus:0 0 0 2px var(--ui-bg), 0 0 0 4px rgba(231,233,236,.28);
}
.bui *{box-sizing:border-box}
.bui ::selection{background:rgba(224,106,16,.16)}

/* ---------- BUTTON ---------------------------------------------------- */
.bui-btn{
  --h:32px;--px:13px;--fs:13px;--ic:15px;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  height:var(--h);padding:0 var(--px);border-radius:7px;
  font:500 var(--fs)/1 var(--font-body);border:1px solid transparent;
  cursor:pointer;white-space:nowrap;user-select:none;position:relative;text-decoration:none;
  transition:background 130ms ease,border-color 130ms ease,color 130ms ease,box-shadow 130ms ease,transform 90ms ease;
}
.bui-btn>svg{width:var(--ic);height:var(--ic);flex-shrink:0}
.bui-btn:active{transform:translateY(.5px)}
.bui-btn:focus-visible,.bui-btn.is-focus{outline:none;box-shadow:var(--ui-focus)}
.bui-btn[disabled],.bui-btn.is-disabled{opacity:.42;cursor:not-allowed;pointer-events:none}
.bui-btn.md{--h:36px;--px:15px;--fs:13px;--ic:15px}
.bui-btn.sm{--h:32px;--px:13px;--fs:13px;--ic:14px}
.bui-btn.xs{--h:27px;--px:10px;--fs:12px;--ic:13px}
.bui-btn.ico{padding:0;width:var(--h)}
.bui-btn.block{display:flex;width:100%}

.bui-btn--primary{background:var(--ui-ink);color:var(--ui-ink-fg);box-shadow:0 1px 1.5px rgba(10,10,8,.16)}
.bui-btn--primary:hover,.bui-btn--primary.is-hover{background:var(--ui-ink-h)}
.bui-btn--primary:active,.bui-btn--primary.is-active{background:var(--ui-ink-a);box-shadow:none}
.bui-btn--secondary{background:var(--ui-bg);color:var(--ui-fg);border-color:var(--ui-line)}
.bui-btn--secondary:hover,.bui-btn--secondary.is-hover{background:var(--ui-hover);border-color:var(--ui-line-h)}
.bui-btn--secondary:active,.bui-btn--secondary.is-active{background:var(--ui-hover-a)}
.bui-btn--ghost{background:transparent;color:var(--ui-muted)}
.bui-btn--ghost:hover,.bui-btn--ghost.is-hover{background:var(--ui-hover);color:var(--ui-fg)}
.bui-btn--ghost:active,.bui-btn--ghost.is-active{background:var(--ui-hover-a)}
.bui-btn--ai{background:var(--ui-accent);color:#fff;box-shadow:0 1px 2px rgba(184,85,16,.30)}
.bui-btn--ai:hover,.bui-btn--ai.is-hover{background:var(--ui-accent-h)}
.bui-btn--ai:active,.bui-btn--ai.is-active{background:var(--ui-accent-a);box-shadow:none}
.bui-btn--danger{background:transparent;color:var(--ui-danger)}
.bui-btn--danger:hover,.bui-btn--danger.is-hover{background:var(--ui-danger-soft)}
.bui-btn--danger:active,.bui-btn--danger.is-active{background:var(--ui-danger-soft-a)}
.bui-btn--dangerSolid{background:var(--danger);color:#fff;box-shadow:0 1px 2px rgba(212,48,48,.28)}
.bui-btn--dangerSolid:hover,.bui-btn--dangerSolid.is-hover{background:#C02A2A}
.bui-btn--dangerSolid:active,.bui-btn--dangerSolid.is-active{background:#A82424;box-shadow:none}

/* ---------- INPUT / TEXTAREA / SELECT --------------------------------- */
.bui-input{
  display:flex;align-items:center;gap:8px;width:100%;height:34px;padding:0 11px;
  border-radius:7px;background:var(--ui-bg);border:1px solid var(--ui-line);
  font:400 13px/1 var(--font-body);color:var(--ui-fg);
  transition:border-color 130ms,box-shadow 130ms,background 130ms;
}
.bui-input::placeholder{color:var(--ui-subtle)}
.bui-input:hover{border-color:var(--ui-line-h)}
.bui-input:focus,.bui-input.is-focus,.bui-input:focus-within{outline:none;border-color:var(--ui-accent);box-shadow:0 0 0 3px rgba(224,106,16,.14)}
.bui-input.is-error{border-color:var(--ui-danger);box-shadow:0 0 0 3px rgba(212,48,48,.12)}
.bui-input[disabled],.bui-input.is-disabled{background:var(--ui-raised);color:var(--ui-subtle);cursor:not-allowed;opacity:.7}
textarea.bui-input{height:auto;min-height:76px;padding:9px 11px;line-height:1.55;resize:vertical;align-items:flex-start}
.bui-input.sel{cursor:pointer;justify-content:space-between}
.bui-input .bui-ph{color:var(--ui-subtle)}

/* ---------- CHECKBOX / RADIO / SWITCH --------------------------------- */
.bui-check,.bui-radio{width:16px;height:16px;flex-shrink:0;border:1.5px solid var(--ui-line);background:var(--ui-bg);display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background 120ms,border-color 120ms}
.bui-check{border-radius:4px}.bui-radio{border-radius:50%}
.bui-check:hover,.bui-radio:hover{border-color:var(--ui-line-h)}
.bui-check.on,.bui-radio.on{background:var(--ui-ink);border-color:var(--ui-ink)}
.bui-check.on>svg{stroke:var(--ui-ink-fg)}
.bui-radio.on{background:var(--ui-bg)}
.bui-radio.on::after{content:"";width:8px;height:8px;border-radius:50%;background:var(--ui-ink)}
.bui-switch{width:34px;height:20px;border-radius:999px;background:var(--ui-line);position:relative;cursor:pointer;flex-shrink:0;transition:background 150ms}
.bui-switch.on{background:var(--ui-accent)}
.bui-switch::after{content:"";position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(10,10,8,.25);transition:left 150ms}
.bui-switch.on::after{left:16px}

/* ---------- FORM FIELD ------------------------------------------------ */
.bui-field{display:flex;flex-direction:column;gap:7px}
.bui-label{font:500 12px/1 var(--font-body);color:var(--ui-muted);display:flex;align-items:center;gap:6px}
.bui-label .req{color:var(--ui-danger)}
.bui-hint{font:400 11px/1.45 var(--font-body);color:var(--ui-subtle)}
.bui-err{font:400 11px/1.45 var(--font-body);color:var(--ui-danger);display:flex;align-items:center;gap:5px}

/* ---------- BADGE / TAG / CHIP ---------------------------------------- */
.bui-badge{display:inline-flex;align-items:center;gap:6px;font:500 11px/1 var(--font-body);padding:4px 8px;border-radius:5px;white-space:nowrap}
.bui-badge.outline{border:1px solid var(--ui-hair);background:transparent;padding:3px 7px}
.bui-badge .bdot{width:6px;height:6px;border-radius:50%}
.bui-chip{display:inline-flex;align-items:center;gap:6px;height:28px;padding:0 10px;border-radius:999px;border:1px solid var(--ui-line);background:var(--ui-bg);font:500 12px/1 var(--font-body);color:var(--ui-muted);cursor:pointer;transition:background 120ms,border-color 120ms}
.bui-chip:hover{background:var(--ui-hover);border-color:var(--ui-line-h)}
.bui-chip .x{opacity:.5}.bui-chip .x:hover{opacity:1}

/* ---------- AVATAR ---------------------------------------------------- */
.bui-av{border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:#fff;font-weight:500;flex-shrink:0;border:2px solid var(--ui-bg)}

/* ---------- TOOLTIP --------------------------------------------------- */
.bui-tip{position:relative;display:inline-flex}
.bui-tip>.tip-pop{position:absolute;bottom:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(4px);
  background:var(--neutral-900);color:var(--neutral-50);font:500 11px/1.3 var(--font-body);padding:6px 9px;border-radius:6px;white-space:nowrap;
  opacity:0;pointer-events:none;transition:opacity 130ms,transform 130ms;z-index:60;box-shadow:var(--ui-shadow-md)}
.bui-tip>.tip-pop::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:5px solid transparent;border-top-color:var(--neutral-900)}
.bui-tip:hover>.tip-pop{opacity:1;transform:translateX(-50%) translateY(0)}

/* ---------- SEPARATOR ------------------------------------------------- */
.bui-sep{height:1px;background:var(--ui-hair);border:none;width:100%}
.bui-sep.v{width:1px;height:auto;align-self:stretch}

/* ---------- CARD ------------------------------------------------------ */
.bui-card{background:var(--ui-bg);border:none;border-radius:12px;box-shadow:0 0 0 1px var(--ui-ringline), var(--ui-e1);transition:box-shadow 160ms ease,transform 160ms ease}
.bui-card.inter{cursor:pointer}
.bui-card.inter:hover{box-shadow:0 0 0 1px var(--ui-ringline), var(--ui-e2);transform:translateY(-1px)}

/* ---------- TABS ------------------------------------------------------ */
.bui-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ui-hair)}
.bui-tab{appearance:none;background:transparent;border:none;cursor:pointer;font:500 13px/1 var(--font-body);color:var(--ui-muted);padding:0 4px 11px;margin:0 10px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:color 120ms,border-color 120ms;display:inline-flex;align-items:center;gap:7px}
.bui-tab:first-child{margin-left:0}
.bui-tab:hover{color:var(--ui-fg)}
.bui-tab.on{color:var(--ui-fg);border-bottom-color:var(--ui-accent)}
.bui-tab .cnt{font:500 11px/1 var(--font-body);color:var(--ui-muted);background:var(--ui-sunken);border-radius:999px;padding:2px 6px}
/* pill tabs */
.bui-tabs.pill{border:none;gap:2px;padding:3px;background:var(--ui-sunken);border-radius:8px;display:inline-flex}
.bui-tabs.pill .bui-tab{margin:0;padding:6px 12px;border:none;border-radius:6px;color:var(--ui-muted)}
.bui-tabs.pill .bui-tab.on{background:var(--ui-bg);color:var(--ui-fg);box-shadow:var(--ui-shadow-sm)}

/* ---------- BREADCRUMBS ----------------------------------------------- */
.bui-crumbs{display:flex;align-items:center;gap:7px;font:400 13px/1 var(--font-body);color:var(--ui-muted)}
.bui-crumbs a{color:var(--ui-muted);text-decoration:none;cursor:pointer;display:inline-flex;align-items:center;gap:6px}
.bui-crumbs a:hover{color:var(--ui-fg)}
.bui-crumbs .sep{color:var(--ui-subtle)}
.bui-crumbs .cur{color:var(--ui-fg);font-weight:500}

/* ---------- ACCORDION ------------------------------------------------- */
.bui-acc{border:1px solid var(--ui-hair);border-radius:10px;overflow:hidden;background:var(--ui-bg)}
.bui-acc-item+.bui-acc-item{border-top:1px solid var(--ui-hair)}
.bui-acc-head{display:flex;align-items:center;gap:12px;width:100%;padding:14px 16px;background:transparent;border:none;cursor:pointer;font:500 13px/1.4 var(--font-body);color:var(--ui-fg);text-align:left;transition:background 120ms}
.bui-acc-head:hover{background:var(--ui-hover)}
.bui-acc-head .chev{margin-left:auto;color:var(--ui-subtle);transition:transform 180ms}
.bui-acc-item.open .bui-acc-head .chev{transform:rotate(90deg)}
.bui-acc-body{padding:0 16px 16px 44px;font:400 13px/1.6 var(--font-body);color:var(--ui-muted)}

/* ---------- SKELETON / SPINNER / PROGRESS ----------------------------- */
.bui-sk{background:linear-gradient(90deg,var(--ui-sunken) 25%,var(--ui-raised) 37%,var(--ui-sunken) 63%);background-size:400% 100%;animation:bui-shimmer 1.4s ease infinite;border-radius:6px}
@keyframes bui-shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}
.bui-spin{animation:bui-spin .7s linear infinite}
@keyframes bui-spin{to{transform:rotate(360deg)}}
.bui-prog{height:6px;border-radius:999px;background:var(--ui-sunken);overflow:hidden}
.bui-prog>i{display:block;height:100%;border-radius:999px;background:var(--ui-accent);transition:width 300ms ease}

/* ---------- THINKING (agent) ------------------------------------------ */
.bui-think-orb{position:relative;width:28px;height:28px;border-radius:50%;background:var(--ui-accent-soft);color:var(--ui-accent);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}
.bui-think-orb::after{content:"";position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--ui-accent);opacity:.4;animation:bui-think-ring 1.7s cubic-bezier(.4,0,.2,1) infinite}
@keyframes bui-think-ring{0%{transform:scale(.82);opacity:.5}100%{transform:scale(1.55);opacity:0}}
.bui-think-orb>svg{animation:bui-think-pulse 1.5s ease-in-out infinite}
@keyframes bui-think-pulse{0%,100%{transform:scale(.86);opacity:.65}50%{transform:scale(1.12);opacity:1}}
.bui-shimmertext{background:linear-gradient(90deg,var(--ui-muted) 0%,var(--ui-muted) 38%,var(--ui-fg) 50%,var(--ui-muted) 62%,var(--ui-muted) 100%);background-size:220% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;animation:bui-textsweep 1.9s linear infinite}
@keyframes bui-textsweep{0%{background-position:200% 0}100%{background-position:-200% 0}}
.bui-tdots{display:inline-flex;align-items:center;gap:4px}
.bui-tdots>i{width:5px;height:5px;border-radius:50%;background:var(--ui-subtle);animation:bui-tdot 1.25s ease-in-out infinite}
.bui-tdots>i:nth-child(2){animation-delay:.16s}
.bui-tdots>i:nth-child(3){animation-delay:.32s}
@keyframes bui-tdot{0%,65%,100%{opacity:.3;transform:translateY(0)}32%{opacity:1;transform:translateY(-3px)}}
/* thinking mark — an orange pulse bounces and travels across the dots */
.bui-thinkmark{display:inline-flex;align-items:center;gap:4px;height:12px}
.bui-thinkmark>i{width:4px;height:4px;border-radius:50%;background:var(--ui-subtle);animation:bui-wave 1.3s ease-in-out infinite}
.bui-thinkmark>i:nth-child(2){animation-delay:.15s}
.bui-thinkmark>i:nth-child(3){animation-delay:.3s}
@keyframes bui-wave{0%,72%,100%{transform:translateY(0) scale(.72);background:var(--ui-subtle)}28%{transform:translateY(-6px) scale(1.4);background:var(--ui-accent)}}

/* ---------- DROPDOWN MENU --------------------------------------------- */
.bui-menu{min-width:180px;background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:9px;box-shadow:var(--ui-shadow-md);padding:5px}
.bui-mi{display:flex;align-items:center;gap:10px;width:100%;padding:8px 9px;border-radius:6px;font:400 13px/1 var(--font-body);color:var(--ui-fg);cursor:pointer;border:none;background:transparent;text-align:left}
.bui-mi:hover{background:var(--ui-hover)}
.bui-mi.danger{color:var(--ui-danger)}
.bui-mi.danger:hover{background:var(--ui-danger-soft)}
.bui-mi .k{margin-left:auto;color:var(--ui-subtle);font:500 11px/1 ui-monospace,monospace}
.bui-msep{height:1px;background:var(--ui-hair);margin:5px -5px}
.bui-mlabel{font:500 10px/1 var(--font-body);text-transform:uppercase;letter-spacing:.07em;color:var(--ui-subtle);padding:7px 9px 5px}

/* ---------- TABLE (first-class) --------------------------------------- */
.bui-table{width:100%;border-collapse:separate;border-spacing:0}
.bui-table thead th{position:sticky;top:0;z-index:1;background:var(--ui-bg);font:600 11px/1 var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--ui-subtle);text-align:left;height:40px;padding:0 16px;white-space:nowrap;border-bottom:1px solid var(--ui-hair)}
.bui-table thead th .thc{display:inline-flex;align-items:center;gap:5px}
.bui-table thead th.sortable{cursor:pointer;user-select:none}
.bui-table thead th.sortable:hover{color:var(--ui-muted)}
.bui-table thead th .sortglyph{opacity:0;transition:opacity 120ms}
.bui-table thead th.sortable:hover .sortglyph,.bui-table thead th.sorted .sortglyph{opacity:1}
.bui-table tbody td{font:400 13px/1.35 var(--font-body);color:var(--ui-fg);height:52px;padding:8px 16px;border-bottom:1px solid var(--ui-hair);vertical-align:middle;font-variant-numeric:tabular-nums;white-space:nowrap}
.bui-table tbody tr:last-child td{border-bottom:none}
.bui-table tbody tr{transition:background 100ms}
.bui-table tbody tr:hover{background:var(--ui-hover)}
.bui-table tbody tr.sel{background:var(--ui-accent-soft)}
.bui-table tbody tr.clickable{cursor:pointer}
.bui-table .num{text-align:right;font-variant-numeric:tabular-nums}
.bui-table .mono{font-family:ui-monospace,monospace;font-size:12px;color:var(--ui-muted)}
.bui-table .t-pri{font-weight:500;color:var(--ui-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bui-table .t-sec{font:400 12px/1.3 var(--font-body);color:var(--ui-subtle);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bui-table .t-chk{width:44px;padding-right:0}
.bui-table .t-act{width:48px;text-align:center}
.bui-table .t-act .kebab{opacity:0;transition:opacity 120ms}
.bui-table tbody tr:hover .t-act .kebab,.bui-table tbody tr.sel .t-act .kebab{opacity:1}
/* toolbar + footer */
.bui-tbar{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ui-hair)}
.bui-tbulk{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--ui-hair);background:var(--ui-accent-soft)}
.bui-tfoot{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid var(--ui-hair);background:var(--ui-bg)}

/* ---------- ELEVATED CONTAINER (tables, lists on canvas) -------------- */
.bui-panel{background:var(--ui-bg);border:none;border-radius:12px;box-shadow:0 0 0 1px var(--ui-ringline), var(--ui-e1);overflow:hidden}

/* ---------- DROPZONE -------------------------------------------------- */
.bui-dz{border:1.5px dashed var(--ui-line);border-radius:12px;background:var(--ui-raised);padding:36px 24px;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;cursor:pointer;transition:border-color 140ms,background 140ms}
.bui-dz:hover,.bui-dz.drag{border-color:var(--ui-accent);background:var(--ui-accent-soft)}

/* ---------- TOAST / DIALOG scrims ------------------------------------- */
.bui-scrim{position:absolute;inset:0;background:rgba(17,20,24,.38);z-index:0}
.bui-dialog{background:var(--ui-bg);border:1px solid var(--ui-hair);border-radius:14px;box-shadow:var(--ui-shadow-lg);width:440px;max-width:calc(100% - 32px)}
.bui-toast{display:flex;gap:11px;align-items:flex-start;background:var(--ui-bg);border:1px solid var(--ui-line);border-radius:10px;box-shadow:var(--ui-shadow-md);padding:13px 14px;width:340px}

/* ---------- STATUS INDICATOR / STEPPER -------------------------------- */
.bui-status{display:inline-flex;align-items:center;gap:7px;font:500 12px/1 var(--font-body)}
.bui-status .sdot{width:8px;height:8px;border-radius:50%;position:relative}
.bui-status.live .sdot::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid currentColor;opacity:.35;animation:bui-ping 1.4s ease-out infinite}
@keyframes bui-ping{0%{transform:scale(.6);opacity:.6}100%{transform:scale(1.4);opacity:0}}

/* ---------- DATA GRID (first-class table) ----------------------------- */
.bui-grid{width:100%;border-collapse:separate;border-spacing:0}
.bui-grid thead th{position:sticky;top:0;z-index:2;background:var(--ui-raised);height:38px;padding:0 14px;text-align:left;white-space:nowrap;font:600 11px/1 var(--font-body);text-transform:uppercase;letter-spacing:.05em;color:var(--ui-subtle)}
.bui-grid thead th:first-child{border-radius:8px 0 0 8px}
.bui-grid thead th:last-child{border-radius:0 8px 8px 0}
.bui-grid thead th.g-sortable{cursor:pointer;user-select:none}
.bui-grid thead th .g-sort{opacity:0;transition:opacity .12s;display:inline-flex;vertical-align:middle;margin-left:3px}
.bui-grid thead th.g-sortable:hover .g-sort,.bui-grid thead th.g-sorted .g-sort{opacity:1}
.bui-grid thead th.g-sorted{color:var(--ui-muted)}
.bui-grid tbody td{height:56px;padding:8px 14px;border-bottom:1px solid var(--ui-hair);vertical-align:middle;font:400 13.5px/1.4 var(--font-body);color:var(--ui-fg)}
.bui-grid.compact tbody td{height:44px}
.bui-grid tbody tr{transition:background .1s}
.bui-grid tbody tr.g-click{cursor:pointer}
.bui-grid tbody tr.g-row:hover{background:var(--ui-hover-a)}
.bui-grid tbody tr.g-sel{background:var(--ui-selected)}
.bui-grid tbody tr.g-open:not(.g-sel){background:transparent}
.bui-grid .g-num{text-align:right;font-variant-numeric:tabular-nums}
.bui-grid .g-mono{font-family:ui-monospace,monospace;font-size:12.5px;color:var(--ui-muted)}
.bui-grid .g-pri{font-weight:500;color:var(--ui-fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bui-grid .g-sec{font:400 12px/1.3 var(--font-body);color:var(--ui-subtle);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bui-grid .g-chk{width:44px;padding-right:0}
.bui-grid .g-exp{width:34px;padding-right:0;color:var(--ui-subtle)}
.bui-grid .g-expchev{transition:transform .16s}
.bui-grid tr.g-open .g-expchev{transform:rotate(90deg)}
.bui-grid .g-act{width:1%;white-space:nowrap;text-align:right}
.bui-grid .g-quick{display:inline-flex;gap:2px;align-items:center}
.bui-grid .g-actions{opacity:0;transition:opacity .12s;display:inline-flex;gap:2px;justify-content:flex-end;align-items:center}
.bui-grid tbody tr.g-row:hover .g-actions,.bui-grid tbody tr.g-sel .g-actions{opacity:1}
.bui-grid .g-status{display:inline-flex;align-items:center;gap:8px;font:500 13px/1 var(--font-body)}
.bui-grid .g-status .g-dot{width:8px;height:8px;border-radius:999px;flex-shrink:0}
.bui-grid .g-nest td{padding:0;border-bottom:1px solid var(--ui-hair);background:transparent}
.bui-gridwrap{overflow-x:auto}
.bui-gridwrap .bui-grid{min-width:var(--g-min,720px)}
.bui-gridfoot{display:flex;align-items:center;justify-content:space-between;padding:11px 16px;border-top:1px solid var(--ui-hair);background:var(--ui-bg)}
/* plain variant (Linear settings tables: text headers, airy rows, no block) */
.bui-grid.plain thead th{background:transparent;border-radius:0;border-bottom:1px solid var(--ui-hair);text-transform:none;letter-spacing:0;font:500 12.5px/1 var(--font-body);color:var(--ui-muted);height:38px}
.bui-grid.plain tbody td{border-bottom:none;height:60px}
.bui-grid.plain.compact tbody td{height:52px}
/* grouped (Linear-style section headers) */
.bui-grid.grouped tbody td{border-bottom:none}
.bui-grid tr.g-grouphdr td{padding:0;border:none}
.bui-grid .g-ghdr{display:flex;align-items:center;gap:9px;height:32px;padding:0 12px;margin:8px 2px 2px;background:var(--ui-raised);border-radius:7px;cursor:pointer;user-select:none}
.bui-grid .g-ghdr:hover{background:var(--ui-hover-a)}
.bui-grid .g-ghdr .g-gchev{color:var(--ui-subtle);transition:transform .16s;display:inline-flex}
.bui-grid tr.g-grouphdr.collapsed .g-gchev{transform:rotate(-90deg)}
.bui-grid .g-ghdr .g-glabel{font:500 13px/1 var(--font-body);color:var(--ui-fg)}
.bui-grid .g-ghdr .g-gcount{font:400 12px/1 var(--font-body);color:var(--ui-subtle);font-variant-numeric:tabular-nums}

@media (prefers-reduced-motion: reduce){.bui *{animation:none!important}}



/* ---- next block ---- */


  *{box-sizing:border-box;}
  html{scroll-behavior:smooth;}
  body{margin:0;background:#FFFFFF;}
  a{color:inherit;}
  #bf-nav{background:transparent;border-bottom:1px solid rgba(245,243,238,0);transition:background 260ms ease,border-color 260ms ease,backdrop-filter 260ms ease;}
  #bf-nav.scrolled{background:rgba(255,255,255,0.9);border-bottom-color:#E8E6DF;backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);}
  .bf-logo-mark{fill:#F5F3EE;transition:fill 260ms ease;}
  .bf-logo-text{color:#F5F3EE;transition:color 260ms ease;}
  #bf-nav.scrolled .bf-logo-mark{fill:#1E1E1A;}
  #bf-nav.scrolled .bf-logo-text{color:#1E1E1A;}
  .bf-navlink{color:rgba(245,243,238,0.82);text-decoration:none;font:400 14px/1 'DM Sans',sans-serif;transition:color 160ms;}
  .bf-navlink:hover{color:#FFFFFF;}
  #bf-nav.scrolled .bf-navlink{color:#4A4840;}
  #bf-nav.scrolled .bf-navlink:hover{color:#E06A10;}
  .bf-foot-link{color:#7A786F;text-decoration:none;font:400 14px/1.9 'DM Sans',sans-serif;transition:color 160ms;}
  .bf-foot-link:hover{color:#F5F3EE;}

  /* entrance + ambient animation */
  @keyframes bf-rise{from{opacity:0;transform:translateY(22px);}to{opacity:1;transform:none;}}
  @keyframes bf-zoom{from{transform:scale(1.0);}to{transform:scale(1.09);}}
  .bf-zoom{animation:bf-zoom 22s ease-in-out infinite alternate;}
  .bf-card-hover{transition:transform .3s cubic-bezier(.19,1,.22,1), box-shadow .3s ease, border-color .3s ease;}
  .bf-card-hover:hover{transform:translateY(-5px);box-shadow:0 26px 56px rgba(10,10,8,0.16);}

  /* responsive — overrides beat inline grids via !important */
  /* Nav CTAs never break to two lines, on any width. */
  .bf-cta{white-space:nowrap;}
  @media (max-width:980px){
    .bf-2col{grid-template-columns:1fr !important;}
    /* Copilot section: on mobile show text first, mock below (matches the
       other sections). The columns carry inline order:1/order:2 for desktop,
       so the override needs !important. */
    .tf-copilot-reverse > :first-child{order:2 !important;}
    .tf-copilot-reverse > :last-child{order:1 !important;}
    .bf-footer{grid-template-columns:1.4fr 1fr 1fr !important;}
    /* Collapse the center links entirely (not just their anchors) so the
       container stops reserving space and the CTAs keep their full width. The
       CTA group is pushed to the right with margin-left:auto. */
    .bf-navlinks{display:none !important;}
    .bf-nav-ctas{margin-left:auto !important;}
  }
  @media (max-width:480px){
    /* Tighten the nav so "Sign in" + "Book a demo" sit comfortably on small
       phones without wrapping or overflowing. */
    #bf-nav nav{gap:12px !important;padding:0 16px !important;}
    .bf-nav-ctas{gap:10px !important;}
    .bf-cta{padding:9px 14px !important;font-size:13px !important;}
  }
  @media (max-width:760px){
    .bf-4col{grid-template-columns:1fr 1fr !important;}
    .bf-4col > div{border-left:none !important;padding-left:0 !important;}
    .bf-footer{grid-template-columns:1fr 1fr !important;}
    .bf-hide-sm{display:none !important;}
    .bf-prob-head{grid-template-columns:1fr !important;}
  }
  @media (max-width:480px){
    .bf-4col{grid-template-columns:1fr !important;}
    .bf-footer{grid-template-columns:1fr 1fr !important;}
  }
  @media (prefers-reduced-motion:reduce){
    [data-hero]{opacity:1 !important;transform:none !important;}
    .bf-zoom{animation:none;}
    html{scroll-behavior:auto;}
  }