/* Product pages: shared layout plus Grafana-style metric panels.
   Panel types follow Grafana's stat, bar gauge and table visualizations;
   colors follow its threshold convention (base green, then yellow, then red). */

:root {
  --gf-bg: #111217;
  --gf-panel: #181b1f;
  --gf-border: #24262b;
  --gf-text: #ccccdc;
  --gf-dim: #8e8e9e;
  --gf-green: #73bf69;
  --gf-yellow: #fade2a;
  --gf-orange: #ff9830;
  --gf-red: #f2495c;
  --gf-blue: #5794f2;
}

.breadcrumb { display:flex; gap:.5rem; align-items:center; font-size:.8rem; letter-spacing:.04em; text-transform:uppercase; color:var(--text-dim); margin-bottom:1.75rem; flex-wrap:wrap; }
.breadcrumb a { color:var(--text-dim); text-decoration:none; transition:color .2s; }
.breadcrumb a:hover { color:var(--text); }
.breadcrumb .sep { opacity:.4; }
.breadcrumb .current { color:var(--accent); font-weight:700; }

.hero-actions { display:flex; gap:.75rem; flex-wrap:wrap; margin-top:1.75rem; }
.btn-primary { display:inline-block; background:var(--accent); color:#fff; font-weight:700; font-size:.95rem; padding:.85rem 1.6rem; border-radius:999px; text-decoration:none; transition:background .2s, transform .2s; }
.btn-primary:hover { background:var(--accent-dark); transform:translateY(-2px); }
.btn-ghost { display:inline-block; border:1px solid var(--border); color:var(--text); font-weight:700; font-size:.95rem; padding:.85rem 1.6rem; border-radius:999px; text-decoration:none; transition:border-color .2s, color .2s; }
.btn-ghost:hover { border-color:var(--accent); color:var(--accent); }

/* Leadership questions the product answers */
.answer-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1.25rem; margin-top:2rem; }
.answer { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.6rem; }
.answer .q { color:var(--accent); font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; margin:0 0 .6rem; }
.answer h3 { font-size:1.05rem; margin:0 0 .55rem; line-height:1.35; }
.answer p { color:var(--text-dim); font-size:.92rem; line-height:1.6; margin:0; }

