@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Fira+Code:wght@400;500&display=swap');
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --brand: #D4712A; --brand-light: #FDF3EA; --brand-dark: #B85E1F;
  --brand-deep: #8B3D0F;
  --ink: #1A1A2E; --ink-soft: #4A4A6A; --ink-muted: #8888AA;
  --rule: #E8E8F0; --surface: #FAFAFA; --white: #FFFFFF;
  --green: #1A7F4B; --green-bg: #EDFAF3;
  --blue: #1A5FAB; --blue-bg: #EEF4FD;
  --purple: #6B3FA0; --purple-bg: #F3EEFB;
  --red: #C0392B; --red-bg: #FDF0EE;
  --yellow-bg: #FFFBEA; --yellow-border: #F5E28A;
}
body { font-family: 'Inter', sans-serif; font-size: 15px; line-height: 1.75; color: var(--ink); background: var(--surface); }
.page { max-width: 1400px; margin: 0 auto; background: var(--white); padding: 30px; }

/* ── Cover ── */
.cover {
  background: var(--ink);
  padding: 80px 72px 72px;
  position: relative;
  overflow: hidden;
}
.cover::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,113,42,0.18) 0%, transparent 70%);
  pointer-events: none;
}
.cover::after {
  content: '';
  position: absolute;
  bottom: -80px; left: -80px;
  width: 360px; height: 360px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(107,63,160,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.cover-eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase; color: var(--brand); margin-bottom: 20px;
}
.cover-title {
  font-size: 48px; font-weight: 800; color: white; line-height: 1.1;
  margin-bottom: 20px; letter-spacing: -.02em;
}
.cover-title span { color: var(--brand); }
.cover-subtitle {
  font-size: 18px; color: rgba(255,255,255,0.65);
  line-height: 1.5; margin-bottom: 48px; max-width: 540px;
}
.cover-pills { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 64px; }
.cover-pill {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 20px; padding: 6px 16px; font-size: 12.5px;
  font-weight: 500; color: rgba(255,255,255,0.75);
}
.cover-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: rgba(255,255,255,0.08);
  border-radius: 10px; overflow: hidden;
}
.cover-stat {
  background: rgba(255,255,255,0.04); padding: 20px 20px;
  text-align: center;
}
.cover-stat .cs-num {
  font-size: 32px; font-weight: 800; color: var(--brand); line-height: 1;
  margin-bottom: 6px;
}
.cover-stat .cs-label {
  font-size: 12px; color: rgba(255,255,255,0.5); line-height: 1.3;
}

/* ── Main content area ── */
.content { padding: 64px 72px; }

/* ── Section headings ── */
h2 {
  font-size: 22px; font-weight: 700; color: var(--ink);
  margin: 52px 0 18px; padding-bottom: 10px;
  border-bottom: 2px solid var(--rule);
}
.claude-seo-main .page h2 { margin: 48px 0 16px; font-size: 20px; padding-bottom: 8px; }
h2 .sh-accent { color: var(--brand); }
h2 .section-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; background: var(--brand); color: white;
  border-radius: 50%; font-size: 13px; font-weight: 700; margin-right: 10px;
  vertical-align: middle; position: relative; top: -1px;
}
h3 { font-size: 16px; font-weight: 600; color: var(--ink); margin: 28px 0 10px; }
p { margin-bottom: 14px; color: var(--ink-soft); line-height: 1.75; }
p:last-child { margin-bottom: 0; }
ul, ol { padding-left: 22px; margin-bottom: 14px; }
li { color: var(--ink-soft); margin-bottom: 6px; font-size: 14.5px; }

/* ── Pull quote ── */
.pull-quote {
  border-left: 4px solid var(--brand);
  padding: 18px 24px;
  margin: 32px 0;
  background: var(--brand-light);
  border-radius: 0 8px 8px 0;
}
.pull-quote p {
  font-size: 17px; font-style: italic; color: var(--ink);
  font-weight: 500; margin: 0; line-height: 1.6;
}
.pull-quote .pq-attr {
  font-size: 12px; color: var(--ink-muted); margin-top: 10px;
  font-style: normal; font-weight: 400;
}

