/* ============================================================
 *  Save Your Clicks — Build Diaries (minimal article template)
 *  Scoped to .bd-article — does not affect anything else.
 *  Brand-aligned with the homepage (Inter, slate + blue + violet).
 * ============================================================ */

.bd-article{
  --bg:#ffffff;
  --bg-alt:#f8fafc;
  --bg-dark:#0a0f1e;
  --primary:#3b82f6;
  --primary-dark:#2563eb;
  --accent:#8b5cf6;
  --gradient:linear-gradient(135deg,#3b82f6,#8b5cf6);
  --text:#0f172a;
  --text-2:#475569;
  --text-muted:#94a3b8;
  --text-light:#f1f5f9;
  --border:#e2e8f0;
  --border-strong:#cbd5e1;
  --good:#16a34a;
  --good-bg:#dcfce7;
  --warn:#dc2626;
  --warn-bg:#fee2e2;
  --code-bg:#f1f5f9;
  --radius:12px;
  --radius-lg:16px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --shadow:0 4px 12px rgba(15,23,42,.06);
  --shadow-lift:0 12px 32px rgba(15,23,42,.08);
  --ease:cubic-bezier(.22,1,.36,1);

  font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;
  color:var(--text);
  background:var(--bg);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  font-weight:400;
}

.bd-article *,.bd-article *::before,.bd-article *::after{box-sizing:border-box}
.bd-article p{margin:0 0 1em}
.bd-article p:last-child{margin-bottom:0}
.bd-article a{color:var(--primary-dark);text-decoration:none;transition:color .15s var(--ease)}
.bd-article a:hover{color:var(--primary)}
.bd-article code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.92em;background:var(--code-bg);color:var(--text);padding:.1em .4em;border-radius:4px;border:1px solid var(--border)}
.bd-article em{font-style:normal;color:var(--primary-dark);font-weight:600}

.bd-container{max-width:920px;margin:0 auto;padding:0 24px}

