/* ========== PlayMethodLab Starter Styles ========== */

:root{
  --bg: #0f172a;           /* slate-900 (navy) for strong headers */
  --bg-soft:#0b1224;       /* slightly softer bg for hero overlay */
  --surface:#0b1224;       /* cards */
  --text:#e5e7eb;          /* gray-200 */
  --muted:#cbd5e1;         /* gray-300 */
  --brand:#38bdf8;         /* sky-400 */
  --brand-strong:#0284c7;  /* sky-600 */
  --accent:#14b8a6;        /* teal-500 */
  --warm:#64748b;          /* slate-500 */
  --paper:#f8fafc;         /* light paper bg */
  --ink:#0f172a;           /* dark ink */
  --ring:#94a3b8;          /* focus ring */
  --success:#22c55e;
  --warning:#f59e0b;
  --danger:#ef4444;
}
@media (prefers-color-scheme: light){
  :root{
    --bg:#ffffff;
    --bg-soft:#f8fafc;
    --surface:#ffffff;
    --text:#0f172a;
    --muted:#334155;
    --paper:#ffffff;
    --ink:#0f172a;
  }
}


* { box-sizing: border-box; }
html, body { margin:0; padding:0; }
body {
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Noto Sans, Ubuntu, Cantarell, Helvetica Neue, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
a { color: var(--brand); text-decoration: none; }
a:focus { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 8px; }

.container { max-width: 1080px; margin: 0 auto; padding: 1.25rem; }

.header {
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 40;
  background: color-mix(in oklab, var(--bg), transparent 60%);
  border-bottom: 1px solid color-mix(in oklab, var(--brand), var(--ink) 85%);
}
.header-inner { display:flex; align-items:center; justify-content:space-between; gap: 1rem; }
.brand { display:flex; align-items:center; gap: .75rem; font-weight: 800; letter-spacing:.2px; color: var(--text); }
.brand-logo { width: 36px; height: 36px; }
.nav a { margin-left: 1rem; font-weight:600; color: var(--muted); }
.nav a:hover { color: var(--text); }

.hero {
  padding: 5rem 0 3rem;
  background:
    radial-gradient(800px 300px at 20% 0%, color-mix(in oklab, var(--brand), transparent 70%), transparent 80%),
    radial-gradient(600px 220px at 80% 0%, color-mix(in oklab, var(--accent), transparent 75%), transparent 80%);
}
.hero h1 {
  font-size: clamp(2rem, 3vw + 1rem, 3rem);
  line-height: 1.1;
  margin: 0 0 1rem 0;
}
.hero p { max-width: 64ch; color: var(--muted); font-size: 1.05rem; }

.card-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(240px,1fr)); gap: 1rem; margin-top: 2rem; }
.card {
  background: color-mix(in oklab, var(--surface), transparent 0%);
  border: 1px solid color-mix(in oklab, var(--brand), var(--ink) 90%);
  border-radius: 1.25rem;
  padding: 1.25rem;
  box-shadow: 0 10px 30px rgba(0,0,0,.15);
}
.card h3 { margin-top: 0; }
.card p { color: var(--muted); }

.btn-row { display:flex; gap: .75rem; flex-wrap: wrap; margin-top: 1rem; }
.btn {
  --btn-bg: var(--brand);
  --btn-fg: white;
  display:inline-flex; align-items:center; gap:.5rem;
  padding: .85rem 1rem; border-radius: .85rem;
  font-weight: 800; letter-spacing:.2px;
  background: var(--btn-bg); color: var(--btn-fg);
  border: 2px solid color-mix(in oklab, var(--btn-bg), black 10%);
  box-shadow: 0 6px 18px color-mix(in oklab, var(--btn-bg), black 70% / 15%);
  cursor:pointer;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn:focus { outline: 3px solid var(--ring); outline-offset: 2px; }

.btn-secondary { --btn-bg: var(--accent); }
.btn-ghost {
  --btn-bg: color-mix(in oklab, var(--bg), white 5%);
  --btn-fg: var(--text);
  border-color: color-mix(in oklab, var(--ink), white 85%);
}

.kicker { color: var(--accent); font-weight: 800; text-transform: uppercase; letter-spacing:.12em; font-size:.8rem; }

.section { padding: 3rem 0; }
.section h2 { font-size: 1.6rem; margin-top: 0; }

.footer {
  padding: 2rem 0; color: var(--muted);
  border-top: 1px dashed color-mix(in oklab, var(--brand), var(--ink) 85%);
}
.footer small { display:block; margin-top:.25rem; }
.badge { display:inline-block; font-size:.75rem; padding:.25rem .5rem; border-radius:.5rem; border:1px solid color-mix(in oklab, var(--ink), white 85%); color: var(--muted) }
.proof { background: var(--paper); color: var(--ink); padding: .5rem .75rem; border-radius: .5rem; border:1px solid #e5e7eb; }

.toc { list-style:none; padding-left: 0; }
.toc li+li { margin-top: .35rem; }

img.diagram { width:100%; max-width: 760px; display:block; margin: 1rem auto; }
figure { margin: 1.5rem 0; }
figcaption { color: var(--muted); font-size:.9rem; text-align:center; }

.btn{ position: relative; overflow: hidden; }
.ripple{ position:absolute; width:20px; height:20px; border-radius:50%;
  background: rgba(255,255,255,.5); transform: scale(0); animation: ripple .6s ease-out; pointer-events:none; }
@keyframes ripple{ to{ transform: scale(12); opacity: 0; } }