/* MILLENNIUMS.AI — site redesign (v2). Dark is the default theme; light overrides neutrals only.
   Tokens + type scale from the redesign handoff / DESIGN.md. This is the canonical marketing-site
   stylesheet (home, platform, product, pricing, docs, trust); the previous design lives in site.css
   (used by /legacy and the re-skin base v2skin.css). */

:root {
  /* dark (default) */
  --canvas:#060a14; --page:#0a0f1c; --bg:#0e1626; --band:#0e1626; --surface:#121b30;
  --invert:#1f2942; --text:#f0f3f9; --muted:#b3bdd0; --dim:#8390a8;
  --line:#243149; --line-soft:#1c2740; --line-strong:#3a4a68;
  --accent:#f5333c; --hot:#ff8a4c; --ok:#37c98a; --fill:rgba(255,255,255,.06);
  --nav:rgba(18,27,48,.72); --nav2:rgba(18,27,48,.8);
  --sh-frame:0 24px 64px rgba(0,0,0,.5);
  --sh-hero:0 30px 70px rgba(0,0,0,.55);
  --sh-card:0 10px 30px rgba(0,0,0,.5);
  --sh-hover:0 12px 32px rgba(0,0,0,.55), 0 2px 6px rgba(0,0,0,.4);
  --sans:'Geist', -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif;
  --dsp:'Clash Grotesk', 'Geist', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}
:root[data-theme="light"] {
  --canvas:#d9e0ec; --page:#ffffff; --bg:#f6f8fc; --band:#eef2f8; --surface:#f6f8fc;
  --invert:#141a2b; --text:#141a2b; --muted:#4a566d; --dim:#7684a0;
  --line:#dce4f0; --line-soft:#e6ecf5; --line-strong:#c9d4e6;
  --accent:#f5333c; --hot:#d81e28; --ok:#1f9d63; --fill:rgba(20,26,43,.05);
  --nav:rgba(255,255,255,.72); --nav2:rgba(255,255,255,.8);
  --sh-frame:0 24px 64px rgba(0,0,0,.14);
  --sh-hero:0 30px 70px rgba(20,26,43,.18);
  --sh-card:0 10px 30px rgba(20,26,43,.14);
  --sh-hover:0 12px 32px rgba(20,26,43,.12), 0 2px 6px rgba(20,26,43,.08);
}

*{box-sizing:border-box}
/* the redesign is composed at 1440px; clip (not scroll) the sideways overflow from fixed-width poster
   elements like the hero glow so the page never scrolls horizontally. clip keeps position:sticky working
   where overflow:hidden would break it. Sub-1200px layout polish is the one deferred design decision. */
html{-webkit-text-size-adjust:100%;overflow-x:clip}
img,canvas{max-width:100%}
body{margin:0;background:var(--page);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums}
:root[data-theme]{transition:background-color 260ms ease-out,color 260ms ease-out}
img{max-width:100%}
a{color:var(--accent);text-decoration:none}
a:hover{color:var(--hot)}

/* the display face is applied to headings; body copy stays Geist */
h1,h2,h3{font-family:var(--dsp);margin:0}

/* interactions from the handoff */
.btn{cursor:pointer;transition:transform 100ms ease-out,background 120ms ease-out,opacity 120ms ease-out;text-decoration:none}
.btn:active{transform:scale(0.97)}
.card{transition:transform 160ms ease-out,box-shadow 160ms ease-out}
.card:hover{transform:translateY(-2px);box-shadow:var(--sh-hover)}
.themebtn{cursor:pointer;user-select:none;background:none;border:0;padding:0;color:var(--muted);font:400 15px/1 var(--sans);transition:opacity 120ms ease-out,transform 100ms ease-out}
.themebtn:hover{opacity:.65}
.themebtn:active{transform:scale(0.92)}

@keyframes railrun{0%{left:8%;opacity:0}8%{opacity:1}92%{opacity:1}100%{left:92%;opacity:0}}
.railrun{animation:railrun 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes orbitspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.orbit{animation:orbitspin 48s linear infinite}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px}

@media (prefers-reduced-motion: reduce){
  :root[data-theme]{transition:none}
  .railrun{animation:none;display:none}
  .orbit{animation:none}
  .btn,.card{transition:opacity 200ms ease;transform:none !important}
}
@media (prefers-reduced-transparency: reduce){
  .material{background:var(--page) !important;backdrop-filter:none !important}
}

/* shared nav (injected on every v2 page) */
.v2nav{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:34px;padding:0 48px;height:56px;
  background:var(--nav);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line)}
