/* ===== Base ===== */
:root {
  --ink: #1a1a1a;
  --ink-soft: #4a4a4a;
  --paper: #fafaf9;
  --rule: #e6e6e0;
  --accent: #6D28D9;            /* Consumer Safari violet */
  --accent-deep: #5b21b6;
  --accent-darker: #4c1d95;
  --accent-light: #a78bfa;
  --accent-soft: #ede9fe;
  --code-bg: #f5f3ff;
  --code-border: #ddd6fe;

  /* MMS OS palette */
  --green: #16a34a;
  --green-bg: #dcfce7;
  --blue: #2d5fa0;
  --blue-bg: #e8eef8;
  --purple: #8b5cf6;
  --purple-bg: #ede9fe;
  --orange: #c27a2a;
  --orange-bg: #faf0e0;
  --red: #c0392b;
  --red-bg: #fde8e6;

  --max-read: 820px;
  --toc-w: 260px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: Georgia, "Iowan Old Style", "Palatino", serif;
  line-height: 1.65;
  font-size: 18px;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; border-bottom: 1px solid transparent; }
a:hover { border-bottom-color: var(--accent); }

h1, h2, h3 {
  font-family: "Playfair Display SC", "Playfair Display", Georgia, serif;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.2;
}

h1 { font-size: 3.6rem; margin: 0 0 0.5rem; letter-spacing: 0.01em; color: var(--accent-deep); }
h2 { font-size: 1.95rem; margin: 3rem 0 0.75rem; letter-spacing: 0.01em; position: relative; padding-bottom: 0.5rem; color: var(--accent-deep); }
h2::after {
  content: '';
  display: block;
  width: 48px;
  height: 4px;
  margin-top: 0.6rem;
  background: linear-gradient(135deg, var(--accent), var(--accent-light));
  border-radius: 4px;
}
h3 { font-size: 1.3rem; margin: 2rem 0 0.6rem; font-family: -apple-system, "Helvetica Neue", Arial, sans-serif; letter-spacing: 0; }

/* Section accent variations: H2s in different sections get different colored lines */
section[id^="step-"] h2::after { background: linear-gradient(135deg, var(--accent), var(--accent-light)); }
#why h2::after, #what h2::after { background: linear-gradient(135deg, var(--purple), var(--accent-light)); }
#principles h2::after { background: linear-gradient(135deg, var(--orange), #e8a55a); }
#pre-build h2::after { background: linear-gradient(135deg, var(--blue), #6b8fc7); }
#tips h2::after { background: linear-gradient(135deg, var(--green), #5fc88a); }
#best-practices h2::after { background: linear-gradient(135deg, var(--accent), var(--accent-light)); }
#troubleshooting h2::after { background: linear-gradient(135deg, var(--red), #e07566); }
#comparison h2::after { background: linear-gradient(135deg, var(--blue), #6b8fc7); }
#glossary h2::after { background: linear-gradient(135deg, var(--ink-soft), #8a8a8a); }
#jane-doe h2::after { background: linear-gradient(135deg, var(--accent), var(--accent-light)); }

/* ===== Principle callouts ===== */
.principle {
  background: var(--orange-bg);
  border-left: 4px solid var(--orange);
  border-radius: 4px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem 0;
}
.principle:nth-of-type(2) {
  background: var(--purple-bg);
  border-left-color: var(--accent);
}
.principle .label {
  display: inline-block;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  background: var(--orange);
  color: white;
  margin-bottom: 0.6rem;
}
.principle:nth-of-type(2) .label { background: var(--accent); }
.principle h4 {
  font-family: "Playfair Display SC", "Playfair Display", Georgia, serif;
  font-size: 1.15rem;
  margin: 0.4rem 0 0.6rem;
  color: var(--ink);
}
.principle p { margin-bottom: 0; }

/* ===== Step badges ===== */
.step-badge {
  display: inline-block;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 0.7rem;
  border-radius: 100px;
  background: var(--accent-soft);
  color: var(--accent-deep);
  margin-bottom: 0.75rem;
}
section[id^="step-1"] .step-badge { background: var(--green-bg); color: var(--green); }
section[id^="step-2"] .step-badge { background: var(--blue-bg); color: var(--blue); }
section[id^="step-3"] .step-badge { background: var(--accent-soft); color: var(--accent-deep); }
section[id^="step-4"] .step-badge { background: var(--orange-bg); color: var(--orange); }
section[id^="step-5"] .step-badge { background: var(--red-bg); color: var(--red); }
section[id^="step-6"] .step-badge { background: var(--purple-bg); color: var(--purple); }
section[id^="step-7"] .step-badge { background: var(--green-bg); color: var(--green); }

