/* /distribute (stage 04 · Distribute): page-specific styles. Shared visuals (network, step strip, mocks, openers)
   live in css/flow.css and css/features.css and are not changed here. */

/* engine chip under the hero title */
.dt .stage-engine { display: inline-flex; align-items: center; gap: 8px; margin: 18px auto 0; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.03); font-size: 12.5px; color: var(--fg-3); }
.dt .stage-engine span { color: var(--fg); font-weight: 500; }

/* two labelled channel groups under the network visual: owned and earned / external */
.dt-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; text-align: left; }
.dt-group { padding: 16px 18px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg-1); min-width: 0; }
.dt-group small { display: flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-3); }
.dt-group small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--fl-a); box-shadow: 0 0 0 3px rgba(1,194,225,.18); }
.dt-group--earned small::before { background: var(--fl-b); box-shadow: 0 0 0 3px rgba(62,139,255,.18); }
.dt-group ul { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.dt-group li { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg-2); font-size: 13px; color: var(--fg-2); white-space: nowrap; }
.dt-group--earned li { border-color: rgba(62,139,255,.35); }
@media (max-width: 640px) { .dt-groups { grid-template-columns: 1fr; } }

/* numbered openers: tighten the gap to the section that follows */
.dt .ft-subhead + .section-grid .section-head { padding-top: 24px; padding-bottom: 32px; }
.dt .ft-subhead + .section-grid .split { padding-top: 40px; border-top: 0; }
.dt .ft-subhead + .section-grid .feature-grid { padding-top: 32px; }
.dt .split + .feature-grid { padding-top: 0; }

/* 02 scope: one card per channel */
.dt-scope { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; padding-bottom: 64px; }
.dt-scope .card { padding: 20px; }
.dt-scope .card b { display: block; font-size: 15px; font-weight: 500; }
.dt-scope .card small { display: inline-block; margin-top: 6px; font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fl-a); }
.dt-scope .card p { margin-top: 10px; font-size: 13.5px; color: var(--fg-2); }
@media (max-width: 1100px) { .dt-scope { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .dt-scope { grid-template-columns: 1fr; } }

/* 03 product UI mock */
.dt-ui .mock-panel .mock-row { padding: 7px 0; }
.dt-ui .mock-kpi { margin-bottom: 6px; }
@media (max-width: 860px) { .dt-ui .mock-grid--3 { grid-template-columns: 1fr; } }

/* 07 metrics tiles */
.dt-kpis strong { display: block; font-size: 34px; font-weight: 500; line-height: 1; letter-spacing: -0.03em; color: var(--fg); font-variant-numeric: tabular-nums; }
.dt-kpis strong em { margin-left: 5px; font-style: normal; font-size: 14px; letter-spacing: 0; color: var(--fg-3); }
.dt-kpis h3 { margin-top: 12px; }