/* Stax IQ polish layer. Presentation only: no layout, link or content changes.
   Everything is namespaced pol- and gated on html.pol-js, which is added by
   polish.js only when JavaScript runs and reduced motion is NOT requested.
   Removing this file and polish.js restores the previous site exactly. */

/* Scroll progress hairline */
#pol-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, #2F4A3E, #B89968);
  transform-origin: 0 50%; transform: scaleX(0);
  z-index: 200; pointer-events: none;
}

/* Paper grain over the cream ground */
#pol-grain {
  position: fixed; inset: 0; pointer-events: none; z-index: 190; opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll reveals (class applied by JS; hidden state only exists under .pol-js) */
.pol-js .pol-reveal {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pol-js .pol-reveal.pol-in { opacity: 1; transform: none; }

/* Primary button and download buttons: sheen pass on hover */
.pol-js .btn-primary, .pol-js .dl { position: relative; overflow: hidden; }
.pol-js .btn-primary::after, .pol-js .dl::after {
  content: ''; position: absolute; top: 0; bottom: 0; left: -80%; width: 55%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, 0.20), transparent);
  transform: skewX(-18deg); transition: left 0.55s cubic-bezier(0.3, 0.6, 0.3, 1);
  pointer-events: none;
}
.pol-js .btn-primary:hover::after, .pol-js .dl:hover::after { left: 130%; }
.pol-js .btn-primary:hover { box-shadow: 0 10px 26px rgba(47, 74, 62, 0.26); }

/* Cursor spotlight on cards (position vars set by JS on mousemove) */
.pol-js .pol-spot { position: relative; }
.pol-js .pol-spot::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; opacity: 0;
  background: radial-gradient(340px circle at var(--pol-mx, 50%) var(--pol-my, 50%), rgba(184, 153, 104, 0.13), transparent 65%);
  transition: opacity 0.3s; pointer-events: none;
}
.pol-js .pol-spot:hover::after { opacity: 1; }