/* ===== Co-founder cards in Step 4 ===== */
.cofounder {
  background: white;
  border: 1px solid var(--rule);
  border-left: 5px solid var(--accent);
  border-radius: 8px;
  padding: 1.5rem;
  margin: 1.5rem 0;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.cofounder.cof-cos { border-left-color: var(--green); }
.cofounder.cof-cfo { border-left-color: var(--orange); }
.cofounder.cof-research { border-left-color: var(--blue); }
.cofounder.cof-marketing { border-left-color: var(--accent); }
.cofounder.cof-sales { border-left-color: var(--red); }
.cofounder.cof-legal { border-left-color: var(--purple); }
.cofounder h3 { margin-top: 0; }
.cof-tag {
  display: inline-block;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.6rem;
  border-radius: 100px;
  margin-bottom: 0.5rem;
}
.cof-cos .cof-tag { background: var(--green-bg); color: var(--green); }
.cof-cfo .cof-tag { background: var(--orange-bg); color: var(--orange); }
.cof-research .cof-tag { background: var(--blue-bg); color: var(--blue); }
.cof-marketing .cof-tag { background: var(--accent-soft); color: var(--accent-deep); }
.cof-sales .cof-tag { background: var(--red-bg); color: var(--red); }
.cof-legal .cof-tag { background: var(--purple-bg); color: var(--purple); }

/* ===== Numbered best-practices ===== */
.practice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  margin: 1.25rem 0;
}
.practice-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-weight: 800;
  font-size: 1rem;
  color: white;
  background: var(--accent);
}
.practice:nth-of-type(8n+1) .practice-num { background: var(--accent); }
.practice:nth-of-type(8n+2) .practice-num { background: var(--green); }
.practice:nth-of-type(8n+3) .practice-num { background: var(--blue); }
.practice:nth-of-type(8n+4) .practice-num { background: var(--orange); }
.practice:nth-of-type(8n+5) .practice-num { background: var(--red); }
.practice:nth-of-type(8n+6) .practice-num { background: var(--purple); }
.practice:nth-of-type(8n+7) .practice-num { background: var(--accent-deep); }
.practice:nth-of-type(8n+0) .practice-num { background: var(--ink-soft); }
.practice-body { flex: 1; }
.practice-body p { margin-bottom: 0; }

p { margin: 0 0 1.1rem; }
ul { margin: 0 0 1.1rem; padding-left: 1.4rem; }
li { margin-bottom: 0.4rem; }

code {
  font-family: "SF Mono", "JetBrains Mono", Consolas, Menlo, monospace;
  font-size: 0.92em;
  background: var(--code-bg);
  padding: 0.1em 0.35em;
  border-radius: 3px;
}

/* ===== Top bar ===== */
.top-bar {
  position: sticky;
  top: 0;
  z-index: 900;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--accent-soft);
}
.top-bar-inner {
  max-width: 1320px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  padding: 0 2rem;
}
.top-bar-logo {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
}
.top-bar-logo strong {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--accent-deep);
  letter-spacing: -0.01em;
}
.top-bar-sub {
  font-family: "Playfair Display SC", "Playfair Display", Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--accent);
  font-weight: 400;
}
.top-bar-links {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.top-bar-links a {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--ink-soft);
  border: 0;
  transition: color 0.15s;
}
.top-bar-links a:hover { color: var(--accent-deep); border: 0; }
.top-bar-links a.top-bar-cta {
  background: var(--accent);
  color: white;
  padding: 0.45rem 0.95rem;
  border-radius: 100px;
  font-weight: 600;
}
.top-bar-links a.top-bar-cta:hover { background: var(--accent-deep); color: white; }

/* ===== Layout ===== */
main {
  margin-left: var(--toc-w);
  padding: 2.5rem 3rem 6rem;
}

.hero, article, footer, #capture {
  max-width: var(--max-read);
  margin-left: auto;
  margin-right: auto;
}

article section {
  scroll-margin-top: 1.5rem;
}