/* ── Tutorial: doc header & intro ── */
.doc-header { border-bottom: 3px solid var(--brand); padding-bottom: 32px; margin-bottom: 48px; }
.series-label { font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brand); margin-bottom: 10px; }
h1 { font-size: 32px; font-weight: 700; color: var(--ink); line-height: 1.25; margin-bottom: 14px; }
.doc-meta { display: flex; gap: 24px; flex-wrap: wrap; font-size: 13px; color: var(--ink-muted); }
.doc-meta span { display: flex; align-items: center; gap: 6px; }
.intro-box { background: var(--brand-light); border-left: 4px solid var(--brand); border-radius: 0 8px 8px 0; padding: 20px 24px; margin-bottom: 48px; }
.intro-box p { color: var(--ink-soft); font-size: 14.5px; }
.intro-box strong { color: var(--ink); }
.objectives { background: var(--blue-bg); border: 1px solid #C5D9F5; border-radius: 8px; padding: 20px 24px; margin-bottom: 32px; }
.objectives .obj-title { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--blue); margin-bottom: 12px; }
.objectives ul { list-style: none; padding: 0; }
.objectives ul li { padding: 4px 0 4px 24px; position: relative; font-size: 14px; color: var(--ink-soft); }
.objectives ul li::before { content: '✓'; position: absolute; left: 0; color: var(--blue); font-weight: 700; }

