/* =============================================================
   DAHMION — infographic layer
   Loaded AFTER site.css. Uses the same tokens (--accent, --ink,
   --muted, --line, --mono) so every figure follows the theme and
   the brand colour automatically. Nothing here redefines a colour.
   ============================================================= */

/* ---------- figure shell ---------- */
.fig{
  border:1px solid var(--line-soft);
  border-radius:4px;
  padding:clamp(22px,3.2vw,40px);
  background:var(--bg-2);
}
.tone-dark .fig{background:rgba(255,255,255,.03);border-color:rgba(255,255,255,.1);}
.fig + .fig{margin-top:18px;}
.fig-head{
  display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;
  gap:10px 24px;margin-bottom:clamp(20px,2.6vw,34px);
}
.fig-head h3{font-size:clamp(19px,2vw,26px);font-weight:300;letter-spacing:-.02em;}
.fig-note{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--faint);
}
.fig-grid{display:grid;gap:18px;}
@media (min-width:900px){
  .fig-grid.two{grid-template-columns:1fr 1fr;}
  .fig-grid.split{grid-template-columns:1.25fr 1fr;}
}

/* ---------- horizontal bars ---------- */
.bars{display:flex;flex-direction:column;gap:clamp(16px,2vw,24px);}
.bar-row{display:grid;grid-template-columns:minmax(0,1fr);gap:9px;}
.bar-top{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
}
.bar-name{font-size:15px;color:var(--ink);letter-spacing:-.01em;}
.bar-val{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;
}
.bar-track{height:8px;background:var(--line-soft);border-radius:4px;overflow:hidden;}
.bar-fill{
  display:block;height:100%;width:0;border-radius:4px;
  background:var(--accent);
  transition:width 1.1s var(--ease);
}
.bar-fill.muted{background:var(--faint);opacity:.55;}
.bar-sub{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* ---------- donut rings ---------- */
.rings-row{
  display:grid;gap:clamp(20px,3vw,36px);
  grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
}
.ring{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center;}
.ring-svg{width:clamp(120px,14vw,168px);height:auto;transform:rotate(-90deg);}
.ring-svg .track{fill:none;stroke:var(--line);stroke-width:5;}
.ring-svg .val{
  fill:none;stroke:var(--accent);stroke-width:5;stroke-linecap:round;
  stroke-dasharray:1 999;transition:stroke-dasharray 1.3s var(--ease);
}
.ring-wrap{position:relative;display:grid;place-items:center;}
.ring-num{
  position:absolute;font-size:clamp(26px,3.2vw,38px);font-weight:200;letter-spacing:-.03em;
  color:var(--ink);font-variant-numeric:tabular-nums;line-height:1;
}
.ring-num i{font-style:normal;font-size:.5em;color:var(--accent);margin-left:1px;}
.ring-label{font-size:14px;color:var(--muted);max-width:22ch;line-height:1.45;}

/* ---------- funnel ---------- */
.funnel{display:grid;gap:clamp(20px,3vw,44px);align-items:center;}
@media (min-width:820px){ .funnel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);} }
.funnel-svg{width:100%;height:auto;}
.funnel-svg .fn{
  fill:var(--accent);
  opacity:0;transform:translateY(10px);transform-box:fill-box;transform-origin:center;
  transition:opacity .7s var(--ease),transform .7s var(--ease);
}
.funnel-svg .fn.on{transform:none;}
.funnel-svg .fn:nth-of-type(1).on{opacity:1;}
.funnel-svg .fn:nth-of-type(2).on{opacity:.82;}
.funnel-svg .fn:nth-of-type(3).on{opacity:.62;}
.funnel-svg .fn:nth-of-type(4).on{opacity:.42;}
.fn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.fn-list li{
  display:flex;align-items:baseline;justify-content:space-between;gap:18px;
  padding:clamp(13px,1.7vw,19px) 0;border-bottom:1px solid var(--line-soft);
}
.fn-list li:first-child{border-top:1px solid var(--line-soft);}
.fn-list b{font-weight:400;font-size:clamp(15px,1.6vw,18px);letter-spacing:-.01em;color:var(--ink);}
.fn-list span{
  font-family:var(--mono);font-size:13px;letter-spacing:.06em;color:var(--ink);
  font-variant-numeric:tabular-nums;white-space:nowrap;
}
.fn-drop{
  margin:22px 0 0;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--faint);
}

