/* ==================================================================
   OZAVION — Companies page styles (W2)
   Small page-only additions that compose existing components:
   - brand-accent the relationship .flow (numbers + connectors)
   - layout polish for the flagship .tile--brand cards
   - muted icon treatment for the future-cards
   Loaded via $page_styles on companies.php only. Shared files untouched.
   ================================================================== */

/* ------------------------------------------------------------------
   RELATIONSHIP FLOW — tint each step with its brand accent
   (.flow / .flow__step / .flow__num exist in sections.css; here we
    just read the per-step --brand-accent set inline on the page.)
   ------------------------------------------------------------------ */
.page--companies .flow__step {
    border-top: 2px solid color-mix(in srgb, var(--brand-accent, var(--color-accent)) 55%, transparent);
}
.page--companies .flow__step:hover {
    border-color: color-mix(in srgb, var(--brand-accent, var(--color-accent)) 45%, var(--color-border));
}
.page--companies .flow__step .flow__num {
    color: color-mix(in srgb, var(--brand-accent, var(--color-accent)) 85%, #fff);
    background: color-mix(in srgb, var(--brand-accent, var(--color-accent)) 16%, transparent);
    border-color: color-mix(in srgb, var(--brand-accent, var(--color-accent)) 35%, transparent);
}
.page--companies .flow__step .flow__brand {
    color: color-mix(in srgb, var(--brand-accent, var(--color-accent)) 80%, #fff);
}
.page--companies .flow__step + .flow__step::before {
    background: color-mix(in srgb, var(--brand-accent, var(--color-accent)) 70%, transparent);
}

/* ------------------------------------------------------------------
   FLAGSHIP CARDS — let the brand-accented tile carry tag + chips + cta
   ------------------------------------------------------------------ */
.company-flagship { gap: var(--space-3); }
.company-flagship__tag {
    color: color-mix(in srgb, var(--brand-accent, var(--color-accent)) 82%, #fff);
}
.company-flagship__chips { margin-top: var(--space-1); }
.company-flagship__cta {
    margin-top: auto;
    color: color-mix(in srgb, var(--brand-accent, var(--color-accent)) 85%, #fff);
}

/* ------------------------------------------------------------------
   FUTURE CARDS — quieter, dashed icon tile to match the placeholder feel
   ------------------------------------------------------------------ */
.company-future__icon {
    color: var(--color-text-muted);
    background: rgba(255, 255, 255, 0.03);
    border-color: var(--color-border-strong);
}