.v2nav .brand{display:flex;align-items:center;gap:8px}
.v2nav .brand img,.v2nav .brand svg{width:20px;height:20px;display:block}
.v2nav .brand b{font:600 15px/1 var(--sans);letter-spacing:-.01em;color:var(--text)}
.v2nav .links{display:flex;gap:26px}
.v2nav .links a{font:400 13px/1 var(--sans);color:var(--text)}
.v2nav .links a:hover{color:var(--accent)}
.v2nav .links a[aria-current="page"]{font-weight:500;color:var(--text)}
.v2nav .right{margin-left:auto;display:flex;align-items:center;gap:18px}
.v2nav .right a.login{font:400 13px/1 var(--sans);color:var(--text)}
.v2nav .right a.login:hover{color:var(--accent)}
.v2nav .right a.signup{display:inline-flex;padding:8px 16px;border-radius:999px;background:var(--accent);color:#fff;font:500 13px/1 var(--sans)}
.v2nav .right a.signup:hover{background:var(--hot);color:#fff}

/* shared footer */
.v2foot{background:var(--page);border-top:1px solid var(--line);padding:32px 48px;display:flex;align-items:center;
  gap:28px;flex-wrap:wrap;font:400 13px/1 var(--sans);color:var(--dim)}
.v2foot .wm{color:var(--text);font-weight:600}
.v2foot a{color:var(--dim)}
.v2foot a:hover{color:var(--accent)}
.v2foot .end{margin-left:auto;color:var(--dim)}

@media (max-width:900px){
  .v2nav{gap:16px;padding:0 20px}
  .v2nav .links{display:none}
}

/* ============================================================================
   Responsive (sub-1200px). The v2 pages are composed at 1440px with inline
   fixed values, so these override the inline styles by attribute + !important
   (a stylesheet !important beats a non-important inline declaration). No markup
   changes except the lifecycle-flow scroll wrapper. */

/* lifecycle flow: keep the exact desktop component, pan it horizontally on
   narrow screens instead of letting its absolutely-positioned nodes collapse. */
.lcscroll{max-width:100%}
@media (max-width:1180px){
  .lcscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:24px}
  .lcplate{min-width:1120px}
}

@media (max-width:1000px){
  /* docs shell + wide 3-column rows -> single column */
  [style*="grid-template-columns:300px 1fr 240px"],
  [style*="grid-template-columns:1fr 1.4fr 190px"]{grid-template-columns:1fr !important}
}

@media (max-width:860px){
  main [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:repeat(2,1fr) !important}
  main [style*="grid-template-columns:repeat(3,1fr)"],
  main [style*="grid-template-columns:1fr 1fr"],
  main [style*="grid-template-columns:64px 1fr 340px"],
  main [style*="grid-template-columns:110px 1fr 1fr"],
  main [style*="grid-template-columns:150px 1fr"],
  main [style*="grid-template-columns:repeat(2,1fr)"]{grid-template-columns:1fr !important}
  /* pull the big side padding in */
  main [style*="px 48px"]{padding-left:22px !important;padding-right:22px !important}
  /* scale the poster headings */
  main h1{font-size:clamp(34px,8.4vw,58px) !important;letter-spacing:-.03em !important}
  main h2{font-size:clamp(26px,6vw,40px) !important}
  /* oversized fixed media */
  [style*="width:1180px"]{width:100% !important}
  [style*="max-width:1160px"]{max-width:100% !important;height:auto !important}
  /* the product tab bar + any 48px-padded strip */
  main [style*="padding:12px 48px"]{padding-left:16px !important;padding-right:16px !important}
}

@media (max-width:560px){
  main [style*="grid-template-columns:repeat(4,1fr)"]{grid-template-columns:1fr !important}
  main [style*="px 48px"]{padding-left:16px !important;padding-right:16px !important}
  main h1{font-size:clamp(30px,9vw,42px) !important}
  /* stat/number values that are set inline at 52px shrink a touch */
  main [style*="font:600 52px"]{font-size:40px !important}
}

/* mobile hamburger (built by site.js from the nav links) */
.navburger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;
  width:36px;height:36px;background:none;border:0;cursor:pointer;padding:7px;margin-left:2px}
.navburger span{display:block;height:2px;width:20px;background:var(--text);border-radius:2px;
  transition:transform .2s ease,opacity .2s ease}
.navburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navburger.open span:nth-child(2){opacity:0}
.navburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.navmenu{position:absolute;top:56px;left:0;right:0;display:flex;flex-direction:column;padding:8px 20px 18px;
  background:var(--surface);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);
  border-bottom:1px solid var(--line);box-shadow:var(--sh-card);z-index:19}
.navmenu[hidden]{display:none}
.navmenu a{padding:13px 4px;font:500 16px/1 var(--sans);color:var(--text);border-bottom:1px solid var(--line-soft)}
.navmenu a:hover{color:var(--accent)}
.navmenu .navmenu-cta{border-bottom:0;color:var(--accent);font-weight:600}
@media (max-width:900px){ .navburger{display:flex} .v2nav .right a.login{display:none} }

/* additional grid patterns from the expanded product pages (2026-09-04 update) */
@media (max-width:860px){
  main [style*="grid-template-columns:1fr 1.7fr"],
  main [style*="grid-template-columns:1.1fr 1.6fr"],
  main [style*="grid-template-columns:0.7fr 1.8fr"],
  main [style*="grid-template-columns:0.9fr 1fr 1.5fr"],
  main [style*="grid-template-columns:1fr 1.4fr 0.9fr"],
  main [style*="grid-template-columns:340px 1fr"]{grid-template-columns:1fr !important}
}

/* product tab bar: scroll horizontally on mobile instead of overflowing the page */
@media (max-width:860px){
  main [style*="padding:12px 48px"]{overflow-x:auto;-webkit-overflow-scrolling:touch}
  main [style*="padding:12px 48px"] > a,
  main [style*="padding:12px 48px"] > span{flex:0 0 auto;white-space:nowrap}
}