/* ── Hero ─────────────────────────────────────────────────── */
.bd-article .bd-hero{
  background:var(--bg-dark);
  color:var(--text-light);
  padding:96px 0 80px;
  position:relative;
  overflow:hidden;
}
.bd-article .bd-hero::before{
  content:'';position:absolute;inset:0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(59,130,246,.18), transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 90%, rgba(139,92,246,.14), transparent 60%);
  pointer-events:none;
}
.bd-article .bd-hero > .bd-container{position:relative;z-index:1}
.bd-article .bd-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 14px;margin-bottom:28px;
  background:rgba(59,130,246,.1);border:1px solid rgba(59,130,246,.25);
  border-radius:50px;
  font-size:13px;font-weight:500;color:#93c5fd;
}
.bd-article .bd-eyebrow time{color:var(--text-muted);font-weight:400}
.bd-article .bd-dot{width:6px;height:6px;border-radius:50%;background:#22c55e;animation:bd-pulse 2s ease-in-out infinite}
@keyframes bd-pulse{0%,100%{opacity:1}50%{opacity:.4}}

.bd-article .bd-hero h1,
.bd-article .bd-hero .bd-hero-title{
  font-size:clamp(32px,5.5vw,56px);
  font-weight:800;letter-spacing:-.025em;line-height:1.1;
  color:var(--text-light);
  margin:0 0 20px;
  display:block;
}
.bd-article .bd-grad{
  background:var(--gradient);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}
.bd-article .bd-lead{
  font-size:18px;color:var(--text-muted);line-height:1.7;
  max-width:680px;margin:0 0 40px;
}

.bd-article .bd-stats{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;
  padding-top:32px;border-top:1px solid rgba(255,255,255,.08);
  margin:0;
}
.bd-article .bd-stats > div{display:flex;flex-direction:column-reverse;gap:4px}
.bd-article .bd-stats dt{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0}
.bd-article .bd-stats dd{font-size:28px;font-weight:800;color:var(--text-light);margin:0;letter-spacing:-.02em}

/* ── TOC ──────────────────────────────────────────────────── */
.bd-article .bd-toc{
  background:var(--bg-alt);
  border-bottom:1px solid var(--border);
  padding:20px 0;
  position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(180%) blur(8px);
}
.bd-article .bd-toc ol{
  list-style:none;padding:0;margin:0;
  display:flex;flex-wrap:wrap;gap:6px 4px;
  font-size:13px;
}
.bd-article .bd-toc li::before{content:'·';color:var(--text-muted);margin-right:4px}
.bd-article .bd-toc li:first-child::before{content:''}
.bd-article .bd-toc a{
  color:var(--text-2);font-weight:500;
  padding:4px 8px;border-radius:6px;
  display:inline-block;
}
.bd-article .bd-toc a:hover{background:var(--bg);color:var(--primary-dark)}

/* ── Section base ─────────────────────────────────────────── */
.bd-article .bd-section{padding:88px 0;border-top:1px solid var(--border)}
.bd-article .bd-section-alt{background:var(--bg-alt)}
.bd-article .bd-section-header{margin-bottom:48px;max-width:760px}
.bd-article .bd-section-num{
  font-family:ui-monospace,monospace;font-size:13px;color:var(--primary);
  letter-spacing:.05em;text-transform:uppercase;font-weight:600;
  margin:0 0 12px;
}
.bd-article .bd-section h2{
  font-size:clamp(28px,4.2vw,40px);
  font-weight:800;letter-spacing:-.022em;line-height:1.15;
  margin:0 0 16px;color:var(--text);
}
.bd-article .bd-section h2 em{color:var(--primary-dark);font-weight:800}
.bd-article .bd-section-lead{font-size:17px;color:var(--text-2);line-height:1.7;margin:0}

/* ── Compare cards (section 01) ───────────────────────────── */
.bd-article .bd-compare{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
  margin-bottom:24px;
}
.bd-article .bd-compare-card{
  background:var(--bg);border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;text-align:left;
  cursor:pointer;font:inherit;color:inherit;width:100%;
  transition:all .25s var(--ease);
}
.bd-article .bd-section-alt .bd-compare-card{background:#fff}
.bd-article .bd-compare-card:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-lift)}
.bd-article .bd-compare-card.bd-active{border-color:var(--primary);background:linear-gradient(135deg,#eff6ff,#faf5ff)}
.bd-article .bd-compare-card .bd-tag{font-size:12px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;margin:0 0 12px;font-weight:600}
.bd-article .bd-compare-card.bd-active .bd-tag{color:var(--primary)}
.bd-article .bd-compare-card h3{font-size:22px;font-weight:700;margin:0 0 8px;line-height:1.25}
.bd-article .bd-compare-card p{font-size:15px;color:var(--text-2);margin:0;line-height:1.6}
.bd-article .bd-compare-meta{font-size:15px;color:var(--text-2);text-align:center;font-style:italic;margin-top:8px}

/* ── Bug grid (section 02) ────────────────────────────────── */
.bd-article .bd-bug-grid{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;
}
.bd-article .bd-bug-card{
  display:block;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;color:inherit;
  transition:all .25s var(--ease);
}
.bd-article .bd-bug-card:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-lift);color:inherit}
.bd-article .bd-bug-tag{
  display:inline-block;font-size:12px;font-weight:700;color:var(--primary);
  background:#eff6ff;padding:4px 10px;border-radius:6px;
  margin:0 0 14px;letter-spacing:.02em;
}
.bd-article .bd-bug-card h3{font-size:21px;font-weight:700;margin:0 0 10px;line-height:1.25}
.bd-article .bd-bug-card p{font-size:15px;color:var(--text-2);margin:0;line-height:1.65}

