/**
 * One Up Canvas — frontend layout/utility layer.
 *
 * A small, self-contained design-token + utility-class system used by
 * Canvas/Alice-generated page content. Every selector is prefixed `.ouc-`
 * so this file NEVER restyles the host theme — it only affects elements that
 * explicitly carry an `ouc-` class. No external fonts, no JS, mobile-first.
 *
 * Keep this in sync with the Canvas preview copy at
 * public/styles/oneup-canvas-layout.css.
 */

.ouc-page {
  /* Brand tokens — overridable per page via inline custom properties later. */
  --ouc-accent: #2563eb;
  --ouc-accent-ink: #ffffff;
  --ouc-ink: #111827;
  --ouc-muted: #6b7280;
  --ouc-line: #e5e7eb;
  --ouc-surface: #ffffff;
  --ouc-surface-alt: #f8fafc;
  --ouc-radius: 14px;
  --ouc-maxw: 1120px;
  --ouc-gap: clamp(16px, 3vw, 28px);

  color: var(--ouc-ink);
  line-height: 1.6;
}

.ouc-page *,
.ouc-page *::before,
.ouc-page *::after { box-sizing: border-box; }

/* ── Layout ─────────────────────────────────────────────── */
.ouc-section {
  padding: clamp(40px, 7vw, 88px) 0;
}
.ouc-section--alt { background: var(--ouc-surface-alt); }
.ouc-container {
  width: 100%;
  max-width: var(--ouc-maxw);
  margin-inline: auto;
  padding-inline: clamp(18px, 4vw, 32px);
}
.ouc-center { text-align: center; }
.ouc-narrow { max-width: 760px; margin-inline: auto; }

/* ── Type ───────────────────────────────────────────────── */
.ouc-kicker {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ouc-accent);
  margin: 0 0 0.6rem;
}
.ouc-page h1,
.ouc-page h2,
.ouc-page h3 { line-height: 1.15; margin: 0 0 0.5em; }
.ouc-page h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
.ouc-page h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
.ouc-lead { font-size: clamp(1.05rem, 1.6vw, 1.25rem); color: var(--ouc-muted); }
.ouc-muted { color: var(--ouc-muted); }

/* ── Hero ───────────────────────────────────────────────── */
.ouc-hero {
  padding: clamp(56px, 9vw, 120px) 0;
  background: linear-gradient(180deg, var(--ouc-surface-alt), var(--ouc-surface));
}
.ouc-hero h1 { font-size: clamp(2rem, 5vw, 3.4rem); margin-bottom: 0.4em; }
.ouc-hero .ouc-lead { max-width: 640px; }
.ouc-hero--center .ouc-lead { margin-inline: auto; }

/* ── Buttons ────────────────────────────────────────────── */
.ouc-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 1.6rem; }
.ouc-hero--center .ouc-actions { justify-content: center; }
.ouc-button {
  display: inline-block;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  font-weight: 600;
  text-decoration: none;
  background: var(--ouc-accent);
  color: var(--ouc-accent-ink);
  border: 2px solid var(--ouc-accent);
  transition: transform 0.12s ease, opacity 0.12s ease;
}
.ouc-button:hover { transform: translateY(-1px); opacity: 0.92; }
.ouc-button--secondary {
  background: transparent;
  color: var(--ouc-accent);
}

/* ── Grids ──────────────────────────────────────────────── */
.ouc-grid {
  display: grid;
  gap: var(--ouc-gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: clamp(24px, 4vw, 44px);
}
.ouc-grid--2 { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); }
.ouc-feature-grid { /* alias of grid, kept for semantic class names */
  display: grid;
  gap: var(--ouc-gap);
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-top: clamp(24px, 4vw, 44px);
}

/* ── Cards ──────────────────────────────────────────────── */
.ouc-card {
  background: var(--ouc-surface);
  border: 1px solid var(--ouc-line);
  border-radius: var(--ouc-radius);
  padding: clamp(20px, 3vw, 30px);
}
.ouc-card h3 { margin-top: 0; }
.ouc-card p:last-child { margin-bottom: 0; }

/* ── Testimonials / proof ───────────────────────────────── */
.ouc-testimonial {
  background: var(--ouc-surface);
  border: 1px solid var(--ouc-line);
  border-left: 4px solid var(--ouc-accent);
  border-radius: var(--ouc-radius);
  padding: clamp(20px, 3vw, 30px);
}
.ouc-testimonial blockquote { margin: 0 0 0.8rem; font-size: 1.05rem; }
.ouc-testimonial cite { color: var(--ouc-muted); font-style: normal; font-weight: 600; }

/* ── FAQ ────────────────────────────────────────────────── */
.ouc-faq { margin-top: clamp(24px, 4vw, 40px); }
.ouc-faq-item {
  border-bottom: 1px solid var(--ouc-line);
  padding: 18px 0;
}
.ouc-faq-item h3 { margin: 0 0 0.4rem; font-size: 1.1rem; }
.ouc-faq-item p { margin: 0; color: var(--ouc-muted); }

/* ── CTA band ───────────────────────────────────────────── */
.ouc-cta-band {
  background: var(--ouc-accent);
  color: var(--ouc-accent-ink);
  border-radius: var(--ouc-radius);
  padding: clamp(32px, 5vw, 56px);
  text-align: center;
}
.ouc-cta-band h2 { color: var(--ouc-accent-ink); }
.ouc-cta-band .ouc-button {
  background: var(--ouc-accent-ink);
  color: var(--ouc-accent);
  border-color: var(--ouc-accent-ink);
}
.ouc-cta-band .ouc-lead { color: rgba(255, 255, 255, 0.9); }