/* Monitoring + alerts product (templates/pages/volgen.html). Self-contained —
   defines the hero bits it needs so it doesn't lean on home.css. */


/* hero */
.vg-hero { padding-top: clamp(1.5rem, 4vh, 3rem); }
.vg-hero h1 { font-size: clamp(2rem, 4.2vw, 3rem); margin-top: 1.1rem; }
.vg-lede { color: var(--ink-60); font-size: 1.12rem; margin-top: 1rem; max-width: 34rem; }
.vg-note { color: var(--ink-40); font-size: .85rem; margin-top: 1.1rem; }

/* hero feed */
.vg-feed { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); padding: 1.1rem; display: flex; flex-direction: column; gap: .6rem; }
.vg-feed-head { display: flex; align-items: baseline; justify-content: space-between; padding: .2rem .3rem .7rem; border-bottom: 1px solid var(--line); }
.vg-feed-head b { font-size: .95rem; }
.vg-feed-head span { font-family: var(--jbmono); font-size: .72rem; color: var(--ink-40); }
.vg-ev { display: flex; gap: .7rem; align-items: flex-start; background: var(--bg-soft); border-left: 3px solid var(--line); border-radius: 0 10px 10px 0; padding: .7rem .85rem; font-size: .9rem; line-height: 1.4; }
.vg-ev b { color: var(--ink); }
.vg-ic { font-size: 1.05rem; line-height: 1.3; flex: none; }
.vg-sub { display: block; font-size: .76rem; color: var(--ink-60); margin-top: .2rem; }
.vg-green { border-left-color: var(--green); }
.vg-amber { border-left-color: var(--amber); }
.vg-blue  { border-left-color: var(--blue); }
.vg-red   { border-left-color: #c0392b; }

/* steps */

/* wat we volgen grid */
.vg-watch-sec { background: var(--bg-soft); }
.vg-watch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.vg-w { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; }
.vg-w-ic { font-size: 1.4rem; }
.vg-w b { display: block; margin-top: .6rem; font-size: .96rem; }
.vg-w span { display: block; font-size: .84rem; color: var(--ink-60); margin-top: .3rem; line-height: 1.45; }
@media (max-width: 64rem) { .vg-watch { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 34rem) { .vg-watch { grid-template-columns: 1fr; } }

/* two lanes + channels */
.vg-lanes { display: grid; grid-template-columns: 1fr 1fr; gap: 1.3rem; }
.vg-lane { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.5rem 1.6rem; }
.vg-lane-tag { font-family: var(--jbmono); font-size: .64rem; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .6rem; border-radius: 99px; }
.vg-lane-instant { color: var(--green); background: var(--green-tint); }
.vg-lane-daily { color: var(--blue-deep); background: var(--blue-tint); }
.vg-lane h3 { font-size: 1.2rem; margin: .9rem 0 .5rem; }
.vg-lane p { color: var(--ink-60); font-size: .92rem; line-height: 1.55; }
.vg-lane-foot { display: block; margin-top: 1rem; font-family: var(--jbmono); font-size: .7rem; color: var(--ink-40); }
.vg-channels { grid-column: 1 / -1; display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; background: var(--ink); color: #fff; border-radius: var(--radius); padding: 1.2rem 1.5rem; }
.vg-ch-label { font-weight: 600; }
.vg-ch-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.vg-ch { font-family: var(--jbmono); font-size: .78rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); border-radius: 99px; padding: .4rem .85rem; }
@media (max-width: 56rem) { .vg-lanes { grid-template-columns: 1fr; } }

/* use cases */
.vg-uses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem; }
.vg-use { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1.2rem 1.3rem; }
.vg-use b { font-size: .98rem; }
.vg-use span { display: block; font-size: .86rem; color: var(--ink-60); margin-top: .35rem; line-height: 1.5; }
@media (max-width: 56rem) { .vg-uses { grid-template-columns: 1fr 1fr; } }
@media (max-width: 34rem) { .vg-uses { grid-template-columns: 1fr; } }

/* moat */