/* ── Path picker (Bug 01) ─────────────────────────────────── */
.bd-article .bd-paths{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;
  margin-bottom:20px;
}
.bd-article .bd-path{
  background:#fff;border:2px solid var(--border);border-radius:var(--radius);
  padding:20px;text-align:left;font:inherit;color:inherit;width:100%;cursor:pointer;
  transition:all .2s var(--ease);
}
.bd-article .bd-path:hover{border-color:var(--primary)}
.bd-article .bd-path.bd-active{background:var(--text);color:var(--text-light);border-color:var(--text)}
.bd-article .bd-path-label{font-size:11px;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em;font-weight:600;margin:0 0 6px}
.bd-article .bd-path.bd-active .bd-path-label{color:#93c5fd}
.bd-article .bd-path h3{font-size:16px;font-weight:600;margin:0;line-height:1.3}
.bd-article .bd-path h3 code{background:rgba(255,255,255,.1);border-color:transparent;color:inherit}
.bd-article .bd-path:not(.bd-active) h3 code{background:var(--code-bg);border:1px solid var(--border)}

.bd-article .bd-path-result .bd-empty,
.bd-article .bd-tab-panel .bd-empty,
.bd-article .bd-path-result > p{
  background:#fff;border:1px dashed var(--border-strong);border-radius:var(--radius);
  padding:24px;text-align:center;color:var(--text-muted);font-size:15px;font-style:italic;margin:0;
}
.bd-article .bd-path-card{
  background:#fff;border:1px solid var(--border);border-left:4px solid var(--border);
  border-radius:var(--radius);padding:24px;
}
.bd-article .bd-path-card.bd-bad{border-left-color:var(--warn)}
.bd-article .bd-path-card.bd-good{border-left-color:var(--good)}
.bd-article .bd-path-flow{font-size:14px;color:var(--text-2);margin:0 0 12px;font-family:ui-monospace,monospace;line-height:1.7}
.bd-article .bd-path-flow span{margin:0 8px;color:var(--text-muted)}

/* ── Slider (Bug 02) ──────────────────────────────────────── */
.bd-article .bd-ratio{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;margin-bottom:20px;
}
.bd-article .bd-ratio-display{
  font-size:clamp(28px,4vw,42px);font-weight:800;letter-spacing:-.02em;
  color:var(--text);margin-bottom:8px;line-height:1.1;
}
.bd-article .bd-muted{color:var(--text-muted);font-weight:600;font-size:.7em}
.bd-article .bd-ratio-verdict{
  font-size:16px;color:var(--text-2);margin:0 0 24px;font-style:italic;
  min-height:24px;
}
.bd-article .bd-slider{
  appearance:none;-webkit-appearance:none;width:100%;height:6px;
  background:var(--border);border-radius:100px;outline:none;cursor:pointer;
}
.bd-article .bd-slider::-webkit-slider-thumb{
  appearance:none;-webkit-appearance:none;width:22px;height:22px;
  background:var(--gradient);border-radius:50%;cursor:pointer;border:3px solid #fff;
  box-shadow:0 2px 8px rgba(59,130,246,.4);
}
.bd-article .bd-slider::-moz-range-thumb{
  width:22px;height:22px;background:#3b82f6;border-radius:50%;cursor:pointer;border:3px solid #fff;
}
.bd-article .bd-ratio-meta{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;
  margin-top:28px;padding-top:24px;border-top:1px solid var(--border);
}
.bd-article .bd-ratio-meta dt{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--text-muted);margin:0 0 4px;font-weight:600}
.bd-article .bd-ratio-meta dd{font-size:16px;font-weight:600;color:var(--text);margin:0}

/* ── Callouts ────────────────────────────────────────────── */
.bd-article .bd-callout{
  background:#fff;border:1px solid var(--border);border-left:4px solid var(--primary);
  border-radius:var(--radius);padding:24px 28px;
}
.bd-article .bd-callout h3{font-size:16px;font-weight:700;margin:0 0 12px;color:var(--text)}
.bd-article .bd-callout ul{margin:0;padding-left:1.2em}
.bd-article .bd-callout li{font-size:15px;color:var(--text-2);line-height:1.7;margin-bottom:6px}

