/*
 * Workdome marketing site (#528).
 *
 * Hand-written and small on purpose: this site exists so the apex does not
 * 404 on cutover day, and a build step nobody maintains is how a static site
 * rots. No framework, no reset library, ~200 lines.
 *
 * Colours mirror the application's own tokens so the two do not look like
 * different products, and dark mode is supported for the same reason.
 */
:root {
  --bg: #ffffff;
  --fg: #0a0a0a;
  --muted: #525252;
  --border: #e5e5e5;
  --primary: #105fff;
  --accent: #ea4a3e;
  --primary-fg: #ffffff;
  --surface: #f9fafb;
  --radius: 10px;
  --maxw: 1080px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a0a;
    --fg: #fafafa;
    --muted: #a3a3a3;
    --border: #262626;
    /* The dome's bright blue: the wordmark blue is only 3.87:1 on this
       background, which fails AA for a link. */
    --primary: #269aeb;
    --accent: #ea4a3e;
    --surface: #171717;
  }
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family:
    Inter,
    -apple-system,
    BlinkMacSystemFont,
    'Segoe UI',
    sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.container {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 20px;
}

a {
  color: var(--primary);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

/* ---- header ---- */
.site-header {
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 64px;
}
.brand {
  display: inline-flex;
  align-items: center;
}
/* No `display` here — see the variant rules below. Setting it on `.brand img`
   (specificity 0,1,1) would beat `.brand-logo-dark { display: none }` (0,1,0)
   and render BOTH logos side by side, which is exactly what it did. */
.brand img {
  height: 34px;
  width: auto;
}

/* Logo variant switching, decided in CSS so neither file flashes on load.
   Both selectors carry the same weight as the rule above, so the winner is
   the one written last rather than an accident of specificity. */
.brand img.brand-logo-dark {
  display: none;
}
.brand img.brand-logo-light {
  display: block;
}
@media (prefers-color-scheme: dark) {
  .brand img.brand-logo-light {
    display: none;
  }
  .brand img.brand-logo-dark {
    display: block;
  }
}

.footer-mark {
  width: 16px;
  height: 16px;
  vertical-align: -2px;
  margin-right: 6px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: 20px;
}
.site-nav a {
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
}
.site-nav a:hover {
  color: var(--fg);
  text-decoration: none;
}

.btn {
  display: inline-block;
  padding: 9px 18px;
  border-radius: var(--radius);
  font-weight: 600;
  font-size: 15px;
  border: 1px solid transparent;
}
.btn-primary {
  background: var(--primary);
  color: var(--primary-fg) !important;
}
.btn-primary:hover {
  opacity: 0.9;
  text-decoration: none;
}
.btn-secondary {
  border-color: var(--border);
  color: var(--fg) !important;
}
.btn-secondary:hover {
  background: var(--surface);
  text-decoration: none;
}

/* ---- hero ---- */
.hero {
  padding: 88px 0 64px;
  text-align: center;
}
.hero h1 {
  font-size: clamp(2rem, 5vw, 3.25rem);
  line-height: 1.15;
  margin: 0 0 18px;
  letter-spacing: -0.02em;
}
/* The logo's amber-to-red sweep, reused as a rule under the headline. Large
   decorative graphic only — #ea4a3e is 3.79:1 and never carries text. */
.hero h1::after {
  content: '';
  display: block;
  width: 72px;
  height: 3px;
  border-radius: 2px;
  margin: 20px auto 0;
  background: linear-gradient(90deg, #ffa705, var(--accent));
}
.hero p.lede {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 32px;
}
.hero-actions {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ---- sections ---- */
section {
  padding: 56px 0;
}
section h2 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  margin: 0 0 10px;
  letter-spacing: -0.01em;
}
section > .container > p {
  color: var(--muted);
  max-width: 680px;
}

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 28px;
}
.card {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  background: var(--surface);
}
.card h3 {
  margin: 0 0 8px;
  font-size: 1.05rem;
}
.card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.95rem;
}

/* ---- prose (privacy / terms) ---- */
.prose {
  max-width: 760px;
  padding: 56px 0;
}
.prose h1 {
  font-size: clamp(1.7rem, 4vw, 2.3rem);
  margin: 0 0 8px;
}
.prose .updated {
  color: var(--muted);
  font-size: 0.9rem;
  margin: 0 0 32px;
}
.prose h2 {
  font-size: 1.15rem;
  margin: 32px 0 8px;
}
.prose p,
.prose li {
  color: var(--muted);
}
.prose ul {
  padding-left: 20px;
}

/* ---- footer ---- */
.site-footer {
  border-top: 1px solid var(--border);
  margin-top: 40px;
  padding: 32px 0;
}
.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-brand {
  margin: 0;
  font-weight: 600;
}
.footer-nav {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
}
.footer-nav a {
  color: var(--muted);
  font-size: 0.92rem;
}
.footer-legal {
  margin: 0;
  color: var(--muted);
  font-size: 0.85rem;
}

@media (max-width: 640px) {
  .site-nav a:not(.btn) {
    display: none;
  }
  .hero {
    padding: 56px 0 40px;
  }
}