/* Cocolytics resource/blog docs — editorial, readable, on-brand. */
:root {
  --bg:#f8f4ef; --bg-warm:#f1e9dd; --bg-card:#fff; --bg-muted:#fdf9f5;
  --border:rgba(160,110,60,0.14); --border-strong:rgba(160,110,60,0.22);
  --text-primary:#1c1108; --text-secondary:#4f3a28; --text-muted:#a8876a;
  --green:#1e6e44; --green-dark:#175a38; --green-light:#e6f4ec; --green-border:#aedcc2; --husk:#8b5c2a;
}
* { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--text-primary);
  font-family:"DM Sans","Segoe UI",sans-serif; line-height:1.5; -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(circle, rgba(160,110,60,0.05) 1px, transparent 1px); background-size:28px 28px;
}
a { text-decoration:none; }

.topbar {
  position:sticky; top:0; z-index:50; display:flex; align-items:center; justify-content:space-between;
  gap:12px; padding:14px 32px; background:rgba(248,244,239,0.85);
  backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border);
}
.wordmark { font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:21px; letter-spacing:-0.01em; }
.wordmark .coco { color:var(--text-primary); } .wordmark .lytics { color:var(--green); }
.actions { display:flex; align-items:center; gap:10px; }
.back-link { font-size:13.5px; color:var(--text-secondary); }
.back-link:hover { color:var(--green); }
.btn { background:var(--green); color:#fff; font-weight:600; font-size:13.5px; padding:9px 17px; border-radius:9px; transition:background .15s, transform .15s, box-shadow .15s; }
.btn:hover { background:var(--green-dark); transform:translateY(-1px); box-shadow:0 8px 22px rgba(30,110,68,.24); }
.btn-outline { color:var(--text-primary); font-weight:600; font-size:13.5px; padding:8px 15px; border-radius:9px; border:1.5px solid var(--border-strong); transition:border-color .15s, background .15s; }
.btn-outline:hover { border-color:var(--husk); background:rgba(139,92,42,0.06); }

.page { padding:30px 32px 80px; }
.shell { max-width:1080px; margin:0 auto; }
.crumbs { font-family:"DM Mono",ui-monospace,monospace; font-size:12.5px; color:var(--text-muted); margin:6px 0 26px; }
.crumbs a { color:var(--text-muted); } .crumbs a:hover { color:var(--green); }
.crumbs .sep { margin:0 8px; opacity:.6; } .crumbs .here { color:var(--text-secondary); }

.doc-layout { display:grid; grid-template-columns:232px minmax(0,1fr); gap:56px; align-items:start; }
.toc-wrap { position:sticky; top:88px; }
.toc-label { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
.toc { display:flex; flex-direction:column; border-left:1px solid var(--border); }
.toc a { display:block; padding:7px 0 7px 16px; margin-left:-1px; border-left:2px solid transparent; color:var(--text-muted); font-size:13px; line-height:1.4; transition:color .15s, border-color .15s; }
.toc a:hover { color:var(--text-primary); }
.toc a.active { color:var(--green); border-left-color:var(--green); font-weight:600; }
.toc-cta { margin-top:22px; padding:16px; border:1px solid var(--green-border); border-radius:12px; background:var(--green-light); }
.toc-cta p { font-size:12.5px; color:var(--text-secondary); margin-bottom:10px; }
.toc-cta a { color:var(--green); font-size:13px; font-weight:700; }

.doc-article { background:var(--bg-card); border:1px solid var(--border); border-radius:20px; box-shadow:0 4px 24px rgba(120,70,20,0.06); padding:44px 52px 40px; }
.cover { display:block; width:100%; height:auto; aspect-ratio:1200/630; border-radius:14px; margin:0 0 30px; border:1px solid var(--border); }
.doc-body { max-width:680px; }
.eyebrow { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--green); margin-bottom:12px; }
h1 { font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:clamp(30px,4.2vw,42px); line-height:1.1; letter-spacing:-0.02em; margin-bottom:14px; }
.byline { font-size:12.5px; color:var(--text-muted); margin-bottom:24px; font-family:"DM Mono",monospace; }
.lede { font-size:17px; line-height:1.7; color:var(--text-secondary); margin-bottom:8px; }

.doc-body h2 { font-family:"Fraunces",Georgia,serif; font-weight:600; font-size:24px; line-height:1.25; letter-spacing:-0.01em; margin:42px 0 14px; padding-top:28px; border-top:1px solid var(--border); scroll-margin-top:96px; }
.doc-body h3 { font-size:17px; font-weight:600; margin:26px 0 8px; scroll-margin-top:96px; }
.doc-body p { font-size:16.5px; line-height:1.8; color:var(--text-secondary); margin:0 0 16px; }
.doc-body ul, .doc-body ol { margin:0 0 18px; padding:0; list-style:none; counter-reset:step; }
.doc-body li { position:relative; padding-left:28px; margin:0 0 10px; font-size:16px; line-height:1.7; color:var(--text-secondary); }
.doc-body ul > li::before { content:""; position:absolute; left:6px; top:11px; width:6px; height:6px; border-radius:50%; background:var(--husk); }
.doc-body ol > li { padding-left:40px; }
.doc-body ol > li::before { counter-increment:step; content:counter(step); position:absolute; left:0; top:-1px; width:26px; height:26px; display:flex; align-items:center; justify-content:center; background:var(--green-light); color:var(--green); border:1px solid var(--green-border); border-radius:50%; font-family:"DM Mono",monospace; font-size:12px; font-weight:500; }
.doc-body a { color:var(--green); text-decoration:underline; text-decoration-color:var(--green-border); text-underline-offset:2px; }
.doc-body a:hover { color:var(--green-dark); text-decoration-color:var(--green); }
.doc-body strong { color:var(--text-primary); font-weight:600; }
.doc-body code { font-family:"DM Mono",monospace; font-size:.85em; background:var(--bg-warm); border:1px solid var(--border); border-radius:6px; padding:2px 6px; color:var(--husk); }

.callout { background:var(--green-light); border:1px solid var(--green-border); border-radius:12px; padding:16px 20px; margin:22px 0; }
.callout p { margin:0; font-size:15px; color:#25403a; }

.faq { margin-top:14px; }
.faq details { border-top:1px solid var(--border); padding:14px 0; }
.faq summary { cursor:pointer; font-weight:600; font-size:16px; color:var(--text-primary); list-style:none; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; color:var(--green); font-family:"DM Mono",monospace; }
.faq details[open] summary::after { content:"\2212"; }
.faq p { margin:10px 0 0; font-size:15.5px; line-height:1.72; color:var(--text-secondary); }

.related { margin-top:44px; padding-top:28px; border-top:1px solid var(--border); }
.related h4 { font-family:"DM Mono",monospace; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--text-muted); margin-bottom:14px; }
.related-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.related-card { display:block; padding:16px 18px; border:1px solid var(--border); border-radius:12px; background:var(--bg-muted); transition:border-color .15s, transform .15s, box-shadow .15s; }
.related-card:hover { border-color:var(--green-border); transform:translateY(-2px); box-shadow:0 8px 20px rgba(120,70,20,.08); }
.related-card .rc-title { display:block; font-weight:700; color:var(--green); font-size:14.5px; margin-bottom:3px; }
.related-card .rc-desc { display:block; color:var(--text-muted); font-size:12.5px; line-height:1.5; }

@media (max-width:900px) {
  .doc-layout { grid-template-columns:1fr; gap:8px; }
  .toc-wrap { position:static; margin-bottom:8px; } .toc { flex-direction:row; flex-wrap:wrap; border-left:none; gap:4px 14px; }
  .toc a { border-left:none; padding:4px 0; } .toc-cta { display:none; } .related-grid { grid-template-columns:1fr; }
}
@media (max-width:600px) { .topbar { padding:12px 16px; } .back-link { display:none; } .page { padding:20px 14px 48px; } .doc-article { padding:24px 20px; } h1 { font-size:27px; } }