/* Digital Growth page: sample charts and mock-ups (SVG/CSS only, all labelled "Sample"). */
.dg-card { padding: 22px; max-width: 460px; margin: 0 auto; }
.dg-line, .dg-area { width: 100%; height: auto; display: block; margin: 6px 0 12px; }
.dg-gridlines line { stroke: var(--line); stroke-width: 1; }
.dg-line text, .dg-area text { font: 600 10px system-ui, sans-serif; fill: var(--muted); }
.dg-path { fill: none; stroke: #4f2bea; stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; }
.dg-dots circle { fill: #fff; stroke: #4f2bea; stroke-width: 2.5; }
.dg-fill { fill: rgb(79 43 234 / 14%); }
.dg-table { width: 100%; border-collapse: collapse; font-size: .88rem; }
.dg-table th, .dg-table td { text-align: left; padding: 7px 6px; border-bottom: 1px solid var(--line); }
.dg-table th { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.dg-up { color: #047857; font-weight: 800; }
.dg-gbp-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.dg-gbp-head b { display: block; } .dg-gbp-head span { font-size: .85rem; color: var(--ink-2); }
.dg-pin { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; background: #fee2e2; color: #dc2626; flex: none; }
.dg-pin .icon { width: 20px; height: 20px; }
.dg-gbp-actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 14px; }
.dg-gbp-actions span { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 9px; border-radius: 999px; border: 1px solid var(--line);
  font-size: .85rem; color: #1a73e8; font-weight: 600; }
.dg-gbp-actions .icon { width: 15px; height: 15px; }
.dg-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.dg-stats div { padding: 10px; border-radius: 12px; background: var(--bg-alt); display: grid; }
.dg-stats b { font-size: 1.25rem; color: var(--ink); } .dg-stats span { font-size: .75rem; color: var(--ink-2); }
.dg-posts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 6px 0 14px; }
.dg-posts i { aspect-ratio: 1; border-radius: 10px; }
.dg-posts .p1 { background: linear-gradient(135deg, #fde68a, #f59e0b); } .dg-posts .p2 { background: linear-gradient(135deg, #fbcfe8, #db2777); }
.dg-posts .p3 { background: linear-gradient(135deg, #bfdbfe, #2563eb); } .dg-posts .p4 { background: linear-gradient(135deg, #bbf7d0, #16a34a); }
.dg-posts .p5 { background: linear-gradient(135deg, #ddd6fe, #7c3aed); } .dg-posts .p6 { background: linear-gradient(135deg, #fecaca, #dc2626); }
.dg-posts .p7 { background: linear-gradient(135deg, #a5f3fc, #0891b2); } .dg-posts .p8 { background: linear-gradient(135deg, #fed7aa, #ea580c); }
.dg-reach { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; font-size: .85rem; color: var(--ink-2); }
.dg-reach-bar { height: 10px; border-radius: 999px; background: var(--bg-alt); overflow: hidden; }
.dg-reach-bar i { display: block; height: 100%; width: 72%; background: linear-gradient(90deg, #a78bfa, #4f2bea); }
.dg-reach b { color: #047857; font-size: .8rem; }
.dg-docs { display: grid; gap: 10px; }
.dg-doc { display: grid; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); border-left: 4px solid #4f2bea; }
.dg-doc span { font-size: .82rem; color: var(--ink-2); }
.dg-cpl { margin-bottom: 26px; }
.dg-h100 { height: 100%; } .dg-h82 { height: 82%; } .dg-h70 { height: 70%; } .dg-h58 { height: 58%; } .dg-h52 { height: 52%; } .dg-h44 { height: 44%; }
.dg-cpl .sv-bar { background: linear-gradient(#fdba74, #ea580c); }
@media (max-width: 520px) { .dg-gbp-actions { grid-template-columns: 1fr 1fr 1fr; } .dg-gbp-actions span { font-size: .75rem; padding: 7px 4px; } }