/* ── Tabs (Bug 03 + Bug 04) ───────────────────────────────── */
.bd-article .bd-tabs{
  display:flex;flex-wrap:wrap;gap:6px;
  background:var(--bg-alt);padding:6px;border-radius:var(--radius);
  border:1px solid var(--border);
  margin-bottom:20px;
}
.bd-article .bd-section-alt .bd-tabs{background:#fff}
.bd-article .bd-tab{
  background:transparent;border:1px solid transparent;border-radius:8px;
  padding:8px 14px;font:inherit;font-size:14px;font-weight:500;
  color:var(--text-2);cursor:pointer;
  transition:all .15s var(--ease);
}
.bd-article .bd-tab:hover{color:var(--text);background:rgba(15,23,42,.04)}
.bd-article .bd-tab.bd-tab-active{background:#fff;color:var(--text);border-color:var(--border-strong);box-shadow:var(--shadow-sm);font-weight:600}
.bd-article .bd-section-alt .bd-tab.bd-tab-active{background:var(--bg-alt)}

.bd-article .bd-tab-panels{position:relative}
.bd-article .bd-tab-panel{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:28px;
}
.bd-article .bd-tab-panel h3{font-size:20px;font-weight:700;margin:0 0 14px;line-height:1.3;display:inline-flex;align-items:center;gap:8px}
.bd-article .bd-verdict-good::before{content:'✓';color:var(--good);font-weight:800}
.bd-article .bd-verdict-warn::before{content:'!';display:inline-grid;place-items:center;width:22px;height:22px;background:var(--warn-bg);color:var(--warn);border-radius:50%;font-size:13px;font-weight:800}
.bd-article .bd-tab-panel p{color:var(--text-2);margin:0 0 18px;font-size:15px;line-height:1.7}
.bd-article .bd-tab-panel p:last-child{margin-bottom:0}

.bd-article .bd-spec{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;
  margin:0 0 18px;padding:16px;background:var(--bg-alt);border-radius:8px;
}
.bd-article .bd-section-alt .bd-spec{background:var(--bg)}
.bd-article .bd-spec > div{display:flex;flex-direction:column-reverse;gap:2px}
.bd-article .bd-spec dt{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);font-weight:600;margin:0}
.bd-article .bd-spec dd{font-size:14px;font-weight:600;color:var(--text);margin:0}
.bd-article .bd-spec dd.bd-warn{color:var(--warn)}
.bd-article .bd-spec dd.bd-good{color:var(--good)}

/* ── Diff before/after ───────────────────────────────────── */
.bd-article .bd-diff{
  margin:0;background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);
  padding:32px;
}
.bd-article .bd-diff-label{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:5px 10px;border-radius:6px;margin:0 0 16px;
  background:var(--warn-bg);color:var(--warn);
}
.bd-article .bd-diff-state[data-state="after"] .bd-diff-label{background:var(--good-bg);color:var(--good)}
.bd-article .bd-diff-list{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.bd-article .bd-diff-list li{font-size:15px;color:var(--text-2);padding-left:28px;position:relative;line-height:1.6}
.bd-article .bd-diff-list li::before{position:absolute;left:0;top:0;width:20px;height:20px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800}
.bd-article .bd-diff-list li.bd-bad::before{content:'×';background:var(--warn-bg);color:var(--warn)}
.bd-article .bd-diff-list li.bd-good::before{content:'✓';background:var(--good-bg);color:var(--good)}
.bd-article .bd-diff figcaption{font-size:14px;color:var(--text-muted);margin-top:16px;font-style:italic;text-align:center}

/* ── Buttons ─────────────────────────────────────────────── */
.bd-article .bd-btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:12px 24px;border-radius:10px;
  font:inherit;font-size:15px;font-weight:600;
  cursor:pointer;border:1px solid transparent;
  transition:all .2s var(--ease);
}
.bd-article .bd-btn-primary{
  background:var(--gradient);color:#fff;
  box-shadow:0 4px 12px rgba(59,130,246,.3);
}
.bd-article .bd-btn-primary:hover{box-shadow:0 6px 20px rgba(59,130,246,.4);transform:translateY(-1px)}

