/* =========================================================================
   STANDALONE PAGES — shared shell for content pages that live outside the
   Mindset HQ canvas (About, Learn to Build Agents, Contact, Privacy Policy).
   Reuses the exact token contract from styles.css so these pages feel like
   the same product, just laid out as a normal scrolling document instead
   of an explorable map. Load styles.css BEFORE this file on every page.
   ========================================================================= */

html, body.standalone { overflow: auto; height: auto; overscroll-behavior: auto; }
body.standalone {
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
}

.standalone .wrap { max-width: 860px; margin: 0 auto; padding: 0 24px; }

/* ---------- top bar ---------- */
.sa-topbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding: 16px 24px;
  background: var(--scrim);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.sa-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.sa-brand img { width: 30px; height: auto; display: block; }
.sa-brand span { font-weight: 700; font-size: 14px; letter-spacing: .01em; color: var(--fg); }
.sa-nav { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.sa-nav a {
  font-size: 13px; font-weight: 600; color: var(--muted); text-decoration: none;
  transition: color .18s var(--ease);
}
.sa-nav a:hover, .sa-nav a:focus-visible { color: var(--fg); }
.sa-nav a.sa-cta {
  color: #04121f; background: var(--grad); padding: 8px 16px; border-radius: 999px;
  box-shadow: 0 10px 24px -10px rgba(37,117,252,.55);
}
.sa-nav a.sa-cta:hover { filter: brightness(1.06); color: #04121f; }

/* ---------- hero / header block ---------- */
.sa-hero { padding: 72px 0 40px; }
.sa-hero .eyebrow { display: block; margin-bottom: 14px; }
.sa-hero h1 {
  font-size: clamp(32px, 5vw, 52px); font-weight: 200; letter-spacing: -.02em; line-height: 1.05;
  margin: 0 0 18px;
}
.sa-hero p.lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--muted); max-width: 640px; line-height: 1.6; margin: 0; }

/* ---------- body content ---------- */
.sa-section { padding: 28px 0; border-top: 1px solid var(--line); }
.sa-section:first-of-type { border-top: 0; }
.sa-section h2 {
  font-size: clamp(20px, 2.4vw, 26px); font-weight: 200; letter-spacing: -.01em; margin: 0 0 14px;
}
.sa-section h3 { font-size: 16px; font-weight: 700; color: var(--fg); margin: 0 0 8px; }
.sa-section p { font-size: 15.5px; line-height: 1.7; color: var(--muted); margin: 0 0 14px; max-width: 680px; }
.sa-section p:last-child { margin-bottom: 0; }
.sa-section ul { margin: 0 0 14px; padding-left: 20px; color: var(--muted); font-size: 15.5px; line-height: 1.7; }
.sa-section li { margin-bottom: 6px; }
.sa-section strong { color: var(--fg); }
.sa-section a.inline-link { color: var(--ink-cyan); font-weight: 600; text-decoration: underline; text-decoration-color: var(--line2); }

.sa-tag {
  display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .14em; text-transform: uppercase; color: var(--muted);
  background: var(--node-bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px;
  margin-bottom: 12px;
}

/* card grid used by About / Learn pages */
.sa-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 8px 0 20px; }
.sa-card {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--node-bg);
  padding: 18px; min-height: 0;
}
.sa-card .sa-card-num {
  display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px;
  border-radius: 999px; background: var(--grad); color: #04121f; font-size: 12px; font-weight: 800;
  margin-bottom: 10px;
}
.sa-card h3 { margin-bottom: 6px; font-size: 15px; }
.sa-card p { font-size: 13.5px; margin: 0; }

/* two-col layout used by About (mission/vision/approach) + Learn (components) */
.sa-cols { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin: 8px 0 20px; }
.sa-col {
  border: 1px solid var(--line); border-radius: var(--r); background: var(--node-bg); padding: 20px;
}

.sa-callout {
  border: 1px solid var(--line2); border-radius: var(--r); background: var(--node-bg);
  padding: 20px 22px; margin: 8px 0 20px;
}
.sa-callout p { color: var(--fg); font-weight: 600; font-size: 16px; margin: 0; }

/* CTA buttons reused on Contact / About */
.sa-btn {
  display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 999px;
  min-height: 46px; padding: 0 22px; font-weight: 700; font-size: 14.5px; cursor: pointer;
  color: #04121f; background: var(--grad); box-shadow: 0 12px 30px -12px rgba(37,117,252,.6);
  text-decoration: none; transition: filter .18s var(--ease);
}
.sa-btn:hover, .sa-btn:focus-visible { filter: brightness(1.06); }
.sa-btn.ghost {
  color: var(--fg); background: transparent; border: 1px solid var(--line2); box-shadow: none;
}
.sa-btn.ghost:hover { border-color: var(--cyan); }
.sa-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; }

/* form (Contact page) */
.sa-form { display: grid; gap: 14px; max-width: 520px; margin-top: 8px; }
.sa-field { display: flex; flex-direction: column; gap: 6px; }
.sa-field label { font-size: 12.5px; font-weight: 700; color: var(--muted); letter-spacing: .02em; }
.sa-field input, .sa-field textarea {
  font-family: inherit; font-size: 15px; color: var(--fg); background: var(--panel);
  border: 1px solid var(--line2); border-radius: 10px; padding: 12px 14px; resize: vertical;
}
.sa-field input:focus, .sa-field textarea:focus { outline: 2px solid var(--cyan); outline-offset: 1px; }
.sa-form-note { font-size: 12.5px; color: var(--faint); margin-top: -2px; }
.sa-form-status { font-size: 13.5px; font-weight: 600; margin-top: 4px; min-height: 18px; }
.sa-form-status[data-state="ok"] { color: var(--ink-green); }
.sa-form-status[data-state="err"] { color: #ef4444; }

/* footer */
.sa-footer {
  border-top: 1px solid var(--line); margin-top: 40px; padding: 32px 24px 40px;
}
.sa-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 20px; }
.sa-footer-links { display: flex; gap: 18px; flex-wrap: wrap; }
.sa-footer-links a { font-size: 13px; color: var(--muted); text-decoration: none; }
.sa-footer-links a:hover { color: var(--fg); }
.sa-footer-meta { font-size: 12.5px; color: var(--faint); }

@media (max-width: 760px) {
  .sa-topbar { padding: 12px 16px; }
  .sa-nav { gap: 10px; }
  .sa-nav a:not(.sa-cta) { display: none; }
  .sa-grid, .sa-cols { grid-template-columns: 1fr; }
  .sa-hero { padding: 48px 0 28px; }
}