/* ---------- line curve ---------- */
.curve{width:100%;height:auto;overflow:visible;}
.curve .grid{stroke:var(--line-soft);stroke-width:1;}
.curve .axis{stroke:var(--line);stroke-width:1;}
.curve .line{
  fill:none;stroke:var(--accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:1400;stroke-dashoffset:1400;
  transition:stroke-dashoffset 1.8s var(--ease);
}
.curve .line.ghost{stroke:var(--faint);stroke-width:1.5;stroke-dasharray:4 5;stroke-dashoffset:0;opacity:.6;}
.curve .area{fill:var(--accent);opacity:0;transition:opacity 1.2s var(--ease) .5s;}
.curve.on .line{stroke-dashoffset:0;}
.curve.on .area{opacity:.08;}
.curve .dot{fill:var(--accent);stroke:var(--bg);stroke-width:2.5;}
.curve text{font-family:var(--mono);font-size:9px;letter-spacing:.14em;fill:var(--faint);text-transform:uppercase;}
.curve text.big{font-size:15px;fill:var(--ink);letter-spacing:-.01em;text-transform:none;}

/* ---------- KPI tiles ---------- */
.kpis{
  display:grid;gap:1px;background:var(--line-soft);
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  border:1px solid var(--line-soft);
}
.kpi{background:var(--bg);padding:clamp(22px,2.8vw,34px);}
.tone-dark .kpi{background:var(--bg-2);}
.kpi b{
  display:block;font-size:clamp(34px,4.6vw,62px);font-weight:200;letter-spacing:-.045em;
  line-height:1;color:var(--ink);font-variant-numeric:tabular-nums;margin-bottom:12px;
}
.kpi b i{font-style:normal;color:var(--accent);}
.kpi span{
  display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);line-height:1.7;
}

/* ---------- step rail ---------- */
.rail{position:relative;display:grid;gap:clamp(26px,3vw,40px);}
@media (min-width:860px){ .rail{grid-template-columns:repeat(3,1fr);} }
.rail::before{
  content:"";position:absolute;left:0;right:0;top:9px;height:1px;background:var(--line);
  display:none;
}
@media (min-width:860px){ .rail::before{display:block;} }
.rail-step{position:relative;padding-top:34px;}
.rail-step::before{
  content:"";position:absolute;left:0;top:4px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1px solid var(--accent);
}
.rail-step.on::before{background:var(--accent);}
.rail-step .n{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;color:var(--accent);
  display:block;margin-bottom:10px;
}
.rail-step h3{font-size:clamp(18px,2vw,24px);font-weight:300;margin-bottom:10px;}
.rail-step p{margin:0;color:var(--muted);font-size:15px;max-width:34ch;}

/* ---------- service matrix ---------- */
.matrix{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
.mx{
  background:var(--bg);display:grid;gap:12px 24px;align-items:center;
  grid-template-columns:44px minmax(0,1fr);
  padding:clamp(20px,2.4vw,28px);
  transition:background .4s var(--ease);
}
.tone-dark .mx{background:var(--bg-2);}
.mx:hover{background:var(--bg-3);}
@media (min-width:880px){
  .mx{grid-template-columns:44px minmax(0,1.1fr) minmax(0,1.4fr) 150px;}
}
.mx .num{font-family:var(--mono);font-size:10px;letter-spacing:.16em;color:var(--accent);}
.mx h3{font-size:clamp(18px,2vw,25px);font-weight:300;letter-spacing:-.02em;}
.mx p{margin:0;color:var(--muted);font-size:15px;}
.mx .moves{
  display:flex;flex-direction:column;gap:5px;
  grid-column:2;
}
@media (min-width:880px){ .mx .moves{grid-column:auto;align-items:flex-end;text-align:right;} }
.mx .moves b{font-size:26px;font-weight:200;letter-spacing:-.03em;color:var(--ink);line-height:1;}
.mx .moves span{font-family:var(--mono);font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);}

