/* Shared shell for the marketing pages — nav, hero, cards, footer.
   Separate from legal.css (terms/privacy, a prose sheet with a 760px column)
   and from the app's styles.css. These pages are plain static HTML served
   outside the SPA bundle, so there is no templating: the <nav> markup is
   repeated per page and this file is what keeps them identical.

   Colours are the PRODUCT's, not legal.css's periwinkle: #ee8626 is the app's
   --accent and the orange in the shipped icon; #649fe4 is Coordinator's badge
   colour from WINDOWS-ICONS.md. Page and taskbar agree. */

:root {
  --bg: #0b0b0d;
  --surface: #121215;
  --line: rgba(255, 255, 255, 0.09);
  --text: #e9e9ec;
  --muted: #9a9aa4;
  --forge: #ee8626;
  --coord: #649fe4;
}

* {
  box-sizing: border-box;
}

/* The nav is sticky and ~74px tall, so jumping to #get puts the heading
   UNDERNEATH it — measured landing at 41px, i.e. hidden. scroll-margin-top
   offsets any anchored section by the bar plus breathing room. */
section[id] {
  scroll-margin-top: 96px;
}
html {
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
}

/* ---------- top bar ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 14px 28px;
  background: rgba(11, 11, 13, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}

.wordmark {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 15px;
  text-transform: uppercase;
}
.wordmark .accent {
  color: var(--forge);
}

.nav-spacer {
  flex: 1;
}

/* On a narrow phone the full bar (wordmark + Products + Sign in + Get started)
   overflows and forces the whole PAGE to scroll sideways — measured at 375px,
   where the document came out 417px wide. Tighten the spacing and drop the
   "Sign in" link, which currently points at the same place as "Get started"
   anyway, so nothing becomes unreachable. */
@media (max-width: 560px) {
  .nav {
    gap: 12px;
    padding: 12px 16px;
  }
  .wordmark {
    font-size: 13px;
    letter-spacing: 0.1em;
    gap: 8px;
  }
  .wordmark svg {
    width: 22px;
    height: 22px;
  }
  .nav-link {
    display: none;
  }
  .nav .btn {
    padding: 9px 12px;
    font-size: 13.5px;
  }
  .shell {
    padding-left: 18px;
    padding-right: 18px;
  }
}

.nav-link {
  color: var(--muted);
  text-decoration: none;
  font-size: 14.5px;
}
.nav-link:hover {
  color: var(--text);
}

/* Products menu. A button + JS toggle rather than :hover, so it works on
   touch and can be closed with Escape. */
.menu {
  position: relative;
}
.menu-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 14.5px;
  color: var(--muted);
  cursor: pointer;
}
.menu-btn:hover,
.menu[data-open="true"] .menu-btn {
  color: var(--text);
}
.menu-btn svg {
  transition: transform 0.15s ease;
}
.menu[data-open="true"] .menu-btn svg {
  transform: rotate(180deg);
}
.menu-panel {
  display: none;
  position: absolute;
  top: calc(100% + 12px);
  left: -14px;
  min-width: 260px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
}
.menu[data-open="true"] .menu-panel {
  display: block;
}
.menu-item {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  text-decoration: none;
}
.menu-item:hover {
  background: rgba(255, 255, 255, 0.045);
}
.menu-item strong {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
}
.menu-item span {
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- buttons ---------- */

.btn {
  display: inline-block;
  text-align: center;
  font-weight: 600;
  font-size: 14.5px;
  text-decoration: none;
  padding: 10px 16px;
  border-radius: 9px;
  background: var(--forge);
  color: #14110d;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn:hover {
  filter: brightness(1.07);
}
.btn.outline {
  background: transparent;
  color: var(--text);
  border-color: rgba(255, 255, 255, 0.18);
}
.btn.outline:hover {
  border-color: rgba(255, 255, 255, 0.34);
  filter: none;
}
.btn.blue {
  background: transparent;
  color: var(--coord);
  border-color: rgba(100, 159, 228, 0.45);
}
.btn.blue:hover {
  border-color: rgba(100, 159, 228, 0.75);
  filter: none;
}
/* An unavailable download states itself in place rather than 404ing or being
   hidden — a missing card reads as "this does not exist", which is worse. */
.btn.pending {
  background: transparent;
  color: var(--muted);
  border: 1px dashed rgba(255, 255, 255, 0.2);
  cursor: not-allowed;
}
.btn.block {
  display: block;
}
/* Two routes to the same app: the direct download that works today and warns,
   and the Store listing that will not warn and does not exist yet. Stacked
   rather than side by side because at 271px two buttons on one row truncate. */
.btn-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.or {
  text-align: center;
  font-size: 11.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 2px 0;
}
.btn .sublabel {
  display: block;
  font-size: 11.5px;
  font-weight: 500;
  opacity: 0.75;
  margin-top: 2px;
}

/* ---------- layout ---------- */

.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 28px 90px;
}