/* ── Tutorial: comparison, prompt block, framework ── */
.comparison { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.comp-box { border-radius: 8px; padding: 16px 18px; font-size: 13.5px; }
.comp-box .comp-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.comp-box.bad { background: var(--red-bg); border: 1px solid #F0C0BB; }
.comp-box.bad .comp-label { color: var(--red); }
.comp-box.good { background: var(--green-bg); border: 1px solid #B0E0C8; }
.comp-box.good .comp-label { color: var(--green); }
.comp-box p { font-size: 13.5px; font-style: italic; color: var(--ink); margin: 0; line-height: 1.6; }
.prompt-block { background: #1A1A2E; border-radius: 8px; padding: 24px 28px; margin: 20px 0; font-family: 'Fira Code', monospace; font-size: 13px; line-height: 1.8; color: #CDD6F4; }
.prompt-block .anno { display: inline-block; background: rgba(212,113,42,0.25); color: #FAB387; border-radius: 3px; padding: 0 6px; font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; margin-left: 8px; vertical-align: middle; }
.prompt-line { margin-bottom: 6px; }
.framework { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin: 20px 0; }
.fw-card { border: 1px solid var(--rule); border-radius: 8px; padding: 16px 18px; background: var(--white); }
.fw-card .fw-letter { font-size: 28px; font-weight: 700; color: var(--brand); line-height: 1; margin-bottom: 6px; }
.fw-card .fw-word { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.fw-card p { font-size: 13px; margin: 0; color: var(--ink-soft); }
.template-box { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--brand); border-radius: 0 0 8px 8px; padding: 20px 24px; margin: 20px 0; }
.template-box .template-label { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.template-box pre { font-family: 'Fira Code', monospace; font-size: 12.5px; line-height: 1.8; color: var(--ink); white-space: pre-wrap; word-break: break-word; }
.template-box .placeholder { color: var(--brand-dark); font-weight: 500; }
.exercise { border: 2px dashed var(--brand); border-radius: 8px; padding: 20px 24px; margin: 28px 0; }
.exercise .ex-header { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 12px; }
.exercise h4 { font-size: 15px; color: var(--ink); margin-bottom: 10px; }
.exercise ol { padding-left: 20px; }
.exercise ol li { font-size: 14px; color: var(--ink-soft); margin-bottom: 6px; }
table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 13.5px; }
thead th { background: var(--ink); color: white; padding: 10px 14px; text-align: left; font-weight: 600; font-size: 12px; letter-spacing: .04em; }
tbody tr:nth-child(even) { background: var(--surface); }
tbody td { padding: 10px 14px; color: var(--ink-soft); border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody td:first-child { color: var(--ink); font-weight: 500; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.summary-card { background: var(--brand-light); border: 1px solid #F0C898; border-radius: 8px; padding: 16px; text-align: center; }
.summary-card .s-icon { font-size: 24px; margin-bottom: 8px; }
.summary-card .s-title { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.summary-card .s-desc { font-size: 12px; color: var(--ink-soft); }

/* Next steps / idea cards (emoji + title + short paragraph) */
.next-steps-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; margin: 20px 0; }
.next-step { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; }
.next-step .ns-icon { font-size: 24px; margin-bottom: 8px; }
.next-step .ns-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.next-step p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* Concept cards (emoji + title + paragraph), e.g. Key Concepts */
.concept-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 20px 0; }
.concept-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; }
.concept-card .cc-icon { font-size: 24px; margin-bottom: 8px; }
.concept-card .cc-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.concept-card p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* Phase / step cards (number + title + time tag, then body) */
.phase { border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin: 16px 0; background: var(--surface); }
.phase-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 14px 18px; background: var(--surface); border-bottom: 1px solid var(--rule); }
.phase-num { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); color: white; font-size: 13px; font-weight: 700; border-radius: 6px; }
.phase-title { flex: 1; font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0; }
.phase-tag { font-size: 12px; color: var(--ink-muted); white-space: nowrap; }
.phase-body { padding: 14px 18px; }
.phase-body p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* Architecture / data flow diagram */
.architecture { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 20px; margin: 20px 0; }
.arch-title { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--ink); margin-bottom: 14px; }
.arch-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arch-row + .arch-row { margin-top: 10px; }
.arch-box { padding: 8px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; white-space: nowrap; }
.arch-box.input { background: #E8F0FE; color: #1a56db; border: 1px solid #B8D4F0; }
.arch-box.process { background: var(--ink); color: white; border: 1px solid var(--ink); }
.arch-box.output { background: var(--brand-light); color: var(--ink); border: 1px solid #F0C898; }
.arch-arrow { color: var(--ink-muted); font-size: 16px; font-weight: 700; flex-shrink: 0; }
.arch-desc { font-size: 13px; color: var(--ink-soft); font-style: italic; max-width: 100%; }

/* Before/after or two-column comparison cards (e.g. Task-level vs Analysis-level) */
.ba-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0; }
@media (max-width: 640px) { .ba-grid { grid-template-columns: 1fr; } }
.ba-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; }
.ba-card .ba-label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.ba-card p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* Data prep blocks (emoji + title + one or more paragraphs) */
.data-prep { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 18px 20px; margin: 16px 0; }
.data-prep .dp-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 10px; }
.data-prep p { margin: 0 0 10px; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.data-prep p:last-child { margin-bottom: 0; }

/* Use case header (letter + title + tag), e.g. "A · Keyword Cannibalisation Analysis · Search Console" */
.use-case-header { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 18px; margin: 24px 0 16px; }
.use-case-header .uc-num { width: 32px; height: 32px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); color: white; font-size: 14px; font-weight: 700; border-radius: 6px; }
.use-case-header .uc-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.use-case-header .uc-tag { font-size: 12px; font-weight: 600; letter-spacing: .05em; color: var(--ink-muted); padding: 4px 10px; border-radius: 6px; background: var(--surface); border: 1px solid var(--rule); }

/* Prompt chain (vertical timeline: label + quote + note per step) */
.chain { margin: 20px 0; }
.chain-item { display: flex; gap: 16px; margin-bottom: 4px; }
.chain-item:last-child .chain-line { display: none; }
.chain-connector { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; }
.chain-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--brand); border: 2px solid var(--brand); }
.chain-line { width: 2px; flex: 1; min-height: 20px; background: var(--rule); margin-top: 4px; }
.chain-content { flex: 1; min-width: 0; padding-bottom: 16px; }
.chain-content .ch-label { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.chain-content .ch-text { font-size: 13px; color: var(--ink-soft); font-style: italic; margin-bottom: 4px; }
.chain-content .ch-note { font-size: 12px; color: var(--ink-muted); }

/* Concept blocks (emoji + title + paragraph), e.g. API Key / JSON Response — same pattern as concept-card, different class names */
.concepts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; margin: 20px 0; }
.concepts .concept { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; }
.concepts .concept .c-icon { font-size: 24px; margin-bottom: 8px; }
.concepts .concept .c-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.concepts .concept p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* .env file display (code-block style, one line per env-line) */
.env-box { background: #1E1E2E; border-radius: 8px; padding: 16px 20px; margin: 20px 0; font-family: 'Fira Code', monospace; font-size: 12.5px; line-height: 1.8; }
.env-box .env-line { display: block; }
.env-box .ev-comment { color: #6C7086; font-style: italic; }
.env-box .ev-key { color: #89B4FA; }
.env-box .ev-val { color: #A6E3A1; }

/* API / how-to steps (numbered list with h4 + p per step) */
.api-steps { counter-reset: api-step; margin: 20px 0; }
.api-step { display: flex; gap: 16px; margin-bottom: 16px; }
.api-step:last-child { margin-bottom: 0; }
.api-step-num { counter-increment: api-step; width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--brand); color: white; border-radius: 6px; font-weight: 700; font-size: 13px; }
.api-step-num::before { content: counter(api-step); }
.api-step-body h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.api-step-body p { margin: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }

/* Tool card (Tool 1 — PageSpeed ... with badges and body) */
.tool-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin: 24px 0; }
.tool-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.tool-card-header .tc-title { font-size: 15px; font-weight: 600; color: var(--ink); }
.tool-card-header .tc-meta { display: flex; gap: 8px; flex-wrap: wrap; }
.tool-card-header .tc-badge { font-size: 11px; font-weight: 600; letter-spacing: .05em; padding: 4px 10px; border-radius: 6px; background: var(--brand-light); color: var(--ink); border: 1px solid #F0C898; }
.tool-card-body { padding: 20px; }
.tool-card-body h3 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 16px 0 8px; }
.tool-card-body h3:first-child { margin-top: 0; }
.tool-card-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 12px; }

/* Progress track (Week 1 ✓ … Week 4 ←) */
.progress-track { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin: 20px 0; }
.progress-track .pt-item { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 14px 16px; }
.progress-track .pt-item.current { border-color: var(--brand); background: var(--brand-light); }
.progress-track .pt-week { font-size: 12px; font-weight: 700; color: var(--ink-muted); margin-bottom: 4px; }
.progress-track .pt-item.done .pt-week { color: var(--green); }
.progress-track .pt-item.current .pt-week { color: var(--brand); }
.progress-track .pt-title { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.progress-track .pt-tasks { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }

/* Library index (prompt list: #1 Title Tag Reviewer, #2 …, etc.) */
.library-index { margin: 20px 0; }
.library-index .lib-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 14px; padding: 14px 18px; margin-bottom: 8px; background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; }
.library-index .lib-item:last-child { margin-bottom: 0; }
.library-index .lib-num { flex-shrink: 0; font-size: 12px; font-weight: 700; color: var(--ink-muted); }
.library-index .lib-name { font-size: 14px; font-weight: 600; color: var(--ink); min-width: 0; }
.library-index .lib-desc { font-size: 13px; color: var(--ink-soft); flex: 1 1 100%; min-width: 0; padding-left: 2.25rem; margin-top: 2px; }

/* Project map (Recommended Claude Projects Structure) */
.project-map { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin: 20px 0; }
.project-map-header { font-size: 14px; font-weight: 600; color: var(--ink); padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.project-map-body { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px 20px; }
.project-map .proj-item { background: white; border: 1px solid var(--rule); border-radius: 6px; padding: 14px 16px; }
.project-map .proj-item.agency { border-color: #E8D5B5; background: var(--brand-light); }
.project-map .pi-icon { font-size: 22px; margin-bottom: 6px; }
.project-map .pi-name { font-size: 13px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.project-map .pi-desc { font-size: 12px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* Task list / SOP items (New Client Onboard, Post-Crawl, …) */
.task-list { margin: 20px 0; }
.task-list .task-item { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin-bottom: 12px; }
.task-list .task-item:last-child { margin-bottom: 0; }
.task-list .ti-trigger { font-size: 14px; font-weight: 600; color: var(--ink); padding: 12px 18px; border-bottom: 1px solid var(--rule); }
.task-list .ti-body { padding: 14px 18px; }
.task-list .ti-body h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.task-list .ti-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0 0 8px; }
.task-list .ti-prompt { font-size: 12px; color: var(--ink-muted); font-style: italic; margin: 0; }

/* Quality gates (Always verify / Never send directly) */
.quality-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin: 20px 0; }
@media (max-width: 640px) { .quality-grid { grid-template-columns: 1fr; } }
.quality-grid .quality-card { border-radius: 8px; padding: 16px 18px; border: 1px solid var(--rule); }
.quality-grid .quality-card.always { background: #E8F5E9; border-color: #A5D6A7; }
.quality-grid .quality-card.never { background: #FFEBEE; border-color: #EF9A9A; }
.quality-grid .qc-title { font-size: 14px; font-weight: 600; margin-bottom: 10px; }
.quality-grid .quality-card.always .qc-title { color: #2E7D32; }
.quality-grid .quality-card.never .qc-title { color: #C62828; }
.quality-grid .quality-card ul { margin: 0; padding-left: 20px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }

/* SOP card (Monthly Prompt Library Review — header + numbered steps) */
.sop-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin: 20px 0; }
.sop-card-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule); background: var(--surface); }
.sop-card-header .sc-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.sop-card-header .sc-badge { font-size: 12px; color: var(--ink-muted); }
.sop-card-body { padding: 18px 20px; }
.sop-card-body > p { margin: 0 0 14px; font-size: 13px; color: var(--ink-soft); line-height: 1.5; }
.sop-steps { counter-reset: sop-step; }
.sop-step { display: flex; gap: 14px; margin-bottom: 12px; }
.sop-step:last-child { margin-bottom: 0; }
.sop-step-num { counter-increment: sop-step; width: 24px; height: 24px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--brand); color: white; border-radius: 50%; font-weight: 700; font-size: 12px; }
.sop-step-num::before { content: counter(sop-step); }
.sop-step-body { flex: 1; min-width: 0; font-size: 13px; color: var(--ink-soft); line-height: 1.55; }
.sop-step-body strong { color: var(--ink); }

/* Agenda (Show & Tell — time slots + rows) */
.agenda { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; margin: 20px 0; }
.agenda-header { font-size: 14px; font-weight: 600; color: var(--ink); padding: 14px 20px; border-bottom: 1px solid var(--rule); }
.agenda-row { display: flex; gap: 20px; padding: 14px 20px; border-bottom: 1px solid var(--rule); align-items: flex-start; }
.agenda-row:last-child { border-bottom: none; }
.agenda-row .ar-time { font-size: 13px; font-weight: 700; color: var(--ink-muted); font-variant-numeric: tabular-nums; flex-shrink: 0; width: 3em; }
.agenda-row .ar-body { flex: 1; min-width: 0; }
.agenda-row .ar-body h4 { font-size: 13px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.agenda-row .ar-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.5; margin: 0; }

/* Tool header (Tool 1 of 3 — Log File Analyser with meta badges) */
.tool-header { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px 8px 0 0; padding: 16px 20px; border-bottom: none; }
.tool-header .th-label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); margin-bottom: 4px; }
.tool-header .th-title { font-size: 16px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
.tool-header .th-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12px; color: var(--ink-soft); }
.tool-body { background: var(--surface); border: 1px solid var(--rule); border-top: none; border-radius: 0 0 8px 8px; padding: 20px; margin-bottom: 24px; }
.tool-body h3 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 16px 0 8px; }
.tool-body h3:first-child { margin-top: 0; }
.tool-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 12px; }