/* ---------- comparison ---------- */
.versus{display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);}
@media (min-width:820px){ .versus{grid-template-columns:1fr 1fr;} }
.vs{background:var(--bg);padding:clamp(24px,3vw,38px);}
.tone-dark .vs{background:var(--bg-2);}
.vs .tag{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--faint);display:block;margin-bottom:20px;
}
.vs.good .tag{color:var(--accent);}
.vs ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px;}
.vs li{position:relative;padding-left:26px;font-size:15.5px;color:var(--muted);line-height:1.5;}
.vs li::before{
  content:"";position:absolute;left:0;top:9px;width:11px;height:1px;background:var(--faint);
}
.vs.good li{color:var(--ink);}
.vs.good li::before{background:var(--accent);width:11px;height:11px;top:5px;border-radius:50%;}

/* ---------- legend-free single-series note ---------- */
.fig-key{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--faint);
}
.fig-key i{display:inline-flex;align-items:center;gap:8px;font-style:normal;}
.fig-key i::before{content:"";width:16px;height:3px;border-radius:2px;background:var(--accent);}
.fig-key i.alt::before{background:var(--faint);opacity:.6;}

/* ---------- compact hero stat strip ---------- */
.hero-figs{
  display:grid;gap:1px;background:var(--line-soft);border:1px solid var(--line-soft);
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  margin-top:clamp(34px,5vh,64px);
}
.hero-figs div{background:var(--bg);padding:20px clamp(16px,2vw,24px);}
.hero-figs b{
  display:block;font-size:clamp(24px,3vw,38px);font-weight:200;letter-spacing:-.04em;
  color:var(--ink);line-height:1;margin-bottom:8px;font-variant-numeric:tabular-nums;
}
.hero-figs span{
  display:block;font-family:var(--mono);font-size:9px;letter-spacing:.17em;
  text-transform:uppercase;color:var(--faint);
}

/* ---------- placeholder marker ---------- */
.todo{
  border-left:2px solid var(--accent);padding:10px 0 10px 16px;margin:0 0 26px;
  font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--faint);line-height:1.9;
}

/* ---------- FAQ ---------- */
.faq{max-width:900px;}
.faq details{border-bottom:1px solid var(--line-soft);}
.faq details:first-child{border-top:1px solid var(--line-soft);}
.faq summary{
  cursor:pointer;list-style:none;display:flex;gap:20px;align-items:baseline;
  justify-content:space-between;padding:clamp(18px,2.2vw,26px) 0;
  font-size:clamp(16px,1.8vw,21px);font-weight:300;letter-spacing:-.01em;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none;}
.faq summary::after{content:"+";color:var(--accent);font-size:22px;line-height:1;flex:none;}
.faq details[open] summary::after{content:"\2013";}
.faq details p{margin:0 0 clamp(18px,2.2vw,26px);color:var(--muted);max-width:62ch;font-size:16px;}

/* ---------- deliverables ---------- */
.deliver{
  list-style:none;margin:0;padding:0;display:grid;gap:14px 34px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.deliver li{position:relative;padding-left:28px;color:var(--muted);font-size:16px;line-height:1.55;}
.deliver li::before{
  content:"";position:absolute;left:0;top:9px;width:9px;height:9px;border-radius:50%;
  border:1px solid var(--accent);
}

/* ---------- source note under a figure ---------- */
.fig-src{
  margin:20px 0 0;font-family:var(--mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--faint);line-height:1.8;
}

/* ---------- preview badge (only while TEST_MODE is on in src/build.js) ---------- */
.preview-badge{
  position:fixed;left:50%;bottom:16px;transform:translateX(-50%);z-index:140;
  display:flex;align-items:center;gap:9px;
  background:var(--menu-bg);color:var(--menu-ink);
  border:1px solid rgba(255,255,255,.18);border-radius:100px;
  padding:9px 16px;font-family:var(--mono);font-size:9px;letter-spacing:.16em;
  text-transform:uppercase;box-shadow:0 10px 30px rgba(0,0,0,.28);
}
.preview-badge::before{
  content:"";width:6px;height:6px;border-radius:50%;background:var(--accent);flex:none;
  animation:blink 2s ease-in-out infinite;
}
.preview-badge button{
  background:none;border:0;color:inherit;opacity:.5;cursor:pointer;
  font:inherit;padding:0 0 0 6px;line-height:1;
}
.preview-badge button:hover{opacity:1;}
@media (max-width:600px){ .preview-badge{left:12px;right:12px;transform:none;justify-content:center;} }