/* Homepage lead cards: brass stripe flows on hover */
.pol-js .lead::before { background: linear-gradient(90deg, #2F4A3E, #B89968, #2F4A3E); background-size: 220% 100%; }
.pol-js .lead.ai::before { background: linear-gradient(90deg, #B89968, #D4B889, #B89968); background-size: 220% 100%; }
.pol-js .lead:hover::before { animation: pol-stripe 1.6s linear infinite; }
@keyframes pol-stripe { to { background-position: -220% 0; } }

/* Footer watermark */
.pol-js footer { position: relative; overflow: hidden; }
.pol-js footer .wrap { position: relative; z-index: 1; }
.pol-watermark {
  position: absolute; left: 50%; bottom: -0.34em; transform: translateX(-50%);
  font-size: clamp(5rem, 17vw, 11rem); font-weight: 900; letter-spacing: -0.03em;
  line-height: 1; color: transparent; -webkit-text-stroke: 1px rgba(255, 255, 255, 0.06);
  white-space: nowrap; user-select: none; pointer-events: none; z-index: 0;
}

/* ── Homepage only (html.pol-home, set from the canonical URL) ─────────── */

/* Hero entrance: words rise, supporting copy fades up */
.pol-js.pol-home .hero h1 .pol-w { display: inline-block; overflow: hidden; vertical-align: bottom; }
.pol-js.pol-home .hero h1 .pol-w i {
  display: inline-block; font-style: normal; transform: translateY(110%);
  transition: transform 0.72s cubic-bezier(0.2, 0.65, 0.2, 1);
}
.pol-js.pol-home .hero.pol-hero-in h1 .pol-w i { transform: translateY(0); }
.pol-js.pol-home .hero .eyebrow, .pol-js.pol-home .hero .sub,
.pol-js.pol-home .hero .hero-actions, .pol-js.pol-home .hero .hero-note {
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.7s cubic-bezier(0.2, 0.6, 0.2, 1), transform 0.7s cubic-bezier(0.2, 0.6, 0.2, 1);
}
.pol-js.pol-home .hero .eyebrow { transition-delay: 0.15s; }
.pol-js.pol-home .hero .sub { transition-delay: 0.9s; }
.pol-js.pol-home .hero .hero-actions { transition-delay: 1.05s; }
.pol-js.pol-home .hero .hero-note { transition-delay: 1.2s; }
.pol-js.pol-home .hero.pol-hero-in .eyebrow, .pol-js.pol-home .hero.pol-hero-in .sub,
.pol-js.pol-home .hero.pol-hero-in .hero-actions, .pol-js.pol-home .hero.pol-hero-in .hero-note {
  opacity: 1; transform: none;
}

/* Brass underline sweep under the key phrase */
.pol-hl { position: relative; white-space: nowrap; }
.pol-js.pol-home .pol-hl::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0.06em; height: 0.10em;
  background: #B89968; border-radius: 2px; transform: scaleX(0); transform-origin: 0 50%;
  transition: transform 0.6s cubic-bezier(0.2, 0.65, 0.2, 1) 1.15s;
}
.pol-js.pol-home .hero.pol-hero-in .pol-hl::after { transform: scaleX(1); }

/* Typing caret in the agent prompt pill */
.pol-caret {
  display: inline-block; width: 2px; height: 1.05em; background: #C7A878;
  margin-left: 3px; transform: translateY(2px); animation: pol-blink 1s steps(1) infinite;
}
@keyframes pol-blink { 50% { opacity: 0; } }
.pol-js.pol-home .vprompt { min-height: 38px; }

/* Demo video frame straightens as it scrolls into place */
.pol-js.pol-home .shot-main { perspective: 1100px; }
.pol-js.pol-home .vframe { transform-origin: 50% 20%; will-change: transform; }

/* Count-up figures keep column width steady while ticking */
.pol-js .pb-item strong { font-variant-numeric: tabular-nums; }

/* Safety net: if reduced motion is set, neutralise everything even if the
   class were somehow present. polish.js also exits early in that case. */
@media (prefers-reduced-motion: reduce) {
  #pol-progress, #pol-grain, .pol-watermark, .pol-caret { display: none; }
  .pol-js .pol-reveal { opacity: 1; transform: none; transition: none; }
  .pol-js.pol-home .hero .eyebrow, .pol-js.pol-home .hero .sub,
  .pol-js.pol-home .hero .hero-actions, .pol-js.pol-home .hero .hero-note { opacity: 1; transform: none; transition: none; }
  .pol-js.pol-home .hero h1 .pol-w i { transform: none; transition: none; }
  .pol-js.pol-home .pol-hl::after { transform: scaleX(1); transition: none; }
  .pol-js.pol-home .vframe { transform: none !important; }
  .pol-js .lead:hover::before { animation: none; }
}

/* ── Responsive repairs (not motion; applied with or without JS) ────────
   Repairs to pre-existing defects, kept in this one shared file rather than
   31 inline style blocks. */

/* The CTA buttons are <a> elements with no display set, so outside flex
   containers they are inline boxes: when the label wraps (e.g. the magnet
   band on a phone) the browser fragments the button into two offset green
   boxes. inline-block keeps it one box with the label wrapping inside. */
.btn-primary, .btn-secondary { display: inline-block; text-align: center; }

/* The topbar had no mobile rules anywhere on the site: at phone widths the
   logo touched the nav links and the Download button clipped off-screen. */
@media (max-width: 760px) {
  .topbar .wrap {
    height: auto; min-height: 58px; flex-wrap: wrap;
    padding: 10px 16px; gap: 8px 10px;
  }
  .topbar nav { flex-wrap: wrap; justify-content: flex-end; gap: 6px 12px; }
  .topbar nav a.link { font-size: 0.78rem; }
  .topbar .nav-dl { font-size: 0.78rem; padding: 6px 12px; }
  .topbar a.nav-pro { font-size: 0.78rem; padding: 5px 11px; }

  /* Typing pill: reserve two lines so the caption below never jumps
     while the prompt types and wraps. */
  .pol-js.pol-home .vprompt {
    display: inline-flex; flex-wrap: wrap; align-items: center;
    justify-content: center; min-height: 64px; max-width: 100%;
  }
}

/* Very small phones: let the underlined phrase wrap normally and drop the
   sweep (an absolutely positioned underline misdraws across line breaks). */
@media (max-width: 400px) {
  .pol-hl { white-space: normal; }
  .pol-js.pol-home .pol-hl::after { display: none; }
}