/* ============================================================
   MR Stash - CONTENT PAGE STYLES (privacy, terms, etc.)
   Loaded after theme.css + styles.css. Reuses the same tokens.
   ============================================================ */

.page-hero {
  padding: 84px 0 40px;
  border-bottom: 1px solid var(--hair);
  position: relative;
  overflow: hidden;
}
.page-hero .hero-grid {
    pointer-events: none;
    mask-image: radial-gradient(ellipse 70% 80% at 30% 0%, #000 10%, transparent 70%);
}

.page-eyebrow {
  font-family: var(--font-mono); font-size: 12.5px;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--toad-bright);
  display: inline-flex; align-items: center; gap: 10px;
  margin-bottom: 22px; position: relative; z-index: 2;
}
.page-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--toad); }
.page-title {
  position: relative; z-index: 2;
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(34px, 5.4vw, 60px); line-height: 1.0;
  letter-spacing: -0.03em; margin-bottom: 16px;
}
.page-updated {
  position: relative; z-index: 2;
  font-family: var(--font-mono); font-size: 13px; color: var(--paper-dim);
}

.prose { max-width: 720px; padding: 56px 0 90px; }
.prose .lede {
  font-size: 20px; line-height: 1.55; color: var(--paper);
  margin-bottom: 40px;
}
.prose h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: 24px; letter-spacing: -0.015em;
  margin: 40px 0 14px;
}
.prose h2:first-child { margin-top: 0; }
.prose p { color: var(--paper-dim); font-size: 16px; margin-bottom: 16px; }
.prose p strong { color: var(--paper); font-weight: 600; }
.prose ul { list-style: none; margin: 8px 0 20px; display: grid; gap: 12px; }
.prose li {
  display: flex; gap: 12px; align-items: flex-start;
  color: var(--paper-dim); font-size: 16px;
}
.prose li svg { flex: none; margin-top: 4px; }
.prose a { color: var(--toad-bright); text-decoration: underline; text-underline-offset: 3px; }
.prose a:hover { color: var(--paper); }

.callout {
  border: 1px solid var(--toad-deep);
  border-radius: 12px;
  background:
    radial-gradient(120% 160% at 0% 0%, rgba(105,148,69,0.12), transparent 60%),
    var(--ink-2);
  padding: 28px 30px;
  margin: 36px 0;
}
.callout p { color: var(--paper); margin: 0; font-size: 17px; }

.back-link {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 13px;
  color: var(--paper-dim); margin-top: 8px;
}
.back-link:hover { color: var(--toad-bright); }

/* ============================================================
   GETTING STARTED - steps, code blocks, notes
   ============================================================ */

/* In-page section nav (sticky table of contents) */
.guide-layout { display: grid; grid-template-columns: 220px 1fr; gap: 56px; align-items: start; padding: 56px 0 100px; }
.guide-toc { position: sticky; top: 90px; }
.guide-toc h4 {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--toad-bright); margin-bottom: 14px;
}
.guide-toc ol { list-style: none; display: grid; gap: 2px; counter-reset: toc; }
.guide-toc a {
  display: block; padding: 7px 12px; border-radius: 6px;
  font-size: 14px; color: var(--paper-dim);
  border-left: 2px solid transparent; transition: all .15s;
}
.guide-toc a:hover { color: var(--paper); background: var(--ink-2); border-left-color: var(--toad); }

.guide-body { max-width: 760px; min-width: 0; }
.guide-body .lede { font-size: 19px; line-height: 1.55; color: var(--paper); margin-bottom: 14px; }

/* Numbered step blocks */
.gstep { display: grid; grid-template-columns: 46px 1fr; gap: 22px; padding: 30px 0; border-top: 1px solid var(--hair); }
.gstep:first-of-type { border-top: none; }
.gstep-num {
  width: 46px; height: 46px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 700; font-size: 19px;
  color: var(--toad-bright); background: var(--ink-2);
  border: 1px solid var(--toad-deep);
}
.gstep-body { min-width: 0; }
.gstep-body h2 {
  font-family: var(--font-display); font-weight: 600; font-size: 23px;
  letter-spacing: -0.015em; margin: 6px 0 12px;
}
.gstep-body p { color: var(--paper-dim); font-size: 16px; margin-bottom: 14px; }
.gstep-body p strong { color: var(--paper); font-weight: 600; }
.gstep-body ul { list-style: none; margin: 6px 0 16px; display: grid; gap: 10px; }
.gstep-body li { display: flex; gap: 11px; align-items: flex-start; color: var(--paper-dim); font-size: 15.5px; }
.gstep-body li svg { flex: none; margin-top: 4px; }

/* Code blocks with copy button */
.code-block { position: relative; margin: 16px 0 20px; }
.code-block pre {
  background: #0a0d07; border: 1px solid var(--hair); border-radius: 10px;
  padding: 18px 20px; overflow-x: auto;
  font-family: var(--font-mono); font-size: 13.5px; line-height: 1.7;
  color: #cdd9c0;
}
.code-block pre .cm { color: #6f8358; }          /* comment */
.code-block pre .ad { color: var(--toad-bright); }/* added/highlight line */
.code-block pre .ky { color: var(--lens-blue); }  /* key/keyword */
.code-block .copy-btn {
  position: absolute; top: 10px; right: 10px;
  font-family: var(--font-mono); font-size: 11px;
  color: var(--paper-dim); background: var(--ink-2);
  border: 1px solid var(--hair); border-radius: 5px;
  padding: 5px 10px; cursor: pointer; transition: all .15s;
}
.code-block .copy-btn:hover { color: var(--toad-bright); border-color: var(--toad-deep); }
.code-block .copy-btn.copied { color: var(--toad-bright); border-color: var(--toad); }
.code-inline {
  font-family: var(--font-mono); font-size: 0.9em;
  background: var(--ink-2); border: 1px solid var(--hair);
  border-radius: 4px; padding: 1px 6px; color: var(--toad-bright);
}

/* Note / tip / warning callouts */
.note {
  border-radius: 10px; padding: 16px 20px; margin: 18px 0;
  font-size: 15px; border: 1px solid var(--hair); background: var(--ink-2);
  display: flex; gap: 13px; align-items: flex-start;
}
.note svg { flex: none; margin-top: 2px; }
.note p { margin: 0; color: var(--paper-dim); font-size: 15px; }
.note p strong { color: var(--paper); }
.note.tip    { border-color: var(--toad-deep);  background: radial-gradient(120% 200% at 0% 0%, rgba(105,148,69,.10), transparent 60%), var(--ink-2); }
.note.warn   { border-color: #6b4a1e;           background: radial-gradient(120% 200% at 0% 0%, rgba(197,140,49,.12), transparent 60%), var(--ink-2); }

@media (max-width: 820px) {
  .guide-layout { grid-template-columns: 1fr; gap: 0; }
  .guide-toc { display: none; }
}