/* ============================================================
   קלוד קוד למתחילים — Design System
   RTL Hebrew · Heebo · Dark-navy + warm-amber palette
   ============================================================
   מבנה הקובץ:
   1. Variables & reset
   2. Typography
   3. Layout (sidebar + main, mobile drawer)
   4. Buttons
   5. Platform toggle + [data-os] visibility
   6. Mock windows (.window-terminal / .window-vscode / .window-browser)
   7. Code blocks (.code)
   8. Callouts, steps, kbd
   9. Chapter cards / TOC / progress
   10. Chapter prev-next nav, footer
   11. Sales page (hero, pricing)
   ============================================================ */

/* ---------- 1. Variables & reset ---------- */
:root {
  /* palette — dark navy */
  --navy-950: #070e1c;
  --navy-900: #0b1526;
  --navy-850: #0e1a2e;
  --navy-800: #122138;
  --navy-700: #1a2d4a;
  --navy-600: #24395c;
  --navy-100: #dbe4f2;

  /* palette — warm amber accent */
  --amber-600: #d98a0e;
  --amber-500: #f0a11d;
  --amber-400: #f7b53f;
  --amber-100: #fdf0d8;
  --amber-glow: rgba(240, 161, 29, 0.35);

  /* light surfaces (content area) */
  --bg: #faf7f1;
  --surface: #ffffff;
  --surface-2: #f4efe6;
  --border: #e7dfd0;
  --border-strong: #d8cdb8;

  /* text */
  --text: #1c2940;
  --text-soft: #43536e;
  --muted: #71809a;
  --on-dark: #e8eef8;
  --on-dark-soft: #9fb0c9;

  /* semantic */
  --info: #2e6fd8;
  --info-bg: #eaf1fc;
  --warn: #c2530f;
  --warn-bg: #fdeee0;
  --tip: #1e8a5a;
  --tip-bg: #e6f6ee;
  --success: #22a36b;
  --danger: #d64545;

  /* type */
  --font: 'Heebo', -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Consolas', 'Monaco', 'Menlo', 'Courier New', monospace;

  /* spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  /* radii */
  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 18px;
  --r-pill: 999px;

  /* shadows */
  --shadow-sm: 0 1px 3px rgba(11, 21, 38, 0.08);
  --shadow-md: 0 6px 18px rgba(11, 21, 38, 0.10);
  --shadow-lg: 0 18px 48px rgba(11, 21, 38, 0.18);
  --shadow-window: 0 24px 60px rgba(7, 14, 28, 0.35);

  /* layout */
  --sidebar-w: 284px;
  --content-w: 760px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; }

/* ---------- 2. Typography ---------- */
h1, h2, h3, h4 {
  color: var(--text);
  line-height: 1.25;
  margin: 0 0 var(--sp-4);
  font-weight: 800;
}
h1 { font-size: clamp(1.8rem, 4vw, 2.5rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-top: var(--sp-7); }
h3 { font-size: 1.2rem; margin-top: var(--sp-6); }
p  { margin: 0 0 var(--sp-4); }
a  { color: var(--amber-600); text-decoration: none; }
a:hover { text-decoration: underline; }
ul, ol { padding-inline-start: 1.4em; margin: 0 0 var(--sp-4); }
li { margin-bottom: var(--sp-2); }
strong { font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--sp-6) 0; }

.lead { font-size: 1.15rem; color: var(--text-soft); }
.muted { color: var(--muted); }
.accent { color: var(--amber-500); }

/* ---------- 3. Layout: fixed sidebar (right, RTL) + main ---------- */
.layout { min-height: 100vh; }

.sidebar {
  position: fixed;
  top: 0;
  right: 0;                    /* RTL: sidebar sits on the right */
  width: var(--sidebar-w);
  height: 100vh;
  height: 100dvh;
  background: var(--navy-900);
  color: var(--on-dark);
  overflow-y: auto;
  z-index: 60;
  display: flex;
  flex-direction: column;
  transition: transform 0.28s ease;
}