.hero {
  display: grid;
  gap: 40px;
  align-items: center;
  padding: 64px 0 56px;
}
@media (min-width: 940px) {
  .hero {
    grid-template-columns: 1fr 1fr;
    padding: 84px 0 68px;
  }
}
.eyebrow {
  color: var(--forge);
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-weight: 700;
  margin: 0 0 18px;
}
.hero h1 {
  margin: 0;
  font-size: clamp(38px, 5.4vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.hero .sub {
  margin: 16px 0 0;
  font-size: clamp(19px, 2.2vw, 25px);
  color: var(--muted);
  line-height: 1.35;
}
.hero-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.hero-art {
  width: 100%;
  height: auto;
}

.section-head {
  text-align: center;
  max-width: 62ch;
  margin: 0 auto 30px;
}
.section-head h2 {
  font-size: clamp(26px, 3vw, 34px);
  margin: 0 0 10px;
}
.section-head p {
  color: var(--muted);
  margin: 0;
}

/* ---------- product cards ---------- */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  align-items: stretch;
}
@media (min-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (min-width: 1040px) {
  .grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.card {
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px 20px 20px;
}
.card.primary {
  border-color: rgba(238, 134, 38, 0.55);
  background: linear-gradient(180deg, rgba(238, 134, 38, 0.08), rgba(238, 134, 38, 0) 46%), var(--surface);
}
.card.connector {
  border-color: rgba(100, 159, 228, 0.4);
}
.tile {
  width: 52px;
  height: 52px;
  border-radius: 13px;
  border: 1px solid rgba(238, 134, 38, 0.45);
  background: rgba(238, 134, 38, 0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
}
.card.connector .tile {
  border-color: rgba(100, 159, 228, 0.45);
  background: rgba(100, 159, 228, 0.09);
}
.titleline {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.card h3 {
  margin: 0;
  font-size: 21px;
}
/* FULL VERSION is a fact about what ships today. CONNECTOR describes what
   Coordinator IS — deliberately quieter, so the styling does not turn a
   direction into a capability claim. */
.tag {
  font-size: 10.5px;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 5px;
  color: var(--forge);
  background: rgba(238, 134, 38, 0.13);
  border: 1px solid rgba(238, 134, 38, 0.32);
}
.tag.blue {
  color: var(--coord);
  background: rgba(100, 159, 228, 0.12);
  border-color: rgba(100, 159, 228, 0.3);
}
.pitch {
  margin: 14px 0 0;
  font-size: 15px;
  line-height: 1.5;
}
.pitch .sub {
  color: var(--muted);
}
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: 14px;
}
.chip {
  font-size: 12.5px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 6px;
  padding: 5px 9px;
}
.harnesses {
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--muted);
}
/* Note ABOVE the button so the button is the last element in every card and
   all four align on one line. Pushing a footer down aligns its bottom and
   leaves the buttons ragged when the notes differ in length. */
.foot {
  margin-top: auto;
  padding-top: 18px;
}
.note {
  margin: 0 0 13px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}
.note strong {
  color: var(--text);
  font-weight: 600;
}

/* ---------- prose (product pages) ---------- */

.prose {
  max-width: 74ch;
}
.prose h2 {
  font-size: 26px;
  margin: 42px 0 12px;
}
.prose h3 {
  font-size: 18px;
  margin: 28px 0 8px;
}
.prose p,
.prose li {
  color: #c9c9d0;
}
.prose ul {
  padding-left: 20px;
}
.prose li {
  margin: 6px 0;
}
.prose strong {
  color: var(--text);
}
.callout {
  border-left: 2px solid rgba(238, 134, 38, 0.5);
  background: rgba(238, 134, 38, 0.05);
  padding: 14px 18px;
  border-radius: 0 8px 8px 0;
  margin: 24px 0;
}
.callout.blue {
  border-left-color: rgba(100, 159, 228, 0.5);
  background: rgba(100, 159, 228, 0.05);
}

.foot-note {
  text-align: center;
  color: var(--muted);
  margin-top: 40px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}