/* ── Page-load fade-in ── */
@keyframes pgIn { from{opacity:0;transform:translateY(4px)} to{opacity:1;transform:translateY(0)} }
#app { animation:pgIn 0.18s ease; }

/* ── Base ── */
body { font-family:'Inter',system-ui,sans-serif; background:#F7F5EB; color:#1A2812; margin:0; }
h1,h2,h3,h4 { font-family:'Playfair Display',Georgia,serif; }

.grain { position:relative; }
.grain::before {
  content:''; position:absolute; inset:0; pointer-events:none; z-index:1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  opacity:0.06;
}
.grain > * { position:relative; z-index:2; }

.divider { width:48px; height:3px; background:linear-gradient(90deg,#C8940A,#E8B800); border-radius:2px; }
.chip { display:inline-block; font-size:0.6875rem; font-weight:600; letter-spacing:0.12em; text-transform:uppercase; color:#2D5E1A; margin-bottom:16px; }
.caption { font-size:0.75rem; color:rgba(26,40,18,0.45); font-style:italic; text-align:center; margin-top:12px; }
.section-dark { background-color:#1E3D0E; }
.callout { border-left:3px solid #C8940A; background:rgba(200,148,10,0.07); border-radius:0 8px 8px 0; padding:16px 20px; }
.img-card { border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(30,61,14,0.12),0 1px 4px rgba(30,61,14,0.06); }

.stat-card { background:white; border:1px solid rgba(45,94,26,0.1); box-shadow:0 2px 12px rgba(45,94,26,0.06); transition:transform 0.2s ease,box-shadow 0.2s ease; }
.stat-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(45,94,26,0.1); }

.bullet-list { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:12px; }
.bullet-list li { display:flex; gap:10px; font-size:0.9375rem; line-height:1.75; color:rgba(26,40,18,0.82); }
.bullet-list li::before { content:'▸'; color:#2D5E1A; flex-shrink:0; margin-top:2px; }

.btn-primary {
  display:inline-flex; align-items:center; gap:8px;
  background:#C8940A; color:#1E3D0E; font-weight:600; font-size:0.875rem;
  letter-spacing:0.02em; padding:14px 28px; border-radius:8px;
  text-decoration:none; border:none; cursor:pointer;
  transition:background 0.2s ease,transform 0.15s ease;
}
.btn-primary:hover { background:#E8B800; transform:translateY(-1px); }
.btn-primary:active { transform:translateY(0); }

/* ── Navigation ── */
.nav-link { color:rgba(255,255,255,0.75); font-size:0.875rem; font-weight:500; transition:color 0.15s ease; text-decoration:none; }
.nav-link:hover { color:#E8B800; }
.nav-group { position:relative; }
.nav-group-trigger {
  display:flex; align-items:center; gap:5px;
  color:rgba(255,255,255,0.75); font-size:0.875rem; font-weight:500;
  background:none; border:none; cursor:pointer; padding:0;
  font-family:'Inter',system-ui,sans-serif; transition:color 0.15s ease;
}
.nav-group-trigger:hover { color:#E8B800; }
.nav-dropdown-menu {
  position:absolute; top:100%; left:50%;
  transform:translateX(-50%) translateY(-6px);
  min-width:218px; background:#162E09;
  border:1px solid rgba(255,255,255,0.1); border-radius:10px;
  padding:14px 6px 6px;
  opacity:0; visibility:hidden;
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  z-index:100; box-shadow:0 12px 40px rgba(0,0,0,0.4);
}
.nav-dropdown-menu.open {
  opacity:1; visibility:visible; transform:translateX(-50%) translateY(0);
  transition:opacity 0.2s ease, transform 0.2s ease, visibility 0s;
}
.nav-dropdown-item {
  display:block; padding:9px 14px; color:rgba(255,255,255,0.7); text-decoration:none;
  font-size:0.8125rem; font-weight:500; border-radius:6px; white-space:nowrap;
  background:none; border:none; cursor:pointer; width:100%; text-align:left;
  font-family:'Inter',system-ui,sans-serif;
  transition:color 0.12s ease,background 0.12s ease;
}
.nav-dropdown-item:hover  { color:#E8B800; background:rgba(255,255,255,0.06); }
.nav-dropdown-item.active { color:#E8B800; background:rgba(200,148,10,0.12); font-weight:600; }

/* ── Expand / collapse ── */
.expandable { max-height:0; overflow:hidden; opacity:0; transition:max-height 0.45s cubic-bezier(0.4,0,0.2,1),opacity 0.3s ease; }
.expandable.open { max-height:4000px; opacity:1; }
.chevron { transition:transform 0.32s cubic-bezier(0.4,0,0.2,1); flex-shrink:0; }
.chevron.open { transform:rotate(180deg); }
.term { cursor:pointer; color:#E8B800; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px; font-weight:500; transition:color 0.15s ease; }
.term:hover { color:#FFD740; }
.expand-btn {
  width:100%; display:flex; align-items:center; justify-content:space-between;
  padding:16px 22px; background:rgba(45,94,26,0.06); border:1px solid rgba(45,94,26,0.18);
  border-radius:10px; cursor:pointer; font-family:'Inter',sans-serif;
  font-size:0.9375rem; font-weight:500; color:#1E3D0E; transition:background 0.2s ease;
}
.expand-btn:hover { background:rgba(45,94,26,0.11); }
.dark-card { background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); border-radius:12px; padding:28px; transition:background 0.2s ease; }
.dark-card:hover { background:rgba(255,255,255,0.09); }

/* ── Impact accordion ── */
.impact-item { border:1px solid rgba(45,94,26,0.12); border-radius:14px; overflow:hidden; background:white; transition:box-shadow 0.2s ease; }
.impact-item:hover { box-shadow:0 6px 24px rgba(45,94,26,0.09); }
.impact-trigger { width:100%; display:flex; align-items:center; gap:16px; padding:22px 28px; cursor:pointer; background:none; border:none; text-align:left; font-family:'Inter',sans-serif; transition:background 0.2s ease; }
.impact-trigger:hover { background:rgba(45,94,26,0.025); }

/* ── CSFB lifecycle diagram ── */
.lifecycle-hotspot { position:absolute; cursor:pointer; border-radius:8px; transition:background 0.18s ease,box-shadow 0.18s ease; }
.lifecycle-hotspot:hover { background:rgba(45,94,26,0.22); box-shadow:inset 0 0 0 2px rgba(45,94,26,0.55); }
.lifecycle-hotspot:focus-visible { outline:none; background:rgba(45,94,26,0.22); box-shadow:inset 0 0 0 2px rgba(45,94,26,0.55); }
.lifecycle-hotspot.active { background:rgba(45,94,26,0.16); box-shadow:inset 0 0 0 2px rgba(45,94,26,0.45); }
.side-panel-box { border-radius:12px; padding:22px 24px; border:1px solid rgba(45,94,26,0.09); box-shadow:0 2px 12px rgba(45,94,26,0.06); }
.panel-state { display:none; }
.panel-state.visible { display:block; animation:fadeUp 0.22s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(5px)} to{opacity:1;transform:translateY(0)} }
.s-badge { display:inline-block; font-size:0.6875rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; padding:4px 10px; border-radius:4px; margin-bottom:10px; background:rgba(45,94,26,0.1); color:#2D5E1A; }
.s-badge.warn { background:rgba(200,148,10,0.13); color:#96700A; }
.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px; }
.info-grid-item { background:#F7F5EB; border-radius:8px; padding:12px 14px; font-size:0.8125rem; line-height:1.65; color:rgba(26,40,18,0.8); border:1px solid rgba(45,94,26,0.07); }
.info-grid-item strong { color:#1E3D0E; display:block; margin-bottom:3px; font-size:0.75rem; text-transform:uppercase; letter-spacing:0.06em; }
.temp-card { background:#F7F5EB; border-radius:8px; padding:12px; text-align:center; border:1px solid rgba(45,94,26,0.08); }

/* ── Damage cards ── */
.damage-card { background:white; border-radius:14px; padding:32px; border:1px solid rgba(45,94,26,0.1); box-shadow:0 2px 12px rgba(45,94,26,0.06); }
.damage-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; margin-bottom:20px; }
.damage-row { display:flex; flex-direction:column; gap:10px; margin-top:16px; }
.damage-row-item { display:flex; gap:10px; align-items:flex-start; }
.damage-label { font-size:0.6875rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:#2D5E1A; flex-shrink:0; padding-top:3px; min-width:48px; }
.damage-text { font-size:0.875rem; line-height:1.7; color:rgba(26,40,18,0.8); }

/* ── Challenge cards ── */
.challenge-card { background:#F7F5EB; border-radius:12px; padding:22px 20px; border:1px solid rgba(45,94,26,0.09); transition:box-shadow 0.2s ease,transform 0.2s ease; }
.challenge-card:hover { box-shadow:0 6px 20px rgba(45,94,26,0.1); transform:translateY(-2px); }
.challenge-icon { width:36px; height:36px; border-radius:50%; background:rgba(45,94,26,0.1); display:flex; align-items:center; justify-content:center; margin-bottom:14px; }
.challenge-number { font-family:'Playfair Display',serif; font-size:1.5rem; font-weight:700; color:#C8940A; line-height:1; margin-bottom:8px; }

/* ── Coming soon ── */
.coming-soon { min-height:80vh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:64px 32px; background:#F7F5EB; }

/* ── BindCraft stage hotspots ── */
.bc-hotspot { position:absolute; cursor:pointer; border-radius:6px; transition:background 0.18s ease,box-shadow 0.18s ease; }
.bc-hotspot:hover { background:rgba(200,148,10,0.16); box-shadow:inset 0 0 0 2px rgba(200,148,10,0.55); }
.bc-stage-panel { display:none; margin-top:14px; background:#F7F5EB; border-radius:10px; padding:20px 24px; border:1px solid rgba(200,148,10,0.3); animation:fadeUp 0.2s ease; }

/* ── Pros/cons table ── */
.pros-cons-table { width:100%; border-collapse:collapse; font-size:0.9rem; border-radius:10px; overflow:hidden; box-shadow:0 2px 12px rgba(45,94,26,0.07); }
.pros-cons-table th { background:#1E3D0E; color:white; padding:12px 18px; text-align:left; font-size:0.75rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; }
.pros-cons-table td { padding:13px 18px; vertical-align:top; border-bottom:1px solid rgba(45,94,26,0.09); line-height:1.7; color:rgba(26,40,18,0.82); }
.pros-cons-table tr:last-child td { border-bottom:none; }
.pros-cons-table td.pro { background:rgba(45,94,26,0.03); }
.pros-cons-table td.con { background:rgba(200,148,10,0.03); }