/* ── Playbook ────────────────────────────────────────────── */
.bd-article .bd-playbook{background:#fff;border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px}
.bd-article .bd-section-alt .bd-playbook{background:var(--bg)}
.bd-article .bd-playbook-progress{display:flex;align-items:center;gap:16px;margin-bottom:24px}
.bd-article .bd-playbook-bar{flex:1;height:6px;background:var(--bg-alt);border-radius:100px;overflow:hidden;border:1px solid var(--border)}
.bd-article .bd-playbook-fill{height:100%;background:var(--gradient);width:0;transition:width .4s var(--ease);border-radius:100px}
.bd-article .bd-playbook-count{font-size:13px;font-weight:600;color:var(--text-2);margin:0;white-space:nowrap}

.bd-article .bd-playbook-list{list-style:none;padding:0;margin:0;display:grid;gap:8px;counter-reset:none}
.bd-article .bd-step button{
  display:grid;grid-template-columns:auto 1fr auto;gap:16px;align-items:start;
  width:100%;background:transparent;border:1px solid var(--border);border-radius:var(--radius);
  padding:16px 18px;text-align:left;font:inherit;color:inherit;cursor:pointer;
  transition:all .2s var(--ease);
}
.bd-article .bd-step button:hover{border-color:var(--primary)}
.bd-article .bd-step.bd-done button{background:#f0fdf4;border-color:#86efac}
.bd-article .bd-step.bd-done .bd-step-body strong,
.bd-article .bd-step.bd-done .bd-step-num{color:var(--text-muted)}
.bd-article .bd-check{
  width:22px;height:22px;border:2px solid var(--border-strong);border-radius:6px;
  display:grid;place-items:center;flex-shrink:0;margin-top:2px;
  transition:all .2s var(--ease);
}
.bd-article .bd-step.bd-done .bd-check{background:var(--good);border-color:var(--good)}
.bd-article .bd-step.bd-done .bd-check::after{content:'';width:8px;height:5px;border-left:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(-45deg);margin-bottom:2px}
.bd-article .bd-step-body{display:block;min-width:0}
.bd-article .bd-step-num{display:block;font-size:11px;color:var(--primary);font-weight:600;letter-spacing:.04em;margin-bottom:2px;text-transform:uppercase}
.bd-article .bd-step-body strong{display:block;font-size:16px;font-weight:600;color:var(--text);margin-bottom:4px;line-height:1.35}
.bd-article .bd-step-desc{display:block;font-size:14px;color:var(--text-2);line-height:1.6}
.bd-article .bd-step-time{font-size:11px;color:var(--text-muted);background:var(--bg-alt);padding:4px 8px;border-radius:6px;white-space:nowrap;font-weight:500}
.bd-article .bd-section-alt .bd-step-time{background:#fff}

.bd-article .bd-playbook-reset{margin-top:16px;background:transparent;border:none;font:inherit;font-size:12px;color:var(--text-muted);cursor:pointer;text-transform:uppercase;letter-spacing:.05em;padding:6px 0}
.bd-article .bd-playbook-reset:hover{color:var(--warn)}

/* ── FAQ (native <details>) ──────────────────────────────── */
.bd-article .bd-faq{display:grid;gap:8px}
.bd-article .bd-faq details{
  background:#fff;border:1px solid var(--border);border-radius:var(--radius);
  overflow:hidden;transition:border-color .2s var(--ease);
}
.bd-article .bd-faq details[open]{border-color:var(--primary)}
.bd-article .bd-faq summary{
  list-style:none;cursor:pointer;
  padding:18px 22px;
  display:flex;justify-content:space-between;align-items:center;gap:24px;
  font-size:16px;font-weight:600;color:var(--text);
}
.bd-article .bd-faq summary::-webkit-details-marker{display:none}
.bd-article .bd-faq summary::after{
  content:'+';font-size:20px;color:var(--primary);font-weight:400;
  width:28px;height:28px;display:grid;place-items:center;
  background:#eff6ff;border-radius:50%;transition:transform .2s var(--ease);
}
.bd-article .bd-faq details[open] summary::after{content:'×';transform:rotate(0)}
.bd-article .bd-faq details p{padding:0 22px 20px;color:var(--text-2);font-size:15px;margin:0;line-height:1.7}

/* ── Footer ──────────────────────────────────────────────── */
.bd-article .bd-footer{
  border-top:1px solid var(--border);padding:48px 0;background:var(--bg-alt);
  text-align:center;color:var(--text-2);font-size:14px;
}
.bd-article .bd-footer p{margin:0 0 8px;max-width:600px;margin-left:auto;margin-right:auto}
.bd-article .bd-footer-meta{color:var(--text-muted);font-size:13px}
.bd-article .bd-footer-meta a{color:var(--primary-dark);font-weight:500}

/* ── Reveal animations (progressive enhancement) ─────────── */
.bd-article .bd-reveal{transition:opacity .6s var(--ease),transform .6s var(--ease)}
.js-on .bd-article .bd-reveal{opacity:0;transform:translateY(20px)}
.js-on .bd-article .bd-reveal.bd-in{opacity:1;transform:translate(0,0)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.1s!important}
}

/* ── Mobile ──────────────────────────────────────────────── */
@media (max-width:720px){
  .bd-article .bd-hero{padding:64px 0 56px}
  .bd-article .bd-section{padding:64px 0}
  .bd-article .bd-stats{grid-template-columns:1fr;gap:16px}
  .bd-article .bd-stats > div{flex-direction:row;align-items:baseline;justify-content:space-between}
  .bd-article .bd-stats dd{font-size:22px}
  .bd-article .bd-compare,.bd-article .bd-bug-grid,.bd-article .bd-paths{grid-template-columns:1fr}
  .bd-article .bd-ratio-meta{grid-template-columns:1fr;gap:14px}
  .bd-article .bd-ratio-meta > div{display:flex;justify-content:space-between;align-items:baseline}
  .bd-article .bd-step button{grid-template-columns:auto 1fr;gap:12px}
  .bd-article .bd-step-time{grid-column:1/-1;justify-self:start}
  .bd-article .bd-toc ol{font-size:12px;gap:2px}
  .bd-article .bd-toc{position:static}
}