/* Phase list (numbered build phases: 1 SERP scraping, 2 Page heading extraction, …) */
.phase-list { margin: 20px 0; }
.phase-list .phase-item { display: flex; gap: 16px; margin-bottom: 14px; align-items: flex-start; }
.phase-list .phase-item:last-child { margin-bottom: 0; }
.phase-list .ph-num { width: 28px; height: 28px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--ink); color: white; font-size: 13px; font-weight: 700; border-radius: 6px; }
.phase-list .ph-body h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0 0 4px; }
.phase-list .ph-body p { font-size: 13px; color: var(--ink-soft); line-height: 1.55; margin: 0; }

/* Certificate (Programme Complete — series, title, skills grid, note) */
.certificate { background: linear-gradient(180deg, var(--brand-light) 0%, white 100%); border: 2px solid #F0C898; border-radius: 12px; padding: 28px 32px; margin: 28px 0; text-align: center; }
.certificate .cert-series { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand); margin-bottom: 8px; }
.certificate .cert-title { font-size: 20px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.certificate .cert-sub { font-size: 13px; color: var(--ink-soft); margin-bottom: 20px; }
.certificate .cert-skills { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 20px; margin-bottom: 20px; }
.certificate .cert-skill { display: flex; align-items: center; gap: 8px; background: white; border: 1px solid var(--rule); border-radius: 8px; padding: 10px 14px; }
.certificate .cert-skill .cs-icon { font-size: 20px; }
.certificate .cert-skill .cs-label { font-size: 12px; font-weight: 600; color: var(--ink); }
.certificate .cert-note { font-size: 12px; color: var(--ink-muted); line-height: 1.5; max-width: 640px; margin: 0 auto; }

/* ── Tutorial: prompt card, terminal, code block ── */
.prompt-card { border: 1px solid var(--rule); border-radius: 10px; overflow: hidden; margin: 24px 0; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.prompt-card-header { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; background: var(--ink); color: white; }
.prompt-card-header .pc-title { font-size: 13px; font-weight: 600; }
.prompt-card-header .pc-tag { font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; padding: 3px 10px; border-radius: 20px; background: rgba(255,255,255,0.15); }
.prompt-card-body { background: #1E1E2E; padding: 20px 24px; font-family: 'Fira Code', monospace; font-size: 12.5px; line-height: 1.85; color: #CDD6F4; white-space: pre-wrap; word-break: break-word; }
.prompt-card-body .ph { color: #F9E2AF; }
.prompt-card-body .comment { color: #6C7086; font-style: italic; }
.prompt-card-footer { background: var(--surface); border-top: 1px solid var(--rule); padding: 12px 20px; font-size: 12.5px; color: var(--ink-muted); display: flex; gap: 20px; flex-wrap: wrap; }
.prompt-card-footer span { display: flex; align-items: center; gap: 5px; }
.terminal { background: #0D1117; border-radius: 8px; overflow: hidden; margin: 20px 0; box-shadow: 0 2px 12px rgba(0,0,0,0.15); }
.terminal-bar { background: #21262D; padding: 10px 16px; display: flex; align-items: center; gap: 8px; }
.terminal-bar .dot { width: 12px; height: 12px; border-radius: 50%; }
.terminal-bar .dot.r { background: #FF5F57; }
.terminal-bar .dot.y { background: #FEBC2E; }
.terminal-bar .dot.g { background: #28C840; }
.terminal-bar .label { font-size: 12px; color: #8B949E; margin-left: 8px; font-family: 'Fira Code', monospace; }
.terminal-body { padding: 20px 22px; font-family: 'Fira Code', monospace; font-size: 13px; line-height: 1.9; color: #E6EDF3; white-space: pre-wrap; word-break: break-word; }
.terminal-body .prompt { color: #3FB950; }
.terminal-body .comment { color: #8B949E; }
.terminal-body .output { color: #79C0FF; }
.terminal-body .success { color: #3FB950; }
.terminal-body .error { color: #FF7B72; }
.terminal-body .dim { color: #8B949E; }
.code-block { background: #1E1E2E; border-radius: 8px; overflow: hidden; margin: 20px 0; }
.code-header { background: #313244; padding: 10px 18px; display: flex; justify-content: space-between; align-items: center; }
.code-header .code-title { font-family: 'Fira Code', monospace; font-size: 12px; color: #CDD6F4; }
.code-header .code-lang { font-size: 11px; color: #A6ADC8; background: #45475A; padding: 2px 8px; border-radius: 4px; }
.code-body { padding: 20px 22px; font-family: 'Fira Code', monospace; font-size: 12.5px; line-height: 1.85; color: #CDD6F4; white-space: pre-wrap; word-break: break-word; }
.code-body .kw { color: #CBA6F7; }
.code-body .fn { color: #89B4FA; }
.code-body .st { color: #A6E3A1; }
.code-body .cm { color: #6C7086; font-style: italic; }
.code-body .nu { color: #FAB387; }
.code-body .cl { color: #F9E2AF; }
.steps { counter-reset: step; margin: 24px 0; }
.step { display: flex; gap: 16px; margin-bottom: 20px; }
.step-num { counter-increment: step; display: flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; background: var(--brand); color: white; border-radius: 50%; font-weight: 700; font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.step-num::after { content: counter(step); }
.step-content h4 { font-size: 15px; font-weight: 600; color: var(--ink); margin-bottom: 6px; }
.step-content p { font-size: 14px; margin-bottom: 0; }
.workflow-steps { counter-reset: step; margin: 24px 0; }
.workflow-step { display: flex; gap: 16px; margin-bottom: 16px; }
.workflow-step::before { counter-increment: step; content: counter(step); display: flex; align-items: center; justify-content: center; min-width: 32px; height: 32px; background: var(--brand); color: white; border-radius: 50%; font-weight: 700; font-size: 14px; flex-shrink: 0; margin-top: 2px; }
.workflow-step-content h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 4px; }
.workflow-step-content p { font-size: 13.5px; margin: 0; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 20px 0; }
.compare-card { border-radius: 8px; padding: 18px 20px; border: 1px solid var(--rule); }
.compare-card .cc-title { font-size: 13px; font-weight: 700; margin-bottom: 12px; }
.compare-card ul { list-style: none; padding: 0; }
.compare-card ul li { font-size: 13.5px; padding: 4px 0 4px 22px; position: relative; color: var(--ink-soft); }
.compare-card.chat { background: var(--blue-bg); }
.compare-card.chat .cc-title { color: var(--blue); }
.compare-card.chat ul li::before { content: '💬'; position: absolute; left: 0; }
.compare-card.code { background: var(--green-bg); }
.compare-card.code .cc-title { color: var(--green); }
.compare-card.code ul li::before { content: '⚡'; position: absolute; left: 0; }
.file-tree { background: #1E1E2E; border-radius: 8px; padding: 14px 20px; font-family: 'Fira Code', monospace; font-size: 13px; line-height: 1.45; color: #CDD6F4; margin: 16px 0; }
.file-tree .file-tree-line { display: block; margin: 0; padding: 0; line-height: 1.45; }
.file-tree .file-tree-line + .file-tree-line { margin-top: 0; }
.file-tree .dir { color: #89B4FA; }
.file-tree .file { color: #A6E3A1; }
.file-tree .new { color: #F9E2AF; }
.file-tree .desc { color: #6C7086; font-style: italic; }
.claude-prompt { background: var(--brand-light); border: 1px solid #F0C898; border-left: 4px solid var(--brand); border-radius: 0 8px 8px 0; padding: 16px 20px; margin: 16px 0; font-size: 14px; color: var(--ink); font-style: italic; }
.claude-prompt::before { content: '💬 Say to Claude Code: '; font-style: normal; font-weight: 700; color: var(--brand); display: block; margin-bottom: 6px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.callout.warn { background: #FFF8EC; border: 1px solid #F5D58A; }
.callout.warn .icon::after { content: '⚠️'; }
.callout.purple { background: var(--purple-bg); border: 1px solid #C9B0E8; }
.callout.purple .icon::after { content: '🔖'; }
.callout.beginner { background: var(--purple-bg); border: 1px solid #C9B0E8; }
.callout.beginner .icon::after { content: '🎓'; }
.doc-footer .next-up a { color: var(--brand); text-decoration: none; }
.doc-footer .next-up a:hover { text-decoration: underline; }
.doc-footer .next-up strong { color: inherit; }

/* ── What Claude can do — capability grid ── */
.cap-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 24px 0;
}
.cap-card {
  border: 1px solid var(--rule); border-radius: 10px;
  padding: 18px 20px; background: var(--white);
  transition: border-color .2s;
}
.cap-card .cc-icon { font-size: 24px; margin-bottom: 10px; display: block; }
.cap-card .cc-title { font-size: 14px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.cap-card p { font-size: 13.5px; margin: 0; color: var(--ink-soft); line-height: 1.6; }

/* ── Before / After ── */
.transformation {
  background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; overflow: hidden; margin: 28px 0;
}
.transformation-header {
  background: var(--ink); color: white; padding: 12px 20px;
  font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
}
.transformation-body { display: grid; grid-template-columns: 1fr 1fr; }
.tr-col { padding: 20px 22px; }
.tr-col:first-child { border-right: 1px solid var(--rule); }
.tr-col .tr-label {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; margin-bottom: 14px;
}
.tr-col.before .tr-label { color: var(--ink-muted); }
.tr-col.after .tr-label { color: var(--green); }
.tr-col ul { list-style: none; padding: 0; }
.tr-col ul li {
  font-size: 13.5px; padding: 6px 0 6px 22px;
  position: relative; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule);
}
.tr-col ul li:last-child { border-bottom: none; }
.tr-col.before ul li::before { content: '→'; position: absolute; left: 0; color: var(--ink-muted); }
.tr-col.after ul li::before { content: '✓'; position: absolute; left: 0; color: var(--green); font-weight: 700; }

/* ── Time saving cards ── */
.time-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 24px 0; }
.time-card {
  background: var(--ink); border-radius: 10px; padding: 20px 18px; text-align: center;
}
.time-card .tc-task { font-size: 12px; color: rgba(255,255,255,0.55); margin-bottom: 10px; line-height: 1.4; }
.time-card .tc-before { font-size: 13px; color: rgba(255,255,255,0.4); text-decoration: line-through; margin-bottom: 4px; }
.time-card .tc-after { font-size: 22px; font-weight: 800; color: var(--brand); margin-bottom: 4px; }
.time-card .tc-label { font-size: 11px; color: rgba(255,255,255,0.4); }

/* ── Why Claude specifically ── */
.why-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; margin: 24px 0; }
.why-card {
  border-top: 3px solid var(--brand); background: var(--surface);
  border-radius: 0 0 8px 8px; padding: 16px 18px;
}
.why-card .wc-icon { font-size: 22px; margin-bottom: 8px; }
.why-card .wc-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 6px; }
.why-card p { font-size: 13px; color: var(--ink-soft); margin: 0; line-height: 1.55; }

/* ── Course map ── */
.course-map { margin: 28px 0; }
.track-header {
  display: flex; align-items: center; gap: 12px; margin-bottom: 12px; margin-top: 32px;
}
.track-label {
  font-size: 11px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; padding: 5px 14px; border-radius: 20px;
}
.track-label.efficiency { background: var(--blue-bg); color: var(--blue); border: 1px solid #C5D9F5; }
.track-label.build { background: var(--green-bg); color: var(--green); border: 1px solid #B0E0C8; }
.track-desc { font-size: 13px; color: var(--ink-muted); }

.tutorial-list { display: flex; flex-direction: column; gap: 8px; }
.tut-item {
  display: flex; gap: 0; border: 1px solid var(--rule);
  border-radius: 8px; overflow: hidden;
}
.tut-item .ti-week {
  min-width: 64px; background: var(--surface);
  border-right: 1px solid var(--rule);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--ink-muted);
  letter-spacing: .06em; text-transform: uppercase;
  flex-shrink: 0;
}
.tut-item .ti-num {
  min-width: 44px; display: flex; align-items: center; justify-content: center;
  font-size: 18px; font-weight: 800; flex-shrink: 0;
  border-right: 1px solid var(--rule);
}
.tut-item.efficiency .ti-num { color: var(--blue); background: var(--blue-bg); }
.tut-item.build .ti-num { color: var(--green); background: var(--green-bg); }
.tut-item .ti-body { padding: 12px 16px; flex: 1; }
.tut-item .ti-body h4 { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 3px; }
.tut-item .ti-body p { font-size: 12.5px; color: var(--ink-muted); margin: 0; }
.tut-item .ti-meta {
  padding: 12px 16px; display: flex; flex-direction: column;
  align-items: flex-end; justify-content: center; gap: 4px; flex-shrink: 0;
}
.tut-item .ti-duration { font-size: 11px; color: var(--ink-muted); white-space: nowrap; }
.tut-item .ti-audience {
  font-size: 10px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase;
  padding: 2px 8px; border-radius: 10px; white-space: nowrap;
}
.ti-audience.all { background: var(--purple-bg); color: var(--purple); }
.ti-audience.build { background: var(--green-bg); color: var(--green); }

/* ── How to use this guide ── */
.usage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 24px 0; }
.usage-card {
  border-radius: 8px; padding: 18px 20px;
  border: 1px solid var(--rule); background: var(--white);
}
.usage-card .uc-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 12px;
}
.usage-card .uc-icon { font-size: 22px; }
.usage-card .uc-title { font-size: 14px; font-weight: 700; color: var(--ink); }
.usage-card ul { list-style: none; padding: 0; }
.usage-card ul li {
  font-size: 13px; color: var(--ink-soft); padding: 4px 0 4px 18px;
  position: relative;
}
.usage-card ul li::before { content: '·'; position: absolute; left: 4px; color: var(--brand); font-weight: 700; font-size: 16px; top: 2px; }

/* ── What you'll need ── */
.needs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0; }
.need-card { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 16px; }
.need-card .nc-icon { font-size: 22px; margin-bottom: 8px; }
.need-card .nc-title { font-size: 13px; font-weight: 700; color: var(--ink); margin-bottom: 5px; }
.need-card p { font-size: 12.5px; margin: 0; color: var(--ink-soft); line-height: 1.5; }
.need-card .nc-required {
  font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin-top: 8px; padding: 2px 8px; border-radius: 10px; display: inline-block;
}
.nc-required.essential { background: var(--brand-light); color: var(--brand-dark); }
.nc-required.build-only { background: var(--green-bg); color: var(--green); }
.nc-required.optional { background: var(--surface); color: var(--ink-muted); border: 1px solid var(--rule); }

/* ── Callouts ── */
.callout { display: flex; gap: 14px; border-radius: 8px; padding: 16px 20px; margin: 24px 0; font-size: 14px; }
.callout .icon { font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.callout.info { background: var(--blue-bg); border: 1px solid #C5D9F5; }
.callout.info .icon::after { content: 'ℹ️'; }
.callout.tip { background: var(--green-bg); border: 1px solid #B0E0C8; }
.callout.tip .icon::after { content: '💡'; }
.callout p { margin: 0; color: var(--ink-soft); }
.callout strong { color: var(--ink); }

/* ── Footer ── */
.doc-footer {
  margin-top: 64px; padding: 24px 72px;
  border-top: 2px solid var(--rule);
  display: flex; justify-content: space-between;
  align-items: center; font-size: 12px; color: var(--ink-muted);
  background: var(--surface);
}
.doc-footer strong { color: var(--brand); }

@media print {
  body { background: white; }
  .cover { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cover-stats { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .time-card { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .tut-item .ti-num { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  h2 { page-break-after: avoid; }
  .cap-grid, .time-grid, .tutorial-list, .course-map { page-break-inside: avoid; }
  .content { padding: 48px 72px; }
}