/* InvexTrax marketing site. Ported from the approved design (Baseline 2).
   Theme: html[data-theme] is set by theme-init.js before first paint.
   No external requests: fonts are self-hosted (see fonts.css rules below). */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/assets/fonts/inter-latin-wght-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/assets/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2');
}

[hidden] { display: none !important; }
body { margin: 0; background: #F6F7F4; }
html[data-theme="dark"] body { background: #0B1620; }
a { color: #2E6F6A; }
a:hover { color: #234F4B; }
:focus-visible { outline: 3px solid #2E6F6A; outline-offset: 2px; }
html[data-theme="dark"] :focus-visible { outline-color: #8ED2C6; }
.dk :focus-visible { outline-color: #8ED2C6; }

.site {
  --bg: #F6F7F4; --surface: #FFFFFF; --ink: #10202B; --muted: #3E505C; --muted2: #4A5A66;
  --border: #DCE3DE; --chip: #E9EEEA; --btn-bg: #10202B; --btn-fg: #F6F7F4; --step-bg: #10202B;
  --soon-bg: #FBF8F3; --soon-bd: #C9B79C; --soon-tag: #F6E7D0; --soon-fg: #92400E;
  --ac: #2E6F6A; --gain: #15803D; --loss: #B91C1C;
}
html[data-theme="dark"] .site {
  --bg: #0B1620; --surface: #10202B; --ink: #E6EDF2; --muted: #B9C8D2; --muted2: #9FB3C0;
  --border: #25394A; --chip: #1B2E3D; --btn-bg: #E6EDF2; --btn-fg: #10202B; --step-bg: #1B2E3D;
  --soon-bg: #1C1912; --soon-bd: #6B5A3E; --soon-tag: #3A2A12; --soon-fg: #F2C48A;
  --ac: #5FB5A8; --gain: #4ADE80; --loss: #F87171;
}
html[data-theme="dark"] .site a { color: #5FB5A8; }
html[data-theme="dark"] .site a:hover { color: #8ED2C6; }

/* Name in running text: two tones (teal "Invex", ink "Trax"; mint and white on dark areas). */
.bx1 { color: var(--ac); }
.bx2 { color: var(--ink); }
.dk .bx1 { color: #5FB5A8; }
.dk .bx2 { color: #FFFFFF; }

/* Logo variants follow the theme */
.v-l, .v-d { display: block; min-width: 0; }
html[data-theme="dark"] .v-l { display: none; }
html:not([data-theme="dark"]) .v-d { display: none; }

/* Animated tagline word */
.lw { opacity: 0; filter: blur(3px); transition: opacity 1.3s ease, filter 1.3s ease; }
.lw.on { opacity: 1; filter: blur(0); }

/* Controls that need JavaScript are hidden without it */
html:not(.js) .js-only { display: none !important; }
html.rm .motion-ctl { display: none !important; }

.lg-compact { display: none; }
.menu-b { display: none; }
.menu-p { display: none; }

/* Hero tabs */
.chip {
  min-height: 36px; font: inherit; font-size: 13px; font-weight: 600; border: 0; border-radius: 999px;
  padding: 6px 14px; cursor: pointer; background: var(--chip); color: var(--ink);
}
.chip[aria-pressed="true"] { background: var(--btn-bg); color: var(--btn-fg); }

/* Typing dots */
.dot {
  display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #9FB3C0;
  margin-right: 5px; animation: blink 1.2s infinite ease-in-out;
}
.dot:nth-child(2) { animation-delay: .2s; }
.dot:nth-child(3) { animation-delay: .4s; }
@keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Without JavaScript the whole demo conversation is shown, so the log may grow */
html:not(.js) .chatlog { height: auto !important; }
/* Reduced motion: whole conversation, scrollable */
html.rm .chatlog { overflow-y: auto !important; }

@media (prefers-reduced-motion: reduce) {
  .dot { animation: none; }
  .lw { transition: none; }
}

/* Phones */
@media (max-width: 640px) {
  .lg-full { display: none !important; }
  .lg-compact { display: flex !important; }
  .nav-d { display: none !important; }
  .menu-b { display: inline-flex !important; }
  .menu-p { display: flex !important; }
  .hd { padding: 12px 16px !important; gap: 6px 8px !important; flex-wrap: wrap !important; }
  .lgrp { gap: 8px !important; }
  .pill-p { font-size: 10px !important; letter-spacing: 0.04em !important; padding: 1px 7px !important; }
  .hero { padding: 24px 16px 40px !important; gap: 28px !important; }
  .sx { padding: 44px 16px !important; gap: 28px !important; }
  .ft { padding: 32px 16px !important; }
  .hp { font-size: 17px !important; }
  .lead { font-size: 16px !important; }
  .c14 { padding: 18px !important; }
  .chip { min-height: 44px !important; }
  .rotb { width: 44px !important; height: 44px !important; }
  .cpt { width: 44px !important; height: 44px !important; margin: -22px 0 0 -22px !important; }
  .cdot { left: 16px !important; top: 16px !important; }
  .ctip { bottom: 52px !important; }
  .panel { min-height: 360px !important; }
  .chatlog { height: 480px !important; }
  html:not(.js) .chatlog { height: auto !important; }
  .wrap { padding-left: 16px !important; padding-right: 16px !important; }
  .c28 { padding: 20px !important; }
  .c40 { padding: 24px !important; }
  .c24 { padding: 18px 20px !important; }
}
.menu-p[hidden] { display: none !important; }

/* Skip link */
.skip {
  position: absolute; left: 8px; top: -60px; z-index: 10; background: #10202B; color: #FFFFFF !important;
  padding: 10px 16px; border-radius: 8px; font-weight: 600; text-decoration: none;
}
.skip:focus { top: 8px; }

/* Avoid a flash of the final state before the script sets the starting state */
html.js:not(.rm):not(.ready) .lw { opacity: 0; transition: none; }
html.js:not(.rm):not(.ready) .msg { display: none; }