/* Grafana-style dashboard */
.gf-dash { background:var(--gf-bg); border:1px solid var(--gf-border); border-radius:8px; padding:12px; margin-top:2rem; color:var(--gf-text); }
.gf-bar { display:flex; justify-content:space-between; align-items:center; gap:1rem; flex-wrap:wrap; padding:4px 4px 12px; border-bottom:1px solid var(--gf-border); margin-bottom:12px; }
.gf-title { font-size:.95rem; font-weight:700; color:#fff; }
.gf-title span { color:var(--gf-dim); font-weight:400; }
.gf-pills { display:flex; gap:.5rem; flex-wrap:wrap; }
.gf-pill { font-size:.72rem; color:var(--gf-text); background:var(--gf-panel); border:1px solid var(--gf-border); border-radius:4px; padding:.3rem .6rem; }
.gf-pill b { color:var(--gf-green); font-weight:700; }
.gf-grid { display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:8px; }
.gf-panel { background:var(--gf-panel); border:1px solid var(--gf-border); border-radius:4px; padding:10px 12px 12px; min-width:0; }
.gf-panel h4 { font-size:.78rem; font-weight:500; color:var(--gf-text); margin:0 0 .5rem; letter-spacing:0; text-transform:none; }
.span-3 { grid-column:span 3; } .span-4 { grid-column:span 4; } .span-5 { grid-column:span 5; }
.span-6 { grid-column:span 6; } .span-7 { grid-column:span 7; } .span-8 { grid-column:span 8; } .span-12 { grid-column:span 12; }

.gf-stat .v { font-size:clamp(1.9rem,3.4vw,2.6rem); font-weight:700; line-height:1.1; font-variant-numeric:tabular-nums; }
.gf-stat .sub { font-size:.74rem; color:var(--gf-dim); margin-top:.35rem; line-height:1.45; }
.c-green { color:var(--gf-green); } .c-yellow { color:var(--gf-yellow); } .c-orange { color:var(--gf-orange); }
.c-red { color:var(--gf-red); } .c-blue { color:var(--gf-blue); } .c-text { color:#fff; }

.gf-bars { display:flex; flex-direction:column; gap:.55rem; }
.gf-row { display:grid; grid-template-columns:minmax(0,9.5rem) minmax(0,1fr) 3.2rem; align-items:center; gap:.6rem; font-size:.78rem; }
.gf-row .lbl { color:var(--gf-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gf-track { height:14px; background:#22252b; border-radius:2px; overflow:hidden; }
.gf-fill { height:100%; border-radius:2px; }
.gf-row .val { text-align:right; font-weight:700; font-variant-numeric:tabular-nums; }
.bg-green { background:var(--gf-green); } .bg-yellow { background:var(--gf-yellow); } .bg-orange { background:var(--gf-orange); }
.bg-red { background:var(--gf-red); } .bg-blue { background:var(--gf-blue); }

.gf-table { width:100%; border-collapse:collapse; font-size:.78rem; }
.gf-table th { text-align:left; color:var(--gf-blue); font-weight:500; padding:.45rem .5rem; border-bottom:1px solid var(--gf-border); white-space:nowrap; }
.gf-table td { padding:.45rem .5rem; border-bottom:1px solid #202226; color:var(--gf-text); vertical-align:top; }
.gf-table tr:last-child td { border-bottom:0; }
.gf-tag { display:inline-block; font-size:.7rem; font-weight:700; padding:.12rem .45rem; border-radius:3px; color:#111217; white-space:nowrap; }
.gf-scroll { overflow-x:auto; }

.gf-steps { display:flex; gap:6px; flex-wrap:wrap; }
.gf-step { flex:1 1 7.5rem; background:#1f2a20; border:1px solid #2e4a30; border-radius:3px; padding:.5rem .6rem; font-size:.74rem; }
.gf-step b { display:block; color:var(--gf-green); font-size:.7rem; margin-bottom:.15rem; }

.lab-note { margin-top:1rem; font-size:.82rem; color:var(--text-dim); line-height:1.6; border-left:2px solid var(--accent); padding-left:.9rem; }
.lab-note b { color:var(--text); }

/* How it works */
.flow { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; margin-top:2rem; counter-reset:step; }
.flow-step { background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); padding:1.4rem; position:relative; }
.flow-step::before { counter-increment:step; content:counter(step); display:inline-grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:50%; border:1px solid var(--accent); color:var(--accent); font-weight:700; font-size:.85rem; margin-bottom:.8rem; }
.flow-step h3 { font-size:1rem; margin:0 0 .45rem; }
.flow-step p { color:var(--text-dim); font-size:.88rem; line-height:1.6; margin:0; }

.chips { display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.5rem; }
.chip { border:1px solid var(--border); background:var(--card); border-radius:999px; padding:.5rem 1rem; font-size:.85rem; color:var(--text); }
.chip small { color:var(--text-dim); margin-left:.35rem; }
.fine { color:var(--text-dim); font-size:.82rem; line-height:1.6; margin-top:1rem; max-width:820px; }

.platform { background:linear-gradient(135deg, rgba(204,0,0,.12), rgba(13,13,13,1) 60%); border:1px solid var(--border); border-radius:var(--radius-md); padding:2rem; margin-top:1rem; }
.platform p { color:var(--text-dim); line-height:1.65; margin:.5rem 0 0; max-width:820px; }
.platform h3 { margin:0; font-size:1.2rem; }

@media (max-width: 900px) {
  .answer-grid, .flow { grid-template-columns:1fr; }
  .span-3, .span-4, .span-5, .span-6 { grid-column:span 6; }
  .span-7, .span-8 { grid-column:span 12; }
}
@media (max-width: 560px) {
  .span-3, .span-4, .span-5, .span-6 { grid-column:span 12; }
  .gf-row { grid-template-columns:minmax(0,7rem) minmax(0,1fr) 2.8rem; }
}