/* ==========================================================================
   OpenhouseXR — shared styles
   Used by content pages (privacy, support, alpha-nda) and the site footer.
   index.html links this for shared tokens + footer, and adds its own hero CSS.
   ========================================================================== */

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#050510;
  --blue:#4f7fff;
  --text:rgba(255,255,255,0.82);
  --muted:rgba(255,255,255,0.45);
  --border:rgba(255,255,255,0.08);
}

html{scroll-behavior:smooth}

body{
  font-family:'Space Grotesk',system-ui,sans-serif;
  background:var(--bg);color:var(--text);
  min-height:100vh;
  display:flex;flex-direction:column;
  line-height:1.65;
}

/* ---------- header (back link) ---------- */
header{
  padding:2rem 2rem 1.5rem;
  border-bottom:1px solid var(--border);
}
header a{
  color:var(--muted);font-size:.85rem;text-decoration:none;
  display:inline-flex;align-items:center;gap:.4rem;
  transition:color .2s;
}
header a:hover{color:var(--text)}
header a svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}

/* ---------- main + typography ---------- */
main{
  flex:1;max-width:760px;width:100%;
  margin:0 auto;padding:3rem 2rem 4rem;
}
h1{
  font-size:clamp(1.8rem,4vw,2.4rem);font-weight:700;
  letter-spacing:-.02em;margin-bottom:.5rem;
}
.meta{
  color:var(--muted);font-size:.85rem;
  margin-bottom:2.5rem;
}
.meta strong{color:var(--text);font-weight:500}

h2{
  font-size:1.25rem;font-weight:600;
  letter-spacing:-.01em;
  margin:2.5rem 0 .9rem;
  color:#fff;
}
h3{
  font-size:1rem;font-weight:600;
  margin:1.5rem 0 .6rem;
  color:rgba(255,255,255,0.92);
}
p, ul, ol{
  font-size:.95rem;
  margin-bottom:1rem;
}
ul, ol{padding-left:1.4rem}
li{margin-bottom:.35rem}
a{color:var(--blue);text-decoration:none}
a:hover{text-decoration:underline}
strong{color:#fff;font-weight:600}
em{color:rgba(255,255,255,0.9);font-style:normal;font-weight:500}

/* ---------- lead/intro callout ---------- */
.intro{
  padding:1.25rem 1.4rem;
  background:rgba(79,127,255,.04);
  border-left:2px solid var(--blue);
  border-radius:4px;
  font-size:.92rem;
  margin-bottom:2rem;
}

/* ---------- site footer (shared across all pages) ---------- */
.site-footer{
  padding:1.5rem 2rem;text-align:center;
  border-top:1px solid var(--border);
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
  gap:.4rem 1rem;
}
.site-footer span{color:var(--muted);font-size:.8rem}
.site-footer a{color:var(--muted);font-size:.8rem;text-decoration:none}
.site-footer a:hover{color:var(--text);text-decoration:underline}

@media (max-width:600px){
  main{padding:2rem 1.5rem 3rem}
}