.sidebar-brand {
  display: block;
  padding: var(--sp-5) var(--sp-5) var(--sp-4);
  color: var(--on-dark);
  font-weight: 800;
  font-size: 1.1rem;
  text-decoration: none;
  border-bottom: 1px solid var(--navy-700);
}
.sidebar-brand:hover { text-decoration: none; color: var(--amber-400); }
.sidebar-brand .brand-badge {
  display: inline-block;
  background: var(--amber-500);
  color: var(--navy-900);
  font-size: 0.7rem;
  font-weight: 800;
  border-radius: var(--r-pill);
  padding: 1px 10px;
  margin-inline-start: var(--sp-2);
  vertical-align: middle;
}

.sidebar-nav { padding: var(--sp-4) var(--sp-3); flex: 1; }
.sidebar-nav .nav-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--on-dark-soft);
  padding: 0 var(--sp-3);
  margin: var(--sp-4) 0 var(--sp-2);
}
.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: 9px var(--sp-3);
  border-radius: var(--r-sm);
  color: var(--on-dark-soft);
  font-size: 0.95rem;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.sidebar-nav a:hover { background: var(--navy-800); color: var(--on-dark); }
.sidebar-nav a[aria-current="page"] {
  background: var(--navy-700);
  color: #fff;
  font-weight: 700;
  box-shadow: inset 3px 0 0 var(--amber-500); /* amber bar on right edge (RTL inset start) */
}
.sidebar-nav .nav-num {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--amber-500);
  min-width: 1.4em;
  text-align: center;
}
.sidebar-nav .nav-check {
  margin-inline-start: auto;
  font-size: 0.8rem;
  color: var(--success);
  visibility: hidden;
}
.sidebar-nav .nav-check.is-done,
.sidebar-nav a .nav-check.is-done { visibility: visible; }
.sidebar-nav .nav-check.is-done::before { content: "✓"; }

.sidebar-footer {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--navy-700);
  font-size: 0.8rem;
  color: var(--on-dark-soft);
}

/* main column */
.main {
  margin-right: var(--sidebar-w);  /* clear the fixed RTL sidebar */
  min-height: 100vh;
}
.container {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5) var(--sp-8);
}

/* top bar inside main (chapter pages) */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-3) var(--sp-5);
  background: rgba(250, 247, 241, 0.92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 40;
}

/* mobile hamburger + overlay */
.menu-toggle {
  display: none;
  background: var(--navy-900);
  color: #fff;
  border: 0;
  border-radius: var(--r-sm);
  padding: 8px 14px;
  font-family: var(--font);
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(7, 14, 28, 0.5);
  z-index: 55;
}

@media (max-width: 920px) {
  .sidebar { transform: translateX(100%); box-shadow: var(--shadow-lg); }
  body.sidebar-open .sidebar { transform: translateX(0); }
  body.sidebar-open .sidebar-overlay { display: block; }
  body.sidebar-open { overflow: hidden; }
  .main { margin-right: 0; }
  .menu-toggle { display: inline-block; }
  .container { padding: var(--sp-5) var(--sp-4) var(--sp-7); }
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 700;
  padding: 12px 28px;
  border-radius: var(--r-md);
  border: 2px solid transparent;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.btn:hover { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

.btn-primary {
  background: var(--amber-500);
  color: var(--navy-950);
  box-shadow: 0 6px 20px var(--amber-glow);
}
.btn-primary:hover { background: var(--amber-400); }

.btn-secondary {
  background: transparent;
  color: var(--text);
  border-color: var(--border-strong);
}
.btn-secondary:hover { border-color: var(--navy-600); }

.btn-lg { font-size: 1.15rem; padding: 16px 40px; border-radius: var(--r-lg); }
.btn-block { display: block; width: 100%; }

/* on dark sections */
.on-dark .btn-secondary { color: var(--on-dark); border-color: var(--navy-600); }
.on-dark .btn-secondary:hover { border-color: var(--on-dark-soft); }

/* ---------- 5. Platform toggle + [data-os] ---------- */
/*
  <div class="platform-toggle" role="group" aria-label="בחירת מערכת הפעלה">
    <button type="button" data-os-value="windows">Windows</button>
    <button type="button" data-os-value="mac">Mac</button>
  </div>
  JS (app.js) שומר את הבחירה ב-localStorage ומוסיף os-windows/os-mac ל-body.
*/
.platform-toggle {
  display: inline-flex;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  padding: 4px;
  gap: 4px;
}
.platform-toggle button {
  font-family: var(--font);
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--r-pill);
  padding: 6px 18px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
}
.platform-toggle button:hover { color: var(--text); }
.platform-toggle button.is-active {
  background: var(--navy-900);
  color: #fff;
  box-shadow: var(--shadow-sm);
}
.platform-toggle.toggle-lg button { font-size: 1.05rem; padding: 10px 28px; }

/* visibility rules:
   body.os-windows → מציג [data-os="windows"], מסתיר [data-os="mac"]
   body.os-mac     → מציג [data-os="mac"],     מסתיר [data-os="windows"]
   אלמנט בלי data-os מוצג תמיד. */
body.os-windows [data-os="mac"]     { display: none !important; }
body.os-mac     [data-os="windows"] { display: none !important; }

/* תגית קטנה שמסמנת לאיזו מערכת שייך הבלוק */
.os-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  border-radius: var(--r-pill);
  padding: 2px 10px;
  margin-bottom: var(--sp-2);
  background: var(--navy-100);
  color: var(--navy-700);
}