/* ===== Hero ===== */
.hero {
  background: white;
  border-bottom: 1px solid var(--accent-soft);
  padding: 2.5rem 0 2.5rem;
  margin: 0 auto 2.5rem;
}
.hero h1 { color: var(--accent-deep); }
.hero h1::after { display: none; }
.hero .lede { color: var(--ink-soft); }
.kicker {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--accent-deep);
  margin-bottom: 1rem;
  font-weight: 600;
}
.kicker a { color: inherit; text-decoration: none; border: 0; border-bottom: 1px solid var(--accent-soft); }
.kicker a:hover { border-bottom-color: var(--accent); }
.title-2 {
  font-family: "Playfair Display SC", "Playfair Display", Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--accent);
  margin: 0 0 1.25rem;
  letter-spacing: 0.01em;
}
.lede {
  font-size: 1.2rem;
  color: var(--ink-soft);
  margin-bottom: 1.75rem;
  max-width: 580px;
}
.cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 0.7rem 1.2rem;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
.btn-primary { background: var(--accent); color: white; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-secondary { background: white; color: var(--accent-deep); border-color: var(--accent); }
.btn-secondary:hover { background: var(--accent-soft); }
.btn-tertiary { background: transparent; color: var(--ink-soft); border-color: var(--rule); }
.btn-tertiary:hover { color: var(--accent-deep); border-color: var(--accent); }
.btn { border-bottom: 1px solid transparent; } /* override default link border */
a.btn:hover { border-bottom-color: transparent; }

/* ===== Prompt blocks (the copy-paste boxes) ===== */
pre.prompt {
  position: relative;
  background: var(--code-bg);
  border: 1px solid var(--code-border);
  border-radius: 6px;
  padding: 1.1rem 1.2rem;
  padding-right: 5.5rem;
  margin: 1.2rem 0;
  overflow-x: auto;
  font-family: "SF Mono", "JetBrains Mono", Consolas, Menlo, monospace;
  font-size: 0.88rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-wrap: break-word;
}
pre.prompt code { background: transparent; padding: 0; font-size: inherit; }
pre.prompt .copy-btn {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  padding: 0.35rem 0.7rem;
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  background: white;
  color: var(--ink);
  border: 1px solid var(--code-border);
  border-radius: 4px;
  cursor: pointer;
  min-height: 32px;
  min-width: 64px;
}
pre.prompt .copy-btn:hover { background: var(--ink); color: white; border-color: var(--ink); }
pre.prompt .copy-btn.copied { background: var(--accent); color: white; border-color: var(--accent); }

/* ===== Sidebar TOC ===== */
.toc {
  position: fixed;
  top: 60px;
  left: 0;
  width: var(--toc-w);
  height: calc(100vh - 60px);
  border-right: 1px solid var(--rule);
  background: var(--paper);
  overflow-y: auto;
  padding: 2.5rem 1.5rem;
}
.toc h2 {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  margin: 0 0 1rem;
  font-weight: 700;
}
.toc nav { display: flex; flex-direction: column; gap: 0.4rem; }
.toc nav a {
  font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
  font-size: 0.92rem;
  color: var(--ink-soft);
  border-bottom: none;
  line-height: 1.4;
}
.toc nav a:hover, .toc nav a.active { color: var(--accent); }

.nav-toggle { display: none; }

/* ===== Capture / footer ===== */
.capture {
  margin-top: 4rem;
  padding: 2.5rem;
  background: var(--accent-soft);
  border-radius: 8px;
}
.capture h2 { margin-top: 0; }
.capture-form { display: flex; gap: 0.75rem; flex-wrap: wrap; margin-top: 1rem; }
.capture-form input[type="email"] {
  flex: 1 1 240px;
  padding: 0.7rem 1rem;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--ink-soft);
  border-radius: 4px;
}
.capture-form input[type="email"]:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.feedback-line { font-size: 0.95rem; color: var(--ink-soft); margin-top: 1.25rem; margin-bottom: 0; }

footer {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule);
  font-size: 0.92rem;
  color: var(--ink-soft);
}

.signature {
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 2rem;
}

/* ===== Print ===== */
@media print {
  .toc, .nav-toggle, .top-bar { display: none !important; }
  main { margin-left: 0; padding: 0; }
  .hero, article, footer, #capture {
    max-width: 100%;
    margin: 0;
  }
  .hero { padding: 0 0 1rem; border-bottom: 2px solid var(--accent); page-break-after: avoid; }
  .hero h1 { font-size: 2.6rem; }
  .title-2 { font-size: 1.6rem; }
  .cta-row { display: none; }
  h2 { page-break-after: avoid; }
  section { page-break-inside: avoid; }
  pre.prompt { page-break-inside: avoid; font-size: 0.78rem; }
  pre.prompt .copy-btn { display: none; }
  .principle, .cofounder { page-break-inside: avoid; }
  #capture, footer { page-break-before: avoid; }
  body { font-size: 11pt; line-height: 1.5; }
  a { color: var(--accent-deep); text-decoration: none; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.75em; color: var(--ink-soft); }
  a[href^="#"]::after, .kicker a::after, .btn::after { content: ""; }
}

/* ===== Mobile ===== */
@media (max-width: 900px) {
  main { margin-left: 0; padding: 1.5rem; }
  h1 { font-size: 2.6rem; }
  .title-2 { font-size: 1.6rem; }
  .toc { display: none; }
  .toc.open { display: block; z-index: 1000; box-shadow: 0 0 30px rgba(0,0,0,0.1); }
  .nav-toggle {
    display: block;
    position: fixed;
    top: 1rem;
    right: 1rem;
    z-index: 1001;
    background: var(--ink);
    color: white;
    border: none;
    padding: 0.6rem 0.9rem;
    border-radius: 4px;
    font-family: -apple-system, "Helvetica Neue", Arial, sans-serif;
    font-size: 0.9rem;
    cursor: pointer;
  }
}