/* ---------- 6. Mock windows ---------- */
/* בסיס משותף לכל החלונות המדומים */
.window-terminal, .window-vscode, .window-browser {
  direction: ltr;              /* חלונות תוכנה הם תמיד LTR */
  text-align: left;
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-window);
  margin: var(--sp-5) 0;
  border: 1px solid rgba(255, 255, 255, 0.06);
}

/* שורת כותרת משותפת */
.window-titlebar {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 10px 14px;
  font-size: 0.8rem;
  font-family: var(--font);
}

/* פקדי mac (רמזורים) — מוצגים כשלחלון יש class="mac" (ברירת מחדל: mac) */
.window-dots { display: flex; gap: 7px; }
.window-dots i {
  width: 12px; height: 12px;
  border-radius: 50%;
  display: block;
}
.window-dots i:nth-child(1) { background: #ff5f57; }
.window-dots i:nth-child(2) { background: #febc2e; }
.window-dots i:nth-child(3) { background: #28c840; }

/* פקדי windows (מזעור/הגדלה/סגירה) — מוצגים כשלחלון יש class="win" */
.window-controls {
  margin-left: auto;
  display: flex;
  gap: 14px;
  font-family: var(--mono);
  font-size: 0.75rem;
  opacity: 0.75;
  user-select: none;
}

/* modifier: .win מסתיר רמזורים, .mac מסתיר פקדי windows */
.window-terminal.win .window-dots,
.window-vscode.win  .window-dots,
.window-browser.win .window-dots { display: none; }
.window-terminal.mac .window-controls,
.window-vscode.mac  .window-controls,
.window-browser.mac .window-controls { display: none; }

.window-title { opacity: 0.7; font-weight: 500; }

/* --- טרמינל --- */
.window-terminal { background: var(--navy-950); }
.window-terminal .window-titlebar {
  background: var(--navy-850);
  color: var(--on-dark-soft);
  border-bottom: 1px solid var(--navy-700);
}
.terminal-body {
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--mono);
  font-size: 0.88rem;
  line-height: 1.8;
  color: #cfe0f5;
  overflow-x: auto;
  white-space: pre-wrap;
  word-break: break-word;
  min-height: 60px;
}
.terminal-body .prompt { color: var(--amber-400); font-weight: 700; }
.terminal-body .cmd { color: #ffffff; }
.terminal-body .out { color: #8fa4c4; }
.terminal-body .ok  { color: #4ade80; }
.terminal-body .cursor {
  display: inline-block;
  width: 8px; height: 1.1em;
  background: var(--amber-400);
  vertical-align: text-bottom;
  animation: blink 1.1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* --- VS Code --- */
.window-vscode { background: #1e1e2e; }
.window-vscode .window-titlebar {
  background: #181825;
  color: #9aa0b8;
  border-bottom: 1px solid #11111b;
}
.vscode-chrome { display: flex; min-height: 200px; }
.vscode-activitybar {
  width: 46px;
  background: #11111b;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  padding-top: 14px;
  flex-shrink: 0;
}
.vscode-activitybar span {
  width: 20px; height: 20px;
  border-radius: 5px;
  background: #3b3f55;
  display: block;
}
.vscode-activitybar span:first-child { background: var(--amber-500); }
.vscode-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.vscode-tabs {
  display: flex;
  background: #181825;
  font-family: var(--mono);
  font-size: 0.75rem;
}
.vscode-tabs .tab {
  padding: 8px 18px;
  color: #6f7694;
  border-left: 1px solid #11111b;
}
.vscode-tabs .tab.active {
  background: #1e1e2e;
  color: #e2e6f5;
  border-top: 2px solid var(--amber-500);
}
.vscode-editor {
  padding: var(--sp-4) var(--sp-5);
  font-family: var(--mono);
  font-size: 0.85rem;
  line-height: 1.8;
  color: #c6cdea;
  overflow-x: auto;
  white-space: pre;
  flex: 1;
}
.vscode-editor .ln { color: #4a5070; margin-right: 16px; user-select: none; }
.vscode-editor .kw { color: #c792ea; }
.vscode-editor .str { color: #a5e07f; }
.vscode-editor .cm { color: #5b6382; font-style: italic; }

/* --- דפדפן --- */
.window-browser { background: #ffffff; border: 1px solid var(--border); box-shadow: var(--shadow-lg); }
.window-browser .window-titlebar {
  background: #eef0f4;
  border-bottom: 1px solid #dde0e8;
  color: #6a7386;
}
.browser-url {
  flex: 1;
  background: #ffffff;
  border: 1px solid #d7dbe4;
  border-radius: var(--r-pill);
  padding: 5px 16px;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: #3a4257;
  direction: ltr;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.browser-body {
  padding: var(--sp-5);
  min-height: 120px;
  direction: rtl;              /* תוכן הדף בעברית */
  text-align: right;
  font-size: 0.95rem;
}

/* ---------- 7. Code blocks ---------- */
/*
  <div class="code"><pre>npm install -g @anthropic-ai/claude-code</pre></div>
  כפתור "העתק" מוזרק אוטומטית ע"י app.js
*/
.code {
  position: relative;
  direction: ltr;              /* קוד תמיד LTR גם בעמוד RTL */
  text-align: left;
  background: var(--navy-900);
  border-radius: var(--r-md);
  margin: var(--sp-4) 0 var(--sp-5);
  box-shadow: var(--shadow-md);
}
.code pre {
  margin: 0;
  padding: var(--sp-4) var(--sp-5);
  padding-right: 84px;         /* מקום לכפתור העתקה */
  font-family: var(--mono);
  font-size: 0.9rem;
  line-height: 1.7;
  color: #d9e6fa;
  overflow-x: auto;
}
.code .copy-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-family: var(--font);
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--on-dark-soft);
  background: var(--navy-700);
  border: 1px solid var(--navy-600);
  border-radius: var(--r-sm);
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.code .copy-btn:hover { background: var(--navy-600); color: #fff; }
.code .copy-btn.copied { color: var(--success); border-color: var(--success); }

/* קוד inline בתוך משפט עברי */
code {
  font-family: var(--mono);
  font-size: 0.85em;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 1px 7px;
  direction: ltr;
  unicode-bidi: embed;
  white-space: nowrap;
}
.code code, .terminal-body code, .vscode-editor code {
  background: none; border: 0; padding: 0; white-space: inherit;
}

/* ---------- 8. Callouts, steps, kbd ---------- */
/* מקש מקלדת: <span class="kbd">Ctrl</span> */
.kbd {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.8em;
  font-weight: 700;
  color: var(--text);
  background: linear-gradient(180deg, #ffffff, #f0ebe0);
  border: 1px solid var(--border-strong);
  border-bottom-width: 3px;
  border-radius: 7px;
  padding: 2px 9px;
  direction: ltr;
  unicode-bidi: embed;
  vertical-align: middle;
  box-shadow: var(--shadow-sm);
}

/* Callout:
   <div class="callout callout-tip">
     <div class="callout-title">טיפ</div>
     <p>...</p>
   </div>
   וריאנטים: callout-info / callout-warning / callout-tip */
.callout {
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-5) 0;
  border-inline-start: 5px solid var(--info);
  background: var(--info-bg);
}
.callout p:last-child { margin-bottom: 0; }
.callout-title {
  font-weight: 800;
  margin-bottom: var(--sp-1);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.callout-info    { border-color: var(--info); background: var(--info-bg); }
.callout-info    .callout-title { color: var(--info); }
.callout-info    .callout-title::before { content: "ℹ️"; }
.callout-warning { border-color: var(--warn); background: var(--warn-bg); }
.callout-warning .callout-title { color: var(--warn); }
.callout-warning .callout-title::before { content: "⚠️"; }
.callout-tip     { border-color: var(--tip); background: var(--tip-bg); }
.callout-tip     .callout-title { color: var(--tip); }
.callout-tip     .callout-title::before { content: "💡"; }

/* שלבים ממוספרים:
   <ol class="steps">
     <li class="step-card"><h3>כותרת</h3><p>...</p></li>
   </ol> */
.steps {
  list-style: none;
  counter-reset: step;
  padding: 0;
  margin: var(--sp-5) 0;
}
.step-card {
  counter-increment: step;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  padding-inline-start: 68px;
  margin-bottom: var(--sp-4);
  box-shadow: var(--shadow-sm);
}
.step-card::before {
  content: counter(step);
  position: absolute;
  inset-inline-start: var(--sp-4);
  top: var(--sp-4);
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--amber-400);
  font-weight: 800;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-card h3, .step-card h4 { margin-top: 0; margin-bottom: var(--sp-2); font-size: 1.05rem; }
.step-card p:last-child { margin-bottom: 0; }
.step-card .code, .step-card .window-terminal { margin-bottom: 0; }

/* ---------- 9. Chapter cards / TOC / progress ---------- */
.chapter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: var(--sp-4);
  margin: var(--sp-5) 0;
}
.chapter-card {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-4) var(--sp-5);
  color: var(--text);
  text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}
.chapter-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
  border-color: var(--amber-400);
  text-decoration: none;
}
.chapter-card .card-num {
  font-family: var(--mono);
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--amber-600);
  background: var(--amber-100);
  border-radius: var(--r-sm);
  min-width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.chapter-card .card-title { font-weight: 800; margin-bottom: 2px; }
.chapter-card .card-desc { font-size: 0.88rem; color: var(--muted); }
.chapter-card .card-check {
  margin-inline-start: auto;
  align-self: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  border: 2px solid var(--border-strong);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: transparent;
  transition: all 0.2s;
}
.chapter-card .card-check.is-done,
.chapter-card.is-done .card-check {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
.chapter-card .card-check::before { content: "✓"; }

/* progress checkbox בסוף פרק:
   <label class="progress-check">
     <input type="checkbox" data-chapter="ch1">
     <span>סיימתי את הפרק הזה ✓</span>
   </label> */
.progress-check {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  background: var(--surface);
  border: 2px dashed var(--border-strong);
  border-radius: var(--r-md);
  padding: var(--sp-4) var(--sp-5);
  margin: var(--sp-6) 0 var(--sp-4);
  cursor: pointer;
  font-weight: 700;
  transition: border-color 0.2s, background 0.2s;
  user-select: none;
}
.progress-check:hover { border-color: var(--amber-500); }
.progress-check input {
  width: 22px; height: 22px;
  accent-color: var(--success);
  cursor: pointer;
}
.progress-check:has(input:checked) {
  border-style: solid;
  border-color: var(--success);
  background: var(--tip-bg);
}

/* ---------- 10. Chapter prev/next nav + footer ---------- */
.chapter-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.chapter-nav a {
  flex: 1;
  max-width: 48%;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  color: var(--text);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.chapter-nav a:hover { border-color: var(--amber-400); transform: translateY(-2px); }
.chapter-nav .nav-dir { display: block; font-size: 0.75rem; color: var(--muted); font-weight: 700; }
.chapter-nav .nav-title { font-weight: 800; font-size: 0.95rem; }
.chapter-nav .nav-next { text-align: left; margin-inline-start: auto; }
.chapter-nav .nav-prev { text-align: right; }

.site-footer {
  text-align: center;
  color: var(--muted);
  font-size: 0.85rem;
  padding: var(--sp-6) var(--sp-4);
  border-top: 1px solid var(--border);
  margin-top: var(--sp-8);
}

/* ---------- 11. Sales page ---------- */
.hero {
  background:
    radial-gradient(1000px 500px at 80% -10%, rgba(240, 161, 29, 0.14), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
  color: var(--on-dark);
  padding: var(--sp-8) var(--sp-5) var(--sp-8);
}
.hero-inner { max-width: 900px; margin: 0 auto; text-align: center; }
.hero h1 { color: #fff; font-size: clamp(2rem, 5.5vw, 3.2rem); margin-bottom: var(--sp-4); }
.hero h1 .accent { color: var(--amber-400); }
.hero .lead { color: var(--on-dark-soft); max-width: 640px; margin: 0 auto var(--sp-6); }
.hero-badge {
  display: inline-block;
  background: rgba(240, 161, 29, 0.14);
  border: 1px solid rgba(240, 161, 29, 0.4);
  color: var(--amber-400);
  border-radius: var(--r-pill);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 5px 18px;
  margin-bottom: var(--sp-5);
}
.hero-cta { display: flex; gap: var(--sp-4); justify-content: center; flex-wrap: wrap; margin-bottom: var(--sp-7); }
.hero .window-terminal { max-width: 640px; margin: 0 auto; text-align: left; }

.section { padding: var(--sp-8) var(--sp-5); }
.section-inner { max-width: 900px; margin: 0 auto; }
.section-title { text-align: center; margin-bottom: var(--sp-6); }
.section-alt { background: var(--surface-2); }

.audience-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-4);
}
.audience-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-5);
  box-shadow: var(--shadow-sm);
}
.audience-card .emoji { font-size: 2rem; display: block; margin-bottom: var(--sp-3); }
.audience-card h3 { margin: 0 0 var(--sp-2); font-size: 1.05rem; }
.audience-card p { margin: 0; color: var(--text-soft); font-size: 0.92rem; }

.price-card {
  max-width: 460px;
  margin: 0 auto;
  background: var(--navy-900);
  color: var(--on-dark);
  border-radius: var(--r-lg);
  padding: var(--sp-6) var(--sp-6);
  text-align: center;
  box-shadow: var(--shadow-window);
  border: 1px solid var(--navy-700);
}
.price-card .price {
  font-size: 3.4rem;
  font-weight: 800;
  color: var(--amber-400);
  line-height: 1.1;
  direction: ltr;
}
.price-card .price-note { color: var(--on-dark-soft); margin-bottom: var(--sp-5); }
.price-card ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-5) 0;
  text-align: right;
  color: var(--on-dark);
}
.price-card li { padding-inline-start: 1.6em; position: relative; margin-bottom: var(--sp-2); }
.price-card li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: var(--success);
  font-weight: 800;
}

/* unlock page */
.unlock-wrap {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--sp-5);
  background:
    radial-gradient(800px 400px at 50% -10%, rgba(240, 161, 29, 0.10), transparent 60%),
    linear-gradient(180deg, var(--navy-950), var(--navy-900));
}
.unlock-card {
  width: 100%;
  max-width: 420px;
  background: var(--surface);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  box-shadow: var(--shadow-lg);
  text-align: center;
}
.unlock-card input[name="code"] {
  width: 100%;
  font-family: var(--mono);
  font-size: 1.05rem;
  text-align: center;
  direction: ltr;
  letter-spacing: 0.08em;
  border: 2px solid var(--border-strong);
  border-radius: var(--r-md);
  padding: 12px 14px;
  margin: var(--sp-4) 0;
  color: var(--text);
  background: var(--bg);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.unlock-card input[name="code"]:focus {
  border-color: var(--amber-500);
  box-shadow: 0 0 0 4px var(--amber-glow);
}
.unlock-error {
  display: none;
  background: #fdecec;
  color: var(--danger);
  border-radius: var(--r-sm);
  font-size: 0.9rem;
  font-weight: 700;
  padding: var(--sp-2) var(--sp-3);
  margin-bottom: var(--sp-2);
}
.unlock-error.show { display: block; }

/* ---------- misc utilities ---------- */
.center { text-align: center; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.stack-sm > * + * { margin-top: var(--sp-2); }

@media (max-width: 560px) {
  body { font-size: 16px; }
  .chapter-grid { grid-template-columns: 1fr; }
  .chapter-nav { flex-direction: column; }
  .chapter-nav a { max-width: 100%; }
  .step-card { padding-inline-start: 60px; }
}